feat: migrate vite-plugin-vue2 to use vue-template-babel-compiler (#179)

NikhilVerma · antfu · web-flow · commit d4a52ed80fc0 · 2022-04-23T18:59:56.000+08:00
Co-authored-by: Anthony Fu &lt;anthonyfu117@hotmail.com&gt;
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@ dist
 *.local
 yarn-error.log
 .idea/
-.history/
+.history/
+.vscode
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1 @@
+playground
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,5 @@
-semi: false
-singleQuote: true
-printWidth: 80
+{
+    "semi": false,
+    "singleQuote": true,
+    "printWidth": 80
+}
diff --git a/index.d.ts b/index.d.ts
@@ -1 +1 @@
-declare module 'vue-template-es2015-compiler'
+declare module 'vue-template-babel-compiler'
diff --git a/package.json b/package.json
@@ -44,6 +44,15 @@
     "@babel/parser": "^7.16.10",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-decorators": "^7.16.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
+    "@babel/plugin-transform-arrow-functions": "^7.14.5",
+    "@babel/plugin-transform-block-scoping": "^7.14.5",
+    "@babel/plugin-transform-computed-properties": "^7.14.5",
+    "@babel/plugin-transform-destructuring": "^7.14.5",
+    "@babel/plugin-transform-parameters": "^7.14.5",
+    "@babel/plugin-transform-spread": "^7.14.5",
     "@babel/plugin-transform-typescript": "^7.16.8",
     "@rollup/pluginutils": "^4.1.1",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
@@ -59,7 +68,7 @@
     "rollup": "^2.58.0",
     "slash": "^3.0.0",
     "source-map": "^0.7.3",
-    "vue-template-es2015-compiler": "^1.9.1"
+    "vue-template-babel-compiler": "^1.1.3"
   },
   "peerDependencies": {
     "vite": "^2.0.0-beta.23",
@@ -70,18 +79,18 @@
     "@types/debug": "^4.1.7",
     "@types/fs-extra": "^9.0.13",
     "@types/hash-sum": "^1.0.0",
-    "@types/jest": "^27.0.2",
+    "@types/jest": "^27.4.1",
     "@types/node": "^16.10.3",
-    "@types/puppeteer": "^5.4.4",
+    "@types/puppeteer": "^5.4.5",
     "bumpp": "^7.1.1",
     "conventional-changelog-cli": "^2.1.1",
     "execa": "^4.1.0",
-    "jest": "^26.6.3",
+    "jest": "^27.5.1",
     "lint-staged": "^10.5.4",
-    "puppeteer": "^10.4.0",
-    "ts-jest": "^26.5.6",
-    "typescript": "^4.4.3",
-    "vite": "^2.7.10",
+    "puppeteer": "^13.5.1",
+    "ts-jest": "^27.1.3",
+    "typescript": "^4.6.2",
+    "vite": "^2.8.6",
     "vue-template-compiler": "^2.6.14",
     "yorkie": "^2.0.0"
   }
diff --git a/playground/App.vue b/playground/App.vue
@@ -1,16 +1,17 @@
 <template>
   <div>
     <h1>Vite-Plugin-Vue2 Playground</h1>
-    <TestMultiplySrcImport/>
-    <TestBlockSrcImport/>
-    <TestScopedCss/>
-    <TestCssModules/>
-    <TestCustomBlock/>
-    <TestHmr/>
-    <TestAssets/>
-    <TestJsx/>
-    <TestJsxSFC/> 
-    <TestDecorator/>
+    <TestMultiplySrcImport />
+    <TestBlockSrcImport />
+    <TestScopedCss />
+    <TestCssModules />
+    <TestCustomBlock />
+    <TestHmr />
+    <TestAssets />
+    <TestJsx />
+    <TestJsxSFC />
+    <TestDecorator />
+    <TestES2020Features />
   </div>
 </template>
 
@@ -25,6 +26,7 @@ import TestAssets from './test-assets/TestAssets.vue'
 import TestJsx from './TestJsx.tsx'
 import TestJsxSFC from './TestJsxSFC.vue'
 import TestDecorator from './TestDecorator.tsx'
+import TestES2020Features from './TestES2020Features.vue'
 
 export default {
   name: 'App',
@@ -38,7 +40,8 @@ export default {
     TestAssets,
     TestJsx,
     TestJsxSFC,
-    TestDecorator
-  }
+    TestDecorator,
+    TestES2020Features,
+  },
 }
 </script>
diff --git a/playground/TestES2020Features.vue b/playground/TestES2020Features.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <h2>ES2020 Features</h2>
+    <h3>Nullish Coalescing and Optional Chaining</h3>
+    <code>
+      [nullish.a.b.c.d ?? 'not found']
+      <br />
+      //returns {{ nullish.a.d?.e ?? 'not found' }}
+      <br />
+      <br />
+      [nullish.a.b.c ?? 'not found']
+      <br />
+      //returns {{ nullish.a.b.c ?? 'not found' }}
+    </code>
+    <h3>Spread Operator</h3>
+    <code>
+      ["Test", 1, ...('abc').split('')]
+      <br />
+      //returns {{ ['Test', 1, ...'abc'.split('')] }}
+    </code>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'TestES2020Features',
+
+  data: {
+    spreadArray: ['s', 'p', 'r', 'ead'],
+  },
+
+  computed: {
+    nullish() {
+      return {
+        a: {
+          d: undefined as unknown as undefined | { e: string },
+          b: {
+            c: '2',
+          },
+        },
+      }
+    },
+  },
+})
+</script>
diff --git a/playground/package.json b/playground/package.json
@@ -9,12 +9,13 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "vue": "^2.6.11",
+    "vue": "^2.6.14",
     "vue-class-component": "^7.2.6",
     "vue-property-decorator": "9.1.2"
   },
   "devDependencies": {
-    "vite": "^2.0.0-beta.23",
-    "vue-template-compiler": "^2.6.12"
+    "@vue/runtime-dom": "^3.2.31",
+    "vite": "^2.8.6",
+    "vue-template-babel-compiler": "^1.1.3"
   }
 }
diff --git a/playground/shims.d.ts b/playground/shims.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import Vue from 'vue'
+
+  export default Vue
+}
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "ES2019",
+    "moduleResolution": "node",
+    "alwaysStrict": true,
+    "strict": true,
+    "declaration": true,
+    "noUnusedLocals": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "strictNullChecks": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitAny": true,
+    "removeComments": false,
+    "experimentalDecorators": true,
+    "module": "ESNext",
+    "lib": ["esnext", "dom"],
+    "sourceMap": true
+  },
+  "include": ["./"],
+  "vueCompilerOptions": {
+    "experimentalCompatMode": 2,
+    "experimentalTemplateCompilerOptions": {
+      "compatConfig": { "Mode": 2 }
+    }
+  }
+}
diff --git a/playground/yarn.lock b/playground/yarn.lock
diff --git a/src/index.ts b/src/index.ts
diff --git a/src/template/compileTemplate.ts b/src/template/compileTemplate.ts
diff --git a/test/util.ts b/test/util.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-declare module 'vue-template-es2015-compiler'`
	`1`	`+declare module 'vue-template-babel-compiler'`