@developer_tribe/react-builder 0.1.0 → 0.1.2

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "scripts"
   ],
   "scripts": {
     "prebuild": "node ./scripts/prebuild.js",

package/scripts/build-components.js

@@ -0,0 +1,550 @@
+#!/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');
+    });
+}
+
+/**
+ * 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) Check <Name>Props.ts is valid if it already exists (in the component folder)
+ */
+async function validateExistingPropsTs(componentDir, componentName) {
+  const filePath = path.join(componentDir, `${componentName}Props.ts`);
+  const exists = await fs
+    .stat(filePath)
+    .then(() => true)
+    .catch(() => false);
+  if (!exists) return; // Created in step 5 if missing
+
+  const content = await fs.readFile(filePath, 'utf8');
+  const hasExportedInterface = new RegExp(
+    `export\\s+interface\\s+${componentName}Props\\s+extends\\s+${componentName}PropsGenerated`
+  ).test(content);
+  if (!hasExportedInterface) {
+    throw new Error(
+      `${filePath} must export interface '${componentName}Props' extending '${componentName}PropsGenerated'`
+    );
+  }
+}
+
+/**
+ * 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 validateExistingPropsTs(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');
+}
+
+/** Create <Name>Props.ts if it doesn't exist 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; // Will be validated in step 6
+
+  const content =
+    `import type { ${componentName}PropsGenerated } from './${componentName}Props.generated';\n\n` +
+    `export interface ${componentName}Props extends ${componentName}PropsGenerated {\n}\n`;
+  const formatted = await formatWithPrettier(content);
+  await fs.writeFile(filePath, formatted, 'utf8');
+}
+
+/** 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 validateExistingPropsTs(componentDir, componentName);
+    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.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/src/AttributesEditor.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Node, NodeData, NodeDefaultAttribute } from './types/Node';
+import { isNodeString } from './utils/analyseNode';
+import { getAttributeSchema } from './utils/patterns';
+
+type AttributesEditorProps = {
+  node: Node;
+  onChange: (next: Node) => void;
+};
+
+function Field({
+  name,
+  type,
+  value,
+  onChange,
+}: {
+  name: string;
+  type: string | string[];
+  value: any;
+  onChange: (v: any) => void;
+}) {
+  if (Array.isArray(type)) {
+    return (
+      <select
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        className="input"
+      >
+        <option value="">(none)</option>
+        {type.map((opt) => (
+          <option key={opt} value={opt}>
+            {opt}
+          </option>
+        ))}
+      </select>
+    );
+  }
+  if (type === 'number') {
+    return (
+      <input
+        type="number"
+        value={value ?? ''}
+        onChange={(e) =>
+          onChange(e.target.value === '' ? undefined : Number(e.target.value))
+        }
+        className="input"
+      />
+    );
+  }
+  if (type === 'boolean') {
+    return (
+      <input
+        type="checkbox"
+        checked={Boolean(value)}
+        onChange={(e) => onChange(e.target.checked)}
+      />
+    );
+  }
+  return (
+    <input
+      type="text"
+      value={value ?? ''}
+      onChange={(e) =>
+        onChange(e.target.value === '' ? undefined : e.target.value)
+      }
+      className="input"
+    />
+  );
+}
+
+export function AttributesEditor({ node, onChange }: AttributesEditorProps) {
+  if (!node || isNodeString(node)) return null;
+  const data = node as NodeData<NodeDefaultAttribute>;
+  const schema = getAttributeSchema(data?.type) ?? {};
+  const attributes = (data?.attributes ?? {}) as NodeDefaultAttribute;
+
+  const entries = Object.entries(schema);
+  if (entries.length === 0) {
+    return (
+      <div style={{ padding: 8, opacity: 0.7 }}>No editable attributes</div>
+    );
+  }
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
+      {entries.map(([name, type]) => (
+        <React.Fragment key={name}>
+          <div style={{ alignSelf: 'center' }}>{name}</div>
+          <Field
+            name={name}
+            type={type}
+            value={attributes?.[name]}
+            onChange={(val) => {
+              const next: NodeData<NodeDefaultAttribute> = {
+                ...data,
+                attributes: { ...(attributes ?? {}), [name]: val },
+              };
+              onChange(next);
+            }}
+          />
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+export default React.memo(AttributesEditor);