@developer_tribe/react-builder 1.1.0 → 1.2.1

package/scripts/prebuild/utils/createGeneratedProps.js

@@ -4,7 +4,23 @@ import { ensureDir } from './ensureDir.js';
 import { formatWithPrettier } from './formatWithPrettier.js';
 
 // Helpers
-const isPrimitive = t => t === 'string' || t === 'number' || t === 'boolean';
+const isPrimitive = t =>
+  t === 'string' ||
+  t === 'number' ||
+  t === 'boolean' ||
+  t === 'color' ||
+  t === 'size' ||
+  t === 'fontFamily' ||
+  t === 'fontWeight' ||
+  t === 'iconType';
+const toTsPrimitive = t =>
+  t === 'color' ||
+  t === 'size' ||
+  t === 'iconType' ||
+  t === 'fontFamily' ||
+  t === 'fontWeight'
+    ? 'string'
+    : t;
 const getArrayItem = t =>
   typeof t === 'string' && t.endsWith('[]') ? t.slice(0, -2) : null;
 // Convert a property name like "animation" or "on-press" to PascalCase
@@ -24,9 +40,11 @@ function tsTypeFromAttributeType(
   propertyName,
   registerEnumAlias
 ) {
+  if (attrType === 'never') return 'never';
   if (attrType === 'string') return 'string';
   if (attrType === 'number') return 'number';
   if (attrType === 'boolean') return 'boolean';
+  if (attrType === 'color') return 'string';
   if (Array.isArray(attrType)) {
     const rawMembers = attrType;
     if (rawMembers.length === 0) return 'string';
@@ -48,11 +66,11 @@ function tsTypeFromAttributeType(
   if (typeof attrType === 'string') {
     const item = getArrayItem(attrType);
     if (item) {
-      if (isPrimitive(item)) return `${item}[]`;
+      if (isPrimitive(item)) return `${toTsPrimitive(item)}[]`;
       // Custom type array
       return `${item}Generated[]`;
     }
-    if (isPrimitive(attrType)) return attrType;
+    if (isPrimitive(attrType)) return toTsPrimitive(attrType);
     // Custom object type
     return `${attrType}Generated`;
   }
@@ -68,7 +86,7 @@ export async function createGeneratedProps(
   const fileName = `${componentName}Props.generated.ts`;
   const filePath = path.join(componentDir, fileName);
 
-  const { pattern, allowUnknownAttributes } = patternJson;
+  const { pattern } = patternJson;
   const attributes = pattern.attributes || {};
   const allTypes = patternJson.types || {};
 
@@ -116,9 +134,8 @@ export async function createGeneratedProps(
     return `    ${key}?: ${tsType};`;
   });
 
-  const indexSignature = allowUnknownAttributes
-    ? '    [key: string]: string | number | boolean | undefined;\n'
-    : '';
+  // In schema v2 we always allow a nested `style` object (for CSSProperties-like overrides/defaults).
+  const styleLine = `    style?: Record<string, unknown>;`;
 
   const childTsType =
     typeof pattern.children === 'string' ? pattern.children : 'string';
@@ -145,8 +162,8 @@ export async function createGeneratedProps(
     `export interface ${componentName}PropsGenerated {\n` +
     `  child: ${normalizedChildTsType};\n` +
     `  attributes: {\n` +
+    `${styleLine}\n` +
     (attributeLines.length ? attributeLines.join('\n') + '\n' : '') +
-    indexSignature +
     `  };\n` +
     `}\n` +
     `\n` +

package/scripts/prebuild/utils/createRenderNodeGenerated.js

@@ -6,6 +6,10 @@ export async function createRenderNodeGenerated(validated, paths) {
   const { COMPONENTS_ROOT } = paths;
   const targetPath = path.join(COMPONENTS_ROOT, 'RenderNode.generated.tsx');
 
+  const textPatternType =
+    validated.find(v => v.componentName === 'Text')?.patternJson?.pattern
+      ?.type ?? 'Text';
+
   // Build imports for all components discovered
   const componentImports = validated
     .map(
@@ -14,12 +18,30 @@ export async function createRenderNodeGenerated(validated, paths) {
     )
     .join('\n');
 
+  // Import each component's generated prop type so we can build a strongly-typed node union
+  const componentPropTypeImports = validated
+    .map(
+      ({ componentName }) =>
+        `import type { ${componentName}ComponentProps } from './${componentName}/${componentName}Props.generated';`
+    )
+    .join('\n');
+
+  const builderNodeUnion = validated
+    .map(({ componentName, patternJson }) => {
+      const type = patternJson?.pattern?.type;
+      return typeof type === 'string'
+        ? `  | (${componentName}ComponentProps['node'] & { type: ${JSON.stringify(type)} })`
+        : null;
+    })
+    .filter(Boolean)
+    .join('\n');
+
   // Build switch cases from each component's pattern.type
   const cases = validated
     .map(({ componentName, patternJson }) => {
       const type = patternJson?.pattern?.type;
       return typeof type === 'string'
-        ? `    case ${JSON.stringify(type)}:\n      return <${componentName} node={simpleNode} />;`
+        ? `    case ${JSON.stringify(type)}:\n      return <${componentName} node={normalizedNode} />;`
         : null;
     })
     .filter(Boolean)
@@ -28,23 +50,28 @@ export async function createRenderNodeGenerated(validated, paths) {
   const fileContent =
     `/* AUTO-GENERATED FILE - DO NOT EDIT */\n` +
     `import React from 'react';\n\n` +
+    `import { normalizeComponentType } from '../utils/patterns';\n\n` +
+    `import type { Node } from '../types/Node';\n` +
     `import {\n` +
-    `  Node,\n` +
-    `  NodeData,\n` +
     `  isNodeArray,\n` +
     `  isNodeNullOrUndefined,\n` +
     `  isNodeString,\n` +
-    `} from '../index';\n\n` +
+    `} from '../utils/analyseNode';\n\n` +
     `import { other } from './other';\n\n` +
     `// Builder components\n` +
+    componentPropTypeImports +
+    `\n` +
     componentImports +
     `\n\n` +
+    `type BuilderNode =\n` +
+    (builderNodeUnion ? `${builderNodeUnion}\n` : `  never\n`) +
+    `;\n\n` +
     `function RenderNode({ node }: { node: Node }) {\n` +
     `  if (isNodeNullOrUndefined(node)) {\n` +
     `    return null;\n` +
     `  }\n` +
     `  if (isNodeString(node)) {\n` +
-    `    return <Text node={{ children: node as string, type: 'text' }} />;\n` +
+    `    return <Text node={{ children: node as string, type: ${JSON.stringify(textPatternType)} }} />;\n` +
     `  }\n` +
     `  if (isNodeArray(node)) {\n` +
     `    return (\n` +
@@ -55,11 +82,19 @@ export async function createRenderNodeGenerated(validated, paths) {
     `      </>\n` +
     `    );\n` +
     `  }\n\n` +
-    `  const simpleNode = node as NodeData;\n` +
-    `  switch (simpleNode?.type) {\n` +
+    `  const nodeType =\n` +
+    `    typeof (node as { type?: unknown })?.type === 'string'\n` +
+    `      ? (node as { type: string }).type\n` +
+    `      : 'unknown';\n` +
+    `\n` +
+    `  const normalizedType = normalizeComponentType(nodeType) ?? nodeType;\n` +
+    `\n` +
+    `  // Force a stable discriminant so TS can narrow the BuilderNode union.\n` +
+    `  const normalizedNode = { ...(node as any), type: normalizedType } as BuilderNode;\n` +
+    `  switch (normalizedNode.type) {\n` +
     cases +
     `\n    default:\n` +
-    `      return other(simpleNode?.type, node);\n` +
+    `      return other(nodeType, node);\n` +
     `  }\n` +
     `}\n\n` +
     `export default React.memo(RenderNode);\n`;

package/scripts/prebuild/utils/validateAllComponentsOrThrow.js

@@ -89,11 +89,6 @@ async function validatePatternJson(componentDir, componentName) {
       `[${componentName}] pattern.json -> 'schemaVersion' must be a number`
     );
   }
-  if (typeof data.allowUnknownAttributes !== 'boolean') {
-    return fail(
-      `[${componentName}] pattern.json -> 'allowUnknownAttributes' must be a boolean`
-    );
-  }
   if (typeof data.pattern !== 'object' || data.pattern == null) {
     return fail(
       `[${componentName}] pattern.json -> 'pattern' must be an object`
@@ -105,12 +100,24 @@ async function validatePatternJson(componentDir, componentName) {
       `[${componentName}] pattern.json -> 'pattern.type' must be a string`
     );
   }
-  if (
-    typeof pattern.children !== 'string' &&
-    !Array.isArray(pattern.children)
-  ) {
+  if (pattern.type !== componentName) {
+    return fail(
+      `[${componentName}] pattern.json -> 'pattern.type' must match the component folder name '${componentName}' (PascalCase).`
+    );
+  }
+  // children spec can only be: node | string | never
+  // - "node" means: Node | Node[]
+  // - "string" means: text node
+  // - "never" means: no children allowed
+  if (typeof pattern.children !== 'string') {
+    return fail(
+      `[${componentName}] pattern.json -> 'pattern.children' must be a string`
+    );
+  }
+  const allowedChildrenKinds = new Set(['node', 'string', 'never']);
+  if (!allowedChildrenKinds.has(pattern.children)) {
     return fail(
-      `[${componentName}] pattern.json -> 'pattern.children' must be a string or an array`
+      `[${componentName}] pattern.json -> 'pattern.children' must be one of: node | string | never`
     );
   }
   if (typeof pattern.attributes !== 'object' || pattern.attributes == null) {
@@ -120,7 +127,16 @@ async function validatePatternJson(componentDir, componentName) {
   }
 
   // Helpers for validating custom types
-  const isPrimitive = t => t === 'string' || t === 'number' || t === 'boolean';
+  const isPrimitive = t =>
+    t === 'string' ||
+    t === 'number' ||
+    t === 'boolean' ||
+    t === 'color' ||
+    t === 'size' ||
+    t === 'fontFamily' ||
+    t === 'fontWeight' ||
+    t === 'iconType';
+  const isNeverType = t => t === 'never';
   const hasCustomTypes = typeof data.types === 'object' && data.types != null;
   const isCustomType = t =>
     hasCustomTypes &&
@@ -140,14 +156,25 @@ async function validatePatternJson(componentDir, componentName) {
     return isCustomType(t);
   };
 
+  const isPlainObject = value =>
+    typeof value === 'object' && value != null && !Array.isArray(value);
+
+  const buildDefaultsBlock = source => ({
+    ...(isPlainObject(source?.pattern?.defaults)
+      ? source.pattern.defaults
+      : {}),
+    ...(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 ok =
-      (typeof attrType === 'string' && isValidTypeRef(attrType)) ||
+      (typeof attrType === 'string' &&
+        (isNeverType(attrType) || isValidTypeRef(attrType))) ||
       isEnumArray(attrType);
     if (!ok) {
       return fail(
-        `[${componentName}] pattern.json -> 'pattern.attributes.${attrName}' must be 'string' | 'number' | 'boolean' | string[] | CustomType | CustomType[]`
+        `[${componentName}] pattern.json -> 'pattern.attributes.${attrName}' must be 'string' | 'number' | 'boolean' | 'color' | 'never' | string[] | CustomType | CustomType[]`
       );
     }
   }
@@ -167,7 +194,7 @@ async function validatePatternJson(componentDir, componentName) {
           isEnumArray(fieldType);
         if (!fieldOk) {
           return fail(
-            `[${componentName}] pattern.json -> 'types.${typeName}.${fieldName}' must be 'string' | 'number' | 'boolean' | string[] | CustomType | CustomType[]`
+            `[${componentName}] pattern.json -> 'types.${typeName}.${fieldName}' must be 'string' | 'number' | 'boolean' | 'color' | string[] | CustomType | CustomType[]`
           );
         }
       }
@@ -176,12 +203,18 @@ async function validatePatternJson(componentDir, componentName) {
 
   // Resolve chained extends: walk up the chain, detect cycles, merge from base to child
   const componentsRoot = path.dirname(componentDir);
-  const visited = new Set();
+  // Track visited folders and visited pattern.type values separately.
+  // Because we enforce `pattern.type === component folder name` (PascalCase),
+  // mixing them in a single Set can incorrectly flag a "cycle" immediately
+  // when a component extends `View`.
+  const visitedFolders = new Set();
+  const visitedTypes = new Set();
   const ancestorStack = [];
 
   // Track both componentName and current type for cycle detection
-  visited.add(componentName);
-  if (typeof data?.pattern?.type === 'string') visited.add(data.pattern.type);
+  visitedFolders.add(componentName);
+  if (typeof data?.pattern?.type === 'string')
+    visitedTypes.add(data.pattern.type);
 
   let cursor = data;
   // Collect raw ancestors without mutating child yet
@@ -190,12 +223,12 @@ async function validatePatternJson(componentDir, componentName) {
     cursor.pattern.extends.trim().length > 0
   ) {
     const parentName = cursor.pattern.extends.trim();
-    if (visited.has(parentName)) {
+    if (visitedFolders.has(parentName)) {
       return fail(
         `Circular dependency detected in extends chain at '${parentName}'. We don't allow circular dependency.`
       );
     }
-    visited.add(parentName);
+    visitedFolders.add(parentName);
 
     const parentDir = path.join(componentsRoot, parentName);
     const parentDirExists = await fs
@@ -240,14 +273,13 @@ async function validatePatternJson(componentDir, componentName) {
       );
     }
 
-    // Detect cycle by type name too
     const parentType = parentData.pattern.type;
-    if (visited.has(parentType)) {
+    if (visitedTypes.has(parentType)) {
       return fail(
         `Circular dependency detected in extends chain via type '${parentType}'. We don't allow circular dependency.`
       );
     }
-    visited.add(parentType);
+    visitedTypes.add(parentType);
 
     ancestorStack.push(parentData);
     cursor = parentData;
@@ -270,14 +302,37 @@ async function validatePatternJson(componentDir, componentName) {
       : parentData?.pattern?.children;
 
     const mergedTypes = { ...(parentData.types || {}), ...(data.types || {}) };
+    const parentDefaults = buildDefaultsBlock(parentData);
+    const childDefaults = buildDefaultsBlock(data);
     const mergedDefaults = {
-      ...(parentData.defaults || {}),
-      ...(data.defaults || {}),
+      ...parentDefaults,
+      ...childDefaults,
+      // Deep-merge `defaults.style` so parent style defaults aren't blown away.
+      style: {
+        ...(isPlainObject(parentDefaults?.style) ? parentDefaults.style : {}),
+        ...(isPlainObject(childDefaults?.style) ? childDefaults.style : {}),
+      },
+    };
+    if (Object.keys(mergedDefaults.style || {}).length === 0) {
+      delete mergedDefaults.style;
+    }
+
+    const parentMetaStyles =
+      (parentData?.meta?.styles || parentData?.meta?.attributes || {}) ?? {};
+    const childMetaStyles =
+      (data?.meta?.styles || data?.meta?.attributes || {}) ?? {};
+    const mergedMetaStyles = {
+      ...(isPlainObject(parentMetaStyles) ? parentMetaStyles : {}),
+      ...(isPlainObject(childMetaStyles) ? childMetaStyles : {}),
     };
-    const mergedAllowUnknown =
-      typeof data.allowUnknownAttributes === 'boolean'
-        ? data.allowUnknownAttributes
-        : parentData.allowUnknownAttributes;
+    const mergedMeta =
+      parentData.meta || data.meta
+        ? {
+            ...(parentData.meta || {}),
+            ...(data.meta || {}),
+            styles: mergedMetaStyles,
+          }
+        : undefined;
 
     const mergedPattern = {
       ...parentData.pattern,
@@ -291,13 +346,21 @@ async function validatePatternJson(componentDir, componentName) {
     data = {
       ...parentData,
       ...data,
-      allowUnknownAttributes: mergedAllowUnknown,
       types: mergedTypes,
       defaults: mergedDefaults,
+      meta: mergedMeta,
       pattern: mergedPattern,
     };
   }
 
+  const resolvedDefaults = buildDefaultsBlock(data);
+  if (Object.keys(resolvedDefaults).length > 0) {
+    data = {
+      ...data,
+      defaults: resolvedDefaults,
+    };
+  }
+
   return data;
 }
 

package/scripts/prebuild/utils/validatePatternJson.js

@@ -30,11 +30,6 @@ export async function validatePatternJson(componentDir, componentName) {
       `[${componentName}] pattern.json -> 'schemaVersion' must be a number`
     );
   }
-  if (typeof data.allowUnknownAttributes !== 'boolean') {
-    return fail(
-      `[${componentName}] pattern.json -> 'allowUnknownAttributes' must be a boolean`
-    );
-  }
   if (typeof data.pattern !== 'object' || data.pattern == null) {
     return fail(
       `[${componentName}] pattern.json -> 'pattern' must be an object`
@@ -46,12 +41,19 @@ export async function validatePatternJson(componentDir, componentName) {
       `[${componentName}] pattern.json -> 'pattern.type' must be a string`
     );
   }
-  if (
-    typeof pattern.children !== 'string' &&
-    !Array.isArray(pattern.children)
-  ) {
+  // children spec can only be: node | string | never
+  // - "node" means: Node | Node[]
+  // - "string" means: text node
+  // - "never" means: no children allowed
+  if (typeof pattern.children !== 'string') {
     return fail(
-      `[${componentName}] pattern.json -> 'pattern.children' must be a string or an array`
+      `[${componentName}] pattern.json -> 'pattern.children' must be a string`
+    );
+  }
+  const allowedChildrenKinds = new Set(['node', 'string', 'never']);
+  if (!allowedChildrenKinds.has(pattern.children)) {
+    return fail(
+      `[${componentName}] pattern.json -> 'pattern.children' must be one of: node | string | never`
     );
   }
   if (typeof pattern.attributes !== 'object' || pattern.attributes == null) {
@@ -60,15 +62,24 @@ export async function validatePatternJson(componentDir, componentName) {
     );
   }
 
+  const isPrimitiveType = value =>
+    value === 'string' ||
+    value === 'number' ||
+    value === 'boolean' ||
+    value === 'color' ||
+    value === 'size' ||
+    value === 'iconType';
+
   for (const [attrName, attrType] of Object.entries(pattern.attributes)) {
     const isValidType =
-      typeof attrType === 'string' &&
-      (attrType === 'string' || attrType === 'number' || attrType === 'boolean')
-        ? true
-        : Array.isArray(attrType) && attrType.every(v => typeof v === 'string');
+      (typeof attrType === 'string' && isPrimitiveType(attrType)) ||
+      (typeof attrType === 'string' &&
+        attrType.endsWith('[]') &&
+        isPrimitiveType(attrType.slice(0, -2))) ||
+      (Array.isArray(attrType) && attrType.every(v => typeof v === 'string'));
     if (!isValidType) {
       return fail(
-        `[${componentName}] pattern.json -> 'pattern.attributes.${attrName}' must be 'string' | 'number' | 'boolean' | string[]`
+        `[${componentName}] pattern.json -> 'pattern.attributes.${attrName}' must be 'string' | 'number' | 'boolean' | 'color' | 'size' | 'iconType' | string[]`
       );
     }
   }