@developer_tribe/react-builder 0.1.4 → 0.1.8

package/scripts/prebuild/utils/createRenderNodeGenerated.js

@@ -0,0 +1,69 @@
+import path from 'path';
+import { promises as fs } from 'fs';
+import { formatWithPrettier } from './formatWithPrettier.js';
+
+export async function createRenderNodeGenerated(validated, paths) {
+  const { COMPONENTS_ROOT } = paths;
+  const targetPath = path.join(COMPONENTS_ROOT, 'RenderNode.generated.tsx');
+
+  // Build imports for all components discovered
+  const componentImports = validated
+    .map(
+      ({ componentName }) =>
+        `import ${componentName} from './${componentName}/${componentName}';`
+    )
+    .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} />;`
+        : null;
+    })
+    .filter(Boolean)
+    .join('\n');
+
+  const fileContent =
+    `/* AUTO-GENERATED FILE - DO NOT EDIT */\n` +
+    `import React from 'react';\n\n` +
+    `import {\n` +
+    `  Node,\n` +
+    `  NodeData,\n` +
+    `  isNodeArray,\n` +
+    `  isNodeNullOrUndefined,\n` +
+    `  isNodeString,\n` +
+    `} from '../index';\n\n` +
+    `import { other } from './other';\n\n` +
+    `// Builder components\n` +
+    componentImports +
+    `\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` +
+    `  }\n` +
+    `  if (isNodeArray(node)) {\n` +
+    `    return (\n` +
+    `      <>\n` +
+    `        {(node as Node[]).map((item: Node, index) => (\n` +
+    `          <RenderNode key={index} node={item} />\n` +
+    `        ))}\n` +
+    `      </>\n` +
+    `    );\n` +
+    `  }\n\n` +
+    `  const simpleNode = node as NodeData;\n` +
+    `  switch (simpleNode?.type) {\n` +
+    cases +
+    `\n    default:\n` +
+    `      return other(simpleNode?.type, node);\n` +
+    `  }\n` +
+    `}\n\n` +
+    `export default React.memo(RenderNode);\n`;
+
+  const formatted = await formatWithPrettier(fileContent);
+  await fs.writeFile(targetPath, formatted, 'utf8');
+}

package/scripts/prebuild/utils/ensureDir.js

@@ -0,0 +1,5 @@
+import { promises as fs } from 'fs';
+
+export async function ensureDir(dirPath) {
+  await fs.mkdir(dirPath, { recursive: true });
+}

package/scripts/prebuild/utils/ensurePropsTs.js

@@ -0,0 +1,15 @@
+import path from 'path';
+import { promises as fs } from 'fs';
+import { ensureDir } from './ensureDir.js';
+
+export async function ensurePropsTs(componentDir, componentName) {
+  await ensureDir(componentDir);
+  const fileName = `${componentName}Props.ts`;
+  const filePath = path.join(componentDir, fileName);
+  const exists = await fs
+    .stat(filePath)
+    .then(() => true)
+    .catch(() => false);
+  if (!exists) return;
+  await fs.unlink(filePath);
+}

package/scripts/prebuild/utils/fail.js

@@ -0,0 +1,7 @@
+export function fail(message) {
+  console.error(message);
+  const err = new Error(message);
+  // eslint-disable-next-line no-underscore-dangle
+  err._alreadyLogged = true;
+  throw err;
+}

package/scripts/prebuild/utils/formatAllSourceFiles.js

@@ -0,0 +1,39 @@
+import path from 'path';
+import { promises as fs } from 'fs';
+import { formatWithPrettier } from './formatWithPrettier.js';
+
+export async function formatAllSourceFiles(paths) {
+  const { SRC_ROOT } = paths;
+  async function* walk(dir) {
+    const dirents = (await fs.readFile)
+      ? await fs.readdir(dir, { withFileTypes: true })
+      : [];
+    for (const dirent of dirents) {
+      const full = path.join(dir, dirent.name);
+      if (dirent.isDirectory()) {
+        // Skip common non-source directories
+        if (dirent.name === 'node_modules' || dirent.name === 'dist') continue;
+        yield* walk(full);
+      } else {
+        yield full;
+      }
+    }
+  }
+
+  const targets = [];
+  for await (const filePath of walk(SRC_ROOT)) {
+    if (filePath.endsWith('.ts') || filePath.endsWith('.tsx')) {
+      targets.push(filePath);
+    }
+  }
+
+  await Promise.all(
+    targets.map(async filePath => {
+      const original = await fs.readFile(filePath, 'utf8');
+      const formatted = await formatWithPrettier(original);
+      if (formatted !== original) {
+        await fs.writeFile(filePath, formatted, 'utf8');
+      }
+    })
+  );
+}

package/scripts/prebuild/utils/formatWithPrettier.js

@@ -0,0 +1,10 @@
+import prettier from 'prettier';
+
+export async function formatWithPrettier(tempFileText) {
+  return prettier.format(tempFileText, {
+    parser: 'typescript',
+    semi: true,
+    singleQuote: true,
+    tabWidth: 2,
+  });
+}

package/scripts/prebuild/utils/index.js

@@ -0,0 +1,15 @@
+export { fail } from './fail.js';
+export { ensureDir } from './ensureDir.js';
+export { formatWithPrettier } from './formatWithPrettier.js';
+
+export { lintNonGeneratedOrThrow } from './lintNonGeneratedOrThrow.js';
+
+export { validateAllComponentsOrThrow } from './validateAllComponentsOrThrow.js';
+
+export { createGeneratedProps } from './createGeneratedProps.js';
+export { ensurePropsTs } from './ensurePropsTs.js';
+export { createComponentTsx } from './createComponentTsx.js';
+export { createRenderNodeGenerated } from './createRenderNodeGenerated.js';
+export { createBuildComponentsIndex } from './createBuildComponentsIndex.js';
+export { formatAllSourceFiles } from './formatAllSourceFiles.js';
+export { validateExistingComponentTsx } from './validateExistingComponentTsx.js';

package/scripts/prebuild/utils/lintNonGeneratedOrThrow.js

@@ -0,0 +1,27 @@
+import path from 'path';
+import { ESLint } from 'eslint';
+import { fail } from './fail.js';
+
+export async function lintNonGeneratedOrThrow(paths) {
+  const { PROJECT_ROOT } = paths;
+  const eslint = new ESLint({ cwd: PROJECT_ROOT });
+  const results = await eslint.lintFiles(['src/**/*.ts', 'src/**/*.tsx']);
+
+  const isGenerated = filePath =>
+    filePath.endsWith('.generated.ts') ||
+    filePath.endsWith('RenderNode.generated.tsx');
+
+  const errorResults = results.filter(
+    r => !isGenerated(r.filePath) && r.errorCount > 0
+  );
+
+  if (errorResults.length > 0) {
+    const summary = errorResults
+      .map(
+        r =>
+          `${path.relative(PROJECT_ROOT, r.filePath)}: ${r.errorCount} error(s)`
+      )
+      .join('\n');
+    return fail(`ESLint failed on non-generated files:\n${summary}`);
+  }
+}

package/scripts/prebuild/utils/validateAllComponentsOrThrow.js

@@ -0,0 +1,156 @@
+import path from 'path';
+import { promises as fs } from 'fs';
+import { formatWithPrettier } from './formatWithPrettier.js';
+import { fail } from './fail.js';
+import { validateExistingComponentTsx } from './validateExistingComponentTsx.js';
+
+// single-use: get all entries with filtering
+async function getAllEntriesInComponentsRoot(paths) {
+  const { COMPONENTS_ROOT } = paths;
+  const exists = await fs
+    .stat(COMPONENTS_ROOT)
+    .then(() => true)
+    .catch(() => false);
+  if (!exists) {
+    return fail(`Components root not found at ${COMPONENTS_ROOT}`);
+  }
+  return await fs
+    .readdir(COMPONENTS_ROOT, { withFileTypes: true })
+    .then(dirents => {
+      return dirents.filter(
+        d =>
+          d.name !== 'RenderNode.generated.tsx' &&
+          d.name !== 'other.ts' &&
+          d.name !== 'index.ts'
+      );
+    });
+}
+
+// single-use: ensure all entries are directories
+function ensureAllEntriesAreFolders(dirents, paths) {
+  const { COMPONENTS_ROOT } = paths;
+  const notDirs = dirents.filter(d => !d.isDirectory()).map(d => d.name);
+  if (notDirs.length > 0) {
+    return fail(
+      `All entries in ${COMPONENTS_ROOT} must be directories. Non-directories found: ${notDirs.join(', ')}`
+    );
+  }
+}
+
+// single-use: ensure fallback other.ts exists
+async function ensureOtherTsExists(paths) {
+  const { COMPONENTS_ROOT } = paths;
+  const otherPath = path.join(COMPONENTS_ROOT, 'other.ts');
+  const exists = await fs
+    .stat(otherPath)
+    .then(() => true)
+    .catch(() => false);
+  if (exists) return;
+
+  const content =
+    `import React from 'react';\n` +
+    `import type { Node } from '../types/Node';\n\n` +
+    `export function other(type: string, node: Node): React.ReactNode {\n` +
+    `  return null;\n` +
+    `}\n`;
+  const formatted = await formatWithPrettier(content);
+  await fs.writeFile(otherPath, formatted, 'utf8');
+}
+
+// single-use: validate pattern.json
+async function validatePatternJson(componentDir, componentName) {
+  const patternPath = path.join(componentDir, 'pattern.json');
+  const exists = await fs
+    .stat(patternPath)
+    .then(() => true)
+    .catch(() => false);
+  if (!exists) {
+    return fail(
+      `Missing pattern.json for component ${componentName} at ${patternPath}`
+    );
+  }
+  const content = await fs.readFile(patternPath, 'utf8');
+  let data;
+  try {
+    data = JSON.parse(content);
+  } catch (error) {
+    const reason =
+      error instanceof SyntaxError
+        ? 'Invalid JSON'
+        : error.code || error.message;
+    return fail(`Failed to read JSON at ${patternPath}: ${reason}`);
+  }
+
+  if (typeof data.schemaVersion !== 'number') {
+    return fail(
+      `[${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`
+    );
+  }
+  const { pattern } = data;
+  if (typeof pattern.type !== 'string') {
+    return fail(
+      `[${componentName}] pattern.json -> 'pattern.type' must be a string`
+    );
+  }
+  if (
+    typeof pattern.children !== 'string' &&
+    !Array.isArray(pattern.children)
+  ) {
+    return fail(
+      `[${componentName}] pattern.json -> 'pattern.children' must be a string or an array`
+    );
+  }
+  if (typeof pattern.attributes !== 'object' || pattern.attributes == null) {
+    return fail(
+      `[${componentName}] pattern.json -> 'pattern.attributes' must be an object`
+    );
+  }
+
+  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');
+    if (!isValidType) {
+      return fail(
+        `[${componentName}] pattern.json -> 'pattern.attributes.${attrName}' must be 'string' | 'number' | 'boolean' | string[]`
+      );
+    }
+  }
+
+  return data;
+}
+
+// single-use: component-level validation aggregator
+async function validateComponent(componentDir, componentName) {
+  const patternJson = await validatePatternJson(componentDir, componentName);
+  await validateExistingComponentTsx(componentDir, componentName);
+  return { componentDir, componentName, patternJson };
+}
+
+export async function validateAllComponentsOrThrow(paths) {
+  const dirents = await getAllEntriesInComponentsRoot(paths);
+  ensureAllEntriesAreFolders(dirents, paths);
+
+  const validated = [];
+  for (const dirent of dirents) {
+    const componentName = dirent.name;
+    const componentDir = path.join(paths.COMPONENTS_ROOT, componentName);
+    const result = await validateComponent(componentDir, componentName);
+    validated.push(result);
+  }
+  // Ensure fallback renderer exists for unknown component types
+  await ensureOtherTsExists(paths);
+  return validated;
+}

package/scripts/prebuild/utils/validateExistingComponentTsx.js

@@ -0,0 +1,40 @@
+import path from 'path';
+import { promises as fs } from 'fs';
+import { fail } from './fail.js';
+
+export async function validateExistingComponentTsx(
+  componentDir,
+  componentName
+) {
+  const filePath = path.join(componentDir, `${componentName}.tsx`);
+  const exists = await fs
+    .stat(filePath)
+    .then(() => true)
+    .catch(() => false);
+  if (!exists) return; // Created later if missing
+
+  const content = await fs.readFile(filePath, 'utf8');
+  const hasConstDeclaration = new RegExp(`const\\s+${componentName}\\s*:`).test(
+    content
+  );
+  const hasFunctionDeclaration = new RegExp(
+    `function\\s+${componentName}\\s*\\(`
+  ).test(content);
+  const hasDeclaration = hasConstDeclaration || hasFunctionDeclaration;
+  const defaultExportMemo = new RegExp(
+    `export\\s+default\\s+React\\.memo\\(\\s*${componentName}\\s*\\)\\s*;?`
+  ).test(content);
+  const usesMemo = /React\\.memo\(/.test(content) || defaultExportMemo;
+
+  if (!hasDeclaration) {
+    return fail(
+      `${filePath} must declare component as 'const ${componentName}: React.FC = (...)' or 'function ${componentName}()'`
+    );
+  }
+  if (!usesMemo) {
+    return fail(`${filePath} must use React.memo`);
+  }
+  if (!defaultExportMemo) {
+    return fail(`${filePath} must default export React.memo(${componentName})`);
+  }
+}

package/scripts/prebuild/utils/validatePatternJson.js

@@ -0,0 +1,77 @@
+import path from 'path';
+import { promises as fs } from 'fs';
+import { fail } from './fail.js';
+
+export async function validatePatternJson(componentDir, componentName) {
+  const patternPath = path.join(componentDir, 'pattern.json');
+  const exists = await fs
+    .stat(patternPath)
+    .then(() => true)
+    .catch(() => false);
+  if (!exists) {
+    return fail(
+      `Missing pattern.json for component ${componentName} at ${patternPath}`
+    );
+  }
+  const content = await fs.readFile(patternPath, 'utf8');
+  let data;
+  try {
+    data = JSON.parse(content);
+  } catch (error) {
+    const reason =
+      error instanceof SyntaxError
+        ? 'Invalid JSON'
+        : error.code || error.message;
+    return fail(`Failed to read JSON at ${patternPath}: ${reason}`);
+  }
+
+  if (typeof data.schemaVersion !== 'number') {
+    return fail(
+      `[${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`
+    );
+  }
+  const { pattern } = data;
+  if (typeof pattern.type !== 'string') {
+    return fail(
+      `[${componentName}] pattern.json -> 'pattern.type' must be a string`
+    );
+  }
+  if (
+    typeof pattern.children !== 'string' &&
+    !Array.isArray(pattern.children)
+  ) {
+    return fail(
+      `[${componentName}] pattern.json -> 'pattern.children' must be a string or an array`
+    );
+  }
+  if (typeof pattern.attributes !== 'object' || pattern.attributes == null) {
+    return fail(
+      `[${componentName}] pattern.json -> 'pattern.attributes' must be an object`
+    );
+  }
+
+  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');
+    if (!isValidType) {
+      return fail(
+        `[${componentName}] pattern.json -> 'pattern.attributes.${attrName}' must be 'string' | 'number' | 'boolean' | string[]`
+      );
+    }
+  }
+
+  return data;
+}

package/scripts/public/bin.js

@@ -5,7 +5,6 @@ import yargs from 'yargs/yargs';
 import { hideBin } from 'yargs/helpers';
 import Path from 'path';
 import { fileURLToPath } from 'url';
-
 const cli = yargs(hideBin(process.argv));
 
 const __dirname = Path.dirname(fileURLToPath(import.meta.url));
@@ -40,11 +39,7 @@ folderNames.forEach(folderName => {
       });
     },
     args => {
-      const keys = Object.keys(json.options ?? {});
-      const dynamicArgs = Object.entries(args ?? {})
-        .filter(([key]) => keys.includes(key)) // Only accept specified keys
-        .map(([key, value]) => `--${key} "${value}"`)
-        .join(' ');
+      const dynamicArgs = process.argv.splice(2).join(' ');
       execSync(
         `node ${Path.join(directoryPath, folderName, 'index.js')} ${dynamicArgs}`,
         {

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

@@ -12,8 +12,9 @@ import { createRenderNodeGenerated } from './utils/createRenderNodeGenerated.js'
 
 const argv = yargs(hideBin(process.argv)).argv;
 export const args = argv;
-const builderPath = args.path || '/node_modules/@developer_tribe/react-builder';
+const builderPath = args.path || 'node_modules/@developer_tribe/react-builder';
 const targetPath = process.cwd();
+const selectedComponents = args.components || [];
 
 function run() {
   const builderComponentsPath = Path.join(
@@ -23,9 +24,19 @@ function run() {
   );
   checkPathExists(builderComponentsPath);
   const components = getAllComponents(builderComponentsPath);
-  checkFolderAndFilesValid(targetPath, components);
-  createMissingFoldersAndFiles(targetPath, components);
-  createRenderNodeGenerated(builderComponentsPath, targetPath, components);
+  for (const component of selectedComponents) {
+    if (!components.includes(component)) {
+      console.error(`Component ${component} not found`);
+      process.exit(1);
+    }
+  }
+  checkFolderAndFilesValid(targetPath, selectedComponents);
+  createMissingFoldersAndFiles(targetPath, selectedComponents);
+  createRenderNodeGenerated(
+    builderComponentsPath,
+    targetPath,
+    selectedComponents
+  );
 }
 
 run();

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

@@ -6,6 +6,12 @@
       "type": "string",
       "describe": "path of project",
       "demandOption": false
+    },
+    "components": {
+      "alias": "c",
+      "type": "array",
+      "describe": "component names",
+      "demandOption": false
     }
   }
 }

package/src/build-components/Button/Button.tsx

@@ -1,10 +1,5 @@
 import React from 'react';
-import type { NodeData } from '../../types/Node';
-import type { ButtonPropsGenerated } from './ButtonProps.generated';
-
-type ButtonComponentProps = {
-  node: NodeData<ButtonPropsGenerated['attributes']>;
-};
+import type { ButtonComponentProps } from './ButtonProps.generated';
 
 function Button({ node }: ButtonComponentProps) {
   return String(node?.type ?? 'button');

package/src/build-components/Button/ButtonProps.generated.ts

@@ -1,5 +1,7 @@
 /* AUTO-GENERATED FILE - DO NOT EDIT */
 
+import type { NodeData } from '../../types/Node';
+
 export interface ButtonPropsGenerated {
   child: string;
   attributes: {
@@ -19,3 +21,7 @@ export interface ButtonPropsGenerated {
       | '900';
   };
 }
+
+export interface ButtonComponentProps {
+  node: NodeData<ButtonPropsGenerated['attributes']>;
+}

package/src/build-components/Carousel/Carousel.tsx

@@ -1,13 +1,8 @@
 import React from 'react';
-import type { NodeData } from '../../types/Node';
-import type { CarouselPropsGenerated } from './CarouselProps.generated';
+import type { CarouselComponentProps } from './CarouselProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { isCarouselItem } from '../../utils/isCarousel';
 
-type CarouselComponentProps = {
-  node: NodeData<CarouselPropsGenerated['attributes']>;
-};
-
 function Carousel({ node }: CarouselComponentProps) {
   // Ensure children are carouselItems
   const renderChildren = () => {

package/src/build-components/Carousel/CarouselProps.generated.ts

@@ -1,6 +1,12 @@
 /* AUTO-GENERATED FILE - DO NOT EDIT */
 
+import type { NodeData } from '../../types/Node';
+
 export interface CarouselPropsGenerated {
   child: string;
   attributes: {};
 }
+
+export interface CarouselComponentProps {
+  node: NodeData<CarouselPropsGenerated['attributes']>;
+}

package/src/build-components/CarouselButtons/CarouselButtons.tsx

@@ -1,12 +1,7 @@
 import React, { useContext } from 'react';
-import type { NodeData } from '../../types/Node';
-import type { CarouselButtonsPropsGenerated } from './CarouselButtonsProps.generated';
+import type { CarouselButtonsComponentProps } from './CarouselButtonsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
 
-type CarouselButtonsComponentProps = {
-  node: NodeData<CarouselButtonsPropsGenerated['attributes']>;
-};
-
 function CarouselButtons({ node }: CarouselButtonsComponentProps) {
   const emblaApi = useContext(carouselContext);
   const buttonTypes = node.attributes?.buttonType || [

package/src/build-components/CarouselButtons/CarouselButtonsProps.generated.ts

@@ -1,5 +1,7 @@
 /* AUTO-GENERATED FILE - DO NOT EDIT */
 
+import type { NodeData } from '../../types/Node';
+
 export interface CarouselButtonsPropsGenerated {
   child: string;
   attributes: {
@@ -7,3 +9,7 @@ export interface CarouselButtonsPropsGenerated {
     skipNumber?: number;
   };
 }
+
+export interface CarouselButtonsComponentProps {
+  node: NodeData<CarouselButtonsPropsGenerated['attributes']>;
+}

package/src/build-components/CarouselDots/CarouselDots.tsx

@@ -1,12 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
-import type { NodeData } from '../../types/Node';
-import type { CarouselDotsPropsGenerated } from './CarouselDotsProps.generated';
+import type { CarouselDotsComponentProps } from './CarouselDotsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
 
-type CarouselDotsComponentProps = {
-  node: NodeData<CarouselDotsPropsGenerated['attributes']>;
-};
-
 function CarouselDots({ node }: CarouselDotsComponentProps) {
   const dotType = node.attributes?.dotType || 'normal_dot';
   const emblaApi = useContext(carouselContext);

package/src/build-components/CarouselDots/CarouselDotsProps.generated.ts

@@ -1,5 +1,7 @@
 /* AUTO-GENERATED FILE - DO NOT EDIT */
 
+import type { NodeData } from '../../types/Node';
+
 export interface CarouselDotsPropsGenerated {
   child: string;
   attributes: {
@@ -12,3 +14,7 @@ export interface CarouselDotsPropsGenerated {
       | 'liquid_like';
   };
 }
+
+export interface CarouselDotsComponentProps {
+  node: NodeData<CarouselDotsPropsGenerated['attributes']>;
+}