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: Don't generate invalid uninitialized consts from static members; do static -> let, static readonly -> const
[ ] Propagate errors to stdout instead of dumping them in the script tag
[ ] Transpile $router
[ ] Improve method body extraction for created() (.substring hack)
Lower priority TODOs
[ ] this.$refs.xyz.focus -> const xyz = ref(); ... xyz.value.focus();
[ ] 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
