@jskit-ai/ui-generator 0.1.48 → 0.1.49

package/test/outletSubcommand.test.js

@@ -8,6 +8,23 @@ import { runGeneratorSubcommand } from "../src/server/subcommands/outlet.js";
 async function withTempApp(run) {
   const appRoot = await mkdtemp(path.join(tmpdir(), "ui-generator-outlet-"));
   try {
+    await mkdir(path.join(appRoot, "src"), { recursive: true });
+    await writeFile(
+      path.join(appRoot, "src", "placementTopology.js"),
+      `const placements = [];
+
+function addPlacementTopology(value = {}) {
+  placements.push(value);
+}
+
+export { addPlacementTopology };
+
+export default function getPlacementTopology() {
+  return { placements };
+}
+`,
+      "utf8"
+    );
     return await run(appRoot);
   } finally {
     await rm(appRoot, { recursive: true, force: true });
@@ -40,24 +57,32 @@ import { computed } from "vue";
       subcommand: "outlet",
       args: [targetFile],
       options: {
-        target: "contact-view:sub-pages"
+        target: "contact-view:sub-pages",
+        placement: "page.section-nav"
       }
     });
 
-    assert.deepEqual(result.touchedFiles, [targetFile]);
+    assert.deepEqual(result.touchedFiles, [targetFile, "src/placementTopology.js"]);
 
     const output = await readFile(targetPath, "utf8");
     assert.match(output, /import ShellOutlet from "@jskit-ai\/shell-web\/client\/components\/ShellOutlet";/);
     assert.match(output, /<ShellOutlet target="contact-view:sub-pages" \/>/);
     assert.doesNotMatch(output, /RouterView/);
     assert.doesNotMatch(output, /jskit:ui-generator\.outlet:/);
+    const topologySource = await readFile(path.join(appRoot, "src", "placementTopology.js"), "utf8");
+    assert.match(topologySource, /id: "page\.section-nav"/);
+    assert.match(topologySource, /owner: "contact-view"/);
+    assert.match(topologySource, /compact: \{/);
+    assert.match(topologySource, /medium: \{/);
+    assert.match(topologySource, /expanded: \{/);
 
     const rerun = await runGeneratorSubcommand({
       appRoot,
       subcommand: "outlet",
       args: [targetFile],
       options: {
-        target: "contact-view:sub-pages"
+        target: "contact-view:sub-pages",
+        placement: "page.section-nav"
       }
     });
 
@@ -91,7 +116,8 @@ import ShellOutlet from "@jskit-ai/shell-web/client/components/ShellOutlet";
       subcommand: "outlet",
       args: [targetFile],
       options: {
-        target: "contact-view:sub-pages"
+        target: "contact-view:sub-pages",
+        placement: "page.section-nav"
       }
     });
 
@@ -124,7 +150,8 @@ test("ui-generator outlet creates script setup when missing", async () => {
       subcommand: "outlet",
       args: [targetFile],
       options: {
-        target: "contact-view:sub-pages"
+        target: "contact-view:sub-pages",
+        placement: "page.section-nav"
       }
     });
 
@@ -161,7 +188,8 @@ test("ui-generator outlet inserts generated script after existing route block",
       subcommand: "outlet",
       args: [targetFile],
       options: {
-        target: "contact-view:sub-pages"
+        target: "contact-view:sub-pages",
+        placement: "page.section-nav"
       }
     });
 
@@ -203,7 +231,8 @@ test("ui-generator outlet keeps indentation when injected into nested template b
       subcommand: "outlet",
       args: [targetFile],
       options: {
-        target: "contact-view:sub-pages"
+        target: "contact-view:sub-pages",
+        placement: "page.section-nav"
       }
     });
 
@@ -229,6 +258,7 @@ test("ui-generator outlet rejects unsupported options", async () => {
       args: [targetFile],
       options: {
         target: "contact-view:sub-pages",
+        placement: "page.section-nav",
         bogus: "routed"
       }
       }),
@@ -250,7 +280,8 @@ test("ui-generator outlet supports explicit target host:position", async () => {
       subcommand: "outlet",
       args: [targetFile],
       options: {
-        target: "customer-view:summary-actions"
+        target: "customer-view:summary-actions",
+        placement: "page.actions"
       }
     });
 
@@ -272,9 +303,10 @@ test("ui-generator outlet rejects non-vue target files without changing them", a
       runGeneratorSubcommand({
         appRoot,
         subcommand: "outlet",
-        args: [targetFile],
-        options: {
-          target: "vet-view:sub-pages"
+      args: [targetFile],
+      options: {
+          target: "vet-view:sub-pages",
+          placement: "page.section-nav"
         }
       }),
       /ui-generator outlet target file must be an existing Vue SFC \(\.vue\): src\/pages\/w\/\[workspaceSlug\]\/admin\/practice\/vets\/_components\/VetAddEditFormFields\.js\./
@@ -297,9 +329,10 @@ test("ui-generator outlet validates target format", async () => {
       runGeneratorSubcommand({
         appRoot,
         subcommand: "outlet",
-        args: [targetFile],
-        options: {
-          target: "customer-view:"
+      args: [targetFile],
+      options: {
+          target: "customer-view:",
+          placement: "page.actions"
         }
       }),
       /ui-generator outlet option "target" must be a target in "host:position" format\./

package/test/pageSubcommand.test.js

@@ -18,6 +18,67 @@ function toPagePath(targetFile = "") {
   return path.join("src/pages", targetFile);
 }
 
+function renderTopologyVariant(outlet, { linkRenderer = "" } = {}) {
+  const rendererLines = linkRenderer
+    ? `,
+      renderers: {
+        link: "${linkRenderer}"
+      }`
+    : "";
+  return `{
+      outlet: "${outlet}"${rendererLines}
+    }`;
+}
+
+function renderTopologyEntry({
+  id = "",
+  owner = "",
+  surfaces = ["*"],
+  defaultPlacement = false,
+  outlet = "",
+  linkRenderer = ""
+} = {}) {
+  const ownerLine = owner ? `    owner: "${owner}",\n` : "";
+  const defaultLine = defaultPlacement ? "    default: true,\n" : "";
+  return `  {
+    id: "${id}",
+${ownerLine}    surfaces: ${JSON.stringify(surfaces)},
+${defaultLine}    variants: {
+      compact: ${renderTopologyVariant(outlet, { linkRenderer })},
+      medium: ${renderTopologyVariant(outlet, { linkRenderer })},
+      expanded: ${renderTopologyVariant(outlet, { linkRenderer })}
+    }
+  }`;
+}
+
+async function writePlacementTopology(appRoot, entries = []) {
+  const defaultEntries = [
+    renderTopologyEntry({
+      id: "shell.primary-nav",
+      surfaces: ["*"],
+      defaultPlacement: true,
+      outlet: "shell-layout:primary-menu",
+      linkRenderer: "local.main.ui.surface-aware-menu-link-item"
+    }),
+    renderTopologyEntry({
+      id: "shell.status",
+      surfaces: ["*"],
+      outlet: "shell-layout:top-right",
+      linkRenderer: "local.main.ui.surface-aware-menu-link-item"
+    })
+  ];
+  await writeFile(
+    path.join(appRoot, "src", "placementTopology.js"),
+    `export default {
+  placements: [
+${[...defaultEntries, ...entries].join(",\n")}
+  ]
+};
+`,
+    "utf8"
+  );
+}
+
 async function writeAppFixture(appRoot, { configSource = "" } = {}) {
   await mkdir(path.join(appRoot, "config"), { recursive: true });
   await mkdir(path.join(appRoot, "src", "components"), { recursive: true });
@@ -41,7 +102,6 @@ async function writeAppFixture(appRoot, { configSource = "" } = {}) {
     <ShellOutlet
       target="shell-layout:primary-menu"
       default
-      default-link-component-token="local.main.ui.surface-aware-menu-link-item"
     />
     <ShellOutlet target="shell-layout:top-right" />
   </div>
@@ -60,6 +120,7 @@ export default function getPlacements() {
 `,
     "utf8"
   );
+  await writePlacementTopology(appRoot);
 }
 
 test("ui-generator page subcommand creates an index page from an explicit target file", async () => {
@@ -153,15 +214,15 @@ test("ui-generator page subcommand supports link placement options", async () =>
       subcommand: "page",
       args: [targetFile],
       options: {
-        "link-placement": "shell-layout:top-right",
-        "link-component-token": "local.main.ui.tab-link-item",
+        "link-placement": "shell.status",
         "link-to": "./notes"
       }
     });
 
     const placementSource = await readFile(path.join(appRoot, "src", "placement.js"), "utf8");
-    assert.match(placementSource, /target: "shell-layout:top-right"/);
-    assert.match(placementSource, /componentToken: "local\.main\.ui\.tab-link-item"/);
+    assert.match(placementSource, /target: "shell\.status"/);
+    assert.match(placementSource, /kind: "link"/);
+    assert.doesNotMatch(placementSource, /componentToken: "local\.main\.ui\.tab-link-item"/);
     assert.match(placementSource, /icon: "mdi-view-list-outline"/);
     assert.match(placementSource, /to: "\.\/notes"/);
   });
@@ -170,6 +231,15 @@ test("ui-generator page subcommand supports link placement options", async () =>
 test("ui-generator page subcommand infers subpage link placement, tab token, and link-to from the nearest parent host", async () => {
   await withTempApp(async (appRoot) => {
     await writeAppFixture(appRoot);
+    await writePlacementTopology(appRoot, [
+      renderTopologyEntry({
+        id: "page.section-nav",
+        owner: "contact-view",
+        surfaces: ["admin"],
+        outlet: "contact-view:sub-pages",
+        linkRenderer: "local.main.ui.surface-aware-menu-link-item"
+      })
+    ]);
 
     const parentFile = "w/[workspaceSlug]/admin/contacts/[contactId].vue";
     await mkdir(path.dirname(path.join(appRoot, toPagePath(parentFile))), { recursive: true });
@@ -196,8 +266,9 @@ test("ui-generator page subcommand infers subpage link placement, tab token, and
     });
 
     const placementSource = await readFile(path.join(appRoot, "src", "placement.js"), "utf8");
-    assert.match(placementSource, /target: "contact-view:sub-pages"/);
-    assert.match(placementSource, /componentToken: "local\.main\.ui\.surface-aware-menu-link-item"/);
+    assert.match(placementSource, /target: "page\.section-nav"/);
+    assert.match(placementSource, /owner: "contact-view"/);
+    assert.doesNotMatch(placementSource, /componentToken: "local\.main\.ui\.surface-aware-menu-link-item"/);
     assert.match(placementSource, /icon: "mdi-view-list-outline"/);
     assert.match(placementSource, /to: "\.\/notes"/);
   });
@@ -206,6 +277,22 @@ test("ui-generator page subcommand infers subpage link placement, tab token, and
 test("ui-generator page subcommand prefers the nearest index-route parent host", async () => {
   await withTempApp(async (appRoot) => {
     await writeAppFixture(appRoot);
+    await writePlacementTopology(appRoot, [
+      renderTopologyEntry({
+        id: "page.section-nav",
+        owner: "catalog",
+        surfaces: ["admin"],
+        outlet: "catalog:sub-pages",
+        linkRenderer: "local.main.ui.surface-aware-menu-link-item"
+      }),
+      renderTopologyEntry({
+        id: "page.section-nav",
+        owner: "catalog-products",
+        surfaces: ["admin"],
+        outlet: "catalog-products:sub-pages",
+        linkRenderer: "local.main.ui.surface-aware-menu-link-item"
+      })
+    ]);
 
     await mkdir(path.join(appRoot, "src/pages/w/[workspaceSlug]/admin/catalog/index/products"), {
       recursive: true
@@ -247,8 +334,9 @@ test("ui-generator page subcommand prefers the nearest index-route parent host",
     });
 
     const placementSource = await readFile(path.join(appRoot, "src", "placement.js"), "utf8");
-    assert.match(placementSource, /target: "catalog-products:sub-pages"/);
-    assert.match(placementSource, /componentToken: "local\.main\.ui\.surface-aware-menu-link-item"/);
+    assert.match(placementSource, /target: "page\.section-nav"/);
+    assert.match(placementSource, /owner: "catalog-products"/);
+    assert.doesNotMatch(placementSource, /componentToken: "local\.main\.ui\.surface-aware-menu-link-item"/);
     assert.match(placementSource, /to: "\.\/variants"/);
   });
 });
@@ -423,7 +511,7 @@ test("ui-generator page subcommand rejects invalid link placement before creatin
           "link-placement": "missing:target"
         }
       }),
-      /ui-generator page option "placement" target "missing:target" is not declared/
+      /ui-generator page option "placement" must be a semantic target in "area.slot" format/
     );
 
     await assert.rejects(readFile(path.join(appRoot, toPagePath(targetFile)), "utf8"), /ENOENT/);
@@ -455,10 +543,10 @@ test("ui-generator page subcommand rejects invalid link placement before overwri
         args: [targetFile],
         options: {
           force: "true",
-          "link-placement": "missing:target"
+          "link-placement": "missing.target"
         }
       }),
-      /ui-generator page option "placement" target "missing:target" is not declared/
+      /ui-generator page semantic placement "missing.target" is not declared/
     );
 
     const pageSource = await readFile(targetPath, "utf8");