├── src
    ├── mkdist.ts
    ├── index.ts
    ├── utils
    │   ├── string.ts
    │   ├── object.ts
    │   ├── script-setup.ts
    │   └── template.ts
    ├── block-loader
    │   ├── style.ts
    │   ├── script.ts
    │   ├── types.ts
    │   ├── default.ts
    │   └── template.ts
    ├── types
    │   └── mkdist.ts
    ├── sfc-transformer.ts
    └── plugins
    │   └── mkdist.ts
├── .gitignore
├── renovate.json
├── eslint.config.js
├── .editorconfig
├── playground
    ├── package.json
    └── index.js
├── vitest.config.ts
├── tsconfig.json
├── .github
    ├── workflows
    │   ├── release.yml
    │   ├── release-nightly.yml
    │   └── ci.yml
    └── ISSUE_TEMPLATE
    │   └── ---bug-report.yml
├── LICENCE
├── pnpm-workspace.yaml
├── package.json
├── CODE_OF_CONDUCT.md
├── README.md
└── test
    ├── template.test.ts
    ├── setup.test.ts
    └── mkdist.test.ts


/src/mkdist.ts:
--------------------------------------------------------------------------------
1 | export { vueLoader } from './plugins/mkdist'
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | coverage
4 | .vscode
5 | .DS_Store
6 | .eslintcache
7 | *.log*
8 | *.env*
9 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { preTranspileScriptSetup } from './utils/script-setup'
2 | export { transpileVueTemplate } from './utils/template'
3 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
3 |   "extends": [
4 |     "github>danielroe/renovate"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/src/utils/string.ts:
--------------------------------------------------------------------------------
1 | export function cleanupBreakLine(str: string): string {
2 |   return str.replaceAll(/(\n\n)\n+/g, '\n\n').replace(/^\s*\n|\n\s*$/g, '')
3 | }
4 | 


--------------------------------------------------------------------------------
/src/block-loader/style.ts:
--------------------------------------------------------------------------------
1 | import { defineDefaultBlockLoader } from './default'
2 | 
3 | export const styleLoader = defineDefaultBlockLoader({
4 |   defaultLang: 'css',
5 |   type: 'style',
6 | })
7 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import antfu from '@antfu/eslint-config'
 2 | 
 3 | export default antfu().append({
 4 |   files: ['playground/**'],
 5 |   rules: {
 6 |     'antfu/no-top-level-await': 'off',
 7 |     'no-console': 'off',
 8 |   },
 9 | })
10 | 


--------------------------------------------------------------------------------
/src/utils/object.ts:
--------------------------------------------------------------------------------
1 | export function toOmit<R extends Record<keyof object, unknown>, K extends keyof R>(record: R, toRemove: K[]): Omit<R, K> {
2 |   return Object.fromEntries(Object.entries(record).filter(([key]) => !toRemove.includes(key as K))) as Omit<R, K>
3 | }
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | end_of_line = lf
 5 | insert_final_newline = true
 6 | trim_trailing_whitespace = true
 7 | charset = utf-8
 8 | 
 9 | [*.js]
10 | indent_style = space
11 | indent_size = 2
12 | 
13 | [{package.json,*.yml,*.cjson}]
14 | indent_style = space
15 | indent_size = 2
16 | 


--------------------------------------------------------------------------------
/playground/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "type": "module",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "dev": "node index.js"
 6 |   },
 7 |   "dependencies": {
 8 |     "vue-sfc-transformer": "workspace:*"
 9 |   },
10 |   "devDependencies": {
11 |     "@vue/compiler-sfc": "catalog:dev",
12 |     "esbuild": "catalog:peer"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath } from 'node:url'
 2 | import { defineConfig } from 'vitest/config'
 3 | 
 4 | export default defineConfig({
 5 |   resolve: {
 6 |     alias: {
 7 |       'vue-sfc-transformer': fileURLToPath(
 8 |         new URL('./src/index.ts', import.meta.url).href,
 9 |       ),
10 |     },
11 |   },
12 |   test: {
13 |     coverage: {
14 |       enabled: true,
15 |       include: ['src'],
16 |       reporter: ['text', 'json', 'html'],
17 |     },
18 |   },
19 | })
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2022",
 4 |     "lib": [
 5 |       "es2022"
 6 |     ],
 7 |     "moduleDetection": "force",
 8 |     "module": "preserve",
 9 |     "resolveJsonModule": true,
10 |     "allowJs": true,
11 |     "strict": true,
12 |     "noImplicitOverride": true,
13 |     "noUncheckedIndexedAccess": true,
14 |     "noEmit": true,
15 |     "esModuleInterop": true,
16 |     "forceConsistentCasingInFileNames": true,
17 |     "isolatedModules": true,
18 |     "verbatimModuleSyntax": true,
19 |     "skipLibCheck": true
20 |   },
21 |   "include": [
22 |     "src",
23 |     "test",
24 |     "playground"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: release
 2 | 
 3 | permissions:
 4 |   contents: write
 5 | 
 6 | on:
 7 |   push:
 8 |     tags:
 9 |       - 'v*'
10 | 
11 | jobs:
12 |   release:
13 |     runs-on: ubuntu-latest
14 |     steps:
15 |       - uses: actions/checkout@v6
16 |         with:
17 |           fetch-depth: 0
18 | 
19 |       - run: npm i -g --force corepack && corepack enable
20 |       - uses: actions/setup-node@v6
21 |         with:
22 |           node-version: lts/*
23 |           cache: pnpm
24 | 
25 |       - name: 📦 Install dependencies
26 |         run: pnpm install
27 | 
28 |       - run: pnpm changelogithub
29 |         env:
30 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
31 | 


--------------------------------------------------------------------------------
/.github/workflows/release-nightly.yml:
--------------------------------------------------------------------------------
 1 | name: release
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 |   pull_request:
 8 |     branches:
 9 |       - main
10 | 
11 | permissions: {}
12 | 
13 | jobs:
14 |   release-nightly:
15 |     runs-on: ubuntu-latest
16 |     steps:
17 |       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
18 |       - run: npm i -g --force corepack && corepack enable
19 |       - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
20 |         with:
21 |           node-version: lts/*
22 |           cache: pnpm
23 | 
24 |       - name: 📦 Install dependencies
25 |         run: pnpm install
26 | 
27 |       - name: 🛠 Build project
28 |         run: pnpm build
29 | 
30 |       - name: publish nightly release
31 |         run: pnpm pkg-pr-new publish --compact
32 | 


--------------------------------------------------------------------------------
/src/types/mkdist.ts:
--------------------------------------------------------------------------------
 1 | // TODO: export from mkdist
 2 | 
 3 | import type { MkdistOptions } from 'mkdist'
 4 | 
 5 | interface InputFile {
 6 |   path: string
 7 |   extension: string
 8 |   srcPath?: string
 9 |   getContents: () => Promise<string> | string
10 | }
11 | 
12 | interface OutputFile {
13 |   /**
14 |    * relative to distDir
15 |    */
16 |   path: string
17 |   srcPath?: string
18 |   extension?: string
19 |   contents?: string
20 |   declaration?: boolean
21 |   errors?: Error[]
22 |   raw?: boolean
23 |   skip?: boolean
24 | }
25 | 
26 | type LoaderResult = OutputFile[] | undefined
27 | 
28 | interface LoaderContext {
29 |   loadFile: (input: InputFile) => LoaderResult | Promise<LoaderResult>
30 |   options: MkdistOptions
31 | }
32 | 
33 | export type Loader = (input: InputFile, context: LoaderContext) => LoaderResult | Promise<LoaderResult>
34 | 


--------------------------------------------------------------------------------
/src/block-loader/script.ts:
--------------------------------------------------------------------------------
 1 | import type { BlockLoader, LoaderFile, LoadFileContext } from './types'
 2 | import { toOmit } from '../utils/object'
 3 | 
 4 | const scriptValidExtensions = new Set(['.js', '.cjs', '.mjs'])
 5 | 
 6 | export const scriptLoader: BlockLoader = async (block, { isTs, loadFile }) => {
 7 |   if (block.type !== 'script') {
 8 |     return
 9 |   }
10 | 
11 |   const extension = isTs ? '.ts' : '.js'
12 | 
13 |   const input: LoaderFile = { extension, content: block.content }
14 |   const context: LoadFileContext = { isTs, block }
15 | 
16 |   const files = await loadFile(input, context) || []
17 | 
18 |   const output = files.find(file => scriptValidExtensions.has(file.extension))
19 |   if (!output) {
20 |     return
21 |   }
22 | 
23 |   return {
24 |     type: block.type,
25 |     attrs: toOmit(block.attrs, ['lang', 'generic']),
26 |     content: output.content,
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/---bug-report.yml:
--------------------------------------------------------------------------------
 1 | name: 🐛 Bug report
 2 | description: Something's not working
 3 | labels: [bug]
 4 | body:
 5 |   - type: textarea
 6 |     validations:
 7 |       required: true
 8 |     attributes:
 9 |       label: 🐛 The bug
10 |       description: What isn't working? Describe what the bug is.
11 |   - type: input
12 |     validations:
13 |       required: true
14 |     attributes:
15 |       label: 🛠️ To reproduce
16 |       description: A reproduction of the bug via https://stackblitz.com/github/nuxt-contrib/vue-sfc-transformer/tree/main/playground
17 |       placeholder: https://stackblitz.com/[...]
18 |   - type: textarea
19 |     validations:
20 |       required: true
21 |     attributes:
22 |       label: 🌈 Expected behaviour
23 |       description: What did you expect to happen? Is there a section in the docs about this?
24 |   - type: textarea
25 |     attributes:
26 |       label: ℹ️ Additional context
27 |       description: Add any other context about the problem here.
28 | 


--------------------------------------------------------------------------------
/src/block-loader/types.ts:
--------------------------------------------------------------------------------
 1 | import type { SFCBlock, SFCParseResult } from 'vue/compiler-sfc'
 2 | 
 3 | export interface LoaderFile {
 4 |   extension: string
 5 |   content: string
 6 | }
 7 | 
 8 | export interface LoadFileContext {
 9 |   isTs: boolean
10 |   block: SFCBlock
11 | }
12 | 
13 | export interface BlockLoaderContext {
14 |   /**
15 |    * Whether the SFC is using TypeScript
16 |    */
17 |   isTs: boolean
18 | 
19 |   /**
20 |    * Relative path to the SFC
21 |    */
22 |   path: string
23 | 
24 |   /**
25 |    * Absolute path to the SFC
26 |    */
27 |   srcPath: string
28 | 
29 |   /**
30 |    * Raw content of the SFC
31 |    */
32 |   raw: string
33 | 
34 |   /**
35 |    * Parsed SFC
36 |    */
37 |   sfc: SFCParseResult
38 | 
39 |   loadFile: (input: LoaderFile, context: LoadFileContext) => Promise<LoaderFile[]> | LoaderFile[]
40 | }
41 | 
42 | type BlockLoaderOutput = Pick<SFCBlock, 'type' | 'content' | 'attrs'>
43 | 
44 | export interface BlockLoader {
45 |   (
46 |     block: SFCBlock,
47 |     context: BlockLoaderContext,
48 |   ): Promise<BlockLoaderOutput | undefined>
49 | }
50 | 


--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Daniel Roe
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
 1 | catalogMode: prefer
 2 | shellEmulator: true
 3 | trustPolicy: no-downgrade
 4 | trustPolicyExclude:
 5 |   - '@octokit/action@6.1.0'
 6 |   - '@octokit/endpoint@9.0.6'
 7 |   - '@octokit/plugin-paginate-rest@9.2.2'
 8 |   - chokidar@4.0.3
 9 |   - undici@5.29.0 || 6.22.0
10 | packages:
11 |   - playground
12 | catalogs:
13 |   dev:
14 |     '@antfu/eslint-config': 6.7.1
15 |     '@babel/types': 7.28.5
16 |     '@types/node': 24.10.4
17 |     '@vitest/coverage-v8': 4.0.15
18 |     '@vue/compiler-dom': 3.5.25
19 |     '@vue/compiler-sfc': 3.5.25
20 |     bumpp: 10.3.2
21 |     changelogithub: 14.0.0
22 |     eslint: 9.39.2
23 |     exsolve: 1.0.8
24 |     installed-check: 9.3.0
25 |     knip: 5.73.4
26 |     lint-staged: 16.2.7
27 |     mkdist: 2.4.1
28 |     pkg-pr-new: 0.0.62
29 |     simple-git-hooks: 2.13.1
30 |     typescript: 5.9.3
31 |     unbuild: 3.6.1
32 |     vitest: 4.0.15
33 |     vue-tsc: 3.1.8
34 |   peer:
35 |     '@vue/compiler-core': 3.5.25
36 |     esbuild: 0.27.1
37 |     vue: 3.5.25
38 |   prod:
39 |     '@babel/parser': ^7.27.0
40 | ignoredBuiltDependencies:
41 |   - '@parcel/watcher'
42 |   - esbuild
43 | onlyBuiltDependencies:
44 |   - simple-git-hooks
45 | 


--------------------------------------------------------------------------------
/src/block-loader/default.ts:
--------------------------------------------------------------------------------
 1 | import type { BlockLoader, LoaderFile, LoadFileContext } from './types'
 2 | import { toOmit } from '../utils/object'
 3 | 
 4 | interface DefaultBlockLoaderOptions {
 5 |   type: 'script' | 'style' | 'template' | (string & {})
 6 |   defaultLang: string
 7 |   validExtensions?: string[]
 8 | }
 9 | 
10 | export function defineDefaultBlockLoader(
11 |   options: DefaultBlockLoaderOptions,
12 | ): BlockLoader {
13 |   return async (block, { isTs, loadFile }) => {
14 |     if (options.type !== block.type) {
15 |       return
16 |     }
17 | 
18 |     const lang = typeof block.attrs.lang === 'string'
19 |       ? block.attrs.lang
20 |       : options.defaultLang
21 |     const extension = `.${lang}`
22 | 
23 |     const input: LoaderFile = { extension, content: block.content }
24 |     const context: LoadFileContext = { isTs, block }
25 |     const files = await loadFile(input, context) || []
26 | 
27 |     const output = files.find(
28 |       file => file.extension === `.${options.defaultLang}` || options.validExtensions?.includes(file.extension),
29 |     )
30 |     if (!output) {
31 |       return
32 |     }
33 | 
34 |     return {
35 |       type: block.type,
36 |       attrs: toOmit(block.attrs, ['lang', 'generic']),
37 |       content: output.content,
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/block-loader/template.ts:
--------------------------------------------------------------------------------
 1 | import type { SFCTemplateBlock } from 'vue/compiler-sfc'
 2 | import type { BlockLoader, LoadFileContext } from './types'
 3 | import { transpileVueTemplate } from '../utils/template'
 4 | 
 5 | const templateJsSnippetValidExtensions = new Set(['.js', '.cjs', '.mjs'])
 6 | 
 7 | export const templateLoader: BlockLoader = async (block, { isTs, loadFile }) => {
 8 |   if (block.type !== 'template') {
 9 |     return
10 |   }
11 |   if (!isTs) {
12 |     return
13 |   }
14 | 
15 |   const typedBlock = block as SFCTemplateBlock
16 | 
17 |   const snippetExtension = isTs ? '.ts' : '.js'
18 |   const context: LoadFileContext = { isTs, block }
19 | 
20 |   const transformed = await transpileVueTemplate(
21 |     // for lower version of @vue/compiler-sfc, `ast.source` is the whole .vue file
22 |     typedBlock.content,
23 |     typedBlock.ast!,
24 |     typedBlock.loc.start.offset,
25 |     async (code) => {
26 |       const res = await loadFile(
27 |         { extension: snippetExtension, content: code },
28 |         context,
29 |       )
30 | 
31 |       return res?.find(f => templateJsSnippetValidExtensions.has(f.extension))?.content || code
32 |     },
33 |   )
34 | 
35 |   return {
36 |     type: 'template',
37 |     attrs: typedBlock.attrs,
38 |     content: transformed,
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/playground/index.js:
--------------------------------------------------------------------------------
 1 | import { parse as parseSFC } from '@vue/compiler-sfc'
 2 | import { transform } from 'esbuild'
 3 | 
 4 | import { preTranspileScriptSetup, transpileVueTemplate } from 'vue-sfc-transformer'
 5 | 
 6 | const src = `
 7 | <template>
 8 |   <div v-if="test as any" />
 9 | </template>
10 | 
11 | <script setup lang="ts">
12 | defineProps<{
13 |   test?: string
14 | }>()
15 | </script>
16 | `
17 | 
18 | const sfc = parseSFC(src, {
19 |   filename: 'test.vue',
20 |   ignoreEmpty: true,
21 | })
22 | 
23 | // transpile template block
24 | const templateBlockContents = await transpileVueTemplate(
25 |   sfc.descriptor.template.content,
26 |   sfc.descriptor.template.ast,
27 |   sfc.descriptor.template.loc.start.offset,
28 |   async (code) => {
29 |     const res = await transform(code, { loader: 'ts', target: 'esnext' })
30 |     return res.code
31 |   },
32 | )
33 | console.log(`transpiled <template> block:`)
34 | console.log(`\`\`\`\n<template>${templateBlockContents}</template>\n\`\`\`\n`)
35 | 
36 | // transpile script block
37 | // notice: it is still in typescript, you need to transpile it to javascript later
38 | const { content: scriptBlockContents } = await preTranspileScriptSetup(sfc.descriptor, 'test.vue')
39 | console.log(`transpiled <script setup> block:`)
40 | console.log(`\`\`\`\n<script setup lang="ts">${scriptBlockContents}</script>\n\`\`\`\n`)
41 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: ci
 2 | 
 3 | on:
 4 |   pull_request:
 5 |     branches:
 6 |       - main
 7 |   push:
 8 |     branches:
 9 |       - main
10 | 
11 | jobs:
12 |   lint:
13 |     runs-on: ubuntu-latest
14 | 
15 |     steps:
16 |       - uses: actions/checkout@v6
17 |       - run: npm i -g --force corepack && corepack enable
18 |       - uses: actions/setup-node@v6
19 |         with:
20 |           node-version: lts/*
21 |           cache: pnpm
22 | 
23 |       - name: 📦 Install dependencies
24 |         run: pnpm install
25 | 
26 |       - name: 🔠 Lint project
27 |         run: pnpm lint
28 | 
29 |       - name: ✂️ Knip project
30 |         run: pnpm test:knip
31 | 
32 |       - name: ⚙️ Check package engines
33 |         run: pnpm test:versions
34 | 
35 |   test:
36 |     runs-on: ubuntu-latest
37 | 
38 |     steps:
39 |       - uses: actions/checkout@v6
40 |       - run: npm i -g --force corepack && corepack enable
41 |       - uses: actions/setup-node@v6
42 |         with:
43 |           node-version: lts/*
44 |           cache: pnpm
45 | 
46 |       - name: 📦 Install dependencies
47 |         run: pnpm install
48 | 
49 |       - name: 🛠 Build project
50 |         run: pnpm build
51 | 
52 |       - name: 💪 Test types
53 |         run: pnpm test:types
54 | 
55 |       - name: 🧪 Test project
56 |         run: pnpm test:unit -- --coverage
57 | 
58 |       - name: 🟩 Coverage
59 |         uses: codecov/codecov-action@v5
60 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-sfc-transformer",
 3 |   "type": "module",
 4 |   "version": "0.1.17",
 5 |   "packageManager": "pnpm@10.26.0",
 6 |   "description": "Tools for minimal TypeScript transpilation of Vue SFCs",
 7 |   "license": "MIT",
 8 |   "repository": "nuxt-contrib/vue-sfc-transformer",
 9 |   "sideEffects": false,
10 |   "exports": {
11 |     ".": "./dist/index.mjs",
12 |     "./mkdist": "./dist/mkdist.mjs"
13 |   },
14 |   "main": "./dist/index.mjs",
15 |   "module": "./dist/index.mjs",
16 |   "typesVersions": {
17 |     "*": {
18 |       ".": [
19 |         "./dist/index.d.mts"
20 |       ],
21 |       "mkdist": [
22 |         "./dist/mkdist.d.mts"
23 |       ]
24 |     }
25 |   },
26 |   "files": [
27 |     "dist"
28 |   ],
29 |   "engines": {
30 |     "node": ">=18.0.0"
31 |   },
32 |   "scripts": {
33 |     "build": "unbuild",
34 |     "dev": "vitest dev",
35 |     "lint": "eslint .",
36 |     "prepare": "simple-git-hooks",
37 |     "prepack": "pnpm build",
38 |     "prepublishOnly": "pnpm lint && pnpm test",
39 |     "release": "bumpp && pnpm publish",
40 |     "test": "pnpm test:unit && pnpm test:types",
41 |     "test:unit": "vitest",
42 |     "test:knip": "knip",
43 |     "test:versions": "installed-check -d --no-workspaces",
44 |     "test:types": "tsc --noEmit"
45 |   },
46 |   "peerDependencies": {
47 |     "@vue/compiler-core": "^3.5.13",
48 |     "esbuild": "*",
49 |     "vue": "^3.5.13"
50 |   },
51 |   "dependencies": {
52 |     "@babel/parser": "catalog:prod"
53 |   },
54 |   "devDependencies": {
55 |     "@antfu/eslint-config": "catalog:dev",
56 |     "@babel/types": "catalog:dev",
57 |     "@types/node": "catalog:dev",
58 |     "@vitest/coverage-v8": "catalog:dev",
59 |     "@vue/compiler-core": "catalog:peer",
60 |     "@vue/compiler-dom": "catalog:dev",
61 |     "bumpp": "catalog:dev",
62 |     "changelogithub": "catalog:dev",
63 |     "esbuild": "catalog:peer",
64 |     "eslint": "catalog:dev",
65 |     "exsolve": "catalog:dev",
66 |     "installed-check": "catalog:dev",
67 |     "knip": "catalog:dev",
68 |     "lint-staged": "catalog:dev",
69 |     "mkdist": "catalog:dev",
70 |     "pkg-pr-new": "catalog:dev",
71 |     "simple-git-hooks": "catalog:dev",
72 |     "typescript": "catalog:dev",
73 |     "unbuild": "catalog:dev",
74 |     "vitest": "catalog:dev",
75 |     "vue": "catalog:peer",
76 |     "vue-tsc": "catalog:dev"
77 |   },
78 |   "resolutions": {
79 |     "@vue/compiler-core": "3.5.25",
80 |     "vue-sfc-transformer": "link:."
81 |   },
82 |   "simple-git-hooks": {
83 |     "pre-commit": "npx lint-staged"
84 |   },
85 |   "lint-staged": {
86 |     "*.{js,ts,mjs,cjs,json,.*rc}": [
87 |       "npx eslint --fix"
88 |     ]
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
 6 | 
 7 | ## Our standards
 8 | 
 9 | Examples of behavior that contributes to creating a positive environment include:
10 | 
11 | - Using welcoming and inclusive language
12 | - Being respectful of differing viewpoints and experiences
13 | - Gracefully accepting constructive criticism
14 | - Focusing on what is best for the community
15 | - Showing empathy towards other community members
16 | 
17 | Examples of unacceptable behavior by participants include:
18 | 
19 | - The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | - Trolling, insulting/derogatory comments, and personal or political attacks
21 | - Public or private harassment
22 | - Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | - Other conduct which could reasonably be considered inappropriate in a professional setting
24 | 
25 | ## Our responsibilities
26 | 
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 | 
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 | 
31 | ## Scope
32 | 
33 | This Code of Conduct applies within all project spaces, and it also applies when an individual is representing the project or its community in public spaces. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 | 
35 | ## Enforcement
36 | 
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [daniel@roe.dev](mailto:daniel@roe.dev). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 | 
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 | 
41 | ## Attribution
42 | 
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
44 | 
45 | [homepage]: https://www.contributor-covenant.org
46 | 
47 | For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq
48 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-sfc-transformer
  2 | 
  3 | [![npm version][npm-version-src]][npm-version-href]
  4 | [![npm downloads][npm-downloads-src]][npm-downloads-href]
  5 | [![Github Actions][github-actions-src]][github-actions-href]
  6 | [![Codecov][codecov-src]][codecov-href]
  7 | 
  8 | > Tools for minimal TypeScript transpilation of Vue SFCs
  9 | 
 10 | ## Usage
 11 | 
 12 | Install package:
 13 | 
 14 | ```sh
 15 | # npm
 16 | npm install vue-sfc-transformer vue @vue/compiler-core esbuild
 17 | 
 18 | # pnpm
 19 | pnpm install vue-sfc-transformer vue @vue/compiler-core esbuild
 20 | ```
 21 | 
 22 | ```js
 23 | import { parse as parseSFC } from '@vue/compiler-sfc'
 24 | import { transform } from 'esbuild'
 25 | 
 26 | import { preTranspileScriptSetup, transpileVueTemplate } from 'vue-sfc-transformer'
 27 | 
 28 | const src = `
 29 | <template>
 30 |   <div v-if="test as any" />
 31 | </template>
 32 | 
 33 | <script setup lang="ts">
 34 | defineProps<{
 35 |   test?: string
 36 | }>()
 37 | </script>
 38 | `
 39 | 
 40 | const sfc = parseSFC(src, {
 41 |   filename: 'test.vue',
 42 |   ignoreEmpty: true,
 43 | })
 44 | 
 45 | // transpile template block
 46 | const templateBlockContents = await transpileVueTemplate(
 47 |   sfc.descriptor.template.content,
 48 |   sfc.descriptor.template.ast,
 49 |   sfc.descriptor.template.loc.start.offset,
 50 |   async (code) => {
 51 |     const res = await transform(code, { loader: 'ts', target: 'esnext' })
 52 |     return res.code
 53 |   },
 54 | )
 55 | console.log(templateBlockContents)
 56 | // <div v-if="test" />
 57 | 
 58 | const { content: scriptBlockContents } = await preTranspileScriptSetup(sfc.descriptor, 'test.vue')
 59 | console.log(scriptBlockContents)
 60 | // defineProps({
 61 | //   test: { type: String, required: false }
 62 | // })
 63 | ```
 64 | 
 65 | If you are using `mkdist`, `vue-sfc-transformer` exports a loader you can use:
 66 | 
 67 | ```ts
 68 | import { vueLoader } from 'vue-sfc-transformer/mkdist'
 69 | ```
 70 | 
 71 | > `mkdist` will automatically use the loader from `vue-sfc-transformer` when you pass `vue` to the `loaders` option and have this package installed.
 72 | 
 73 | ## 💻 Development
 74 | 
 75 | - Clone this repository
 76 | - Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
 77 | - Install dependencies using `pnpm install`
 78 | - Run interactive tests using `pnpm dev`
 79 | 
 80 | ## Credits
 81 | 
 82 | This package was based on the work of contributors to [`mkdist`](https://github.com/unjs/mkdist), and in particular this PR by [**@Teages**](https://github.com/teages): [unjs/mkdist#300](https://github.com/unjs/mkdist/pull/300).
 83 | 
 84 | ## License
 85 | 
 86 | Made with ❤️
 87 | 
 88 | Published under [MIT License](./LICENCE).
 89 | 
 90 | <!-- Badges -->
 91 | 
 92 | [npm-version-src]: https://img.shields.io/npm/v/vue-sfc-transformer?style=flat-square
 93 | [npm-version-href]: https://npmjs.com/package/vue-sfc-transformer
 94 | [npm-downloads-src]: https://img.shields.io/npm/dm/vue-sfc-transformer?style=flat-square
 95 | [npm-downloads-href]: https://npm.chart.dev/vue-sfc-transformer
 96 | [github-actions-src]: https://img.shields.io/github/actions/workflow/status/nuxt-contrvue-sfc-transformerransformer/ci.yml?branch=main&style=flat-square
 97 | [github-actions-href]: https://github.com/nuxt-contrvue-sfc-transformerransformer/actions?query=workflow%3Aci
 98 | [codecov-src]: https://img.shields.io/codecov/c/gh/nuxt-contrvue-sfc-transformerransformer/main?style=flat-square
 99 | [codecov-href]: https://codecov.io/gh/nuxt-contrvue-sfc-transformerransformer
100 | 


--------------------------------------------------------------------------------
/src/sfc-transformer.ts:
--------------------------------------------------------------------------------
  1 | import type { SFCBlock } from 'vue/compiler-sfc'
  2 | import type { BlockLoader, BlockLoaderContext, LoaderFile, LoadFileContext } from './block-loader/types'
  3 | import { parse } from 'vue/compiler-sfc'
  4 | import { preTranspileScriptSetup } from './utils/script-setup'
  5 | import { cleanupBreakLine } from './utils/string'
  6 | 
  7 | export type VueSFCTransformerFileLoader = (input: LoaderFile, context: LoadFileContext) => Promise<LoaderFile[]> | LoaderFile[]
  8 | 
  9 | interface VueSFCTransformerContext {
 10 |   /**
 11 |    * Relative path to the SFC
 12 |    */
 13 |   path: string
 14 | 
 15 |   /**
 16 |    * Absolute path to the SFC
 17 |    */
 18 |   srcPath: string
 19 | 
 20 |   /**
 21 |    * Whether to verify the SFC
 22 |    */
 23 |   verifySFC?: boolean
 24 | 
 25 |   loadFile: VueSFCTransformerFileLoader
 26 | }
 27 | 
 28 | interface VueSFCTransformerOptions {
 29 |   blockLoaders?: {
 30 |     [blockType: string]: BlockLoader | undefined
 31 |   }
 32 | }
 33 | 
 34 | type VueSFCTransformer = (input: string, context: VueSFCTransformerContext) => Promise<string>
 35 | 
 36 | export function defineVueSFCTransformer(options?: VueSFCTransformerOptions): VueSFCTransformer {
 37 |   const { blockLoaders = {} } = options || {}
 38 | 
 39 |   return async (input, { path, srcPath, loadFile, verifySFC }) => {
 40 |     let modified = false
 41 | 
 42 |     const sfc = parse(input, { filename: srcPath, ignoreEmpty: true })
 43 |     if (sfc.errors.length > 0) {
 44 |       for (const error of sfc.errors) {
 45 |         console.error(error)
 46 |       }
 47 |       throw new Error(`[vue-sfc-transformer] ${srcPath} has errors`)
 48 |     }
 49 | 
 50 |     // we need to remove typescript from template block if the block is typescript
 51 |     const isTs = [sfc.descriptor.script, sfc.descriptor.scriptSetup].some(
 52 |       block => block?.lang === 'ts',
 53 |     )
 54 | 
 55 |     const blocks: SFCBlock[] = [
 56 |       ...sfc.descriptor.styles,
 57 |       ...sfc.descriptor.customBlocks,
 58 |     ].filter(item => !!item)
 59 | 
 60 |     if (sfc.descriptor.template) {
 61 |       blocks.unshift(sfc.descriptor.template)
 62 |     }
 63 | 
 64 |     if (sfc.descriptor.script) {
 65 |       blocks.unshift(sfc.descriptor.script)
 66 |     }
 67 |     if (sfc.descriptor.scriptSetup && srcPath) {
 68 |       blocks.unshift(
 69 |         isTs
 70 |           ? await preTranspileScriptSetup(sfc.descriptor, srcPath)
 71 |           : sfc.descriptor.scriptSetup,
 72 |       )
 73 |     }
 74 | 
 75 |     const loaderContext: BlockLoaderContext = { isTs, path, srcPath, raw: input, sfc, loadFile }
 76 |     const results = await Promise.all(blocks.map(async (block) => {
 77 |       const blockLoader = blockLoaders[block.type]
 78 |       const result = await blockLoader?.(block, loaderContext).catch((cause) => {
 79 |         throw new Error(`[vue-sfc-transformer] Failed to load the ${block.type} block in ${srcPath}`, { cause })
 80 |       })
 81 | 
 82 |       if (result) {
 83 |         modified = true
 84 |       }
 85 | 
 86 |       return { block: result || block, offset: block.loc.start.offset }
 87 |     }))
 88 | 
 89 |     if (!modified) {
 90 |       return input
 91 |     }
 92 | 
 93 |     const contents = results
 94 |       .sort((a, b) => a.offset - b.offset)
 95 |       .map(({ block }) => {
 96 |         const attrs = Object.entries(block.attrs)
 97 |           .map(([key, value]) => {
 98 |             if (!value) {
 99 |               return undefined
100 |             }
101 | 
102 |             return value === true ? key : `${key}="${value}"`
103 |           })
104 |           .filter(item => !!item)
105 |           .join(' ')
106 | 
107 |         const header = `<${`${block.type} ${attrs}`.trim()}>`
108 |         const footer = `</${block.type}>`
109 | 
110 |         return `${header}\n${cleanupBreakLine(block.content)}\n${footer}\n`
111 |       })
112 |       .filter(item => !!item)
113 |       .join('\n')
114 | 
115 |     // eslint-disable-next-line node/prefer-global/process
116 |     if (verifySFC || process.env.VERIFY_VUE_FILES) {
117 |       // verify the output
118 |       const { errors } = parse(contents, {
119 |         filename: srcPath,
120 |         ignoreEmpty: true,
121 |       })
122 |       if (errors.length > 0) {
123 |         for (const error of errors) {
124 |           console.error(error)
125 |         }
126 |         throw new Error(`[vue-sfc-transformer] ${srcPath} has errors`)
127 |       }
128 |     }
129 | 
130 |     return contents
131 |   }
132 | }
133 | 


--------------------------------------------------------------------------------
/src/plugins/mkdist.ts:
--------------------------------------------------------------------------------
  1 | import type { LoaderFile } from '../block-loader/types'
  2 | import type { VueSFCTransformerFileLoader } from '../sfc-transformer'
  3 | import type { Loader } from '../types/mkdist'
  4 | import { readFileSync } from 'node:fs'
  5 | import { createRequire } from 'node:module'
  6 | import { join, resolve } from 'node:path'
  7 | import { scriptLoader } from '../block-loader/script'
  8 | import { styleLoader } from '../block-loader/style'
  9 | import { templateLoader } from '../block-loader/template'
 10 | import { defineVueSFCTransformer } from '../sfc-transformer'
 11 | 
 12 | let cachedEsbuild: typeof import('esbuild') | undefined
 13 | function importEsbuild(): Promise<typeof import('esbuild')> | typeof import('esbuild') {
 14 |   if (cachedEsbuild) {
 15 |     return cachedEsbuild
 16 |   }
 17 |   return (async () => {
 18 |     const esbuild = await import('esbuild')
 19 |     cachedEsbuild = esbuild
 20 |     return esbuild
 21 |   })()
 22 | }
 23 | 
 24 | let _isMkdistSupportDualVueDts: boolean | undefined
 25 | function isMkdistSupportDualVueDts(): boolean {
 26 |   if (typeof _isMkdistSupportDualVueDts === 'boolean') {
 27 |     return _isMkdistSupportDualVueDts
 28 |   }
 29 |   try {
 30 |     const require = createRequire(import.meta.url)
 31 |     const mkdistPath = require.resolve('mkdist').replace(/\\/g, '/')
 32 |     const lastNodeModules = mkdistPath.lastIndexOf('/mkdist/')
 33 |     const withoutDist = lastNodeModules !== -1 ? mkdistPath.slice(0, lastNodeModules) : mkdistPath
 34 |     const packageJson = readFileSync(join(withoutDist, 'mkdist/package.json'), 'utf-8')
 35 |     const { version = '0.0.0' } = JSON.parse(packageJson) as { version: string }
 36 |     const [major = 0, minor = 0, patch = 0] = version.split('.').map(n => Number.parseInt(n))
 37 |     const normalizedVersion = major * 1_000_000 + minor * 1_000 + patch
 38 | 
 39 |     return !Number.isNaN(normalizedVersion) && normalizedVersion > 2_003_000
 40 |   }
 41 |   catch (error) {
 42 |     console.error(`Error checking mkdist version: ${error}`)
 43 |     return false
 44 |   }
 45 | }
 46 | 
 47 | const vueSFCTransformer = defineVueSFCTransformer({
 48 |   blockLoaders: {
 49 |     template: templateLoader,
 50 |     script: scriptLoader,
 51 |     style: styleLoader,
 52 |   },
 53 | })
 54 | 
 55 | export const vueLoader: Loader = async (input, mkdistContext) => {
 56 |   if (input.extension !== '.vue') {
 57 |     return
 58 |   }
 59 | 
 60 |   const { transform } = await importEsbuild()
 61 |   const path = input.path
 62 |   const srcPath = input.srcPath || resolve(input.path)
 63 | 
 64 |   const loadFile: VueSFCTransformerFileLoader = async (file, context) => {
 65 |     if (context.block.type === 'script') {
 66 |       const { code } = await transform(file.content, {
 67 |         ...mkdistContext.options.esbuild,
 68 |         loader: 'ts',
 69 |         tsconfigRaw: { compilerOptions: { target: 'ESNext', verbatimModuleSyntax: true } },
 70 |       })
 71 | 
 72 |       return [{ extension: '.js', content: code }]
 73 |     }
 74 | 
 75 |     const result = await mkdistContext.loadFile({
 76 |       getContents: () => file.content,
 77 |       path: `${path}.${file.extension}`,
 78 |       srcPath: `${srcPath}.${file.extension}`,
 79 |       extension: file.extension,
 80 |     })
 81 | 
 82 |     return (result
 83 |       ?.filter(res => res.contents)
 84 |       .map(res => ({
 85 |         extension: res.extension || file.extension,
 86 |         content: res.contents,
 87 |       })) || []) as LoaderFile[]
 88 |   }
 89 | 
 90 |   const result = await vueSFCTransformer(await input.getContents(), {
 91 |     path: input.path,
 92 |     srcPath: input.srcPath || resolve(input.path),
 93 |     loadFile,
 94 |     // @ts-expect-error internal flag for testing
 95 |     verifySFC: mkdistContext.options._verify,
 96 |   })
 97 | 
 98 |   // generate dts
 99 |   const dts = (await mkdistContext.loadFile({
100 |     path: `${input.path}.js`,
101 |     srcPath: `${input.srcPath}.js`,
102 |     extension: '.js',
103 |     getContents: () => 'export default {}',
104 |   }))?.filter(f => f.declaration) || []
105 |   if (dts.length && isMkdistSupportDualVueDts()) {
106 |     dts.push({
107 |       contents: await input.getContents(),
108 |       path: input.path,
109 |       srcPath: input.srcPath,
110 |       extension: '.d.vue.ts',
111 |       declaration: true,
112 |     })
113 |   }
114 | 
115 |   return [
116 |     {
117 |       path: input.path,
118 |       srcPath: input.srcPath,
119 |       extension: '.vue',
120 |       contents: result,
121 |       declaration: false,
122 |     },
123 |     ...dts,
124 |   ]
125 | }
126 | 


--------------------------------------------------------------------------------
/test/template.test.ts:
--------------------------------------------------------------------------------
  1 | import { createRequire } from 'node:module'
  2 | import { transform } from 'esbuild'
  3 | import { resolveModulePath } from 'exsolve'
  4 | import { describe, expect, it } from 'vitest'
  5 | import { replaceQuote, transpileVueTemplate } from '../src/utils/template'
  6 | 
  7 | describe('transform typescript template', () => {
  8 |   it('v-for', async () => {
  9 |     expect(await fixture(`<div v-for="item in items as unknown[]" :key="item">{{ item }}</div>`))
 10 |       .toEqual(`<div v-for="item in items" :key="item">{{ item }}</div>`)
 11 | 
 12 |     expect(await fixture(`<div v-for="(item, index) in items as unknown[]" :key="item" :index>{{ item }}</div>`))
 13 |       .toEqual(`<div v-for="(item, index) in items" :key="item" :index>{{ item }}</div>`)
 14 | 
 15 |     expect(await fixture(`<div v-for="(item, index) of items" />`))
 16 |       .toEqual(`<div v-for="(item, index) of items" />`)
 17 | 
 18 |     expect(await fixture(`<div v-for="({ name = 'Tony' }, index) of items" />`))
 19 |       .toEqual(`<div v-for="({ name = 'Tony' }, index) of items" />`)
 20 |   })
 21 | 
 22 |   it('v-if', async () => {
 23 |     expect(await fixture(`<div v-if="(data as any).test" />`))
 24 |       .toEqual(`<div v-if="data.test" />`)
 25 |   })
 26 | 
 27 |   it('v-show', async () => {
 28 |     expect(await fixture(`<div v-show="(data as any).show" />`)).toEqual(
 29 |       `<div v-show="data.show" />`,
 30 |     )
 31 |   })
 32 | 
 33 |   it('v-model', async () => {
 34 |     expect(await fixture(`<input v-model="(data as string)" />`)).toEqual(
 35 |       `<input v-model="data" />`,
 36 |     )
 37 |   })
 38 | 
 39 |   it('v-on', async () => {
 40 |     expect(
 41 |       await fixture(`<div @click="handleClick as () => void" />`),
 42 |     ).toEqual(`<div @click="handleClick" />`)
 43 |     expect(await fixture(`<div @click="handleClick()" />`)).toEqual(
 44 |       `<div @click="handleClick()" />`,
 45 |     )
 46 |     expect(
 47 |       await fixture(
 48 |         `<div @click="(e: unknown) => handleClick(e as MouseEvent)" />`,
 49 |       ),
 50 |     ).toEqual(`<div @click="(e) => handleClick(e)" />`)
 51 |     expect(
 52 |       await fixture(
 53 |         `<div @click="(e: unknown) => { handleClick(e as MouseEvent); ping() }" />`,
 54 |       ),
 55 |     ).toMatchInlineSnapshot(`
 56 |       "<div @click="(e) => {
 57 |         handleClick(e);
 58 |         ping();
 59 |       }" />"
 60 |     `)
 61 | 
 62 |     // https://github.com/nuxt/module-builder/issues/587#issuecomment-2820414064
 63 |     expect(
 64 |       await fixture(`<div @click="a(); b()" />`),
 65 |     ).toMatchInlineSnapshot(`
 66 |       "<div @click="a();
 67 |         b()" />"
 68 |     `)
 69 |     expect(
 70 |       await fixture(`<div @click="a(); () => {}; b()" />`),
 71 |     ).toMatchInlineSnapshot(`
 72 |       "<div @click="a();
 73 |         () => {
 74 |         };
 75 |         b()" />"
 76 |     `)
 77 |   })
 78 | 
 79 |   it('v-slot', async () => {
 80 |     expect(await fixture(`<Comp><template #header="{ name = 'hi' }">{{ name!.toString() }}</template></Comp>`))
 81 |       .toMatchInlineSnapshot(`"<Comp><template #header="{ name = 'hi' }">{{ name.toString() }}</template></Comp>"`)
 82 |   })
 83 | 
 84 |   it('destructuring', async () => {
 85 |     expect(
 86 |       await fixture(`<MyComponent v-slot="{ active, ...slotProps }">{{ active }}</MyComponent>`),
 87 |     ).toEqual(`<MyComponent v-slot="{ active, ...slotProps }">{{ active }}</MyComponent>`)
 88 | 
 89 |     expect(
 90 |       await fixture(
 91 |         `<MyComponent v-slot="{ remaining, duration }">{{ remaining }}</MyComponent>`,
 92 |       ),
 93 |     ).toMatchInlineSnapshot(`"<MyComponent v-slot="{ remaining, duration }">{{ remaining }}</MyComponent>"`)
 94 |   })
 95 | 
 96 |   it('compound expressions', async () => {
 97 |     expect(await fixture(`<slot :name="(foo as string) + bar" />`)).toEqual(
 98 |       `<slot :name="foo + bar" />`,
 99 |     )
100 |   })
101 | 
102 |   it('custom directives', async () => {
103 |     expect(
104 |       await fixture(`<div v-highlight="(highlight as boolean)" />`),
105 |     ).toEqual(`<div v-highlight="highlight" />`)
106 |   })
107 | 
108 |   it('v-bind', async () => {
109 |     expect(await fixture(`<div v-bind="(props as any)" />`)).toEqual(
110 |       `<div v-bind="props" />`,
111 |     )
112 |     expect(
113 |       await fixture(`<div :key="(value as any)" data-test="test" />`),
114 |     ).toEqual(`<div :key="value" data-test="test" />`)
115 |     expect(await fixture(`<input disabled />`)).toEqual(`<input disabled />`)
116 |     expect(await fixture(`<input :disabled />`)).toEqual(
117 |       `<input :disabled />`,
118 |     )
119 |     expect(await fixture(`<input v-bind:disabled />`)).toEqual(
120 |       `<input v-bind:disabled />`,
121 |     )
122 |   })
123 | 
124 |   it('interpolation', async () => {
125 |     expect(await fixture(`<div>{{ data!.test }}</div>`)).toEqual(
126 |       `<div>{{ data.test }}</div>`,
127 |     )
128 |     expect(await fixture(`<div>hi {{ data!.test }}</div>`)).toEqual(
129 |       `<div>hi {{ data.test }}</div>`,
130 |     )
131 |     expect(
132 |       await fixture(
133 |         `<div>{{ typeof data!.test === "string" ? data!.test : getKey(data!.test) }}</div>`,
134 |       ),
135 |     ).toEqual(
136 |       `<div>{{ typeof data.test === "string" ? data.test : getKey(data.test) }}</div>`,
137 |     )
138 |   })
139 | 
140 |   it('keep comments', async () => {
141 |     expect(
142 |       await fixture(`<div>{{ data!.test }}</div><!-- comment -->`),
143 |     ).toEqual(`<div>{{ data.test }}</div><!-- comment -->`)
144 |   })
145 | 
146 |   it('keep text', async () => {
147 |     expect(await fixture(`<div>data!.test</div>`)).toEqual(
148 |       `<div>data!.test</div>`,
149 |     )
150 |   })
151 | 
152 |   it('keep empty', async () => {
153 |     expect(await fixture(`<div>{{}}</div>`)).toEqual(`<div>{{}}</div>`)
154 |     expect(await fixture(`<div @click="" />`)).toEqual(`<div @click="" />`)
155 |   })
156 | 
157 |   it('throw error', async () => {
158 |     await expect(fixture(`<div>{{ data. }}</div>`)).rejects.toThrowError()
159 |   })
160 | 
161 |   it('quotes', async () => {
162 |     expect(await fixture(`<div @click="emit('click')" />`)).toEqual(
163 |       `<div @click="emit('click')" />`,
164 |     )
165 |     expect(await fixture(`<div @click='emit("click")' />`)).toEqual(
166 |       `<div @click='emit("click")' />`,
167 |     )
168 |     expect(await fixture(`<div @click="emit('click', '\\'')" />`)).toEqual(
169 |       `<div @click="emit('click', '\\'')" />`,
170 |     )
171 |   })
172 | 
173 |   it('equals', async () => {
174 |     expect(
175 |       await fixture(`
176 |       <div>
177 |         <MyComponent #template="{ item, index, level = 0 as 0 | 1 }" />
178 |         <MyComponent #template="{ item, index, level = 0 as 0 | 1 }" />
179 |         <MyComponent #template="{ item, index = 3 as 3 | 4, level }" />
180 |       </div>`),
181 |     ).toMatchInlineSnapshot(`
182 |       "
183 |             <div>
184 |               <MyComponent #template="{ item, index, level = 0 }" />
185 |               <MyComponent #template="{ item, index, level = 0 }" />
186 |               <MyComponent #template="{ item, index = 3, level }" />
187 |             </div>"
188 |     `)
189 |   })
190 | 
191 |   it('handles deeply nested templates', async () => {
192 |     const nestedTemplate = `<div><span><p>{{ (data as any).value }}</p></span></div>`
193 |     const result = await fixture(nestedTemplate)
194 |     expect(result).toEqual('<div><span><p>{{ data.value }}</p></span></div>')
195 |   })
196 | 
197 |   it('replaces quotes correctly', () => {
198 |     const input = `\"test\"`
199 |     const output = replaceQuote(input, '\"', '\'')
200 |     expect(output).toBe(`'test'`)
201 |   })
202 | 
203 |   it('handles quotes in interpolations', async () => {
204 |     expect(
205 |       await fixture(`
206 |         <template>
207 |           <div>
208 |             <div :class="$test('foobar', \`Foobar 'test'\`)" />
209 |             <div>{{ $test('foobar', "Foobar 'test'") }}</div>
210 |             <div>{{ $test('foobar', 'Foobar test') }}</div>
211 |             <div>{{ $test('foobar', \`Foobar ' " ''" test\`) }}</div>
212 |           </div>
213 |         </template>
214 |         `),
215 |     ).toMatchInlineSnapshot(`
216 |       "
217 |               <template>
218 |                 <div>
219 |                   <div :class="$test('foobar', \`Foobar \\'test\\'\`)" />
220 |                   <div>{{ $test("foobar", "Foobar 'test'") }}</div>
221 |                   <div>{{ $test("foobar", "Foobar test") }}</div>
222 |                   <div>{{ $test("foobar", \`Foobar ' " ''" test\`) }}</div>
223 |                 </div>
224 |               </template>
225 |               "
226 |     `)
227 |   })
228 | 
229 |   async function fixture(src: string) {
230 |     const requireFromVue = createRequire(resolveModulePath('vue'))
231 |     const { parse } = requireFromVue('@vue/compiler-dom') as typeof import('@vue/compiler-dom')
232 | 
233 |     return await transpileVueTemplate(
234 |       src,
235 |       parse(src, { parseMode: 'base' }),
236 |       0,
237 |       async (code) => {
238 |         const res = await transform(code, { loader: 'ts', target: 'esnext' })
239 |         return res.code
240 |       },
241 |     )
242 |   }
243 | })
244 | 


--------------------------------------------------------------------------------
/test/setup.test.ts:
--------------------------------------------------------------------------------
  1 | import { describe, expect, it } from 'vitest'
  2 | import { parse } from 'vue/compiler-sfc'
  3 | import { preTranspileScriptSetup } from '../src/utils/script-setup'
  4 | 
  5 | describe('transform typescript script setup', () => {
  6 |   it('throws error if no script setup block is present', async () => {
  7 |     const sfc = parse(`<template><div></div></template><script></script>`, {
  8 |       filename: 'test.vue',
  9 |       ignoreEmpty: true,
 10 |     })
 11 |     await expect(preTranspileScriptSetup(sfc.descriptor, 'test.vue')).rejects.toThrow(
 12 |       '[vue-sfc-transformer] No script setup block found',
 13 |     )
 14 |   })
 15 | 
 16 |   it('defineProps', async () => {
 17 |     expect(
 18 |       await fixture(
 19 |         `<script setup lang="ts">defineProps<{ msg: string }>()</script>`,
 20 |       ),
 21 |     ).toMatchInlineSnapshot(`
 22 |       "<script setup>
 23 |       defineProps({
 24 |           msg: { type: String, required: true }
 25 |         })
 26 |       </script>"
 27 |     `)
 28 |     expect(
 29 |       await fixture(
 30 |         `<script setup lang="ts">const props = defineProps<{ msg: string }>()</script>`,
 31 |       ),
 32 |     ).toMatchInlineSnapshot(`
 33 |       "<script setup>
 34 |       const props = defineProps({
 35 |           msg: { type: String, required: true }
 36 |         })
 37 |       </script>"
 38 |     `)
 39 |     expect(
 40 |       await fixture(
 41 |         `<script setup lang="ts">const { msg } = defineProps<{ msg: string }>()</script>`,
 42 |       ),
 43 |     ).toMatchInlineSnapshot(`
 44 |       "<script setup>
 45 |       const { msg } = defineProps({
 46 |           msg: { type: String, required: true }
 47 |         })
 48 |       </script>"
 49 |     `)
 50 |     expect(
 51 |       await fixture(
 52 |         `<script setup lang="ts">const { msg = 'hello' } = defineProps<{ msg?: string }>()</script>`,
 53 |       ),
 54 |     ).toMatchInlineSnapshot(`
 55 |       "<script setup>
 56 |       const { msg = 'hello' } = defineProps({
 57 |           msg: { type: String, required: false }
 58 |         })
 59 |       </script>"
 60 |     `)
 61 |     expect(
 62 |       await fixture([
 63 |         `<script lang="ts">interface PropsData { msg?: string, count: number }</script>`,
 64 |         `<script setup lang="ts">const { msg = 'hello' } = defineProps<PropsData>()</script>`,
 65 |       ].join('\n')),
 66 |     ).toMatchInlineSnapshot(`
 67 |       "<script setup>
 68 |       const { msg = 'hello' } = defineProps({
 69 |           msg: { type: String, required: false },
 70 |           count: { type: Number, required: true }
 71 |         })
 72 |       </script>"
 73 |     `)
 74 |   })
 75 | 
 76 |   it('strips generic from script setup blocks', async () => {
 77 |     expect(
 78 |       await fixture(
 79 |         `
 80 |         <script setup lang="ts" generic="T extends Messages = Messages">
 81 |         interface AppProps<T extends string = string> {
 82 |           locale?: Array<T>
 83 |         }
 84 |         const props = defineProps<AppProps<T>>()
 85 |         </script>`,
 86 |       ),
 87 |     ).toMatchInlineSnapshot(`
 88 |       "<script setup>
 89 | 
 90 |               interface AppProps<T extends string = string> {
 91 |                 locale?: Array<T>
 92 |               }
 93 |               const props = defineProps({
 94 |           locale: { type: Array, required: false }
 95 |         })
 96 |               
 97 |       </script>"
 98 |     `)
 99 |   })
100 | 
101 |   it('withDefaults', async () => {
102 |     expect(
103 |       await fixture(
104 |         `<script setup lang="ts">const props = withDefaults(defineProps<{ msg?: string }>(), { msg: 'hi' })</script>`,
105 |       ),
106 |     ).toMatchInlineSnapshot(`
107 |       "<script setup>
108 |       const props = defineProps({
109 |           msg: { type: String, required: false, default: 'hi' }
110 |         })
111 |       </script>"
112 |     `)
113 |     expect(
114 |       await fixture(
115 |         `<script setup lang="ts">withDefaults(defineProps<{ msg?: string }>(), { msg: 'hi' })</script>`,
116 |       ),
117 |     ).toMatchInlineSnapshot(`
118 |       "<script setup>
119 |       defineProps({
120 |           msg: { type: String, required: false, default: 'hi' }
121 |         })
122 |       </script>"
123 |     `)
124 | 
125 |     await expect(fixture(`<script setup lang="ts">withDefaults(defineProps<{ msg?: string }>())</script>`)).rejects.toThrow(`[vue-sfc-transformer] The 2nd argument of withDefaults is required.`)
126 | 
127 |     await expect(fixture(`<script setup lang="ts">withDefaults()</script>`)).rejects.toThrow(`[vue-sfc-transformer] withDefaults' first argument must be a defineProps call.`)
128 |   })
129 | 
130 |   it('defineEmits', async () => {
131 |     expect(
132 |       await fixture(
133 |         `<script setup lang="ts">const emit = defineEmits<{ click: [] }>()</script>`,
134 |       ),
135 |     ).toMatchInlineSnapshot(`
136 |       "<script setup>
137 |       const emit = defineEmits(["click"])
138 |       </script>"
139 |     `)
140 |     expect(
141 |       await fixture(
142 |         `<script setup lang="ts">defineEmits<{ click: [] }>()</script>`,
143 |       ),
144 |     ).toMatchInlineSnapshot(`
145 |       "<script setup>
146 |       defineEmits(["click"])
147 |       </script>"
148 |     `)
149 |     expect(
150 |       await fixture(
151 |         `<script setup lang="ts">defineEmits<{ click: [msg: string] }>()</script>`,
152 |       ),
153 |     ).toMatchInlineSnapshot(`
154 |       "<script setup>
155 |       defineEmits(["click"])
156 |       </script>"
157 |     `)
158 |     expect(
159 |       await fixture(
160 |         `<script setup lang="ts">defineEmits<{ (e: 'click'): any }>()</script>`,
161 |       ),
162 |     ).toMatchInlineSnapshot(`
163 |       "<script setup>
164 |       defineEmits(["click"])
165 |       </script>"
166 |     `)
167 |     expect(
168 |       await fixture(
169 |         `<script setup lang="ts">defineEmits<{ (e: 'click', msg: string): any }>()</script>`,
170 |       ),
171 |     ).toMatchInlineSnapshot(`
172 |       "<script setup>
173 |       defineEmits(["click"])
174 |       </script>"
175 |     `)
176 | 
177 |     await expect(fixture(`<script setup lang="ts">defineEmits<{ click: [] }>('click')</script>`)).rejects.toThrow(`[vue-sfc-transformer] defineEmits() cannot accept both type and non-type arguments at the same time. Use one or the other.`)
178 |   })
179 | 
180 |   it('defineModel', async () => {
181 |     expect(
182 |       await fixture(
183 |         `<script setup lang="ts">const model = defineModel<string>()</script>`,
184 |       ),
185 |     ).toMatchInlineSnapshot(`
186 |       "<script setup>
187 |       const model = defineModel({ type: String })
188 |       </script>"
189 |     `)
190 |     expect(
191 |       await fixture(`<script setup lang="ts">defineModel<string>()</script>`),
192 |     ).toMatchInlineSnapshot(`
193 |       "<script setup>
194 |       defineModel({ type: String })
195 |       </script>"
196 |     `)
197 |     expect(
198 |       await fixture(
199 |         `<script setup lang="ts">defineModel<string>('msg')</script>`,
200 |       ),
201 |     ).toMatchInlineSnapshot(`
202 |       "<script setup>
203 |       defineModel("msg", { type: String })
204 |       </script>"
205 |     `)
206 |     expect(
207 |       await fixture(
208 |         `<script setup lang="ts">defineModel<string | number | string[]>('msg')</script>`,
209 |       ),
210 |     ).toMatchInlineSnapshot(`
211 |       "<script setup>
212 |       defineModel("msg", { type: [String, Number, Array] })
213 |       </script>"
214 |     `)
215 |     expect(
216 |       await fixture(
217 |         `<script setup lang="ts">defineModel<string>({ required: true })</script>`,
218 |       ),
219 |     ).toMatchInlineSnapshot(`
220 |       "<script setup>
221 |       defineModel({ type: String, ...{ required: true } })
222 |       </script>"
223 |     `)
224 |     expect(
225 |       await fixture(
226 |         `<script setup lang="ts">defineModel<string>('msg', { required: true })</script>`,
227 |       ),
228 |     ).toMatchInlineSnapshot(`
229 |       "<script setup>
230 |       defineModel("msg", { type: String, ...{ required: true } })
231 |       </script>"
232 |     `)
233 |     expect(
234 |       await fixture(
235 |         `<script setup lang="ts">const model = defineModel<number | undefined>()</script>`,
236 |       ),
237 |     ).toMatchInlineSnapshot(`
238 |       "<script setup>
239 |       const model = defineModel({ type: null })
240 |       </script>"
241 |     `)
242 |     expect(
243 |       await fixture(
244 |         `<script setup lang="ts">const model = defineModel<boolean | undefined>()</script>`,
245 |       ),
246 |     ).toMatchInlineSnapshot(`
247 |       "<script setup>
248 |       const model = defineModel({ type: Boolean, skipCheck: true })
249 |       </script>"
250 |     `)
251 |     expect(
252 |       await fixture(
253 |         `<script setup lang="ts">const model = defineModel<Function | undefined>()</script>`,
254 |       ),
255 |     ).toMatchInlineSnapshot(`
256 |       "<script setup>
257 |       const model = defineModel({ type: Function, skipCheck: true })
258 |       </script>"
259 |     `)
260 | 
261 |     await expect(fixture('<script setup lang="ts">defineModel("foo", "bar")</script>')).rejects.toThrow(`[vue-sfc-transformer] defineModel()'s second argument must be an object.`)
262 |   })
263 | 
264 |   it('handles edge cases in processDefineProps', async () => {
265 |     const script = `<script setup lang=\"ts\">defineProps<{}>()</script>`
266 |     const sfc = parse(script, { filename: 'test.vue', ignoreEmpty: true })
267 |     const result = await preTranspileScriptSetup(sfc.descriptor, 'test.vue')
268 |     expect(result.content).toContain('defineProps({})')
269 |   })
270 | 
271 |   async function fixture(src: string): Promise<string> {
272 |     const sfc = parse(src, {
273 |       filename: 'test.vue',
274 |       ignoreEmpty: true,
275 |     })
276 |     if (sfc.descriptor.scriptSetup) {
277 |       const result = await preTranspileScriptSetup(sfc.descriptor, 'test.vue')
278 |       return `<script setup>\n${result.content}\n</script>`
279 |     }
280 |     return src
281 |   }
282 | })
283 | 


--------------------------------------------------------------------------------
/src/utils/script-setup.ts:
--------------------------------------------------------------------------------
  1 | import type { ArrayExpression, CallExpression, Expression, Identifier, Node, ObjectExpression, ObjectProperty, StringLiteral } from '@babel/types'
  2 | import type { SFCDescriptor, SFCScriptBlock, SimpleTypeResolveContext } from 'vue/compiler-sfc'
  3 | 
  4 | import { parse } from '@babel/parser'
  5 | import { extractRuntimeEmits, extractRuntimeProps, inferRuntimeType, MagicString } from 'vue/compiler-sfc'
  6 | 
  7 | interface Context {
  8 |   ctx: SimpleTypeResolveContext
  9 | }
 10 | 
 11 | const DEFINE_EMITS = 'defineEmits'
 12 | const DEFINE_PROPS = 'defineProps'
 13 | const WITH_DEFAULTS = 'withDefaults'
 14 | const DEFINE_MODEL = 'defineModel'
 15 | 
 16 | /**
 17 |  * Pre-transpile script setup block to remove type syntax and replace it with runtime declarations.
 18 |  * This function only performs minimal error checking, it means that it will preserve all errors that can be triggered at runtime
 19 |  */
 20 | export async function preTranspileScriptSetup(sfc: SFCDescriptor, id: string): Promise<SFCScriptBlock> {
 21 |   if (!sfc.scriptSetup) {
 22 |     throw new Error('[vue-sfc-transformer] No script setup block found')
 23 |   }
 24 |   const context = await prepareContext(sfc as SFCDescriptor & { scriptSetup: SFCScriptBlock }, id)
 25 |   const resultBuilder = new MagicString(sfc.scriptSetup.content)
 26 | 
 27 |   for (const node of context.ctx.ast) {
 28 |     if (node.type === 'ExpressionStatement') {
 29 |       const processedTypeSyntax = processDefineProps(node.expression, context)
 30 |         || processDefineEmits(node.expression, context)
 31 |         || processWithDefaults(node.expression, context)
 32 |         || processDefineModel(node.expression, context)
 33 | 
 34 |       if (processedTypeSyntax !== undefined) {
 35 |         resultBuilder.overwrite(node.start!, node.end!, processedTypeSyntax)
 36 |       }
 37 |     }
 38 | 
 39 |     if (node.type === 'VariableDeclaration' && !node.declare) {
 40 |       const total = node.declarations.length
 41 |       for (let i = 0; i < total; i += 1) {
 42 |         const decl = node.declarations[i]!
 43 |         if (!decl.init) {
 44 |           continue
 45 |         }
 46 | 
 47 |         const processedTypeSyntax
 48 |           = processDefineProps(decl.init, context)
 49 |             || processDefineEmits(decl.init, context)
 50 |             || processWithDefaults(decl.init, context)
 51 |             || processDefineModel(decl.init, context)
 52 | 
 53 |         if (processedTypeSyntax !== undefined) {
 54 |           resultBuilder.overwrite(
 55 |             decl.init.start!,
 56 |             decl.init.end!,
 57 |             processedTypeSyntax,
 58 |           )
 59 |         }
 60 |       }
 61 |     }
 62 |   }
 63 | 
 64 |   return {
 65 |     ...sfc.scriptSetup,
 66 |     content: resultBuilder.toString(),
 67 |   }
 68 | }
 69 | 
 70 | function processDefineProps(node: Expression, context: Context): string | undefined {
 71 |   if (!isCallOf(node, DEFINE_PROPS)) {
 72 |     return
 73 |   }
 74 | 
 75 |   const propsRuntimeDecl = node.arguments[0]
 76 |   if (!node.typeParameters) {
 77 |     return
 78 |   }
 79 |   if (propsRuntimeDecl) {
 80 |     context.ctx.error(
 81 |       `${DEFINE_PROPS}() cannot accept both type and non-type arguments `
 82 |       + `at the same time. Use one or the other.`,
 83 |       node,
 84 |     )
 85 |   }
 86 | 
 87 |   const propsTypeDecl = node.typeParameters.params[0]
 88 |   if (!propsTypeDecl) {
 89 |     return
 90 |   }
 91 | 
 92 |   context.ctx.propsTypeDecl = propsTypeDecl
 93 |   const propsStr = extractRuntimeProps(context.ctx) || '{}'
 94 | 
 95 |   return `${DEFINE_PROPS}(${propsStr})`
 96 | }
 97 | function processDefineEmits(node: Expression, context: Context): string | undefined {
 98 |   if (!isCallOf(node, DEFINE_EMITS)) {
 99 |     return
100 |   }
101 | 
102 |   if (!node.typeParameters) {
103 |     return
104 |   }
105 |   const emitsRuntimeDecl = node.arguments[0]
106 |   if (emitsRuntimeDecl) {
107 |     context.ctx.error(
108 |       `${DEFINE_EMITS}() cannot accept both type and non-type arguments `
109 |       + `at the same time. Use one or the other.`,
110 |       node,
111 |     )
112 |   }
113 | 
114 |   const emitsTypeDecl = node.typeParameters.params[0]
115 |   if (!emitsTypeDecl) {
116 |     return
117 |   }
118 | 
119 |   context.ctx.emitsTypeDecl = emitsTypeDecl
120 |   const emits = extractRuntimeEmits(context.ctx)
121 | 
122 |   return `defineEmits([${[...emits].map(emit => `"${emit}"`).join(', ')}])`
123 | }
124 | function processWithDefaults(node: Expression, context: Context): string | undefined {
125 |   if (!isCallOf(node, WITH_DEFAULTS)) {
126 |     return
127 |   }
128 | 
129 |   context.ctx.propsRuntimeDefaults = node.arguments[1]
130 |   const res = processDefineProps(node.arguments[0] as Expression, context)
131 |   if (!res) {
132 |     context.ctx.error(
133 |       `${WITH_DEFAULTS}' first argument must be a ${DEFINE_PROPS} call.`,
134 |       node.arguments[0] || node,
135 |     )
136 |   }
137 | 
138 |   if (!context.ctx.propsTypeDecl) {
139 |     context.ctx.error(
140 |       `${WITH_DEFAULTS} can only be used with type-based `
141 |       + `${DEFINE_PROPS} declaration.`,
142 |       node,
143 |     )
144 |   }
145 |   if (!context.ctx.propsRuntimeDefaults) {
146 |     context.ctx.error(
147 |       `The 2nd argument of ${WITH_DEFAULTS} is required.`,
148 |       node,
149 |     )
150 |   }
151 | 
152 |   return res
153 | }
154 | function processDefineModel(node: Expression, context: Context): string | undefined {
155 |   if (!isCallOf(node, DEFINE_MODEL)) {
156 |     return
157 |   }
158 | 
159 |   const [modelNameDecl, modelRuntimeDecl] = getDefineModelRuntimeDecl(
160 |     node,
161 |     context,
162 |   )
163 | 
164 |   const modelTypeDecl = node.typeParameters?.params[0]
165 |   if (!modelTypeDecl) {
166 |     return
167 |   }
168 | 
169 |   let model = inferRuntimeType(context.ctx, modelTypeDecl)
170 |   let skipCheck = false
171 |   const hasBoolean = model.includes('Boolean')
172 |   const hasFunction = model.includes('Function')
173 |   const hasUnknownType = model.includes('Unknown')
174 |   if (hasUnknownType) {
175 |     if (hasBoolean || hasFunction) {
176 |       skipCheck = true
177 |       model = model.filter(t => t !== 'Unknown')
178 |     }
179 |     else {
180 |       model = ['null']
181 |     }
182 |   }
183 |   if (!model || model.length === 0) {
184 |     return
185 |   }
186 | 
187 |   // { type: String } or { type: [String, Number] } if model have multiple types
188 |   const modelCodegenTypeDecl
189 |     = model.length === 1
190 |       ? ({ type: 'Identifier', name: model[0]! } satisfies Identifier)
191 |       : ({
192 |           type: 'ArrayExpression',
193 |           elements: model.map(
194 |             name => ({ type: 'Identifier', name }) satisfies Identifier,
195 |           ),
196 |         } satisfies ArrayExpression)
197 | 
198 |   const modelCodegenDecl: ObjectExpression = {
199 |     type: 'ObjectExpression',
200 |     properties: [
201 |       {
202 |         type: 'ObjectProperty',
203 |         key: { type: 'StringLiteral', value: 'type' },
204 |         value: modelCodegenTypeDecl,
205 |         computed: false,
206 |         shorthand: false,
207 |       } satisfies ObjectProperty,
208 |     ],
209 |   }
210 |   if (modelRuntimeDecl) {
211 |     modelCodegenDecl.properties.push({
212 |       type: 'SpreadElement',
213 |       argument: modelRuntimeDecl,
214 |     })
215 |   }
216 | 
217 |   const codegenArgs: string[] = []
218 |   if (modelNameDecl) {
219 |     codegenArgs.push(`"${modelNameDecl.value}"`)
220 |   }
221 | 
222 |   const codegenType = model.length === 1 ? model[0] : `[${model.join(', ')}]`
223 |   const codegenSkipCheck = skipCheck ? 'skipCheck: true' : ''
224 |   const codegenExtra = modelRuntimeDecl ? `...${context.ctx.getString(modelRuntimeDecl)}` : ''
225 |   codegenArgs.push(`{ ${[`type: ${codegenType}`, codegenSkipCheck, codegenExtra].filter(s => !!s).join(', ')} }`)
226 | 
227 |   return `${DEFINE_MODEL}(${codegenArgs.join(', ')})`
228 | }
229 | 
230 | function getDefineModelRuntimeDecl(node: CallExpression, context: Context): [StringLiteral | undefined, ObjectExpression | undefined] {
231 |   const [arg0, arg1] = node.arguments
232 |   if (arg0 && arg0.type === 'StringLiteral') {
233 |     if (arg1 && arg1.type !== 'ObjectExpression') {
234 |       context.ctx.error(`${DEFINE_MODEL}()'s second argument must be an object.`, arg1)
235 |     }
236 | 
237 |     return [arg0, arg1 as ObjectExpression]
238 |   }
239 | 
240 |   if (arg0 && arg0.type !== 'ObjectExpression' && !(arg0.type === 'Identifier' && arg0.name === 'undefined')) {
241 |     context.ctx.error(`Unexpected argument type for ${DEFINE_MODEL}().`, arg0)
242 |   }
243 | 
244 |   return [undefined, arg0 as ObjectExpression | undefined]
245 | }
246 | 
247 | async function prepareContext({ script, scriptSetup }: SFCDescriptor & { scriptSetup: SFCScriptBlock }, id: string): Promise<Context> {
248 |   const helper = new Set<string>()
249 |   const ast = parse(`${scriptSetup.content}\n${script?.content}`, {
250 |     sourceType: 'module',
251 |     plugins: (['tsx', 'jsx'] as Array<string | undefined>).includes(scriptSetup.lang)
252 |       ? ['typescript', 'jsx']
253 |       : ['typescript'],
254 |   })
255 | 
256 |   const ctx = {
257 |     filename: id,
258 |     source: scriptSetup.content,
259 |     ast: ast.program.body,
260 |     error: (msg) => {
261 |       throw new Error(`[vue-sfc-transformer] ${msg}`)
262 |     },
263 |     helper: (key) => {
264 |       helper.add(key)
265 |       return `_${key}`
266 |     },
267 |     getString: (node) => {
268 |       return scriptSetup.content.slice(node.start!, node.end!)
269 |     },
270 |     propsTypeDecl: undefined,
271 |     propsRuntimeDefaults: undefined,
272 |     propsDestructuredBindings: Object.create(null),
273 |     emitsTypeDecl: undefined,
274 |     isCE: false,
275 |     options: {},
276 |   } satisfies SimpleTypeResolveContext
277 | 
278 |   return {
279 |     ctx,
280 |   }
281 | }
282 | 
283 | function isCallOf(node: Node | undefined | undefined, test: string | ((id: string) => boolean)): node is CallExpression {
284 |   return !!(
285 |     node
286 |     && node.type === 'CallExpression'
287 |     && node.callee.type === 'Identifier'
288 |     && (typeof test === 'string'
289 |       ? node.callee.name === test
290 |       : test(node.callee.name))
291 |   )
292 | }
293 | 


--------------------------------------------------------------------------------
/src/utils/template.ts:
--------------------------------------------------------------------------------
  1 | import type { AttributeNode, DirectiveNode, ExpressionNode, ParentNode, RootNode, SourceLocation, TemplateChildNode, TextNode } from '@vue/compiler-dom'
  2 | import { isFnExpressionBrowser as isFnExpression, isMemberExpressionBrowser as isMemberExpression } from '@vue/compiler-core'
  3 | import { MagicString } from 'vue/compiler-sfc'
  4 | 
  5 | // copy from `@vue/compiler-dom`
  6 | enum NodeTypes {
  7 |   ROOT,
  8 |   ELEMENT,
  9 |   TEXT,
 10 |   COMMENT,
 11 |   SIMPLE_EXPRESSION,
 12 |   INTERPOLATION,
 13 |   ATTRIBUTE,
 14 |   DIRECTIVE,
 15 | 
 16 |   // containers
 17 |   COMPOUND_EXPRESSION,
 18 |   IF,
 19 |   IF_BRANCH,
 20 |   FOR,
 21 |   TEXT_CALL,
 22 | 
 23 |   // codegen
 24 |   VNODE_CALL,
 25 |   JS_CALL_EXPRESSION,
 26 |   JS_OBJECT_EXPRESSION,
 27 |   JS_PROPERTY,
 28 |   JS_ARRAY_EXPRESSION,
 29 |   JS_FUNCTION_EXPRESSION,
 30 |   JS_CONDITIONAL_EXPRESSION,
 31 |   JS_CACHE_EXPRESSION,
 32 | 
 33 |   // ssr codegen
 34 |   JS_BLOCK_STATEMENT,
 35 |   JS_TEMPLATE_LITERAL,
 36 |   JS_IF_STATEMENT,
 37 |   JS_ASSIGNMENT_EXPRESSION,
 38 |   JS_SEQUENCE_EXPRESSION,
 39 |   JS_RETURN_STATEMENT,
 40 | }
 41 | 
 42 | interface Expression {
 43 |   track: VueTemplateNode[]
 44 |   loc: SourceLocation
 45 |   src: string
 46 |   replacement?: string
 47 | }
 48 | 
 49 | type VueTemplateNode
 50 |   = | ParentNode
 51 |     | ExpressionNode
 52 |     | TemplateChildNode
 53 |     | AttributeNode
 54 |     | DirectiveNode
 55 | 
 56 | function handleNode(
 57 |   node: VueTemplateNode | undefined,
 58 |   addExpression: (...expressions: Expression[]) => void,
 59 |   track: VueTemplateNode[],
 60 | ) {
 61 |   if (!node) {
 62 |     return
 63 |   }
 64 | 
 65 |   const currentTrack = [...track, node]
 66 | 
 67 |   const search = (
 68 |     node?: ExpressionNode | TemplateChildNode | AttributeNode
 69 |       | DirectiveNode | TextNode,
 70 |   ) => handleNode(node, addExpression, currentTrack)
 71 | 
 72 |   switch (node.type) {
 73 |     case NodeTypes.ROOT: {
 74 |       for (const child of node.children) {
 75 |         search(child)
 76 |       }
 77 |       return
 78 |     }
 79 |     case NodeTypes.ELEMENT: {
 80 |       const nodes = [...node.children, ...node.props]
 81 |       for (const child of nodes) {
 82 |         search(child)
 83 |       }
 84 |       return
 85 |     }
 86 |     case NodeTypes.TEXT: {
 87 |       return
 88 |     }
 89 |     case NodeTypes.COMMENT: {
 90 |       return
 91 |     }
 92 |     case NodeTypes.SIMPLE_EXPRESSION: {
 93 |       if (node.ast === null || node.ast === false) {
 94 |         return
 95 |       }
 96 |       addExpression({ loc: node.loc, src: node.content, track: currentTrack })
 97 |       return
 98 |     }
 99 |     case NodeTypes.INTERPOLATION: {
100 |       search(node.content)
101 |       return
102 |     }
103 |     case NodeTypes.ATTRIBUTE: {
104 |       search(node.value)
105 |       return
106 |     }
107 |     case NodeTypes.DIRECTIVE: {
108 |       const nodes = [
109 |         ...node.forParseResult
110 |           ? [
111 |               node.forParseResult?.source,
112 |               node.forParseResult?.value,
113 |               node.forParseResult?.key,
114 |               node.forParseResult?.index,
115 |             ]
116 |           : [node.exp],
117 |         // node.arg,
118 |         ...node.modifiers,
119 |       ].filter(item => !!item)
120 |       for (const child of nodes) {
121 |         search(child)
122 |       }
123 |       return
124 |     }
125 |     case NodeTypes.COMPOUND_EXPRESSION: {
126 |       if (!node.ast) {
127 |         return
128 |       }
129 | 
130 |       addExpression({ loc: node.loc, src: node.loc.source, track: currentTrack })
131 |       return
132 |     }
133 |     // case NodeTypes.IF:
134 |     // case NodeTypes.FOR:
135 |     // case NodeTypes.TEXT_CALL:
136 |     default: {
137 |       throw new Error(`Unexpected node type: ${node.type}`)
138 |     }
139 |   }
140 | }
141 | 
142 | export async function transpileVueTemplate(
143 |   content: string,
144 |   root: RootNode,
145 |   offset = 0,
146 |   transform: (code: string) => Promise<string>,
147 | ): Promise<string> {
148 |   const expressions: Expression[] = []
149 | 
150 |   handleNode(root, (...items) => expressions.push(...items), [])
151 | 
152 |   if (expressions.length === 0) {
153 |     return content
154 |   }
155 | 
156 |   const s = new MagicString(content)
157 | 
158 |   const transformMap = await transformJsSnippets(expressions, transform)
159 |   for (const item of expressions) {
160 |     item.replacement = transformMap.get(item) ?? item.src
161 | 
162 |     if (!shouldReplaceQuote(item)) {
163 |       continue
164 |     }
165 | 
166 |     // the source should only have one of the quotes
167 |     const sourceQuote = getSourceQuote(
168 |       content,
169 |       item.loc.start.offset - offset,
170 |       item.loc.end.offset - offset,
171 |     )
172 |     if (sourceQuote !== null) {
173 |       const search = sourceQuote === `"` ? `'` : `"`
174 |       item.replacement = replaceQuote(
175 |         item.replacement,
176 |         search,
177 |         sourceQuote,
178 |       )
179 |     }
180 |   }
181 | 
182 |   for (const item of expressions) {
183 |     if (item.replacement && item.replacement !== item.src) {
184 |       s.overwrite(
185 |         item.loc.start.offset - offset,
186 |         item.loc.end.offset - offset,
187 |         item.replacement,
188 |       )
189 |     }
190 |   }
191 | 
192 |   return s.toString()
193 | }
194 | 
195 | export function replaceQuote(code: string, target: string, replace: string): string {
196 |   let res = code
197 | 
198 |   if (res.includes(target)) {
199 |     /**
200 |      * Due to the way Vue parses templates,
201 |      * the symbol of target would never appear in the code.
202 |      * We just need to replace the symbol of target.
203 |      *
204 |      * But for replace symbol exist in code, we need to escape it,
205 |      * because esbuild have removed the escape character.
206 |      */
207 |     res = res.replaceAll(replace, `\\${replace}`)
208 |     res = res.replaceAll(target, replace)
209 |   }
210 | 
211 |   return res
212 | }
213 | 
214 | function shouldReplaceQuote(expression: Expression): boolean {
215 |   if (!expression.src.includes(`'`) && !expression.src.includes(`"`)) {
216 |     return false
217 |   }
218 | 
219 |   // skip the expression in the interpolation, it doesn't care about the quote
220 |   const secondLastTrack = expression.track.at(-2)
221 |   if (secondLastTrack?.type === NodeTypes.INTERPOLATION) {
222 |     return false
223 |   }
224 | 
225 |   return true
226 | }
227 | 
228 | function getSourceQuote(code: string, start: number, end: number): string | null {
229 |   const source = code.slice(start, end)
230 |   const quotes = ['"', '\'']
231 |   for (const quote of quotes) {
232 |     if (source.includes(quote)) {
233 |       return quote
234 |     }
235 |   }
236 |   return null
237 | }
238 | 
239 | interface SnippetHandler {
240 |   key: (node: Expression) => string | null
241 |   prepare: (node: Expression, id: number) => string
242 |   parse: (code: string, id: number) => string | undefined
243 |   standalone: boolean
244 | }
245 | 
246 | const defaultSnippetHandler: SnippetHandler = {
247 |   key: node => `default$:${node.src}`,
248 |   prepare: (node, id) => `wrapper_${id}(${node.src});`,
249 |   parse: (code) => {
250 |     const wrapperRegex = /^(wrapper_\d+)\(([\s\S]*?)\);$/
251 | 
252 |     const [_, wrapperName, res] = code.match(wrapperRegex) ?? []
253 |     if (!wrapperName || !res) {
254 |       return undefined
255 |     }
256 | 
257 |     return res
258 |   },
259 |   standalone: false,
260 | }
261 | 
262 | const multipleStatementsSnippetHandler: SnippetHandler = {
263 |   key: (node) => {
264 |     const key = `multipleStatements$:${node.src}`
265 |     const secondLastTrack = node.track.at(-2)
266 |     const lastTrack = node.track.at(-1)
267 | 
268 |     if (
269 |       lastTrack?.type === NodeTypes.SIMPLE_EXPRESSION
270 |       && secondLastTrack?.type === NodeTypes.DIRECTIVE
271 |       && secondLastTrack.name === 'on'
272 |     ) {
273 |       const isMemberExp = isMemberExpression(lastTrack)
274 |       const isInlineStatement = !(isMemberExp || isFnExpression(lastTrack))
275 | 
276 |       const hasMultipleStatements = node.src.includes(';')
277 | 
278 |       if ((isInlineStatement || isMemberExp) && hasMultipleStatements) {
279 |         return key
280 |       }
281 |     }
282 | 
283 |     return null
284 |   },
285 |   prepare: (node, id) => `wrapper_${id}(() => {${node.src}});`,
286 |   parse: (code) => {
287 |     const wrapperRegex = /^(wrapper_\d+)\(\(\) => \{([\s\S]*?)\}\);$/
288 | 
289 |     const [_, wrapperName, res] = code.trim().match(wrapperRegex) ?? []
290 |     if (!wrapperName || !res) {
291 |       return undefined
292 |     }
293 | 
294 |     return res.trim().replace(/;$/, '')
295 |   },
296 |   standalone: false,
297 | }
298 | 
299 | const destructureSnippetHandler: SnippetHandler = {
300 |   key: (node) => {
301 |     const key = `destructure$:${node.src}`
302 |     const lastTrack = node.track.at(-1)
303 |     const secondLastTrack = node.track.at(-2)
304 | 
305 |     // v-slot:xxx="{ name }"
306 |     if (secondLastTrack?.type === NodeTypes.DIRECTIVE && secondLastTrack.name === 'slot') {
307 |       return key
308 |     }
309 | 
310 |     // v-for="({ name }, key,   index) of items"
311 |     //         ^this     ^this  ^this     ^not this
312 |     if (
313 |       secondLastTrack?.type === NodeTypes.DIRECTIVE
314 |       && secondLastTrack.name === 'for'
315 |       && secondLastTrack?.forParseResult
316 |       && lastTrack !== secondLastTrack.forParseResult.source
317 |     ) {
318 |       return key
319 |     }
320 |     return null
321 |   },
322 |   prepare: (node, id) => `const ${node.src} = wrapper_${id}();`,
323 |   parse: (code) => {
324 |     const regex = /^const([\s\S]*?)=\s+wrapper_\d+\(\);$/
325 |     const [_, res] = code.match(regex) ?? []
326 |     if (!res) {
327 |       return undefined
328 |     }
329 |     return res.trim()
330 |   },
331 |   standalone: true,
332 | }
333 | 
334 | const snippetHandlers = [destructureSnippetHandler, multipleStatementsSnippetHandler, defaultSnippetHandler]
335 | function getKey(expression: Expression) {
336 |   for (const handler of snippetHandlers) {
337 |     const key = handler.key(expression)
338 |     if (key) {
339 |       return { key, handler }
340 |     }
341 |   }
342 | }
343 | 
344 | function generateSnippetSplitter() {
345 |   const identify = Math.random().toString(36).substring(2, 15)
346 |   return `\nsplitter(${JSON.stringify(identify)});\n`
347 | }
348 | 
349 | async function transformJsSnippets(expressions: Expression[], transform: (code: string) => Promise<string>): Promise<WeakMap<Expression, string>> {
350 |   const transformMap = new Map<string, { id: number, nodes: [Expression, ...Expression[]], handler: SnippetHandler }>()
351 | 
352 |   let id = 0
353 |   for (const expression of expressions) {
354 |     const res = getKey(expression)
355 |     if (!res) {
356 |       continue
357 |     }
358 |     if (transformMap.has(res.key)) {
359 |       const item = transformMap.get(res.key)!
360 |       item.nodes.push(expression)
361 |       continue
362 |     }
363 | 
364 |     transformMap.set(res.key, { id, nodes: [expression], handler: res.handler })
365 |     id += 1
366 |   }
367 | 
368 |   const resultMap = new Map<Expression, string>()
369 | 
370 |   const orders = Array.from(transformMap.values())
371 |   const batch = orders.filter(({ handler }) => !handler.standalone)
372 |   const standalone = orders.filter(({ handler }) => handler.standalone)
373 | 
374 |   try {
375 |     // transform all snippets in a single file
376 |     const batchInputSplitter = generateSnippetSplitter()
377 |     const batchInput = batch
378 |       .map(({ nodes, handler }) => handler.prepare(nodes[0], id))
379 |       .join(batchInputSplitter)
380 | 
381 |     const batchOutput = await transform(batchInput)
382 |     const lines = batchOutput.split(batchInputSplitter).map(l => l.trim()).filter(l => !!l)
383 | 
384 |     if (lines.length !== batch.length) {
385 |       throw new Error('[vue-sfc-transform] Syntax Error')
386 |     }
387 | 
388 |     for (let i = 0; i < batch.length; i++) {
389 |       const line = lines[i]!
390 |       const { id, handler, nodes } = batch[i]!
391 | 
392 |       const res = handler.parse(line, id)
393 |       if (!res) {
394 |         continue
395 |       }
396 | 
397 |       for (const node of nodes) {
398 |         resultMap.set(node, res)
399 |       }
400 |     }
401 | 
402 |     // transform standalone snippets
403 |     await Promise.all(standalone.map(async ({ id, handler, nodes }) => {
404 |       const prepared = handler.prepare(nodes[0], id)
405 |       const line = await transform(prepared)
406 | 
407 |       const res = handler.parse(line.trim(), id)
408 |       if (!res) {
409 |         return
410 |       }
411 | 
412 |       for (const node of nodes) {
413 |         resultMap.set(node, res)
414 |       }
415 |     }))
416 |   }
417 |   catch (error) {
418 |     throw new Error('[vue-sfc-transform] Error parsing TypeScript expression in template', { cause: error })
419 |   }
420 | 
421 |   return resultMap
422 | }
423 | 


--------------------------------------------------------------------------------
/test/mkdist.test.ts:
--------------------------------------------------------------------------------
  1 | import { mkdir, readFile, rm, writeFile } from 'node:fs/promises'
  2 | import { join } from 'node:path'
  3 | import { fileURLToPath } from 'node:url'
  4 | import { mkdist } from 'mkdist'
  5 | import { afterAll, describe, expect, it, vi } from 'vitest'
  6 | import { defineDefaultBlockLoader } from '../src/block-loader/default'
  7 | import { vueLoader } from '../src/mkdist'
  8 | import { cleanupBreakLine } from '../src/utils/string'
  9 | 
 10 | describe('transform typescript script setup', () => {
 11 |   const tmpDir = fileURLToPath(new URL('../node_modules/.tmp/fixtures', import.meta.url))
 12 |   afterAll(async () => {
 13 |     await rm(tmpDir, { force: true, recursive: true })
 14 |   })
 15 |   it('defineProps', async () => {
 16 |     expect(
 17 |       await fixture(
 18 |         `<script setup lang="ts">defineProps<{ msg: string }>()</script>`,
 19 |       ),
 20 |     ).toMatchInlineSnapshot(`
 21 |       "<script setup>
 22 |       defineProps({
 23 |         msg: { type: String, required: true }
 24 |       });
 25 |       </script>
 26 |       "
 27 |     `)
 28 |     expect(
 29 |       await fixture(
 30 |         `<script setup lang="ts">const props = defineProps<{ msg: string }>()</script>`,
 31 |       ),
 32 |     ).toMatchInlineSnapshot(`
 33 |       "<script setup>
 34 |       const props = defineProps({
 35 |         msg: { type: String, required: true }
 36 |       });
 37 |       </script>
 38 |       "
 39 |     `)
 40 |     expect(
 41 |       await fixture(
 42 |         `<script setup lang="ts">const { msg } = defineProps<{ msg: string }>()</script>`,
 43 |       ),
 44 |     ).toMatchInlineSnapshot(`
 45 |       "<script setup>
 46 |       const { msg } = defineProps({
 47 |         msg: { type: String, required: true }
 48 |       });
 49 |       </script>
 50 |       "
 51 |     `)
 52 |     expect(
 53 |       await fixture(
 54 |         `<script setup lang="ts">const { msg = 'hello' } = defineProps<{ msg?: string }>()</script>`,
 55 |       ),
 56 |     ).toMatchInlineSnapshot(`
 57 |       "<script setup>
 58 |       const { msg = "hello" } = defineProps({
 59 |         msg: { type: String, required: false }
 60 |       });
 61 |       </script>
 62 |       "
 63 |     `)
 64 |   })
 65 | 
 66 |   it('withDefaults', async () => {
 67 |     expect(
 68 |       await fixture(
 69 |         `<script setup lang="ts">const props = withDefaults(defineProps<{ msg?: string }>(), { msg: 'hi' })</script>`,
 70 |       ),
 71 |     ).toMatchInlineSnapshot(`
 72 |       "<script setup>
 73 |       const props = defineProps({
 74 |         msg: { type: String, required: false, default: "hi" }
 75 |       });
 76 |       </script>
 77 |       "
 78 |     `)
 79 |     expect(
 80 |       await fixture(
 81 |         `<script setup lang="ts">withDefaults(defineProps<{ msg?: string }>(), { msg: 'hi' })</script>`,
 82 |       ),
 83 |     ).toMatchInlineSnapshot(`
 84 |       "<script setup>
 85 |       defineProps({
 86 |         msg: { type: String, required: false, default: "hi" }
 87 |       });
 88 |       </script>
 89 |       "
 90 |     `)
 91 |   })
 92 | 
 93 |   it('defineEmits', async () => {
 94 |     expect(
 95 |       await fixture(
 96 |         `<script setup lang="ts">const emit = defineEmits<{ click: [] }>()</script>`,
 97 |       ),
 98 |     ).toMatchInlineSnapshot(`
 99 |       "<script setup>
100 |       const emit = defineEmits(["click"]);
101 |       </script>
102 |       "
103 |     `)
104 |     expect(
105 |       await fixture(
106 |         `<script setup lang="ts">defineEmits<{ click: [] }>()</script>`,
107 |       ),
108 |     ).toMatchInlineSnapshot(`
109 |       "<script setup>
110 |       defineEmits(["click"]);
111 |       </script>
112 |       "
113 |     `)
114 |     expect(
115 |       await fixture(
116 |         `<script setup lang="ts">defineEmits<{ click: [msg: string] }>()</script>`,
117 |       ),
118 |     ).toMatchInlineSnapshot(`
119 |       "<script setup>
120 |       defineEmits(["click"]);
121 |       </script>
122 |       "
123 |     `)
124 |     expect(
125 |       await fixture(
126 |         `<script setup lang="ts">defineEmits<{ (e: 'click'): any }>()</script>`,
127 |       ),
128 |     ).toMatchInlineSnapshot(`
129 |       "<script setup>
130 |       defineEmits(["click"]);
131 |       </script>
132 |       "
133 |     `)
134 |     expect(
135 |       await fixture(
136 |         `<script setup lang="ts">defineEmits<{ (e: 'click', msg: string): any }>()</script>`,
137 |       ),
138 |     ).toMatchInlineSnapshot(`
139 |       "<script setup>
140 |       defineEmits(["click"]);
141 |       </script>
142 |       "
143 |     `)
144 |   })
145 | 
146 |   it('defineModel', async () => {
147 |     expect(
148 |       await fixture(
149 |         `<script setup lang="ts">const model = defineModel<string>()</script>`,
150 |       ),
151 |     ).toMatchInlineSnapshot(`
152 |       "<script setup>
153 |       const model = defineModel({ type: String });
154 |       </script>
155 |       "
156 |     `)
157 |     expect(
158 |       await fixture(`<script setup lang="ts">defineModel<string>()</script>`),
159 |     ).toMatchInlineSnapshot(`
160 |       "<script setup>
161 |       defineModel({ type: String });
162 |       </script>
163 |       "
164 |     `)
165 |     expect(
166 |       await fixture(
167 |         `<script setup lang="ts">defineModel<string>('msg')</script>`,
168 |       ),
169 |     ).toMatchInlineSnapshot(`
170 |       "<script setup>
171 |       defineModel("msg", { type: String });
172 |       </script>
173 |       "
174 |     `)
175 |     expect(
176 |       await fixture(
177 |         `<script setup lang="ts">defineModel<string>({ required: true })</script>`,
178 |       ),
179 |     ).toMatchInlineSnapshot(`
180 |       "<script setup>
181 |       defineModel({ type: String, ...{ required: true } });
182 |       </script>
183 |       "
184 |     `)
185 |     expect(
186 |       await fixture(
187 |         `<script setup lang="ts">defineModel<string>('msg', { required: true })</script>`,
188 |       ),
189 |     ).toMatchInlineSnapshot(`
190 |       "<script setup>
191 |       defineModel("msg", { type: String, ...{ required: true } });
192 |       </script>
193 |       "
194 |     `)
195 |   })
196 | 
197 |   it('do not tree-shake', async () => {
198 |     expect(
199 |       await fixture(
200 |         `<template>
201 |             <div :data-test="toValue('hello')" />
202 |           </template>
203 |           <script setup lang="ts">
204 |           import { toValue, type Ref } from 'vue'
205 |           const msg = 1
206 |           </script>`,
207 |       ),
208 |     ).toMatchInlineSnapshot(`
209 |       "<template>
210 |                   <div :data-test="toValue('hello')" />
211 |       </template>
212 | 
213 |       <script setup>
214 |       import { toValue } from "vue";
215 |       const msg = 1;
216 |       </script>
217 |       "
218 |     `)
219 |   })
220 | 
221 |   it('generates declaration', { timeout: 50_000 }, async () => {
222 |     const src = `
223 |       <template>
224 |         <div :data-test="toValue('hello')" />
225 |       </template>
226 | 
227 |       <script>
228 |         export default { name: 'App' }
229 |       </script>
230 | 
231 |       <script setup lang="ts">
232 |       defineProps<{ msg: string }>()
233 |       import { toValue, type Ref } from 'vue'
234 |       const msg = 1
235 |       </script>`
236 | 
237 |     expect(await legacyDeclaration(src)).toMatchInlineSnapshot(`
238 |       "declare const _default: typeof __VLS_export;
239 |       export default _default;
240 |       declare const __VLS_export: import("vue").DefineComponent<{
241 |           msg: string;
242 |       }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
243 |           msg: string;
244 |       }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
245 |       "
246 |     `)
247 |     expect(await declaration(src)).toMatchInlineSnapshot(`
248 |       "declare const _default: typeof __VLS_export;
249 |       export default _default;
250 |       declare const __VLS_export: import("vue").DefineComponent<{
251 |           msg: string;
252 |       }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
253 |           msg: string;
254 |       }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
255 |       "
256 |     `)
257 | 
258 |     expect(await fixture(`<template><div /></template>`)).toMatchInlineSnapshot(`"<template><div /></template>"`)
259 |     expect(await legacyDeclaration(`<template><div /></template>`)).toMatchInlineSnapshot(`
260 |       "declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
261 |       declare const _default: typeof __VLS_export;
262 |       export default _default;
263 |       "
264 |     `)
265 |     expect(await declaration(`<template><div /></template>`)).toMatchInlineSnapshot(`
266 |       "declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
267 |       declare const _default: typeof __VLS_export;
268 |       export default _default;
269 |       "
270 |     `)
271 |   })
272 |   it('generates contents with multiple blocks', async () => {
273 |     const src = `
274 |       <template>
275 |         <div>Hello World</div>
276 |       </template>
277 | 
278 |       <script lang="ts">
279 |         export default { name: 'App' }
280 |       </script>
281 | 
282 |       <style scoped>
283 |         div { color: red; }
284 |       </style>`
285 | 
286 |     expect(await fixture(src)).toMatchInlineSnapshot(`
287 |       "<template>
288 |               <div>Hello World</div>
289 |       </template>
290 | 
291 |       <script>
292 |       export default { name: "App" };
293 |       </script>
294 | 
295 |       <style scoped>
296 |               div { color: red; }
297 |       </style>
298 |       "
299 |     `)
300 |   })
301 | 
302 |   it('handles empty blocks gracefully', async () => {
303 |     const src = `
304 |       <template></template>
305 |       <script></script>
306 |       <style></style>`
307 | 
308 |     expect(await fixture(src)).toMatchInlineSnapshot(`
309 |       "
310 |             <template></template>
311 |             <script></script>
312 |             <style></style>"
313 |     `)
314 |   })
315 | 
316 |   it('sorts blocks by offset', async () => {
317 |     const src = `
318 |       <style scoped>
319 |         div { color: red; }
320 |       </style>
321 | 
322 |       <script lang="ts">
323 |         export default { name: 'App' }
324 |       </script>
325 | 
326 |       <template>
327 |         <div>Hello World</div>
328 |       </template>`
329 | 
330 |     expect(await fixture(src)).toMatchInlineSnapshot(`
331 |       "<style scoped>
332 |               div { color: red; }
333 |       </style>
334 | 
335 |       <script>
336 |       export default { name: "App" };
337 |       </script>
338 | 
339 |       <template>
340 |               <div>Hello World</div>
341 |       </template>
342 |       "
343 |     `)
344 |   })
345 | 
346 |   it('handles attributes in blocks', async () => {
347 |     const src = `
348 |       <template lang="html">
349 |         <div>Hello World</div>
350 |       </template>
351 | 
352 |       <script lang="ts">
353 |         export default { name: 'App' }
354 |       </script>`
355 | 
356 |     expect(await fixture(src)).toMatchInlineSnapshot(`
357 |       "<template lang="html">
358 |               <div>Hello World</div>
359 |       </template>
360 | 
361 |       <script>
362 |       export default { name: "App" };
363 |       </script>
364 |       "
365 |     `)
366 |   })
367 | 
368 |   it('removes unnecessary break lines', async () => {
369 |     const src = `
370 |       <template>
371 | 
372 | 
373 |         <div>Hello World</div>
374 | 
375 | 
376 |       </template>
377 | 
378 |       <script lang="ts">
379 | 
380 | 
381 |         export default { name: 'App' }
382 | 
383 | 
384 |       </script>`
385 | 
386 |     expect(await fixture(src)).toMatchInlineSnapshot(`
387 |       "<template>
388 |               <div>Hello World</div>
389 |       </template>
390 | 
391 |       <script>
392 |       export default { name: "App" };
393 |       </script>
394 |       "
395 |     `)
396 |   })
397 | 
398 |   it('handles invalid .vue files gracefully', async () => {
399 |     vi.spyOn(console, 'error').mockImplementation(() => {})
400 |     const invalidVue = `<template><div></div>` // Missing closing tags
401 |     await expect(fixture(invalidVue)).rejects.toThrowError()
402 |     expect(console.error).toHaveBeenCalledWith(expect.objectContaining({ message: 'Element is missing end tag.' }))
403 |   })
404 | 
405 |   it('cleans up excessive break lines', () => {
406 |     const input = '\n\n\n<div>Test</div>\n\n\n'
407 |     const output = cleanupBreakLine(input)
408 |     expect(output).toBe('<div>Test</div>')
409 |   })
410 | 
411 |   it('handles unsupported block types in defineDefaultBlockLoader', async () => {
412 |     const unsupportedBlock = { type: 'unknown', attrs: {}, content: 'test' }
413 |     // @ts-expect-error invalid unsupported block
414 |     const result = await defineDefaultBlockLoader({ type: 'script', defaultLang: 'js' })(unsupportedBlock, {
415 |       loadFile: async () => [],
416 |       rawInput: { path: '', srcPath: '' },
417 |       addOutput: () => {},
418 |     })
419 |     expect(result).toBeUndefined()
420 |   })
421 | 
422 |   it('throws error when block loader fails', async () => {
423 |     const src = `
424 |       <script setup lang="ts">
425 |         const props =
426 |       </script>
427 |     `
428 | 
429 |     await expect(fixture(src)).rejects.toThrow('[vue-sfc-transformer] Failed to load the script block in')
430 |   })
431 | 
432 |   async function fixture(src: string): Promise<string> {
433 |     await rm(tmpDir, { force: true, recursive: true })
434 |     await mkdir(join(tmpDir, 'src'), { recursive: true })
435 |     await writeFile(join(tmpDir, 'src/index.vue'), src)
436 |     await mkdist({
437 |       loaders: ['js', vueLoader],
438 |       rootDir: tmpDir,
439 |       // @ts-expect-error internal flag for testing
440 |       _verify: true,
441 |     })
442 |     return await readFile(join(tmpDir, 'dist/index.vue'), 'utf-8')
443 |   }
444 | 
445 |   async function legacyDeclaration(src: string): Promise<string | undefined> {
446 |     await rm(tmpDir, { force: true, recursive: true })
447 |     await mkdir(join(tmpDir, 'src'), { recursive: true })
448 |     await writeFile(join(tmpDir, 'src/index.vue'), src)
449 |     await mkdist({ declaration: true, loaders: ['js', vueLoader], rootDir: tmpDir })
450 |     return await readFile(join(tmpDir, 'dist/index.vue.d.ts'), 'utf-8').catch(() => undefined)
451 |   }
452 |   async function declaration(src: string): Promise<string | undefined> {
453 |     await rm(tmpDir, { force: true, recursive: true })
454 |     await mkdir(join(tmpDir, 'src'), { recursive: true })
455 |     await writeFile(join(tmpDir, 'src/index.vue'), src)
456 |     await mkdist({ declaration: true, loaders: ['js', vueLoader], rootDir: tmpDir })
457 |     return await readFile(join(tmpDir, 'dist/index.d.vue.ts'), 'utf-8').catch(() => undefined)
458 |   }
459 | })
460 | 


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