@linden.dev/vue-unclassify

vue-unclassify

Generate Vue3 TypeScript <script setup> SFCs directly from Vue2/3 class-based single file TypeScript components. Can also be used to convert vue-facing-decorator classes to <script setup>.

This is very much an opinionated alpha version that only attempts to transform the <script> element of an SFC. There are surely heaps of bugs.

The resulting script is always reordered as

<template>
    ... (minor replacements only as of now)
</template>
<script setup>
  // Static/non-class/non reactive code
  // Props
  // Emits
  // State (ref:s)
  // Computeds
  // Watches
  // Initialization (onMounted et al)
  // Functions (former member methods)
  // Exports (other than default Vue class)
</script>
<style>
   ... (as-is)
</style>

Usage

vue-unclassify [-r/--replace] [file patterns...] ...or run front end with interactive transpilation (WIP)

Features

• AST-based transpilation (90%) using acorn - a lot less fragile than existing RegEx tools
• Direct conversion to <script setup>
• Attempts to attach comments to original code

Useful links

Interactive online version AST explorer, many languages etc

TODOs

[ ] Bug: Watches for props are assuming a computed/ref target and watching x.value instead of props.x

[ ] Bug: Don't generate invalid uninitialized consts from static members; do static -> let, static readonly -> const

[ ] Shadowing locals need renaming (i.e. const ba = this.ba;)

[ ] Create defineEmits for $emit only present in <template>

[ ] Propagate errors to stdout instead of dumping them in the script tag

[ ] Transpile writable computeds (set methods)

[ ] Transpile $router

[ ] Improve method body extraction for created() (.substring hack)

Lower priority TODOs

[ ] this.$refs.xyz.focus -> const xyz = ref(); ... xyz.value.focus();

[ ] computed(..., () => { \n* return y.value; \n* }); -> computed(..., () => y.value);

[ ] For readonly members (public readonly CUT: LengthType = 'Custom';) -> skip the ref()

[ ] Handle multiple script/style sections (passthrough)

[ ] Refactor to allow custom section ordering/templates instead of hardcoded tag/script order

[ ] Resolve import name clashes (rename all locals if an imported name matched)

    import gridMapperService from "@/services/gridMapperService";
    const gridMapperService = computed((): any => gridMapperService);

Project setup

pnpm install

Run frontend for development

pnpm run build-web
pnpm run dev

Compile and minify CLI

pnpm run build

Run unit tests

pnpm run test