Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/turdwaster/vue-unclassify
Create Vue 3 script setup single file components from Vue2/3 class based SFCs
https://github.com/turdwaster/vue-unclassify
class-based-components vue vue-decorators vue-facing-decorator vue2 vue3-composition-api vue3-typescript vuejs
Last synced: about 9 hours ago
JSON representation
Create Vue 3 script setup single file components from Vue2/3 class based SFCs
- Host: GitHub
- URL: https://github.com/turdwaster/vue-unclassify
- Owner: turdwaster
- Created: 2024-05-06T08:03:22.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-05-28T10:52:01.000Z (4 months ago)
- Last Synced: 2024-09-19T13:10:04.754Z (9 days ago)
- Topics: class-based-components, vue, vue-decorators, vue-facing-decorator, vue2, vue3-composition-api, vue3-typescript, vuejs
- Language: TypeScript
- Homepage:
- Size: 323 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-unclassify
Generate Vue3 TypeScript `` 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
```html
<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)
... (as-is)
```
## 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 ``
* Attempts to attach comments to original code
## Useful links
[Interactive online version](https://turdwaster.github.io/linden_dev/)
[AST explorer, many languages etc](https://astexplorer.net/)
## TODOs
[ ] 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
```