├── .gitignore
├── .tool-versions
├── tests
    ├── fixtures
    │   ├── empty
    │   │   ├── input.vue
    │   │   └── output.vue
    │   ├── propsArray
    │   │   ├── input.vue
    │   │   └── output.vue
    │   ├── defineComponent
    │   │   ├── output.vue
    │   │   └── input.vue
    │   ├── useSemisAndDoubleQuotes
    │   │   ├── output.vue
    │   │   └── input.vue
    │   ├── emits
    │   │   ├── output.vue
    │   │   └── input.vue
    │   ├── injectArray
    │   │   ├── input.vue
    │   │   └── output.vue
    │   ├── propTypes
    │   │   ├── output.vue
    │   │   └── input.vue
    │   ├── directives
    │   │   ├── output.vue
    │   │   └── input.vue
    │   ├── filters
    │   │   ├── output.vue
    │   │   └── input.vue
    │   ├── provideArray
    │   │   ├── input.vue
    │   │   └── output.vue
    │   ├── transformNode
    │   │   ├── output.vue
    │   │   └── input.vue
    │   ├── computedGetSet
    │   │   ├── output.vue
    │   │   └── input.vue
    │   ├── hooks
    │   │   ├── input.vue
    │   │   └── output.vue
    │   ├── example
    │   │   ├── output.vue
    │   │   └── input.vue
    │   └── issue-8
    │   │   ├── output.vue
    │   │   └── input.vue
    ├── tsconfig.json
    └── index.ts
├── docs
    ├── tree-sitter-javascript.wasm
    ├── tree-sitter-typescript.wasm
    ├── index.html
    └── browser.js
├── pkg.d.ts
├── src
    ├── tsconfig.json
    ├── cli.ts
    ├── index.ts
    └── core.ts
├── .release-it.json
├── tsconfig.base.json
├── scripts
    └── updateReadme.ts
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/.tool-versions:
--------------------------------------------------------------------------------
1 | pnpm 7.13.4
2 | python 3.10.5
3 | 


--------------------------------------------------------------------------------
/tests/fixtures/empty/input.vue:
--------------------------------------------------------------------------------
1 | <script>
2 | // nothing
3 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/empty/output.vue:
--------------------------------------------------------------------------------
1 | <script setup lang="ts">
2 | // nothing
3 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/propsArray/input.vue:
--------------------------------------------------------------------------------
1 | <script>
2 | export default {
3 |   props: ['id']
4 | }
5 | </script>


--------------------------------------------------------------------------------
/docs/tree-sitter-javascript.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tjk/vue-o2c/HEAD/docs/tree-sitter-javascript.wasm


--------------------------------------------------------------------------------
/docs/tree-sitter-typescript.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tjk/vue-o2c/HEAD/docs/tree-sitter-typescript.wasm


--------------------------------------------------------------------------------
/tests/fixtures/propsArray/output.vue:
--------------------------------------------------------------------------------
1 | <script setup lang="ts">
2 | defineProps<{
3 |   'id'?: any
4 | }>()
5 | </script>


--------------------------------------------------------------------------------
/pkg.d.ts:
--------------------------------------------------------------------------------
1 | declare module "tree-sitter-javascript"
2 | declare module "tree-sitter-typescript" {
3 |   const typescript: any
4 | }
5 | 


--------------------------------------------------------------------------------
/tests/fixtures/defineComponent/output.vue:
--------------------------------------------------------------------------------
1 | <script setup lang="ts">
2 | import { ref } from "vue"
3 | 
4 | const a = ref(0)
5 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/useSemisAndDoubleQuotes/output.vue:
--------------------------------------------------------------------------------
1 | <script setup lang="ts">
2 | import { ref } from "vue";
3 | 
4 | const a = ref("0");
5 | </script>


--------------------------------------------------------------------------------
/src/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../tsconfig.base.json",
3 |   "compilerOptions": {
4 |     "target": "es2016",
5 |     "module": "commonjs",
6 |   },
7 | }


--------------------------------------------------------------------------------
/tests/fixtures/useSemisAndDoubleQuotes/input.vue:
--------------------------------------------------------------------------------
1 | <script>
2 | export default {
3 |   data() {
4 |     return {
5 |       a: "0",
6 |     };
7 |   },
8 | };
9 | </script>


--------------------------------------------------------------------------------
/.release-it.json:
--------------------------------------------------------------------------------
1 | {
2 |   "hooks": {
3 |     "before:git:release": "sed -i '' 's;vue-o2c@[0-9.]*;vue-o2c@${version};' docs/index.html && git add docs/index.html"
4 |   }
5 | }


--------------------------------------------------------------------------------
/tests/fixtures/emits/output.vue:
--------------------------------------------------------------------------------
1 | <script setup lang="ts">
2 | const $emit = defineEmits(["specifiedButNotUsed", "usedButNotSpecfied"])
3 | 
4 | $emit("usedButNotSpecfied")
5 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/emits/input.vue:
--------------------------------------------------------------------------------
1 | <script>
2 | export default {
3 |   emits: ["specifiedButNotUsed"],
4 |   created() {
5 |     this.$emit("usedButNotSpecfied")
6 |   },
7 | }
8 | </script>


--------------------------------------------------------------------------------
/tests/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../tsconfig.base.json",
3 |   "compilerOptions": {
4 |     "moduleResolution": "node",
5 |     "module": "esnext",
6 |     "target": "es6",
7 |   },
8 | }


--------------------------------------------------------------------------------
/tsconfig.base.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "rootDir": ".",
4 |     "esModuleInterop": true,
5 |     "noEmit": true,
6 |   },
7 |   "include": ["tests/index.ts", "src", "pkg.d.ts"]
8 | }


--------------------------------------------------------------------------------
/tests/fixtures/injectArray/input.vue:
--------------------------------------------------------------------------------
1 | <script>
2 | export default {
3 |   inject: ["injectSomething"],
4 |   created() {
5 |     console.log("injected:", this.injectSomething)
6 |   },
7 | }
8 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/injectArray/output.vue:
--------------------------------------------------------------------------------
1 | <script setup lang="ts">
2 | import { inject } from "vue"
3 | 
4 | const $injectSomething = inject("injectSomething")
5 | 
6 | console.log("injected:", $injectSomething)
7 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/defineComponent/input.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { defineComponent } from "vue"
 3 | 
 4 | export default defineComponent({
 5 |   data() {
 6 |     return {
 7 |       a: 0,
 8 |     }
 9 |   },
10 | })
11 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/propTypes/output.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps<{
 3 |   string?: string
 4 |   number?: number
 5 |   boolean?: boolean
 6 |   array?: any[]
 7 |   object?: object
 8 |   date?: Date
 9 |   function?: Function
10 |   symbol?: symbol
11 | }>()
12 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/propTypes/input.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   props: {
 4 |     string: String,
 5 |     number: Number,
 6 |     boolean: Boolean,
 7 |     array: Array,
 8 |     object: Object,
 9 |     date: Date,
10 |     function: Function,
11 |     symbol: Symbol,
12 |   },
13 | }
14 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/directives/output.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import FocusTrap from 'primevue/focustrap';
 3 | 
 4 | // https://github.com/tjk/vue-o2c/issues/8
 5 | 
 6 | const vFocustrap = FocusTrap;
 7 | const vOther = {
 8 |   created(el, binding, vnode, prevVnode) {},
 9 |   beforeUpdate(el, binding, vnode, prevVnode) {},
10 | };
11 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/directives/input.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | // https://github.com/tjk/vue-o2c/issues/8
 3 | import FocusTrap from 'primevue/focustrap';
 4 | export default {
 5 |   directives: {
 6 |     focustrap: FocusTrap,
 7 |     other: {
 8 |       created(el, binding, vnode, prevVnode) {},
 9 |       beforeUpdate(el, binding, vnode, prevVnode) {},
10 |     }
11 |   },
12 | }
13 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/filters/output.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>{{concat(uppercase(hello), other)}}</div>
 3 | </template>
 4 | 
 5 | <script setup lang="ts">
 6 | import { ref } from "vue"
 7 | 
 8 | const hello = ref("hello")
 9 | const other = ref(1)
10 | 
11 | function concat(a0, a1) {
12 |   return a0 + a1
13 | }
14 | function uppercase(v) {
15 |   return v.toUpperCase()
16 | }
17 | </script>
18 | 


--------------------------------------------------------------------------------
/tests/fixtures/provideArray/input.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   provide: ["dataVar", 'computedVar', "methodVar"],
 4 |   data() {
 5 |     return {
 6 |       dataVar: 0,
 7 |     }
 8 |   },
 9 |   computed: {
10 |     computedVar() {
11 |       return "1"
12 |     },
13 |   },
14 |   methods: {
15 |     methodVar() {
16 |       console.log("test")
17 |     },
18 |   },
19 | }
20 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/provideArray/output.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed, provide, ref } from "vue"
 3 | 
 4 | const dataVar = ref(0)
 5 | 
 6 | const computedVar = computed(() => {
 7 |   return "1"
 8 | })
 9 | 
10 | function methodVar() {
11 |   console.log("test")
12 | }
13 | 
14 | provide("dataVar", dataVar)
15 | provide("computedVar", computedVar)
16 | provide("methodVar", methodVar)
17 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/transformNode/output.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | 
 4 | // test this.a, this['b'], this["c"], "this.d"
 5 | // what happens with more complex structures (eg. this['g'+'h'])
 6 | 
 7 | const a = ref(0)
 8 | const b = ref(1)
 9 | const c = ref(2)
10 | const d = ref(3)
11 | 
12 | function test() {
13 |   return `${a.value} ${b.value} ${c.value} this.d this.e`
14 | }
15 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/filters/input.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>{{hello | uppercase | concat(other)}}</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   data() {
 8 |     return {
 9 |       hello: "hello",
10 |       other: 1,
11 |     }
12 |   },
13 |   filters: {
14 |     concat: (a0, a1) => {
15 |       return a0 + a1
16 |     },
17 |     uppercase(v) {
18 |       return v.toUpperCase()
19 |     },
20 |   },
21 | }
22 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/computedGetSet/output.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed, ref } from "vue"
 3 | 
 4 | const firstName = ref("jane")
 5 | const lastName = ref("smith")
 6 | 
 7 | const fullName = computed({
 8 |   get: () => {
 9 |     return `${firstName.value} ${lastName.value}`
10 |   },
11 |   set(v) {
12 |     const parts = v.split(" ")
13 |     firstName.value = parts[0]
14 |     lastName.value = parts[1]
15 |   },
16 | })
17 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/transformNode/input.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | // test this.a, this['b'], this["c"], "this.d"
 3 | // what happens with more complex structures (eg. this['g'+'h'])
 4 | export default {
 5 |   data() {
 6 |     return {
 7 |       a: 0,
 8 |       b: 1,
 9 |       c: 2,
10 |       d: 3,
11 |     }
12 |   },
13 |   methods: {
14 |     test() {
15 |       return `${this.a} ${this['b']} ${this["c"]} this.d this.e`
16 |     },
17 |   },
18 | }
19 | </script>


--------------------------------------------------------------------------------
/src/cli.ts:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | import * as path from "path"
 3 | import { transformPath } from "./index"
 4 | 
 5 | if (!process.argv[2]) {
 6 |   console.error("usage: vue-o2c </path/to/sfc.vue>")
 7 |   process.exit(1)
 8 | }
 9 | try {
10 |   const state = transformPath(path.resolve(process.argv[2]))
11 |   if (!state.transformed) {
12 |     process.exit(1)
13 |   }
14 |   console.log(state.transformed)
15 | } catch (e) {
16 |   console.error(e)
17 |   process.exit(1)
18 | }


--------------------------------------------------------------------------------
/tests/fixtures/computedGetSet/input.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { defineComponent } from "vue"
 3 | 
 4 | export default defineComponent({
 5 |   data() {
 6 |     return {
 7 |       firstName: "jane",
 8 |       lastName: "smith",
 9 |     }
10 |   },
11 |   computed: {
12 |     fullName: {
13 |       get: () => {
14 |         return `${this.firstName} ${this.lastName}`
15 |       },
16 |       set(v) {
17 |         const parts = v.split(" ")
18 |         this.firstName = parts[0]
19 |         this.lastName = parts[1]
20 |       },
21 |     },
22 |   },
23 | })
24 | </script>


--------------------------------------------------------------------------------
/tests/fixtures/hooks/input.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   beforeCreate() {
 4 |     console.log("beforeCreate")
 5 |   },
 6 |   created() {
 7 |     console.log("created")
 8 |   },
 9 |   beforeMount() {
10 |     console.log("beforeMount")
11 |   },
12 |   mounted() {
13 |     console.log("mounted")
14 |   },
15 |   beforeUpdate() {
16 |     console.log("beforeUpdate")
17 |   },
18 |   updated() {
19 |     console.log("updated")
20 |   },
21 |   beforeDestroy() {
22 |     console.log("beforeDestroy")
23 |   },
24 |   destroyed() {
25 |     console.log("destroyed")
26 |   },
27 |   errorCaptured(errArg) {
28 |     console.error("errorCaptured", errArg)
29 |   },
30 | }
31 | </script>


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import fs from "fs"
 2 | import Parser from "tree-sitter"
 3 | import javascript from "tree-sitter-javascript"
 4 | import { typescript } from "tree-sitter-typescript"
 5 | import { scan, transform as _transform, type State } from "./core"
 6 | 
 7 | export function transformPath(sfcPath: string): State {
 8 |   const sfc = fs.readFileSync(sfcPath, "utf8")
 9 |   return transform(sfc)
10 | }
11 | 
12 | export function transform(sfc: string): State {
13 |   const state = scan(sfc)
14 |   if (!state.scan.script) {
15 |     return state
16 |   }
17 |   const parser = new Parser()
18 |   parser.setLanguage(state.scan.scriptTs ? typescript : javascript)
19 |   _transform(state, parser)
20 |   return state
21 | }


--------------------------------------------------------------------------------
/tests/fixtures/hooks/output.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onErrorCaptured, onMounted, onUnmounted, onUpdated } from "vue"
 3 | 
 4 | console.log("beforeCreate")
 5 | 
 6 | console.log("created")
 7 | 
 8 | onBeforeMount(() => {
 9 |   console.log("beforeMount")
10 | })
11 | 
12 | onMounted(() => {
13 |   console.log("mounted")
14 | })
15 | 
16 | onBeforeUpdate(() => {
17 |   console.log("beforeUpdate")
18 | })
19 | 
20 | onUpdated(() => {
21 |   console.log("updated")
22 | })
23 | 
24 | onBeforeUnmount(() => {
25 |   console.log("beforeDestroy")
26 | })
27 | 
28 | onUnmounted(() => {
29 |   console.log("destroyed")
30 | })
31 | 
32 | onErrorCaptured((errArg: Error) => {
33 |   console.error("errorCaptured", errArg)
34 | })
35 | </script>


--------------------------------------------------------------------------------
/scripts/updateReadme.ts:
--------------------------------------------------------------------------------
 1 | import cp from "child_process"
 2 | import fs from "fs"
 3 | import { fileURLToPath } from "url"
 4 | import path from "path"
 5 | 
 6 | const __filename = fileURLToPath(import.meta.url);
 7 | const __dirname = path.dirname(__filename)
 8 | 
 9 | const readmePath = path.resolve(__dirname, "../README.md")
10 | const data = fs.readFileSync(readmePath, "utf8")
11 | const lines = data.split("\n")
12 | 
13 | let newLines: string[] = []
14 | for (let i = 0; i < lines.length; i++) {
15 |   const md = lines[i].match(/^```[a-z]+ (.*)$/)
16 |   if (md) {
17 |     newLines.push(lines[i])
18 |     do {
19 |       i++
20 |     } while (!lines[i].match(/^```/))
21 |     newLines.push(String(cp.execSync(md[1])))
22 |   }
23 |   newLines.push(lines[i])
24 | }
25 | 
26 | fs.writeFileSync(readmePath, newLines.join("\n"))


--------------------------------------------------------------------------------
/tests/fixtures/example/output.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | div(ref="$el")
 3 |   p Wonderful
 4 |   RewrittenComponentName(prop="value")
 5 | </template>
 6 | 
 7 | <script setup lang="ts">
 8 | import { onMounted, ref, watch } from "vue"
 9 | import { useRoute } from "vue-router"
10 | import SomeComponent from "@components/SomeComponent.vue"
11 | 
12 | const greetingDefault = "Hello"
13 | 
14 | const RewrittenComponentName = SomeComponent
15 | const InlineComponent = {
16 |   render() {
17 |     // return h('div', 'inline component')
18 |   },
19 | }
20 | 
21 | const props = withDefaults(defineProps<{
22 |   greeting?: string
23 |   loading: boolean
24 |   requiredFalse?: string
25 | }>(), {
26 |   greeting: greetingDefault,
27 | })
28 | 
29 | const $route = useRoute()
30 | const $this = {}
31 | 
32 | const $el = ref<HTMLElement | undefined>()
33 | const name = ref($route.query.name || 'John')
34 | const watchMethod = ref(0)
35 | const watchObject = ref({
36 |   key: 1,
37 | })
38 | 
39 | onMounted(() => {
40 |   meth()
41 |   keyValue()
42 |   delete $this.initializing // should not become `delete initializing` (so use $this)
43 | })
44 | 
45 | watch(() => watchMethod.value, (v) => {
46 |   console.log("watchMethod", v)
47 | })
48 | watch(() => watchObject.value.key, async (v, ov) => {
49 |   console.log("watchObject", v, ov)
50 | }, {
51 |   deep: true,
52 |   immediate: true,
53 | })
54 | 
55 | function meth() {
56 |   console.log(`${props.greeting} ${name.value} ${$el.value.clientHeight}`)
57 | }
58 | async function keyValue(a) {
59 |   await a
60 | }
61 | 
62 | const somethingBelow = 42
63 | </script>
64 | 
65 | <style scoped>
66 | :root {
67 |   background: red;
68 | }
69 | </style>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-o2c",
 3 |   "version": "0.1.26",
 4 |   "description": "Vue Options API to Composition API converter",
 5 |   "main": "dist/index.js",
 6 |   "module": "dist/index.mjs",
 7 |   "bin": "dist/cli.js",
 8 |   "types": "dist/index.d.ts",
 9 |   "files": [
10 |     "/dist"
11 |   ],
12 |   "scripts": {
13 |     "build-tsup": "rm -rf dist && tsup src/index.ts src/cli.ts --format cjs,esm --dts",
14 |     "build": "pnpm run build-tsup && chmod +x dist/cli.js && pnpm run build:browser",
15 |     "build:browser": "esbuild --bundle --minify --format=esm --platform=browser src/core.ts --outfile=dist/browser.js",
16 |     "prepublishOnly": "pnpm run test && pnpm run build",
17 |     "update:readme": "tsx scripts/updateReadme.ts",
18 |     "test": "tsx --tsconfig tests/tsconfig.json tests/index.ts"
19 |   },
20 |   "keywords": [],
21 |   "author": "TJ Koblentz",
22 |   "license": "MIT",
23 |   "devDependencies": {
24 |     "@types/diff": "^5.0.3",
25 |     "@types/node": "^18.11.3",
26 |     "diff": "^5.1.0",
27 |     "esbuild": "^0.15.12",
28 |     "picocolors": "^1.0.0",
29 |     "release-it": "^15.5.0",
30 |     "tree-sitter-cli": "^0.20.7",
31 |     "tsup": "^6.7.0",
32 |     "tsx": "^3.10.4",
33 |     "typescript": "^4.8.4",
34 |     "web-tree-sitter": "^0.20.7"
35 |   },
36 |   "dependencies": {
37 |     "safe-identifier": "^0.4.2",
38 |     "tree-sitter": "^0.20.0",
39 |     "tree-sitter-javascript": "^0.19.0",
40 |     "tree-sitter-typescript": "^0.20.1"
41 |   },
42 |   "repository": {
43 |     "type": "git",
44 |     "url": "git+https://github.com/tjk/vue-o2c.git"
45 |   },
46 |   "bugs": {
47 |     "url": "https://github.com/tjk/vue-o2c/issues"
48 |   },
49 |   "homepage": "https://github.com/tjk/vue-o2c#readme",
50 |   "peerDependencies": {
51 |     "web-tree-sitter": "^0.20.7"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/tests/fixtures/example/input.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | div
 3 |   p Wonderful
 4 |   RewrittenComponentName(prop="value")
 5 | </template>
 6 | 
 7 | <script>
 8 | import SomeComponent from "@components/SomeComponent.vue"
 9 | 
10 | const greetingDefault = "Hello"
11 | 
12 | export default {
13 |   components: {
14 |     RewrittenComponentName: SomeComponent,
15 |     InlineComponent: {
16 |       render() {
17 |         // return h('div', 'inline component')
18 |       },
19 |     }
20 |   },
21 |   props: {
22 |     greeting: {
23 |       type: String,
24 |       default: greetingDefault,
25 |     },
26 |     loading: {
27 |       type: Boolean,
28 |       required: true,
29 |     },
30 |     requiredFalse: {
31 |       type: String,
32 |       required: false,
33 |     },
34 |   },
35 |   data() {
36 |     // this.initializing = true -- would make data() "complex" (need to improve)
37 |     return {
38 |       name: this.$route.query.name || 'John',
39 |       watchMethod: 0,
40 |       watchObject: {
41 |         key: 1,
42 |       },
43 |     }
44 |   },
45 |   methods: {
46 |     meth() {
47 |       console.log(`${this.greeting} ${this.name} ${this.$el.clientHeight}`)
48 |     },
49 |     keyValue: async (a) => {
50 |       await a
51 |     },
52 |   },
53 |   mounted() {
54 |     this.meth()
55 |     this.keyValue()
56 |     delete this.initializing // should not become `delete initializing` (so use $this)
57 |   },
58 |   watch: {
59 |     ["watchMethod"](v) {
60 |       console.log("watchMethod", v)
61 |     },
62 |     "watchObject.key": {
63 |       deep: true,
64 |       immediate: true,
65 |       async handler(v, ov) {
66 |         console.log("watchObject", v, ov)
67 |       },
68 |     },
69 |   },
70 | }
71 | 
72 | const somethingBelow = 42
73 | </script>
74 | 
75 | <style scoped>
76 | :root {
77 |   background: red;
78 | }
79 | </style>


--------------------------------------------------------------------------------
/tests/fixtures/issue-8/output.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-focustrap :class="containerClass" aria-live="polite">
 3 |       <div v-if="!d_active" ref="display" :class="displayClass" :tabindex="$attrs.tabindex || '0'" role="button" @click="open" @keydown.enter="open" v-bind="displayProps">
 4 |           <slot name="display"></slot>
 5 |       </div>
 6 |       <div v-else class="p-inplace-content">
 7 |           <slot name="content"></slot>
 8 |           <IPButton v-if="closable" :icon="closeIcon" :aria-label="closeAriaLabel" @click="close" v-bind="closeButtonProps" />
 9 |       </div>
10 |   </div>
11 | </template>
12 | 
13 | <script setup lang="ts">
14 | import { computed, inject, ref, watch } from 'vue';
15 | import Button from 'primevue/button';
16 | import FocusTrap from 'primevue/focustrap';
17 | 
18 | const IPButton = Button;
19 | 
20 | const props = withDefaults(defineProps<{
21 |   closable?: boolean
22 |   active?: boolean
23 |   disabled?: boolean
24 |   closeIcon?: string
25 |   displayProps?: boolean
26 |   closeButtonProps?: boolean
27 | }>(), {
28 |   closable: false,
29 |   active: false,
30 |   disabled: false,
31 |   closeIcon: 'pi pi-times',
32 |   displayProps: null,
33 |   closeButtonProps: null,
34 | });
35 | 
36 | const $primevue = inject('primevue') /* FIXME vue-o2c */;
37 | 
38 | const $emit = defineEmits(['open', 'close', 'update:active']);
39 | 
40 | const d_active = ref(props.active);
41 | const display = ref();
42 | 
43 | const containerClass = computed(() => {
44 |     return ['p-inplace p-component', { 'p-inplace-closable': props.closable }];
45 | });
46 | const displayClass = computed(() => {
47 |     return ['p-inplace-display', { 'p-disabled': props.disabled }];
48 | });
49 | const closeAriaLabel = computed(() => {
50 |     return $primevue.config.locale.aria ? $primevue.config.locale.aria.close : undefined;
51 | });
52 | 
53 | watch(() => props.active, (newValue) => {
54 |     d_active.value = newValue;
55 | });
56 | 
57 | function open(event) {
58 |           if (props.disabled) {
59 |               return;
60 |           }
61 | 
62 |           $emit('open', event);
63 |           d_active.value = true;
64 |           $emit('update:active', true);
65 |       };
66 | function close(event) {
67 |     $emit('close', event);
68 |     d_active.value = false;
69 |     $emit('update:active', false);
70 |     setTimeout(() => {
71 |         display.value.focus();
72 |     }, 0);
73 | };
74 | 
75 | const vFocustrap = FocusTrap;
76 | </script>
77 | 
78 | <style>
79 | .p-inplace .p-inplace-display {
80 |   display: inline;
81 |   cursor: pointer;
82 | }
83 | 
84 | .p-inplace .p-inplace-content {
85 |   display: inline;
86 | }
87 | 
88 | .p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
89 |   display: flex;
90 | }
91 | 
92 | .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
93 |   flex: 1 1 auto;
94 |   width: 1%;
95 | }
96 | </style>


--------------------------------------------------------------------------------
/tests/fixtures/issue-8/input.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-focustrap :class="containerClass" aria-live="polite">
  3 |       <div v-if="!d_active" ref="display" :class="displayClass" :tabindex="$attrs.tabindex || '0'" role="button" @click="open" @keydown.enter="open" v-bind="displayProps">
  4 |           <slot name="display"></slot>
  5 |       </div>
  6 |       <div v-else class="p-inplace-content">
  7 |           <slot name="content"></slot>
  8 |           <IPButton v-if="closable" :icon="closeIcon" :aria-label="closeAriaLabel" @click="close" v-bind="closeButtonProps" />
  9 |       </div>
 10 |   </div>
 11 | </template>
 12 | 
 13 | <script>
 14 | import Button from 'primevue/button';
 15 | import FocusTrap from 'primevue/focustrap';
 16 | 
 17 | export default {
 18 |   name: 'Inplace',
 19 |   emits: ['open', 'close', 'update:active'],
 20 |   props: {
 21 |       closable: {
 22 |           type: Boolean,
 23 |           default: false
 24 |       },
 25 |       active: {
 26 |           type: Boolean,
 27 |           default: false
 28 |       },
 29 |       disabled: {
 30 |           type: Boolean,
 31 |           default: false
 32 |       },
 33 |       closeIcon: {
 34 |           type: String,
 35 |           default: 'pi pi-times'
 36 |       },
 37 |       displayProps: {
 38 |           type: Boolean, // initially null
 39 |           default: null
 40 |       },
 41 |       closeButtonProps: {
 42 |           type: Boolean, // initially null
 43 |           default: null
 44 |       }
 45 |   },
 46 |   data() {
 47 |       return {
 48 |           d_active: this.active
 49 |       };
 50 |   },
 51 |   watch: {
 52 |       active(newValue) {
 53 |           this.d_active = newValue;
 54 |       }
 55 |   },
 56 |   methods: {
 57 |       open(event) {
 58 |           if (this.disabled) {
 59 |               return;
 60 |           }
 61 | 
 62 |           this.$emit('open', event);
 63 |           this.d_active = true;
 64 |           this.$emit('update:active', true);
 65 |       },
 66 |       close(event) {
 67 |           this.$emit('close', event);
 68 |           this.d_active = false;
 69 |           this.$emit('update:active', false);
 70 |           setTimeout(() => {
 71 |               this.$refs.display.focus();
 72 |           }, 0);
 73 |       }
 74 |   },
 75 |   computed: {
 76 |       containerClass() {
 77 |           return ['p-inplace p-component', { 'p-inplace-closable': this.closable }];
 78 |       },
 79 |       displayClass() {
 80 |           return ['p-inplace-display', { 'p-disabled': this.disabled }];
 81 |       },
 82 |       closeAriaLabel() {
 83 |           return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
 84 |       }
 85 |   },
 86 |   components: {
 87 |       IPButton: Button
 88 |   },
 89 |   directives: {
 90 |       focustrap: FocusTrap
 91 |   }
 92 | };
 93 | </script>
 94 | 
 95 | <style>
 96 | .p-inplace .p-inplace-display {
 97 |   display: inline;
 98 |   cursor: pointer;
 99 | }
100 | 
101 | .p-inplace .p-inplace-content {
102 |   display: inline;
103 | }
104 | 
105 | .p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
106 |   display: flex;
107 | }
108 | 
109 | .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
110 |   flex: 1 1 auto;
111 |   width: 1%;
112 | }
113 | </style>


--------------------------------------------------------------------------------
/tests/index.ts:
--------------------------------------------------------------------------------
  1 | import fs from "fs"
  2 | import path from "path"
  3 | import { fileURLToPath } from "url"
  4 | import { diffLines } from "diff"
  5 | import { default as pc } from "picocolors"
  6 | import { transformPath } from "../src/index"
  7 | 
  8 | const __filename = fileURLToPath(import.meta.url);
  9 | const __dirname = path.dirname(__filename)
 10 | 
 11 | function printDiff(from: string, to: string) {
 12 |   const diff = diffLines(from, to)
 13 |   diff.forEach(part => {
 14 |     let color = part.added ? "green" : part.removed ? "red" : "gray"
 15 |     const md = part.value.match(/(\s*)$/)
 16 |     let printNewline = true
 17 |     if (md) {
 18 |       if (md.index) {
 19 |         process.stderr.write((pc as any)[color](part.value.substring(0, md.index)))
 20 |       }
 21 |       if (md[1].length && (color === "green" || color === "red")) {
 22 |         printNewline = false
 23 |         color = `bg${color[0].toUpperCase() + color.substring(1)}`
 24 |         // remove one of the newlines unless whole part is whitespace
 25 |         let str = md[1]
 26 |         if (!str.match(/\n\n$/) && !part.value.match(/^\s+$/)) {
 27 |           str = str.slice(0, str.length - 1)
 28 |           printNewline = true
 29 |         }
 30 |         if (str.length) {
 31 |           // \n\n\n will write 4 newlines (with first one not colored)!?!?!?
 32 |           str.split("").forEach((s: string) => {
 33 |             if (s === "\n") {
 34 |               process.stderr.write((pc as any)[color]("\\n"))
 35 |               process.stderr.write("\n")
 36 |             } else {
 37 |               process.stderr.write((pc as any)[color](s))
 38 |             }
 39 |           })
 40 |         }
 41 |       }
 42 |     }
 43 |     if (printNewline) {
 44 |       process.stderr.write("\n")
 45 |     }
 46 |   })
 47 |   console.log()
 48 | }
 49 | 
 50 | function main(str?: string) {
 51 |   let failed = false
 52 |   const fixturesPath = path.resolve(__dirname, "./fixtures")
 53 |   for (const folder of fs.readdirSync(fixturesPath)) {
 54 |     if (str && !folder.includes(str)) {
 55 |       continue
 56 |     }
 57 |     console.log(`- ${folder}`)
 58 |     // error.txt or output.vue
 59 |     const inputPath = path.join(fixturesPath, folder, "input.vue")
 60 |     const outputPath = path.join(fixturesPath, folder, "output.vue")
 61 |     if (fs.existsSync(outputPath)) {
 62 |       const expected = fs.readFileSync(outputPath, "utf8")
 63 |       const state = transformPath(inputPath)
 64 |       if (!state.transformed) {
 65 |         console.error(pc.red("Not output when there should have been"))
 66 |         failed = true
 67 |       } else if (state.transformed !== expected) {
 68 |         console.log()
 69 |         printDiff(state.transformed, expected)
 70 |         console.log()
 71 |         // /*
 72 |         console.log("actual:")
 73 |         console.log()
 74 |         console.log(`|${pc.red(state.transformed)}|`)
 75 |         console.log()
 76 |         console.log("expected:")
 77 |         console.log()
 78 |         console.log(`|${pc.green(expected)}|`)
 79 |         console.log()
 80 |         // */
 81 |         failed = true
 82 |       }
 83 |     } else {
 84 |       const outputPath = path.join(fixturesPath, folder, "output.vue")
 85 |       const expected = fs.readFileSync(outputPath, "utf8")
 86 |       let errorStack
 87 |       try {
 88 |         transformPath(inputPath)
 89 |       } catch (e) {
 90 |         errorStack = (e as any).stack
 91 |       }
 92 |       if (errorStack !== expected) {
 93 |         console.log()
 94 |         printDiff(errorStack, expected)
 95 |         console.log()
 96 |         failed = true
 97 |       }
 98 |     }
 99 |   }
100 |   if (failed) {
101 |     process.exit(1)
102 |   } else {
103 |     console.log()
104 |     console.log("Tests succeeded!")
105 |   }
106 | }
107 | 
108 | try {
109 |   main(process.argv[2])
110 | } catch (e) {
111 |   console.error(e)
112 |   process.exit(1)
113 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-o2c - Vue Options API to Composition API
  2 | 
  3 | **[Demo / Online Playground](https://tjk.github.io/vue-o2c/)**
  4 | 
  5 | **WORK IN PROGRESS** -- the following is not done:
  6 | 
  7 | - bunch of stuff still not implemented (working through case by case)
  8 | - publish package correctly for CLI command to work (need to check)
  9 | - data() preamble -- if there is preamble maybe just create refs then use the function to set them
 10 | - handle setup() in options api
 11 | - allow options to configure (eg. no typescript)
 12 | - $el needs to try to rewrite part of template
 13 | - would like to maintain indentation
 14 | 
 15 | **After running, check for FIXME comments**
 16 | 
 17 | Composition API does not allow easy access of `app.config.globalProperties` like options API does.
 18 | vue-o2c takes care of some basic cases (eg. `this.$router` assuming vue-router) but for others, you will
 19 | see comments like the following and you must adjust the code depending on how you provide these systems.
 20 | 
 21 | ```typescript
 22 | const $primevue = inject("primevue") /* FIXME vue-o2c */
 23 | ```
 24 | 
 25 | ## Usage
 26 | 
 27 | ### via CLI
 28 | 
 29 | *This is not working due to a publishing issue I need to fix...*
 30 | 
 31 | ```bash
 32 | $ npx vue-o2c /path/to/sfc.vue
 33 | ...
 34 | <transformed sfc code>
 35 | ...
 36 | ```
 37 | 
 38 | ### Programmatically
 39 | 
 40 | ```bash
 41 | $ pnpm add -D vue-o2c
 42 | ```
 43 | 
 44 | *Please keep in mind, API is very experimental and likely will change!*
 45 | 
 46 | ```typescript
 47 | import { transformPath, transform, type State } from "vue-o2c"
 48 | 
 49 | const s1: State = transformPath("/path/to/sfc.vue")
 50 | const s2: State = transform("<script>\nexport default {\n  props: {\n    a: String,\n  }\n}\n</script>")
 51 | // s1.transformed and s2.transformed will both contained transformed code
 52 | ```
 53 | 
 54 | ## Example
 55 | 
 56 | Given the following file:
 57 | 
 58 | ```vue cat tests/fixtures/example/input.vue
 59 | <template lang="pug">
 60 | div
 61 |   p Wonderful
 62 | </template>
 63 | 
 64 | <script>
 65 | export default {
 66 |   props: {
 67 |     greeting: {
 68 |       type: String,
 69 |       default: "Hello",
 70 |     },
 71 |   },
 72 |   data() {
 73 |     // this.initializing = true -- would make data() "complex" (need to improve)
 74 |     return {
 75 |       name: this.$route.query.name || 'John',
 76 |       watchMethod: 0,
 77 |       watchObject: {
 78 |         key: 1,
 79 |       },
 80 |     }
 81 |   },
 82 |   methods: {
 83 |     meth() {
 84 |       console.log(`${this.greeting} ${this.name} ${this.$el.clientHeight}`)
 85 |     },
 86 |     keyValue: async (a) => {
 87 |       await a
 88 |     },
 89 |   },
 90 |   mounted() {
 91 |     this.meth()
 92 |     this.keyValue()
 93 |     delete this.initializing // should not become `delete initializing` (so use $this)
 94 |   },
 95 |   watch: {
 96 |     ["watchMethod"](v) {
 97 |       console.log("watchMethod", v)
 98 |     },
 99 |     "watchObject.key": {
100 |       deep: true,
101 |       immediate: true,
102 |       async handler(v, ov) {
103 |         console.log("watchObject", v, ov)
104 |       },
105 |     },
106 |   },
107 | }
108 | </script>
109 | 
110 | <style scoped>
111 | :root {
112 |   background: red;
113 | }
114 | </style>
115 | ```
116 | 
117 | ```bash
118 | $ git clone git@github.com:tjk/vue-o2c.git
119 | $ cd vue-o2c
120 | $ pnpm i
121 | $ pnpm exec tsx index.ts ./example.vue
122 | ```
123 | 
124 | Will output the following:
125 | 
126 | ```vue pnpm exec tsx src/cli.ts ./tests/fixtures/example/input.vue
127 | <template lang="pug">
128 | div(ref="$el")
129 |   p Wonderful
130 | </template>
131 | 
132 | <script setup lang="ts">
133 | import { onMounted, ref, watch } from "vue"
134 | import { useRoute } from "vue-router"
135 | 
136 | const props = withDefaults(defineProps<{
137 |   greeting?: string
138 | }>(), {
139 |   greeting: "Hello",
140 | })
141 | 
142 | const $route = useRoute()
143 | const $this = {}
144 | 
145 | const $el = ref<HTMLElement | undefined>()
146 | const name = ref($route.query.name || 'John')
147 | const watchMethod = ref(0)
148 | const watchObject = ref({
149 |   key: 1,
150 | })
151 | 
152 | onMounted(() => {
153 |   meth()
154 |   keyValue()
155 |   delete $this.initializing // should not become `delete initializing` (so use $this)
156 | })
157 | 
158 | watch(() => watchMethod.value, (v) => {
159 |   console.log("watchMethod", v)
160 | })
161 | watch(() => watchObject.value.key, async (v, ov) => {
162 |   console.log("watchObject", v, ov)
163 | }, {
164 |   deep: true,
165 |   immediate: true,
166 | })
167 | 
168 | function meth() {
169 |   console.log(`${props.greeting} ${name.value} ${$el.value.clientHeight}`)
170 | }
171 | async function keyValue(a) {
172 |   await a
173 | }
174 | </script>
175 | 
176 | <style scoped>
177 | :root {
178 |   background: red;
179 | }
180 | </style>
181 | 
182 | ```


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" style="height:100%">
  3 |   <head>
  4 |     <style>
  5 | * {box-sizing:border-box;margin:0;padding:0}
  6 | h1, h2, p {font-family:system-ui;font-weight:normal}
  7 | .CodeMirror {height:100% !important}
  8 | #input, #output {border:1px solid #ccc}
  9 |     </style>
 10 |     <link rel="stylesheet" href="https://unpkg.com/codemirror@5.25.0/lib/codemirror.css">
 11 |   </head>
 12 |   <body style="padding:10px;height:100%;overflow:hidden;display:flex;flex-direction:column">
 13 |     <h1>vue-o2c</h1>
 14 |     <p>Vue Options API to Composition API Converter &middot; <a href="https://github.com/tjk/vue-o2c">view on GitHub</a></p>
 15 |     <p style="margin:10px 0"><em style="background:yellow">Try editing the input below to see the transformations in the output.</em></p>
 16 |     <div style="flex-grow:1;overflow:hidden;display:flex;column-gap:10px">
 17 |       <div style="width:50%;display:flex;flex-direction:column">
 18 |         <h2 style="margin-bottom:10px;border-bottom:1px solid #ccc">Input</h2>
 19 |         <div id="input" style="flex-grow:1;overflow:hidden"></div>
 20 |       </div>
 21 |       <div style="width:50%;display:flex;flex-direction:column">
 22 |         <h2 style="margin-bottom:10px;border-bottom:1px solid #ccc">Output</h2>
 23 |         <div id="output" style="flex-grow:1;overflow:hidden"></div>
 24 |       </div>
 25 |     </div>
 26 |     <script src="https://unpkg.com/codemirror@5.25.0/lib/codemirror.js"></script>
 27 |     <script src="https://unpkg.com/codemirror@5.25.0/addon/mode/overlay.js"></script>
 28 |     <script src="https://unpkg.com/codemirror@5.25.0/addon/mode/simple.js"></script>
 29 |     <script src="https://unpkg.com/codemirror@5.25.0/mode/htmlmixed/htmlmixed.js"></script>
 30 |     <script src="https://unpkg.com/codemirror@5.25.0/mode/xml/xml.js"></script>
 31 |     <script src="https://unpkg.com/codemirror@5.25.0/mode/javascript/javascript.js"></script>
 32 |     <script src="https://unpkg.com/codemirror@5.25.0/mode/coffeescript/coffeescript.js"></script>
 33 |     <script src="https://unpkg.com/codemirror@5.25.0/mode/css/css.js"></script>
 34 |     <script src="https://unpkg.com/codemirror@5.25.0/mode/sass/sass.js"></script>
 35 |     <script src="https://unpkg.com/codemirror@5.25.0/mode/stylus/stylus.js"></script>
 36 |     <script src="https://unpkg.com/codemirror@5.25.0/mode/pug/pug.js"></script>
 37 |     <script src="https://unpkg.com/codemirror@5.25.0/mode/handlebars/handlebars.js"></script>
 38 |     <script src="https://unpkg.com/codemirror@5.25.0/mode/vue/vue.js"></script>
 39 |     <script src="https://unpkg.com/web-tree-sitter@0.20.7/tree-sitter.js"></script>
 40 |     <script type="module">
 41 | import { scan, transform as _transform } from "https://unpkg.com/vue-o2c@0.1.26/dist/browser.js"
 42 | 
 43 | export default async function transform(sfc) {
 44 |   const state = scan(sfc)
 45 |   if (!state.scan.script) {
 46 |     return state
 47 |   }
 48 |   const Parser = window.TreeSitter
 49 |   await Parser.init()
 50 |   const parser = new Parser()
 51 |   parser.setLanguage(await Parser.Language.load(state.scan.scriptTs 
 52 |     ? "./tree-sitter-typescript.wasm"
 53 |     : "./tree-sitter-javascript.wasm"
 54 |   ))
 55 |   _transform(state, parser)
 56 |   return state
 57 | }
 58 | 
 59 | const input = document.getElementById("input");
 60 | const output = document.getElementById("output");
 61 | 
 62 | const initialInputValue = `<template lang="pug">
 63 | div
 64 |   p Wonderful
 65 | </template>
 66 | 
 67 | <script>
 68 | export default {
 69 |   props: {
 70 |     greeting: {
 71 |       type: String,
 72 |       default: "Hello",
 73 |     },
 74 |   },
 75 |   data() {
 76 |     // this.initializing = true -- would make data() "complex" (need to improve)
 77 |     return {
 78 |       name: this.$route.query.name || 'John',
 79 |       watchMethod: 0,
 80 |       watchObject: {
 81 |         key: 1,
 82 |       },
 83 |     }
 84 |   },
 85 |   methods: {
 86 |     meth() {
 87 |       console.log(\`\${this.greeting} \${this.name} \${this.$el.clientHeight}\`)
 88 |     },
 89 |     keyValue: async (a) => {
 90 |       await a
 91 |     },
 92 |   },
 93 |   mounted() {
 94 |     this.meth()
 95 |     this.keyValue()
 96 |     delete this.initializing // should not become \`delete initializing\` (so use $this)
 97 |   },
 98 |   watch: {
 99 |     ["watchMethod"](v) {
100 |       console.log("watchMethod", v)
101 |     },
102 |     "watchObject.key": {
103 |       deep: true,
104 |       immediate: true,
105 |       async handler(v, ov) {
106 |         console.log("watchObject", v, ov)
107 |       },
108 |     },
109 |   },
110 | }
111 | %end-script%
112 | 
113 | <style scoped>
114 | :root {
115 |   background: red;
116 | }
117 | </style>`.replace("%end-script%", "</scri" + "pt>") // otherwise breaks html
118 | 
119 | const cmInput = CodeMirror(input, {
120 |   value: initialInputValue,
121 |   mode: "vue",
122 |   lineNumbers: true,
123 | })
124 | const cmOutput = CodeMirror(output, {
125 |   value: "Transforming...",
126 |   mode: "vue",
127 |   readOnly: true,
128 |   lineNumbers: true,
129 | })
130 | 
131 | async function doTransform(sfc) {
132 |   cmOutput.setValue("Transforming...")
133 |   try {
134 |     const state = await transform(sfc)
135 |     cmOutput.setValue(state.transformed || "Nothing transformed.")
136 |   } catch (e) {
137 |     cmOutput.setValue(e.stack)
138 |   }
139 | }
140 | 
141 | ;(async function() {
142 |   await doTransform(cmInput.getValue())
143 | })()
144 | 
145 | cmInput.on("change", async (cm, changeObj) => {
146 |   await doTransform(cm.getValue())
147 | })
148 |     </script>
149 |   </body>
150 | </html>
151 | 


--------------------------------------------------------------------------------
/docs/browser.js:
--------------------------------------------------------------------------------
  1 | var __create = Object.create;
  2 | var __defProp = Object.defineProperty;
  3 | var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  4 | var __getOwnPropNames = Object.getOwnPropertyNames;
  5 | var __getProtoOf = Object.getPrototypeOf;
  6 | var __hasOwnProp = Object.prototype.hasOwnProperty;
  7 | var __commonJS = (cb, mod) => function __require() {
  8 |   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
  9 | };
 10 | var __copyProps = (to, from, except, desc) => {
 11 |   if (from && typeof from === "object" || typeof from === "function") {
 12 |     for (let key of __getOwnPropNames(from))
 13 |       if (!__hasOwnProp.call(to, key) && key !== except)
 14 |         __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
 15 |   }
 16 |   return to;
 17 | };
 18 | var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
 19 |   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
 20 |   mod
 21 | ));
 22 | 
 23 | // node_modules/.pnpm/safe-identifier@0.4.2/node_modules/safe-identifier/reserved.js
 24 | var require_reserved = __commonJS({
 25 |   "node_modules/.pnpm/safe-identifier@0.4.2/node_modules/safe-identifier/reserved.js"(exports, module) {
 26 |     var ES3 = {
 27 |       break: true,
 28 |       continue: true,
 29 |       delete: true,
 30 |       else: true,
 31 |       for: true,
 32 |       function: true,
 33 |       if: true,
 34 |       in: true,
 35 |       new: true,
 36 |       return: true,
 37 |       this: true,
 38 |       typeof: true,
 39 |       var: true,
 40 |       void: true,
 41 |       while: true,
 42 |       with: true,
 43 |       case: true,
 44 |       catch: true,
 45 |       default: true,
 46 |       do: true,
 47 |       finally: true,
 48 |       instanceof: true,
 49 |       switch: true,
 50 |       throw: true,
 51 |       try: true
 52 |     };
 53 |     var ESnext = {
 54 |       await: true,
 55 |       debugger: true,
 56 |       class: true,
 57 |       enum: true,
 58 |       extends: true,
 59 |       super: true,
 60 |       const: true,
 61 |       export: true,
 62 |       import: true,
 63 |       null: true,
 64 |       true: true,
 65 |       false: true,
 66 |       implements: true,
 67 |       let: true,
 68 |       private: true,
 69 |       public: true,
 70 |       yield: true,
 71 |       interface: true,
 72 |       package: true,
 73 |       protected: true,
 74 |       static: true
 75 |     };
 76 |     module.exports = { ES3, ESnext };
 77 |   }
 78 | });
 79 | 
 80 | // node_modules/.pnpm/safe-identifier@0.4.2/node_modules/safe-identifier/index.mjs
 81 | var import_reserved = __toESM(require_reserved(), 1);
 82 | function hashCode(str) {
 83 |   let hash = 0;
 84 |   for (let i = 0; i < str.length; ++i) {
 85 |     const char = str.charCodeAt(i);
 86 |     hash = (hash << 5) - hash + char;
 87 |     hash |= 0;
 88 |   }
 89 |   return hash;
 90 | }
 91 | function identifier(key, unique) {
 92 |   if (unique)
 93 |     key += " " + hashCode(key).toString(36);
 94 |   const id = key.trim().replace(/\W+/g, "_");
 95 |   return import_reserved.default.ES3[id] || import_reserved.default.ESnext[id] || /^\d/.test(id) ? "_" + id : id;
 96 | }
 97 | 
 98 | // src/core.ts
 99 | function fail(msg, n) {
100 |   throw new Error(`${msg}${n ? ` @ (${n.startPosition.row + 1}, ${n.startPosition.column + 1})` : ""}`);
101 | }
102 | function assert(v, msg, n) {
103 |   if (!v) {
104 |     fail(`assertion failed: ${msg}`, n);
105 |   }
106 | }
107 | var DISCOVERED = "<discovered>";
108 | function scan(sfc) {
109 |   const state = {
110 |     extraScript: "",
111 |     scan: {},
112 |     importNodes: [],
113 |     hooks: {},
114 |     props: {},
115 |     propDefaultNodes: {},
116 |     refs: {},
117 |     computeds: {},
118 |     using: {},
119 |     nonRefs: /* @__PURE__ */ new Set(),
120 |     methods: {},
121 |     watchers: {}
122 |   };
123 |   const { scan: scan2 } = state;
124 |   scan2.lines = sfc.split("\n");
125 |   for (let i = 0; i < scan2.lines.length; i++) {
126 |     const line = scan2.lines[i];
127 |     if (line.match(/<script/)) {
128 |       scan2.scriptStartIdx = i;
129 |       if (line.match(/setup/)) {
130 |         scan2.scriptStartIdx = void 0;
131 |         break;
132 |       }
133 |       if (line.match(/lang="ts"/) || line.match(/lang='ts'/)) {
134 |         scan2.scriptTs = true;
135 |       }
136 |     } else if (line.match(/<\/script/)) {
137 |       scan2.scriptEndIdx = i;
138 |     } else if (line.match(/<template/)) {
139 |       scan2.templateStartIdx = i;
140 |       if (line.match(/lang="pug"/) || line.match(/lang='pug'/)) {
141 |         scan2.templatePug = true;
142 |       }
143 |     } else if (line.match(/<\/template/)) {
144 |       scan2.templateEndIdx = i;
145 |     }
146 |   }
147 |   if (scan2.scriptStartIdx != null && scan2.scriptEndIdx) {
148 |     scan2.script = scan2.lines.slice(scan2.scriptStartIdx + 1, scan2.scriptEndIdx).join("\n");
149 |   }
150 |   return state;
151 | }
152 | function assertNoErrorSyntaxNode(n) {
153 |   if (!n) {
154 |     return;
155 |   }
156 |   if (n.type === "ERROR") {
157 |     fail("syntax error", n);
158 |   }
159 |   for (const c of n.children || []) {
160 |     assertNoErrorSyntaxNode(c);
161 |   }
162 | }
163 | function transform(state, parser) {
164 |   const {
165 |     lines,
166 |     script,
167 |     scriptStartIdx,
168 |     scriptEndIdx,
169 |     templateStartIdx,
170 |     templateEndIdx,
171 |     templatePug
172 |   } = state.scan;
173 |   assert(script, "no options api script scanned");
174 |   const tree = state.tree = parser.parse(script);
175 |   assertNoErrorSyntaxNode(tree.rootNode);
176 |   for (const n of tree.rootNode.children) {
177 |     if (n.type === "import_statement") {
178 |       state.importNodes.push(n);
179 |     } else if (n.type === "export_statement") {
180 |       if (maybeHandleDefaultExport(state, n)) {
181 |         continue;
182 |       }
183 |     } else {
184 |       state.extraScript += `${n.text}
185 | `;
186 |     }
187 |   }
188 |   let importSection = "";
189 |   const vueImportsUsed = [];
190 |   if (state.hooks.onBeforeMount) {
191 |     vueImportsUsed.push("onBeforeMount");
192 |   }
193 |   if (state.hooks.onMounted) {
194 |     vueImportsUsed.push("onMounted");
195 |   }
196 |   if (state.using.$attrs) {
197 |     vueImportsUsed.push("useAttrs");
198 |   }
199 |   if (Object.keys(state.computeds).length) {
200 |     vueImportsUsed.push("computed");
201 |   }
202 |   if (state.using.nextTick) {
203 |     vueImportsUsed.push("nextTick");
204 |   }
205 |   if (Object.keys(state.refs).length) {
206 |     vueImportsUsed.push("ref");
207 |   }
208 |   if (state.using.$slots) {
209 |     vueImportsUsed.push("useSlots");
210 |   }
211 |   if (vueImportsUsed.length) {
212 |     for (const importNode of state.importNodes) {
213 |       if (importNode.text.match(/'vue'/) || importNode.text.match(/"vue"/)) {
214 |         fail("editing existing vue import not supported yet");
215 |       }
216 |     }
217 |     importSection += `import { ${vueImportsUsed.join(", ")} } from "vue"
218 | `;
219 |   }
220 |   const vueRouterImportsUsed = [];
221 |   if (state.using.$router) {
222 |     vueRouterImportsUsed.push("useRouter");
223 |   }
224 |   if (state.using.$route) {
225 |     vueRouterImportsUsed.push("useRoute");
226 |   }
227 |   if (vueRouterImportsUsed.length) {
228 |     for (const importNode of state.importNodes) {
229 |       if (importNode.text.match(/'vue-router'/) || importNode.text.match(/"vue-router"/)) {
230 |         fail("editing existing vue-router import not supported yet");
231 |       }
232 |     }
233 |     importSection += `import { ${vueRouterImportsUsed.join(", ")} } from "vue-router"
234 | `;
235 |   }
236 |   for (const importNode of state.importNodes) {
237 |     importSection += `${importNode.text}
238 | `;
239 |   }
240 |   let propsSection = "";
241 |   if (Object.keys(state.props).length) {
242 |     if (state.using.props) {
243 |       propsSection += "const props = ";
244 |     }
245 |     if (Object.keys(state.propDefaultNodes).length) {
246 |       propsSection += `withDefaults(`;
247 |     }
248 |     propsSection += `defineProps<{
249 | `;
250 |     for (const k in state.props) {
251 |       propsSection += `  ${k}?: ${state.props[k]}
252 | `;
253 |     }
254 |     propsSection += `}>()`;
255 |     if (Object.keys(state.propDefaultNodes).length) {
256 |       propsSection += `, {
257 | `;
258 |       for (const k in state.propDefaultNodes) {
259 |         propsSection += `  ${k}: ${state.propDefaultNodes[k]},
260 | `;
261 |       }
262 |       propsSection += `})`;
263 |     }
264 |     propsSection += "\n";
265 |   }
266 |   let injectionsSection = "";
267 |   if (state.using.$attrs) {
268 |     injectionsSection += "const $attrs = useAttrs()\n";
269 |   }
270 |   if (state.using.$route) {
271 |     injectionsSection += "const $route = useRoute()\n";
272 |   }
273 |   if (state.using.$router) {
274 |     injectionsSection += "const $router = useRouter()\n";
275 |   }
276 |   if (state.using.$slots) {
277 |     injectionsSection += "const $slots = useSlots()\n";
278 |   }
279 |   if (state.nonRefs.size) {
280 |     injectionsSection += `const $this = {}
281 | `;
282 |   }
283 |   let emitsSection = "";
284 |   assert(!((state.emitsNode ? 1 : 0) ^ (state.using.$emit ? 1 : 0)), "specifies emits but doesn't or vice versa");
285 |   if (state.using.$emit) {
286 |     emitsSection += "const $emit = ";
287 |   }
288 |   if (state.emitsNode) {
289 |     emitsSection += `defineEmits(${state.emitsNode.text})
290 | `;
291 |   }
292 |   let refsSection = "";
293 |   let template;
294 |   if (state.using.$el) {
295 |     refsSection += "const $el = ref<HTMLElement | undefined>()\n";
296 |     if (templateStartIdx != null) {
297 |       template = lines.slice(templateStartIdx + 1, templateEndIdx).join("\n");
298 |       if (templatePug) {
299 |         const templateLines = template.split("\n");
300 |         let zeroIndentIdx;
301 |         for (let i = 0; i < templateLines.length; i++) {
302 |           const line = templateLines[i];
303 |           if (line.startsWith("//")) {
304 |             continue;
305 |           }
306 |           const lineSpaces = linePrefixSpaces(line);
307 |           if (!lineSpaces) {
308 |             assert(zeroIndentIdx == null, "multiple zero-space indents found in pug template");
309 |             zeroIndentIdx = i;
310 |           }
311 |         }
312 |         assert(zeroIndentIdx != null, "no zero-space indent found in pug template");
313 |         const zeroIndentLine = templateLines[zeroIndentIdx];
314 |         if (zeroIndentLine.startsWith(".") || zeroIndentLine.startsWith("#") || zeroIndentLine.match(/^[a-z]+([.#(\s]|$)/)) {
315 |           let newLine;
316 |           let idx = zeroIndentLine.indexOf("(");
317 |           const zeroIndentChars = zeroIndentLine.split("");
318 |           if (idx >= 0) {
319 |             const suffix = zeroIndentLine[idx + 1] && zeroIndentLine[idx + 1] !== ")" ? " " : "";
320 |             zeroIndentChars.splice(idx + 1, 0, `ref="$el"${suffix}`);
321 |             newLine = zeroIndentChars.join("");
322 |           } else {
323 |             idx = zeroIndentLine.indexOf(" ");
324 |             if (idx >= 0) {
325 |               zeroIndentChars.splice(idx + 1, 0, `(ref="$el")`);
326 |               newLine = zeroIndentChars.join("");
327 |             } else {
328 |               idx = zeroIndentLine.length;
329 |               newLine = zeroIndentLine + `(ref="$el")`;
330 |             }
331 |           }
332 |           templateLines[zeroIndentIdx] = newLine;
333 |           template = templateLines.join("\n");
334 |         } else {
335 |           fail("cannot edit pug template to suport $el");
336 |         }
337 |       } else {
338 |         fail("cannot edit non-pug template to suport $el");
339 |       }
340 |     }
341 |   }
342 |   for (const k in state.refs) {
343 |     refsSection += `const ${k} = ref(${state.refs[k]})
344 | `;
345 |   }
346 |   let hooksSection = "";
347 |   if (state.hooks.onBeforeMount) {
348 |     hooksSection += `onBeforeMount(${state.hooks.onBeforeMount})
349 | `;
350 |   }
351 |   if (state.hooks.onMounted) {
352 |     hooksSection += `onMounted(${state.hooks.onMounted})
353 | `;
354 |   }
355 |   let computedsSection = "";
356 |   for (const k in state.computeds) {
357 |     computedsSection += `const ${k} = computed(${state.computeds[k]})
358 | `;
359 |   }
360 |   let watchersSection = "";
361 |   for (const k in state.watchers) {
362 |     const watcher = state.watchers[k];
363 |     watchersSection += `const ${k} = watch(${watcher.handler}`;
364 |     if (watcher.deep || watcher.immediate) {
365 |       watchersSection += `, {
366 | `;
367 |       if (watcher.deep) {
368 |         watchersSection += `  deep: ${watcher.deep},
369 | `;
370 |       }
371 |       if (watcher.immediate) {
372 |         watchersSection += `  immediate: ${watcher.immediate},
373 | `;
374 |       }
375 |       watchersSection += `}`;
376 |     }
377 |     watchersSection += `)
378 | `;
379 |   }
380 |   let methodsSection = "";
381 |   for (const k in state.methods) {
382 |     methodsSection += `${state.methods[k]}
383 | `;
384 |   }
385 |   const scriptSections = [
386 |     importSection,
387 |     propsSection,
388 |     injectionsSection,
389 |     emitsSection,
390 |     refsSection,
391 |     hooksSection,
392 |     computedsSection,
393 |     watchersSection,
394 |     methodsSection
395 |   ].filter(Boolean);
396 |   const newScript = scriptSections.join("\n") + state.extraScript.trimEnd();
397 |   let transformedSections = [];
398 |   if (template) {
399 |     if (templateStartIdx < scriptStartIdx) {
400 |       transformedSections.push(...lines.slice(0, templateStartIdx + 1));
401 |       transformedSections.push(template);
402 |       transformedSections.push(...lines.slice(templateEndIdx, scriptStartIdx));
403 |       transformedSections.push(`<script setup lang="ts">
404 | ${newScript}
405 | <\/script>`);
406 |       transformedSections.push(...lines.slice(scriptEndIdx + 1, lines.length));
407 |     } else {
408 |       transformedSections.push(...lines.slice(0, scriptStartIdx));
409 |       transformedSections.push(`<script setup lang="ts">
410 | ${newScript}
411 | <\/script>`);
412 |       transformedSections.push(...lines.slice(scriptEndIdx + 1, templateStartIdx + 1));
413 |       transformedSections.push(template);
414 |       transformedSections.push(...lines.slice(templateEndIdx, lines.length));
415 |     }
416 |   } else {
417 |     transformedSections.push(...lines.slice(0, scriptStartIdx));
418 |     transformedSections.push(`<script setup lang="ts">
419 | ${newScript}
420 | <\/script>`);
421 |     transformedSections.push(...lines.slice(scriptEndIdx + 1, lines.length));
422 |   }
423 |   state.transformed = transformedSections.join("\n");
424 |   return state;
425 | }
426 | function linePrefixSpaces(line) {
427 |   const md = line.match(/^(\s*)/);
428 |   return (md == null ? void 0 : md[1].length) || 0;
429 | }
430 | function reindent(s, minIndentSpaces) {
431 |   const lines = s.split("\n");
432 |   let minLineSpaces = Infinity;
433 |   for (let i = 1; i < lines.length; i++) {
434 |     const line = lines[i];
435 |     const lineSpaces = linePrefixSpaces(line);
436 |     if (lineSpaces < minLineSpaces) {
437 |       minLineSpaces = lineSpaces;
438 |     }
439 |   }
440 |   const spaceIndentChange = minIndentSpaces - minLineSpaces;
441 |   const ret = [lines[0]];
442 |   for (let i = 1; i < lines.length; i++) {
443 |     const line = lines[i];
444 |     if (spaceIndentChange > 0) {
445 |       ret.push(" ".repeat(spaceIndentChange) + line);
446 |     } else {
447 |       ret.push(line.slice(-spaceIndentChange));
448 |     }
449 |   }
450 |   return ret.join("\n");
451 | }
452 | function propTypeIdentifierToType(s) {
453 |   switch (s) {
454 |     case "Array":
455 |       return "any[]";
456 |     case "Boolean":
457 |       return "boolean";
458 |     case "Number":
459 |       return "number";
460 |     case "String":
461 |       return "string";
462 |     default:
463 |       throw new Error(`unhandled prop type identifier: ${s}`);
464 |   }
465 | }
466 | function handleArray(n, onElement) {
467 |   for (const c of n.children) {
468 |     switch (c.type) {
469 |       case "[":
470 |       case ",":
471 |       case "]":
472 |         break;
473 |       default:
474 |         onElement(c);
475 |     }
476 |   }
477 | }
478 | function handlePropType(n) {
479 |   let ret;
480 |   if ((n == null ? void 0 : n.type) === "array") {
481 |     const types = [];
482 |     handleArray(n, (c) => {
483 |       types.push(propTypeIdentifierToType(c.text));
484 |     });
485 |     ret = types.join(" | ");
486 |   } else if ((n == null ? void 0 : n.type) === "identifier") {
487 |     ret = propTypeIdentifierToType(n.text);
488 |   } else {
489 |     fail(`prop value type not array or identifier: ${n == null ? void 0 : n.text}`, n);
490 |   }
491 |   return ret;
492 | }
493 | function handleProps(state, o, transformPass = true) {
494 |   handleObject(o, {
495 |     onKeyValue(propName, n) {
496 |       switch (n.type) {
497 |         case "identifier":
498 |           state.props[propName] = handlePropType(n);
499 |           break;
500 |         case "object":
501 |           if (n.text === "{}") {
502 |             state.props[propName] = "any";
503 |             break;
504 |           }
505 |           handleObject(n, {
506 |             onKeyValue(key, n2) {
507 |               switch (key) {
508 |                 case "default":
509 |                   state.propDefaultNodes[propName] = n2.text;
510 |                   break;
511 |                 case "type":
512 |                   state.props[propName] = handlePropType(n2);
513 |                   break;
514 |                 default:
515 |                   fail(`prop attribute not handled: ${key}`, n2);
516 |               }
517 |             },
518 |             onMethod(meth, async, args, block) {
519 |               assert(meth === "default", `prop attribute method not named default: ${meth}`, n);
520 |               assert(args.text === "()", `prop attribute method default has unexpected args: ${args.text}`, args);
521 |               state.propDefaultNodes[propName] = `() => ${reindent(block.text, 2)}`;
522 |             }
523 |           });
524 |           break;
525 |         default:
526 |           fail(`prop value not identifier or object: ${n.children[2].type}`, n.children[2]);
527 |       }
528 |     },
529 |     onMethod(meth, async, args, block) {
530 |       fail(`unexpected prop method: ${meth}`, o);
531 |     }
532 |   });
533 | }
534 | function bfs(n, onNode) {
535 |   const q = [n];
536 |   while (q.length) {
537 |     const c = q.shift();
538 |     onNode(c);
539 |     q.push(...c.children);
540 |   }
541 | }
542 | function transformNode(state, n) {
543 |   const replacements = [];
544 |   const handleThisKey = (name, startIndex, endIndex, textNode) => {
545 |     const pushReplacement = (value) => {
546 |       replacements.push({
547 |         startIndex: startIndex - n.startIndex,
548 |         endIndex: endIndex - n.startIndex,
549 |         value
550 |       });
551 |     };
552 |     if (name === "$nextTick") {
553 |       state.using.nextTick = true;
554 |       pushReplacement("nextTick");
555 |       return;
556 |     }
557 |     if (name === "$el") {
558 |       state.using.$el = true;
559 |       pushReplacement("$el.value");
560 |       return;
561 |     }
562 |     if (["$emit", "$slots", "$attrs", "$router", "$route"].includes(name)) {
563 |       state.using[name] = true;
564 |       pushReplacement(name);
565 |       return;
566 |     }
567 |     assert(!name.startsWith("$"), `config needed to determine how to replace global property: ${name}`, textNode);
568 |     assert(name === identifier(name), `unsafe identifier not supported: ${name}`, textNode);
569 |     if (state.props[name]) {
570 |       state.using.props = true;
571 |       pushReplacement(`props.${name}`);
572 |       return;
573 |     }
574 |     if (state.computeds[name] || state.refs[name]) {
575 |       pushReplacement(`${name}.value`);
576 |       return;
577 |     }
578 |     if (state.methods[name]) {
579 |       pushReplacement(name);
580 |       return;
581 |     }
582 |     state.nonRefs.add(name);
583 |     pushReplacement(`this.${name}`);
584 |     return `$this.${name}`;
585 |   };
586 |   bfs(n, (c) => {
587 |     if (c.type === "this") {
588 |       const c1 = c.nextSibling;
589 |       const c2 = c1 == null ? void 0 : c1.nextSibling;
590 |       const c3 = c2 == null ? void 0 : c2.nextSibling;
591 |       if ((c1 == null ? void 0 : c1.type) === ".") {
592 |         assert(c2, "expected sibling after this.", c1);
593 |         assert(c2.type === "property_identifier", "expected property_identifier after `this.`");
594 |         handleThisKey(c2.text, c.startIndex, c2.endIndex, c2);
595 |       } else if ((c1 == null ? void 0 : c1.type) === "[" && c2.type === "string" && (c3 == null ? void 0 : c3.type) === "]") {
596 |         handleThisKey(c2.text.slice(1, c2.text.length - 1), c.startIndex, c3.endIndex, c2);
597 |       } else {
598 |         fail("unsupported this attribute while transforming", c.parent);
599 |       }
600 |     }
601 |   });
602 |   const sortedReplacements = replacements.sort((a, b) => a.startIndex - b.startIndex);
603 |   let ret = "";
604 |   let idx = 0;
605 |   for (let i = 0; i < sortedReplacements.length; i++) {
606 |     const r = sortedReplacements[i];
607 |     ret += n.text.substring(idx, r.startIndex) + r.value;
608 |     idx = r.endIndex;
609 |   }
610 |   ret += n.text.substring(idx);
611 |   return ret;
612 | }
613 | function handleComputeds(state, n, transformPass = true) {
614 |   handleObject(n, {
615 |     onKeyValue(key, n2) {
616 |       fail(`computed non-method key unexpected: ${key}`, n2);
617 |     },
618 |     onMethod(meth, async, args, block) {
619 |       assert(!async, "computed async method unexpected", block);
620 |       if (transformPass) {
621 |         const computedString = transformNode(state, block);
622 |         assert(args.text === "()", `computed method has unexpected args: ${args.text}`, args);
623 |         state.computeds[meth] = `() => ${reindent(computedString, 0)}`;
624 |       } else {
625 |         state.computeds[meth] = DISCOVERED;
626 |       }
627 |     }
628 |   });
629 | }
630 | function handleMethods(state, n, transformPass = true) {
631 |   handleObject(n, {
632 |     onKeyValue(key, n2) {
633 |       fail(`methods has non-method: ${key}`, n2);
634 |     },
635 |     onMethod(meth, async, args, block) {
636 |       if (transformPass) {
637 |         state.methods[meth] = `${async ? "async " : ""}function ${meth}${args.text} ${reindent(transformNode(state, block), 0)}`;
638 |       } else {
639 |         state.methods[meth] = DISCOVERED;
640 |       }
641 |     }
642 |   });
643 | }
644 | function handleWatchers(state, n, transformPass = true) {
645 |   if (!transformPass) {
646 |     return;
647 |   }
648 |   handleObject(n, {
649 |     onKeyValue(key, n2) {
650 |       switch (n2.type) {
651 |         case "object":
652 |           const watch = {};
653 |           handleObject(n2, {
654 |             onKeyValue(key2, n3) {
655 |               switch (key2) {
656 |                 case "deep":
657 |                   watch.deep = n3.text;
658 |                   break;
659 |                 case "handler":
660 |                   watch.handler = n3.text;
661 |                   break;
662 |                 case "immediate":
663 |                   watch.immediate = n3.text;
664 |                   break;
665 |                 default:
666 |                   fail(`unexpected watch value attribute: ${key2}`, n3);
667 |               }
668 |             },
669 |             onMethod(meth, async, args, block) {
670 |               watch.handler = `${async ? "async " : ""}${args.text} => ${reindent(transformNode(state, block), 0)}`;
671 |             }
672 |           });
673 |           state.watchers[key] = watch;
674 |           break;
675 |         default:
676 |           fail(`unexpected watch value type (not method or object): ${n2.type}`, n2);
677 |       }
678 |     },
679 |     onMethod(meth, async, args, block) {
680 |       const watch = {};
681 |       watch.handler = `${async ? "async " : ""}${args.text} => ${reindent(transformNode(state, block), 0)}`;
682 |       state.watchers[meth] = watch;
683 |     }
684 |   });
685 | }
686 | function handleDefaultExportKeyValue(state, key, n, transformPass = true) {
687 |   switch (key) {
688 |     case "components":
689 |       break;
690 |     case "computed":
691 |       handleComputeds(state, n, transformPass);
692 |       break;
693 |     case "emits":
694 |       assert(n.type === "array", `expected emits to be an array: ${n.type}`, n);
695 |       state.emitsNode = n;
696 |       break;
697 |     case "methods":
698 |       handleMethods(state, n, transformPass);
699 |       break;
700 |     case "name":
701 |       break;
702 |     case "props":
703 |       assert(n.type === "object", `expected props to be an object: ${n.type}`, n);
704 |       handleProps(state, n, transformPass);
705 |       break;
706 |     case "watch":
707 |       handleWatchers(state, n, transformPass);
708 |       break;
709 |     default:
710 |       fail(`export default key not supported: ${key}`, n);
711 |   }
712 | }
713 | function handleDataMethod(state, n, transformPass = true) {
714 |   var _a;
715 |   for (const c of n.children) {
716 |     switch (c.type) {
717 |       case "{":
718 |       case "}":
719 |       case "comment":
720 |         break;
721 |       case "return_statement":
722 |         if (((_a = c.children[1]) == null ? void 0 : _a.type) === "object") {
723 |           handleObject(c.children[1], {
724 |             onKeyValue(key, n2) {
725 |               if (transformPass) {
726 |                 state.refs[key] = transformNode(state, n2);
727 |               } else {
728 |                 state.refs[key] = "<observed>";
729 |               }
730 |             },
731 |             onMethod(meth, async, args, block) {
732 |               fail(`data() return object method key not supported: ${meth}`, block);
733 |             }
734 |           });
735 |           break;
736 |         }
737 |       default:
738 |         fail("complex data() not supported", c);
739 |     }
740 |   }
741 | }
742 | function handleDefaultExportMethod(state, meth, async, args, block, transformPass = true) {
743 |   switch (meth) {
744 |     case "data":
745 |       handleDataMethod(state, block, transformPass);
746 |       break;
747 |     case "created":
748 |       if (transformPass) {
749 |         assert(args.text === "()", `created hook method has unexpected args: ${args.text}`, args);
750 |         state.hooks.onBeforeMount = `${async ? "async " : ""}() => ${reindent(transformNode(state, block), 0)}`;
751 |       }
752 |       break;
753 |     case "mounted":
754 |       if (transformPass) {
755 |         assert(args.text === "()", `mounted hook method has unexpected args: ${args.text}`, args);
756 |         state.hooks.onMounted = `${async ? "async " : ""}() => ${reindent(transformNode(state, block), 0)}`;
757 |       }
758 |       break;
759 |     default:
760 |       fail(`export default key not supported: ${meth}`, block);
761 |   }
762 | }
763 | function handleObject(object, hooks) {
764 |   var _a, _b, _c, _d;
765 |   for (const c of object.children) {
766 |     if (c.type === "pair") {
767 |       assert(((_a = c.children[0]) == null ? void 0 : _a.type) === "property_identifier", `pair[0] not property_identifer: ${c.children[0].type}`, c.children[0]);
768 |       assert(((_b = c.children[1]) == null ? void 0 : _b.type) === ":", `pair[1] not ":": ${c.children[1].type}`, c.children[1]);
769 |       assert(c.children[2], "pair has no 3nd child", c);
770 |       (_c = hooks.onKeyValue) == null ? void 0 : _c.call(hooks, c.children[0].text, c.children[2]);
771 |     } else if (c.type === "method_definition") {
772 |       let meth;
773 |       let async = false;
774 |       let args;
775 |       let block;
776 |       for (const n of c.children) {
777 |         switch (n.type) {
778 |           case "async":
779 |             async = true;
780 |             break;
781 |           case "property_identifier":
782 |             meth = n.text;
783 |             break;
784 |           case "statement_block":
785 |             block = n;
786 |             break;
787 |           case "formal_parameters":
788 |             args = n;
789 |             break;
790 |           default:
791 |             fail(`unhandled method_definition structure, found: ${n.type}`, n);
792 |         }
793 |       }
794 |       assert(meth && args && block, "did not find required nodes for method_definition", c);
795 |       (_d = hooks.onMethod) == null ? void 0 : _d.call(hooks, meth, async, args, block);
796 |     } else if (c.type === "comment") {
797 |     } else if (c.type === "{" || c.type === "," || c.type === "}") {
798 |     } else {
799 |       fail(`unexpected node found while parsing object: ${c.type}`, c);
800 |     }
801 |   }
802 | }
803 | function maybeHandleDefaultExport(state, n) {
804 |   let defaultExport = false;
805 |   for (const c1 of n.children) {
806 |     if (c1.text === "default") {
807 |       defaultExport = true;
808 |     }
809 |     if (defaultExport && c1.type === "object") {
810 |       let transformPass = false;
811 |       handleObject(c1, {
812 |         onKeyValue: (key, n2) => handleDefaultExportKeyValue(state, key, n2, transformPass),
813 |         onMethod: (meth, async, args, block) => handleDefaultExportMethod(state, meth, async, args, block, transformPass)
814 |       });
815 |       transformPass = true;
816 |       handleObject(c1, {
817 |         onKeyValue: (key, n2) => handleDefaultExportKeyValue(state, key, n2, transformPass),
818 |         onMethod: (meth, async, args, block) => handleDefaultExportMethod(state, meth, async, args, block, transformPass)
819 |       });
820 |     }
821 |   }
822 |   return defaultExport;
823 | }
824 | export {
825 |   scan,
826 |   transform
827 | };
828 | 


--------------------------------------------------------------------------------
/src/core.ts:
--------------------------------------------------------------------------------
   1 | import type { SyntaxNode, Tree } from "tree-sitter"
   2 | import { identifier } from "safe-identifier"
   3 | 
   4 | function fail(msg: string, n?: SyntaxNode): never {
   5 |   // TODO need class or something along state so we can add scriptStartIdx to row value
   6 |   throw new Error(`${msg}${n ? ` @ (${n.startPosition.row + 1}, ${n.startPosition.column + 1})` : ""}`)
   7 | }
   8 | 
   9 | // https://stackoverflow.com/a/73561238/387413
  10 | type Falsy = null | undefined | false | 0 | -0 | 0n | ''
  11 | type Truthy<T> = T extends Falsy ? never : T
  12 | 
  13 | // don't use stdlib so can be used in browser env
  14 | function assert<T>(v: T, msg: string, n?: SyntaxNode): asserts v is Truthy<T> {
  15 |   if (!v) {
  16 |     fail(`assertion failed: ${msg}`, n)
  17 |   }
  18 | }
  19 | 
  20 | const DISCOVERED = "<discovered>"
  21 | 
  22 | type Language = any // TODO
  23 | type Parser = {
  24 |   setLanguage(lang: Language): void
  25 |   parse(str: string): Tree
  26 | }
  27 | 
  28 | type WatchConfig = {
  29 |   handler?: string
  30 |   deep?: string
  31 |   immediate?: string
  32 | }
  33 | 
  34 | type ScanState = {
  35 |   lines?: string[]
  36 |   scriptStartIdx?: number
  37 |   scriptEndIdx?: number
  38 |   scriptTs?: boolean
  39 |   script?: string
  40 |   templateStartIdx?: number
  41 |   templateEndIdx?: number
  42 |   templatePug?: boolean
  43 | }
  44 | 
  45 | // XXX merge user provided one into state.config
  46 | export type Config = {
  47 |   useSemis?: boolean
  48 |   useDoubleQuotes?: boolean // otherwise use singles
  49 | }
  50 | 
  51 | export type State = {
  52 |   scan: ScanState
  53 |   tree?: Tree
  54 |   config: Config
  55 |   // memoized
  56 |   semi: string
  57 |   quote: string
  58 |   // parse
  59 |   scriptPre: string
  60 |   scriptPost: string
  61 |   importNodes: SyntaxNode[]
  62 |   hooks: { // XXX what should be under `using` vs not?
  63 |     beforeCreate?: string
  64 |     created?: string
  65 |     beforeMount?: string
  66 |     mounted?: string
  67 |     beforeUpdate?: string
  68 |     updated?: string
  69 |     beforeDestroy?: string
  70 |     destroyed?: string
  71 |     errorCaptured?: string
  72 |   }
  73 |   components: Record<string, string>
  74 |   props: Record<string, {required?: true, type: string}>
  75 |   propDefaultNodes: Record<string, string>
  76 |   refs: Record<string, string>
  77 |   computeds: Record<string, string>
  78 |   methods: Record<string, string>
  79 |   watchers: Record<string, WatchConfig> // key is source callback body
  80 |   filters: Record<string, string>
  81 |   directives: Record<string, string>
  82 |   using: {
  83 |     $attrs?: boolean
  84 |     $el?: boolean
  85 |     $emit?: boolean
  86 |     $route?: boolean
  87 |     $router?: boolean
  88 |     $slots?: boolean
  89 |     nextTick?: boolean
  90 |     props?: boolean
  91 |     emits: Set<string>
  92 |     provides: Set<string>
  93 |     injects: Record<string, {str: string, warn?: boolean}>
  94 |   }
  95 |   nonRefs: Set<string>
  96 |   transformed?: string
  97 | }
  98 | 
  99 | export function scan(sfc: string): State {
 100 |   const state: State = {
 101 |     scriptPre: "",
 102 |     scriptPost: "",
 103 |     scan: {},
 104 |     config: {},
 105 |     // memo
 106 |     quote: "'",
 107 |     semi: "",
 108 |     // ---
 109 |     importNodes: [],
 110 |     hooks: {},
 111 |     components: {},
 112 |     props: {},
 113 |     propDefaultNodes: {},
 114 |     refs: {},
 115 |     computeds: {},
 116 |     using: {
 117 |       emits: new Set(),
 118 |       provides: new Set(),
 119 |       injects: {},
 120 |     },
 121 |     nonRefs: new Set(),
 122 |     methods: {},
 123 |     watchers: {},
 124 |     filters: {},
 125 |     directives: {},
 126 |   }
 127 |   const { scan } = state
 128 | 
 129 |   scan.lines = sfc.split("\n")
 130 | 
 131 |   // XXX ensure these aren't strings inside sfc sections... 
 132 |   // do a proper parse or maintain which part of sfc we are in
 133 |   for (let i = 0; i < scan.lines.length; i++) {
 134 |     const line = scan.lines[i]
 135 |     if (line.match(/<script/)) {
 136 |       scan.scriptStartIdx = i
 137 |       if (line.match(/setup/)) {
 138 |         scan.scriptStartIdx = undefined
 139 |         break
 140 |       }
 141 |       if (line.match(/lang="ts"/) || line.match(/lang='ts'/)) {
 142 |         scan.scriptTs = true
 143 |       }
 144 |     } else if (line.match(/<\/script/)) {
 145 |       scan.scriptEndIdx = i
 146 |     } else if (line.match(/<template/)) {
 147 |       scan.templateStartIdx = i
 148 |       // XXX support other template langs
 149 |       if (line.match(/lang="pug"/) || line.match(/lang='pug'/)) {
 150 |         scan.templatePug = true
 151 |       }
 152 |     } else if (line.match(/<\/template/)) {
 153 |       scan.templateEndIdx = i
 154 |     }
 155 |   }
 156 | 
 157 |   if (scan.scriptStartIdx != null && scan.scriptEndIdx) {
 158 |     // XXX handle if js is after start tag or before end tag but no one does this
 159 |     scan.script = scan.lines.slice(scan.scriptStartIdx + 1, scan.scriptEndIdx).join("\n")
 160 |   }
 161 | 
 162 |   return state
 163 | }
 164 | 
 165 | function importString(state: State, pkg: string, imports: Set<string>) {
 166 |   const importsString = `{ ${Array.from(imports).join(', ')} }`
 167 |   return `import ${importsString} from ${state.quote}${pkg}${state.quote}${state.semi}\n`
 168 | }
 169 | 
 170 | export function transform(state: State, parser: Parser) {
 171 |   const {
 172 |     lines,
 173 |     script,
 174 |     scriptStartIdx,
 175 |     scriptEndIdx,
 176 |     templateStartIdx,
 177 |     templateEndIdx,
 178 |     templatePug,
 179 |   } = state.scan
 180 | 
 181 |   assert(script, "no options api script scanned")
 182 |   if (!lines) {
 183 |     throw new Error("no lines scanned")
 184 |   }
 185 |   const tree = state.tree = parser.parse(script)
 186 | 
 187 |   let singleQuotes = 0
 188 |   let doubleQuotes = 0
 189 |   bfs(tree.rootNode, (n: SyntaxNode) => {
 190 |     if (n.type === "ERROR") {
 191 |       fail("syntax error", n)
 192 |     }
 193 |     if (!("useSemis" in state.config) && n.type === ";") {
 194 |       state.config.useSemis = true
 195 |     }
 196 |     if (n.type === "string") {
 197 |       if (n.text[0] === "'") {
 198 |         singleQuotes++
 199 |       } else if (n.text[0] === '"') {
 200 |         doubleQuotes++
 201 |       }
 202 |     }
 203 |   })
 204 |   if (!("useDoubleQuotes" in state.config) && doubleQuotes > singleQuotes) {
 205 |     state.config.useDoubleQuotes = true
 206 |   }
 207 | 
 208 |   // set the memoized values
 209 |   if (state.config.useDoubleQuotes) {
 210 |     state.quote = '"'
 211 |   }
 212 |   if (state.config.useSemis) {
 213 |     state.semi = ";"
 214 |   }
 215 | 
 216 |   let scriptPre = true
 217 |   for (const n of tree.rootNode.children) {
 218 |     if (n.type === "import_statement") {
 219 |       state.importNodes.push(n)
 220 |       continue
 221 |     }
 222 |     if (n.type === "export_statement") {
 223 |       if (maybeHandleDefaultExport(state, n)) {
 224 |         scriptPre = false
 225 |         continue
 226 |       }
 227 |     }
 228 |     if (scriptPre) {
 229 |       state.scriptPre += `${n.text}\n`
 230 |     } else {
 231 |       state.scriptPost += `${n.text}\n`
 232 |     }
 233 |   }
 234 | 
 235 |   const vueImportsUsed = new Set<string>()
 236 |   if (Object.keys(state.computeds).length) {
 237 |     vueImportsUsed.add("computed")
 238 |   }
 239 |   if (Object.keys(state.using.injects).length) {
 240 |     vueImportsUsed.add("inject")
 241 |   }
 242 |   if (state.using.nextTick) {
 243 |     vueImportsUsed.add("nextTick")
 244 |   }
 245 |   if (state.hooks.beforeMount) {
 246 |     vueImportsUsed.add("onBeforeMount")
 247 |   }
 248 |   if (state.hooks.beforeDestroy) {
 249 |     vueImportsUsed.add("onBeforeUnmount")
 250 |   }
 251 |   if (state.hooks.beforeUpdate) {
 252 |     vueImportsUsed.add("onBeforeUpdate")
 253 |   }
 254 |   if (state.hooks.errorCaptured) {
 255 |     vueImportsUsed.add("onErrorCaptured")
 256 |   }
 257 |   if (state.hooks.mounted) {
 258 |     vueImportsUsed.add("onMounted")
 259 |   }
 260 |   if (state.hooks.destroyed) {
 261 |     vueImportsUsed.add("onUnmounted")
 262 |   }
 263 |   if (state.hooks.updated) {
 264 |     vueImportsUsed.add("onUpdated")
 265 |   }
 266 |   if (state.using.provides.size) {
 267 |     vueImportsUsed.add("provide")
 268 |   }
 269 |   if (state.using.$attrs) {
 270 |     vueImportsUsed.add("useAttrs")
 271 |   }
 272 |   if (Object.keys(state.refs).length) {
 273 |     vueImportsUsed.add("ref")
 274 |   }
 275 |   if (state.using.$slots) {
 276 |     vueImportsUsed.add("useSlots")
 277 |   }
 278 |   if (Object.keys(state.watchers).length) {
 279 |     vueImportsUsed.add("watch")
 280 |   }
 281 |   const vueRouterImportsUsed = new Set<string>()
 282 |   if (state.using.$router) {
 283 |     vueRouterImportsUsed.add("useRouter")
 284 |   }
 285 |   if (state.using.$route) {
 286 |     vueRouterImportsUsed.add("useRoute")
 287 |   }
 288 |   let importSection = ""
 289 |   let hasVueImport = false
 290 |   let hasVueRouterImport = false
 291 |   for (const importNode of state.importNodes) {
 292 |     // XXX check syntax node instead of string compare?
 293 |     if (importNode.text.match(/'vue'/) || importNode.text.match(/"vue"/)) {
 294 |       // XXX support import vue from "vue" (not just import { ... } from "vue") ?
 295 |       treeSelect(importNode, ["named_imports", "import_specifier", "identifier"], n => {
 296 |         if (n.text !== "defineComponent") {
 297 |           vueImportsUsed.add(n.text)
 298 |         }
 299 |       })
 300 |       hasVueImport = true
 301 |       importSection += importString(state, "vue", vueImportsUsed)
 302 |     } else if (importNode.text.match(/'vue-router'/) || importNode.text.match(/"vue-router"/)) {
 303 |       // XXX support import vue from "vue" (not just import { ... } from "vue") ?
 304 |       treeSelect(importNode, ["named_imports", "import_specifier", "identifier"], n => {
 305 |         vueRouterImportsUsed.add(n.text)
 306 |       })
 307 |       hasVueRouterImport = true
 308 |       importSection += importString(state, "vue-router", vueRouterImportsUsed)
 309 |     } else {
 310 |       importSection += `${importNode.text}\n`
 311 |     }
 312 |   }
 313 |   if (!hasVueRouterImport && vueRouterImportsUsed.size) {
 314 |     importSection = importString(state, "vue-router", vueRouterImportsUsed) + importSection
 315 |   }
 316 |   if (!hasVueImport && vueImportsUsed.size) {
 317 |     importSection = importString(state, "vue", vueImportsUsed) + importSection
 318 |   }
 319 | 
 320 |   let componentsSection = ""
 321 |   for (const k in state.components) {
 322 |     componentsSection += `const ${k} = ${state.components[k]}${state.semi}\n`
 323 |   }
 324 | 
 325 |   let propsSection = ""
 326 |   if (Object.keys(state.props).length) {
 327 |     if (state.using.props) {
 328 |       propsSection += "const props = "
 329 |     }
 330 |     if (Object.keys(state.propDefaultNodes).length) {
 331 |       propsSection += `withDefaults(`
 332 |     }
 333 |     propsSection += `defineProps<{\n`
 334 |     for (const k in state.props) {
 335 |       propsSection += `  ${k}${state.props[k].required ? '' : '?'}: ${state.props[k].type}\n`
 336 |     }
 337 |     propsSection += `}>()`
 338 |     if (Object.keys(state.propDefaultNodes).length) {
 339 |       propsSection += `, {\n`
 340 |       for (const k in state.propDefaultNodes) {
 341 |         propsSection += `  ${k}: ${state.propDefaultNodes[k]},\n`
 342 |       }
 343 |       propsSection += `})`
 344 |     }
 345 |     propsSection += `${state.semi}\n`
 346 |   }
 347 | 
 348 |   let injectionsSection = ""
 349 |   if (state.using.$attrs) {
 350 |     injectionsSection += "const $attrs = useAttrs()\n"
 351 |   }
 352 |   if (state.using.$route) {
 353 |     injectionsSection += "const $route = useRoute()\n"
 354 |   }
 355 |   if (state.using.$router) {
 356 |     injectionsSection += "const $router = useRouter()\n"
 357 |   }
 358 |   if (state.using.$slots) {
 359 |     injectionsSection += "const $slots = useSlots()\n"
 360 |   }
 361 |   if (state.nonRefs.size) {
 362 |     injectionsSection += `const $this = {}\n`
 363 |   }
 364 |   for (const k in state.using.injects) {
 365 |     const v = state.using.injects[k]
 366 |     const warn = v.warn ? ` /* FIXME vue-o2c */` : ""
 367 |     injectionsSection += `const $${k} = inject(${state.quote}${v.str}${state.quote})${warn}${state.semi}\n`
 368 |   }
 369 | 
 370 |   let emitsSection = ""
 371 |   if (state.using.$emit) {
 372 |     if (!state.using.emits.size) {
 373 |       fail("using $emit but no emits discovered") // should never happen
 374 |     }
 375 |     emitsSection += "const $emit = "
 376 |   }
 377 |   if (state.using.emits.size) {
 378 |     emitsSection += `defineEmits([${Array.from(state.using.emits).join(", ")}])${state.semi}\n`
 379 |   }
 380 | 
 381 |   let refsSection = ""
 382 |   let template: string | undefined
 383 |   if (state.using.$el) {
 384 |     refsSection += "const $el = ref<HTMLElement | undefined>()\n"
 385 |     if (templateStartIdx != null) {
 386 |       // XXX handle if template is after start tag or before end tag but no one does this
 387 |       template = lines.slice(templateStartIdx + 1, templateEndIdx).join("\n")
 388 |       // TODO find the first tag and rewrite it such that we inject the attribute ref="$el"
 389 |       // if we do not find one root node we should error and fail
 390 |       if (templatePug) {
 391 |         const templateLines = template.split("\n")
 392 |         // if multiple non-comment lines have 0 indent we have a problem
 393 |         // if only 0 indent line is not an html tag we have a problem
 394 |         let zeroIndentIdx: number | undefined
 395 |         for (let i = 0; i < templateLines.length; i++) {
 396 |           const line = templateLines[i]
 397 |           if (line.startsWith("//")) {
 398 |             continue
 399 |           }
 400 |           const lineSpaces = linePrefixSpaces(line)
 401 |           if (!lineSpaces) {
 402 |             assert(zeroIndentIdx == null, "multiple zero-space indents found in pug template")
 403 |             zeroIndentIdx = i
 404 |           }
 405 |         }
 406 |         assert(zeroIndentIdx != null, "no zero-space indent found in pug template")
 407 |         // can be .some-class, #some-id, div
 408 |         const zeroIndentLine = templateLines[zeroIndentIdx!]
 409 |         // html tag should just be all lower case
 410 |         if (zeroIndentLine.startsWith(".") || zeroIndentLine.startsWith("#") || zeroIndentLine.match(/^[a-z]+([.#(\s]|$)/)) {
 411 |           let newLine: string
 412 |           let idx = zeroIndentLine.indexOf("(")
 413 |           const zeroIndentChars = zeroIndentLine.split("")
 414 |           if (idx >= 0) {
 415 |             const suffix = (zeroIndentLine[idx + 1] && zeroIndentLine[idx + 1] !== ")") ? " " : ""
 416 |             zeroIndentChars.splice(idx + 1, 0, `ref="$el"${suffix}`)
 417 |             newLine = zeroIndentChars.join("")
 418 |           } else {
 419 |             idx = zeroIndentLine.indexOf(" ")
 420 |             if (idx >= 0) {
 421 |               zeroIndentChars.splice(idx + 1, 0, `(ref="$el")`)
 422 |               newLine = zeroIndentChars.join("")
 423 |             } else {
 424 |               idx = zeroIndentLine.length
 425 |               newLine = zeroIndentLine + `(ref="$el")`
 426 |             }
 427 |           }
 428 |           templateLines[zeroIndentIdx!] = newLine
 429 |           template = templateLines.join("\n")
 430 |         } else {
 431 |           fail("cannot edit pug template to suport $el")
 432 |         }
 433 |       } else {
 434 |         // probably need tree-sitter html?
 435 |         fail("cannot edit non-pug template to suport $el")
 436 |       }
 437 |     }
 438 |   }
 439 |   for (const k in state.refs) {
 440 |     refsSection += `const ${k} = ref(${state.refs[k]})${state.semi}\n`
 441 |   }
 442 | 
 443 |   let computedsSection = ""
 444 |   for (const k in state.computeds) {
 445 |     computedsSection += `const ${k} = computed(${state.computeds[k]})${state.semi}\n`
 446 |   }
 447 | 
 448 |   let watchersSection = ""
 449 |   for (const k in state.watchers) {
 450 |     const watcher = state.watchers[k]
 451 |     watchersSection += `watch(() => ${k}, ${watcher.handler}`
 452 |     if (watcher.deep || watcher.immediate) {
 453 |       watchersSection += `, {\n`
 454 |       if (watcher.deep) {
 455 |         watchersSection += `  deep: ${watcher.deep},\n`
 456 |       }
 457 |       if (watcher.immediate) {
 458 |         watchersSection += `  immediate: ${watcher.immediate},\n`
 459 |       }
 460 |       watchersSection += `}`
 461 |     }
 462 |     watchersSection += `)${state.semi}\n`
 463 |   }
 464 | 
 465 |   let methodsSection = ""
 466 |   for (const k in state.methods) {
 467 |     methodsSection += `${state.methods[k]}${state.semi}\n`
 468 |   }
 469 |   if (Object.keys(state.filters).length) {
 470 |     if (!template) {
 471 |       if (templateStartIdx != null) {
 472 |         // XXX handle if template is after start tag or before end tag but no one does this
 473 |         template = lines.slice(templateStartIdx + 1, templateEndIdx).join("\n")
 474 |       } else {
 475 |         fail("cannot find template to rewrite filters")
 476 |       }
 477 |     }
 478 |     template = template!.replace(/{{.*}}/g, match => {
 479 |       // XXX preserve whether like {{ spaced }} or {{tight}}
 480 |       let spacing = ""
 481 |       if (match[2] === " ") {
 482 |         spacing = " "
 483 |       }
 484 |       let str = match
 485 |       const chunks = match.slice(2, match.length-2).split("|").map(c => c.trim())
 486 |       if (chunks.length > 1) {
 487 |         str = chunks[0]
 488 |         for (let i = 1; i < chunks.length; i++) {
 489 |           const chunk = chunks[i]
 490 |           const parenIdx = chunk.indexOf("(")
 491 |           if (parenIdx >= 0) {
 492 |             str = `${chunk.slice(0, parenIdx+1)}${str}, ${chunk.slice(parenIdx+1)}`
 493 |           } else {
 494 |             str = `${chunk}(${str})`
 495 |           }
 496 |         }
 497 |       }
 498 |       return `{{${spacing}${str}${spacing}}}`
 499 |     })
 500 |   }
 501 |   for (const k in state.filters) {
 502 |     methodsSection += `${state.filters[k]}${state.semi}\n`
 503 |   }
 504 | 
 505 |   let directivesSection = ""
 506 |   for (const k in state.directives) {
 507 |     directivesSection += `const v${k[0].toUpperCase() + k.slice(1)} = ${state.directives[k]}${state.semi}\n`
 508 |   }
 509 | 
 510 |   // XXX sort provides alphabetically
 511 |   let providesSection = ""
 512 |   for (const k of state.using.provides) {
 513 |     providesSection += `provide(${state.quote}${k}${state.quote}, ${k})${state.semi}\n`
 514 |   }
 515 | 
 516 |   const scriptSections = [
 517 |     importSection,
 518 |     state.scriptPre,
 519 |     componentsSection,
 520 |     propsSection,
 521 |     injectionsSection,
 522 |     emitsSection,
 523 |     state.hooks.beforeCreate && `${state.hooks.beforeCreate}\n`, // XXX semi?
 524 |     state.hooks.created && `${state.hooks.created}\n`, // XXX semi?
 525 |     refsSection,
 526 |     state.hooks.beforeMount && `onBeforeMount(${state.hooks.beforeMount})${state.semi}\n`,
 527 |     state.hooks.mounted && `onMounted(${state.hooks.mounted})${state.semi}\n`,
 528 |     state.hooks.beforeUpdate && `onBeforeUpdate(${state.hooks.beforeUpdate})${state.semi}\n`,
 529 |     state.hooks.updated && `onUpdated(${state.hooks.updated})${state.semi}\n`,
 530 |     state.hooks.beforeDestroy && `onBeforeUnmount(${state.hooks.beforeDestroy})${state.semi}\n`,
 531 |     state.hooks.destroyed && `onUnmounted(${state.hooks.destroyed})${state.semi}\n`,
 532 |     state.hooks.errorCaptured && `onErrorCaptured(${state.hooks.errorCaptured})${state.semi}\n`,
 533 |     computedsSection,
 534 |     watchersSection,
 535 |     methodsSection,
 536 |     directivesSection,
 537 |     providesSection,
 538 |     state.scriptPost,
 539 |   ].filter(Boolean)
 540 | 
 541 |   const newScript = scriptSections.join("\n")
 542 | 
 543 |   // this can be simplified...
 544 |   let transformed = ""
 545 |   if (scriptEndIdx == null) {
 546 |     throw new Error("script end index not found")
 547 |   }
 548 |   if (template) {
 549 |     if (templateStartIdx == null || scriptStartIdx == null) {
 550 |       throw new Error("template or script indices not found")
 551 |     }
 552 |     if (templateStartIdx < scriptStartIdx) {
 553 |       transformed += lines.slice(0, templateStartIdx + 1).join("\n")
 554 |       transformed += `\n${template}\n`
 555 |       transformed += lines.slice(templateEndIdx, scriptStartIdx).join("\n")
 556 |       transformed += `\n<script setup lang="ts">\n${newScript}</script>\n`
 557 |       transformed += lines.slice(scriptEndIdx + 1, lines.length).join("\n")
 558 |     } else {
 559 |       transformed += lines.slice(0, scriptStartIdx).join("\n")
 560 |       transformed += `\n<script setup lang="ts">\n${newScript}</script>\n`
 561 |       transformed += lines.slice(scriptEndIdx + 1, templateStartIdx + 1).join("\n")
 562 |       transformed += `\n${template}\n`
 563 |       transformed += lines.slice(templateEndIdx, lines.length).join("\n")
 564 |     }
 565 |   } else {
 566 |     transformed += [
 567 |       lines.slice(0, scriptStartIdx).join("\n"),
 568 |       `<script setup lang="ts">\n${newScript}</script>`,
 569 |       lines.slice(scriptEndIdx + 1, lines.length).join("\n"),
 570 |     ].filter(Boolean).join("\n")
 571 |   }
 572 | 
 573 |   state.transformed = transformed
 574 | 
 575 |   return state
 576 | }
 577 | 
 578 | function linePrefixSpaces(line: string): number {
 579 |   const md = line.match(/^(\s*)/)
 580 |   return (md?.[1].length || 0)
 581 | }
 582 | 
 583 | // just relative -- find smallest indent and then normalize it
 584 | // TODO assumes space indent
 585 | function reindent(s: string, minIndentSpaces: number) {
 586 |   const lines = s.split("\n")
 587 |   let minLineSpaces = Infinity
 588 |   // TODO assumes first line is inline (not indented)
 589 |   for (let i = 1; i < lines.length; i++) {
 590 |     const line = lines[i]
 591 |     const lineSpaces = linePrefixSpaces(line)
 592 |     if (lineSpaces < minLineSpaces) {
 593 |       minLineSpaces = lineSpaces
 594 |     }
 595 |   }
 596 |   const spaceIndentChange = minIndentSpaces - minLineSpaces
 597 |   const ret: string[] = [lines[0]]
 598 |   for (let i = 1; i < lines.length; i++) {
 599 |     const line = lines[i]
 600 |     if (spaceIndentChange > 0) {
 601 |       ret.push(" ".repeat(spaceIndentChange) + line)
 602 |     } else {
 603 |       ret.push(line.slice(-spaceIndentChange))
 604 |     }
 605 |   }
 606 |   return ret.join("\n")
 607 | }
 608 | 
 609 | function propTypeIdentifierToType(s: string) {
 610 |   switch (s) {
 611 |     case "Array":
 612 |       return "any[]"
 613 |     case "Boolean":
 614 |       return "boolean"
 615 |     case "Date":
 616 |       return "Date"
 617 |     case "Function":
 618 |       return "Function"
 619 |     case "Number":
 620 |       return "number"
 621 |     case "Object":
 622 |       return "object"
 623 |     case "String":
 624 |       return "string"
 625 |     case "Symbol":
 626 |       return "symbol"
 627 |     default:
 628 |       throw new Error(`unhandled prop type identifier: ${s}`)
 629 |   }
 630 | }
 631 | 
 632 | function handleArray(n: SyntaxNode, onElement: (n: SyntaxNode) => void) {
 633 |   for (const c of n.children) {
 634 |     switch (c.type) {
 635 |       case "[":
 636 |       case ",":
 637 |       case "]":
 638 |         break
 639 |       default:
 640 |         onElement(c)
 641 |     }
 642 |   }
 643 | }
 644 | 
 645 | function handlePropType(n?: SyntaxNode): string {
 646 |   let ret: string
 647 |   if (n?.type === "array") {
 648 |     const types: string[] = []
 649 |     handleArray(n, (c: SyntaxNode) => {
 650 |       // TODO check what kind of node (assumes identifier)
 651 |       types.push(propTypeIdentifierToType(c.text))
 652 |     })
 653 |     ret = types.join(" | ")
 654 |   } else if (n?.type === "identifier") {
 655 |     ret = propTypeIdentifierToType(n.text)
 656 |   } else {
 657 |     fail(`prop value type not array or identifier: ${n?.text}`, n)
 658 |   }
 659 |   // TODO tag these to be touched up after
 660 |   // if (ret.match(/any/)) {
 661 |   //   ret += " // TODO fix any"
 662 |   // }
 663 |   return ret
 664 | }
 665 | 
 666 | function handleProps(state: State, s: SyntaxNode, transformPass = true) { // ObjectNode or ArrayNode
 667 |   if (s.type === 'array') {
 668 |     handleArray(s, (n: SyntaxNode) => {
 669 |         state.props[n.text] = {type: 'any'};
 670 |     })
 671 |     return;
 672 |   }
 673 |   handleObject(s, {
 674 |     onKeyValue(propName: string, n: SyntaxNode) {
 675 |       switch (n.type) {
 676 |         case "identifier":
 677 |           // same as { type: ____ } value
 678 |           state.props[propName] = {type: handlePropType(n)}
 679 |           break
 680 |         case "object":
 681 |           if (n.text === "{}") {
 682 |             state.props[propName] = {type: "any"} // TODO tag to be fixed
 683 |             break
 684 |           }
 685 |           let propType: string | undefined
 686 |           let propRequired: true | undefined = undefined
 687 |           handleObject(n, {
 688 |             onKeyValue(key: string, n: SyntaxNode) {
 689 |               switch (key) {
 690 |                 case "default":
 691 |                   state.propDefaultNodes[propName] = n.text
 692 |                   break
 693 |                 case "type":
 694 |                   propType = handlePropType(n) // TODO do not assume this node is identifier
 695 |                   break
 696 |                 case "required":
 697 |                   if (n.text === "true") {
 698 |                     propRequired = true
 699 |                   } else if (n.text === "false") {
 700 |                     // do nothing, optional by default
 701 |                   } else {
 702 |                     fail(`prop attribute required not true or false: ${n.text}`, n)
 703 |                   }
 704 |                   break
 705 |                 default:
 706 |                   fail(`prop attribute not handled: ${key}`, n)
 707 |               }
 708 |             },
 709 |             onMethod(meth: string, async: boolean, args: SyntaxNode, block: SyntaxNode) {
 710 |               assert(meth === "default", `prop attribute method not named default: ${meth}`, n)
 711 |               assert(args.text === "()", `prop attribute method default has unexpected args: ${args.text}`, args)
 712 |               state.propDefaultNodes[propName] = `() => ${reindent(block.text, 2)}`
 713 |             },
 714 |           })
 715 |           if (propType) {
 716 |             state.props[propName] = {type: propType, required: propRequired}
 717 |           }
 718 |           break
 719 |         default:
 720 |           fail(`prop value not identifier or object: ${n.children[2].type}`, n.children[2])
 721 |       }
 722 |     },
 723 |     onMethod(meth: string, async: boolean, args: SyntaxNode, block: SyntaxNode) {
 724 |       fail(`unexpected prop method: ${meth}`, s) // XXX wrong syntax node here
 725 |     },
 726 |   })
 727 | }
 728 | 
 729 | type OnNode = (n: SyntaxNode) => void | false
 730 | function bfs(n: SyntaxNode, onNode: OnNode) {
 731 |   const q = [n]
 732 |   while (q.length) {
 733 |     const c = q.shift()!
 734 |     const ret = onNode(c)
 735 |     if (ret !== false) {
 736 |       q.push(...c.children)
 737 |     }
 738 |   }
 739 | }
 740 | // <selector1> <selector2> ...
 741 | function treeSelect(n: SyntaxNode, selectors: string[], onNode: OnNode) {
 742 |   const [selector, ...rest] = selectors
 743 |   bfs(n, c => {
 744 |     if (c.type === selector) {
 745 |       if (rest.length) {
 746 |         treeSelect(n, rest, onNode)
 747 |       } else {
 748 |         onNode(c)
 749 |       }
 750 |       return false
 751 |     }
 752 |   })
 753 | }
 754 | 
 755 | function transformToken(state: State, token: string): string {
 756 |   // XXX should warn about this usage and fix...
 757 |   if (token === "$el") {
 758 |     state.using.$el = true
 759 |     return "$el.value"
 760 |   }
 761 |   if (["$emit", "$slots", "$attrs", "$router", "$route"].includes(token)) {
 762 |     (state.using as any)[token] = true // XXX fix ts
 763 |     return token
 764 |   }
 765 |   // this.$refs.display -> display.value and add display to state.refs
 766 |   // TODO need to support this.$refs['a-not-safe-ident'] (use something like $this ??)
 767 |   if (token.match(/\$refs\./)) {
 768 |     const name = token.slice("$refs.".length)
 769 |     state.refs[name] = "" // default to undefined (), but TODO would like to type template refs better!
 770 |     return `${name}.value`
 771 |   }
 772 |   if (token.startsWith("$")) {
 773 |     // TODO need to supply a config of how to get prototype -- eg:
 774 |     // this.$sentry -> {$sentry: 'inject("$sentry")'}, etc.
 775 |     // XXX warn while transforming?
 776 |     const v = token.slice(1)
 777 |     state.using.injects[v] = {str: v, warn: true}
 778 |     return token
 779 |   }
 780 |   assert(!token.startsWith("$"), `config needed to determine how to replace global property: ${token}`)
 781 |   assert(token === identifier(token), `unsafe identifier not supported: ${token}`)
 782 |   if (state.props[token]) {
 783 |     state.using.props = true
 784 |     return `props.${token}`
 785 |   }
 786 |   if (state.computeds[token] || state.refs[token]) {
 787 |     return `${token}.value`
 788 |   }
 789 |   if (state.methods[token]) {
 790 |     return token
 791 |   }
 792 |   if (state.using.injects[token]) {
 793 |     return `$${token}` // convention
 794 |   }
 795 |   state.nonRefs.add(token)
 796 |   return `$this.${token}`
 797 | }
 798 | 
 799 | function getMember(c: SyntaxNode): string | undefined {
 800 |   if (c.type === "member_expression") {
 801 |     const c1 = c.children[1]
 802 |     const c2 = c.children[2]
 803 |     assert(c1.type === "." && c2.type === "property_identifier", "expected simple member expression", c)
 804 |     return c.children[2].text
 805 |   }
 806 |   if (c.type === "subscript_expression") {
 807 |     const c1 = c.children[1]
 808 |     const c2 = c.children[2]
 809 |     const c3 = c.children[3]
 810 |     assert(c1.type === "[" && c2.type === "string" && c3.type === "]", "expected simple subscript expression", c)
 811 |     return c2.text.slice(1, c2.text.length - 1)
 812 |   }
 813 | }
 814 | 
 815 | function transformNode(state: State, n: SyntaxNode) {
 816 |   const replacements: {
 817 |     startIndex: number,
 818 |     endIndex: number,
 819 |     value: string,
 820 |   }[] = []
 821 |   const handleThisKey = (name: string, startIndex: number, endIndex: number) => {
 822 |     const pushReplacement = (value: string) => {
 823 |       replacements.push({
 824 |         startIndex: startIndex - n.startIndex,
 825 |         endIndex: endIndex - n.startIndex,
 826 |         value,
 827 |       })
 828 |     }
 829 |     if (name === "$nextTick") {
 830 |       state.using.nextTick = true
 831 |       pushReplacement("nextTick")
 832 |       return
 833 |     }
 834 |     // do not include nextTick in this (as it is used for watch key source transform)
 835 |     const rep = transformToken(state, name)
 836 |     pushReplacement(rep)
 837 |   }
 838 |   // want to preserve whitespace so i think strat should be start from text but navigate nodes and then replace
 839 |   bfs(n, (c: SyntaxNode) => {
 840 |     if (c.type === "this") {
 841 |       const p1 = c.parent
 842 |       const m1 = getMember(p1)
 843 |       if (m1 === "$refs") {
 844 |         const p2 = p1.parent
 845 |         assert(p2.type === "member_expression", "expected this.$refs parent to be member expression", c)
 846 |         const m2 = getMember(p2)
 847 |         // because next line does $refs. and don't have $this style solution for $refs yet
 848 |         assert(m2 === identifier(m2), "template ref does not have safe identifier", p2)
 849 |         handleThisKey(`$refs.${m2}`, p2.startIndex, p2.endIndex)
 850 |       } else if (m1) {
 851 |         handleThisKey(m1, p1.startIndex, p1.endIndex)
 852 |       }
 853 |       if (m1 === "$emit") {
 854 |         // collect first arg of this.$emit as well for using.emits
 855 |         let foundEmit = false
 856 |         let n: SyntaxNode | null = c
 857 |         // look up the tree until call_expression
 858 |         while (n) {
 859 |           if (n.type === "call_expression") {
 860 |             for (const c of n.children) {
 861 |               if (c.type === "arguments") {
 862 |                 assert(c.children[0].type === "(", "expected parent after $emit", c)
 863 |                 assert(c.children[1].type === "string", "expected string as first $emit arg", c)
 864 |                 state.using.emits.add(c.children[1].text)
 865 |                 foundEmit = true
 866 |               }
 867 |             }
 868 |             break
 869 |           }
 870 |           n = n.parent
 871 |         }
 872 |         assert(foundEmit, "could not find emit to define", c)
 873 |       }
 874 |     }
 875 |   })
 876 |   const sortedReplacements = replacements.sort((a, b) => a.startIndex - b.startIndex)
 877 |   let ret = ""
 878 |   let idx = 0
 879 |   for (let i = 0; i < sortedReplacements.length; i++) {
 880 |     const r = sortedReplacements[i]
 881 |     ret += n.text.substring(idx, r.startIndex) + r.value
 882 |     idx = r.endIndex
 883 |   }
 884 |   ret += n.text.substring(idx)
 885 |   return ret
 886 | }
 887 | 
 888 | function handleComputeds(state: State, n: SyntaxNode, transformPass = true) {
 889 |   handleObject(n, {
 890 |     onKeyValue(key: string, n: SyntaxNode) {
 891 |       if (!transformPass) {
 892 |         state.computeds[key] = DISCOVERED
 893 |         return
 894 |       }
 895 |       switch (n.type) {
 896 |         case "object":
 897 |           // XXX check that just get/set?
 898 |           const computedString = transformNode(state, n)
 899 |           state.computeds[key] = reindent(computedString, 0)
 900 |           break
 901 |         default:
 902 |           fail(`computed object unexpected key: ${key}`, n)
 903 |       }
 904 |     },
 905 |     onMethod(meth: string, async: boolean, args: SyntaxNode, block: SyntaxNode) {
 906 |       assert(!async, "computed async method unexpected", block) // XXX wrong syntax node
 907 |       if (transformPass) {
 908 |         const computedString = transformNode(state, block)
 909 |         assert(args.text === "()", `computed method has unexpected args: ${args.text}`, args)
 910 |         state.computeds[meth] = `() => ${reindent(computedString, 0)}`
 911 |       } else {
 912 |         state.computeds[meth] = DISCOVERED
 913 |       }
 914 |     },
 915 |   })
 916 | }
 917 | 
 918 | function handleMethodKeyValue(key: string, n: SyntaxNode) {
 919 |   // (async) formal_paramaters => statement_block
 920 |   let i = 0
 921 |   let async = false
 922 |   let args = "()"
 923 |   if (n.children[i].type === "async") {
 924 |     async = true
 925 |     i++
 926 |   }
 927 |   if (n.children[i].type === "formal_parameters") {
 928 |     args = n.children[i].text
 929 |     i++
 930 |   }
 931 |   assert(n.children[i].type === "=>", "expected =>", n.children[i])
 932 |   i++
 933 |   assert(n.children[i].type === "statement_block", "expected statement block", n.children[i])
 934 |   const statement = n.children[i]
 935 |   return {
 936 |     async,
 937 |     args,
 938 |     statement,
 939 |   }
 940 | }
 941 | 
 942 | function handleMethods(state: State, n: SyntaxNode, transformPass = true) {
 943 |   handleObject(n, {
 944 |     onKeyValue(key, n) {
 945 |       if (!transformPass) {
 946 |         state.methods[key] = DISCOVERED
 947 |       } else {
 948 |         const { async, args, statement } = handleMethodKeyValue(key, n)
 949 |         state.methods[key] = `${async ? 'async ' : ''}function ${key}${args} ${reindent(transformNode(state, statement), 0)}`
 950 |       }
 951 |     },
 952 |     onMethod(meth: string, async: boolean, args: SyntaxNode, block: SyntaxNode) {
 953 |       if (transformPass) {
 954 |         state.methods[meth] = `${async ? 'async ' : ''}function ${meth}${args.text} ${reindent(transformNode(state, block), 0)}`
 955 |       } else {
 956 |         state.methods[meth] = DISCOVERED
 957 |       }
 958 |     },
 959 |   })
 960 | }
 961 | 
 962 | function handleWatchers(state: State, n: SyntaxNode, transformPass = true) {
 963 |   if (!transformPass) {
 964 |     // cannot refer to watchers so need to discover them
 965 |     return
 966 |   }
 967 |   handleObject(n, {
 968 |     onKeyValue(key: string, n: SyntaxNode) {
 969 |       switch (n.type) {
 970 |         case "object":
 971 |           const watch: WatchConfig = {}
 972 |           handleObject(n, {
 973 |             onKeyValue(key: string, n: SyntaxNode) {
 974 |               switch (key) {
 975 |                 case "deep":
 976 |                   watch.deep = n.text
 977 |                   break
 978 |                 case "handler":
 979 |                   watch.handler = n.text
 980 |                   break
 981 |                 case "immediate":
 982 |                   watch.immediate = n.text
 983 |                   break
 984 |                 default:
 985 |                   fail(`unexpected watch value attribute: ${key}`, n)
 986 |               }
 987 |             },
 988 |             onMethod(meth: string, async: boolean, args: SyntaxNode, block: SyntaxNode) {
 989 |               watch.handler = `${async ? 'async ' : ''}${args.text} => ${reindent(transformNode(state, block), 0)}`
 990 |             },
 991 |           })
 992 |           const ds = key.split('.', 2)
 993 |           state.watchers[transformToken(state, ds[0]) + (ds[1] ? `.${ds[1]}` : '')] = watch
 994 |           break
 995 |         default:
 996 |           fail(`unexpected watch value type (not method or object): ${n.type}`, n)
 997 |       }
 998 |     },
 999 |     onMethod(meth: string, async: boolean, args: SyntaxNode, block: SyntaxNode) {
1000 |       const watch: WatchConfig = {}
1001 |       watch.handler = `${async ? 'async ' : ''}${args.text} => ${reindent(transformNode(state, block), 0)}`
1002 |       const ds = meth.split('.', 2)
1003 |       state.watchers[transformToken(state, ds[0]) + (ds[1] ? `.${ds[1]}` : '')] = watch
1004 |     },
1005 |   })
1006 | }
1007 | 
1008 | function handleDirectives(state: State, n: SyntaxNode, transformPass = true) {
1009 |   if (!transformPass) {
1010 |     // cannot refer to directives so need to discover them
1011 |     return
1012 |   }
1013 |   // directives: {
1014 |   //   a: someDirective, // -> vA
1015 |   //   b: { created, ... } // -> vB
1016 |   // }
1017 |   handleObject(n, {
1018 |     onKeyValue(key, n) {
1019 |       state.directives[key] = reindent(transformNode(state, n), 0)
1020 |     },
1021 |     onMethod(meth: string, async: boolean, args: SyntaxNode, block: SyntaxNode) {
1022 |       assert(false, "expected only key-value directives object", n)
1023 |     },
1024 |   })
1025 | }
1026 | 
1027 | function handleComponents(state: State, n: SyntaxNode, transformPass = true) {
1028 |   if (transformPass) {
1029 |     // nothing to transform
1030 |     return
1031 |   }
1032 |   handleObject(n, {
1033 |     onKeyValue(key, n) {
1034 |       state.components[key] = reindent(n.text, 0)
1035 |     },
1036 |     onMethod(meth: string, async: boolean, args: SyntaxNode, block: SyntaxNode) {
1037 |       assert(false, "expected only key-value components object", n)
1038 |     },
1039 |   })
1040 | }
1041 | 
1042 | function handleDefaultExportKeyValue(state: State, key: string, n: SyntaxNode, transformPass = true) {
1043 |   switch (key) {
1044 |     case "components":
1045 |       // we don't need this now! but we should do better and remove/rewrite imports to use components.d.ts
1046 |       handleComponents(state, n, transformPass)
1047 |       break
1048 |     case "computed":
1049 |       handleComputeds(state, n, transformPass)
1050 |       break
1051 |     case "directives":
1052 |       handleDirectives(state, n, transformPass)
1053 |       break
1054 |     case "emits":
1055 |       assert(n.type === "array", "expected emits to be an array", n)
1056 |       handleArray(n, c => {
1057 |         assert(c.type === "string", "expected emits to be array of simple strings", c)
1058 |         state.using.emits.add(c.text)
1059 |       })
1060 |       break
1061 |     case "filters":
1062 |       assert(n.type === "object", "expected filters to be an object", n)
1063 |       handleObject(n, {
1064 |         onKeyValue(key, c) {
1065 |           if (!transformPass) {
1066 |             state.filters[key] = DISCOVERED
1067 |           } else {
1068 |             const { async, args, statement } = handleMethodKeyValue(key, c)
1069 |             state.filters[key] = `${async ? 'async ' : ''}function ${key}${args} ${reindent(transformNode(state, statement), 0)}`
1070 |           }
1071 |         },
1072 |         onMethod(meth, async, args, block) {
1073 |           if (!transformPass) {
1074 |             state.filters[meth] = DISCOVERED
1075 |           } else {
1076 |             state.filters[meth] = `${async ? 'async ' : ''}function ${meth}${args.text} ${reindent(transformNode(state, block), 0)}`
1077 |           }
1078 |         },
1079 |       })
1080 |       break
1081 |     case "inject":
1082 |       if (n.type === "array") {
1083 |         handleArray(n, c => {
1084 |           assert(c.type === "string", "expected inject to be array of simple strings", c)
1085 |           const v = c.text.slice(1, c.text.length - 1)
1086 |           state.using.injects[v] = {str: v}
1087 |         })
1088 |       } else if (n.type === "object") {
1089 |         fail("inject object not supported yet")
1090 |       } else {
1091 |         fail("expected inject to be an array or object", n)
1092 |       }
1093 |       break
1094 |     case "methods":
1095 |       handleMethods(state, n, transformPass)
1096 |       break
1097 |     case "name":
1098 |       // do nothing with this...
1099 |       break
1100 |     case "props":
1101 |       assert(n.type === "object" || n.type === "array", `expected props to be an object or array: ${n.type}`, n)
1102 |       handleProps(state, n, transformPass)
1103 |       break
1104 |     case "provide":
1105 |       assert(n.type === "array", "expected provide to be an array", n)
1106 |       handleArray(n, c => {
1107 |         assert(c.type === "string", "expected provide to be array of simple strings", c)
1108 |         state.using.provides.add(c.text.slice(1, c.text.length - 1))
1109 |       })
1110 |       break
1111 |     case "watch":
1112 |       handleWatchers(state, n, transformPass)
1113 |       break
1114 |     default:
1115 |       fail(`export default key value not supported: ${key}`, n)
1116 |   }
1117 | }
1118 | 
1119 | function handleDataMethod(state: State, n: SyntaxNode, transformPass = true) {
1120 |   for (const c of n.children) {
1121 |     switch (c.type) {
1122 |       case "{":
1123 |       case "}":
1124 |       case "comment":
1125 |         break
1126 |       case "return_statement":
1127 |         if (c.children[1]?.type === "object") {
1128 |           // simple version, we can just make naked refs
1129 |           // input:
1130 |           // data() {
1131 |           //   return { a: "hi" }
1132 |           // }
1133 |           // output:
1134 |           // const a = ref("hi")
1135 |           handleObject(c.children[1], {
1136 |             onKeyValue(key: string, n: SyntaxNode) {
1137 |               if (!transformPass) {
1138 |                 state.refs[key] = DISCOVERED
1139 |               } else {
1140 |                 state.refs[key] = reindent(transformNode(state, n), 0)
1141 |               }
1142 |             },
1143 |             onMethod(meth: string, async: boolean, args: SyntaxNode, block: SyntaxNode) {
1144 |               fail(`data() return object method key not supported: ${meth}`, block) // XXX wrong syntax node
1145 |             },
1146 |           })
1147 |           break
1148 |         }
1149 |         /* fall-through */
1150 |       default:
1151 |         // there might be a premable, we preserve entire function and then assign the returned object to refs in $data
1152 |         // input:
1153 |         // data() {
1154 |         //   console.log("hi")
1155 |         //   const ret = {}; ret.yo = "hi"; return ret
1156 |         // }
1157 |         // output:
1158 |         // const $data = Object.entries((() => {
1159 |         //   console.log("hi")
1160 |         //   const ret = {}; ret.yo = "hi"; return ret
1161 |         // })()).reduce((acc, [k, v]) => {
1162 |         //   acc[k] = ref(v)
1163 |         //   return acc
1164 |         // }, {})
1165 |         // TODO we need to rewrite template in this case :/
1166 |         // we can try to find strings in the method block but it can be fully dynamic :/
1167 |         // state.using.$data = n.text
1168 |         fail("complex data() not supported", c)
1169 |     }
1170 |   }
1171 | }
1172 | 
1173 | function handleDefaultExportMethod(state: State, meth: string, async: boolean, args: SyntaxNode, block: SyntaxNode, transformPass = true) {
1174 |   switch (meth) {
1175 |     case "data":
1176 |       handleDataMethod(state, block, transformPass)
1177 |       break
1178 |     case "beforeCreate":
1179 |     case "created":
1180 |       if (transformPass) {
1181 |         assert(args.text === "()", `${meth} hook method has unexpected args: ${args.text}`, args)
1182 |         assert(block.children[0]?.type === "{", "expected open brace in block", block)
1183 |         assert(block.children[2]?.type === "}", "expected close brace in block", block)
1184 |         state.hooks[meth] = reindent(transformNode(state, block.children[1]), 0)
1185 |       }
1186 |       break
1187 |     case "beforeMount":
1188 |     case "mounted":
1189 |     case "beforeUpdate": // XXX arg?
1190 |     case "updated": // XXX arg?
1191 |     case "beforeDestroy":
1192 |     case "destroyed":
1193 |       if (transformPass) {
1194 |         assert(args.text === "()", `${meth} hook method has unexpected args: ${args.text}`, args)
1195 |         assert(block.children[0]?.type === "{", "expected open brace in block", block)
1196 |         assert(block.children[block.children.length - 1]?.type === "}", "expected close brace in block", block)
1197 |         state.hooks[meth] = `${async ? 'async ' : ''}() => ${reindent(transformNode(state, block), 0)}`
1198 |       }
1199 |       break
1200 |     case "errorCaptured":
1201 |       if (transformPass) {
1202 |         assert(args.children[0].type === "(", "expected open paren in args", args)
1203 |         assert(args.children[2].type === ")", "expected open paren in args", args)
1204 |         assert(args.children[1].type === "identifier", "expected identifier in args", args)
1205 |         assert(block.children[0]?.type === "{", "expected open brace in block", block)
1206 |         assert(block.children[2]?.type === "}", "expected close brace in block", block)
1207 |         state.hooks.errorCaptured = `${async ? 'async ' : ''}(${args.children[1].text}: Error) => ${reindent(transformNode(state, block), 0)}`
1208 |       }
1209 |       break
1210 |     case "provide":
1211 |       fail("provide() not supported yet")
1212 |     default:
1213 |       // TODO other hooks destroyed, etc.
1214 |       fail(`export default key method not supported: ${meth}`, block) // XXX wrong syntax node
1215 |   }
1216 | }
1217 | 
1218 | type HandleObjectHooks = {
1219 |   onKeyValue?: (key: string, n: SyntaxNode) => void
1220 |   onMethod?: (meth: string, async: boolean, args: SyntaxNode, block: SyntaxNode) => void
1221 | }
1222 | 
1223 | function handleObject(object: SyntaxNode, hooks: HandleObjectHooks) { // ObjectNode
1224 |   for (const c of object.children) {
1225 |     if (c.type === "pair") {
1226 |       const n = c.children[0]
1227 |       let key
1228 |       if (n?.type === "property_identifier") {
1229 |         key = n.text
1230 |       } else if (n?.type === "string") {
1231 |         key = n.text.slice(1, -1) // XXX might have to do some harder processing
1232 |       }
1233 |       assert(key, `pair[0] not supported: ${c.children[0].type}`, c.children[0])
1234 |       assert(c.children[1]?.type === ":", `pair[1] not ":": ${c.children[1].type}`, c.children[1])
1235 |       assert(c.children[2], "pair has no 3nd child", c)
1236 |       hooks.onKeyValue?.(key, c.children[2])
1237 |     } else if (c.type === "method_definition") {
1238 |       let meth: string | undefined
1239 |       let async = false
1240 |       let args: SyntaxNode | undefined
1241 |       let block: SyntaxNode | undefined
1242 |       for (const n of c.children) {
1243 |         switch (n.type) {
1244 |           case "async":
1245 |             async = true
1246 |             break
1247 |           case "computed_property_name":
1248 |             // eg. ["test"]() {}
1249 |             if (n.children[0]?.type === "[" && n.children[2]?.type === "]" && n.children[1]?.type === "string") {
1250 |               meth = n.text.slice(2, -2)
1251 |               break
1252 |             }
1253 |             fail(`unhandled method_definition structure, found: ${n.type}`, n)
1254 |           case "property_identifier":
1255 |             meth = n.text
1256 |             break
1257 |           case "statement_block":
1258 |             block = n
1259 |             break
1260 |           case "formal_parameters":
1261 |             args = n
1262 |             break
1263 |           default:
1264 |             fail(`unhandled method_definition structure, found: ${n.type}`, n)
1265 |         }
1266 |       }
1267 |       assert(meth && args && block, "did not find required nodes for method_definition", c) 
1268 |       hooks.onMethod?.(meth!, async, args!, block!) // fix ts
1269 |     } else if (c.type === "comment") {
1270 |       // TODO preserve these -- onComment
1271 |     } else if (c.type === "{" || c.type === "," || c.type === "}") {
1272 |       // do nothing
1273 |     } else {
1274 |       fail(`unexpected node found while parsing object: ${c.type}`, c)
1275 |     }
1276 |   }
1277 | }
1278 | 
1279 | function handleDefaultExport(state: State, n: SyntaxNode) {
1280 |   let transformPass = false
1281 |   handleObject(n, {
1282 |     onKeyValue: (key: string, n: SyntaxNode) => handleDefaultExportKeyValue(state, key, n, transformPass),
1283 |     onMethod: (meth: string, async: boolean, args: SyntaxNode, block: SyntaxNode) => 
1284 |       handleDefaultExportMethod(state, meth, async, args, block, transformPass),
1285 |   })
1286 |   transformPass = true
1287 |   handleObject(n, {
1288 |     onKeyValue: (key: string, n: SyntaxNode) => handleDefaultExportKeyValue(state, key, n, transformPass),
1289 |     onMethod: (meth: string, async: boolean, args: SyntaxNode, block: SyntaxNode) => 
1290 |       handleDefaultExportMethod(state, meth, async, args, block, transformPass),
1291 |   })
1292 | }
1293 | 
1294 | function maybeHandleDefaultExport(state: State, n: SyntaxNode): boolean {
1295 |   let defaultExport = false
1296 |   for (const c1 of n.children) {
1297 |     if (defaultExport) {
1298 |       if (c1.type === "object") {
1299 |         handleDefaultExport(state, c1)
1300 |         return true
1301 |       }
1302 |       if (c1.type === "call_expression") {
1303 |         const c2 = c1.children[0]
1304 |         if (c2.type === "identifier" && c2.text === "defineComponent") {
1305 |           const c3 = c1.children[1]
1306 |           if (c3.type === "arguments") {
1307 |             if (c3.children[0].type === "(" && c3.children[2].type === ")" && c3.children[1].type === "object") {
1308 |               handleDefaultExport(state, c3.children[1])
1309 |               return true
1310 |             }
1311 |           }
1312 |         }
1313 |       }
1314 |       fail("unexpected default export", c1)
1315 |     }
1316 |     if (c1.text === "default") {
1317 |       defaultExport = true
1318 |     }
1319 |   }
1320 |   return false
1321 | }


--------------------------------------------------------------------------------