feat(babel): dynamic-import-node support mini-app

jest.config.js

@@ -19,7 +19,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       diagnostics: false,
-      tsConfig: {
+      tsconfig: {
         jsx: 'react',
         allowJs: true,
         target: 'ES6'

package.json

@@ -81,18 +81,19 @@
     "@types/fs-extra": "^8.0.1",
     "@types/hapi__joi": "16.0.12",
     "@types/history": "^4.7.5",
-    "@types/jest": "^26.0.14",
+    "@types/jest": "^27.4.1",
     "@types/lodash": "^4.14.142",
     "@types/node": "13.7.2",
     "@types/react": "^17.0.0",
     "@types/react-reconciler": "0.26.1",
     "@types/resolve": "1.19.0",
     "@types/sinon": "^7.5.0",
     "@types/tapable": "^1",
+    "@types/testing-library__jest-dom": "^5.14.3",
     "@types/webpack": "^4",
     "@types/webpack-dev-server": "3.11.3",
-    "@typescript-eslint/eslint-plugin": "^4.15.1",
-    "@typescript-eslint/parser": "^4.15.1",
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
     "@vue/compiler-core": "3.0.0",
     "@vue/runtime-core": "3.0.0",
     "@vue/runtime-dom": "3.0.0",
@@ -104,14 +105,14 @@
     "copy": "^0.3.2",
     "cross-env": "^7.0.2",
     "css-loader": "^0.28.10",
-    "eslint": "^6.8.0",
+    "eslint": "^8.12.0",
     "eslint-config-prettier": "^6.4.0",
     "eslint-config-standard": "^14.1.1",
     "eslint-config-standard-jsx": "^8.1.0",
     "eslint-loader": "^2.0.0",
     "eslint-plugin-flowtype": "^3.2.0",
     "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jest": "24.1.5",
+    "eslint-plugin-jest": "26.1.3",
     "eslint-plugin-node": "^10.0.0",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-promise": "^4.2.1",

packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/src/types.ts

@@ -6,7 +6,8 @@ export interface PluginOptions {
   enableMultipleClassName?: boolean
 }
 
+// @ts-ignore
 export interface ConvertPluginPass extends PluginPass {
   file: any
-  opts: PluginOptions | undefined
+  opts?: PluginOptions
 }

packages/babel-preset-taro/__tests__/index.spec.js

@@ -90,9 +90,9 @@ describe('babel-preset-taro', () => {
 
     const [override] = config.overrides
 
-    const [, , [ts, tsConfig]] = override.presets
+    const [, , [ts, tsconfig]] = override.presets
     expect(typeof ts.default === 'function').toBeTruthy()
-    expect(tsConfig.jsxPragma === 'React').toBeTruthy()
+    expect(tsconfig.jsxPragma === 'React').toBeTruthy()
   })
 
   it('typescript nerv', () => {
@@ -103,9 +103,9 @@ describe('babel-preset-taro', () => {
 
     const [override] = config.overrides
 
-    const [, , [ts, tsConfig]] = override.presets
+    const [, , [ts, tsconfig]] = override.presets
     expect(typeof ts.default === 'function').toBeTruthy()
-    expect(tsConfig.jsxPragma === 'Nerv').toBeTruthy()
+    expect(tsconfig.jsxPragma === 'Nerv').toBeTruthy()
   })
 
   it('typescript vue', () => {
@@ -115,10 +115,10 @@ describe('babel-preset-taro', () => {
     })
 
     const [override, vueOverride] = config.overrides
-    const [, , [ts, tsConfig]] = override.presets
+    const [, , [ts, tsconfig]] = override.presets
 
     expect(typeof ts.default === 'function').toBeTruthy()
-    expect(tsConfig.hasOwnProperty('jsxPragma') === false).toBeTruthy()
+    expect(tsconfig.hasOwnProperty('jsxPragma') === false).toBeTruthy()
 
     expect(vueOverride.include.test('a.vue')).toBeTruthy()
   })

packages/babel-preset-taro/index.js

@@ -162,7 +162,7 @@ module.exports = (_, options = {}) => {
       apis
     }])
   }
-  if (options['dynamic-import-node'] || process.env.TARO_ENV !== 'h5') {
+  if (typeof options['dynamic-import-node'] === 'boolean' ? options['dynamic-import-node'] : process.env.TARO_ENV !== 'h5') {
     plugins.push([require('babel-plugin-dynamic-import-node')])
   }
 

packages/eslint-config-taro/README.md

@@ -7,7 +7,7 @@ Taro ESLint config，只有当 ESLint 规则全部都通过时，Taro 小程序
 通过 NPM 安装：
 
 ```bash
-$ npm install eslint babel-eslint eslint-config-taro eslint-plugin-taro eslint-plugin-react eslint-plugin-import --save-dev
+$ npm install eslint @babel/eslint-parser eslint-config-taro eslint-plugin-taro eslint-plugin-react eslint-plugin-import --save-dev
 ```
 
 在 `.eslintrc` 中设置：
@@ -30,4 +30,3 @@ $ npm install eslint babel-eslint eslint-config-taro eslint-plugin-taro eslint-p
 2. 变量定义规则
 3. import 规则 (via [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import))
 4. JSX 规则 (via [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react))
-

packages/eslint-config-taro/index.js

@@ -5,7 +5,7 @@ module.exports = {
     './rules/imports',
     './rules/variables'
   ].map(require.resolve),
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   parserOptions: {
     ecmaVersion: 2018,
     ecmaFeatures: {

packages/eslint-config-taro/package.json

@@ -27,8 +27,8 @@
     "eslint": "*"
   },
   "dependencies": {
-    "@typescript-eslint/parser": "^4.15.1",
-    "babel-eslint": "^10.0.0"
+    "@babel/eslint-parser": "^7.17.0",
+    "@typescript-eslint/parser": "^4.15.1"
   },
   "author": "O2Team",
   "license": "MIT"

packages/eslint-config-taro/vue.js

@@ -5,6 +5,6 @@ module.exports = {
     'plugin:vue/recommended'
   ],
   parserOptions: {
-    parser: require.resolve('babel-eslint')
+    parser: require.resolve('@babel/eslint-parser')
   }
 }

packages/eslint-config-taro/vue3.js

@@ -5,6 +5,6 @@ module.exports = {
     'plugin:vue/vue3-essential'
   ],
   parserOptions: {
-    parser: require.resolve('babel-eslint')
+    parser: require.resolve('@babel/eslint-parser')
   }
 }

packages/taro-cli/package.json

@@ -73,7 +73,7 @@
     "download-git-repo": "^2.0.0",
     "ejs": "^2.6.1",
     "envinfo": "^6.0.1",
-    "eslint": "^6.1.0",
+    "eslint": "^8.12.0",
     "eslint-config-taro": "3.4.4",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-react": "^7.4.0",

packages/taro-cli/src/__tests__/doctor-eslint.spec.ts

@@ -11,38 +11,38 @@ describe('eslint validator of doctor', () => {
     process.chdir(cwd)
   })
 
-  it('should lint for react', () => {
+  it('should lint for react', async () => {
     process.chdir(path.join(__dirname, 'fixtures/default'))
-    const { raw } = validator({
+    const raw = await validator({
       projectConfig: {
         framework: 'react',
         sourceRoot: 'src'
       }
-    })
+    }).then(e => e.raw)
 
     expect(raw).toBe('')
   })
 
-  it('should lint for nerv', () => {
+  it('should lint for nerv', async () => {
     process.chdir(path.join(__dirname, 'fixtures/nerv'))
-    const { raw } = validator({
+    const raw = await validator({
       projectConfig: {
         framework: 'nerv',
         sourceRoot: 'src'
       }
-    })
+    }).then(e => e.raw)
 
     expect(raw.includes('\'a\' is assigned a value but never used'))
   })
 
-  it('should lint for vue', () => {
+  it('should lint for vue', async () => {
     process.chdir(path.join(__dirname, 'fixtures/vue'))
-    const { raw } = validator({
+    const raw = await validator({
       projectConfig: {
         framework: 'vue',
         sourceRoot: 'src'
       }
-    })
+    }).then(e => e.raw)
 
     expect(raw).toBe('')
   })

packages/taro-cli/src/__tests__/fixtures/default/babel.config.js

@@ -0,0 +1,10 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    ['taro', {
+      framework: 'react',
+      ts: false
+    }]
+  ]
+}

packages/taro-cli/src/__tests__/fixtures/default/package.json

@@ -28,11 +28,11 @@
   },
   "devDependencies": {
     "babel-preset-taro": "2.0.0",
+    "eslint": "^8.12.0",
     "eslint-config-taro": "3.0.0-beta.6",
     "babel-plugin-transform-taroapi": "3.0.0-beta.6",
     "eslint-plugin-taro": "3.0.0-beta.6",
     "postcss-plugin-constparse": "3.0.0-beta.6",
-    "postcss-pxtransform": "3.0.0-beta.6",
-    "eslint": "^6.8.0"
+    "postcss-pxtransform": "3.0.0-beta.6"
   }
 }

packages/taro-cli/src/__tests__/fixtures/nerv/babel.config.js

@@ -0,0 +1,10 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    ['taro', {
+      framework: 'react',
+      ts: true
+    }]
+  ]
+}

packages/taro-cli/src/__tests__/fixtures/nerv/package.json

@@ -47,7 +47,7 @@
     "@tarojs/webpack-runner": "3.0.0-rc.0",
     "babel-preset-taro": "3.0.0-rc.0",
     "eslint-config-taro": "3.0.0-rc.0",
-    "eslint": "^6.8.0",
+    "eslint": "^8.12.0",
     "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-react-hooks": "^1.6.1",

packages/taro-cli/src/__tests__/fixtures/vue/babel.config.js

@@ -0,0 +1,10 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    ['taro', {
+      framework: 'vue',
+      ts: false
+    }]
+  ]
+}

packages/taro-cli/src/__tests__/fixtures/vue/package.json

@@ -46,9 +46,9 @@
     "@babel/core": "^7.8.0",
     "@tarojs/webpack-runner": "3.0.0-rc.0",
     "babel-preset-taro": "3.0.0-rc.0",
-    "eslint-plugin-vue": "^6.x",
+    "eslint": "^8.12.0",
     "eslint-config-taro": "3.0.0-rc.0",
-    "eslint": "^6.8.0",
+    "eslint-plugin-vue": "^6.x",
     "stylelint": "9.3.0"
   }
 }

packages/taro-cli/src/doctor/eslintValidator.ts

@@ -1,12 +1,12 @@
 import * as path from 'path'
-import { CLIEngine } from 'eslint'
+import { ESLint } from 'eslint'
 import * as glob from 'glob'
 
-export default function ({ projectConfig }) {
+export default async function ({ projectConfig }) {
   const appPath = process.cwd()
   const globPattern = glob.sync(path.join(appPath, '.eslintrc*'))
 
-  const eslintCli = new CLIEngine({
+  const eslintCli = new ESLint({
     cwd: process.cwd(),
     useEslintrc: Boolean(globPattern.length),
     baseConfig: {
@@ -15,11 +15,11 @@ export default function ({ projectConfig }) {
   })
 
   const sourceFiles = path.join(process.cwd(), projectConfig.sourceRoot, '**/*.{js,ts,jsx,tsx}')
-  const report = eslintCli.executeOnFiles([sourceFiles])
-  const formatter = eslintCli.getFormatter()
+  const report = await eslintCli.lintFiles([sourceFiles])
+  const formatter = await eslintCli.loadFormatter()
 
   return {
     desc: '检查 ESLint (以下为 ESLint 的输出)',
-    raw: formatter(report.results)
+    raw: formatter.format(report)
   }
 }

packages/taro-cli/templates/default/package.json.tmpl

@@ -64,7 +64,7 @@
     "vue-loader": "^16.0.0-beta.8",
     "eslint-plugin-vue": "^7.0.0",<%}%>
     "eslint-config-taro": "<%= version %>",
-    "eslint": "^6.8.0",<% if (framework === 'react' || framework === 'preact' || framework === 'nerv') {%>
+    "eslint": "^8.12.0",<% if (framework === 'react' || framework === 'preact' || framework === 'nerv') {%>
     "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-react-hooks": "^4.2.0",<%}%>

packages/taro-components-react/src/components/view/index.tsx

@@ -25,8 +25,8 @@ class View extends React.Component<IProps, IState> {
     touch: false
   }
 
-  timeoutEvent: NodeJS.Timeout;
-  startTime = 0;
+  timeoutEvent: NodeJS.Timeout
+  startTime = 0
 
   render () {
     const {

packages/taro-components-rn/package.json

@@ -29,7 +29,7 @@
     "@ant-design/react-native": "^4.2.0",
     "@react-native-community/slider": "~4.1.12",
     "@react-native-picker/picker": "~2.2.1",
-    "expo-asset": "^8.3.3",
+    "expo-asset": "~8.3.3",
     "expo-av": "~9.2.3",
     "expo-barcode-scanner": "~10.2.2",
     "expo-camera": "~11.2.2",

packages/taro-components-rn/src/components/MovableView/index.tsx

@@ -15,9 +15,9 @@ class _MovableView extends React.Component<MovableViewProps, any> {
   }
 
   panResponder: any
-  $ref: any = React.createRef();
-  W: any;
-  H: any;
+  $ref: any = React.createRef()
+  W: any
+  H: any
   constructor(props: MovableViewProps) {
     super(props)
     this.state = {

packages/taro-components-rn/src/components/Picker/multiSelector.tsx

@@ -72,7 +72,7 @@ export default class MultiSelector extends React.Component<MultiSelectorProps, M
     value: []
   }
 
-  dismissByOk = false;
+  dismissByOk = false
 
   static getDerivedStateFromProps(nextProps: MultiSelectorProps, lastState: MultiSelectorState): MultiSelectorState | null {
     let ret: any = null