Create Vue 3 script setup single file components from Vue2/3 class based SFCs
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>
vue-unclassify [-r/--replace] [file patterns...]
...or run front end with interactive transpilation (WIP)
acorn
- a lot less fragile than existing RegEx tools<script setup>
Interactive online version AST explorer, many languages etc
[ ] 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)
[ ] 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);
pnpm install
pnpm run build-web
pnpm run dev
pnpm run build
pnpm run test