Merge pull request #13485 from NervJS/feat/build-native-comp

feat(h5): 支持组件编译模式
NervJS · Mar 31, 2023 · 4b17fae · 4b17fae
2 parents e2bf5f8 + 9e542e1
commit 4b17fae
Show file tree

Hide file tree

Showing 389 changed files with 32,525 additions and 17,246 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -19,10 +19,11 @@ packages/taro-components-library-vue3/components.ts
 
 packages/taro-webpack-runner/src/__tests__/__snapshots__
 packages/taro-webpack-runner/src/__tests__/fixtures
-
 packages/taro-mini-runner/src/__tests__/__snapshots__
 packages/taro-mini-runner/src/__tests__/fixtures
 packages/taro-mini-runner/src/quickapp
+packages/taro-webpack5-runner/src/__tests__/__snapshots__
+packages/taro-webpack5-runner/src/__tests__/fixtures
 
 packages/taro/types
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "taro",
-  "version": "3.6.2",
+  "version": "3.6.2-canary.2",
   "description": "开放式跨端跨框架开发解决方案",
   "homepage": "https://github.com/NervJS/taro#readme",
   "author": "O2Team",

diff --git a/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/package.json b/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-transform-react-jsx-to-rn-stylesheet",
-  "version": "3.6.2",
+  "version": "3.6.2-canary.2",
   "description": "Transform stylesheet selector to style in JSX Elements.",
   "license": "MIT",
   "main": "dist/index.js",

diff --git a/packages/babel-plugin-transform-taroapi/package.json b/packages/babel-plugin-transform-taroapi/package.json
@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-transform-taroapi",
-  "version": "3.6.2",
+  "version": "3.6.2-canary.2",
   "main": "dist/index.js",
   "scripts": {
     "build": "tsc"

diff --git a/packages/babel-preset-taro/index.js b/packages/babel-preset-taro/index.js
@@ -1,7 +1,7 @@
 const path = require('path')
-const fs = require('fs')
 
 function hasBrowserslist () {
+  const fs = require('fs')
   const root = process.cwd()
   try {
     const pkg = require(path.resolve(root, 'package.json'))
@@ -21,6 +21,7 @@ function hasBrowserslist () {
 }
 
 module.exports = (_, options = {}) => {
+  const isWeb = require('@tarojs/shared').isWebPlatform()
   if (process.env.TARO_ENV === 'rn') {
     const presetForReactNative = require('./rn')
     return presetForReactNative(_, options)
@@ -45,7 +46,7 @@ module.exports = (_, options = {}) => {
     presets.push([require('@babel/preset-react'), {
       runtime: options.reactJsxRuntime || 'automatic'
     }])
-    if (process.env.TARO_ENV === 'h5' && process.env.NODE_ENV !== 'production' && options.hot !== false) {
+    if (isWeb && process.env.NODE_ENV !== 'production' && options.hot !== false) {
       if (options.framework === 'react') {
         plugins.push([require('react-refresh/babel'), { skipEnvCheck: true }])
       } else if (options.framework === 'preact') {
@@ -175,7 +176,7 @@ module.exports = (_, options = {}) => {
     version
   }])
 
-  if (typeof options['dynamic-import-node'] === 'boolean' ? options['dynamic-import-node'] : process.env.TARO_ENV !== 'h5') {
+  if (typeof options['dynamic-import-node'] === 'boolean' ? options['dynamic-import-node'] : !isWeb) {
     plugins.push([require('babel-plugin-dynamic-import-node')])
   }
 

diff --git a/packages/babel-preset-taro/jest.config.js b/packages/babel-preset-taro/jest.config.js
@@ -3,7 +3,7 @@ const path = require('path')
 module.exports = {
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
   moduleNameMapper: {
-    '@tarojs/shared': path.join(__dirname, './packages/shared/src')
+    '@tarojs/shared': path.join(__dirname, '..', '..', 'packages/shared/src')
   },
   preset: 'ts-jest',
   testEnvironment: 'node',

diff --git a/packages/babel-preset-taro/package.json b/packages/babel-preset-taro/package.json
@@ -1,6 +1,6 @@
 {
   "name": "babel-preset-taro",
-  "version": "3.6.2",
+  "version": "3.6.2-canary.2",
   "description": "Taro babel preset",
   "author": "yuche <i@yuche.me>",
   "homepage": "https://github.com/nervjs/taro/tree/master/packages/babel-preset-taro#readme",
@@ -33,7 +33,7 @@
     "@babel/runtime": "^7.14.5",
     "@babel/runtime-corejs3": "^7.14.5",
     "@tarojs/helper": "workspace:*",
-    "@tarojs/taro-h5": "workspace:*",
+    "@tarojs/shared": "workspace:*",
     "babel-plugin-dynamic-import-node": "2.3.3",
     "babel-plugin-global-define": "1.0.3",
     "babel-plugin-jsx-attributes-array-to-object": "0.3.0",

diff --git a/packages/babel-preset-taro/rn/index.js b/packages/babel-preset-taro/rn/index.js
@@ -1,3 +1,4 @@
+const PLATFORM_TYPE = require('@tarojs/shared').PLATFORM_TYPE
 const reactNativeBabelPreset = require('metro-react-native-babel-preset')
 const { merge } = require('lodash')
 const fs = require('fs')
@@ -38,7 +39,8 @@ function getRNConfig () {
 function getEnv () {
   const config = getProjectConfig()
   const envConst = {
-    'process.env.TARO_ENV': 'rn'
+    'process.env.TARO_ENV': 'rn',
+    'process.env.TARO_PLATFORM': PLATFORM_TYPE.RN,
   }
   if (config.env) {
     Object.keys(config.env).forEach((key) => {

diff --git a/packages/create-app/package.json b/packages/create-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/create-app",
-  "version": "3.6.2",
+  "version": "3.6.2-canary.2",
   "description": "create taro app with one command",
   "author": "VincentW <Vincent.Mr.W@gmail.com>",
   "homepage": "https://github.com/nervjs/taro/tree/master/packages/create-app#readme",

diff --git a/packages/css-to-react-native/package.json b/packages/css-to-react-native/package.json
@@ -1,7 +1,7 @@
 {
   "name": "taro-css-to-react-native",
   "description": "Convert CSS text to a React Native stylesheet object",
-  "version": "3.6.2",
+  "version": "3.6.2-canary.2",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [

diff --git a/packages/eslint-config-taro/package.json b/packages/eslint-config-taro/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-taro",
-  "version": "3.6.2",
+  "version": "3.6.2-canary.2",
   "description": "Taro specific linting rules for ESLint",
   "main": "index.js",
   "files": [

diff --git a/packages/postcss-html-transform/package.json b/packages/postcss-html-transform/package.json
@@ -1,6 +1,6 @@
 {
   "name": "postcss-html-transform",
-  "version": "3.6.2",
+  "version": "3.6.2-canary.2",
   "description": "transform html tag name selector",
   "main": "index.js",
   "author": "drchan",

diff --git a/packages/postcss-plugin-constparse/package.json b/packages/postcss-plugin-constparse/package.json
@@ -1,6 +1,6 @@
 {
   "name": "postcss-plugin-constparse",
-  "version": "3.6.2",
+  "version": "3.6.2-canary.2",
   "description": "parse constants defined in config",
   "main": "index.js",
   "author": "Simba",

diff --git a/packages/postcss-pxtransform/__tests__/index.test.js b/packages/postcss-pxtransform/__tests__/index.test.js
@@ -631,6 +631,7 @@ describe('rpx 单位转换', () => {
     const processed = postcss(px2rem(options)).process(rules).css
     expect(processed).toBe('h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}')
   })
+
   it('{platform: \'h5\', designWidth: 640} ', () => {
     const rules = 'h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}'
     const options = {
@@ -642,6 +643,30 @@ describe('rpx 单位转换', () => {
   })
 })
 
+describe('vw 单位转换', () => {
+  it('{platform: \'h5\', designWidth: 640} ', () => {
+    const rules = 'h1 {margin: 0 0 640px;font-size: 40Px;line-height: 1.2;} .test{}'
+    const options = {
+      platform: 'h5',
+      designWidth: 750,
+      targetUnit: 'vw'
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe('h1 {margin: 0 0 85.33333vw;font-size: 40Px;line-height: 1.2;} .test{}')
+  })
+
+  it('{platform: \'h5\', designWidth: 750} ', () => {
+    const rules = 'h1 {margin: 0 0 375px;font-size: 40Px;line-height: 1.2;} .test{}'
+    const options = {
+      platform: 'h5',
+      designWidth: 750,
+      targetUnit: 'vw'
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe('h1 {margin: 0 0 50vw;font-size: 40Px;line-height: 1.2;} .test{}')
+  })
+})
+
 describe('platform 为 rn，适配', () => {
   it('{platform: \'rn\', designWidth: 750} ', () => {
     const rules = 'view { width: 100px; }'

diff --git a/packages/postcss-pxtransform/index.js b/packages/postcss-pxtransform/index.js
@@ -42,13 +42,19 @@ module.exports = (options = {}) => {
   options = Object.assign({}, DEFAULT_WEAPP_OPTIONS, options)
 
   const transUnits = ['px']
-  const baseFontSize = options.baseFontSize || (options.minRootSize >= 1 ? options.minRootSize : 20)
+  let baseFontSize = options.baseFontSize || (options.minRootSize >= 1 ? options.minRootSize : 20)
   const designWidth = (input) =>
     typeof options.designWidth === 'function' ? options.designWidth(input) : options.designWidth
+
   switch (options.platform) {
     case 'h5': {
-      options.rootValue = (input) => (baseFontSize / options.deviceRatio[designWidth(input)]) * 2
-      targetUnit = 'rem'
+      targetUnit = options.targetUnit ?? 'rem'
+      options.rootValue = (input) => {
+        if (targetUnit === 'vw') {
+          baseFontSize = 0.5 * designWidth(input) / 100
+        }
+        return (baseFontSize / options.deviceRatio[designWidth(input)]) * 2 
+      }
       transUnits.push('rpx')
       break
     }
@@ -240,9 +246,12 @@ function createPxReplace (rootValue, unitPrecision, minPixelValue, onePxTransfor
       }
       const pixels = parseFloat($1)
       if (pixels < minPixelValue) return m
-      const fixedVal = toFixed(pixels / rootValue(input, m, $1), unitPrecision)
+      let val = pixels / rootValue(input, m, $1)
+      if (unitPrecision >= 0 && unitPrecision <= 100) {
+        val = toFixed(val, unitPrecision)
+      }
       // 不带单位不支持在calc表达式中参与计算(https://github.com/NervJS/taro/issues/12607)
-      return fixedVal + targetUnit
+      return val + targetUnit
     }
   }
 }

diff --git a/packages/postcss-pxtransform/package.json b/packages/postcss-pxtransform/package.json
@@ -1,6 +1,6 @@
 {
   "name": "postcss-pxtransform",
-  "version": "3.6.2",
+  "version": "3.6.2-canary.2",
   "description": "PostCSS plugin px 转小程序 rpx及h5 rem 单位",
   "main": "index.js",
   "keywords": [

diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/shared",
-  "version": "3.6.2",
+  "version": "3.6.2-canary.2",
   "description": "Taro utils internal use.",
   "author": "yuche <i@yuche.me>",
   "homepage": "https://github.com/nervjs/taro/tree/master/packages/shared#readme",

diff --git a/packages/shared/src/constants.ts b/packages/shared/src/constants.ts
@@ -0,0 +1,25 @@
+export enum PLATFORM_TYPE {
+  MINI = 'mini',
+  WEB = 'web',
+  RN = 'rn',
+  HARMONY = 'harmony',
+  QUICK = 'quickapp'
+}
+
+export const PLATFORM_CONFIG_MAP = {
+  h5: {
+    type: PLATFORM_TYPE.WEB
+  },
+  harmony: {
+    type: PLATFORM_TYPE.HARMONY
+  },
+  mini: {
+    type: PLATFORM_TYPE.MINI
+  },
+  rn: {
+    type: PLATFORM_TYPE.RN
+  },
+  quickapp: {
+    type: PLATFORM_TYPE.QUICK
+  }
+}
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
@@ -1,4 +1,5 @@
 export * from './components'
+export * from './constants'
 export * from './event-emitter'
 export * from './is'
 export * from './native-apis'

diff --git a/packages/shared/src/is.ts b/packages/shared/src/is.ts
@@ -31,3 +31,5 @@ export function isBooleanStringLiteral (o: unknown): o is string {
 }
 
 export const isArray = Array.isArray
+
+export const isWebPlatform = () => process.env.TARO_ENV === 'h5' || process.env.TARO_PLATFORM === 'web'
diff --git a/packages/shared/src/utils.ts b/packages/shared/src/utils.ts
@@ -1,4 +1,5 @@
 import { internalComponents } from './components'
+import { PLATFORM_CONFIG_MAP, PLATFORM_TYPE } from './constants'
 import { hooks } from './runtime-hooks'
 
 export const EMPTY_OBJ: any = {}
@@ -200,6 +201,14 @@ export function getComponentsAlias (origin: typeof internalComponents) {
   return mapping
 }
 
+export function getPlatformType (platform = 'weapp', configNameOrType: string = PLATFORM_TYPE.MINI): PLATFORM_TYPE {
+  if (Object.keys(PLATFORM_CONFIG_MAP).includes(platform)) {
+    configNameOrType = platform
+  }
+  const param = PLATFORM_CONFIG_MAP[configNameOrType] || {}
+  return param.type || configNameOrType
+}
+
 export function mergeReconciler (hostConfig, hooksForTest?) {
   const obj = hooksForTest || hooks
   const keys = Object.keys(hostConfig)

diff --git a/packages/stylelint-config-taro-rn/jest.config.js b/packages/stylelint-config-taro-rn/jest.config.js
@@ -3,7 +3,7 @@ const path = require('path')
 module.exports = {
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
   moduleNameMapper: {
-    '@tarojs/shared': path.join(__dirname, './packages/shared/src')
+    '@tarojs/shared': path.join(__dirname, '..', '..', 'packages/shared/src')
   },
   preset: 'ts-jest',
   testEnvironment: 'node',

diff --git a/packages/stylelint-config-taro-rn/package.json b/packages/stylelint-config-taro-rn/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stylelint-config-taro-rn",
-  "version": "3.6.2",
+  "version": "3.6.2-canary.2",
   "description": "Shareable stylelint config for React Native CSS modules",
   "main": "index.js",
   "files": [

diff --git a/packages/stylelint-taro-rn/package.json b/packages/stylelint-taro-rn/package.json
@@ -1,7 +1,7 @@
 {
   "name": "stylelint-taro-rn",
   "description": "A collection of React Native specific rules for stylelint",
-  "version": "3.6.2",
+  "version": "3.6.2-canary.2",
   "main": "dist/index.js",
   "files": [
     "dist",

diff --git a/packages/taro-alipay/package.json b/packages/taro-alipay/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-platform-alipay",
-  "version": "3.6.2",
+  "version": "3.6.2-canary.2",
   "description": "支付宝小程序平台插件",
   "author": "Chen-jj",
   "homepage": "https://github.com/nervjs/taro/tree/master/packages/taro-alipay#readme",

diff --git a/packages/taro-api/package.json b/packages/taro-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/api",
-  "version": "3.6.2",
+  "version": "3.6.2-canary.2",
   "description": "Taro common API",
   "author": "yuche <i@yuche.me>",
   "homepage": "https://github.com/nervjs/taro/tree/master/packages/api#readme",
@@ -30,7 +30,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.5",
-    "@tarojs/runtime": "workspace:*"
+    "@tarojs/runtime": "workspace:*",
+    "@tarojs/shared": "workspace:*"
   },
   "devDependencies": {
     "@babel/core": "^7.14.5",

diff --git a/packages/taro-api/src/env.js b/packages/taro-api/src/env.js
@@ -1,14 +1,20 @@
+import { isWebPlatform } from '@tarojs/shared'
+
 export const ENV_TYPE = {
   WEAPP: 'WEAPP',
-  WEB: 'WEB',
-  RN: 'RN',
   SWAN: 'SWAN',
   ALIPAY: 'ALIPAY',
   TT: 'TT',
   QQ: 'QQ',
-  JD: 'JD'
+  JD: 'JD',
+  WEB: 'WEB',
+  RN: 'RN',
+  HARMONY: 'HARMONY',
+  QUICKAPP: 'QUICKAPP'
 }
 
+const isWeb = isWebPlatform()
+
 export function getEnv () {
   if (process.env.TARO_ENV === 'weapp') {
     return ENV_TYPE.WEAPP
@@ -22,10 +28,14 @@ export function getEnv () {
     return ENV_TYPE.JD
   } else if (process.env.TARO_ENV === 'qq') {
     return ENV_TYPE.QQ
-  } else if (process.env.TARO_ENV === 'h5') {
+  } else if (isWeb) {
     return ENV_TYPE.WEB
   } else if (process.env.TARO_ENV === 'rn') {
     return ENV_TYPE.RN
+  } else if (process.env.TARO_ENV === 'harmony') {
+    return ENV_TYPE.HARMONY
+  } else if (process.env.TARO_ENV === 'quickapp') {
+    return ENV_TYPE.QUICKAPP
   } else {
     return process.env.TARO_ENV || 'Unknown'
   }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -31,3 +31,5 @@ export function isBooleanStringLiteral (o: unknown): o is string {
		}

		export const isArray = Array.isArray

		export const isWebPlatform = () => process.env.TARO_ENV === 'h5' \|\| process.env.TARO_PLATFORM === 'web'