@jskit-ai/crud-ui-generator 0.1.84 → 0.1.86

package/package.descriptor.mjs

@@ -3,7 +3,7 @@ import { GENERATED_UI_NAVIGATION_ROLE_OPTION } from "@jskit-ai/kernel/shared/sup
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/crud-ui-generator",
-  version: "0.1.84",
+  version: "0.1.86",
   kind: "generator",
   description: "Generate CRUD route trees from resource validators at an explicit route root relative to src/pages/.",
   options: {
@@ -175,7 +175,7 @@ export default Object.freeze({
   mutations: {
     dependencies: {
       runtime: {
-        "@jskit-ai/users-web": "0.1.116"
+        "@jskit-ai/users-web": "0.1.118"
       },
       dev: {}
     },

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@jskit-ai/crud-ui-generator",
-  "version": "0.1.84",
+  "version": "0.1.86",
   "type": "module",
   "scripts": {
     "test": "node --test"
   },
   "dependencies": {
-    "@jskit-ai/crud-core": "0.1.109",
-    "@jskit-ai/kernel": "0.1.102",
-    "@jskit-ai/resource-crud-core": "0.1.46"
+    "@jskit-ai/crud-core": "0.1.111",
+    "@jskit-ai/kernel": "0.1.104",
+    "@jskit-ai/resource-crud-core": "0.1.48"
   },
   "exports": {
     "./server/buildTemplateContext": "./src/server/buildTemplateContext.js"

package/src/server/buildTemplateContext.js

@@ -30,7 +30,7 @@ import {
   buildViewColumns,
   buildFormColumns,
   resolveRecordIdFieldKey,
-  renderObjectPushLines,
+  renderObjectArrayEntryLines,
   resolveRecordChangedEventName,
   resolveRecordIdExpression
 } from "./resourceSupport.js";
@@ -864,8 +864,8 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
     __JSKIT_UI_SHARED_FORM_SLOT_PROPS__: buildCrudFieldsSlotProps(sharedFormFields, { includeMode: true }),
     __JSKIT_UI_CREATE_FORM_FIELDS__: JSON.stringify(createFields),
     __JSKIT_UI_EDIT_FORM_FIELDS__: JSON.stringify(editFields),
-    __JSKIT_UI_CREATE_FORM_FIELD_PUSH_LINES__: renderObjectPushLines("UI_CREATE_FORM_FIELDS", createFields),
-    __JSKIT_UI_EDIT_FORM_FIELD_PUSH_LINES__: renderObjectPushLines("UI_EDIT_FORM_FIELDS", editFields),
+    __JSKIT_UI_CREATE_FORM_FIELD_ARRAY_ENTRIES__: renderObjectArrayEntryLines(createFields),
+    __JSKIT_UI_EDIT_FORM_FIELD_ARRAY_ENTRIES__: renderObjectArrayEntryLines(editFields),
     __JSKIT_UI_CREATE_LOOKUP_IMPORT_LINE__: buildLookupImportLine(createFields),
     __JSKIT_UI_EDIT_LOOKUP_IMPORT_LINE__: buildLookupImportLine(editFields),
     __JSKIT_UI_CREATE_LOOKUP_RUNTIME_SETUP__: buildLookupRuntimeSetup(createFields, {

package/src/server/resourceSupport.js

@@ -18,6 +18,7 @@ import { normalizeSurfaceId } from "@jskit-ai/kernel/shared/surface/registry";
 import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
 
 const JS_IDENTIFIER_PATTERN = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+const JS_IDENTIFIER_PROPERTY_PATTERN = /^(\s*)"([A-Za-z_$][A-Za-z0-9_$]*)":/gm;
 const JSON_REST_TRANSPORT_EXTENSION_KEY = "x-json-rest-schema";
 
 function requireOption(options, optionName, { context = "ui-generator" } = {}) {
@@ -1045,21 +1046,22 @@ function resolveRecordIdFieldKey(fields = []) {
   return normalizeText(preferred?.key) || "id";
 }
 
-function renderObjectPushLines(arrayName, entries = []) {
-  const normalizedArrayName = normalizeText(arrayName);
-  if (!normalizedArrayName) {
-    return "";
-  }
-
+function renderObjectArrayEntryLines(entries = [], { indent = "  " } = {}) {
+  const entryIndent = String(indent || "");
   const lines = [];
   for (const entry of Array.isArray(entries) ? entries : []) {
     if (!entry || typeof entry !== "object" || Array.isArray(entry)) {
       continue;
     }
-    lines.push(`${normalizedArrayName}.push(${JSON.stringify(entry, null, 2)});`);
+    const entrySource = JSON.stringify(entry, null, 2)
+      .replace(JS_IDENTIFIER_PROPERTY_PATTERN, "$1$2:")
+      .split("\n")
+      .map((line) => `${entryIndent}${line}`)
+      .join("\n");
+    lines.push(`${entrySource},`);
   }
 
-  return lines.join("\n\n");
+  return lines.length > 0 ? `${lines.join("\n")}\n` : "";
 }
 
 function resolveRecordIdExpression(fields = []) {
@@ -1088,7 +1090,7 @@ export {
   buildViewColumns,
   buildFormColumns,
   resolveRecordIdFieldKey,
-  renderObjectPushLines,
+  renderObjectArrayEntryLines,
   resolveCrudRecordChangedEvent as resolveRecordChangedEventName,
   resolveRecordIdExpression
 };

package/src/server/subcommands/addField.js

@@ -16,7 +16,7 @@ import {
   buildListRowColumns,
   buildViewColumns,
   buildFormColumns,
-  renderObjectPushLines
+  renderObjectArrayEntryLines
 } from "../resourceSupport.js";
 
 const SUPPORTED_OPERATIONS = new Set(["list", "view", "new", "edit"]);
@@ -217,6 +217,126 @@ function insertBeforeAnchor(source, { anchor = "", snippet = "" } = {}) {
   };
 }
 
+function findMatchingDelimiter(sourceText = "", openIndex = -1, openChar = "[", closeChar = "]") {
+  const source = String(sourceText || "");
+  if (openIndex < 0 || source[openIndex] !== openChar) {
+    return -1;
+  }
+
+  let depth = 0;
+  let quote = "";
+  let inLineComment = false;
+  let inBlockComment = false;
+  for (let index = openIndex; index < source.length; index += 1) {
+    const char = source[index];
+    const nextChar = source[index + 1] || "";
+    const previousChar = source[index - 1] || "";
+
+    if (inLineComment) {
+      if (char === "\n") {
+        inLineComment = false;
+      }
+      continue;
+    }
+    if (inBlockComment) {
+      if (char === "*" && nextChar === "/") {
+        inBlockComment = false;
+        index += 1;
+      }
+      continue;
+    }
+    if (quote) {
+      if (char === "\\" && quote !== "`") {
+        index += 1;
+        continue;
+      }
+      if (char === quote && previousChar !== "\\") {
+        quote = "";
+      }
+      continue;
+    }
+
+    if (char === "/" && nextChar === "/") {
+      inLineComment = true;
+      index += 1;
+      continue;
+    }
+    if (char === "/" && nextChar === "*") {
+      inBlockComment = true;
+      index += 1;
+      continue;
+    }
+    if (char === "\"" || char === "'" || char === "`") {
+      quote = char;
+      continue;
+    }
+    if (char === openChar) {
+      depth += 1;
+      continue;
+    }
+    if (char === closeChar) {
+      depth -= 1;
+      if (depth === 0) {
+        return index;
+      }
+    }
+  }
+
+  return -1;
+}
+
+function resolveAnchorLineIndex(sourceText = "", anchor = "") {
+  const escapedAnchor = String(anchor || "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const anchorLinePattern = new RegExp(`^[ \\t]*${escapedAnchor}[ \\t]*$`, "m");
+  const anchorLineMatch = anchorLinePattern.exec(String(sourceText || ""));
+  return Number(anchorLineMatch?.index ?? -1);
+}
+
+function findArrayDeclarationBeforeIndex(sourceText = "", arrayName = "", index = -1) {
+  const source = String(sourceText || "");
+  const resolvedIndex = Number.isInteger(index) ? index : -1;
+  if (resolvedIndex < 0) {
+    return null;
+  }
+
+  const declarationPattern = new RegExp(`\\b(?:const|let)\\s+${arrayName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\s*=\\s*\\[`, "g");
+  let match = null;
+  let selected = null;
+  while ((match = declarationPattern.exec(source)) != null) {
+    if (match.index > resolvedIndex) {
+      break;
+    }
+    selected = match;
+  }
+  if (!selected) {
+    return null;
+  }
+
+  const openIndex = source.indexOf("[", selected.index);
+  const closeIndex = findMatchingDelimiter(source, openIndex, "[", "]");
+  if (closeIndex < 0) {
+    return null;
+  }
+
+  return {
+    openIndex,
+    closeIndex
+  };
+}
+
+function insertFormFieldDefinition(source, insertion = {}) {
+  const anchorIndex = resolveAnchorLineIndex(source, insertion.anchor);
+  const declaration = findArrayDeclarationBeforeIndex(source, insertion.arrayName, anchorIndex);
+  if (!declaration || anchorIndex <= declaration.openIndex || anchorIndex >= declaration.closeIndex) {
+    throw new Error(
+      `crud-ui-generator field found legacy form-field marker layout for ${insertion.arrayName}. ` +
+      "Run `jskit app migrate-source-mutations` before adding more generated form fields."
+    );
+  }
+
+  return insertBeforeAnchor(source, insertion);
+}
+
 function resolveAnchorScopeStart(source = "", { anchorIndex = -1, anchor = "" } = {}) {
   const sourceText = String(source || "");
   const resolvedAnchorIndex = Number.isInteger(anchorIndex) ? anchorIndex : -1;
@@ -284,7 +404,8 @@ function buildAnchorInsertions(operationName, field) {
       {
         targetKind: "form-fields",
         anchor: "// jskit:crud-ui-form-fields:new",
-        snippet: renderObjectPushLines("UI_CREATE_FORM_FIELDS", [field])
+        arrayName: "UI_CREATE_FORM_FIELDS",
+        snippet: renderObjectArrayEntryLines([field])
       }
     ];
   }
@@ -298,7 +419,8 @@ function buildAnchorInsertions(operationName, field) {
     {
       targetKind: "form-fields",
       anchor: "// jskit:crud-ui-form-fields:edit",
-      snippet: renderObjectPushLines("UI_EDIT_FORM_FIELDS", [field])
+      arrayName: "UI_EDIT_FORM_FIELDS",
+      snippet: renderObjectArrayEntryLines([field])
     }
   ];
 }
@@ -426,7 +548,9 @@ async function runGeneratorSubcommand({
       fileStates.set(targetFile.absolutePath, state);
     }
 
-    const applied = insertBeforeAnchor(state.source, insertion);
+    const applied = insertion.targetKind === "form-fields"
+      ? insertFormFieldDefinition(state.source, insertion)
+      : insertBeforeAnchor(state.source, insertion);
     state.source = applied.content;
     state.changed = state.changed || applied.changed;
     changed = changed || applied.changed;

package/templates/src/pages/admin/ui-generator/AddEditFormFields.js

@@ -1,17 +1,17 @@
-const UI_CREATE_FORM_FIELDS = [];
+const UI_CREATE_FORM_FIELDS = [
+__JSKIT_UI_CREATE_FORM_FIELD_ARRAY_ENTRIES__  // jskit:crud-ui-form-fields:new
+];
 
 // @jskit-contract crud.ui.form-fields.__JSKIT_UI_RESOURCE_NAMESPACE__.new.v1
 void UI_CREATE_FORM_FIELDS;
-// jskit:crud-ui-form-fields:new
-__JSKIT_UI_CREATE_FORM_FIELD_PUSH_LINES__
 Object.freeze(UI_CREATE_FORM_FIELDS);
 
-const UI_EDIT_FORM_FIELDS = [];
+const UI_EDIT_FORM_FIELDS = [
+__JSKIT_UI_EDIT_FORM_FIELD_ARRAY_ENTRIES__  // jskit:crud-ui-form-fields:edit
+];
 
 // @jskit-contract crud.ui.form-fields.__JSKIT_UI_RESOURCE_NAMESPACE__.edit.v1
 void UI_EDIT_FORM_FIELDS;
-// jskit:crud-ui-form-fields:edit
-__JSKIT_UI_EDIT_FORM_FIELD_PUSH_LINES__
 Object.freeze(UI_EDIT_FORM_FIELDS);
 
 export { UI_CREATE_FORM_FIELDS, UI_EDIT_FORM_FIELDS };

package/templates/src/pages/admin/ui-generator/EditElement.vue

@@ -27,12 +27,12 @@ const UI_LIST_URL = __JSKIT_UI_EDIT_PAGE_LIST_URL__;
 const UI_VIEW_URL = __JSKIT_UI_EDIT_PAGE_VIEW_URL__;
 const UI_CANCEL_URL = UI_VIEW_URL || UI_LIST_URL;
 const UI_RECORD_CHANGED_EVENT = __JSKIT_UI_RECORD_CHANGED_EVENT__;
-const UI_EDIT_FORM_FIELDS = [];
+const UI_EDIT_FORM_FIELDS = [
+__JSKIT_UI_EDIT_FORM_FIELD_ARRAY_ENTRIES__  // jskit:crud-ui-form-fields:edit
+];
 
 // @jskit-contract crud.ui.form-fields.__JSKIT_UI_RESOURCE_NAMESPACE__.edit.v1
 void UI_EDIT_FORM_FIELDS;
-// jskit:crud-ui-form-fields:edit
-__JSKIT_UI_EDIT_FORM_FIELD_PUSH_LINES__
 Object.freeze(UI_EDIT_FORM_FIELDS);
 
 const route = useRoute();

package/templates/src/pages/admin/ui-generator/NewElement.vue

@@ -23,12 +23,12 @@ const UI_CREATE_API_URL = "__JSKIT_UI_API_BASE_URL__";
 const UI_LIST_URL = __JSKIT_UI_NEW_PAGE_LIST_URL__;
 const UI_VIEW_URL = __JSKIT_UI_NEW_PAGE_VIEW_URL__;
 const UI_RECORD_CHANGED_EVENT = __JSKIT_UI_RECORD_CHANGED_EVENT__;
-const UI_CREATE_FORM_FIELDS = [];
+const UI_CREATE_FORM_FIELDS = [
+__JSKIT_UI_CREATE_FORM_FIELD_ARRAY_ENTRIES__  // jskit:crud-ui-form-fields:new
+];
 
 // @jskit-contract crud.ui.form-fields.__JSKIT_UI_RESOURCE_NAMESPACE__.new.v1
 void UI_CREATE_FORM_FIELDS;
-// jskit:crud-ui-form-fields:new
-__JSKIT_UI_CREATE_FORM_FIELD_PUSH_LINES__
 Object.freeze(UI_CREATE_FORM_FIELDS);
 
 __JSKIT_UI_CREATE_LOOKUP_RUNTIME_SETUP__

package/test/addFieldSubcommand.test.js

@@ -104,9 +104,10 @@ test("field patches edit screen using resource metadata and anchors", async () =
 </template>
 <script setup>
 import { resource as uiResource } from "/packages/contacts/src/shared/contactResource.js";
-const UI_EDIT_FORM_FIELDS = [];
-// jskit:crud-ui-form-fields:edit
-UI_EDIT_FORM_FIELDS.push({ key: "firstName", component: "text" });
+const UI_EDIT_FORM_FIELDS = [
+  { key: "firstName", component: "text" },
+  // jskit:crud-ui-form-fields:edit
+];
 </script>
 `
     );
@@ -132,7 +133,8 @@ UI_EDIT_FORM_FIELDS.push({ key: "firstName", component: "text" });
     assert.match(editSource, /:search="fieldLookupSearch\('vetId'\)"/);
     assert.match(editSource, /@update:search="setFieldLookupSearch\('vetId', \$event\)"/);
     assert.match(editSource, /:loading="fieldLookupLoading\('vetId'\)"/);
-    assert.match(editSource, /UI_EDIT_FORM_FIELDS\.push\(\{[\s\S]*"key": "vetId"/);
+    assert.doesNotMatch(editSource, /UI_EDIT_FORM_FIELDS\.push/);
+    assert.match(editSource, /const UI_EDIT_FORM_FIELDS = \[[\s\S]*key: "vetId"[\s\S]*\/\/ jskit:crud-ui-form-fields:edit/);
 
     const second = await runGeneratorSubcommand({
       appRoot,
@@ -178,9 +180,10 @@ import { resource as uiResource } from "/packages/contacts/src/shared/contactRes
     await writeAppFile(
       appRoot,
       addEditFieldsFile,
-      `const UI_EDIT_FORM_FIELDS = [];
-// jskit:crud-ui-form-fields:edit
-UI_EDIT_FORM_FIELDS.push({ key: "firstName", component: "text" });
+      `const UI_EDIT_FORM_FIELDS = [
+  { key: "firstName", component: "text" },
+  // jskit:crud-ui-form-fields:edit
+];
 `
     );
 
@@ -200,7 +203,8 @@ UI_EDIT_FORM_FIELDS.push({ key: "firstName", component: "text" });
     );
 
     const addEditFieldsSource = await readFile(path.join(appRoot, addEditFieldsFile), "utf8");
-    assert.match(addEditFieldsSource, /UI_EDIT_FORM_FIELDS\.push\(\{[\s\S]*"key": "vetId"/);
+    assert.doesNotMatch(addEditFieldsSource, /UI_EDIT_FORM_FIELDS\.push/);
+    assert.match(addEditFieldsSource, /const UI_EDIT_FORM_FIELDS = \[[\s\S]*key: "vetId"[\s\S]*\/\/ jskit:crud-ui-form-fields:edit/);
   });
 });
 
@@ -257,10 +261,12 @@ import { resource as uiResource } from "/packages/contacts/src/shared/contactRes
     await writeAppFile(
       appRoot,
       addEditFieldsFile,
-      `const UI_CREATE_FORM_FIELDS = [];
-// jskit:crud-ui-form-fields:new
-const UI_EDIT_FORM_FIELDS = [];
-// jskit:crud-ui-form-fields:edit
+      `const UI_CREATE_FORM_FIELDS = [
+  // jskit:crud-ui-form-fields:new
+];
+const UI_EDIT_FORM_FIELDS = [
+  // jskit:crud-ui-form-fields:edit
+];
 `
     );
 
@@ -281,8 +287,49 @@ const UI_EDIT_FORM_FIELDS = [];
     assert.equal((addEditFormSource.match(/fieldLookupItems\('vetId'/g) || []).length, 2);
 
     const addEditFieldsSource = await readFile(path.join(appRoot, addEditFieldsFile), "utf8");
-    assert.match(addEditFieldsSource, /UI_CREATE_FORM_FIELDS\.push\(\{[\s\S]*"key": "vetId"/);
-    assert.match(addEditFieldsSource, /UI_EDIT_FORM_FIELDS\.push\(\{[\s\S]*"key": "vetId"/);
+    assert.doesNotMatch(addEditFieldsSource, /UI_CREATE_FORM_FIELDS\.push/);
+    assert.doesNotMatch(addEditFieldsSource, /UI_EDIT_FORM_FIELDS\.push/);
+    assert.match(addEditFieldsSource, /const UI_CREATE_FORM_FIELDS = \[[\s\S]*key: "vetId"[\s\S]*\/\/ jskit:crud-ui-form-fields:new/);
+    assert.match(addEditFieldsSource, /const UI_EDIT_FORM_FIELDS = \[[\s\S]*key: "vetId"[\s\S]*\/\/ jskit:crud-ui-form-fields:edit/);
+  });
+});
+
+test("field rejects legacy form-field marker layouts instead of adding new push calls", async () => {
+  await withTempApp(async (appRoot) => {
+    const resourceFile = "packages/contacts/src/shared/contactResource.js";
+    const editFile = "src/pages/admin/crm/contacts/[recordId]/edit.vue";
+
+    await writeAppFile(appRoot, resourceFile, RESOURCE_SOURCE);
+    await writeAppFile(
+      appRoot,
+      editFile,
+      `<template>
+  <v-row>
+    <!-- jskit:crud-ui-fields:edit -->
+  </v-row>
+</template>
+<script setup>
+import { resource as uiResource } from "/packages/contacts/src/shared/contactResource.js";
+const UI_EDIT_FORM_FIELDS = [];
+// jskit:crud-ui-form-fields:edit
+UI_EDIT_FORM_FIELDS.push({ key: "firstName", component: "text" });
+</script>
+`
+    );
+
+    await assert.rejects(
+      () => runGeneratorSubcommand({
+        appRoot,
+        subcommand: "field",
+        args: ["vetId", "edit", editFile],
+        options: {}
+      }),
+      /Run `jskit app migrate-source-mutations` before adding more generated form fields/
+    );
+
+    const editSource = await readFile(path.join(appRoot, editFile), "utf8");
+    assert.match(editSource, /UI_EDIT_FORM_FIELDS\.push/);
+    assert.doesNotMatch(editSource, /key: "vetId"/);
   });
 });