Merge pull request #435 from code-hike/jsx-dev

Fix `jsxDEV` warning

Author: pomber

.changeset/lovely-houses-rule.md

@@ -0,0 +1,5 @@
+---
+"codehike": patch
+---
+
+Fix `jsxDEV` warning

apps/web/content/blog/from-remark-to-rsc.mdx

@@ -6,4 +6,6 @@ authors: [pomber]
 draft: true
 ---
 
+Content usually needs some kind of transformation before being rendered.
+
 A remark plugin is a function that transforms pieces of a markdown file.

apps/web/next.config.mjs

@@ -1,5 +1,16 @@
 import createNextDocsMDX from "next-docs-mdx/config"
 import { remarkCodeHike, recmaCodeHike } from "codehike/mdx"
+// import fs from "node:fs"
+// import { jsx, toJs } from "estree-util-to-js"
+// function recmaPlugin() {
+//   return (tree) => {
+//     const result = toJs(tree, { handlers: jsx })
+//     // console.log("```js")
+//     // console.log(result.value)
+//     // console.log("```")
+//     fs.writeFileSync("recma.js", result.value)
+//   }
+// }
 
 /** @type {import('codehike/mdx').CodeHikeConfig} */
 const chConfig = {
@@ -17,7 +28,7 @@ const withMDX = createNextDocsMDX({
   mdxOptions: {
     remarkPlugins: [[remarkCodeHike, chConfig]],
     recmaPlugins: [[recmaCodeHike, chConfig]],
-    jsx: true,
+    // jsx: true,
   },
 })
 

apps/web/package.json

@@ -24,6 +24,7 @@
     "codehike": "workspace:*",
     "diff": "^5.1.0",
     "dotenv": "^16.4.1",
+    "estree-util-to-js": "^2.0.0",
     "lucide-react": "^0.303.0",
     "next": "14.1.0",
     "next-docs-mdx": "7.1.2",

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