feat: stencil组件

packages/taro-platform-harmony-hybrid/package.json

@@ -38,6 +38,7 @@
   "dependencies": {
     "@tarojs/api": "workspace:*",
     "@tarojs/components": "workspace:*",
+    "@tarojs/harmony-components": "workspace:*",
     "@tarojs/components-react": "workspace:*",
     "@tarojs/router": "workspace:*",
     "@tarojs/runtime": "workspace:*",

packages/taro-platform-harmony-hybrid/rollup.config.ts

@@ -1,17 +1,12 @@
 import commonjs from '@rollup/plugin-commonjs'
 import json from '@rollup/plugin-json'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
-// import  resolve  from '@rollup/plugin-node-resolve2'
 import { merge } from 'lodash'
 import path from 'path'
 import { defineConfig } from 'rollup'
 import externals from 'rollup-plugin-node-externals'
-import postcss from 'rollup-plugin-postcss'
 import ts from 'rollup-plugin-ts'
-import typescript from 'rollup-plugin-typescript2'
-import vue2 from 'rollup-plugin-vue2'
 
-// import vue3 from 'rollup-plugin-vue3'
 import exportNameOnly from './build/rollup-plugin-export-name-only'
 
 import type { InputPluginOption, RollupOptions } from 'rollup'
@@ -45,9 +40,6 @@ function getPlugins<T = InputPluginOption> (pre: T[] = [], post: T[] = []) {
         sourceMap: true,
       })
     }),
-    postcss({
-      inject: { insertAt: 'top' }
-    }),
     commonjs(),
     ...post
   ]
@@ -69,7 +61,7 @@ const variesConfig: RollupOptions[] = [{
     'src/api/apis/taro.ts', // APIS
     'src/api/index.ts', // APIS
     'src/components/react/index.ts', // React 组件
-    // 'src/components/vue2/index.ts', // vue2 组件
+    'src/components/vue2/index.ts', // vue2 组件
     'src/components/vue3/index.ts', // vue3 组件
     'src/runtime/index.ts', // 供 Loader 使用的运行时入口
     'src/runtime/apis/index.ts', // API 入口
@@ -84,67 +76,7 @@ const variesConfig: RollupOptions[] = [{
     deps: true,
     devDeps: false,
   })])
-},{
-  input: [
-    'src/components/vue2/index.ts', // vue2 组件
-    // 'src/components/vue3/index.ts', // vue3 组件
-  ],
-  output: {
-    dir: 'dist',
-    preserveModules: true,
-    preserveModulesRoot: 'src'
-  },
-  plugins: [
-    nodeResolve({
-      preferBuiltins: false,
-      mainFields: ['main:harmony-hybrid', 'browser', 'module', 'jsnext:main', 'main']
-    }),
-    json({
-      compact: true,
-      preferConst: true,
-    }),
-    postcss({
-      inject: { insertAt: 'top' }
-    }),
-    ts({
-      tsconfig: e => ({
-        ...e,
-        declaration: true,
-        sourceMap: true,
-      })
-    }),
-    typescript({
-      tsconfigOverride: {
-        compilerOptions: {
-          declaration: true
-        }
-      }
-    }),
-    vue2(),
-    commonjs(),
-  ]
-},{
-//   input: [
-//     'src/components/vue3/index.ts', // vue3 组件
-//   ],
-//   output: {
-//     dir: 'dist',
-//     preserveModules: true,
-//     preserveModulesRoot: 'src'
-//   },
-//   plugins: [
-//     typescript(),
-//     resolve({
-//       preferBuiltins: false,
-//       mainFields: ['main:harmony-hybrid', 'browser', 'module', 'jsnext:main', 'main']
-//     }),
-//     vue2(),
-//     postcss({
-//       inject: { insertAt: 'top' }
-//     }),
-//     commonjs(),
-//   ]
-// }, {
+}, {
   input: path.join(cwd, 'src/runtime/apis/index.ts'), // 供 babel-plugin-transform-taroapi 使用，为了能 tree-shaking
   output: {
     file: 'dist/taroApis.js',

packages/taro-platform-harmony-hybrid/src/components/components-library-react/.babelrc.json

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "taro",
+      {
+        "absoluteRuntime": false,
+        "framework": "react",
+        "hot": false,
+        "modules": false,
+        "ts": true
+      }
+    ]
+  ]
+}

packages/taro-platform-harmony-hybrid/src/components/components-library-react/.gitignore

@@ -0,0 +1,2 @@
+# Stencil autogenerated
+src/components.ts

packages/taro-platform-harmony-hybrid/src/components/components-library-react/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@tarojs/harmony-components-library-react",
+  "version": "3.6.23",
+  "description": "Taro 组件库 React 版本库",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "build:ci": "run-s clean prod",
+    "clean": "rimraf ../harmony-components/lib/react",
+    "dev": "pnpm run prod -w",
+    "preprod": "node ./scripts/fix.js",
+    "prod": "rollup -c"
+  },
+  "keywords": [],
+  "author": "ZakaryCode",
+  "license": "MIT",
+  "dependencies": {
+    "@tarojs/harmony-components": "workspace:*",
+    "react-dom": "^18.2.0",
+    "tslib": "^2.6.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.14.5",
+    "@babel/core": "^7.14.5",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^8.0.0",
+    "@types/node": "^14.14.31",
+    "babel-preset-taro": "workspace:*",
+    "postcss": "^8.4.18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^2.79.0",
+    "rollup-plugin-node-externals": "^5.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-ts": "^3.0.2",
+    "typescript": "^4.7.4"
+  }
+}

packages/taro-platform-harmony-hybrid/src/components/components-library-react/rollup.config.js

@@ -0,0 +1,41 @@
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import externals from 'rollup-plugin-node-externals'
+import postcss from 'rollup-plugin-postcss'
+import ts from 'rollup-plugin-ts'
+
+const config = {
+  input: ['src/index.ts', 'src/component-lib/index.ts'],
+  output: {
+    dir: '../harmony-components/lib/react',
+    exports: 'named',
+    preserveModules: true,
+    preserveModulesRoot: 'src',
+    sourcemap: true
+  },
+  treeshake: false,
+  plugins: [
+    externals({
+      deps: true,
+      devDeps: false,
+      include: ['react', 'react-dom']
+    }),
+    resolve({
+      preferBuiltins: false,
+      mainFields: ['main:h5', 'browser', 'module', 'jsnext:main', 'main']
+    }),
+    ts({
+      sourceMap: true,
+    }),
+    commonjs({
+      transformMixedEsModules: true,
+      dynamicRequireTargets: ['./src/**/*.js']
+    }),
+    postcss({
+      inject: { insertAt: 'top' },
+      minimize: true,
+    }),
+  ]
+}
+
+export default config

packages/taro-platform-harmony-hybrid/src/components/components-library-react/scripts/fix.js

@@ -0,0 +1,39 @@
+const fs = require('@tarojs/helper').fs
+const path = require('path')
+
+const componentsPath = path.resolve(__dirname, '..', 'src/components.ts')
+// const avoidErrorType = ['Input', 'ScrollView']
+
+if (fs.existsSync(componentsPath)) {
+  const codeBuffer = fs.readFileSync(componentsPath)
+  let code = codeBuffer.toString().replace(/import\stype\s\{\s([^}]*)\s\}\sfrom\s'@tarojs\/harmony-components[^']*';/ig, `import type { $1 } from '@tarojs/harmony-components/dist/types/components';`)
+  code = code.replace(/const\sTaro([A-Za-z]+)\s=/g, 'const $1 =').replace(/const\s([A-Za-z]+)Core\s=/g, 'const $1 =')
+
+  // NOTE: HTMLStencilElement 与 HTMLTaroInputCoreElement 在 force 参数上冲突
+  // const avoidType = avoidErrorType.join('|')
+  // code = code.replace(
+  //   new RegExp(`createReactComponent<JSX.Taro(${avoidType})Core, HTMLTaro(${avoidType})CoreElement>`, 'ig'),
+  //   'createReactComponent<JSX.Taro$1Core, any>'
+  // )
+
+  if (code.includes('defineCustomElement as define')) {
+    code = code.replace(/import\s\{\sdefineCustomElement\sas\sdefine([A-Za-z]+)\s.*/g, '// @ts-ignore\nimport { defineCustomElement$1 as define$1 } from \'@tarojs/harmony-components/dist/components\';')
+  }
+
+  /**
+   * 当前不支持配置通用的 manipulatePropsFunction 方法，因此需要手动添加
+   * https://github.com/ionic-team/stencil-ds-output-targets/issues/243
+   */
+  if (!code.includes('./helper')) {
+    code = code.replace('/* auto-generated react proxies */', `/* auto-generated react proxies */\nimport { manipulatePropsFunction } from './helper'`)
+    code = code.replace(/\(([^,)]+)[^;]*,\s([^,]+)\);/ig, '($1, undefined, manipulatePropsFunction, $2);')
+  }
+
+  if (!code.includes('Fragment')) {
+    const comps = ['Block']
+    code = code.replace('/* auto-generated react proxies */', `/* auto-generated react proxies */\nimport { Fragment } from 'react'`)
+    code = code.replace(new RegExp(`export const (${comps.join('|')}) = \\/\\*\\@__PURE__\\*\\/createReactComponent.*`, 'ig'), 'export const $1 = Fragment;')
+  }
+
+  fs.writeFileSync(componentsPath, code)
+}

packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/component-lib/index.ts

@@ -0,0 +1,75 @@
+import { Fragment } from 'react'
+
+import reactifyWc from './reactify-wc'
+
+// 视图容器
+export const CoverImage = /* @__PURE__ */ reactifyWc('taro-cover-image-core')
+export const CoverView = /* @__PURE__ */ reactifyWc('taro-cover-view-core')
+export const MatchMedia = /* @__PURE__ */ reactifyWc('taro-match-media-core')
+export const MovableArea = /* @__PURE__ */ reactifyWc('taro-movable-area-core')
+export const MovableView = /* @__PURE__ */ reactifyWc('taro-movable-view-core')
+export const PageContainer = /* @__PURE__ */ reactifyWc('taro-page-container-core')
+export const RootPortal = /* @__PURE__ */ reactifyWc('taro-root-portal-core')
+export const ScrollView = /* @__PURE__ */ reactifyWc('taro-scroll-view-core')
+export const ShareElement = /* @__PURE__ */ reactifyWc('taro-share-element-core')
+export const Swiper = /* @__PURE__ */ reactifyWc('taro-swiper-core')
+export const SwiperItem = /* @__PURE__ */ reactifyWc('taro-swiper-item-core')
+export const View = /* @__PURE__ */ reactifyWc('taro-view-core')
+
+// 基础内容
+export const Icon = /* @__PURE__ */ reactifyWc('taro-icon-core')
+export const Progress = /* @__PURE__ */ reactifyWc('taro-progress-core')
+export const RichText = /* @__PURE__ */ reactifyWc('taro-rich-text-core')
+export const Text = /* @__PURE__ */ reactifyWc('taro-text-core')
+
+// 表单组件
+export const Button = /* @__PURE__ */ reactifyWc('taro-button-core')
+export const Checkbox = /* @__PURE__ */ reactifyWc('taro-checkbox-core')
+export const CheckboxGroup = /* @__PURE__ */ reactifyWc('taro-checkbox-group-core')
+export const Editor = /* @__PURE__ */ reactifyWc('taro-editor-core')
+export const Form = /* @__PURE__ */ reactifyWc('taro-form-core')
+export { default as Input } from './input'
+export const KeyboardAccessory = /* @__PURE__ */ reactifyWc('taro-keyboard-accessory-core')
+export const Label = /* @__PURE__ */ reactifyWc('taro-label-core')
+export const Picker = /* @__PURE__ */ reactifyWc('taro-picker-core')
+export const PickerView = /* @__PURE__ */ reactifyWc('taro-picker-view-core')
+export const PickerViewColumn = /* @__PURE__ */ reactifyWc('taro-picker-view-column-core')
+export const Radio = /* @__PURE__ */ reactifyWc('taro-radio-core')
+export const RadioGroup = /* @__PURE__ */ reactifyWc('taro-radio-group-core')
+export const Slider = /* @__PURE__ */ reactifyWc('taro-slider-core')
+export const Switch = /* @__PURE__ */ reactifyWc('taro-switch-core')
+export const Textarea = /* @__PURE__ */ reactifyWc('taro-textarea-core')
+
+// 导航
+export const FunctionalPageNavigator = /* @__PURE__ */ reactifyWc('taro-functional-page-navigator-core')
+export const Navigator = /* @__PURE__ */ reactifyWc('taro-navigator-core')
+export const NavigationBar = /* @__PURE__ */ reactifyWc('taro-navigation-bar-core')
+
+// 媒体组件
+export const Audio = /* @__PURE__ */ reactifyWc('taro-audio-core')
+export const Camera = /* @__PURE__ */ reactifyWc('taro-camera-core')
+export const Image = /* @__PURE__ */ reactifyWc('taro-image-core')
+export const LivePlayer = /* @__PURE__ */ reactifyWc('taro-live-player-core')
+export const LivePusher = /* @__PURE__ */ reactifyWc('taro-live-pusher-core')
+export const Video = /* @__PURE__ */ reactifyWc('taro-video-core')
+export const VoipRoom = /* @__PURE__ */ reactifyWc('taro-voip-room-core')
+
+// 地图
+export const Map = /* @__PURE__ */ reactifyWc('taro-map-core')
+
+// 画布
+export const Canvas = /* @__PURE__ */ reactifyWc('taro-canvas-core')
+
+// 开放能力
+export const Ad = /* @__PURE__ */ reactifyWc('taro-ad-core')
+export const AdCustom = /* @__PURE__ */ reactifyWc('taro-ad-custom-core')
+export const OfficialAccount = /* @__PURE__ */ reactifyWc('taro-official-account-core')
+export const OpenData = /* @__PURE__ */ reactifyWc('taro-open-data-core')
+export const WebView = /* @__PURE__ */ reactifyWc('taro-web-view-core')
+
+// 页面属性配置节点
+export const PageMeta = /* @__PURE__ */ reactifyWc('taro-page-meta-core')
+
+// 其他
+export const Block = Fragment
+export const CustomWrapper = /* @__PURE__ */ reactifyWc('taro-custom-wrapper-core')

packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/component-lib/input.ts

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import reactifyWc from './reactify-wc'
+
+const Input = reactifyWc('taro-input-core')
+
+const h = React.createElement
+
+// eslint-disable-next-line react/display-name
+export default React.forwardRef((props, ref) => {
+  const args: Record<string, unknown> = { ...props }
+
+  if (args.hasOwnProperty('focus')) {
+    args.autoFocus = Boolean(args.focus)
+    delete args.focus
+  }
+
+  return (
+    h(Input, { ...args, ref })
+  )
+})