docs: update readme

Author: danielroe

README.md

@@ -20,7 +20,43 @@ pnpm install vue-sfc-transformer
 ```
 
 ```js
-import {} from 'vue-sfc-transformer'
+import { parse as parseDOM } from '@vue/compiler-dom'
+import { parse as parseSFC } from '@vue/compiler-sfc'
+import { transform } from 'esbuild'
+
+import { preTranspileScriptSetup, transpileVueTemplate } from 'vue-sfc-transformer'
+
+const src = `
+<template>
+  <div v-if="test as any" />
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  test?: string
+}>()
+</script>
+`
+
+const transpiledTemplate = await transpileVueTemplate(
+  src,
+  parseDOM(src, { parseMode: 'base' }),
+  0,
+  async (code) => {
+    const res = await transform(code, { loader: 'ts', target: 'esnext' })
+    return res.code
+  },
+)
+
+console.log(transpiledTemplate)
+
+const sfc = parseSFC(transpiledTemplate, {
+  filename: 'test.vue',
+  ignoreEmpty: true,
+})
+
+const { content: scriptBlockContents } = await preTranspileScriptSetup(sfc.descriptor, 'test.vue')
+console.log(scriptBlockContents)
 ```
 
 ## 💻 Development

eslint.config.js

@@ -1,3 +1,9 @@
 import antfu from '@antfu/eslint-config'
 
-export default antfu()
+export default antfu().append({
+  files: ['playground/**'],
+  rules: {
+    'antfu/no-top-level-await': 'off',
+    'no-console': 'off',
+  },
+})

package.json

@@ -28,7 +28,7 @@
   "scripts": {
     "build": "unbuild",
     "dev": "vitest dev",
-    "lint": "eslint . --fix",
+    "lint": "eslint .",
     "prepare": "simple-git-hooks",
     "prepack": "pnpm build",
     "prepublishOnly": "pnpm lint && pnpm test",

playground/index.js

@@ -1,7 +1,37 @@
-import assert from 'node:assert'
-import * as pkg from 'vue-sfc-transformer'
+import { parse as parseDOM } from '@vue/compiler-dom'
+import { parse as parseSFC } from '@vue/compiler-sfc'
+import { transform } from 'esbuild'
 
-// eslint-disable-next-line no-console
-console.log(pkg.welcome())
+import { preTranspileScriptSetup, transpileVueTemplate } from 'vue-sfc-transformer'
 
-assert.strictEqual(pkg.welcome(), 'hello world')
+const src = `
+<template>
+  <div v-if="test as any" />
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  test?: string
+}>()
+</script>
+`
+
+const transpiledTemplate = await transpileVueTemplate(
+  src,
+  parseDOM(src, { parseMode: 'base' }),
+  0,
+  async (code) => {
+    const res = await transform(code, { loader: 'ts', target: 'esnext' })
+    return res.code
+  },
+)
+
+console.log(transpiledTemplate)
+
+const sfc = parseSFC(transpiledTemplate, {
+  filename: 'test.vue',
+  ignoreEmpty: true,
+})
+
+const { content: scriptBlockContents } = await preTranspileScriptSetup(sfc.descriptor, 'test.vue')
+console.log(scriptBlockContents)

playground/package.json

@@ -6,5 +6,10 @@
   },
   "dependencies": {
     "vue-sfc-transformer": "latest"
+  },
+  "devDependencies": {
+    "@vue/compiler-dom": "^3.5.13",
+    "@vue/compiler-sfc": "^3.5.13",
+    "esbuild": "^0.25.2"
   }
 }