@developer_tribe/react-builder 1.2.7 → 1.2.9

package/scripts/prebuild/utils/validateAllComponentsOrThrow.js

@@ -166,17 +166,38 @@ async function validatePatternJson(componentDir, componentName) {
     ...(isPlainObject(source?.defaults) ? source.defaults : {}),
   });
 
-  // Validate attributes accept primitive, enum array, or custom type refs (including X[])
-  for (const [attrName, attrType] of Object.entries(pattern.attributes)) {
+  const validateAttrType = (attrName, attrType, pathLabel) => {
     const ok =
       (typeof attrType === 'string' &&
         (isNeverType(attrType) || isValidTypeRef(attrType))) ||
       isEnumArray(attrType);
     if (!ok) {
       return fail(
-        `[${componentName}] pattern.json -> 'pattern.attributes.${attrName}' must be 'string' | 'number' | 'boolean' | 'color' | 'never' | string[] | CustomType | CustomType[]`
+        `[${componentName}] pattern.json -> '${pathLabel}.${attrName}' must be 'string' | 'number' | 'boolean' | 'color' | 'never' | string[] | CustomType | CustomType[]`
       );
     }
+  };
+
+  // Validate attributes accept primitive, enum array, or custom type refs (including X[])
+  for (const [attrName, attrType] of Object.entries(pattern.attributes)) {
+    if (attrName === 'style') {
+      if (!isPlainObject(attrType)) {
+        return fail(
+          `[${componentName}] pattern.json -> 'pattern.attributes.style' must be an object`
+        );
+      }
+      for (const [styleKey, styleType] of Object.entries(attrType)) {
+        const res = validateAttrType(
+          styleKey,
+          styleType,
+          'pattern.attributes.style'
+        );
+        if (res) return res;
+      }
+      continue;
+    }
+    const res = validateAttrType(attrName, attrType, 'pattern.attributes');
+    if (res) return res;
   }
 
   // If types block exists, validate its shape (only primitives or enum arrays for fields)
@@ -291,6 +312,19 @@ async function validatePatternJson(componentDir, componentName) {
     const parentAttributes = parentData?.pattern?.attributes || {};
     const childAttributes = data?.pattern?.attributes || {};
     const mergedAttributes = { ...parentAttributes, ...childAttributes };
+    // Deep-merge nested schema `attributes.style` when present (so parent style keys propagate).
+    const parentStyle = isPlainObject(parentAttributes?.style)
+      ? parentAttributes.style
+      : null;
+    const childStyle = isPlainObject(childAttributes?.style)
+      ? childAttributes.style
+      : null;
+    if (parentStyle || childStyle) {
+      mergedAttributes.style = {
+        ...(parentStyle || {}),
+        ...(childStyle || {}),
+      };
+    }
 
     // If child does not define children, inherit parent's
     const childHasChildren = Object.prototype.hasOwnProperty.call(

package/scripts/prebuild/utils/validatePatternJson.js

@@ -70,7 +70,10 @@ export async function validatePatternJson(componentDir, componentName) {
     value === 'size' ||
     value === 'iconType';
 
-  for (const [attrName, attrType] of Object.entries(pattern.attributes)) {
+  const isPlainObject = value =>
+    typeof value === 'object' && value != null && !Array.isArray(value);
+
+  const validateAttrType = (attrName, attrType, pathLabel) => {
     const isValidType =
       (typeof attrType === 'string' && isPrimitiveType(attrType)) ||
       (typeof attrType === 'string' &&
@@ -79,9 +82,31 @@ export async function validatePatternJson(componentDir, componentName) {
       (Array.isArray(attrType) && attrType.every(v => typeof v === 'string'));
     if (!isValidType) {
       return fail(
-        `[${componentName}] pattern.json -> 'pattern.attributes.${attrName}' must be 'string' | 'number' | 'boolean' | 'color' | 'size' | 'iconType' | string[]`
+        `[${componentName}] pattern.json -> '${pathLabel}.${attrName}' must be 'string' | 'number' | 'boolean' | 'color' | 'size' | 'iconType' | string[]`
       );
     }
+  };
+
+  for (const [attrName, attrType] of Object.entries(pattern.attributes)) {
+    if (attrName === 'style') {
+      if (!isPlainObject(attrType)) {
+        return fail(
+          `[${componentName}] pattern.json -> 'pattern.attributes.style' must be an object`
+        );
+      }
+      for (const [styleKey, styleType] of Object.entries(attrType)) {
+        const res = validateAttrType(
+          styleKey,
+          styleType,
+          'pattern.attributes.style'
+        );
+        if (res) return res;
+      }
+      continue;
+    }
+
+    const res = validateAttrType(attrName, attrType, 'pattern.attributes');
+    if (res) return res;
   }
 
   return data;

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