Parsed failed

[sxzz]

https://github.com/antfu/vue2-script-setup-transform/blob/03b03cf5c603441c5980cea1c9a442616a635abd/playground/App.vue#L1-L5

<template>
- <div>
+ <div :style="{ 'text-align': 'right' }">
    <hello-world name="Vue 2" @update="onUpdate" />
  </div>
</template>

<script setup lang="ts">
import HelloWorld from './HelloWorld.vue'

function onUpdate(e: any) {
  console.log(e)
}
</script>

Error:

● transform › App.vue

    SyntaxError: Missing semicolon. (1:14)

      at Parser._raise (node_modules/.pnpm/@babel+parser@7.15.3/node_modules/@babel/parser/src/parser/error.js:134:45)
      at Parser.raiseWithData (node_modules/.pnpm/@babel+parser@7.15.3/node_modules/@babel/parser/src/parser/error.js:129:17)
      at Parser.raise (node_modules/.pnpm/@babel+parser@7.15.3/node_modules/@babel/parser/src/parser/error.js:78:17)
      at Parser.semicolon (node_modules/.pnpm/@babel+parser@7.15.3/node_modules/@babel/parser/src/parser/util.js:137:10)
      at Parser.parseExpressionStatement (node_modules/.pnpm/@babel+parser@7.15.3/node_modules/@babel/parser/src/parser/statement.js:891:10)
      at Parser.parseStatementContent (node_modules/.pnpm/@babel+parser@7.15.3/node_modules/@babel/parser/src/parser/statement.js:375:19)
      at Parser.parseStatement (node_modules/.pnpm/@babel+parser@7.15.3/node_modules/@babel/parser/src/parser/statement.js:230:17)
      at Parser.parseBlockOrModuleBlockBody (node_modules/.pnpm/@babel+parser@7.15.3/node_modules/@babel/parser/src/parser/statement.js:966:25)
      at Parser.parseBlockBody (node_modules/.pnpm/@babel+parser@7.15.3/node_modules/@babel/parser/src/parser/statement.js:942:10)
      at Parser.parseBlock (node_modules/.pnpm/@babel+parser@7.15.3/node_modules/@babel/parser/src/parser/statement.js:912:10)

[sxzz]

https://github.com/antfu/vue2-script-setup-transform/blob/03b03cf5c603441c5980cea1c9a442616a635abd/src/parse.ts#L119

+ code = `(${code})`
  const ast = parse(code, options) as any

add a bracket maybe can solve this.

[sxzz]

...Another problem.

It should only return the top-level variables and functions
https://github.com/antfu/vue2-script-setup-transform/blob/03b03cf5c603441c5980cea1c9a442616a635abd/src/transformScriptSetup.ts#L34-L45

Example:

<template>
  <div :style="{ 'text-align': 'right' }">
    <hello-world name="Vue 2" @update="onUpdate" />
+   <span>{{ data.title }}</span>
  </div>
</template>

<script setup lang="ts">
import HelloWorld from './HelloWorld.vue'

function onUpdate(e: any) {
  console.log(e)
}

+ const data = {
+   title: 'hello',
+ }
</script>

Output:

return {
  onUpdate,
  data,
  title // remove this
};

[sxzz]

be5be03#r55250511

Breaking when v-if

<template>
  <div v-if="show">
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    }
  },
}
</script>

[sxzz]

I'm sooorry... but

<template>
  <div></div>
</template>

<script setup>
import { toRefs, reactive } from 'vue'
const state = reactive({ data: 'hello' })
const { data } = toRefs(state)
</script>

  ● transform › fixture › Test.vue

    TypeError: Cannot read property 'replace' of undefined

      43 |   const returns = Array.from(identifiers).filter(i => result.template.identifiers.has(i))
      44 |   const components = Array.from(identifiers).filter(i => result.template.components.has(i)
    > 45 |     || result.template.components.has(camelize(i))
         |                                       ^
      46 |     || result.template.components.has(capitalize(camelize(i))),
      47 |   )
      48 |

https://github.com/antfu/vue2-script-setup-transform/blob/98cf4551b7ecff172730d96980844cb123efbfc1/src/parse.ts#L133-L136