Transform recma when using jsx dev runtime

Author: pomber

packages/codehike/src/mdx/3.transform-hike-props.ts

@@ -137,7 +137,7 @@ function forEachHikeElementMoveChildrenToHikeProp(root: any, jsxOn: boolean) {
   visit(root, (node: any) => {
     if (isElementWithHikeAttribute(node, jsxOn)) {
       if (jsxOn) {
-        moveChildrenToHikePropJSX(node, jsxOn)
+        moveChildrenToHikePropJSX(node)
       } else {
         moveChildrenToHikeProp(node)
       }
@@ -157,7 +157,7 @@ function isElementWithHikeAttribute(node: any, jsxOn: boolean) {
         )
 }
 
-function moveChildrenToHikePropJSX(node: any, jsxOn: boolean) {
+function moveChildrenToHikePropJSX(node: any) {
   // dictionary of children by path
   const childrenByPath: any = {}
   node.children.forEach((slot: any) => {
@@ -252,8 +252,8 @@ function moveChildrenToHikeProp(node: any) {
     (p: any) => p.key.name !== "children",
   )
 
-  // jsxs calls can only have arrays as children, so we turn any jsxs without array into jsx call
   visit(node, function (node: any) {
+    // jsxs calls can only have arrays as children, so we turn any jsxs without array into jsx call
     if (node.type === "CallExpression" && node.callee.name === "_jsxs") {
       const childrenProp = node.arguments[1].properties.find(
         (p: any) => p.key.value === "children",
@@ -262,6 +262,16 @@ function moveChildrenToHikeProp(node: any) {
         node.callee.name = "_jsx"
       }
     }
+
+    // same, but in dev mode  the name is _jsxDEV, and we should change the `isStaticChildren` argument
+    if (node.type === "CallExpression" && node.callee.name === "_jsxDEV") {
+      const childrenProp = node.arguments[1].properties.find(
+        (p: any) => p.key.value === "children",
+      )
+      if (childrenProp && childrenProp.value.type !== "ArrayExpression") {
+        node.arguments[3] = { type: "Literal", value: false }
+      }
+    }
   })
 }
 

packages/codehike/tests/md-suite/basic.0.mdx

@@ -7,14 +7,18 @@ snapshots:
   - before-recma-compiled-jsx
   - before-recma-compiled-function
   - before-recma-js
+  - before-recma-js-dev
   - before-recma-jsx
   - after-recma-js
+  - after-recma-js-dev
   - after-recma-jsx
   - compiled-js
+  - compiled-js-dev
   - compiled-jsx
   - compiled-function
   - parsed-jsx
   - rendered
+  - rendered-dev
 ---
 
 # Lorem