@developer_tribe/react-builder 0.1.4 → 0.1.8

package/scripts/prebuild/build-components.js

@@ -1,528 +1,46 @@
 #!/usr/bin/env node
 // Pre-build component generator for files under `src/build-components`
-// Order of operations follows the user's checklist, implemented as sequential functions.
+// Orchestrator only; implementation lives in `./utils/functions.js`.
 //TODO: memo needs optimization
-import { promises as fs } from 'fs';
 import path from 'path';
 import url from 'url';
-import prettier from 'prettier';
-import { ESLint } from 'eslint';
+
+import {
+  validateAllComponentsOrThrow,
+  createGeneratedProps,
+  ensurePropsTs,
+  createComponentTsx,
+  validateExistingComponentTsx,
+  createRenderNodeGenerated,
+  createBuildComponentsIndex,
+  formatAllSourceFiles,
+  // lintNonGeneratedOrThrow,
+} from './utils/index.js';
 
 const __filename = url.fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-const PROJECT_ROOT = path.resolve(__dirname, '..');
+const PROJECT_ROOT = path.resolve(__dirname, '../..');
 const SRC_ROOT = path.join(PROJECT_ROOT, 'src');
 const COMPONENTS_ROOT = path.join(SRC_ROOT, 'build-components');
 const PATTERNS_ROOT = path.join(SRC_ROOT, 'patterns');
 
-/**
- * Utility: read JSON with helpful error messages
- */
-async function readJson(filePath) {
-  try {
-    const content = await fs.readFile(filePath, 'utf8');
-    return JSON.parse(content);
-  } catch (error) {
-    const reason =
-      error instanceof SyntaxError
-        ? 'Invalid JSON'
-        : error.code || error.message;
-    return fail(`Failed to read JSON at ${filePath}: ${reason}`);
-  }
-}
-
-/**
- * Utility: ensure directory exists
- */
-async function ensureDir(dirPath) {
-  await fs.mkdir(dirPath, { recursive: true });
-}
-
-/**
- * Helper: log the error for readability and then throw
- */
-function fail(message) {
-  console.error(message);
-  const err = new Error(message);
-  // eslint-disable-next-line no-underscore-dangle
-  err._alreadyLogged = true;
-  throw err;
-}
-
-/**
- * Prettier helper
- */
-async function formatWithPrettier(tempFileText) {
-  return prettier.format(tempFileText, {
-    parser: 'typescript',
-    semi: true,
-    singleQuote: true,
-    tabWidth: 2,
-  });
-}
-
-/**
- * ESLint validation for non-generated files under src
- * Fails if any non-generated TS/TSX file has errors
- */
-async function lintNonGeneratedOrThrow() {
-  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)`
-      ) // keep concise
-      .join('\n');
-    return fail(`ESLint failed on non-generated files:\n${summary}`);
-  }
-}
-
-// ===== Ensuring & Validation =====
-
-/**
- * 1) Get all files in the component root
- */
-async function getAllEntriesInComponentsRoot() {
-  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'
-      );
-    });
-}
-
-/**
- * 2) Make sure all entries are folders (throw error with reason)
- */
-function ensureAllEntriesAreFolders(dirents) {
-  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(', ')}`
-    );
-  }
-}
-
-/**
- * 3) Validate pattern.json has correct props
- * Required structure:
- * - schemaVersion: number
- * - allowUnknownAttributes: boolean
- * - pattern: {
- *     type: string
- *     children: string
- *     attributes: Record<string, 'string' | 'number' | string[]>
- *   }
- */
-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 data = await readJson(patternPath);
-
-  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;
-}
-
-/**
- * Helper to derive TS type from attribute type specifier
- */
-// (Moved to Actions section) tsTypeFromAttributeType
-
-/**
- * 4) Create <Name>Props.generated.ts (child, attributes) inside the component folder
- */
-// (Moved to Actions section) createGeneratedProps
-
-/**
- * 5) Create <Name>Props.ts if it doesn't exist inside the component folder. Must export interface extending Generated.
- */
-// (Moved to Actions section) ensurePropsTs
-
-/**
- * 6) Custom <Name>Props.ts are deprecated; validation removed.
- */
-// (intentionally left blank)
-
-/**
- * 7) Create <Name>.tsx inside its component folder
- *    Should return "hello world" and default export React.memo(Name)
- */
-// (Moved to Actions section) createComponentTsx
-
-/**
- * 8) If component file exists, check name, memo exists, export default memo
- */
-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 in step 7 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 usesMemo = /React\.memo\(/.test(content);
-  const defaultExportMemo = new RegExp(
-    `export\\s+default\\s+React\\.memo\\(\\s*${componentName}\\s*\\)\\s*;?`
-  ).test(content);
-
-  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})`);
-  }
-}
-
-/**
- * Validation aggregator per component: run all validations without creating files
- * Returns the patternJson to be reused by actions
- */
-async function validateComponent(componentDir, componentName) {
-  const patternJson = await validatePatternJson(componentDir, componentName);
-  await validateExistingComponentTsx(componentDir, componentName);
-  return { componentDir, componentName, patternJson };
-}
-
-/**
- * Validate all components first; if any fails, throw and skip all actions
- */
-async function validateAllComponentsOrThrow() {
-  const dirents = await getAllEntriesInComponentsRoot();
-  ensureAllEntriesAreFolders(dirents);
-
-  const validated = [];
-  for (const dirent of dirents) {
-    const componentName = dirent.name;
-    const componentDir = path.join(COMPONENTS_ROOT, componentName);
-    const result = await validateComponent(componentDir, componentName);
-    validated.push(result);
-  }
-  // Ensure fallback renderer exists for unknown component types
-  await ensureOtherTsExists();
-  return validated;
-}
-
-/**
- * Ensure src/build-components/other.ts exists. Create with default implementation if missing.
- */
-async function ensureOtherTsExists() {
-  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');
-}
-
-// ===== Actions & Generators =====
-
-/** Helper to derive TS type from attribute type specifier */
-function tsTypeFromAttributeType(attrType) {
-  if (attrType === 'string') return 'string';
-  if (attrType === 'number') return 'number';
-  if (attrType === 'boolean') return 'boolean';
-  if (Array.isArray(attrType)) {
-    const literals = attrType.map(v => JSON.stringify(v)).join(' | ');
-    return literals.length > 0 ? literals : 'string';
-  }
-  // Fallback
-  return 'string';
-}
-
-/** Create <Name>Props.generated.ts (child, attributes) inside the component folder */
-async function createGeneratedProps(componentDir, componentName, patternJson) {
-  await ensureDir(componentDir);
-  const fileName = `${componentName}Props.generated.ts`;
-  const filePath = path.join(componentDir, fileName);
-
-  const { pattern, allowUnknownAttributes } = patternJson;
-  const attributes = pattern.attributes || {};
-  const attributeLines = Object.entries(attributes).map(([key, t]) => {
-    const tsType = tsTypeFromAttributeType(t);
-    return `    ${key}?: ${tsType};`;
-  });
-
-  const indexSignature = allowUnknownAttributes
-    ? '    [key: string]: string | number | boolean | undefined;\n'
-    : '';
-
-  const childTsType =
-    typeof pattern.children === 'string' ? pattern.children : 'string';
-  const normalizedChildTsType = ['string', 'number', 'boolean'].includes(
-    childTsType
-  )
-    ? childTsType
-    : 'string';
-
-  const fileContent =
-    `/* AUTO-GENERATED FILE - DO NOT EDIT */\n` +
-    `\n` +
-    `export interface ${componentName}PropsGenerated {\n` +
-    `  child: ${normalizedChildTsType};\n` +
-    `  attributes: {\n` +
-    (attributeLines.length ? attributeLines.join('\n') + '\n' : '') +
-    indexSignature +
-    `  };\n` +
-    `}\n`;
-
-  const formatted = await formatWithPrettier(fileContent);
-  await fs.writeFile(filePath, formatted, 'utf8');
-}
-
-/** Delete <Name>Props.ts if it exists inside the component folder */
-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);
-}
-
-/** Create <Name>.tsx inside its component folder */
-async function createComponentTsx(componentDir, componentName) {
-  const filePath = path.join(componentDir, `${componentName}.tsx`);
-  const exists = await fs
-    .stat(filePath)
-    .then(() => true)
-    .catch(() => false);
-  if (exists) return; // Will be validated in step 8
-
-  const content =
-    `import React from 'react';\n\n` +
-    `function ${componentName}() {\n` +
-    `  return "hello world";\n` +
-    `}\n\n` +
-    `export default React.memo(${componentName});\n`;
-  const formatted = await formatWithPrettier(content);
-  await fs.writeFile(filePath, formatted, 'utf8');
-}
-
-/** Generate src/build-components/RenderNode.generated.tsx based on validated components */
-async function createRenderNodeGenerated(validated) {
-  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');
-}
-
-/** Format all TS/TSX files under src with Prettier */
-async function formatAllSourceFiles() {
-  async function* walk(dir) {
-    const dirents = 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');
-      }
-    })
-  );
-}
-
-/**
- * Orchestrator
- */
 async function run() {
-  // First pass: validations only; aborts on first failure
-  const validated = await validateAllComponentsOrThrow();
+  const paths = { PROJECT_ROOT, SRC_ROOT, COMPONENTS_ROOT, PATTERNS_ROOT };
 
-  // Lint pass: fail if non-generated files have ESLint errors
-  //await lintNonGeneratedOrThrow();
+  const validated = await validateAllComponentsOrThrow(paths);
+  // await lintNonGeneratedOrThrow(paths);
 
-  // Second pass: actions only if all validations passed
   for (const { componentDir, componentName, patternJson } of validated) {
     await createGeneratedProps(componentDir, componentName, patternJson);
     await ensurePropsTs(componentDir, componentName);
     await createComponentTsx(componentDir, componentName);
-
-    // Final sanity validations
     await validateExistingComponentTsx(componentDir, componentName);
   }
 
-  // Finally, generate the RenderNode for builder components
-  await createRenderNodeGenerated(validated);
-
-  // Format all TS/TSX files as the last step
-  await formatAllSourceFiles();
+  await createRenderNodeGenerated(validated, paths);
+  await createBuildComponentsIndex(validated, paths);
+  await formatAllSourceFiles(paths);
 }
 
 export default run;

package/scripts/prebuild/utils/createBuildComponentsIndex.js

@@ -0,0 +1,24 @@
+import path from 'path';
+import { promises as fs } from 'fs';
+import { formatWithPrettier } from './formatWithPrettier.js';
+
+// Creates src/build-components/index.ts exporting only props types for each component
+export async function createBuildComponentsIndex(validated, paths) {
+  const { COMPONENTS_ROOT } = paths;
+  const targetPath = path.join(COMPONENTS_ROOT, 'index.ts');
+
+  const exportLines = validated
+    .map(({ componentName }) => {
+      const base = `./${componentName}/${componentName}Props.generated`;
+      return `export type { ${componentName}PropsGenerated, ${componentName}ComponentProps } from '${base}';`;
+    })
+    .join('\n');
+
+  const fileContent =
+    `/* AUTO-GENERATED FILE - DO NOT EDIT */\n\n` +
+    exportLines +
+    (exportLines ? '\n' : '');
+
+  const formatted = await formatWithPrettier(fileContent);
+  await fs.writeFile(targetPath, formatted, 'utf8');
+}

package/scripts/prebuild/utils/createComponentTsx.js

@@ -0,0 +1,21 @@
+import path from 'path';
+import { promises as fs } from 'fs';
+import { formatWithPrettier } from './formatWithPrettier.js';
+
+export async function createComponentTsx(componentDir, componentName) {
+  const filePath = path.join(componentDir, `${componentName}.tsx`);
+  const exists = await fs
+    .stat(filePath)
+    .then(() => true)
+    .catch(() => false);
+  if (exists) return; // Will be validated later
+
+  const content =
+    `import React from 'react';\n\n` +
+    `function ${componentName}() {\n` +
+    `  return "hello world";\n` +
+    `}\n\n` +
+    `export default React.memo(${componentName});\n`;
+  const formatted = await formatWithPrettier(content);
+  await fs.writeFile(filePath, formatted, 'utf8');
+}

package/scripts/prebuild/utils/createGeneratedProps.js

@@ -0,0 +1,65 @@
+import path from 'path';
+import { promises as fs } from 'fs';
+import { ensureDir } from './ensureDir.js';
+// inlined from tsTypeFromAttributeType.js
+function tsTypeFromAttributeType(attrType) {
+  if (attrType === 'string') return 'string';
+  if (attrType === 'number') return 'number';
+  if (attrType === 'boolean') return 'boolean';
+  if (Array.isArray(attrType)) {
+    const literals = attrType.map(v => JSON.stringify(v)).join(' | ');
+    return literals.length > 0 ? literals : 'string';
+  }
+  return 'string';
+}
+import { formatWithPrettier } from './formatWithPrettier.js';
+
+export async function createGeneratedProps(
+  componentDir,
+  componentName,
+  patternJson
+) {
+  await ensureDir(componentDir);
+  const fileName = `${componentName}Props.generated.ts`;
+  const filePath = path.join(componentDir, fileName);
+
+  const { pattern, allowUnknownAttributes } = patternJson;
+  const attributes = pattern.attributes || {};
+  const attributeLines = Object.entries(attributes).map(([key, t]) => {
+    const tsType = tsTypeFromAttributeType(t);
+    return `    ${key}?: ${tsType};`;
+  });
+
+  const indexSignature = allowUnknownAttributes
+    ? '    [key: string]: string | number | boolean | undefined;\n'
+    : '';
+
+  const childTsType =
+    typeof pattern.children === 'string' ? pattern.children : 'string';
+  const normalizedChildTsType = ['string', 'number', 'boolean'].includes(
+    childTsType
+  )
+    ? childTsType
+    : 'string';
+
+  const fileContent =
+    `/* AUTO-GENERATED FILE - DO NOT EDIT */\n` +
+    `\n` +
+    // Re-export a component props helper to avoid repeating the local type in each component file
+    `import type { NodeData } from '../../types/Node';\n` +
+    `\n` +
+    `export interface ${componentName}PropsGenerated {\n` +
+    `  child: ${normalizedChildTsType};\n` +
+    `  attributes: {\n` +
+    (attributeLines.length ? attributeLines.join('\n') + '\n' : '') +
+    indexSignature +
+    `  };\n` +
+    `}\n` +
+    `\n` +
+    `export interface ${componentName}ComponentProps  {\n` +
+    `  node: NodeData<${componentName}PropsGenerated['attributes']>;\n` +
+    `};\n`;
+
+  const formatted = await formatWithPrettier(fileContent);
+  await fs.writeFile(filePath, formatted, 'utf8');
+}