@developer_tribe/react-builder 1.2.8 → 1.2.10

package/scripts/public/scripts/build/index.js

@@ -13,8 +13,22 @@ import { createComponentsIndex } from './utils/createComponentsIndex.js';
 const argv = yargs(hideBin(process.argv)).argv;
 export const args = argv;
 const builderPath = args.path || 'node_modules/@developer_tribe/react-builder';
-const selectedComponents = args.components || [];
+const selectedComponents = Array.isArray(args.components)
+  ? args.components
+  : typeof args.components === 'string'
+    ? [args.components]
+    : [];
 const name = args.name || 'build-components';
+function parseBooleanFlag(value, defaultValue) {
+  if (typeof value === 'boolean') return value;
+  if (typeof value === 'string') {
+    const normalized = value.trim().toLowerCase();
+    if (['false', '0', 'no', 'off'].includes(normalized)) return false;
+    if (['true', '1', 'yes', 'on'].includes(normalized)) return true;
+  }
+  return defaultValue;
+}
+const component = parseBooleanFlag(args.component, true);
 const targetPath = process.cwd();
 
 function run() {
@@ -37,9 +51,12 @@ function run() {
   createRenderNodeGenerated(
     builderComponentsPath,
     targetComponentsPath,
-    selectedComponents
+    selectedComponents,
+    { component }
   );
-  createComponentsIndex(targetComponentsPath, selectedComponents);
+  createComponentsIndex(targetComponentsPath, selectedComponents, {
+    component,
+  });
 }
 
 run();

package/scripts/public/scripts/build/info.json

@@ -18,6 +18,12 @@
       "type": "string",
       "describe": "name of the structure",
       "demandOption": false
+    },
+    "component": {
+      "type": "boolean",
+      "default": true,
+      "describe": "generate RenderNode as a React component (.tsx) when true; generate a plain function (.ts) when false",
+      "demandOption": false
     }
   }
 }

package/scripts/public/scripts/build/utils/createComponentsIndex.js

@@ -1,7 +1,12 @@
 import fs from 'fs';
 import Path from 'path';
 
-export function createComponentsIndex(buildComponentsTarget, components) {
+export function createComponentsIndex(
+  buildComponentsTarget,
+  components,
+  options = {}
+) {
+  const { component = true } = options;
   if (!fs.existsSync(buildComponentsTarget)) {
     fs.mkdirSync(buildComponentsTarget, { recursive: true });
   }
@@ -9,8 +14,9 @@ export function createComponentsIndex(buildComponentsTarget, components) {
   const targetPath = Path.join(buildComponentsTarget, 'index.ts');
 
   const header = '/* AUTO-GENERATED FILE - DO NOT EDIT */\n\n';
-  const renderNodeExport =
-    "export { default as RenderNode } from './RenderNode.generated';";
+  const renderNodeExport = component
+    ? "export { default as RenderNode } from './RenderNode.generated';"
+    : "export { renderNode } from './RenderNode.generated';";
 
   const componentExports = components
     .map(name => `export { default as ${name} } from './${name}/${name}';`)

package/scripts/public/scripts/build/utils/createRenderNodeGenerated.js

@@ -15,29 +15,42 @@ function readPatternType(builderComponentsPath, componentName) {
 export function createRenderNodeGenerated(
   builderComponentsPath,
   buildComponentsTarget,
-  components
+  components,
+  options = {}
 ) {
+  const { component = true } = options;
   if (!fs.existsSync(buildComponentsTarget)) {
     fs.mkdirSync(buildComponentsTarget, { recursive: true });
   }
 
-  const targetPath = Path.join(
-    buildComponentsTarget,
-    'RenderNode.generated.tsx'
-  );
+  const tsxPath = Path.join(buildComponentsTarget, 'RenderNode.generated.tsx');
+  const tsPath = Path.join(buildComponentsTarget, 'RenderNode.generated.ts');
+  const targetPath = component ? tsxPath : tsPath;
 
   const imports = components
-    .map(name => `import ${name} from './${name}/${name}';`)
+    .map(name => 'import ' + name + " from './" + name + '/' + name + "';")
     .join('\n');
 
   const cases = components
     .map(name => {
       const type = readPatternType(builderComponentsPath, name);
-      return `    case ${JSON.stringify(type)}:\n      return <${name} node={simpleNode} />;`;
+      const caseLabel = JSON.stringify(type);
+      return component
+        ? '    case ' +
+            caseLabel +
+            ':\n      return <' +
+            name +
+            ' node={simpleNode} />;'
+        : '    case ' +
+            caseLabel +
+            ':\n      return React.createElement(' +
+            name +
+            ', { node: simpleNode });';
     })
     .join('\n');
 
-  const content = `/* AUTO-GENERATED FILE - DO NOT EDIT */
+  const content = component
+    ? `/* AUTO-GENERATED FILE - DO NOT EDIT */
 import React from 'react';
 import { Node, NodeData, isNodeArray, isNodeNullOrUndefined, isNodeString } from '@developer_tribe/react-builder';
 import { other } from './other';
@@ -69,9 +82,54 @@ ${cases}
 }
 
 export default React.memo(RenderNode);
+`
+    : `/* AUTO-GENERATED FILE - DO NOT EDIT */
+import React from 'react';
+import {
+  Node,
+  NodeData,
+  isNodeArray,
+  isNodeNullOrUndefined,
+  isNodeString,
+} from '@developer_tribe/react-builder';
+import { other } from './other';
+${imports}
+
+export function renderNode(node: Node): React.ReactNode {
+  if (isNodeNullOrUndefined(node)) {
+    return null;
+  }
+  if (isNodeString(node)) {
+    // NOTE: In React Native, raw strings must be rendered inside a <Text>.
+    // This function mode intentionally returns a string so the caller can decide how to wrap it.
+    return node as string;
+  }
+  if (isNodeArray(node)) {
+    return React.createElement(
+      React.Fragment,
+      null,
+      (node as Node[]).map((item: Node, index) =>
+        React.createElement(React.Fragment, { key: index }, renderNode(item))
+      )
+    );
+  }
+
+  const simpleNode = node as NodeData;
+  switch (simpleNode?.type) {
+${cases}
+    default:
+      return other(simpleNode?.type, node);
+  }
+}
 `;
 
   fs.writeFileSync(targetPath, content, 'utf8');
+
+  // Keep the output stable by removing the opposite file if it exists.
+  const stalePath = component ? tsPath : tsxPath;
+  if (fs.existsSync(stalePath)) {
+    fs.rmSync(stalePath, { force: true });
+  }
 }
 
 // no default export