@developer_tribe/react-builder 0.1.0 → 0.1.4

package/scripts/prebuild/build-components.js

@@ -0,0 +1,528 @@
+#!/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.
+//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';
+
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+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();
+
+  // Lint pass: fail if non-generated files have ESLint errors
+  //await lintNonGeneratedOrThrow();
+
+  // 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();
+}
+
+export default run;

package/scripts/prebuild/prebuild.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+
+import run from './build-components.js';
+
+console.log('Building components...');
+try {
+  await run();
+} catch (err) {
+  console.error(err?.stack || err?.message || err);
+  process.exit(1);
+}

package/scripts/public/bin.js

@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+import { execSync } from 'child_process';
+import fs from 'fs';
+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));
+const directoryPath = Path.join(__dirname, 'scripts');
+
+const getFolderNames = dirPath => {
+  try {
+    const items = fs.readdirSync(dirPath, { withFileTypes: true });
+
+    const folderNames = items
+      .filter(item => item.isDirectory()) // Keep only directories
+      .map(folder => folder.name); // Extract folder names
+
+    return folderNames;
+  } catch (err) {
+    console.error(`Error reading directory: ${err.message}`);
+    return [];
+  }
+};
+const folderNames = getFolderNames(directoryPath);
+
+folderNames.forEach(folderName => {
+  const infoPath = Path.join(directoryPath, folderName, 'info.json');
+  const res = fs.readFileSync(infoPath, 'utf8');
+  const json = JSON.parse(res.toString('utf8'));
+  cli.command(
+    folderName,
+    json.description,
+    y => {
+      Object.entries(json.options ?? {}).forEach(([key, value]) => {
+        y.option(key, value);
+      });
+    },
+    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(' ');
+      execSync(
+        `node ${Path.join(directoryPath, folderName, 'index.js')} ${dynamicArgs}`,
+        {
+          stdio: 'inherit',
+        }
+      );
+    }
+  );
+});
+cli.demandCommand(1, 'You need to specify a command').help().strict().parse();

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

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+import yargs from 'yargs/yargs';
+import { hideBin } from 'yargs/helpers';
+import Path from 'path';
+import { fileURLToPath } from 'url';
+import { checkPathExists } from './utils/checkPathExists.js';
+import { getAllComponents } from './utils/getAllComponents.js';
+import { checkFolderAndFilesValid } from './utils/checkFolderAndFilesValid.js';
+import { createMissingFoldersAndFiles } from './utils/createMissingFoldersAndFiles.js';
+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 targetPath = process.cwd();
+
+function run() {
+  const builderComponentsPath = Path.join(
+    builderPath,
+    'src',
+    'build-components'
+  );
+  checkPathExists(builderComponentsPath);
+  const components = getAllComponents(builderComponentsPath);
+  checkFolderAndFilesValid(targetPath, components);
+  createMissingFoldersAndFiles(targetPath, components);
+  createRenderNodeGenerated(builderComponentsPath, targetPath, components);
+}
+
+run();

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

@@ -0,0 +1,11 @@
+{
+  "description": "command for build",
+  "options": {
+    "path": {
+      "alias": "p",
+      "type": "string",
+      "describe": "path of project",
+      "demandOption": false
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+import fs from 'fs';
+import Path from 'path';
+
+// Ensure target build-components folder contains only folders from components list; create missing ones
+export function checkFolderAndFilesValid(targetRootPath, components) {
+  const buildComponentsTarget = Path.join(
+    targetRootPath,
+    'src',
+    'build-components'
+  );
+  if (!fs.existsSync(buildComponentsTarget)) {
+    fs.mkdirSync(buildComponentsTarget, { recursive: true });
+  }
+
+  const entries = fs.readdirSync(buildComponentsTarget, {
+    withFileTypes: true,
+  });
+  const entryNames = new Set(
+    entries.filter(e => e.isDirectory()).map(e => e.name)
+  );
+
+  // Remove folders not in components
+  for (const name of Array.from(entryNames)) {
+    if (
+      !components.includes(name) &&
+      name !== 'RenderNode.generated.tsx' &&
+      name !== 'other.ts'
+    ) {
+      const full = Path.join(buildComponentsTarget, name);
+      fs.rmSync(full, { recursive: true, force: true });
+    }
+  }
+
+  // Create missing component folders
+  for (const component of components) {
+    const dir = Path.join(buildComponentsTarget, component);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import fs from 'fs';
+
+export function checkPathExists(path) {
+  if (!fs.existsSync(path)) {
+    throw new Error(`Path does not exist: ${path}`);
+  }
+}
+
+// no default export