code review (x2)

Author: avivkeller

src/generators/jsx/constants.mjs

@@ -30,3 +30,22 @@ export const CHANGE_TYPES = {
   removed_in: 'Removed in',
   introduced_in: 'Introduced in',
 };
+
+export const AST_NODES = {
+  MDX: {
+    // https://github.com/syntax-tree/mdast-util-mdx-jsx#mdxjsxtextelement
+    JSX_INLINE_ELEMENT: 'mdxJsxTextElement',
+    // https://github.com/syntax-tree/mdast-util-mdx-jsx#mdxjsxflowelement
+    JSX_BLOCK_ELEMENT: 'mdxJsxFlowElement',
+    // https://github.com/syntax-tree/mdast-util-mdx-jsx#mdxjsxattribute
+    JSX_ATTRIBUTE: 'mdxJsxAttribute',
+    // https://github.com/syntax-tree/mdast-util-mdx-jsx#mdxjsxattributevalueexpression
+    JSX_ATTRIBUTE_EXPRESSION: 'mdxJsxAttributeValueExpression',
+  },
+  ESTREE: {
+    // https://github.com/estree/estree/blob/master/es5.md#programs
+    PROGRAM: 'Program',
+    // https://github.com/estree/estree/blob/master/es5.md#expressionstatement
+    EXPRESSION_STATEMENT: 'ExpressionStatement',
+  },
+};

src/generators/jsx/utils/ast.mjs

@@ -2,6 +2,7 @@
 
 import { u as createTree } from 'unist-builder';
 import { valueToEstree } from 'estree-util-value-to-estree';
+import { AST_NODES } from '../constants.mjs';
 
 /**
  * Creates an MDX JSX element with support for complex attribute values.
@@ -18,54 +19,59 @@ export const createJSXElement = (
   name,
   { inline = true, children = [], ...attributes } = {}
 ) => {
-  // Process children: convert string to text node or use array as is
+  // Convert string children to text node or use array directly
   const processedChildren =
     typeof children === 'string'
       ? [createTree('text', { value: children })]
-      : (children ?? []);
+      : children;
+
+  const elementType = inline
+    ? AST_NODES.MDX.JSX_INLINE_ELEMENT
+    : AST_NODES.MDX.JSX_BLOCK_ELEMENT;
 
-  // Create attribute nodes, handling complex objects and primitive values differently
   const attrs = Object.entries(attributes).map(([key, value]) =>
     createAttributeNode(key, value)
   );
 
-  // Create and return the appropriate JSX element type
-  return createTree(inline ? 'mdxJsxTextElement' : 'mdxJsxFlowElement', {
+  return createTree(elementType, {
     name,
     attributes: attrs,
     children: processedChildren,
   });
 };
 
 /**
- * Creates an MDX JSX attribute node from the input.
+ * Creates an MDX JSX attribute node based on the value type.
  *
  * @param {string} name - The attribute name
- * @param {any} value - The attribute value (can be any valid JS value)
+ * @param {any} value - The attribute value
  * @returns {import('unist').Node} The MDX JSX attribute node
  */
 function createAttributeNode(name, value) {
-  // For objects and arrays, create expression nodes to preserve structure
+  // Use expression for objects and arrays
   if (value !== null && typeof value === 'object') {
-    return createTree('mdxJsxAttribute', {
+    return createTree(AST_NODES.MDX.JSX_ATTRIBUTE, {
       name,
-      value: createTree('mdxJsxAttributeValueExpression', {
+      value: createTree(AST_NODES.MDX.JSX_ATTRIBUTE_EXPRESSION, {
         data: {
           estree: {
-            type: 'Program',
+            type: AST_NODES.ESTREE.PROGRAM,
             body: [
               {
-                type: 'ExpressionStatement',
+                type: AST_NODES.ESTREE.EXPRESSION_STATEMENT,
                 expression: valueToEstree(value),
               },
             ],
-            sourceType: 'module',
           },
         },
       }),
     });
   }
 
-  // For primitives, use simple string conversion
-  return createTree('mdxJsxAttribute', { name, value: String(value) });
+  // For primitives, use simple string conversion.
+  // If undefined, pass nothing.
+  return createTree(AST_NODES.MDX.JSX_ATTRIBUTE, {
+    name,
+    value: value === undefined ? value : String(value),
+  });
 }

src/generators/jsx/utils/buildBarProps.mjs

@@ -1,5 +1,4 @@
 import readingTime from 'reading-time';
-import { DOC_API_BLOB_EDIT_BASE_URL } from '../../../constants.mjs';
 import { visit } from 'unist-util-visit';
 
 /**
@@ -29,12 +28,12 @@ export const buildSideBarDocPages = (groupedModules, headNodes) =>
  */
 export const buildMetaBarProps = (head, entries) => {
   // Extract text content for reading time calculation
-  let textContent = '';
-  entries.forEach(entry => {
+  const textContent = entries.reduce((acc, entry) => {
     visit(entry.content, ['text', 'code'], node => {
-      textContent += node.value || '';
+      acc += node.value || '';
     });
-  });
+    return acc;
+  }, '');
 
   const headings = entries
     .filter(entry => entry.heading?.data?.name)
@@ -48,6 +47,6 @@ export const buildMetaBarProps = (head, entries) => {
     addedIn: head.introduced_in || head.added_in || '',
     readingTime: readingTime(textContent).text,
     viewAs: [['JSON', `${head.api}.json`]],
-    editThisPage: `${DOC_API_BLOB_EDIT_BASE_URL}${head.api}.md`,
+    editThisPage: `${head.edit_link}`,
   };
 };