Match-id-8083b7719ad52cfe90d5a4ecfff5bc11c0504335

.gitignore

@@ -4,3 +4,4 @@ build/
 .vscode
 package-lock.json
 libs/**/dist
+demo

.prettierrc.js

@@ -10,7 +10,7 @@ module.exports = {
   jsxSingleQuote: false, // 在JSX中使用双引号
   trailingComma: 'es5', // 使用尾逗号(对象、数组等)
   bracketSpacing: true, // 对象的括号间增加空格
-  jsxBracketSameLine: false, // 将多行JSX元素的>放在最后一行的末尾
+  bracketSameLine: false, // 将多行JSX元素的>放在最后一行的末尾
   arrowParens: 'avoid', // 在唯一的arrow函数参数周围省略括号
   vueIndentScriptAndStyle: false, // 不缩进Vue文件中的<script>和<style>标记内的代码
   endOfLine: 'lf', // 仅限换行（\n）

libs/horizon-jsx-transform-babel-plugin/.babelrc

@@ -1,25 +0,0 @@
-{
-  "plugins": [
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-syntax-import-meta",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-json-strings",
-    [
-      "@babel/plugin-proposal-decorators",
-      {
-        "legacy": true
-      }
-    ],
-    "@babel/plugin-proposal-function-sent",
-    "@babel/plugin-proposal-export-namespace-from",
-    "@babel/plugin-proposal-numeric-separator",
-    "@babel/plugin-proposal-throw-expressions"
-  ],
-  "env": {
-    "test": {
-      "plugins": [
-        "@babel/plugin-transform-modules-commonjs"
-      ]
-    }
-  }
-}

libs/horizon-jsx-transform-babel-plugin/babel.config.js

@@ -2,9 +2,6 @@
 module.exports = {
   presets: [
     '@babel/preset-env',
-  ],
-  plugins: [
-    /* eslint-disable-next-line global-require */
-    [require('./dist/index.js')],
-  ],
+    '@babel/preset-typescript'
+  ]
 };

libs/horizon-jsx-transform-babel-plugin/jest.config.js

@@ -1,10 +1,5 @@
 module.exports = {
   transform: {
-    '\\.(ts|tsx)$': 'ts-jest',
-  },
-  globals: {
-    'ts-jest': {
-      babelConfig: true,
-    },
-  },
+    '\\.(js|jsx|ts|tsx)$': 'babel-jest',
+  }
 };

libs/horizon-jsx-transform-babel-plugin/package.json

@@ -31,7 +31,6 @@
     "@babel/plugin-transform-modules-commonjs": "^7.2.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/types": "^7.0.0",
-    "babel-plugin-tester": "^10.1.0",
-    "ts-jest": "^26.1.3"
+    "babel-plugin-tester": "^10.1.0"
   }
 }

libs/horizon-jsx-transform-babel-plugin/src/index.ts

@@ -1,9 +1,40 @@
 import SyntaxJSX from '@babel/plugin-syntax-jsx';
 import * as BabelCore from '@babel/core';
 import * as t from '@babel/types';
-import {NodePath} from '@babel/traverse';
+import { NodePath } from '@babel/traverse';
+import { JSXIdentifier, JSXMemberExpression, JSXNamespacedName } from '@babel/types';
+
+function isHTMLTag(tagName: string) {
+  return tagName && /^[a-z]/.test(tagName);
+}
+
+const horizonJsx = t.memberExpression(t.identifier('Horizon'), t.identifier('jsx'));
+
+function getTagNodeName(tagNode: JSXIdentifier | JSXMemberExpression | JSXNamespacedName) {
+  let tagName;
+  if (t.isJSXNamespacedName(tagNode)) {
+    throw 'horizon jsx doesn\'t support JSX namespace: ' + tagNode;
+  } else if (t.isJSXIdentifier(tagNode)) {
+    /*
+        this -> thisExpression
+        HTML -> stringLiteral
+        Others -> Identifier
+     */
+    tagName = tagNode.name === 'this' ?
+      t.thisExpression() : isHTMLTag(tagNode.name) ?
+        t.stringLiteral(tagNode.name) :
+        t.identifier(tagNode.name);
+  } else if (t.isJSXMemberExpression(tagNode)) {
+    tagName = t.memberExpression(
+      getTagNodeName(tagNode.object),
+      getTagNodeName(tagNode.property),
+    );
+  }
+  return tagName;
+}
+
+export default ({ types }: typeof BabelCore) => {
 
-export default ({types}: typeof BabelCore) => {
   return {
     name: 'horizon-jsx-babel-plugin',
     inherits: SyntaxJSX,
@@ -14,12 +45,13 @@ export default ({types}: typeof BabelCore) => {
       },
 
       JSXElement: {
-        exit(path) {
-
+        exit(path: NodePath<t.JSXElement>) {
+          const openingElement = path.get('openingElement');
+          const tagName = getTagNodeName(openingElement.node.name);
+          path.replaceWith(t.callExpression(horizonJsx, [tagName]));
         },
       },
-
-    }
+    },
   };
 };
 

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/assignment/input.js

@@ -0,0 +1 @@
+var div = <Component {...props} foo="bar" />

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/assignment/output.mjs

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var div = /*#__PURE__*/_jsx(Component, { ...props,
+  foo: "bar"
+});

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/concatenates-adjacent-string-literals/input.js

@@ -0,0 +1,13 @@
+var x =
+  <div>
+    foo
+    {"bar"}
+    baz
+    <div>
+      buz
+      bang
+    </div>
+    qux
+    {null}
+    quack
+  </div>

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/concatenates-adjacent-string-literals/output.mjs

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+var x = /*#__PURE__*/_jsxs("div", {
+  children: ["foo", "bar", "baz", /*#__PURE__*/_jsx("div", {
+    children: "buz bang"
+  }), "qux", null, "quack"]
+});

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/flattens-spread/input.js

@@ -0,0 +1,7 @@
+<p {...props}>text</p>;
+
+<div {...props}>{contents}</div>;
+
+<img alt="" {...{src, title}} />;
+
+<blockquote {...{cite}}>{items}</blockquote>;

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/flattens-spread/output.mjs

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+/*#__PURE__*/
+_jsx("p", { ...props,
+  children: "text"
+});
+
+/*#__PURE__*/
+_jsx("div", { ...props,
+  children: contents
+});
+
+/*#__PURE__*/
+_jsx("img", {
+  alt: "",
+  src,
+  title
+});
+
+/*#__PURE__*/
+_jsx("blockquote", {
+  cite,
+  children: items
+});

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/handle-fragments/input.js

@@ -0,0 +1 @@
+var x = <><div /></>

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/handle-fragments/output.mjs

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
+var x = /*#__PURE__*/_jsx(_Fragment, {
+  children: /*#__PURE__*/_jsx("div", {})
+});

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/should-add-quotes-es3/input.js

@@ -0,0 +1 @@
+var es3 = <F aaa new const var default foo-bar/>;

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/should-add-quotes-es3/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "runtime": "automatic" }],
+    "transform-property-literals"
+  ]
+}

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/should-add-quotes-es3/output.mjs

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var es3 = /*#__PURE__*/_jsx(F, {
+  aaa: true,
+  "new": true,
+  "const": true,
+  "var": true,
+  "default": true,
+  "foo-bar": true
+});

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/should-allow-constructor-as-prop/input.js

@@ -0,0 +1 @@
+<Component constructor="foo" />;

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/should-allow-constructor-as-prop/output.mjs

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+/*#__PURE__*/
+_jsx(Component, {
+  constructor: "foo"
+});

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/should-allow-deeper-js-namespacing/input.js

@@ -0,0 +1 @@
+<Namespace.DeepNamespace.Component />;

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/should-allow-deeper-js-namespacing/output.mjs

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+/*#__PURE__*/
+_jsx(Namespace.DeepNamespace.Component, {});

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/should-allow-elements-as-attributes/input.js

@@ -0,0 +1 @@
+<div attr=<div /> />

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/should-allow-elements-as-attributes/output.mjs

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+/*#__PURE__*/
+_jsx("div", {
+  attr: /*#__PURE__*/_jsx("div", {})
+});

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/should-convert-simple-text/input.js

@@ -0,0 +1 @@
+var x = <div>text</div>;

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/should-convert-simple-text/output.mjs

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var x = /*#__PURE__*/_jsx("div", {
+  children: "text"
+});

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/should-disallow-spread-children/input.js

@@ -0,0 +1 @@
+<div>{...children}</div>;

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/should-disallow-spread-children/options.json

@@ -0,0 +1,3 @@
+{
+  "throws": "Spread children are not supported in React."
+}

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/simple-tags/code.js

@@ -0,0 +1,3 @@
+var x = <div></div>;
+var y = <Eview.Table></Eview.Table>;
+var z = <this></this>;

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/simple-tags/output.js

@@ -0,0 +1,3 @@
+var x = Horizon.jsx('div');
+var y = Horizon.jsx(Eview.Table);
+var z = Horizon.jsx(this);

libs/horizon-jsx-transform-babel-plugin/test/__fixtures__/tags-with-props/code.js

@@ -0,0 +1 @@
+<div className="123"></div>

libs/horizon-jsx-transform-babel-plugin/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist"
+  },
+  "include": [
+    "src"
+  ]
+}

libs/horizon/src/renderer/TreeBuilder.ts

@@ -196,11 +196,11 @@ export function calcStartUpdateVNode(treeRoot: VNode) {
     }
   }
   // 得到相等的路径
-  let startNodePath = toUpdateNodes[0].path.slice(0, idx);
+  const startNodePath = toUpdateNodes[0].path.slice(0, idx);
 
   let node = treeRoot;
   for (let i = 1; i < startNodePath.length; i++) {
-    let pathIndex = startNodePath[i];
+    const pathIndex = Number(startNodePath[i]);
     node = getChildByIndex(node, pathIndex);
   }
 
@@ -232,7 +232,7 @@ function buildVNodeTree(treeRoot: VNode) {
       }
       parent = parent.parent;
     }
-  
+
     // 当在componentWillUnmount中调用setState，parent可能是null，因为startVNode会被clear
     if (parent !== null) {
       resetNamespaceCtx(parent);

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": " webpack --config ./scripts/webpack/webpack.config.js",
     "build-3rdLib": "node ./scripts/gen3rdLib.js",
-    "build-3rdLib-dev": "node ./scripts/gen3rdLib.js --dev",
+    "build-3rdLib-dev": "npm run build & node ./scripts/gen3rdLib.js --dev",
     "debug-test": "yarn test --debug",
     "test": "jest --config=jest.config.js",
     "watch-test": "yarn test --watch --dev"