fix: sensitive elements

Author: aidenybai

packages/cli/src/utils/modify-config.ts

@@ -111,11 +111,11 @@ export async function modifyConfigFile(detectedBuildTool: BuildTool) {
 
     const confirmation = await abortIfCancelled(
       clack.confirm({
-        message: 'Do these changes to your config file cause errors?',
-        initialValue: false,
+        message: 'Does the config file look good?',
+        initialValue: true,
       }),
     );
-    if (confirmation) {
+    if (!confirmation) {
       await fs.promises.writeFile(filePath, oldCode, {
         encoding: 'utf-8',
         flag: 'w',

packages/compiler/react/jsx-element-visitor.ts

@@ -104,6 +104,23 @@ export const jsxElementVisitor = (options: Options = {}, isReact = true) => {
       );
     }
 
+    if (t.isBlockStatement(expression.body)) {
+      const expressionPath = resolvePath(jsxElementPath.get('children'));
+      const returnStatementPath = resolvePath(
+        expressionPath.find((path) => path.isReturnStatement())!,
+      ) as NodePath<t.ReturnStatement>;
+      const argument = returnStatementPath.node.argument;
+
+      if (!t.isJSXElement(argument) && !t.isJSXFragment(argument)) {
+        return;
+      }
+    } else if (
+      !t.isJSXElement(expression.body) &&
+      !t.isJSXFragment(expression.body)
+    ) {
+      return;
+    }
+
     const jsxElementParent = jsxElementPath.parent;
 
     if (t.isJSXElement(jsxElementParent)) {
@@ -238,6 +255,7 @@ export const jsxElementVisitor = (options: Options = {}, isReact = true) => {
     if (bailout) return jsxElementPath.stop();
 
     const ids = [...idNames].map((id) => t.identifier(id));
+    const body = t.cloneNode(expression.body);
 
     // We do a similar extraction process as in the call expression visitor
     const originalComponent = t.variableDeclaration('const', [
@@ -249,9 +267,9 @@ export const jsxElementVisitor = (options: Options = {}, isReact = true) => {
               ids.map((id) => t.objectProperty(id, id, false, true)),
             ),
           ],
-          t.isBlockStatement(expression.body)
-            ? expression.body
-            : t.blockStatement([t.returnStatement(expression.body)]),
+          t.isBlockStatement(body)
+            ? body
+            : t.blockStatement([t.returnStatement(body)]),
         ),
       ),
     ]);

packages/compiler/react/transform.ts

@@ -14,6 +14,7 @@ import {
   isStatic,
   isJSXFragment,
   hasStyledAttributes,
+  isSensitiveElement,
 } from './utils';
 import { optimize } from './optimize';
 import { evaluate } from './evaluator';
@@ -1012,10 +1013,19 @@ export const transformJSX = (
          * <div><For each={[1, 2, 3]}>{i => <div>{i}</div>}</For></div>
          * ```
          */
+        const expressionPath = resolvePath(
+          jsxPath.get(`children.${i}.expression`),
+        );
+        const hasSensitive =
+          expressionPath.parentPath?.isJSXExpressionContainer() &&
+          t.isJSXElement(expressionPath.parentPath.parent) &&
+          isSensitiveElement(expressionPath.parentPath.parent);
+
         if (
           t.isCallExpression(expression) &&
           t.isMemberExpression(expression.callee) &&
-          t.isIdentifier(expression.callee.property, { name: 'map' })
+          t.isIdentifier(expression.callee.property, { name: 'map' }) &&
+          !hasSensitive
         ) {
           const For = imports.addNamed('For');
           const jsxFor = t.jsxIdentifier(For.name);
@@ -1037,7 +1047,6 @@ export const transformJSX = (
           continue;
         }
 
-        const expressionPath = jsxPath.get(`children.${i}.expression`);
         /**
          * Handles JSX conditionals and shoves them into a render scope:
          *
@@ -1071,14 +1080,29 @@ export const transformJSX = (
           continue;
         }
 
-        if (
-          expressionPath.find(
-            (path) => path.isJSXElement() || path.isJSXFragment(),
-          )
-        ) {
+        let foundJsxInExpression = false;
+        expressionPath.traverse({
+          JSXElement(path) {
+            foundJsxInExpression = true;
+            path.stop();
+          },
+          JSXFragment(path) {
+            foundJsxInExpression = true;
+            path.stop();
+          },
+        });
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (foundJsxInExpression) {
           const id = createPortal(() => {
+            if (hasSensitive) {
+              return jsxPath.replaceWith(
+                isRoot
+                  ? t.expressionStatement(id!)
+                  : t.jsxExpressionContainer(id!),
+              );
+            }
             jsx.children[i] = t.jsxExpressionContainer(id!);
-          }, [expression, t.booleanLiteral(unstable)]);
+          }, [hasSensitive ? jsx : expression, t.booleanLiteral(unstable)]);
 
           continue;
         }

packages/compiler/react/utils.ts

@@ -58,6 +58,16 @@ export const getValidSpecifiers = (
   return validSpecifiers;
 };
 
+export const isSensitiveElement = (jsx: t.JSXElement) => {
+  // elements that break when the children are not in a specific format
+  const sensitiveElements = ['select'];
+
+  return (
+    t.isJSXIdentifier(jsx.openingElement.name) &&
+    sensitiveElements.includes(jsx.openingElement.name.name)
+  );
+};
+
 export const hasStyledAttributes = (attribute: t.JSXAttribute) => {
   return attribute.name.name === 'tw' || attribute.name.name === 'css';
 };