fix: invalid jsx attr name error (alibaba#2131)

eternalsky · web-flow · commit 33efde964bc9 · 2023-06-05T18:52:41.000+08:00
diff --git a/modules/code-generator/src/utils/nodeToJSX.ts b/modules/code-generator/src/utils/nodeToJSX.ts
@@ -19,6 +19,7 @@ import { executeFunctionStack } from './aopHelper';
 import { encodeJsxStringNode } from './encodeJsxAttrString';
 import { unwrapJsExprQuoteInJsx } from './jsxHelpers';
 import { transformThis2Context } from '../core/jsx/handlers/transformThis2Context';
+import { isValidIdentifier } from './validate';
 
 function mergeNodeGeneratorConfig(
   cfg1: NodeGeneratorConfig,
@@ -126,11 +127,13 @@ function generateAttrs(
   if (props) {
     if (!Array.isArray(props)) {
       Object.keys(props).forEach((propName: string) => {
-        pieces = pieces.concat(generateAttr(propName, props[propName] as IPublicTypeCompositeValue, scope, config));
+        if (isValidIdentifier(propName)) {
+          pieces = pieces.concat(generateAttr(propName, props[propName] as IPublicTypeCompositeValue, scope, config));
+        }
       });
     } else {
       props.forEach((prop) => {
-        if (prop.name && !prop.spread) {
+        if (prop.name && isValidIdentifier(prop.name) && !prop.spread) {
           pieces = pieces.concat(generateAttr(prop.name, prop.value, scope, config));
         }
 
diff --git a/modules/code-generator/tests/plugins/jsx/__snapshots__/p0-condition-at-root.test.ts.snap b/modules/code-generator/tests/plugins/jsx/__snapshots__/p0-condition-at-root.test.ts.snap
@@ -281,3 +281,75 @@ Object {
   },
 }
 `;
+
+exports[`condition at root invalid attr name should not be generated 1`] = `
+Object {
+  "chunks": Array [
+    Object {
+      "content": "
+        const __$$context = this._context || this;
+        const { state } = __$$context;
+        return <Page><Text a={1}>Hello world!</Text></Page>;
+      ",
+      "fileType": "jsx",
+      "linkAfter": Array [
+        "ReactComponentClassRenderStart",
+        "ReactComponentClassRenderPre",
+      ],
+      "name": "ReactComponentClassRenderJSX",
+      "type": "string",
+    },
+    Object {
+      "content": "
+          function __$$eval(expr) {
+            try {
+              return expr();
+            } catch (error) {
+              
+            }
+          }
+
+          function __$$evalArray(expr) {
+            const res = __$$eval(expr);
+            return Array.isArray(res) ? res : [];
+          }
+      
+
+        function __$$createChildContext(oldContext, ext) {
+          const childContext = {
+            ...oldContext,
+            ...ext,
+          };
+          childContext.__proto__ = oldContext;
+          return childContext;
+        }
+      ",
+      "fileType": "jsx",
+      "linkAfter": Array [
+        "CommonFileExport",
+      ],
+      "name": "CommonCustomContent",
+      "type": "string",
+    },
+  ],
+  "contextData": Object {},
+  "depNames": Array [],
+  "ir": Object {
+    "children": Array [
+      Object {
+        "children": "Hello world!",
+        "componentName": "Text",
+        "props": Object {
+          "a": 1,
+          "a.b": 2,
+        },
+      },
+    ],
+    "componentName": "Page",
+    "condition": null,
+    "containerType": "Page",
+    "fileName": "test",
+    "moduleName": "test",
+  },
+}
+`;
diff --git a/modules/code-generator/tests/plugins/jsx/p0-condition-at-root.test.ts b/modules/code-generator/tests/plugins/jsx/p0-condition-at-root.test.ts
@@ -83,4 +83,22 @@ describe('condition at root', () => {
     });
     expect(result).toMatchSnapshot();
   });
+
+  test('invalid attr name should not be generated', async () => {
+    const containerIr: IContainerInfo = {
+      containerType: 'Page',
+      moduleName: 'test',
+      componentName: 'Page',
+      fileName: 'test',
+      condition: null,
+      children: [{ componentName: 'Text', children: 'Hello world!', props: { 'a': 1, 'a.b': 2 } }],
+    };
+    const result = await jsx()({
+      ir: containerIr,
+      contextData: {},
+      chunks: [],
+      depNames: [],
+    });
+    expect(result).toMatchSnapshot();
+  })
 });
