├── pnpm-workspace.yaml
├── index.d.ts
├── playground
    ├── custom
    │   ├── custom.json
    │   └── TestCustomBlock.vue
    ├── css
    │   ├── testCssModules.module.css
    │   ├── TestEmptyCss.vue
    │   ├── TestScopedCss.vue
    │   └── TestCssModules.vue
    ├── src-import
    │   ├── style.css
    │   ├── TestBlockSrcImport.vue
    │   ├── script.ts
    │   ├── template.html
    │   └── TestMultiplySrcImport.vue
    ├── public
    │   └── favicon.ico
    ├── TestTsSFC.vue
    ├── main.js
    ├── test-assets
    │   ├── nested
    │   │   └── testAssets.png
    │   └── TestAssets.vue
    ├── TestJsx.tsx
    ├── shims.d.ts
    ├── TestJsxSFC.vue
    ├── TestDecorator.tsx
    ├── index.html
    ├── hmr
    │   └── TestHmr.vue
    ├── package.json
    ├── tsconfig.json
    ├── vite.config.ts
    ├── TestES2020Features.vue
    └── App.vue
├── .prettierrc
├── .gitignore
├── jest.config.js
├── src
    ├── utils
    │   ├── css.ts
    │   ├── error.ts
    │   ├── query.ts
    │   ├── descriptorCache.ts
    │   ├── rewriteDefault.ts
    │   ├── componentNormalizer.ts
    │   └── vueHotReload.ts
    ├── jsxTransform.ts
    ├── style.ts
    ├── template
    │   ├── types.ts
    │   ├── assetUrl.ts
    │   ├── srcset.ts
    │   ├── utils.ts
    │   └── compileTemplate.ts
    ├── template.ts
    ├── hmr.ts
    ├── index.ts
    └── main.ts
├── .eslintrc
├── tsconfig.json
├── test
    ├── unit.spec.ts
    ├── util.ts
    └── e2e.spec.ts
├── .github
    └── workflows
    │   └── ci.yml
├── README.MD
├── package.json
└── CHANGELOG.md


/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 |   - playground
3 | 


--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'vue-template-babel-compiler'
2 | 


--------------------------------------------------------------------------------
/playground/custom/custom.json:
--------------------------------------------------------------------------------
1 | {
2 |   "customSrc": "Custom Block"
3 | }
4 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |     "semi": false,
3 |     "singleQuote": true,
4 |     "printWidth": 80
5 | }


--------------------------------------------------------------------------------
/playground/css/testCssModules.module.css:
--------------------------------------------------------------------------------
1 | .turquoise {
2 |   color: rgb(255, 140, 0);
3 | }
4 | 


--------------------------------------------------------------------------------
/playground/src-import/style.css:
--------------------------------------------------------------------------------
1 | .src-imports-style {
2 |   color: rgb(119, 136, 153);
3 | }
4 | 


--------------------------------------------------------------------------------
/playground/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/underfin/vite-plugin-vue2/HEAD/playground/public/favicon.ico


--------------------------------------------------------------------------------
/playground/TestTsSFC.vue:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 | import Vue from 'vue'
3 | export default Vue.extend({
4 | })
5 | </script>
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | .DS_Store
 3 | dist
 4 | *.local
 5 | yarn-error.log
 6 | .idea/
 7 | .history/
 8 | .vscode
 9 | temp
10 | 


--------------------------------------------------------------------------------
/playground/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | new Vue({
5 |   render: h => h(App),
6 | }).$mount('#app')
7 | 


--------------------------------------------------------------------------------
/playground/test-assets/nested/testAssets.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/underfin/vite-plugin-vue2/HEAD/playground/test-assets/nested/testAssets.png


--------------------------------------------------------------------------------
/playground/TestJsx.tsx:
--------------------------------------------------------------------------------
1 | const word = 'JSX works!'
2 | 
3 | export default {
4 |   render() {
5 |     return <div class={'jsx'}> {word} </div>
6 |   },
7 | }
8 | 


--------------------------------------------------------------------------------
/playground/shims.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 
3 | declare module '*.vue' {
4 |   import Vue from 'vue'
5 | 
6 |   export default Vue
7 | }
8 | 


--------------------------------------------------------------------------------
/playground/src-import/TestBlockSrcImport.vue:
--------------------------------------------------------------------------------
1 | <script src="./script.ts"></script>
2 | <template src="./template.html" />
3 | <style src="./style.css" scoped></style>
4 | 


--------------------------------------------------------------------------------
/playground/src-import/script.ts:
--------------------------------------------------------------------------------
 1 | const msg = 'hello from <script src="./script.ts">'
 2 | 
 3 | export default {
 4 |   data() {
 5 |     return {
 6 |       msg,
 7 |     }
 8 |   },
 9 | }
10 | 


--------------------------------------------------------------------------------
/playground/src-import/template.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   <h2>SFC Src Imports</h2>
3 |   <div class="src-imports-script">{{ msg }}</div>
4 |   <div class="src-imports-style">This should be light gray</div>
5 | </div>
6 | 


--------------------------------------------------------------------------------
/playground/TestJsxSFC.vue:
--------------------------------------------------------------------------------
 1 | <script lang="tsx">
 2 | const word = 'JSX & SFC works!'
 3 | 
 4 | export default {
 5 |   render() {
 6 |     return <div class={'jsx-sfc'}> {word} </div>
 7 |   },
 8 | }
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   preset: 'ts-jest',
3 |   testMatch: ['<rootDir>/test/**/*spec.ts'],
4 |   testPathIgnorePatterns: ['/playground/', '/node_modules/'],
5 |   watchPathIgnorePatterns: ['<rootDir>/temp'],
6 | }
7 | 


--------------------------------------------------------------------------------
/src/utils/css.ts:
--------------------------------------------------------------------------------
1 | const cssLangs = '\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)'
2 | const cssLangRE = new RegExp(cssLangs)
3 | 
4 | export const isCSSRequest = (request: string): boolean =>
5 |   cssLangRE.test(request)
6 | 


--------------------------------------------------------------------------------
/playground/css/TestEmptyCss.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Empty CSS</h2>
 4 |     <div>
 5 |       &lt;style&gt;: empty style
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <style scoped></style>
11 | <style module></style>
12 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@antfu",
 3 |   "rules": {
 4 |     "react/no-unknown-property": "off",
 5 |   },
 6 |   "overrides": [
 7 |     {
 8 |       "files": "test/**/*.*",
 9 |       "rules": {
10 |         "no-console": "off"
11 |       }
12 |     }
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/src/utils/error.ts:
--------------------------------------------------------------------------------
1 | import type { RollupError } from 'rollup'
2 | 
3 | export function createRollupError(id: string, error: any): RollupError {
4 |   (error as RollupError).id = id
5 |   ;(error as RollupError).plugin = 'vite-plugin-vue2'
6 | 
7 |   return error as RollupError
8 | }
9 | 


--------------------------------------------------------------------------------
/playground/TestDecorator.tsx:
--------------------------------------------------------------------------------
 1 | import type { VNode } from 'vue'
 2 | import { Component, Vue } from 'vue-property-decorator'
 3 | 
 4 | @Component
 5 | export default class TestDecorator extends Vue {
 6 |   render(): VNode {
 7 |     return <div>Decorator works!</div>
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/playground/src-import/TestMultiplySrcImport.vue:
--------------------------------------------------------------------------------
1 | <script src="./script.ts"></script>
2 | <template>
3 |   <div>Multiply .vue file which has same src file reference should works!</div>
4 | </template>
5 | <style src="./style.css" scoped></style>
6 | <style src="./style.css" scoped></style>
7 | 


--------------------------------------------------------------------------------
/playground/css/TestScopedCss.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Scoped CSS</h2>
 4 |     <div class="style-scoped">
 5 |       &lt;style scoped&gt;: only this should be purple
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <style scoped>
11 | div {
12 |   color: rgb(138, 43, 226);
13 | }
14 | </style>
15 | 


--------------------------------------------------------------------------------
/playground/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <link rel="icon" href="/favicon.ico" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Vite App</title>
 8 | </head>
 9 | <body>
10 |   <div id="app"></div>
11 |   <script type="module" src="./main.js"></script>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/playground/hmr/TestHmr.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   data() {
 4 |     return {
 5 |       count: 0,
 6 |     }
 7 |   },
 8 | }
 9 | </script>
10 | 
11 | <template>
12 |   <div>
13 |     <h2>Hot Module Replacement</h2>
14 |     <p>
15 |       <span>
16 |         HMR: click button and edit template part of <code>./TestHmr.vue</code>,
17 |         count should not reset
18 |       </span>
19 |       <button class="hmr-increment" @click="count++">
20 |         &gt;&gt;&gt; {{ count }} &lt;&lt;&lt;
21 |       </button>
22 |     </p>
23 |   </div>
24 | </template>
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2019",
 4 |     "moduleResolution": "node",
 5 |     "strict": true,
 6 |     "declaration": true,
 7 |     "noUnusedLocals": true,
 8 |     "esModuleInterop": true,
 9 |     "strictNullChecks": true,
10 |     "noImplicitAny": true,
11 |     "removeComments": false,
12 |     "jsx": "preserve",
13 |     "experimentalDecorators": true,
14 |     "outDir": "dist",
15 |     "module": "commonjs",
16 |     "lib": ["esnext", "dom"],
17 |     "sourceMap": true
18 |   },
19 |   "include": ["./src", "./index.d.ts"]
20 | }
21 | 


--------------------------------------------------------------------------------
/playground/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vite-vue2-playground",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "description": "",
 6 |   "scripts": {
 7 |     "dev": "vite --debug",
 8 |     "build": "vite build --debug",
 9 |     "serve": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "vue": "^2.6.14",
13 |     "vue-class-component": "^7.2.6",
14 |     "vue-property-decorator": "9.1.2"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/runtime-dom": "^3.2.33",
18 |     "vite": "^2.9.5",
19 |     "vue-template-babel-compiler": "^1.2.0"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/playground/css/TestCssModules.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import imported from './testCssModules.module.css'
 3 | 
 4 | export default {
 5 |   data: () => ({ imported }),
 6 | }
 7 | </script>
 8 | 
 9 | <template>
10 |   <div>
11 |     <h2>CSS Modules</h2>
12 |     <div class="css-modules-sfc" :class="$style.blue">
13 |       &lt;style module&gt; - this should be blue
14 |     </div>
15 |     <div class="css-modules-import" :class="imported.turquoise">
16 |       CSS modules import - this should be orange
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <style module>
22 | .blue {
23 |   color: blue;
24 | }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/src/utils/query.ts:
--------------------------------------------------------------------------------
 1 | import qs from 'querystring'
 2 | 
 3 | export interface VueQuery {
 4 |   vue?: boolean
 5 |   src?: boolean
 6 |   type?: 'script' | 'template' | 'style' | 'custom'
 7 |   index?: number
 8 |   lang?: string
 9 |   raw?: boolean
10 |   from?: string
11 | }
12 | 
13 | export function parseVueRequest(id: string) {
14 |   const [filename, rawQuery] = id.split('?', 2)
15 |   const query = qs.parse(rawQuery) as VueQuery
16 |   if (query.vue != null)
17 |     query.vue = true
18 | 
19 |   if (query.src != null)
20 |     query.src = true
21 | 
22 |   if (query.index != null)
23 |     query.index = Number(query.index)
24 | 
25 |   if (query.raw != null)
26 |     query.raw = true
27 | 
28 |   return {
29 |     filename,
30 |     query,
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/playground/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "target": "ES2019",
 5 |     "moduleResolution": "node",
 6 |     "alwaysStrict": true,
 7 |     "strict": true,
 8 |     "declaration": true,
 9 |     "noUnusedLocals": true,
10 |     "noEmit": true,
11 |     "jsx":"preserve",
12 |     "esModuleInterop": true,
13 |     "strictNullChecks": true,
14 |     "noUncheckedIndexedAccess": true,
15 |     "noImplicitAny": true,
16 |     "removeComments": false,
17 |     "experimentalDecorators": true,
18 |     "module": "ESNext",
19 |     "lib": ["esnext", "dom"],
20 |     "sourceMap": true
21 |   },
22 |   "include": [
23 |     "./",
24 |     "../src",
25 |   ],
26 |   "vueCompilerOptions": {
27 |     "experimentalCompatMode": 2,
28 |     "experimentalTemplateCompilerOptions": {
29 |       "compatConfig": { "Mode": 2 }
30 |     }
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/playground/custom/TestCustomBlock.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'TestCustomBlock',
 4 |   data() {
 5 |     return {
 6 |       custom: '',
 7 |       customLang: '',
 8 |       customSrc: '',
 9 |     }
10 |   },
11 |   created() {
12 |     this.custom = this.$options.__customBlock.custom
13 |     this.customLang = this.$options.__customBlock.customLang
14 |     this.customSrc = this.$options.__customBlock.customSrc
15 |   },
16 | }
17 | </script>
18 | 
19 | <template>
20 |   <div>
21 |     <p class="custom-block">
22 |       {{ custom }}
23 |     </p>
24 |     <p class="custom-block-lang">
25 |       {{ customLang }}
26 |     </p>
27 |     <p class="custom-block-src">
28 |       {{ customSrc }}
29 |     </p>
30 |   </div>
31 | </template>
32 | 
33 | <custom>
34 | export default {
35 |   "custom": "Custom Block"
36 | }
37 | </custom>
38 | 
39 | <custom lang="json">
40 | {
41 |   "customLang": "Custom Block"
42 | }
43 | </custom>
44 | 
45 | <custom src="./custom.json"></custom>
46 | 


--------------------------------------------------------------------------------
/playground/test-assets/TestAssets.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import filepath from './nested/testAssets.png'
 3 | 
 4 | export default {
 5 |   data() {
 6 |     return {
 7 |       filepath,
 8 |     }
 9 |   },
10 | }
11 | </script>
12 | 
13 | <template>
14 |   <div>
15 |     <h2>Static Asset Handling</h2>
16 |     <p class="asset-import">
17 |       Path for assets import from js: <code>{{ filepath }}</code>
18 |     </p>
19 |     <p>
20 |       Relative asset reference in template:
21 |       <img src="./nested/testAssets.png" style="width: 30px;">
22 |     </p>
23 |     <p>
24 |       Alias asset reference in template:
25 |       <img src="/@/test-assets/nested/testAssets.png" style="width: 30px;">
26 |     </p>
27 |     <p>
28 |       Absolute asset reference in template:
29 |       <img src="/favicon.ico" style="width: 30px;">
30 |     </p>
31 |     <p>
32 |       Absolute asset reference without protocol header in the template:
33 |       <img src="//cli.vuejs.org/favicon.png" style="width: 30px;">
34 |     </p>
35 |   </div>
36 | </template>
37 | 


--------------------------------------------------------------------------------
/src/jsxTransform.ts:
--------------------------------------------------------------------------------
 1 | import { transform } from '@babel/core'
 2 | 
 3 | // todo hmr
 4 | export function transformVueJsx(
 5 |   code: string,
 6 |   id: string,
 7 |   jsxOptions?: Record<string, any>,
 8 | ) {
 9 |   const plugins: any[] = [
10 |     [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
11 |     [
12 |       require.resolve('@babel/plugin-proposal-class-properties'),
13 |       { loose: true },
14 |     ],
15 |   ]
16 |   if (/\.tsx$/.test(id)) {
17 |     plugins.unshift([
18 |       require.resolve('@babel/plugin-transform-typescript'),
19 |       { isTSX: true, allowExtensions: true, allowDeclareFields: true },
20 |     ])
21 |   }
22 | 
23 |   const result = transform(code, {
24 |     presets: [[require.resolve('@vue/babel-preset-jsx'), jsxOptions]],
25 |     sourceFileName: id,
26 |     filename: id,
27 |     sourceMaps: true,
28 |     plugins,
29 |     babelrc: false,
30 |     configFile: false,
31 |   })!
32 | 
33 |   return {
34 |     code: result.code as string,
35 |     map: result.map as any,
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/test/unit.spec.ts:
--------------------------------------------------------------------------------
 1 | import path from 'path'
 2 | import fs from 'fs-extra'
 3 | import { transformMain } from '../src/main'
 4 | 
 5 | const fixtureDir = path.join(__dirname, '../playground')
 6 | 
 7 | jest.setTimeout(100000)
 8 | 
 9 | describe('vite-plugin-vue2', () => {
10 |   describe('unit', () => {
11 |     test('should genScriptCode return complete sourcemap when lang=ts', async() => {
12 |       const filePath = path.join(fixtureDir, 'TestTsSFC.vue')
13 |       const code = fs.readFileSync(filePath).toString()
14 |       const { map: scriptMap } = await transformMain(
15 |         code,
16 |         filePath,
17 |         {
18 |           isProduction: false,
19 |           root: fixtureDir,
20 |           // @ts-expect-error need mock if it will be used in the future
21 |           devServer: {},
22 |         },
23 |         {},
24 |       )
25 |       expect(scriptMap).toHaveProperty('file')
26 |       expect(scriptMap).toHaveProperty('sourcesContent')
27 |       expect(scriptMap!.file).toEqual(filePath)
28 |       expect(scriptMap!.sourcesContent).toEqual([code])
29 |     })
30 |   })
31 | })
32 | 


--------------------------------------------------------------------------------
/src/style.ts:
--------------------------------------------------------------------------------
 1 | import type { TransformPluginContext } from 'rollup'
 2 | import type { SFCDescriptor } from '@vue/component-compiler-utils'
 3 | import { compileStyle } from '@vue/component-compiler-utils'
 4 | 
 5 | export async function transformStyle(
 6 |   code: string,
 7 |   filename: string,
 8 |   descriptor: SFCDescriptor,
 9 |   index: number,
10 |   pluginContext: TransformPluginContext,
11 | ) {
12 |   const block = descriptor.styles[index]
13 |   // vite already handles pre-processors and CSS module so this is only
14 |   // applying SFC-specific transforms like scoped mode and CSS vars rewrite (v-bind(var))
15 |   const result = compileStyle({
16 |     source: code,
17 |     filename,
18 |     id: `data-v-${descriptor.id}`,
19 |     map: pluginContext.getCombinedSourcemap(),
20 |     scoped: !!block.scoped,
21 |     trim: true,
22 |   })
23 | 
24 |   if (result.errors.length) {
25 |     result.errors.forEach(error =>
26 |       pluginContext.error({ id: filename, message: error }),
27 |     )
28 |     return null
29 |   }
30 | 
31 |   return {
32 |     code: result.code,
33 |     map: result.map as any,
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/playground/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import { createVuePlugin } from '../src/index'
 3 | 
 4 | const config = defineConfig({
 5 |   resolve: {
 6 |     alias: {
 7 |       '/@': __dirname,
 8 |     },
 9 |   },
10 |   build: {
11 |     sourcemap: true,
12 |     minify: false,
13 |   },
14 |   plugins: [
15 |     createVuePlugin({ jsx: true }),
16 |     {
17 |       name: 'customBlock',
18 |       transform(code, id) {
19 |         if (/type=custom/i.test(id)) {
20 |           const transformedAssginment = code
21 |             .trim()
22 |             .replace(/export default/, 'const __customBlock =')
23 |           return {
24 |             code: `${transformedAssginment}
25 |               export default function (component) {
26 |               const options = component.options;
27 |               if (!options.__customBlock) {
28 |                 options.__customBlock = {};
29 |               }
30 |               Object.assign(options.__customBlock, __customBlock);
31 |             }`,
32 |             map: null,
33 |           }
34 |         }
35 |       },
36 |     },
37 |   ],
38 | })
39 | 
40 | export default config
41 | 


--------------------------------------------------------------------------------
/playground/TestES2020Features.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import Vue from 'vue'
 3 | 
 4 | export default Vue.extend({
 5 |   name: 'TestES2020Features',
 6 | 
 7 |   data() {
 8 |     return {
 9 |       spreadArray: ['s', 'p', 'r', 'ead'],
10 |     }
11 |   },
12 | 
13 |   computed: {
14 |     nullish() {
15 |       return {
16 |         a: {
17 |           d: undefined as unknown as undefined | { e: string },
18 |           b: {
19 |             c: '2',
20 |           },
21 |         },
22 |       }
23 |     },
24 |   },
25 | })
26 | </script>
27 | 
28 | <template>
29 |   <div>
30 |     <h2>ES2020 Features</h2>
31 |     <h3>Nullish Coalescing and Optional Chaining</h3>
32 |     <code>
33 |       [nullish.a.b.c.d ?? 'not found']
34 |       <br>
35 |       //returns {{ nullish.a.d?.e ?? 'not found' }}
36 |       <br>
37 |       <br>
38 |       [nullish.a.b.c ?? 'not found']
39 |       <br>
40 |       //returns {{ nullish.a.b.c ?? 'not found' }}
41 |     </code>
42 |     <h3>Spread Operator</h3>
43 |     <code>
44 |       ["Test", 1, ...('abc').split('')]
45 |       <br>
46 |       //returns {{ ['Test', 1, ...'abc'.split('')] }}
47 |     </code>
48 |   </div>
49 | </template>
50 | 


--------------------------------------------------------------------------------
/playground/App.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import TestMultiplySrcImport from './src-import/TestMultiplySrcImport.vue'
 3 | import TestBlockSrcImport from './src-import/TestBlockSrcImport.vue'
 4 | import TestScopedCss from './css/TestScopedCss.vue'
 5 | import TestCssModules from './css/TestCssModules.vue'
 6 | import TestEmptyCss from './css/TestEmptyCss.vue'
 7 | import TestCustomBlock from './custom/TestCustomBlock.vue'
 8 | import TestHmr from './hmr/TestHmr.vue'
 9 | import TestAssets from './test-assets/TestAssets.vue'
10 | import TestJsx from './TestJsx.tsx'
11 | import TestJsxSFC from './TestJsxSFC.vue'
12 | import TestDecorator from './TestDecorator.tsx'
13 | import TestES2020Features from './TestES2020Features.vue'
14 | 
15 | export default {
16 |   name: 'App',
17 |   components: {
18 |     TestMultiplySrcImport,
19 |     TestScopedCss,
20 |     TestBlockSrcImport,
21 |     TestCssModules,
22 |     TestEmptyCss,
23 |     TestCustomBlock,
24 |     TestHmr,
25 |     TestAssets,
26 |     TestJsx,
27 |     TestJsxSFC,
28 |     TestDecorator,
29 |     TestES2020Features,
30 |   },
31 | }
32 | </script>
33 | 
34 | <template>
35 |   <div>
36 |     <h1>Vite-Plugin-Vue2 Playground</h1>
37 |     <TestMultiplySrcImport />
38 |     <TestBlockSrcImport />
39 |     <TestScopedCss />
40 |     <TestCssModules />
41 |     <TestCustomBlock />
42 |     <TestEmptyCss />
43 |     <TestHmr />
44 |     <TestAssets />
45 |     <TestJsx />
46 |     <TestJsxSFC />
47 |     <TestDecorator />
48 |     <TestES2020Features />
49 |   </div>
50 | </template>
51 | 


--------------------------------------------------------------------------------
/src/template/types.ts:
--------------------------------------------------------------------------------
 1 | import type { SFCDescriptor } from '@vue/component-compiler-utils'
 2 | 
 3 | export interface StartOfSourceMap {
 4 |   file?: string
 5 |   sourceRoot?: string
 6 | }
 7 | 
 8 | export interface RawSourceMap extends StartOfSourceMap {
 9 |   version: string
10 |   sources: string[]
11 |   names: string[]
12 |   sourcesContent?: string[]
13 |   mappings: string
14 | }
15 | 
16 | export interface VueTemplateCompiler {
17 |   parseComponent(source: string, options?: any): SFCDescriptor
18 | 
19 |   compile(
20 |     template: string,
21 |     options: VueTemplateCompilerOptions
22 |   ): VueTemplateCompilerResults
23 | 
24 |   ssrCompile(
25 |     template: string,
26 |     options: VueTemplateCompilerOptions
27 |   ): VueTemplateCompilerResults
28 | }
29 | 
30 | // we'll just shim this much for now - in the future these types
31 | // should come from vue-template-compiler directly, or this package should be
32 | // part of the vue monorepo.
33 | export interface VueTemplateCompilerOptions {
34 |   modules?: Object[]
35 |   outputSourceRange?: boolean
36 |   whitespace?: 'preserve' | 'condense'
37 |   directives?: Record<string, Function>
38 | }
39 | 
40 | export interface VueTemplateCompilerParseOptions {
41 |   pad?: 'line' | 'space'
42 | }
43 | 
44 | export interface ErrorWithRange {
45 |   msg: string
46 |   start: number
47 |   end: number
48 | }
49 | 
50 | export interface VueTemplateCompilerResults {
51 |   ast: Object | undefined
52 |   render: string
53 |   staticRenderFns: string[]
54 |   errors: (string | ErrorWithRange)[]
55 |   tips: (string | ErrorWithRange)[]
56 | }
57 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - master
 7 | 
 8 |   pull_request:
 9 |     branches:
10 |       - master
11 | 
12 | jobs:
13 |   lint:
14 |     runs-on: ubuntu-latest
15 |     steps:
16 |       - uses: actions/checkout@v2
17 | 
18 |       - name: Install pnpm
19 |         uses: pnpm/action-setup@v2.2.1
20 | 
21 |       - name: Set node
22 |         uses: actions/setup-node@v2
23 |         with:
24 |           node-version: 16.x
25 |           cache: pnpm
26 | 
27 |       - name: Setup
28 |         run: npm i -g @antfu/ni
29 | 
30 |       - name: Install
31 |         run: nci
32 | 
33 |       - name: Lint
34 |         run: nr lint
35 | 
36 |   typecheck:
37 |     runs-on: ubuntu-latest
38 |     steps:
39 |       - uses: actions/checkout@v2
40 | 
41 |       - name: Install pnpm
42 |         uses: pnpm/action-setup@v2.2.1
43 | 
44 |       - name: Set node
45 |         uses: actions/setup-node@v2
46 |         with:
47 |           node-version: 16.x
48 |           cache: pnpm
49 | 
50 |       - name: Setup
51 |         run: npm i -g @antfu/ni
52 | 
53 |       - name: Install
54 |         run: nci
55 | 
56 |       - name: Typecheck
57 |         run: nr typecheck
58 | 
59 |   test:
60 |     runs-on: ${{ matrix.os }}
61 | 
62 |     strategy:
63 |       matrix:
64 |         node: [14.x, 16.x]
65 |         os: [ubuntu-latest, windows-latest, macos-latest]
66 |       fail-fast: false
67 | 
68 |     steps:
69 |       - uses: actions/checkout@v2
70 | 
71 |       - name: Install pnpm
72 |         uses: pnpm/action-setup@v2.2.1
73 | 
74 |       - name: Set node version to ${{ matrix.node }}
75 |         uses: actions/setup-node@v2
76 |         with:
77 |           node-version: ${{ matrix.node }}
78 |           cache: pnpm
79 | 
80 |       - name: Setup
81 |         run: npm i -g @antfu/ni
82 | 
83 |       - name: Install
84 |         run: nci
85 | 
86 |       - name: Build
87 |         run: nr build
88 | 
89 |       - name: Test
90 |         run: nr test
91 | 


--------------------------------------------------------------------------------
/README.MD:
--------------------------------------------------------------------------------
 1 | # vite-plugin-vue2
 2 | 
 3 | [![NPM version](https://img.shields.io/npm/v/vite-plugin-vue2?color=a1b858&label=)](https://www.npmjs.com/package/vite-plugin-vue2)
 4 | 
 5 | > ⚠️ With the release of [Vue 2.7](https://blog.vuejs.org/posts/vue-2-7-naruto.html), Vite now provides the official Vue 2 plugin [`@vitejs/plugin-vue2`](https://github.com/vitejs/vite-plugin-vue2). Thereby this plugin will only support Vue 2.6 or earlier. **This project is reached End of Life by the end of 2022**.
 6 | 
 7 | ## Install
 8 | 
 9 | ```bash
10 | npm install vite-plugin-vue2 -D
11 | ```
12 | 
13 | ```js
14 | // vite.config.js
15 | import { createVuePlugin } from 'vite-plugin-vue2'
16 | 
17 | export default {
18 |   plugins: [
19 |     createVuePlugin(/* options */)
20 |   ],
21 | }
22 | ```
23 | 
24 | ## [Options](https://github.com/underfin/vite-plugin-vue2/blob/master/src/index.ts#L26)
25 | 
26 | ### `vueTemplateOptions`
27 | 
28 | Type: `Object`<br>
29 | 
30 | Default: `{ compilerOptions :{ whitespace: 'condense' }   }`
31 | 
32 | **Note {  whitespace: 'condense' } behavior**
33 | 
34 | * A whitespace-only text node between element tags is removed if it contains new lines. Otherwise, it is condensed into a single space.
35 | 
36 | * Consecutive whitespaces inside a non-whitespace-only text node are condensed into a single space.
37 | 
38 | 
39 | Using condense mode will result in smaller compiled code size and slightly improved performance. However, it will produce minor visual layout differences compared to plain HTML in certain cases,if you want to keep whitespace  behavior, please set `{ whitespace: 'preserve' }`
40 | 
41 | The options for `@vue/component-compiler-utils`.
42 | 
43 | ### `jsx`
44 | 
45 | Type: `Boolean`<br>
46 | Default: `false`
47 | 
48 | The options for jsx transform.
49 | 
50 | ### `jsxOptions`
51 | 
52 | Type: `Object`<br>
53 | 
54 | The options for `@vue/babel-preset-jsx`.
55 | 
56 | ### `target`
57 | 
58 | Type: `String`<br>
59 | 
60 | The options for esbuild to transform script code
61 | 
62 | ## Todo
63 | 
64 | - SSR Build
65 | - Sourcemap
66 | 


--------------------------------------------------------------------------------
/src/utils/descriptorCache.ts:
--------------------------------------------------------------------------------
 1 | import path from 'path'
 2 | import slash from 'slash'
 3 | import hash from 'hash-sum'
 4 | import type { SFCDescriptor } from '@vue/component-compiler-utils'
 5 | import { parse } from '@vue/component-compiler-utils'
 6 | import * as vueTemplateCompiler from 'vue-template-compiler'
 7 | import type { ResolvedOptions } from '../index'
 8 | 
 9 | const cache = new Map<string, SFCDescriptor>()
10 | const prevCache = new Map<string, SFCDescriptor | undefined>()
11 | 
12 | export function createDescriptor(
13 |   source: string,
14 |   filename: string,
15 |   { root, isProduction, vueTemplateOptions }: ResolvedOptions,
16 | ) {
17 |   const descriptor = parse({
18 |     source,
19 |     compiler: vueTemplateOptions?.compiler || (vueTemplateCompiler as any),
20 |     filename,
21 |     sourceRoot: root,
22 |     needMap: true,
23 |   })
24 |   // v2 hasn't generate template and customBlocks map
25 |   // ensure the path is normalized in a way that is consistent inside
26 |   // project (relative to root) and on different systems.
27 |   const normalizedPath = slash(path.normalize(path.relative(root, filename)))
28 |   descriptor.id = hash(normalizedPath + (isProduction ? source : ''))
29 | 
30 |   cache.set(slash(filename), descriptor)
31 |   return descriptor
32 | }
33 | 
34 | export function getPrevDescriptor(filename: string) {
35 |   return prevCache.get(slash(filename))
36 | }
37 | 
38 | export function setPrevDescriptor(filename: string, entry: SFCDescriptor) {
39 |   prevCache.set(slash(filename), entry)
40 | }
41 | 
42 | export function getDescriptor(filename: string, errorOnMissing = true) {
43 |   const descriptor = cache.get(slash(filename))
44 |   if (descriptor)
45 |     return descriptor
46 | 
47 |   if (errorOnMissing) {
48 |     throw new Error(
49 |       `${filename} has no corresponding SFC entry in the cache. `
50 |         + 'This is a vite-plugin-vue2 internal error, please open an issue.',
51 |     )
52 |   }
53 | }
54 | 
55 | export function setDescriptor(filename: string, entry: SFCDescriptor) {
56 |   cache.set(slash(filename), entry)
57 | }
58 | 


--------------------------------------------------------------------------------
/src/utils/rewriteDefault.ts:
--------------------------------------------------------------------------------
 1 | import type { ParserPlugin } from '@babel/parser'
 2 | import { parse } from '@babel/parser'
 3 | import MagicString from 'magic-string'
 4 | 
 5 | const defaultExportRE = /((?:^|\n|;)\s*)export(\s*)default/
 6 | const namedDefaultExportRE = /((?:^|\n|;)\s*)export(.+)as(\s*)default/
 7 | 
 8 | /**
 9 |  * Utility for rewriting `export default` in a script block into a variable
10 |  * declaration so that we can inject things into it
11 |  */
12 | export function rewriteDefault(
13 |   input: string,
14 |   as: string,
15 |   parserPlugins?: ParserPlugin[],
16 | ): string {
17 |   if (!hasDefaultExport(input))
18 |     return `${input}\nconst ${as} = {}`
19 | 
20 |   const replaced = input.replace(defaultExportRE, `$1const ${as} =`)
21 |   if (!hasDefaultExport(replaced))
22 |     return replaced
23 | 
24 |   // if the script somehow still contains `default export`, it probably has
25 |   // multi-line comments or template strings. fallback to a full parse.
26 |   const s = new MagicString(input)
27 |   const ast = parse(input, {
28 |     sourceType: 'module',
29 |     plugins: parserPlugins,
30 |   }).program.body
31 |   ast.forEach((node) => {
32 |     if (node.type === 'ExportDefaultDeclaration')
33 |       s.overwrite(node.start!, node.declaration.start!, `const ${as} = `)
34 | 
35 |     if (node.type === 'ExportNamedDeclaration') {
36 |       node.specifiers.forEach((specifier) => {
37 |         if (
38 |           specifier.type === 'ExportSpecifier'
39 |           && specifier.exported.type === 'Identifier'
40 |           && specifier.exported.name === 'default'
41 |         ) {
42 |           const end = specifier.end!
43 |           s.overwrite(
44 |             specifier.start!,
45 |             input.charAt(end) === ',' ? end + 1 : end,
46 |             '',
47 |           )
48 |           s.append(`\nconst ${as} = ${specifier.local.name}`)
49 |         }
50 |       })
51 |     }
52 |   })
53 |   return s.toString()
54 | }
55 | 
56 | export function hasDefaultExport(input: string): boolean {
57 |   return defaultExportRE.test(input) || namedDefaultExportRE.test(input)
58 | }
59 | 


--------------------------------------------------------------------------------
/src/template/assetUrl.ts:
--------------------------------------------------------------------------------
 1 | // vue compiler module for transforming `<tag>:<attribute>` to `require`
 2 | 
 3 | import type { ASTNode, Attr } from './utils'
 4 | import { urlToRequire } from './utils'
 5 | 
 6 | export type AssetURLOptions = Record<string, string | string[]>
 7 | 
 8 | export interface TransformAssetUrlsOptions {
 9 |   /**
10 |    * @deprecated
11 |    * If base is provided, instead of transforming relative asset urls into
12 |    * imports, they will be directly rewritten to absolute urls.
13 |    */
14 |   base?: string
15 |   forceRequire?: boolean
16 | }
17 | 
18 | const defaultOptions: AssetURLOptions = {
19 |   audio: 'src',
20 |   video: ['src', 'poster'],
21 |   source: 'src',
22 |   img: 'src',
23 |   image: ['xlink:href', 'href'],
24 |   use: ['xlink:href', 'href'],
25 | }
26 | 
27 | export default (
28 |   userOptions?: AssetURLOptions,
29 |   transformAssetUrlsOption?: TransformAssetUrlsOptions,
30 | ) => {
31 |   const options = userOptions
32 |     ? Object.assign({}, defaultOptions, userOptions)
33 |     : defaultOptions
34 | 
35 |   return {
36 |     postTransformNode: (node: ASTNode) => {
37 |       transform(node, options, transformAssetUrlsOption)
38 |     },
39 |   }
40 | }
41 | 
42 | function transform(
43 |   node: ASTNode,
44 |   options: AssetURLOptions,
45 |   transformAssetUrlsOption?: TransformAssetUrlsOptions,
46 | ) {
47 |   for (const tag in options) {
48 |     if ((tag === '*' || node.tag === tag) && node.attrs) {
49 |       const attributes = options[tag]
50 |       if (typeof attributes === 'string') {
51 |         node.attrs.some(attr =>
52 |           rewrite(attr, attributes, transformAssetUrlsOption),
53 |         )
54 |       }
55 |       else if (Array.isArray(attributes)) {
56 |         attributes.forEach(item =>
57 |           node.attrs.some(attr =>
58 |             rewrite(attr, item, transformAssetUrlsOption),
59 |           ),
60 |         )
61 |       }
62 |     }
63 |   }
64 | }
65 | 
66 | function rewrite(
67 |   attr: Attr,
68 |   name: string,
69 |   transformAssetUrlsOption?: TransformAssetUrlsOptions,
70 | ) {
71 |   if (attr.name === name) {
72 |     const value = attr.value
73 |     // only transform static URLs
74 |     if (value.charAt(0) === '"' && value.charAt(value.length - 1) === '"') {
75 |       attr.value = urlToRequire(value.slice(1, -1), transformAssetUrlsOption)
76 |       return true
77 |     }
78 |   }
79 |   return false
80 | }
81 | 


--------------------------------------------------------------------------------
/src/template/srcset.ts:
--------------------------------------------------------------------------------
 1 | // vue compiler module for transforming `img:srcset` to a number of `require`s
 2 | 
 3 | import type { ASTNode } from './utils'
 4 | import { urlToRequire } from './utils'
 5 | import type { TransformAssetUrlsOptions } from './assetUrl'
 6 | 
 7 | interface ImageCandidate {
 8 |   require: string
 9 |   descriptor: string
10 | }
11 | 
12 | export default (transformAssetUrlsOptions?: TransformAssetUrlsOptions) => ({
13 |   postTransformNode: (node: ASTNode) => {
14 |     transform(node, transformAssetUrlsOptions)
15 |   },
16 | })
17 | 
18 | // http://w3c.github.io/html/semantics-embedded-content.html#ref-for-image-candidate-string-5
19 | const escapedSpaceCharacters = /( |\\t|\\n|\\f|\\r)+/g
20 | 
21 | function transform(
22 |   node: ASTNode,
23 |   transformAssetUrlsOptions?: TransformAssetUrlsOptions,
24 | ) {
25 |   const tags = ['img', 'source']
26 | 
27 |   if (tags.includes(node.tag) && node.attrs) {
28 |     node.attrs.forEach((attr) => {
29 |       if (attr.name === 'srcset') {
30 |         // same logic as in transform-require.js
31 |         const value = attr.value
32 |         if (value === '""')
33 |           return
34 | 
35 |         const isStatic
36 |           = value.charAt(0) === '"' && value.charAt(value.length - 1) === '"'
37 |         if (!isStatic)
38 |           return
39 | 
40 |         const imageCandidates: ImageCandidate[] = value
41 |           .substr(1, value.length - 2)
42 |           .split(',')
43 |           .map((s) => {
44 |             // The attribute value arrives here with all whitespace, except
45 |             // normal spaces, represented by escape sequences
46 |             const [url, descriptor] = s
47 |               .replace(escapedSpaceCharacters, ' ')
48 |               .trim()
49 |               .split(' ', 2)
50 |             return {
51 |               require: urlToRequire(url, transformAssetUrlsOptions),
52 |               descriptor,
53 |             }
54 |           })
55 | 
56 |         // "require(url1)"
57 |         // "require(url1) 1x"
58 |         // "require(url1), require(url2)"
59 |         // "require(url1), require(url2) 2x"
60 |         // "require(url1) 1x, require(url2)"
61 |         // "require(url1) 1x, require(url2) 2x"
62 |         const code = imageCandidates
63 |           .map(
64 |             ({ require, descriptor }) =>
65 |               `${require} + "${descriptor ? ` ${descriptor}` : ''}, " + `,
66 |           )
67 |           .join('')
68 |           .slice(0, -6)
69 |           .concat('"')
70 |           .replace(/ \+ ""$/, '')
71 | 
72 |         attr.value = code
73 |       }
74 |     })
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/src/template/utils.ts:
--------------------------------------------------------------------------------
 1 | import type { UrlWithStringQuery } from 'url'
 2 | // eslint-disable-next-line n/no-deprecated-api
 3 | import { parse as uriParse } from 'url'
 4 | import type { TransformAssetUrlsOptions } from './assetUrl'
 5 | 
 6 | export interface Attr {
 7 |   name: string
 8 |   value: string
 9 | }
10 | 
11 | export interface ASTNode {
12 |   tag: string
13 |   attrs: Attr[]
14 | }
15 | 
16 | export function urlToRequire(
17 |   url: string,
18 |   transformAssetUrlsOption: TransformAssetUrlsOptions = {},
19 | ): string {
20 |   const returnValue = `"${url}"`
21 |   if (
22 |     isExternalUrl(url)
23 |     || isDataUrl(url)
24 |     || isHashUrl(url)
25 |     || isAbsolute(url)
26 |   )
27 |     return returnValue
28 | 
29 |   // same logic as in transform-require.js
30 |   const firstChar = url.charAt(0)
31 |   if (firstChar === '~') {
32 |     const secondChar = url.charAt(1)
33 |     url = url.slice(secondChar === '/' ? 2 : 1)
34 |   }
35 | 
36 |   const uriParts = parseUriParts(url)
37 | 
38 |   if (
39 |     firstChar === '.'
40 |     || firstChar === '~'
41 |     || firstChar === '@'
42 |     || transformAssetUrlsOption.forceRequire
43 |   ) {
44 |     if (!uriParts.hash) {
45 |       return `require("${url}")`
46 |     }
47 |     else {
48 |       // support uri fragment case by excluding it from
49 |       // the require and instead appending it as string;
50 |       // assuming that the path part is sufficient according to
51 |       // the above caseing(t.i. no protocol-auth-host parts expected)
52 |       return `require("${uriParts.path}") + "${uriParts.hash}"`
53 |     }
54 |   }
55 |   return returnValue
56 | }
57 | 
58 | export function isHashUrl(url: string): boolean {
59 |   return url.startsWith('#')
60 | }
61 | 
62 | const externalRE = /^(https?:)?\/\//
63 | export function isExternalUrl(url: string): boolean {
64 |   return externalRE.test(url)
65 | }
66 | 
67 | const dataUrlRE = /^\s*data:/i
68 | export function isDataUrl(url: string): boolean {
69 |   return dataUrlRE.test(url)
70 | }
71 | 
72 | export function isAbsolute(url: string): boolean {
73 |   return url.startsWith('/')
74 | }
75 | 
76 | /**
77 |  * vuejs/component-compiler-utils#22 Support uri fragment in transformed require
78 |  * @param urlString an url as a string
79 |  */
80 | function parseUriParts(urlString: string): UrlWithStringQuery {
81 |   // initialize return value
82 |   const returnValue: UrlWithStringQuery = uriParse('')
83 |   if (urlString) {
84 |     // A TypeError is thrown if urlString is not a string
85 |     // @see https://nodejs.org/api/url.html#url_url_parse_urlstring_parsequerystring_slashesdenotehost
86 |     if (typeof urlString === 'string') {
87 |       // check is an uri
88 |       return uriParse(urlString) // take apart the uri
89 |     }
90 |   }
91 |   return returnValue
92 | }
93 | 


--------------------------------------------------------------------------------
/src/template.ts:
--------------------------------------------------------------------------------
 1 | import type { SFCBlock } from '@vue/component-compiler-utils'
 2 | import * as vueTemplateCompiler from 'vue-template-compiler'
 3 | import type { TransformPluginContext } from 'rollup'
 4 | import hash from 'hash-sum'
 5 | import { createRollupError } from './utils/error'
 6 | import { compileTemplate } from './template/compileTemplate'
 7 | import type { ResolvedOptions } from './index'
 8 | 
 9 | export function compileSFCTemplate(
10 |   source: string,
11 |   block: SFCBlock,
12 |   filename: string,
13 |   { isProduction, vueTemplateOptions = {} }: ResolvedOptions,
14 |   pluginContext: TransformPluginContext,
15 | ) {
16 |   const { tips, errors, code } = compileTemplate({
17 |     source,
18 |     filename,
19 |     compiler: vueTemplateCompiler as any,
20 |     transformAssetUrls: true,
21 |     transformAssetUrlsOptions: {
22 |       forceRequire: true,
23 |     },
24 |     isProduction,
25 |     isFunctional: !!block.attrs.functional,
26 |     optimizeSSR: false,
27 |     prettify: false,
28 |     preprocessLang: block.lang,
29 |     ...vueTemplateOptions,
30 |     compilerOptions: {
31 |       whitespace: 'condense',
32 |       ...(vueTemplateOptions.compilerOptions || {}),
33 |     },
34 |   })
35 | 
36 |   if (tips) {
37 |     tips.forEach(warn =>
38 |       pluginContext.warn({
39 |         id: filename,
40 |         message: typeof warn === 'string' ? warn : warn.msg,
41 |       }),
42 |     )
43 |   }
44 | 
45 |   if (errors) {
46 |     const generateCodeFrame = (vueTemplateCompiler as any).generateCodeFrame
47 |     errors.forEach((error) => {
48 |       // 2.6 compiler outputs errors as objects with range
49 |       if (
50 |         generateCodeFrame
51 |         && vueTemplateOptions.compilerOptions?.outputSourceRange
52 |       ) {
53 |         const { msg, start, end } = error as vueTemplateCompiler.ErrorWithRange
54 |         return pluginContext.error(
55 |           createRollupError(filename, {
56 |             message: msg,
57 |             frame: generateCodeFrame(source, start, end),
58 |           }),
59 |         )
60 |       }
61 |       else {
62 |         pluginContext.error({
63 |           id: filename,
64 |           message: typeof error === 'string' ? error : error.msg,
65 |         })
66 |       }
67 |     })
68 |   }
69 | 
70 |   // rewrite require calls to import on build
71 |   return {
72 |     code:
73 |       `${transformRequireToImport(code)}\nexport { render, staticRenderFns }`,
74 |     map: null,
75 |   }
76 | }
77 | 
78 | export function transformRequireToImport(code: string): string {
79 |   const imports: Record<string, string> = {}
80 |   let strImports = ''
81 | 
82 |   code = code.replace(
83 |     /require\(("(?:[^"\\]|\\.)+"|'(?:[^'\\]|\\.)+')\)/g,
84 |     (_, name): any => {
85 |       if (!(name in imports)) {
86 |         // #81 compat unicode assets name
87 |         imports[name] = `__$_require_${hash(name)}__`
88 |         strImports += `import ${imports[name]} from ${name}\n`
89 |       }
90 | 
91 |       return imports[name]
92 |     },
93 |   )
94 | 
95 |   return strImports + code
96 | }
97 | 


--------------------------------------------------------------------------------
/src/utils/componentNormalizer.ts:
--------------------------------------------------------------------------------
 1 | // IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
 2 | // This module is a runtime utility for cleaner component module output and will
 3 | // be included in the final webpack user bundle.
 4 | export const normalizeComponentCode = `
 5 | export default function normalizeComponent (
 6 |     scriptExports,
 7 |     render,
 8 |     staticRenderFns,
 9 |     functionalTemplate,
10 |     injectStyles,
11 |     scopeId,
12 |     moduleIdentifier, /* server only */
13 |     shadowMode /* vue-cli only */
14 | ) {
15 |   // Vue.extend constructor export interop
16 |   var options = typeof scriptExports === 'function'
17 |       ? scriptExports.options
18 |       : scriptExports
19 | 
20 |   // render functions
21 |   if (render) {
22 |     options.render = render
23 |     options.staticRenderFns = staticRenderFns
24 |     options._compiled = true
25 |   }
26 | 
27 |   // functional template
28 |   if (functionalTemplate) {
29 |     options.functional = true
30 |   }
31 | 
32 |   // scopedId
33 |   if (scopeId) {
34 |     options._scopeId = 'data-v-' + scopeId
35 |   }
36 | 
37 |   var hook
38 |   if (moduleIdentifier) { // server build
39 |     hook = function (context) {
40 |       // 2.3 injection
41 |       context =
42 |           context || // cached call
43 |           (this.$vnode && this.$vnode.ssrContext) || // stateful
44 |           (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
45 |       // 2.2 with runInNewContext: true
46 |       if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
47 |         context = __VUE_SSR_CONTEXT__
48 |       }
49 |       // inject component styles
50 |       if (injectStyles) {
51 |         injectStyles.call(this, context)
52 |       }
53 |       // register component module identifier for async chunk inferrence
54 |       if (context && context._registeredComponents) {
55 |         context._registeredComponents.add(moduleIdentifier)
56 |       }
57 |     }
58 |     // used by ssr in case component is cached and beforeCreate
59 |     // never gets called
60 |     options._ssrRegister = hook
61 |   } else if (injectStyles) {
62 |     hook = shadowMode
63 |         ? function () {
64 |           injectStyles.call(
65 |               this,
66 |               (options.functional ? this.parent : this).$root.$options.shadowRoot
67 |           )
68 |         }
69 |         : injectStyles
70 |   }
71 | 
72 |   if (hook) {
73 |     if (options.functional) {
74 |       // for template-only hot-reload because in that case the render fn doesn't
75 |       // go through the normalizer
76 |       options._injectStyles = hook
77 |       // register for functional component in vue file
78 |       var originalRender = options.render
79 |       options.render = function renderWithStyleInjection (h, context) {
80 |         hook.call(context)
81 |         return originalRender(h, context)
82 |       }
83 |     } else {
84 |       // inject component registration as beforeCreate hook
85 |       var existing = options.beforeCreate
86 |       options.beforeCreate = existing
87 |           ? [].concat(existing, hook)
88 |           : [hook]
89 |     }
90 |   }
91 | 
92 |   return {
93 |     exports: scriptExports,
94 |     options: options
95 |   }
96 | }`
97 | 


--------------------------------------------------------------------------------
/test/util.ts:
--------------------------------------------------------------------------------
  1 | import path from 'path'
  2 | import fs from 'fs-extra'
  3 | import execa from 'execa'
  4 | import type { ElementHandle } from 'puppeteer'
  5 | import puppeteer from 'puppeteer'
  6 | 
  7 | let devServer: any
  8 | let browser: puppeteer.Browser
  9 | let page: puppeteer.Page
 10 | let binPath: string
 11 | const fixtureDir = path.join(__dirname, '../playground')
 12 | const tempDir = path.join(__dirname, '../temp')
 13 | 
 14 | export async function preTest() {
 15 |   try {
 16 |     await fs.remove(tempDir)
 17 |   }
 18 |   catch (e) {}
 19 |   await fs.copy(fixtureDir, tempDir)
 20 |   binPath = path.resolve(tempDir, './node_modules/vite/bin/vite.js')
 21 | 
 22 |   await build()
 23 | }
 24 | 
 25 | async function build() {
 26 |   console.log('building...')
 27 |   const buildOutput = await execa(binPath, ['build'], {
 28 |     cwd: tempDir,
 29 |   })
 30 |   expect(buildOutput.stderr).toBe('')
 31 |   console.log('build complete. running build tests...')
 32 | }
 33 | 
 34 | export async function postTest() {
 35 |   try {
 36 |     await fs.remove(tempDir)
 37 |   }
 38 |   catch (e) {}
 39 | }
 40 | 
 41 | export async function startServer(isBuild: boolean) {
 42 |   // start dev server
 43 |   devServer = execa(binPath, {
 44 |     cwd: isBuild ? path.join(tempDir, '/dist') : tempDir,
 45 |   })
 46 | 
 47 |   browser = await puppeteer.launch({
 48 |     args: ['--no-sandbox', '--disable-setuid-sandbox'],
 49 |     // Enable if puppeteer can't detect chrome's path on MacOS
 50 |     // executablePath:
 51 |     // '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
 52 |   })
 53 | 
 54 |   await new Promise((resolve) => {
 55 |     devServer.stdout.on('data', (data: Buffer) => {
 56 |       if (data.toString().match('running')) {
 57 |         console.log('dev server running.')
 58 |         resolve('')
 59 |       }
 60 |     })
 61 |   })
 62 | 
 63 |   console.log('launching browser')
 64 |   page = await browser.newPage()
 65 |   await page.goto('http://localhost:3000')
 66 |   return page
 67 | }
 68 | 
 69 | export async function killServer() {
 70 |   if (browser)
 71 |     await browser.close()
 72 |   if (devServer) {
 73 |     devServer.kill('SIGTERM', {
 74 |       forceKillAfterTimeout: 2000,
 75 |     })
 76 |   }
 77 | }
 78 | 
 79 | export async function getEl(selectorOrEl: string | ElementHandle) {
 80 |   return typeof selectorOrEl === 'string'
 81 |     ? await page.$(selectorOrEl)
 82 |     : selectorOrEl
 83 | }
 84 | 
 85 | export async function getText(selectorOrEl: string | ElementHandle) {
 86 |   const el = await getEl(selectorOrEl)
 87 |   return el ? el.evaluate(el => el.textContent) : null
 88 | }
 89 | 
 90 | export async function getComputedColor(selectorOrEl: string | ElementHandle) {
 91 |   return (await getEl(selectorOrEl))!.evaluate(
 92 |     el => getComputedStyle(el).color,
 93 |   )
 94 | }
 95 | 
 96 | export const timeout = (n: number) => new Promise(resolve => setTimeout(resolve, n))
 97 | 
 98 | export async function updateFile(file: string, replacer: (content: string) => void) {
 99 |   const compPath = path.join(tempDir, file)
100 |   const content = await fs.readFile(compPath, 'utf-8')
101 |   await fs.writeFile(compPath, replacer(content))
102 | }
103 | 
104 | // poll until it updates
105 | export async function expectByPolling(poll: () => Promise<any>, expected: any) {
106 |   const maxTries = 100
107 |   for (let tries = 0; tries < maxTries; tries++) {
108 |     const actual = (await poll()) || ''
109 |     if (actual.includes(expected) || tries === maxTries - 1) {
110 |       expect(actual).toMatch(expected)
111 |       break
112 |     }
113 |     else {
114 |       await timeout(50)
115 |     }
116 |   }
117 | }
118 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "vite-plugin-vue2",
  3 |   "version": "2.0.3",
  4 |   "packageManager": "pnpm@7.13.4",
  5 |   "description": "Vite plugin for Vue2",
  6 |   "keywords": [
  7 |     "vite",
  8 |     "vue2"
  9 |   ],
 10 |   "license": "MIT",
 11 |   "author": "underfin",
 12 |   "repository": {
 13 |     "type": "git",
 14 |     "url": "git+https://github.com/underfin/vite-plugin-vue2"
 15 |   },
 16 |   "main": "dist/index.js",
 17 |   "files": [
 18 |     "dist"
 19 |   ],
 20 |   "scripts": {
 21 |     "dev": "tsc -w -p . --incremental --skipLibCheck",
 22 |     "play": "npm -C playground run dev",
 23 |     "test": "jest --clearCache && jest --runInBand --forceExit",
 24 |     "build": "rm -rf dist && tsc -p . --skipLibCheck",
 25 |     "release": "bumpp -x 'npm run changelog' --all --push --commit --tag && npm publish",
 26 |     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
 27 |     "prepublishOnly": "npm run build",
 28 |     "lint": "eslint .",
 29 |     "typecheck": "tsc --noEmit"
 30 |   },
 31 |   "bugs": {
 32 |     "url": "https://github.com/underfin/vite-plugin-vue2/issues"
 33 |   },
 34 |   "homepage": "https://github.com/underfin/vite-plugin-vue2/tree/master/#readme",
 35 |   "gitHooks": {
 36 |     "pre-commit": "lint-staged"
 37 |   },
 38 |   "peerDependencies": {
 39 |     "vite": "^2.0.0 || ^3.0.0 || ^4.0.0",
 40 |     "vue-template-compiler": "^2.2.0"
 41 |   },
 42 |   "dependencies": {
 43 |     "@babel/core": "^7.17.9",
 44 |     "@babel/parser": "^7.17.9",
 45 |     "@babel/plugin-proposal-class-properties": "^7.16.7",
 46 |     "@babel/plugin-proposal-decorators": "^7.17.9",
 47 |     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
 48 |     "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
 49 |     "@babel/plugin-proposal-optional-chaining": "^7.16.7",
 50 |     "@babel/plugin-transform-arrow-functions": "^7.16.7",
 51 |     "@babel/plugin-transform-block-scoping": "^7.16.7",
 52 |     "@babel/plugin-transform-computed-properties": "^7.16.7",
 53 |     "@babel/plugin-transform-destructuring": "^7.17.7",
 54 |     "@babel/plugin-transform-parameters": "^7.16.7",
 55 |     "@babel/plugin-transform-spread": "^7.16.7",
 56 |     "@babel/plugin-transform-typescript": "^7.16.8",
 57 |     "@rollup/pluginutils": "^4.2.1",
 58 |     "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
 59 |     "@vue/babel-preset-jsx": "^1.2.4",
 60 |     "@vue/component-compiler-utils": "^3.3.0",
 61 |     "consolidate": "^0.16.0",
 62 |     "debug": "^4.3.4",
 63 |     "fs-extra": "^10.1.0",
 64 |     "hash-sum": "^2.0.0",
 65 |     "magic-string": "^0.26.1",
 66 |     "prettier": "^2.6.2",
 67 |     "querystring": "^0.2.1",
 68 |     "rollup": "^2.70.2",
 69 |     "slash": "^3.0.0",
 70 |     "source-map": "^0.7.3",
 71 |     "vue-template-babel-compiler": "^1.2.0"
 72 |   },
 73 |   "devDependencies": {
 74 |     "@antfu/eslint-config": "^0.20.7",
 75 |     "@types/babel__core": "^7.1.20",
 76 |     "@types/consolidate": "^0.14.1",
 77 |     "@types/debug": "^4.1.7",
 78 |     "@types/estree": "^0.0.51",
 79 |     "@types/fs-extra": "^9.0.13",
 80 |     "@types/hash-sum": "^1.0.0",
 81 |     "@types/jest": "^27.4.1",
 82 |     "@types/node": "^17.0.25",
 83 |     "@types/puppeteer": "^5.4.5",
 84 |     "bumpp": "^7.1.1",
 85 |     "conventional-changelog-cli": "^2.2.2",
 86 |     "eslint": "^8.14.0",
 87 |     "execa": "^5.1.1",
 88 |     "jest": "^27.5.1",
 89 |     "lint-staged": "^12.4.0",
 90 |     "puppeteer": "^13.6.0",
 91 |     "ts-jest": "^27.1.4",
 92 |     "typescript": "^4.6.3",
 93 |     "vite": "^2.9.5",
 94 |     "vue-template-compiler": "^2.6.14",
 95 |     "yorkie": "^2.0.0"
 96 |   },
 97 |   "lint-staged": {
 98 |     "*.{js,ts}": [
 99 |       "eslint --fix"
100 |     ]
101 |   }
102 | }
103 | 


--------------------------------------------------------------------------------
/test/e2e.spec.ts:
--------------------------------------------------------------------------------
  1 | import type puppeteer from 'puppeteer'
  2 | import {
  3 |   expectByPolling,
  4 |   getComputedColor,
  5 |   getEl,
  6 |   getText,
  7 |   killServer,
  8 |   postTest,
  9 |   preTest,
 10 |   startServer,
 11 |   updateFile,
 12 | } from './util'
 13 | 
 14 | jest.setTimeout(100000)
 15 | 
 16 | beforeAll(async() => {
 17 |   await preTest()
 18 | })
 19 | 
 20 | afterAll(postTest)
 21 | 
 22 | describe('vite-plugin-vue2', () => {
 23 |   describe('dev', () => {
 24 |     declareTests(false)
 25 |   })
 26 | 
 27 |   describe('build', () => {
 28 |     declareTests(true)
 29 |   })
 30 | })
 31 | 
 32 | export function declareTests(isBuild: boolean) {
 33 |   let page: puppeteer.Page = undefined!
 34 | 
 35 |   beforeAll(async() => {
 36 |     page = await startServer(isBuild)
 37 |   })
 38 | 
 39 |   afterAll(async() => {
 40 |     await killServer()
 41 |   })
 42 | 
 43 |   if (!isBuild) {
 44 |     test('hmr (vue re-render)', async() => {
 45 |       const button = await page.$('.hmr-increment')
 46 |       await button!.click()
 47 |       expect(await getText(button!)).toMatch('>>> 1 <<<')
 48 | 
 49 |       await updateFile('hmr/TestHmr.vue', content =>
 50 |         content.replace('{{ count }}', 'count is {{ count }}'),
 51 |       )
 52 |       // note: using the same button to ensure the component did only re-render
 53 |       // if it's a reload, it would have replaced the button with a new one.
 54 |       await expectByPolling(() => getText(button!), 'count is 1')
 55 |     })
 56 | 
 57 |     test('hmr (vue reload)', async() => {
 58 |       await updateFile('hmr/TestHmr.vue', content =>
 59 |         content.replace('count: 0', 'count: 1337'),
 60 |       )
 61 |       await expectByPolling(() => getText('.hmr-increment'), 'count is 1337')
 62 |     })
 63 |   }
 64 | 
 65 |   // if (!isBuild) {
 66 |   //   test('hmr (style removal)', async () => {
 67 |   //     await updateFile('css/TestPostCss.vue', (content) =>
 68 |   //       content.replace(/<style>(.|\s)*<\/style>/, ``)
 69 |   //     )
 70 |   //     await expectByPolling(
 71 |   //       () => getComputedColor('.postcss-from-sfc'),
 72 |   //       'rgb(0, 0, 0)'
 73 |   //     )
 74 |   //   })
 75 |   // }
 76 | 
 77 |   test('SFC <style scoped>', async() => {
 78 |     const el = await page.$('.style-scoped')
 79 |     expect(await getComputedColor(el!)).toBe('rgb(138, 43, 226)')
 80 |     if (!isBuild) {
 81 |       await updateFile('css/TestScopedCss.vue', content =>
 82 |         content.replace('rgb(138, 43, 226)', 'rgb(0, 0, 0)'),
 83 |       )
 84 |       await expectByPolling(() => getComputedColor(el!), 'rgb(0, 0, 0)')
 85 |     }
 86 |   })
 87 | 
 88 |   test('SFC <style module>', async() => {
 89 |     const el = await page.$('.css-modules-sfc')
 90 |     expect(await getComputedColor(el!)).toBe('rgb(0, 0, 255)')
 91 |     if (!isBuild) {
 92 |       await updateFile('css/TestCssModules.vue', content =>
 93 |         content.replace('color: blue;', 'color: rgb(0, 0, 0);'),
 94 |       )
 95 |       // css module results in component reload so must use fresh selector
 96 |       await expectByPolling(
 97 |         () => getComputedColor('.css-modules-sfc'),
 98 |         'rgb(0, 0, 0)',
 99 |       )
100 |     }
101 |   })
102 | 
103 |   test('SFC empty style', async() => {
104 |     const el = await page.$$eval('style', (elements) => {
105 |       return elements.map((e) => {
106 |         return e.innerHTML?.trim()
107 |       }).filter((e) => {
108 |         return !e
109 |       })
110 |     })
111 |     expect(el).toHaveLength(0)
112 |   })
113 | 
114 |   test('SFC <custom>', async() => {
115 |     expect(await getText('.custom-block')).toMatch('Custom Block')
116 |     expect(await getText('.custom-block-lang')).toMatch('Custom Block')
117 |     expect(await getText('.custom-block-src')).toMatch('Custom Block')
118 |   })
119 | 
120 |   test('SFC src imports', async() => {
121 |     expect(await getText('.src-imports-script')).toMatch('src="./script.ts"')
122 |     const el = await getEl('.src-imports-style')
123 |     expect(await getComputedColor(el!)).toBe('rgb(119, 136, 153)')
124 |     if (!isBuild) {
125 |       // test style first, should not reload the component
126 |       await updateFile('src-import/style.css', c =>
127 |         c.replace('rgb(119, 136, 153)', 'rgb(0, 0, 0)'),
128 |       )
129 |       await expectByPolling(() => getComputedColor(el!), 'rgb(0, 0, 0)')
130 |       // script
131 |       await updateFile('src-import/script.ts', c => c.replace('hello', 'bye'))
132 |       await expectByPolling(() => getText('.src-imports-script'), 'bye from')
133 |       // template
134 |       // todo fix test, file change is only triggered one event.
135 |       // src/node/server/serverPluginHmr.ts is not triggered, maybe caused by chokidar
136 |       // await updateFile('src-import/template.html', (c) =>
137 |       //   c.replace('gray', 'red')
138 |       // )
139 |       // await expectByPolling(
140 |       //   () => getText('.src-imports-style'),
141 |       //   'This should be light red'
142 |       // )
143 |     }
144 |   })
145 | 
146 |   test('Jsx', async() => {
147 |     expect(await getText('.jsx')).toMatch('JSX works!')
148 |   })
149 | 
150 |   test('JsxSFC', async() => {
151 |     expect(await getText('.jsx-sfc')).toMatch('JSX & SFC works!')
152 |   })
153 | }
154 | 


--------------------------------------------------------------------------------
/src/hmr.ts:
--------------------------------------------------------------------------------
  1 | import _debug from 'debug'
  2 | import type { HmrContext, ModuleNode } from 'vite'
  3 | import type { SFCBlock } from '@vue/component-compiler-utils'
  4 | import {
  5 |   createDescriptor,
  6 |   getDescriptor,
  7 |   setPrevDescriptor,
  8 | } from './utils/descriptorCache'
  9 | import { isCSSRequest } from './utils/css'
 10 | import type { ResolvedOptions } from './index'
 11 | 
 12 | const debug = _debug('vite:hmr')
 13 | 
 14 | /**
 15 |  * Vite-specific HMR handling
 16 |  */
 17 | export async function handleHotUpdate(
 18 |   { file, modules, read }: HmrContext,
 19 |   options: ResolvedOptions,
 20 | ): Promise<ModuleNode[] | void> {
 21 |   const prevDescriptor = getDescriptor(file, false)
 22 |   if (!prevDescriptor) {
 23 |     // file hasn't been requested yet (e.g. async component)
 24 |     return
 25 |   }
 26 | 
 27 |   setPrevDescriptor(file, prevDescriptor)
 28 | 
 29 |   const content = await read()
 30 |   const descriptor = createDescriptor(content, file, options)
 31 | 
 32 |   let needRerender = false
 33 |   const affectedModules = new Set<ModuleNode | undefined>()
 34 |   const mainModule = modules.find(
 35 |     m => !/type=/.test(m.url) || /type=script/.test(m.url),
 36 |   )
 37 |   const templateModule = modules.find(m => /type=template/.test(m.url))
 38 | 
 39 |   if (!isEqualBlock(descriptor.script, prevDescriptor.script)) {
 40 |     let scriptModule: ModuleNode | undefined
 41 |     if (descriptor.script?.lang && !descriptor.script.src) {
 42 |       const scriptModuleRE = new RegExp(
 43 |         `type=script.*&lang\.${descriptor.script.lang}$`,
 44 |       )
 45 |       scriptModule = modules.find(m => scriptModuleRE.test(m.url))
 46 |     }
 47 |     affectedModules.add(scriptModule || mainModule)
 48 |   }
 49 | 
 50 |   if (!isEqualBlock(descriptor.template, prevDescriptor.template)) {
 51 |     affectedModules.add(templateModule)
 52 |     needRerender = true
 53 |   }
 54 | 
 55 |   let didUpdateStyle = false
 56 |   const prevStyles = prevDescriptor.styles || []
 57 |   const nextStyles = descriptor.styles || []
 58 | 
 59 |   // force reload if scoped status has changed
 60 |   if (prevStyles.some(s => s.scoped) !== nextStyles.some(s => s.scoped)) {
 61 |     // template needs to be invalidated as well
 62 |     affectedModules.add(templateModule)
 63 |     affectedModules.add(mainModule)
 64 |   }
 65 | 
 66 |   // only need to update styles if not reloading, since reload forces
 67 |   // style updates as well.
 68 |   for (let i = 0; i < nextStyles.length; i++) {
 69 |     const prev = prevStyles[i]
 70 |     const next = nextStyles[i]
 71 |     if (!prev || !isEqualBlock(prev, next)) {
 72 |       didUpdateStyle = true
 73 |       const mod = modules.find(m => m.url.includes(`type=style&index=${i}`))
 74 |       if (mod) {
 75 |         affectedModules.add(mod)
 76 |       }
 77 |       else {
 78 |         // new style block - force reload
 79 |         affectedModules.add(mainModule)
 80 |       }
 81 |     }
 82 |   }
 83 |   if (prevStyles.length > nextStyles.length) {
 84 |     // style block removed - force reload
 85 |     affectedModules.add(mainModule)
 86 |   }
 87 | 
 88 |   const prevCustoms = prevDescriptor.customBlocks || []
 89 |   const nextCustoms = descriptor.customBlocks || []
 90 | 
 91 |   // custom blocks update causes a reload
 92 |   // because the custom block contents is changed and it may be used in JS.
 93 |   if (prevCustoms.length !== nextCustoms.length) {
 94 |     // block removed/added, force reload
 95 |     affectedModules.add(mainModule)
 96 |   }
 97 |   else {
 98 |     for (let i = 0; i < nextCustoms.length; i++) {
 99 |       const prev = prevCustoms[i]
100 |       const next = nextCustoms[i]
101 |       if (!prev || !isEqualBlock(prev, next)) {
102 |         const mod = modules.find(m =>
103 |           m.url.includes(`type=${prev.type}&index=${i}`),
104 |         )
105 |         if (mod)
106 |           affectedModules.add(mod)
107 |         else
108 |           affectedModules.add(mainModule)
109 |       }
110 |     }
111 |   }
112 | 
113 |   const updateType = []
114 |   if (needRerender) {
115 |     updateType.push('template')
116 |     // template is inlined into main, add main module instead
117 |     if (!templateModule) {
118 |       affectedModules.add(mainModule)
119 |     }
120 |     else if (mainModule) {
121 |       for (const importer of mainModule.importers) {
122 |         if (isCSSRequest(importer.url))
123 |           affectedModules.add(importer)
124 |       }
125 |     }
126 |   }
127 |   if (didUpdateStyle)
128 |     updateType.push('style')
129 | 
130 |   if (updateType.length)
131 |     debug(`[vue:update(${updateType.join('&')})] ${file}`)
132 | 
133 |   return [...affectedModules].filter(Boolean) as ModuleNode[]
134 | }
135 | 
136 | function isEqualBlock(a: SFCBlock | null, b: SFCBlock | null) {
137 |   if (!a && !b)
138 |     return true
139 |   if (!a || !b)
140 |     return false
141 |   // src imports will trigger their own updates
142 |   if (a.src && b.src && a.src === b.src)
143 |     return true
144 |   if (a.content !== b.content)
145 |     return false
146 |   const keysA = Object.keys(a.attrs)
147 |   const keysB = Object.keys(b.attrs)
148 |   if (keysA.length !== keysB.length)
149 |     return false
150 | 
151 |   return keysA.every(key => a.attrs[key] === b.attrs[key])
152 | }
153 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
  1 | import fs from 'fs'
  2 | import type { SFCBlock, TemplateCompileOptions } from '@vue/component-compiler-utils'
  3 | import { createFilter } from '@rollup/pluginutils'
  4 | import type { Plugin, ViteDevServer } from 'vite'
  5 | import { normalizeComponentCode } from './utils/componentNormalizer'
  6 | import { vueHotReloadCode } from './utils/vueHotReload'
  7 | import { parseVueRequest } from './utils/query'
  8 | import { transformMain } from './main'
  9 | import { compileSFCTemplate } from './template'
 10 | import { getDescriptor } from './utils/descriptorCache'
 11 | import { transformStyle } from './style'
 12 | import { handleHotUpdate } from './hmr'
 13 | import { transformVueJsx } from './jsxTransform'
 14 | 
 15 | export const vueComponentNormalizer = '\0/vite/vueComponentNormalizer'
 16 | export const vueHotReload = '\0/vite/vueHotReload'
 17 | 
 18 | // extend the descriptor so we can store the scopeId on it
 19 | declare module '@vue/component-compiler-utils' {
 20 |   interface SFCDescriptor {
 21 |     id: string
 22 |   }
 23 | }
 24 | 
 25 | export interface VueViteOptions {
 26 |   include?: string | RegExp | (string | RegExp)[]
 27 |   exclude?: string | RegExp | (string | RegExp)[]
 28 |   /**
 29 |    * The options for `@vue/component-compiler-utils`.
 30 |    */
 31 |   vueTemplateOptions?: Partial<TemplateCompileOptions>
 32 |   /**
 33 |    * The options for jsx transform
 34 |    * @default false
 35 |    */
 36 |   jsx?: boolean
 37 |   /**
 38 |    * The options for `@vue/babel-preset-jsx`
 39 |    */
 40 |   jsxOptions?: Record<string, any>
 41 |   /**
 42 |    * The options for esbuild to transform script code
 43 |    * @default 'esnext'
 44 |    * @example 'esnext' | ['esnext','chrome58','firefox57','safari11','edge16','node12']
 45 |    */
 46 |   target?: string | string[]
 47 | }
 48 | 
 49 | export interface ResolvedOptions extends VueViteOptions {
 50 |   root: string
 51 |   devServer?: ViteDevServer
 52 |   isProduction: boolean
 53 |   target?: string | string[]
 54 | }
 55 | 
 56 | export function createVuePlugin(rawOptions: VueViteOptions = {}): Plugin {
 57 |   const options: ResolvedOptions = {
 58 |     isProduction: process.env.NODE_ENV === 'production',
 59 |     ...rawOptions,
 60 |     root: process.cwd(),
 61 |   }
 62 | 
 63 |   const filter = createFilter(options.include || /\.vue$/, options.exclude)
 64 | 
 65 |   return {
 66 |     name: 'vite-plugin-vue2',
 67 | 
 68 |     config() {
 69 |       if (options.jsx) {
 70 |         return {
 71 |           esbuild: {
 72 |             include: /\.ts$/,
 73 |             exclude: /\.(tsx|jsx)$/,
 74 |           },
 75 |         }
 76 |       }
 77 |     },
 78 | 
 79 |     handleHotUpdate(ctx) {
 80 |       if (!filter(ctx.file))
 81 |         return
 82 | 
 83 |       return handleHotUpdate(ctx, options)
 84 |     },
 85 | 
 86 |     configResolved(config) {
 87 |       options.isProduction = config.isProduction
 88 |       options.root = config.root
 89 |     },
 90 | 
 91 |     configureServer(server) {
 92 |       options.devServer = server
 93 |     },
 94 | 
 95 |     async resolveId(id) {
 96 |       if (id === vueComponentNormalizer || id === vueHotReload)
 97 |         return id
 98 | 
 99 |       // serve subpart requests (*?vue) as virtual modules
100 |       if (parseVueRequest(id).query.vue)
101 |         return id
102 |     },
103 | 
104 |     load(id) {
105 |       if (id === vueComponentNormalizer)
106 |         return normalizeComponentCode
107 | 
108 |       if (id === vueHotReload)
109 |         return vueHotReloadCode
110 | 
111 |       const { filename, query } = parseVueRequest(id)
112 |       // select corresponding block for subpart virtual modules
113 |       if (query.vue) {
114 |         if (query.src)
115 |           return fs.readFileSync(filename, 'utf-8')
116 | 
117 |         const descriptor = getDescriptor(filename)!
118 |         let block: SFCBlock | null | undefined
119 | 
120 |         if (query.type === 'script')
121 |           block = descriptor.script!
122 |         else if (query.type === 'template')
123 |           block = descriptor.template!
124 |         else if (query.type === 'style')
125 |           block = descriptor.styles[query.index!]
126 |         else if (query.index != null)
127 |           block = descriptor.customBlocks[query.index]
128 | 
129 |         if (block) {
130 |           return {
131 |             code: block.content,
132 |             map: block.map as any,
133 |           }
134 |         }
135 |       }
136 |     },
137 | 
138 |     async transform(code, id) {
139 |       const { filename, query } = parseVueRequest(id)
140 | 
141 |       if (/\.(tsx|jsx)$/.test(id))
142 |         return transformVueJsx(code, id, options.jsxOptions)
143 | 
144 |       if ((!query.vue && !filter(filename)) || query.raw)
145 |         return
146 | 
147 |       if (!query.vue) {
148 |         // main request
149 |         return await transformMain(code, filename, options, this as any)
150 |       }
151 | 
152 |       const descriptor = getDescriptor(
153 |         query.from ? decodeURIComponent(query.from) : filename,
154 |       )!
155 |       // sub block request
156 |       if (query.type === 'template') {
157 |         return compileSFCTemplate(
158 |           code,
159 |           descriptor.template!,
160 |           filename,
161 |           options,
162 |           this as any,
163 |         )
164 |       }
165 |       if (query.type === 'style') {
166 |         return await transformStyle(
167 |           code,
168 |           filename,
169 |           descriptor,
170 |           Number(query.index),
171 |           this as any,
172 |         )
173 |       }
174 |     },
175 |   }
176 | }
177 | 


--------------------------------------------------------------------------------
/src/template/compileTemplate.ts:
--------------------------------------------------------------------------------
  1 | import consolidate from 'consolidate'
  2 | import transpile from 'vue-template-babel-compiler'
  3 | import type {
  4 |   ErrorWithRange,
  5 |   VueTemplateCompiler,
  6 |   VueTemplateCompilerOptions,
  7 | } from './types'
  8 | 
  9 | import type {
 10 |   AssetURLOptions,
 11 |   TransformAssetUrlsOptions,
 12 | } from './assetUrl'
 13 | import assetUrlsModule from './assetUrl'
 14 | import srcsetModule from './srcset'
 15 | 
 16 | export interface TemplateCompileOptions {
 17 |   source: string
 18 |   filename: string
 19 |   compiler: VueTemplateCompiler
 20 |   compilerOptions?: VueTemplateCompilerOptions
 21 |   transformAssetUrls?: AssetURLOptions | boolean
 22 |   transformAssetUrlsOptions?: TransformAssetUrlsOptions
 23 |   preprocessLang?: string
 24 |   preprocessOptions?: any
 25 |   transpileOptions?: any
 26 |   isProduction?: boolean
 27 |   isFunctional?: boolean
 28 |   optimizeSSR?: boolean
 29 |   prettify?: boolean
 30 | }
 31 | 
 32 | export interface TemplateCompileResult {
 33 |   ast: Object | undefined
 34 |   code: string
 35 |   source: string
 36 |   tips: (string | ErrorWithRange)[]
 37 |   errors: (string | ErrorWithRange)[]
 38 | }
 39 | 
 40 | export function compileTemplate(
 41 |   options: TemplateCompileOptions,
 42 | ): TemplateCompileResult {
 43 |   const { preprocessLang } = options
 44 |   const preprocessor
 45 |     = preprocessLang && consolidate[preprocessLang as keyof typeof consolidate]
 46 |   if (preprocessor) {
 47 |     return actuallyCompile(
 48 |       Object.assign({}, options, {
 49 |         source: preprocess(options, preprocessor),
 50 |       }),
 51 |     )
 52 |   }
 53 |   else if (preprocessLang) {
 54 |     return {
 55 |       ast: {},
 56 |       code: 'var render = function () {}\n' + 'var staticRenderFns = []\n',
 57 |       source: options.source,
 58 |       tips: [
 59 |         `Component ${options.filename} uses lang ${preprocessLang} for template. Please install the language preprocessor.`,
 60 |       ],
 61 |       errors: [
 62 |         `Component ${options.filename} uses lang ${preprocessLang} for template, however it is not installed.`,
 63 |       ],
 64 |     }
 65 |   }
 66 |   else {
 67 |     return actuallyCompile(options)
 68 |   }
 69 | }
 70 | 
 71 | function preprocess(
 72 |   options: TemplateCompileOptions,
 73 |   preprocessor: any,
 74 | ): string {
 75 |   const { source, filename } = options
 76 |   let { preprocessOptions } = options
 77 |   if (options.preprocessLang === 'pug') {
 78 |     preprocessOptions = {
 79 |       doctype: 'html',
 80 |       ...preprocessOptions,
 81 |     }
 82 |   }
 83 | 
 84 |   const finalPreprocessOptions = Object.assign(
 85 |     {
 86 |       filename,
 87 |     },
 88 |     preprocessOptions,
 89 |   )
 90 | 
 91 |   // Consolidate exposes a callback based API, but the callback is in fact
 92 |   // called synchronously for most templating engines. In our case, we have to
 93 |   // expose a synchronous API so that it is usable in Jest transforms (which
 94 |   // have to be sync because they are applied via Node.js require hooks)
 95 |   let res: any, err
 96 |   preprocessor.render(
 97 |     source,
 98 |     finalPreprocessOptions,
 99 |     (_err: Error | null, _res: string) => {
100 |       if (_err)
101 |         err = _err
102 |       res = _res
103 |     },
104 |   )
105 | 
106 |   if (err)
107 |     throw err
108 |   return res
109 | }
110 | 
111 | function actuallyCompile(
112 |   options: TemplateCompileOptions,
113 | ): TemplateCompileResult {
114 |   const {
115 |     source,
116 |     compiler,
117 |     compilerOptions = {},
118 |     transpileOptions = {},
119 |     transformAssetUrls,
120 |     transformAssetUrlsOptions,
121 |     isProduction = process.env.NODE_ENV === 'production',
122 |     isFunctional = false,
123 |     optimizeSSR = false,
124 |     prettify = true,
125 |   } = options
126 | 
127 |   const compile
128 |     = optimizeSSR && compiler.ssrCompile ? compiler.ssrCompile : compiler.compile
129 | 
130 |   let finalCompilerOptions = compilerOptions
131 |   if (transformAssetUrls) {
132 |     const builtInModules = [
133 |       transformAssetUrls === true
134 |         ? assetUrlsModule(undefined, transformAssetUrlsOptions)
135 |         : assetUrlsModule(transformAssetUrls, transformAssetUrlsOptions),
136 |       srcsetModule(transformAssetUrlsOptions),
137 |     ]
138 |     finalCompilerOptions = Object.assign({}, compilerOptions, {
139 |       modules: [...builtInModules, ...(compilerOptions.modules || [])],
140 |       filename: options.filename,
141 |     })
142 |   }
143 | 
144 |   const { ast, render, staticRenderFns, tips, errors } = compile(
145 |     source,
146 |     finalCompilerOptions,
147 |   )
148 | 
149 |   if (errors && errors.length) {
150 |     return {
151 |       ast,
152 |       code: 'var render = function () {}\n' + 'var staticRenderFns = []\n',
153 |       source,
154 |       tips,
155 |       errors,
156 |     }
157 |   }
158 |   else {
159 |     const finalTranspileOptions = Object.assign({}, transpileOptions, {
160 |       transforms: Object.assign({}, transpileOptions.transforms, {
161 |         stripWithFunctional: isFunctional,
162 |       }),
163 |     })
164 | 
165 |     const toFunction = (code: string): string => {
166 |       return `function (${isFunctional ? '_h,_vm' : ''}) {${code}}`
167 |     }
168 | 
169 |     // transpile code with vue-template-es2015-compiler, which is a forked
170 |     // version of Buble that applies ES2015 transforms + stripping `with` usage
171 |     let code
172 |       = `var __render__ = ${toFunction(render)}\n`
173 |       + `var __staticRenderFns__ = [${staticRenderFns.map(toFunction)}]`
174 | 
175 |     code = `${transpile(code, finalTranspileOptions)}\n`
176 | 
177 |     // #23 we use __render__ to avoid `render` not being prefixed by the
178 |     // transpiler when stripping with, but revert it back to `render` to
179 |     // maintain backwards compat
180 |     code = code.replace(/\s__(render|staticRenderFns)__\s/g, ' $1 ')
181 | 
182 |     if (!isProduction) {
183 |       // mark with stripped (this enables Vue to use correct runtime proxy
184 |       // detection)
185 |       code += 'render._withStripped = true'
186 | 
187 |       if (prettify) {
188 |         try {
189 |           // eslint-disable-next-line @typescript-eslint/no-var-requires
190 |           code = require('prettier').format(code, {
191 |             semi: false,
192 |             parser: 'babel',
193 |           })
194 |         }
195 |         catch (e: any) {
196 |           if (e.code === 'MODULE_NOT_FOUND') {
197 |             tips.push(
198 |               'The `prettify` option is on, but the dependency `prettier` is not found.\n'
199 |                 + 'Please either turn off `prettify` or manually install `prettier`.',
200 |             )
201 |           }
202 |           tips.push(
203 |             `Failed to prettify component ${options.filename} template source after compilation.`,
204 |           )
205 |         }
206 |       }
207 |     }
208 | 
209 |     return {
210 |       ast,
211 |       code,
212 |       source,
213 |       tips,
214 |       errors,
215 |     }
216 |   }
217 | }
218 | 


--------------------------------------------------------------------------------
/src/utils/vueHotReload.ts:
--------------------------------------------------------------------------------
  1 | export const vueHotReloadCode = `
  2 | var Vue // late bind
  3 | var version
  4 | var __VUE_HMR_RUNTIME__ = Object.create(null)
  5 | var map = Object.create(null)
  6 | if (typeof window !== 'undefined') {
  7 |   window.__VUE_HMR_RUNTIME__ = __VUE_HMR_RUNTIME__
  8 | }
  9 | var installed = false
 10 | var isBrowserify = false
 11 | var initHookName = 'beforeCreate'
 12 | 
 13 | __VUE_HMR_RUNTIME__.install = function (vue, browserify) {
 14 |   if (installed) { return }
 15 |   installed = true
 16 | 
 17 |   Vue = vue.__esModule ? vue.default : vue
 18 |   version = Vue.version.split('.').map(Number)
 19 |   isBrowserify = browserify
 20 | 
 21 |   // compat with < 2.0.0-alpha.7
 22 |   if (Vue.config._lifecycleHooks.indexOf('init') > -1) {
 23 |     initHookName = 'init'
 24 |   }
 25 | 
 26 |   __VUE_HMR_RUNTIME__.compatible = version[0] >= 2
 27 |   if (!__VUE_HMR_RUNTIME__.compatible) {
 28 |     console.warn(
 29 |       '[HMR] You are using a version of vue-hot-reload-api that is ' +
 30 |       'only compatible with Vue.js core ^2.0.0.'
 31 |     )
 32 |     return
 33 |   }
 34 | }
 35 | 
 36 | /**
 37 |  * Create a record for a hot module, which keeps track of its constructor
 38 |  * and instances
 39 |  *
 40 |  * @param {String} id
 41 |  * @param {Object} options
 42 |  */
 43 | 
 44 | __VUE_HMR_RUNTIME__.createRecord = function (id, options) {
 45 |   if(map[id]) { return }
 46 | 
 47 |   var Ctor = null
 48 |   if (typeof options === 'function') {
 49 |     Ctor = options
 50 |     options = Ctor.options
 51 |   }
 52 |   makeOptionsHot(id, options)
 53 |   map[id] = {
 54 |     Ctor: Ctor,
 55 |     options: options,
 56 |     instances: []
 57 |   }
 58 | }
 59 | 
 60 | /**
 61 |  * Check if module is recorded
 62 |  *
 63 |  * @param {String} id
 64 |  */
 65 | 
 66 | __VUE_HMR_RUNTIME__.isRecorded = function (id) {
 67 |   return typeof map[id] !== 'undefined'
 68 | }
 69 | 
 70 | /**
 71 |  * Make a Component options object hot.
 72 |  *
 73 |  * @param {String} id
 74 |  * @param {Object} options
 75 |  */
 76 | 
 77 | function makeOptionsHot(id, options) {
 78 |   if (options.functional) {
 79 |     var render = options.render
 80 |     options.render = function (h, ctx) {
 81 |       var instances = map[id].instances
 82 |       if (ctx && instances.indexOf(ctx.parent) < 0) {
 83 |         instances.push(ctx.parent)
 84 |       }
 85 |       return render(h, ctx)
 86 |     }
 87 |   } else {
 88 |     injectHook(options, initHookName, function() {
 89 |       var record = map[id]
 90 |       if (!record.Ctor) {
 91 |         record.Ctor = this.constructor
 92 |       }
 93 |       record.instances.push(this)
 94 |     })
 95 |     injectHook(options, 'beforeDestroy', function() {
 96 |       var instances = map[id].instances
 97 |       instances.splice(instances.indexOf(this), 1)
 98 |     })
 99 |   }
100 | }
101 | 
102 | /**
103 |  * Inject a hook to a hot reloadable component so that
104 |  * we can keep track of it.
105 |  *
106 |  * @param {Object} options
107 |  * @param {String} name
108 |  * @param {Function} hook
109 |  */
110 | 
111 | function injectHook(options, name, hook) {
112 |   var existing = options[name]
113 |   options[name] = existing
114 |     ? Array.isArray(existing) ? existing.concat(hook) : [existing, hook]
115 |     : [hook]
116 | }
117 | 
118 | function tryWrap(fn) {
119 |   return function (id, arg) {
120 |     try {
121 |       fn(id, arg)
122 |     } catch (e) {
123 |       console.error(e)
124 |       console.warn(
125 |         'Something went wrong during Vue component hot-reload. Full reload required.'
126 |       )
127 |     }
128 |   }
129 | }
130 | 
131 | function updateOptions (oldOptions, newOptions) {
132 |   for (var key in oldOptions) {
133 |     if (!(key in newOptions)) {
134 |       delete oldOptions[key]
135 |     }
136 |   }
137 |   for (var key$1 in newOptions) {
138 |     oldOptions[key$1] = newOptions[key$1]
139 |   }
140 | }
141 | 
142 | __VUE_HMR_RUNTIME__.rerender = tryWrap(function (id, options) {
143 |   var record = map[id]
144 |   if (!options) {
145 |     record.instances.slice().forEach(function (instance) {
146 |       instance.$forceUpdate()
147 |     })
148 |     return
149 |   }  
150 |   if (typeof options === 'function') {
151 |     options = options.options
152 |   }
153 |   if(record.functional){
154 |     record.render = options.render
155 |     record.staticRenderFns = options.staticRenderFns
156 |     __VUE_HMR_RUNTIME__.reload(id, record)
157 |     return
158 |   }
159 |   if (record.Ctor) {
160 |     record.Ctor.options.render = options.render
161 |     record.Ctor.options.staticRenderFns = options.staticRenderFns
162 |     record.instances.slice().forEach(function (instance) {
163 |       instance.$options.render = options.render
164 |       instance.$options.staticRenderFns = options.staticRenderFns
165 |       // reset static trees
166 |       // pre 2.5, all static trees are cached together on the instance
167 |       if (instance._staticTrees) {
168 |         instance._staticTrees = []
169 |       }
170 |       // 2.5.0
171 |       if (Array.isArray(record.Ctor.options.cached)) {
172 |         record.Ctor.options.cached = []
173 |       }
174 |       // 2.5.3
175 |       if (Array.isArray(instance.$options.cached)) {
176 |         instance.$options.cached = []
177 |       }
178 | 
179 |       // post 2.5.4: v-once trees are cached on instance._staticTrees.
180 |       // Pure static trees are cached on the staticRenderFns array
181 |       // (both already reset above)
182 | 
183 |       // 2.6: temporarily mark rendered scoped slots as unstable so that
184 |       // child components can be forced to update
185 |       var restore = patchScopedSlots(instance)
186 |       instance.$forceUpdate()
187 |       instance.$nextTick(restore)
188 |     })
189 |   } else {
190 |     // functional or no instance created yet
191 |     record.options.render = options.render
192 |     record.options.staticRenderFns = options.staticRenderFns
193 | 
194 |     // handle functional component re-render
195 |     if (record.options.functional) {
196 |       // rerender with full options
197 |       if (Object.keys(options).length > 2) {
198 |         updateOptions(record.options, options)
199 |       } else {
200 |         // template-only rerender.
201 |         // need to inject the style injection code for CSS modules
202 |         // to work properly.
203 |         var injectStyles = record.options._injectStyles
204 |         if (injectStyles) {
205 |           var render = options.render
206 |           record.options.render = function (h, ctx) {
207 |             injectStyles.call(ctx)
208 |             return render(h, ctx)
209 |           }
210 |         }
211 |       }
212 |       record.options._Ctor = null
213 |       // 2.5.3
214 |       if (Array.isArray(record.options.cached)) {
215 |         record.options.cached = []
216 |       }
217 |       record.instances.slice().forEach(function (instance) {
218 |         instance.$forceUpdate()
219 |       })
220 |     }
221 |   }
222 | })
223 | 
224 | __VUE_HMR_RUNTIME__.reload = tryWrap(function (id, options) {
225 |   var record = map[id]
226 |   if (options) {
227 |     if (typeof options === 'function') {
228 |       options = options.options
229 |     }
230 |     makeOptionsHot(id, options)
231 |     if (record.Ctor) {
232 |       if (version[1] < 2) {
233 |         // preserve pre 2.2 behavior for global mixin handling
234 |         record.Ctor.extendOptions = options
235 |       }
236 |       var newCtor = record.Ctor.super.extend(options)
237 |       // prevent record.options._Ctor from being overwritten accidentally
238 |       newCtor.options._Ctor = record.options._Ctor
239 |       record.Ctor.options = newCtor.options
240 |       record.Ctor.cid = newCtor.cid
241 |       record.Ctor.prototype = newCtor.prototype
242 |       if (newCtor.release) {
243 |         // temporary global mixin strategy used in < 2.0.0-alpha.6
244 |         newCtor.release()
245 |       }
246 |     } else {
247 |       updateOptions(record.options, options)
248 |     }
249 |   }
250 |   record.instances.slice().forEach(function (instance) {
251 |     if (instance.$vnode && instance.$vnode.context) {
252 |       instance.$vnode.context.$forceUpdate()
253 |     } else {
254 |       console.warn(
255 |         'Root or manually mounted instance modified. Full reload required.'
256 |       )
257 |     }
258 |   })
259 | })
260 | 
261 | // 2.6 optimizes template-compiled scoped slots and skips updates if child
262 | // only uses scoped slots. We need to patch the scoped slots resolving helper
263 | // to temporarily mark all scoped slots as unstable in order to force child
264 | // updates.
265 | function patchScopedSlots (instance) {
266 |   if (!instance._u) { return }
267 |   // https://github.com/vuejs/vue/blob/dev/src/core/instance/render-helpers/resolve-scoped-slots.js
268 |   var original = instance._u
269 |   instance._u = function (slots) {
270 |     try {
271 |       // 2.6.4 ~ 2.6.6
272 |       return original(slots, true)
273 |     } catch (e) {
274 |       // 2.5 / >= 2.6.7
275 |       return original(slots, null, true)
276 |     }
277 |   }
278 |   return function () {
279 |     instance._u = original
280 |   }
281 | }
282 | export default __VUE_HMR_RUNTIME__
283 | `
284 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
  1 | import qs from 'querystring'
  2 | import path from 'path'
  3 | import fs from 'fs'
  4 | import type { SFCBlock, SFCDescriptor } from '@vue/component-compiler-utils'
  5 | import type { TransformPluginContext } from 'rollup'
  6 | import type { RawSourceMap } from 'source-map'
  7 | import { SourceMapGenerator } from 'source-map'
  8 | import * as Vite from 'vite'
  9 | import { createDescriptor } from './utils/descriptorCache'
 10 | import { rewriteDefault } from './utils/rewriteDefault'
 11 | import { vueComponentNormalizer, vueHotReload } from './index'
 12 | import type { ResolvedOptions } from './index'
 13 | 
 14 | export async function transformMain(
 15 |   code: string,
 16 |   filePath: string,
 17 |   options: ResolvedOptions,
 18 |   pluginContext: TransformPluginContext,
 19 | ) {
 20 |   const descriptor = createDescriptor(code, filePath, options)
 21 | 
 22 |   const hasFunctional
 23 |     = descriptor.template && descriptor.template.attrs.functional
 24 | 
 25 |   // template
 26 |   const { code: templateCode, templateRequest } = await genTemplateRequest(
 27 |     filePath,
 28 |     descriptor,
 29 |     pluginContext,
 30 |   )
 31 |   // script
 32 |   const scriptVar = '__vue2_script'
 33 |   const { scriptCode, map: scriptMap } = await genScriptCode(
 34 |     scriptVar,
 35 |     descriptor,
 36 |     filePath,
 37 |     options,
 38 |     pluginContext,
 39 |   )
 40 |   // style
 41 |   const cssModuleVar = '__cssModules'
 42 |   const { scoped, stylesCode } = await genStyleRequest(
 43 |     cssModuleVar,
 44 |     descriptor,
 45 |     filePath,
 46 |     pluginContext,
 47 |   )
 48 | 
 49 |   let result
 50 |     = `${`${scriptCode}
 51 | ${templateCode}
 52 | const ${cssModuleVar} = {}
 53 | ${stylesCode}
 54 | /* normalize component */
 55 | import __vue2_normalizer from "${vueComponentNormalizer}"
 56 | var __component__ = /*#__PURE__*/__vue2_normalizer(
 57 |   __vue2_script,
 58 |   __vue2_render,
 59 |   __vue2_staticRenderFns,
 60 |   ${hasFunctional ? 'true' : 'false'},
 61 |   __vue2_injectStyles,
 62 |   ${scoped ? JSON.stringify(descriptor.id) : 'null'},
 63 |   null,
 64 |   null
 65 | )
 66 |   `.trim()}\n`
 67 | 
 68 |   result += `
 69 | function __vue2_injectStyles (context) {
 70 |   for(let o in ${cssModuleVar}){
 71 |     this[o] = ${cssModuleVar}[o]
 72 |   }
 73 | }\n`
 74 | 
 75 |   // custom block
 76 |   result += await genCustomBlockCode(filePath, descriptor, pluginContext)
 77 |   // Expose filename. This is used by the devtools and Vue runtime warnings.
 78 |   if (!options.isProduction) {
 79 |     // Expose the file's full path in development, so that it can be opened
 80 |     // from the devtools.
 81 |     result += `\n__component__.options.__file = ${JSON.stringify(
 82 |       path.relative(options.root, filePath).replace(/\\/g, '/'),
 83 |     )}`
 84 |   }
 85 |   // else if (options.exposeFilename) {
 86 |   //   // Libraries can opt-in to expose their components' filenames in production builds.
 87 |   //   // For security reasons, only expose the file's basename in production.
 88 |   //   code += `\n__component__.options.__file = ${JSON.stringify(filePath)}`
 89 |   // }
 90 | 
 91 |   if (options.devServer && !options.isProduction) {
 92 |     result += genHmrCode(
 93 |       options.root,
 94 |       descriptor.id,
 95 |       !!hasFunctional,
 96 |       templateRequest,
 97 |     )
 98 |   }
 99 | 
100 |   let map = scriptMap
101 |   // if script source map is undefined, generate an emty souce map so that
102 |   // rollup wont complain at build time when using sourceMap option
103 |   if (!map) {
104 |     const emptyMapGen = new SourceMapGenerator({
105 |       file: filePath.replace(/\\/g, '/'),
106 |       sourceRoot: options.root.replace(/\\/g, '/'),
107 |     })
108 |     emptyMapGen.setSourceContent(filePath, code)
109 |     map = JSON.parse(emptyMapGen.toString())
110 |   }
111 | 
112 |   result += '\nexport default /*#__PURE__*/(function () { return __component__.exports })()'
113 |   return {
114 |     code: result,
115 |     map,
116 |   }
117 | }
118 | 
119 | const exportDefaultClassRE = /export\s+default\s+class\s+([\w$]+)/
120 | 
121 | async function genScriptCode(
122 |   scriptVar: string,
123 |   descriptor: SFCDescriptor,
124 |   filename: string,
125 |   options: ResolvedOptions,
126 |   _pluginContext: TransformPluginContext,
127 | ): Promise<{
128 |   scriptCode: string
129 |   map?: RawSourceMap
130 | }> {
131 |   const { script } = descriptor
132 |   let scriptCode = `const ${scriptVar} = {}`
133 |   if (!script)
134 |     return { scriptCode }
135 | 
136 |   let map
137 |   if (script) {
138 |     // If the script is js/ts and has no external src, it can be directly placed
139 |     // in the main module.
140 |     if (
141 |       (!script.lang || (script.lang === 'ts' && options.devServer))
142 |       && !script.src
143 |     ) {
144 |       const classMatch = script.content.match(exportDefaultClassRE)
145 |       if (classMatch) {
146 |         scriptCode = `${script.content.replace(
147 |           exportDefaultClassRE,
148 |           'class $1',
149 |         )}\nconst ${scriptVar} = ${classMatch[1]}`
150 |       }
151 |       else {
152 |         scriptCode = rewriteDefault(script.content, scriptVar)
153 |       }
154 |       map = script.map
155 |       if (script.lang === 'ts') {
156 |         // transformWithEsbuild has been exported since vite@2.6.0-beta.0
157 |         const transformWithEsbuild
158 |           = Vite.transformWithEsbuild ?? options.devServer!.transformWithEsbuild
159 |         const result = await transformWithEsbuild(
160 |           scriptCode,
161 |           filename,
162 |           { loader: 'ts', target: options.target },
163 |           map,
164 |         )
165 |         scriptCode = result.code
166 |         map = result.map
167 |         // restore esbuild missing sourcemap fields from previous compilation
168 |         if (!map.file && script.map?.file)
169 |           map.file = script.map.file
170 | 
171 |         if (!map.sourcesContent && script.map?.sourcesContent)
172 |           map.sourcesContent = script.map.sourcesContent
173 |       }
174 |     }
175 |     else {
176 |       const src = script.src || filename
177 |       const langFallback = (script.src && path.extname(src).slice(1)) || 'js'
178 |       const attrsQuery = attrsToQuery(script.attrs, langFallback)
179 |       const srcQuery = script.src ? '&src' : ''
180 |       const from = script.src ? `&from=${encodeURIComponent(filename)}` : ''
181 |       const query = `?vue&type=script${srcQuery}${from}${attrsQuery}`
182 |       const request = JSON.stringify(src + query)
183 |       scriptCode
184 |         = `import ${scriptVar} from ${request}\n` + `export * from ${request}` // support named exports
185 |     }
186 |   }
187 |   return {
188 |     scriptCode,
189 |     map: map as any,
190 |   }
191 | }
192 | 
193 | async function genTemplateRequest(
194 |   filename: string,
195 |   descriptor: SFCDescriptor,
196 |   _pluginContext: TransformPluginContext,
197 | ) {
198 |   const template = descriptor.template
199 |   if (!template)
200 |     return { code: 'let __vue2_render, __vue2_staticRenderFns' }
201 | 
202 |   const src = template.src || filename
203 |   const srcQuery = template.src ? '&src' : ''
204 |   const from = template.src ? `&from=${encodeURIComponent(filename)}` : ''
205 |   const attrsQuery = attrsToQuery(template.attrs, 'js', true)
206 |   const query = `?vue${from}&type=template${srcQuery}${attrsQuery}`
207 |   const templateRequest = src + query
208 |   return {
209 |     code: `import { render as __vue2_render, staticRenderFns as __vue2_staticRenderFns } from ${JSON.stringify(
210 |       templateRequest,
211 |     )}`,
212 |     templateRequest,
213 |   }
214 | }
215 | 
216 | async function genCustomBlockCode(
217 |   filename: string,
218 |   descriptor: SFCDescriptor,
219 |   _pluginContext: TransformPluginContext,
220 | ) {
221 |   let code = ''
222 |   await Promise.all(
223 |     descriptor.customBlocks.map(async(block, index) => {
224 |       const blockSrc
225 |         = typeof block.attrs.src === 'string' ? block.attrs.src : ''
226 |       const src = blockSrc || filename
227 |       const attrsQuery = attrsToQuery(
228 |         block.attrs,
229 |         path.extname(blockSrc) || block.type,
230 |       )
231 |       const srcQuery = block.attrs.src ? '&src' : ''
232 |       const from = block.attrs.src
233 |         ? `&from=${encodeURIComponent(filename)}`
234 |         : ''
235 |       const query = `?vue&type=${block.type}&index=${index}${srcQuery}${from}${attrsQuery}`
236 |       const request = JSON.stringify(src + query)
237 |       code += `import block${index} from ${request}\n`
238 |       code += `if (typeof block${index} === 'function') block${index}(__component__)\n`
239 |     }),
240 |   )
241 |   return code
242 | }
243 | 
244 | function genHmrCode(
245 |   root: string,
246 |   id: string,
247 |   functional: boolean,
248 |   templateRequest?: string,
249 | ) {
250 |   const idJSON = JSON.stringify(id)
251 |   return `\n/* hot reload */
252 | import __VUE_HMR_RUNTIME__ from ${JSON.stringify(vueHotReload)}
253 | import __VUE_IDENTIFIER__ from "vue"
254 | __VUE_HMR_RUNTIME__.install(__VUE_IDENTIFIER__)
255 | if(!import.meta.env.SSR && __VUE_HMR_RUNTIME__.compatible){
256 |   if (!__VUE_HMR_RUNTIME__.isRecorded(${idJSON})) {
257 |     __VUE_HMR_RUNTIME__.createRecord(${idJSON}, __component__.options)
258 |   }
259 |    import.meta.hot.accept((update) => {
260 |       __VUE_HMR_RUNTIME__.${
261 |         functional ? 'rerender' : 'reload'
262 |       }(${idJSON}, update.default)
263 |    })
264 |    ${
265 |      templateRequest
266 |        ? `import.meta.hot.accept(${JSON.stringify(
267 |            normalizeDevPath(root, templateRequest),
268 |          )}, (update) => {
269 |       __VUE_HMR_RUNTIME__.rerender(${idJSON}, update)
270 |    })`
271 |        : ''
272 |    }
273 | }`
274 | }
275 | 
276 | async function genStyleRequest(
277 |   cssModuleVar: string,
278 |   descriptor: SFCDescriptor,
279 |   filename: string,
280 |   _pluginContext: TransformPluginContext,
281 | ) {
282 |   let scoped = false
283 |   let stylesCode = ''
284 |   for (let i = 0; i < descriptor.styles.length; i++) {
285 |     const style = descriptor.styles[i]
286 |     if (!style.src && (!style.content || !style.content.trim()))
287 |       continue
288 |     const src = style.src || filename
289 |     const attrsQuery = attrsToQuery(style.attrs, 'css')
290 |     const srcQuery = style.src ? '&src' : ''
291 |     const from = style.src ? `&from=${encodeURIComponent(filename)}` : ''
292 |     const query = `?vue&type=style&index=${i}${from}${srcQuery}`
293 |     const styleRequest = src + query + attrsQuery
294 |     if (style.scoped)
295 |       scoped = true
296 |     if (style.module) {
297 |       stylesCode += genCSSModulesCode(
298 |         i,
299 |         styleRequest,
300 |         style.module,
301 |         cssModuleVar,
302 |       )
303 |     }
304 |     else {
305 |       stylesCode += `\nimport ${JSON.stringify(styleRequest)}`
306 |     }
307 |   }
308 | 
309 |   return { scoped, stylesCode }
310 | }
311 | 
312 | function genCSSModulesCode(
313 |   index: number,
314 |   request: string,
315 |   moduleName: string | boolean,
316 |   cssModuleVar: string,
317 | ): string {
318 |   const styleVar = `__style${index}`
319 |   const exposedName = typeof moduleName === 'string' ? moduleName : '$style'
320 |   // inject `.module` before extension so vite handles it as css module
321 |   const moduleRequest = request.replace(/\.(\w+)$/, '.module.$1')
322 |   return (
323 |     `\nimport ${styleVar} from ${JSON.stringify(moduleRequest)}`
324 |     + `\n${cssModuleVar}["${exposedName}"] = ${styleVar}`
325 |   )
326 | }
327 | 
328 | // these are built-in query parameters so should be ignored
329 | // if the user happen to add them as attrs
330 | const ignoreList = ['id', 'index', 'src', 'type', 'lang', 'module']
331 | 
332 | function attrsToQuery(
333 |   attrs: SFCBlock['attrs'],
334 |   langFallback?: string,
335 |   forceLangFallback = false,
336 | ): string {
337 |   let query = ''
338 |   for (const name in attrs) {
339 |     const value = attrs[name]
340 |     if (!ignoreList.includes(name)) {
341 |       query += `&${qs.escape(name)}${
342 |         value ? `=${qs.escape(String(value))}` : ''
343 |       }`
344 |     }
345 |   }
346 |   if (langFallback || attrs.lang) {
347 |     query
348 |       += 'lang' in attrs
349 |         ? forceLangFallback
350 |           ? `&lang.${langFallback}`
351 |           : `&lang.${attrs.lang}`
352 |         : `&lang.${langFallback}`
353 |   }
354 |   return query
355 | }
356 | 
357 | export const FS_PREFIX = '/@fs/'
358 | 
359 | function normalizeDevPath(root: string, id: string) {
360 |   if (id.startsWith(`${root}/`))
361 |     return id.slice(root.length)
362 |   else if (fs.existsSync(cleanUrl(id)))
363 |     return FS_PREFIX + id
364 | 
365 |   return id
366 | }
367 | 
368 | export const queryRE = /\?.*$/
369 | export const hashRE = /#.*$/
370 | 
371 | export function cleanUrl(url: string) {
372 |   return url.replace(hashRE, '').replace(queryRE, '')
373 | }
374 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | ## [2.0.3](https://github.com/underfin/vite-plugin-vue2/compare/v2.0.2...v2.0.3) (2022-12-19)
  2 | 
  3 | 
  4 | ### Features
  5 | 
  6 | * support Vite 4 as peerDependency ([#213](https://github.com/underfin/vite-plugin-vue2/issues/213)) ([db6e905](https://github.com/underfin/vite-plugin-vue2/commit/db6e905ec325a9189c04d7f9b5bc30f03318b2a3))
  7 | 
  8 | 
  9 | 
 10 | ## [2.0.2](https://github.com/underfin/vite-plugin-vue2/compare/v2.0.1...v2.0.2) (2022-07-16)
 11 | 
 12 | 
 13 | ### Features
 14 | 
 15 | * support vite 3 ([#204](https://github.com/underfin/vite-plugin-vue2/issues/204)) ([dc6856e](https://github.com/underfin/vite-plugin-vue2/commit/dc6856e528c0b87748f154539f9c71c1cdab2a18))
 16 | 
 17 | 
 18 | 
 19 | ## [2.0.1](https://github.com/underfin/vite-plugin-vue2/compare/v2.0.0...v2.0.1) (2022-05-18)
 20 | 
 21 | 
 22 | ### Bug Fixes
 23 | 
 24 | * HMR identifier conflict ([#196](https://github.com/underfin/vite-plugin-vue2/issues/196)) ([0248eff](https://github.com/underfin/vite-plugin-vue2/commit/0248eff571a64f383b15ae92ea71bef18aa30398))
 25 | 
 26 | 
 27 | ### Features
 28 | 
 29 | * ignore empty style ([#193](https://github.com/underfin/vite-plugin-vue2/issues/193)) ([22410b8](https://github.com/underfin/vite-plugin-vue2/commit/22410b864b2af8d81c478b0cbe8e4caa7cdd8a27))
 30 | 
 31 | 
 32 | 
 33 | # [2.0.0](https://github.com/underfin/vite-plugin-vue2/compare/v1.9.3...v2.0.0) (2022-04-23)
 34 | 
 35 | 
 36 | ### Bug Fixes
 37 | 
 38 | * srcset empty value judgment ([#184](https://github.com/underfin/vite-plugin-vue2/issues/184)) ([32afdd1](https://github.com/underfin/vite-plugin-vue2/commit/32afdd1cfa34826e5b788833e471d9a276c8d66e))
 39 | 
 40 | 
 41 | ### Features
 42 | 
 43 | * migrate vite-plugin-vue2 to use vue-template-babel-compiler ([#179](https://github.com/underfin/vite-plugin-vue2/issues/179)) ([d4a52ed](https://github.com/underfin/vite-plugin-vue2/commit/d4a52ed80fc08c382d99eaa3fbf83cbf077cfe8c))
 44 | 
 45 | 
 46 | 
 47 | ## [1.9.3](https://github.com/underfin/vite-plugin-vue2/compare/v1.9.2...v1.9.3) (2022-01-25)
 48 | 
 49 | 
 50 | ### Bug Fixes
 51 | 
 52 | * fixed HMR of styles on template change ([#153](https://github.com/underfin/vite-plugin-vue2/issues/153)) ([#170](https://github.com/underfin/vite-plugin-vue2/issues/170)) ([38b6d4f](https://github.com/underfin/vite-plugin-vue2/commit/38b6d4f569c203cd0ed74d85f0a46f29d27dc301))
 53 | * update babel dependencies ([#166](https://github.com/underfin/vite-plugin-vue2/issues/166)) ([bf46e25](https://github.com/underfin/vite-plugin-vue2/commit/bf46e2595819dfb5625aa24a3f28069f7c86a04d))
 54 | 
 55 | 
 56 | 
 57 | ## [1.9.2](https://github.com/underfin/vite-plugin-vue2/compare/v1.9.1...v1.9.2) (2022-01-03)
 58 | 
 59 | 
 60 | ### Bug Fixes
 61 | 
 62 | * ensure HMR stays working in SSR ([#160](https://github.com/underfin/vite-plugin-vue2/issues/160)) ([2cb9e0f](https://github.com/underfin/vite-plugin-vue2/commit/2cb9e0f68b5fc14fb69c7bb9ec69cae904d55f5e))
 63 | 
 64 | 
 65 | 
 66 | ## [1.9.1](https://github.com/underfin/vite-plugin-vue2/compare/v1.9.0...v1.9.1) (2022-01-03)
 67 | 
 68 | 
 69 | ### Bug Fixes
 70 | 
 71 | * consider window path at set descriptor cache ([bdfabc9](https://github.com/underfin/vite-plugin-vue2/commit/bdfabc99e8c50930bca5d9144cb1634f40609904)), closes [#129](https://github.com/underfin/vite-plugin-vue2/issues/129)
 72 | * don't inject hmr code in SSR ([#159](https://github.com/underfin/vite-plugin-vue2/issues/159)) ([d84ffec](https://github.com/underfin/vite-plugin-vue2/commit/d84ffecbac16b0bf28c72d285965c82a147a703b))
 73 | * missing sourcemap fields after compiling ts in dev ([#158](https://github.com/underfin/vite-plugin-vue2/issues/158)) ([ee1ff2e](https://github.com/underfin/vite-plugin-vue2/commit/ee1ff2e178426e6ef210a47d1cf8182423ad6e77))
 74 | * no corresponding SFC entry in the cache ([#155](https://github.com/underfin/vite-plugin-vue2/issues/155)) ([e1db32c](https://github.com/underfin/vite-plugin-vue2/commit/e1db32c0700294b723e6a9c3ac97fee315d06891))
 75 | * use correct target types ([f44ecea](https://github.com/underfin/vite-plugin-vue2/commit/f44ecead082014860a5ae8b34264ac0226fa4fa8))
 76 | * windows path contains \u symbols ([#152](https://github.com/underfin/vite-plugin-vue2/issues/152)) ([#154](https://github.com/underfin/vite-plugin-vue2/issues/154)) ([cddd1e9](https://github.com/underfin/vite-plugin-vue2/commit/cddd1e9ff0f0c842478455771f737b5d1aa122d4))
 77 | 
 78 | 
 79 | 
 80 | # [1.9.0](https://github.com/underfin/vite-plugin-vue2/compare/v1.8.2...v1.9.0) (2021-10-15)
 81 | 
 82 | 
 83 | ### Bug Fixes
 84 | 
 85 | * hmr doesn't work when modifying the code of jsx in sfc（[#88](https://github.com/underfin/vite-plugin-vue2/issues/88)） ([#137](https://github.com/underfin/vite-plugin-vue2/issues/137)) ([66d6485](https://github.com/underfin/vite-plugin-vue2/commit/66d648574e634c962ecd38e2ac919c485bff74a6))
 86 | * prevent error when SFC script contains variable named render ([#145](https://github.com/underfin/vite-plugin-vue2/issues/145)) ([7a6f9e9](https://github.com/underfin/vite-plugin-vue2/commit/7a6f9e9a7970683b828bee11893be285bf0a002f))
 87 | 
 88 | 
 89 | ### Features
 90 | 
 91 | * add 'target' options for transform script code ([#141](https://github.com/underfin/vite-plugin-vue2/issues/141)) ([940ec45](https://github.com/underfin/vite-plugin-vue2/commit/940ec45a3fd68bd9ba1b1a8808d96e6cbce13207))
 92 | 
 93 | 
 94 | 
 95 | ## [1.8.2](https://github.com/underfin/vite-plugin-vue2/compare/71c768aedcc708f09b1a5b29c29facfede7bae44...v1.8.2) (2021-09-07)
 96 | 
 97 | 
 98 | ### Bug Fixes
 99 | 
100 | * add '\0' for virtual module ([b3c4a1b](https://github.com/underfin/vite-plugin-vue2/commit/b3c4a1bf02694cb574f03bd2e3c80353619e4028)), closes [#24](https://github.com/underfin/vite-plugin-vue2/issues/24)
101 | * add `filename` option for compile jsx ([f8cd9c4](https://github.com/underfin/vite-plugin-vue2/commit/f8cd9c4b2bbbf6c7159f07833f888be8deac9d6f)), closes [#58](https://github.com/underfin/vite-plugin-vue2/issues/58)
102 | * add default `doctype` option for pug ([65bcf92](https://github.com/underfin/vite-plugin-vue2/commit/65bcf92b99c50a727063057eb40ffaf1d40961ef))
103 | * add miss dependency ([8e9d089](https://github.com/underfin/vite-plugin-vue2/commit/8e9d089863e6c77e835c4184ac46f053aa13fb7c)), closes [#14](https://github.com/underfin/vite-plugin-vue2/issues/14)
104 | * add pure annotations for tree shaking support ([#105](https://github.com/underfin/vite-plugin-vue2/issues/105)) ([3622dae](https://github.com/underfin/vite-plugin-vue2/commit/3622dae6f1d6b3cdebec3a5268b8768ece8d00b2))
105 | * add typescript support for jsx ([ee72c09](https://github.com/underfin/vite-plugin-vue2/commit/ee72c095e1938baf683ce107ec6a2a5062ee8916)), closes [#49](https://github.com/underfin/vite-plugin-vue2/issues/49) [#44](https://github.com/underfin/vite-plugin-vue2/issues/44)
106 | * babel transform ignore babel.config.js file ([#78](https://github.com/underfin/vite-plugin-vue2/issues/78)) ([89cd5ed](https://github.com/underfin/vite-plugin-vue2/commit/89cd5edf72b3e6e62b266b91d9c7afeb6a614f1c))
107 | * babel transform ignore babelrc file ([3735379](https://github.com/underfin/vite-plugin-vue2/commit/3735379f62ec5fbcee5aaee60af23c9c383a08db)), closes [#54](https://github.com/underfin/vite-plugin-vue2/issues/54)
108 | * **build:** resolve template assets reference on build ([94b3899](https://github.com/underfin/vite-plugin-vue2/commit/94b3899a097332dbe1e53ece660d562e65cc4ec0)), closes [#15](https://github.com/underfin/vite-plugin-vue2/issues/15)
109 | * copy sfc descriptor to prevent caching issues ([#9](https://github.com/underfin/vite-plugin-vue2/issues/9)) ([0e13938](https://github.com/underfin/vite-plugin-vue2/commit/0e139381e205722bc8114d6b941b65d039364476))
110 | * **deps:** move `vue-template-compiler` to peerDependencies ([4de9cb8](https://github.com/underfin/vite-plugin-vue2/commit/4de9cb8242551f1f0348e71f5acdb938c750f527))
111 | * **dev:**  script gencode should place top to reflect sourcemap ([#8](https://github.com/underfin/vite-plugin-vue2/issues/8)) ([6ea995d](https://github.com/underfin/vite-plugin-vue2/commit/6ea995d6ef1720c983a6cedd45e8b3f16227ffe4))
112 | * disable vite internal `rollup-plugin-vue` ([26f39d2](https://github.com/underfin/vite-plugin-vue2/commit/26f39d2d3952bffadd937a1c1cedf07062ec0119))
113 | * Don't import from typescript source files ([#125](https://github.com/underfin/vite-plugin-vue2/issues/125)) ([d05f74d](https://github.com/underfin/vite-plugin-vue2/commit/d05f74d802ce524074d9181195fdc4356e08f7e8))
114 | * expose file's full path in development ([#99](https://github.com/underfin/vite-plugin-vue2/issues/99)) ([eb26e6e](https://github.com/underfin/vite-plugin-vue2/commit/eb26e6ea588224a37b727e12d7fd852fe19d3622))
115 | * fallback assets resolve + bump `@vue/component-compiler-utils` ([0d04c91](https://github.com/underfin/vite-plugin-vue2/commit/0d04c9120cb15c691e64b0e70942d4ec58894ab0))
116 | * fix assets alias handling ([fed3acf](https://github.com/underfin/vite-plugin-vue2/commit/fed3acf476341e211dbf93f7de7f4b4d40cfda10)), closes [#26](https://github.com/underfin/vite-plugin-vue2/issues/26) [#21](https://github.com/underfin/vite-plugin-vue2/issues/21)
117 | * fix build ([1ba366f](https://github.com/underfin/vite-plugin-vue2/commit/1ba366f0ef0807882e1b40e10e963c1ae4bdccd2))
118 | * fix ci ([cb3b34c](https://github.com/underfin/vite-plugin-vue2/commit/cb3b34c04ea8946864621d70cd7bc8bb0a38fae0))
119 | * fix dev type error + update package.json ([958ba81](https://github.com/underfin/vite-plugin-vue2/commit/958ba8159702cf4e95ed2905dd38b68787681f95))
120 | * fix playground ([ba74992](https://github.com/underfin/vite-plugin-vue2/commit/ba749922e4c0fd43b8b636679a44ebe4b7991e5b))
121 | * fix some importer from `vite` ([c52e513](https://github.com/underfin/vite-plugin-vue2/commit/c52e513b4badca5c1d678bf13132f8a83d4f0636))
122 | * fix sourcemap ([9d59723](https://github.com/underfin/vite-plugin-vue2/commit/9d59723b6ecbc6f446809ca40b63959e3dc3e92f)), closes [#4](https://github.com/underfin/vite-plugin-vue2/issues/4)
123 | * fix sourcemap for ts ([1e03983](https://github.com/underfin/vite-plugin-vue2/commit/1e0398323e62264ab374352d6a41282d5be23f73)), closes [#70](https://github.com/underfin/vite-plugin-vue2/issues/70)
124 | * fix test ([b43cedf](https://github.com/underfin/vite-plugin-vue2/commit/b43cedf2e4317ada078b93dfe63f80147212ec32))
125 | * fix test ([194f37e](https://github.com/underfin/vite-plugin-vue2/commit/194f37ed2fd3f95da0c251b2909bea900d878a31))
126 | * fix test ([660eb5c](https://github.com/underfin/vite-plugin-vue2/commit/660eb5c06fb4324b218be8813eea8b2510e5ce6e))
127 | * fix vue block src hmr ([606e01b](https://github.com/underfin/vite-plugin-vue2/commit/606e01b8bfca783c741def838c065aca7407c573))
128 | * generate sourcemap ([612d2d5](https://github.com/underfin/vite-plugin-vue2/commit/612d2d5030a89823a12d5a9e78a8a764508585f3)), closes [#34](https://github.com/underfin/vite-plugin-vue2/issues/34)
129 | * handle jsx ([7898936](https://github.com/underfin/vite-plugin-vue2/commit/7898936cd8b00fd0b2daeb1ed3e71c838f6263ff)), closes [#56](https://github.com/underfin/vite-plugin-vue2/issues/56)
130 | * **hmr:** normalize dev path for hmr ([4ffb851](https://github.com/underfin/vite-plugin-vue2/commit/4ffb851619d2c35aa12e7096ef69dd5d2a811511))
131 | * ignore empty style block ([0dd5e0a](https://github.com/underfin/vite-plugin-vue2/commit/0dd5e0a880dfb969e655fc1947c35cf7cfe4da11))
132 | * ignore import transform for absolute urls ([#130](https://github.com/underfin/vite-plugin-vue2/issues/130)) ([0311694](https://github.com/underfin/vite-plugin-vue2/commit/0311694ce71bd2e694c10f39f56237e5cbcd8644))
133 | * move vue-template-compiler to dependencies ([#87](https://github.com/underfin/vite-plugin-vue2/issues/87)) ([0de32c9](https://github.com/underfin/vite-plugin-vue2/commit/0de32c941d8aba66182460470dc990b11584ba0c))
134 | * none vue script block sourcemap ([09259cc](https://github.com/underfin/vite-plugin-vue2/commit/09259cc08f08822db9cb899c5afda36929532de2))
135 | * one block src file is referenced by diffrent vue files ([d9bb288](https://github.com/underfin/vite-plugin-vue2/commit/d9bb288a3a68767afa7b8ce33392a12a83179027)), closes [#116](https://github.com/underfin/vite-plugin-vue2/issues/116)
136 | * parse custom block code correctly. ([#66](https://github.com/underfin/vite-plugin-vue2/issues/66)) ([2d6175b](https://github.com/underfin/vite-plugin-vue2/commit/2d6175b8896dcb4c8c7ed6da81388bbb6a639e4e))
137 | * pass transform with jsx is truly ([97c0916](https://github.com/underfin/vite-plugin-vue2/commit/97c0916ba3e4d0f1c4f1bb9b16f7c1c7d05a17d8)), closes [/github.com/vitejs/vite/issues/970#issuecomment-718461256](https://github.com//github.com/vitejs/vite/issues/970/issues/issuecomment-718461256)
138 | * **playground:** move alias into resolve ([6e03e2c](https://github.com/underfin/vite-plugin-vue2/commit/6e03e2c38e23b01bb18cf2e5f341a131e67751dc))
139 | * remove `@vue/compiler-sfc` dep ([4146ef1](https://github.com/underfin/vite-plugin-vue2/commit/4146ef1401dc13e39b1f00d882e3e399fd1307fe)), closes [#45](https://github.com/underfin/vite-plugin-vue2/issues/45)
140 | * reslove alias assets ([813c89c](https://github.com/underfin/vite-plugin-vue2/commit/813c89cd5312dc9b8b5310afb2517b7ac0f8235f)), closes [#21](https://github.com/underfin/vite-plugin-vue2/issues/21) [#20](https://github.com/underfin/vite-plugin-vue2/issues/20)
141 | * revert add sourcemap for temaplate block ([6fa3cd0](https://github.com/underfin/vite-plugin-vue2/commit/6fa3cd0beae76e5415fb7509681e76b98b4c4417))
142 | * rewrite asset with hash path, avoid name conflict ([b5cf6b1](https://github.com/underfin/vite-plugin-vue2/commit/b5cf6b130d15740f2f061edaf6d1610d37c70a20)), closes [#81](https://github.com/underfin/vite-plugin-vue2/issues/81)
143 | * rewrite default for vue script block ([360b4dd](https://github.com/underfin/vite-plugin-vue2/commit/360b4dd1edac90018ff8a4a71af2a39c02b1509e))
144 | * sfc src import respect alias ([4a834b7](https://github.com/underfin/vite-plugin-vue2/commit/4a834b735ce46f6ab907049e9a051b810729bf64))
145 | * skip rewrite url for id refrence at `xlink:href` at `use` tag ([71b4263](https://github.com/underfin/vite-plugin-vue2/commit/71b42634a359f1c19ae467d805a2421cd38830fc)), closes [#36](https://github.com/underfin/vite-plugin-vue2/issues/36)
146 | * source maps ([#84](https://github.com/underfin/vite-plugin-vue2/issues/84)) ([97f2ca4](https://github.com/underfin/vite-plugin-vue2/commit/97f2ca49d93712492887d43f6a18746646896527))
147 | * **sourcemap:** ignore sourceRoot before merge sourcemap ([2572aaa](https://github.com/underfin/vite-plugin-vue2/commit/2572aaac2755da3f62ecf2644deb22cd6d4a3734)), closes [#11](https://github.com/underfin/vite-plugin-vue2/issues/11)
148 | * special handling for class default export in sfc ([#29](https://github.com/underfin/vite-plugin-vue2/issues/29)) ([3be490d](https://github.com/underfin/vite-plugin-vue2/commit/3be490dbf01983001b610226988b7eb2a131ff40))
149 | * start serve with `vite preview` ([ec972fd](https://github.com/underfin/vite-plugin-vue2/commit/ec972fdd217f0ba1b8e942438a75584c9635337a))
150 | * support jsx script blocks within sfc ([#53](https://github.com/underfin/vite-plugin-vue2/issues/53)) ([ec3f329](https://github.com/underfin/vite-plugin-vue2/commit/ec3f3292c260e464f5d1d456ee878d3afaa98661))
151 | * support no-protocol asset url ([cd171ec](https://github.com/underfin/vite-plugin-vue2/commit/cd171ec833d75dd762d6f020544e6277b1d8c730)), closes [#118](https://github.com/underfin/vite-plugin-vue2/issues/118)
152 | * **template:** tips shouldn't use error to throw, should be use warn ([#89](https://github.com/underfin/vite-plugin-vue2/issues/89)) ([0deeaba](https://github.com/underfin/vite-plugin-vue2/commit/0deeabaa2b3033ab78d50cb41fa1f04ea48686d8))
153 | * update client path + bump vite ([ea635d2](https://github.com/underfin/vite-plugin-vue2/commit/ea635d29285ecbb3792b6ae6ef717d5abf8084c0))
154 | * update test ([cd5a360](https://github.com/underfin/vite-plugin-vue2/commit/cd5a360ef28fcf573b7c84be1ec09b5745306fef))
155 | * use `esbuild` compile ts files ([378622b](https://github.com/underfin/vite-plugin-vue2/commit/378622bd81c1178cf29873e481d80292f7857c91)), closes [/github.com/underfin/vite-plugin-vue2/issues/49#issuecomment-799301238](https://github.com//github.com/underfin/vite-plugin-vue2/issues/49/issues/issuecomment-799301238)
156 | * use `import` rather than dynamic `require` ([#51](https://github.com/underfin/vite-plugin-vue2/issues/51)) ([650e7f5](https://github.com/underfin/vite-plugin-vue2/commit/650e7f58509bffad7c92ccb37720d5ac6bc0ce14))
157 | * use esbuild for ts lang block script ([ee09922](https://github.com/underfin/vite-plugin-vue2/commit/ee09922fee2fcd5cd2dd25118353cdbc9121b3e4))
158 | 
159 | 
160 | ### Features
161 | 
162 | * add `vueTemplateCompiler` option ([3274c05](https://github.com/underfin/vite-plugin-vue2/commit/3274c05b3c5300282adbc3a9eb0375b8746e9f06)), closes [#76](https://github.com/underfin/vite-plugin-vue2/issues/76)
163 | * add allowDeclareFields for babel ts option ([#120](https://github.com/underfin/vite-plugin-vue2/issues/120)) ([798953a](https://github.com/underfin/vite-plugin-vue2/commit/798953af7b273c8d31677632c94c7e1252c956ff))
164 | * custom block ([19f7274](https://github.com/underfin/vite-plugin-vue2/commit/19f7274185dc6694f71d188c6e01efd2b296f75b))
165 | * default compilerOptions: whitespace: 'condense' ([#62](https://github.com/underfin/vite-plugin-vue2/issues/62)) ([ab62cce](https://github.com/underfin/vite-plugin-vue2/commit/ab62cce0569db1bd655816d828f4000faad310dd))
166 | * determine preprocessLang at template block ([#42](https://github.com/underfin/vite-plugin-vue2/issues/42)) ([c206f88](https://github.com/underfin/vite-plugin-vue2/commit/c206f880e740fcb1dce8f9cea404e9323e1fd170))
167 | * **dev:** assets handling ([71c768a](https://github.com/underfin/vite-plugin-vue2/commit/71c768aedcc708f09b1a5b29c29facfede7bae44))
168 | * **dev:** support block src import handling ([fef184b](https://github.com/underfin/vite-plugin-vue2/commit/fef184b6559ebbbace6e6f2a942a31d0f11febd0))
169 | * **dev:** support script block src import handling ([87eaebe](https://github.com/underfin/vite-plugin-vue2/commit/87eaebe160b5befecc603588bc5fddc78d9637c4))
170 | * error handling ([1c430ab](https://github.com/underfin/vite-plugin-vue2/commit/1c430ab7fceeb7a89c67065efb422389218c9cf1))
171 | * import vue file as raw correctly ([#72](https://github.com/underfin/vite-plugin-vue2/issues/72)) ([175beb3](https://github.com/underfin/vite-plugin-vue2/commit/175beb3acc0a776c30be14e72ae3da4670326a0e))
172 | * improve codegen compat, use var __component__ insteadof var component ([#115](https://github.com/underfin/vite-plugin-vue2/issues/115)) ([77d3cac](https://github.com/underfin/vite-plugin-vue2/commit/77d3cac77afdd180ea3c4d46d261d388075096c3))
173 | * JSX handling ([cbd619d](https://github.com/underfin/vite-plugin-vue2/commit/cbd619db062c584b8f6dc9bd76c3a032228a5cfd)), closes [#5](https://github.com/underfin/vite-plugin-vue2/issues/5)
174 | * **jsx:** use `babel-preset-jsx` ([05248ff](https://github.com/underfin/vite-plugin-vue2/commit/05248ffa97ca17adbeccfbe6af64d9053219b9b6)), closes [#17](https://github.com/underfin/vite-plugin-vue2/issues/17)
175 | * support build ([77a989d](https://github.com/underfin/vite-plugin-vue2/commit/77a989da2aad667d08d8894f132c128a4a839c86))
176 | * support decorator at jsx ([08821c6](https://github.com/underfin/vite-plugin-vue2/commit/08821c6457ad22afd11e86d3fa118bc3c7ca7e25)), closes [#113](https://github.com/underfin/vite-plugin-vue2/issues/113) [#106](https://github.com/underfin/vite-plugin-vue2/issues/106)
177 | * support module css ([251e5cc](https://github.com/underfin/vite-plugin-vue2/commit/251e5cc9d72b7280f122ecfc48184b322ff264c2))
178 | * support pass options for plugin ([3041c2d](https://github.com/underfin/vite-plugin-vue2/commit/3041c2de078ee5eba80daeafed845966307a7e7a))
179 | * support vite@2.x ([#13](https://github.com/underfin/vite-plugin-vue2/issues/13)) ([2a9ac82](https://github.com/underfin/vite-plugin-vue2/commit/2a9ac82bc0e6ae4cd4c19e7e9037c5a5f1734478))
180 | 
181 | 
182 | 
183 | 


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