feat: [4.x]完成solid-componets-library 和 babel-plugin-transform-solid-j…

…sx 两个包的开发 (#15539)

* fix(solid): 删除h函数

* feat: add babel-plugin-transform-solid-jsx-ad-taro-components

* feat: 完成babel的solid插件，在小程序端准确编译taroComponent

* chore(babel-solid): 入口文件修改为适配babel的入口

* feat(babel-solid): 解耦getTagName

* fix(solid-babel): 修复solid中对于@tarojs/components的无引用import，收集不到小程序组件bug

* feat(babel-solid): 修改项目的readme及license

* feat(babel-solid): 插件添加h5判断，h5不进行组件转换

* chore: 修改打包文件路径

* feat(babel-solid): 添加测试用例

* chore: eslint ignore babel solid

* chore: 同步收集小程序组件到其他runner中

* chore

* feat: add stencil-solid-output-target

* chore

* feat: 自定义solid-stencil-output

* feat: 初步完成stencil的solid打包

* fix(h5-solid): 顺利编译taro的component，但响应式丢失

* chore: 调整stencil-solid的createComponent

* fix(h5-solid): 修复web-component的solid连接器编译错乱

* fix(h5-solid): 完善stencil-solid的连接器，解决props响应式丢失

* feat: 优化solid-createComponent代码

* chore

* fix: 修复classList失效的bug

* feat: 响应式props及element event不通过props绑定，会造成el多余props显示，采用setAttribute及内部events事件绑定

* chore

* chore: stencil的component同步solid对dom的api调用

* chore: 修改babel-solid文件命名

* chore: 修改babel-solid相关的工程化配置

* chore: 类型命名修改

* chore: eslintignore采用根目录的

* chore: sort packages

* fix: babel-solid的ignore加入，修复eslint暴露的问题

* chore

* chore: solid-components打包对于solid-js及tarojs的包使用外部依赖

* chore: 格式化

* refactor: 依赖治理

* refactor: babel-plugin-transform-solid-jsx 测试命令

* fix: 解决合并造成的问题

---------

Co-authored-by: liuzejia <liuzejia@SZMAC-FV0MR4G7.local>

.gitignore

@@ -83,6 +83,3 @@ artifacts
 
 # Node Addons
 *.node
-
-# harmony-hybrid extend-h5-apis file
-packages/taro-platform-harmony-hybrid/src/api/apis/extend-h5-apis.ts

LICENSE

@@ -165,3 +165,10 @@ Apache-2.0 (intersection-observer):
 The following files embed [intersection-observer](https://github.com/GoogleChromeLabs/intersection-observer) Apache-2.0:
 `/packages/taro-api/src/polyfill/intersection-observer.ts`
 See `/LICENSE.txt` for details of the license.
+
+==================
+
+MIT (babel-plugin-jsx-dom-expressions):
+The following files embed [babel-plugin-jsx-dom-expressions](https://github.com/ryansolid/dom-expressions/blob/main/packages/babel-plugin-jsx-dom-expressions) MIT:
+`/packages/babel-plugin-transform-solid-jsx/src/*`
+See `/LICENSE` for details of the license.

packages/babel-plugin-transform-solid-jsx/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ignorePatterns: ['/test'],
+}

packages/babel-plugin-transform-solid-jsx/README.md

@@ -0,0 +1,51 @@
+# babel-plugin-transform-solid-jsx
+
+fork from [babel-plugin-jsx-dom-expressions](https://github.com/ryansolid/dom-expressions/blob/main/packages/babel-plugin-jsx-dom-expressions) version: 0.37.19
+
+This package is a JSX compiler built for [DOM Expressions](https://github.com/ryansolid/dom-expressions) to provide a general JSX to DOM transformation for reactive libraries that do fine grained change detection. This package aims to convert JSX statements to native DOM statements and wrap JSX expressions with functions that can be implemented with the library of your choice. Sort of like a JSX to Hyperscript for fine change detection.
+
+## What Has Been Modified?
+- Added uniqueTransform configuration, defaulting to false, indicating that the following processing should not be performed.
+- Within the transformElement function of the universal module, perform matching against components from @tarojs/components. Modify the transformation of these components such that they are instead invoked via createElement calls.
+
+### Example
+```jsx
+import { View, Text, Button } from '@tarojs/components';
+
+const Component = () => {
+  return (
+    <View class="index">
+      <View>
+        <Text>Hello world! </Text>
+      </View>
+      <Button>set class</Button>
+    </View>
+  );
+};
+```
+
+Compiles to:
+```jsx
+import { createTextNode as _$createTextNode } from "@tarojs/plugin-framework-react/dist/reconciler";
+import { insertNode as _$insertNode } from "@tarojs/plugin-framework-react/dist/reconciler";
+import { setProp as _$setProp } from "@tarojs/plugin-framework-react/dist/reconciler";
+import { createElement as _$createElement } from "@tarojs/plugin-framework-react/dist/reconciler";
+import { View, Text, Button } from "@tarojs/components";
+export default function Index() {
+  return function () {
+    var _el$ = _$createElement("view"),
+      _el$2 = _$createElement("view"),
+      _el$3 = _$createElement("text"),
+      _el$5 = _$createElement("button");
+    _$insertNode(_el$, _el$2);
+    _$insertNode(_el$, _el$5);
+    _$setProp(_el$, "class", "index");
+    _$insertNode(_el$2, _el$3);
+    _$insertNode(_el$3, _$createTextNode("Hello world! "));
+    _$insertNode(_el$5, _$createTextNode("set class"));
+    return _el$;
+  }();
+}
+```
+
+> The purpose of doing so is to ensure compatibility by aligning the compilation results of Taro components within mini programs with those of original tags.

packages/babel-plugin-transform-solid-jsx/index.js

@@ -0,0 +1,35 @@
+const jsxTransform = require('./dist')
+
+module.exports = function (context, options = {}) {
+  const plugins = [
+    [
+      jsxTransform,
+      Object.assign(
+        {
+          moduleName: 'solid-js/web',
+          builtIns: [
+            'For',
+            'Show',
+            'Switch',
+            'Match',
+            'Suspense',
+            'SuspenseList',
+            'Portal',
+            'Index',
+            'Dynamic',
+            'ErrorBoundary',
+          ],
+          contextToCustomElements: true,
+          wrapConditionals: true,
+          generate: 'dom',
+          uniqueTransform: false,
+        },
+        options
+      ),
+    ],
+  ]
+
+  return {
+    plugins,
+  }
+}

packages/babel-plugin-transform-solid-jsx/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  moduleDirectories: ['node_modules', 'packages'],
+  testEnvironment: 'jsdom',
+  collectCoverageFrom: ['./index.js'],
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+  },
+}

packages/babel-plugin-transform-solid-jsx/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "babel-plugin-transform-solid-jsx",
+  "description": "A JSX to DOM plugin that wraps expressions for fine grained change detection",
+  "version": "4.0.0-beta.45",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NervJS/taro.git"
+  },
+  "bugs": {
+    "url": "https://github.com/NervJS/taro/issues"
+  },
+  "readmeFilename": "README.md",
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "prod": "pnpm run build",
+    "prebuild": "pnpm run clean",
+    "build": "rollup -c",
+    "clean": "rimraf ./dist",
+    "test:ci": "cross-env NODE_ENV=test jest --ci -i",
+    "test": "pnpm run build && jest --no-cache",
+    "test:coverage": "pnpm run build && jest --coverage --no-cache",
+    "prepublishOnly": "pnpm run build",
+    "prepare": "pnpm run build"
+  },
+  "dependencies": {
+    "@babel/helper-module-imports": "7.18.6",
+    "@babel/plugin-syntax-jsx": "^7.18.6",
+    "html-entities": "2.3.3",
+    "validate-html-nesting": "^1.2.1"
+  },
+  "devDependencies": {
+    "babel-plugin-tester": "^11.0.4"
+  }
+}

packages/babel-plugin-transform-solid-jsx/rollup.config.mjs

@@ -0,0 +1,31 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import nodeResolve from '@rollup/plugin-node-resolve'
+
+const __filename = fileURLToPath(new URL(import.meta.url))
+const cwd = path.dirname(__filename)
+
+const plugins = [
+  nodeResolve({
+    rootDir: path.join(cwd, '../..'),
+    moduleDirectories: ['node_modules', 'packages'],
+  }),
+]
+
+export default {
+  input: 'src/index.js',
+  external: [
+    '@babel/plugin-syntax-jsx',
+    '@babel/helper-module-imports',
+    '@babel/types',
+    'html-entities',
+    'validate-html-nesting',
+  ],
+  output: {
+    file: 'dist/index.js',
+    format: 'cjs',
+    exports: 'auto',
+  },
+  plugins,
+}

packages/babel-plugin-transform-solid-jsx/src/VoidElements.js

@@ -0,0 +1,18 @@
+export default [
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'keygen',
+  'link',
+  'menuitem',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr'
+]

packages/babel-plugin-transform-solid-jsx/src/config.js

@@ -0,0 +1,16 @@
+export default {
+  moduleName: 'dom',
+  generate: 'dom',
+  hydratable: false,
+  delegateEvents: true,
+  delegatedEvents: [],
+  builtIns: [],
+  requireImportSource: false,
+  wrapConditionals: true,
+  omitNestedClosingTags: false,
+  contextToCustomElements: false,
+  staticMarker: '@once',
+  effectWrapper: 'effect',
+  memoWrapper: 'memo',
+  validate: true
+}