@specverse/engines 4.2.2 → 4.3.0

package/dist/libs/instance-factories/applications/templates/react-starter/detail-body-composer.js

@@ -1,79 +1,13 @@
-import { METADATA_FIELDS } from "@specverse/runtime/views/core";
-import { extractBelongsToTargets } from "./belongs-to.js";
-const METADATA_FIELD_NAMES = new Set(METADATA_FIELDS);
+import { walkPattern } from "@specverse/runtime/views/core";
+import { emitJsxSource } from "./emit-jsx-source.js";
 function composeDetailBody(context) {
-  const belongsTo = extractBelongsToTargets(context.model);
-  const fkExcludes = new Set(belongsTo.map((r) => `${r.name}Id`));
-  const { business, metadata } = partitionFields(context.model, fkExcludes);
-  const lines = [];
-  lines.push('<div className="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">');
-  if (business.length > 0) {
-    lines.push('  <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">');
-    for (const field of business) {
-      lines.push(...renderField(field, { muted: false }));
-    }
-    lines.push("  </dl>");
-  } else if (belongsTo.length === 0) {
-    lines.push('  <p className="text-sm text-gray-400">No business fields defined for this model.</p>');
-  }
-  if (belongsTo.length > 0) {
-    lines.push("");
-    lines.push('  <dl className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 border-t border-gray-200 dark:border-gray-700 pt-4">');
-    for (const rel of belongsTo) {
-      lines.push(...renderRelationshipField(rel));
-    }
-    lines.push("  </dl>");
-  }
-  if (metadata.length > 0) {
-    lines.push("");
-    lines.push('  <dl className="mt-6 grid grid-cols-1 gap-2 sm:grid-cols-2 border-t border-gray-200 dark:border-gray-700 pt-4 text-xs text-gray-500 dark:text-gray-400">');
-    for (const field of metadata) {
-      lines.push(...renderField(field, { muted: true }));
-    }
-    lines.push("  </dl>");
-  }
-  lines.push("</div>");
-  return lines.join("\n");
-}
-function partitionFields(model, exclude = /* @__PURE__ */ new Set()) {
-  const attrs = Object.keys(model.attributes ?? {});
-  const business = [];
-  const metadata = [];
-  for (const name of attrs) {
-    if (exclude.has(name)) continue;
-    const field = { name, label: humanize(name) };
-    if (METADATA_FIELD_NAMES.has(name)) {
-      metadata.push(field);
-    } else {
-      business.push(field);
-    }
-  }
-  return { business, metadata };
-}
-function renderRelationshipField(rel) {
-  const label = humanize(rel.name);
-  const fkName = `${rel.name}Id`;
-  const optionsVar = `${rel.name}Options`;
-  return [
-    "    <div>",
-    `      <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">${label}</dt>`,
-    `      <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 break-words">{resolveEntityDisplayName((item as any).${fkName}, ${optionsVar})}</dd>`,
-    "    </div>"
-  ];
-}
-function renderField(field, opts) {
-  const label = field.label ?? humanize(field.name);
-  const labelCls = opts.muted ? "font-medium uppercase tracking-wide text-gray-400 dark:text-gray-500" : "text-sm font-medium text-gray-500 dark:text-gray-400";
-  const valueCls = opts.muted ? "text-gray-500 dark:text-gray-400" : "mt-1 text-sm text-gray-900 dark:text-gray-100 break-words";
-  return [
-    "    <div>",
-    `      <dt className="${labelCls}">${label}</dt>`,
-    `      <dd className="${valueCls}">{String((item as any).${field.name} ?? '')}</dd>`,
-    "    </div>"
-  ];
-}
-function humanize(name) {
-  return name.replace(/([A-Z])/g, " $1").replace(/^./, (c) => c.toUpperCase()).trim();
+  const imports = /* @__PURE__ */ new Set();
+  const nodes = walkPattern("detail-view", {
+    model: context.model,
+    modelSchemas: context.modelSchemas,
+    view: context.view
+  });
+  return emitJsxSource(nodes, { imports, indent: 6 });
 }
 export {
   composeDetailBody

package/dist/libs/instance-factories/applications/templates/react-starter/emit-jsx-source.js

@@ -0,0 +1,129 @@
+function emitJsxSource(nodes, options) {
+  const indent = options.indent ?? 0;
+  return nodes.map((n) => emitNode(n, indent, options.imports)).join("\n");
+}
+const ATTR_BREAK_WIDTH = 80;
+function emitNode(node, indent, imports) {
+  const pad = " ".repeat(indent);
+  if (node.component === "__text__") {
+    return `${pad}${node.props?.text ?? ""}`;
+  }
+  if (node.component === "__todo__") {
+    const msg = node.props?.message ?? "TODO";
+    return `${pad}{/* TODO: ${msg} */}`;
+  }
+  if (node.component === "__when_empty__") {
+    const source = node.props?.source ?? "items";
+    const inner = (node.children ?? []).map((c) => emitNode(c, indent + 2, imports)).join("\n");
+    return [
+      `${pad}{${source}.length === 0 && (`,
+      inner,
+      `${pad})}`
+    ].join("\n");
+  }
+  if (node.component === "__when__") {
+    const condition = node.props?.condition ?? "true";
+    const inner = (node.children ?? []).map((c) => emitNode(c, indent + 2, imports)).join("\n");
+    return [
+      `${pad}{${condition} && (`,
+      inner,
+      `${pad})}`
+    ].join("\n");
+  }
+  const isComposite = /^[A-Z]/.test(node.component);
+  if (isComposite) imports.add(node.component);
+  const attrParts = formatAttrParts(node.props, node.expressions);
+  const inlineAttrs = attrParts.length > 0 ? " " + attrParts.join(" ") : "";
+  const hasInlineExpression = Boolean(
+    node.expressions?.children && (!node.children || node.children.length === 0)
+  );
+  const hasSingleTextChild = Boolean(
+    node.children?.length === 1 && node.children[0].component === "__text__" && !node.children[0].iterate
+  );
+  const isCompact = hasInlineExpression || hasSingleTextChild;
+  const shouldBreakAttrs = !isCompact && inlineAttrs.length > ATTR_BREAK_WIDTH;
+  const multiLineAttrs = attrParts.length > 0 ? "\n" + attrParts.map((a) => " ".repeat(indent + 2) + a).join("\n") + "\n" + pad : "";
+  const attrs = shouldBreakAttrs ? multiLineAttrs : inlineAttrs;
+  if (hasInlineExpression) {
+    return `${pad}<${node.component}${attrs}>{${node.expressions.children}}</${node.component}>`;
+  }
+  if (hasSingleTextChild) {
+    const text = node.children[0].props?.text ?? "";
+    return `${pad}<${node.component}${attrs}>${text}</${node.component}>`;
+  }
+  const bodyLines = renderChildren(node, indent + 2, imports);
+  if (VOID_ELEMENTS.has(node.component) && bodyLines === null) {
+    return `${pad}<${node.component}${attrs} />`;
+  }
+  if (bodyLines === null || bodyLines === "") {
+    return `${pad}<${node.component}${attrs} />`;
+  }
+  return [
+    `${pad}<${node.component}${attrs}>`,
+    bodyLines,
+    `${pad}</${node.component}>`
+  ].join("\n");
+}
+function renderChildren(node, indent, imports) {
+  const pad = " ".repeat(indent);
+  const children = node.children ?? [];
+  if (node.iterate) {
+    const { source, itemName, keyExpression } = node.iterate;
+    return children.map((c) => emitNode(c, indent, imports)).join("\n");
+  }
+  if (children.length === 0 && !node.expressions?.children) return null;
+  if (children.length === 0 && node.expressions?.children) return "";
+  return children.map((c) => {
+    if (c.iterate) return emitIterated(c, indent, imports);
+    return emitNode(c, indent, imports);
+  }).join("\n");
+}
+function emitIterated(node, indent, imports) {
+  const pad = " ".repeat(indent);
+  const { source, itemName, keyExpression } = node.iterate;
+  const inner = emitNode({ ...node, iterate: void 0 }, indent + 2, imports);
+  const args = keyExpression ? `(${itemName}, ${keyExpression})` : `(${itemName})`;
+  return [
+    `${pad}{${source}.map(${args} => (`,
+    inner,
+    `${pad}))}`
+  ].join("\n");
+}
+function formatAttrParts(props, expressions) {
+  const parts = [];
+  for (const [k, v] of Object.entries(props ?? {})) {
+    if (v === void 0 || v === null) continue;
+    parts.push(formatStaticProp(k, v));
+  }
+  for (const [k, expr] of Object.entries(expressions ?? {})) {
+    if (k === "children") continue;
+    parts.push(`${k}={${expr}}`);
+  }
+  return parts;
+}
+function formatStaticProp(name, value) {
+  if (value === true) return name;
+  if (typeof value === "string") return `${name}=${JSON.stringify(value)}`;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return `${name}={${value}}`;
+  }
+  return `${name}={${JSON.stringify(value)}}`;
+}
+const VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "source",
+  "track",
+  "wbr"
+]);
+export {
+  emitJsxSource
+};

package/dist/libs/instance-factories/applications/templates/react-starter/form-body-composer.js

@@ -1,216 +1,13 @@
-import { METADATA_FIELDS } from "@specverse/runtime/views/core";
-import { extractBelongsToTargets } from "./belongs-to.js";
-const AUTO_GENERATED_FIELD_NAMES = new Set(METADATA_FIELDS);
+import { walkPattern } from "@specverse/runtime/views/core";
+import { emitJsxSource } from "./emit-jsx-source.js";
 function composeFormBody(context) {
-  const belongsTo = extractBelongsToTargets(context.model);
-  const shadowedFKs = new Set(belongsTo.map((rel) => `${rel.name}Id`));
-  const fields = selectFormFields(context.model, shadowedFKs);
-  const lines = [];
-  lines.push('<div className="space-y-4">');
-  if (fields.length === 0 && belongsTo.length === 0) {
-    lines.push('  <p className="text-sm text-gray-400">No editable fields for this model.</p>');
-    lines.push("</div>");
-    return lines.join("\n");
-  }
-  for (const field of fields) {
-    lines.push(...renderInput(field));
-  }
-  for (const rel of belongsTo) {
-    lines.push(...renderRelationshipSelect(rel));
-  }
-  lines.push("</div>");
-  return lines.join("\n");
-}
-function renderRelationshipSelect(rel) {
-  const fkName = `${rel.name}Id`;
-  const varName = `${rel.name}Options`;
-  const label = humanize(rel.name);
-  return [
-    "  <div>",
-    `    <label className="${LABEL_CLS}" htmlFor="${fkName}">${label} *</label>`,
-    `    <select`,
-    `      id="${fkName}"`,
-    `      className="${INPUT_CLS}"`,
-    `      value={String((formData as any).${fkName} ?? '')}`,
-    `      onChange={e => handleChange('${fkName}', e.target.value)} required`,
-    `    >`,
-    `      <option value="">\u2014 choose \u2014</option>`,
-    `      {${varName}.map((opt: any) => (`,
-    `        <option key={opt.id} value={opt.id}>{getEntityDisplayName(opt)}</option>`,
-    `      ))}`,
-    `    </select>`,
-    "  </div>"
-  ];
-}
-function selectFormFields(model, skip = /* @__PURE__ */ new Set()) {
-  const out = [];
-  const attrs = model.attributes ?? {};
-  const lifecycleStates = extractLifecycleStates(model);
-  for (const [name, rawDef] of Object.entries(attrs)) {
-    if (AUTO_GENERATED_FIELD_NAMES.has(name)) continue;
-    if (skip.has(name)) continue;
-    const def = rawDef;
-    if (def?.auto) continue;
-    const type = def?.type ?? parseTypeFromConvention(def) ?? "String";
-    const required = def?.required === true || hasConventionFlag(def, "required");
-    const declaredValues = def?.values;
-    const lifecycleValues = lifecycleStates.get(name);
-    const values = declaredValues ?? lifecycleValues;
-    const maxLength = def?.maxLength ?? def?.max;
-    const isLongString = typeof maxLength === "number" && maxLength > 100;
-    out.push({
-      name,
-      label: humanize(name),
-      type: normalizeType(type),
-      required,
-      values,
-      isLongString
-    });
-  }
-  return out;
-}
-function extractLifecycleStates(model) {
-  const out = /* @__PURE__ */ new Map();
-  const lifecycles = model.lifecycles ?? {};
-  for (const [name, rawDef] of Object.entries(lifecycles)) {
-    if (!rawDef || typeof rawDef !== "object") continue;
-    const def = rawDef;
-    if (Array.isArray(def.states) && def.states.length > 0) {
-      const names = def.states.map((s) => typeof s === "string" ? s : s?.name ?? s?.id ?? "").filter(Boolean);
-      if (names.length > 0) {
-        out.set(name, names);
-        continue;
-      }
-    }
-    if (typeof def.flow === "string") {
-      const states = def.flow.split(/\s*(?:->|,)\s*/).map((s) => s.trim()).filter(Boolean);
-      if (states.length > 0) out.set(name, states);
-    }
-  }
-  return out;
-}
-function parseTypeFromConvention(def) {
-  if (typeof def === "string") {
-    const first = def.trim().split(/\s+/)[0];
-    return first;
-  }
-  return void 0;
-}
-function hasConventionFlag(def, flag) {
-  if (typeof def === "string") {
-    return def.split(/\s+/).includes(flag);
-  }
-  return false;
-}
-function normalizeType(type) {
-  return type.replace(/[^A-Za-z].*$/, "");
-}
-const INPUT_CLS = "w-full rounded border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100";
-const LABEL_CLS = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1";
-function renderInput(field) {
-  const requiredMark = field.required ? " *" : "";
-  const reqAttr = field.required ? " required" : "";
-  if (field.values && field.values.length > 0) {
-    const options = field.values.map((v) => `      <option value="${escapeAttr(v)}">${escapeText(v)}</option>`).join("\n");
-    return [
-      "  <div>",
-      `    <label className="${LABEL_CLS}" htmlFor="${field.name}">${field.label}${requiredMark}</label>`,
-      `    <select`,
-      `      id="${field.name}"`,
-      `      className="${INPUT_CLS}"`,
-      `      value={String((formData as any).${field.name} ?? '')}`,
-      `      onChange={e => handleChange('${field.name}', e.target.value)}${reqAttr}`,
-      `    >`,
-      `      <option value="">\u2014 choose \u2014</option>`,
-      options,
-      `    </select>`,
-      "  </div>"
-    ];
-  }
-  if (field.type === "Text" || field.isLongString) {
-    return [
-      "  <div>",
-      `    <label className="${LABEL_CLS}" htmlFor="${field.name}">${field.label}${requiredMark}</label>`,
-      `    <textarea`,
-      `      id="${field.name}"`,
-      `      className="${INPUT_CLS}"`,
-      `      rows={4}`,
-      `      value={String((formData as any).${field.name} ?? '')}`,
-      `      onChange={e => handleChange('${field.name}', e.target.value)}${reqAttr}`,
-      `    />`,
-      "  </div>"
-    ];
-  }
-  if (field.type === "Boolean") {
-    return [
-      "  <div>",
-      `    <label className="inline-flex items-center gap-2">`,
-      `      <input`,
-      `        id="${field.name}"`,
-      `        type="checkbox"`,
-      `        checked={Boolean((formData as any).${field.name})}`,
-      `        onChange={e => handleChange('${field.name}', e.target.checked)}`,
-      `      />`,
-      `      <span className="text-sm text-gray-700 dark:text-gray-300">${field.label}${requiredMark}</span>`,
-      `    </label>`,
-      "  </div>"
-    ];
-  }
-  const inputType = mapInputType(field.type);
-  return [
-    "  <div>",
-    `    <label className="${LABEL_CLS}" htmlFor="${field.name}">${field.label}${requiredMark}</label>`,
-    `    <input`,
-    `      id="${field.name}"`,
-    `      type="${inputType}"`,
-    `      className="${INPUT_CLS}"`,
-    `      value={String((formData as any).${field.name} ?? '')}`,
-    `      onChange={e => handleChange('${field.name}', ${coerceOnChange(field.type)})}${reqAttr}`,
-    `    />`,
-    "  </div>"
-  ];
-}
-function mapInputType(type) {
-  switch (type) {
-    case "Integer":
-    case "Float":
-    case "Number":
-    case "Money":
-      return "number";
-    case "DateTime":
-      return "datetime-local";
-    case "Date":
-      return "date";
-    case "Email":
-      return "email";
-    case "URL":
-      return "url";
-    case "String":
-    case "UUID":
-    default:
-      return "text";
-  }
-}
-function coerceOnChange(type) {
-  switch (type) {
-    case "Integer":
-    case "Number":
-      return "e.target.value === '' ? undefined : Number(e.target.value)";
-    case "Float":
-    case "Money":
-      return "e.target.value === '' ? undefined : parseFloat(e.target.value)";
-    default:
-      return "e.target.value";
-  }
-}
-function humanize(name) {
-  return name.replace(/([A-Z])/g, " $1").replace(/^./, (c) => c.toUpperCase()).trim();
-}
-function escapeAttr(s) {
-  return s.replace(/"/g, "&quot;");
-}
-function escapeText(s) {
-  return s.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  const imports = /* @__PURE__ */ new Set();
+  const nodes = walkPattern("form-view", {
+    model: context.model,
+    modelSchemas: context.modelSchemas,
+    view: context.view
+  });
+  return emitJsxSource(nodes, { imports, indent: 6 });
 }
 export {
   composeFormBody