feat: support vue 3

BREAKING CHANGE: support vue 3 only simplify babel preset, only typescript and env preset upgrade postcss to 8
egoist · Apr 18, 2021 · a423d98 · a423d98
1 parent 0e4c2c9
commit a423d98
Show file tree

Hide file tree

Showing 24 changed files with 1,869 additions and 1,323 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -9,4 +9,7 @@ trim_trailing_whitespace = true
 insert_final_newline = true
 
 [*.md]
-trim_trailing_whitespace = false
+trim_trailing_whitespace = false
+
+[*.test.ts]
+trim_trailing_whitespace = false
diff --git a/.eslintrc b/.eslintrc
@@ -1,10 +1,5 @@
 {
-  "extends": [
-    "xo-typescript",
-    "rem",
-    "prettier",
-    "prettier/@typescript-eslint"
-  ],
+  "extends": ["xo-typescript", "rem", "prettier"],
   "plugins": ["prettier"],
   "env": {
     "jest": true

diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1 @@
-{
-  "semi": false,
-  "singleQuote": true
-}
+"@egoist/prettier-config"
diff --git a/jest.config.js b/jest.config.js
@@ -1,9 +1,9 @@
 module.exports = {
   testEnvironment: 'node',
   transform: {
-    '^.+\\.tsx?$': 'ts-jest'
+    '^.+\\.tsx?$': '@sucrase/jest-plugin',
   },
   testRegex: '(/__test__/.*|(\\.|/)(test|spec))\\.tsx?$',
   testPathIgnorePatterns: ['/node_modules/', '/dist/', '/types/'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
 }
diff --git a/package.json b/package.json
@@ -23,47 +23,47 @@
   "author": "egoist <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-typescript": "^7.0.0",
-    "@vue/component-compiler-utils": "^3.0.0",
-    "babel-preset-minimal": "^0.1.2",
-    "cac": "^6.5.2",
-    "chalk": "^2.4.1",
-    "debug": "^4.1.1",
-    "fast-glob": "^3.0.3",
-    "find-babel-config": "^1.1.0",
-    "fs-extra": "^8.1.0",
-    "is-binary-path": "^2.0.0",
-    "joycon": "^2.1.2",
-    "postcss": "^7.0.6",
-    "postcss-load-config": "^2.0.0",
-    "resolve": "^1.8.1",
+    "@babel/core": "^7.13.15",
+    "@babel/plugin-syntax-typescript": "^7.12.13",
+    "@babel/preset-env": "^7.13.15",
+    "@babel/preset-typescript": "^7.13.0",
+    "@vue/compiler-sfc": "^3.0.11",
+    "cac": "^6.7.2",
+    "chalk": "^4.1.0",
+    "debug": "^4.3.1",
+    "fast-glob": "^3.2.5",
+    "fs-extra": "^9.1.0",
+    "is-binary-path": "^2.1.0",
+    "joycon": "^3.0.1",
+    "postcss": "^8.2.10",
+    "postcss-load-config": "^3.0.1",
+    "resolve": "^1.20.0",
     "resolve-from": "^5.0.0",
-    "stringify-attributes": "^2.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "stringify-attributes": "^2.0.0"
   },
   "devDependencies": {
+    "@egoist/prettier-config": "^0.1.0",
+    "@sucrase/jest-plugin": "^2.1.0",
     "@types/debug": "^4.1.4",
     "@types/fs-extra": "^8.0.0",
     "@types/is-binary-path": "^2.1.0",
     "@types/jest": "^26.0.14",
     "@types/node-sass": "^4.11.0",
     "@types/stringify-attributes": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.4.0",
-    "@typescript-eslint/parser": "^4.4.0",
-    "eslint": "^7.10.0",
-    "eslint-config-prettier": "^6.12.0",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
+    "eslint": "^7.24.0",
+    "eslint-config-prettier": "^8.2.0",
     "eslint-config-rem": "^4.0.0",
-    "eslint-config-xo-typescript": "^0.33.0",
-    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-config-xo-typescript": "^0.38.0",
+    "eslint-plugin-prettier": "^3.4.0",
     "husky": "^4.3.0",
     "jest": "^24.8.0",
     "lint-staged": "^10.4.0",
-    "prettier": "^1.18.2",
+    "prettier": "^2.2.1",
     "stylus": "^0.54.5",
-    "ts-jest": "^26.4.1",
-    "typescript": "^4.0.3",
-    "vue": "^2.6.10"
+    "typescript": "^4.2.4",
+    "vue": "^3.0.11"
   },
   "husky": {
     "hooks": {

diff --git a/src/babel/preset.ts b/src/babel/preset.ts
@@ -1,19 +1,32 @@
 import { PluginObj, types as Types } from '@babel/core'
 import { cssExtensionsRe } from '../utils'
 
-export default (_: any, opts: any = {}) => {
-  const { modern } = opts
+export default (_: any, opts: { transformTypeScript: boolean }) => {
+  const presets = []
+  if (opts.transformTypeScript) {
+    presets.push(require.resolve('@babel/preset-typescript'))
+  }
+  presets.push([
+    require.resolve('@babel/preset-env'),
+    {
+      modules: false,
+      targets: {
+        edge: '79',
+        // Node 12 is no longer maintained, and let's pretend Node 13 didn't exist
+        node: '14',
+        esmodules: true,
+      },
+    },
+  ])
+
+  const plugins = [replaceExtensionInImports]
+  if (!opts.transformTypeScript) {
+    plugins.push(require('@babel/plugin-syntax-typescript'))
+  }
+
   return {
-    presets: [
-      [
-        require.resolve('babel-preset-minimal'),
-        {
-          jsx: 'vue',
-          mode: modern ? 'modern' : undefined
-        }
-      ]
-    ],
-    plugins: [replaceExtensionInImports]
+    presets,
+    plugins,
   }
 }
 
@@ -26,7 +39,7 @@ function replaceExtensionInImports(opts: { types: typeof Types }): PluginObj {
         if (cssExtensionsRe.test(path.node.source.value)) {
           path.node.source.value = path.node.source.value.replace(
             cssExtensionsRe,
-            '.css'
+            '.css',
           )
         }
       },
@@ -37,12 +50,12 @@ function replaceExtensionInImports(opts: { types: typeof Types }): PluginObj {
             const res = arg.evaluate()
             if (res.confident && cssExtensionsRe.test(res.value)) {
               path.node.arguments = [
-                t.stringLiteral(res.value.replace(cssExtensionsRe, '.css'))
+                t.stringLiteral(res.value.replace(cssExtensionsRe, '.css')),
               ]
             }
           }
         }
-      }
-    }
+      },
+    },
   }
 }
diff --git a/src/cli.ts b/src/cli.ts
@@ -3,7 +3,7 @@ import chalk from 'chalk'
 
 if (parseInt(process.versions.node, 10) < 8) {
   console.error(
-    chalk.red('The "vue-compile" module requires Node.js 8 or above!')
+    chalk.red('The "vue-compile" module requires Node.js 8 or above!'),
   )
   console.error(chalk.dim(`Current version: ${process.versions.node}`))
   process.exit(1)
@@ -18,13 +18,13 @@ async function main(): Promise<void> {
 
   cli
     .command('[input]', 'Normalize input file or directory', {
-      ignoreOptionDefaultValue: true
+      ignoreOptionDefaultValue: true,
     })
     .usage('[input] [options]')
     .action(async (input: string, flags: any) => {
       const options = {
         input,
-        ...flags
+        ...flags,
       }
 
       if (!options.input) {
@@ -37,22 +37,22 @@ async function main(): Promise<void> {
         process.env.DEBUG = `vue-compile:${options.debug}`
       }
 
-      const { createCompiler } = await import(".")
+      const { createCompiler } = await import('.')
 
       if (!options.input) {
-        return cli.outputHelp()
+        cli.outputHelp(); return;
       }
 
       const compiler = createCompiler(options)
 
       compiler.on('normalized', async (input: string, output: string) => {
         if (!compiler.options.debug) {
-           const { humanlizePath } = await import('./utils')
+          const { humanlizePath } = await import('./utils')
 
           console.log(
             `${chalk.magenta(humanlizePath(input))} ${chalk.dim(
-              '->'
-            )} ${chalk.green(humanlizePath(output))}`
+              '->',
+            )} ${chalk.green(humanlizePath(output))}`,
           )
         }
       })
@@ -62,17 +62,14 @@ async function main(): Promise<void> {
     .option('-o, --output <file|directory>', 'Output path')
     .option(
       '-i, --include <glob>',
-      'A glob pattern to include from input directory'
+      'A glob pattern to include from input directory',
     )
     .option(
       '-e, --exclude <glob>',
-      'A glob pattern to exclude from input directory'
+      'A glob pattern to exclude from input directory',
     )
     .option('--no-babelrc', 'Disable .babelrc file')
-    .option(
-      '--modern',
-      'Only supports browsers that support <script type="module">'
-    )
+    .option('--preserve-ts-block', `Preserve TypeScript types in script block`)
 
   cli.option('--debug', 'Show debug logs')
 

diff --git a/src/compileScript.ts b/src/compileScript.ts
@@ -1,11 +1,11 @@
-import { SFCBlock } from '@vue/component-compiler-utils'
+import { SFCScriptBlock } from '@vue/compiler-sfc'
 import { notSupportedLang } from './utils'
 import { ScriptCompilerContext } from './types'
 
 export const compileScript = async (
-  script: SFCBlock | null,
-  ctx: ScriptCompilerContext
-): Promise<SFCBlock | null> => {
+  script: SFCScriptBlock | null,
+  ctx: ScriptCompilerContext,
+): Promise<SFCScriptBlock | null> => {
   if (!script) return script
 
   const code = script.content.replace(/^\/\/$/gm, '')
@@ -17,9 +17,9 @@ export const compileScript = async (
     script.lang === 'ts' ||
     script.lang === 'typescript'
   ) {
-    script.content = await import('./script-compilers/babel').then(
-      async ({ compile }) => compile(code, ctx)
-    )
+    script.content = await import(
+      './script-compilers/babel'
+    ).then(async ({ compile }) => compile(code, ctx))
   } else {
     throw new Error(notSupportedLang(script.lang, 'script'))
   }

diff --git a/src/compileStyles.ts b/src/compileStyles.ts
@@ -1,36 +1,45 @@
-import { SFCBlock } from '@vue/component-compiler-utils'
+import { SFCStyleBlock } from '@vue/compiler-sfc'
 import { notSupportedLang } from './utils'
 
 export const compileStyles = async (
-  styles: SFCBlock[],
-  { filename }: { filename: string }
-): Promise<SFCBlock[]> => {
+  styles: SFCStyleBlock[],
+  { filename }: { filename: string },
+): Promise<SFCStyleBlock[]> => {
   return Promise.all(
-    styles.map(async style => {
+    styles.map(async (style) => {
       // Do not handle "src" import
       // Until we figure out how to handle it
       if (style.src) return style
 
       const { content } = style
 
       if (style.lang === 'stylus') {
-        style.content = await require('./style-compilers/stylus').compile(content, {
-          filename
-        })
+        style.content = await require('./style-compilers/stylus').compile(
+          content,
+          {
+            filename,
+          },
+        )
       } else if (!style.lang || style.lang === 'postcss') {
-        style.content = await require('./style-compilers/postcss').compile(content, {
-          filename
-        })
+        style.content = await require('./style-compilers/postcss').compile(
+          content,
+          {
+            filename,
+          },
+        )
       } else if (style.lang === 'scss' || style.lang === 'sass') {
-        style.content = await require('./style-compilers/sass').compile(content, {
-          filename,
-          indentedSyntax: style.lang === 'sass'
-        })
+        style.content = await require('./style-compilers/sass').compile(
+          content,
+          {
+            filename,
+            indentedSyntax: style.lang === 'sass',
+          },
+        )
       } else if (style.lang) {
         throw new Error(notSupportedLang(style.lang, 'style'))
       }
 
       return style
-    })
+    }),
   )
 }
diff --git a/src/compileTemplate.ts b/src/compileTemplate.ts
@@ -1,3 +1,4 @@
-import { SFCBlock } from '@vue/component-compiler-utils'
+import { SFCTemplateBlock } from '@vue/compiler-sfc'
 
-export const compileTemplate = <T = SFCBlock | null>(template: T): T => template
+export const compileTemplate = <T = SFCTemplateBlock | null>(template: T): T =>
+  template