@jskit-ai/ui-generator 0.1.12 → 0.1.13

package/README.md

@@ -31,7 +31,7 @@ npx jskit generate @jskit-ai/ui-generator page --name "Reports" --surface admin
 Generate an element at a specific outlet:
 
 ```bash
-npx jskit generate @jskit-ai/ui-generator element --name "Ops Panel" --surface admin --placement admin-settings:forms
+npx jskit generate @jskit-ai/ui-generator element --name "Ops Panel" --surface admin --placement shell-layout:top-right
 ```
 
 Generate an element with custom component path:
@@ -93,6 +93,23 @@ npx jskit generate @jskit-ai/ui-generator outlet
   - `packages/main/src/client/providers/MainClientProvider.js` registration for `local.main.ui.tab-link-item`
   - `<route>.vue` as a thin wrapper around `SectionContainerShell` + `<RouterView />`, with route meta outlet declaration at `meta.jskit.placements.outlets`
   - no shell menu placement is added unless `--placement` is explicitly provided
+- Child pages for a `container` go directly under the container route path, not under `(nestedChildren)`.
+  - Example container route: `src/pages/admin/practice.vue`
+  - Example child page path: `src/pages/admin/practice/notes/index.vue`
+  - Example URL: `/admin/practice/notes`
+- Use `(nestedChildren)` for the `page + outlet` pattern when the parent page is an existing `index.vue` route that should render child routes inside its own `RouterView`.
+
+Generate a child page inside a container:
+
+```bash
+npx jskit generate @jskit-ai/ui-generator page \
+  --name "Notes" \
+  --surface admin \
+  --directory-prefix "practice" \
+  --placement practice:sub-pages \
+  --placement-component-token local.main.ui.tab-link-item
+```
+
 - Generate CRUD pages into that container using `@jskit-ai/crud-ui-generator` with:
   - `--container <route-slug>`
   - `--route-path <resource-slug>`

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/ui-generator",
-  version: "0.1.12",
+  version: "0.1.13",
   kind: "generator",
   description: "Generate app-local non-CRUD UI pages and outlet elements.",
   options: {
@@ -149,7 +149,7 @@ export default Object.freeze({
   mutations: {
     dependencies: {
       runtime: {
-        "@jskit-ai/users-web": "0.1.44"
+        "@jskit-ai/users-web": "0.1.45"
       },
       dev: {}
     },
@@ -174,7 +174,7 @@ export default Object.freeze({
         position: "bottom",
         skipIfContains: "jskit:ui-generator.page.menu:${option:surface|lower}:${option:directory-prefix|path}:${option:name|path}",
         value:
-          "\n// jskit:ui-generator.page.menu:${option:surface|lower}:${option:directory-prefix|path}:${option:name|path}\n{\n  addPlacement({\n    id: \"ui-generator.page.${option:name|kebab}.menu\",\n    host: \"__JSKIT_UI_MENU_PLACEMENT_HOST__\",\n    position: \"__JSKIT_UI_MENU_PLACEMENT_POSITION__\",\n    surfaces: [\"${option:surface|lower}\"],\n    order: 155,\n    componentToken: \"__JSKIT_UI_MENU_COMPONENT_TOKEN__\",\n    props: {\n      label: \"${option:name|trim}\",\n      surface: \"${option:surface|lower}\",\n      workspaceSuffix: \"__JSKIT_UI_MENU_WORKSPACE_SUFFIX__\",\n      nonWorkspaceSuffix: \"__JSKIT_UI_MENU_NON_WORKSPACE_SUFFIX__\",\n__JSKIT_UI_MENU_TO_PROP_LINE__    },\n    when: ({ auth }) => Boolean(auth?.authenticated)\n  });\n}\n",
+          "\n// jskit:ui-generator.page.menu:${option:surface|lower}:${option:directory-prefix|path}:${option:name|path}\n{\n  addPlacement({\n    id: \"__JSKIT_UI_MENU_PLACEMENT_ID__\",\n    host: \"__JSKIT_UI_MENU_PLACEMENT_HOST__\",\n    position: \"__JSKIT_UI_MENU_PLACEMENT_POSITION__\",\n    surfaces: [\"${option:surface|lower}\"],\n    order: 155,\n    componentToken: \"__JSKIT_UI_MENU_COMPONENT_TOKEN__\",\n    props: {\n      label: \"${option:name|trim}\",\n      surface: \"${option:surface|lower}\",\n      workspaceSuffix: \"__JSKIT_UI_MENU_WORKSPACE_SUFFIX__\",\n      nonWorkspaceSuffix: \"__JSKIT_UI_MENU_NON_WORKSPACE_SUFFIX__\",\n__JSKIT_UI_MENU_TO_PROP_LINE__    },\n    when: ({ auth }) => Boolean(auth?.authenticated)\n  });\n}\n",
         reason: "Append generated UI page menu placement.",
         category: "ui-generator",
         id: "ui-generator-page-placement-menu-${option:name|snake}",

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@jskit-ai/ui-generator",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "type": "module",
   "scripts": {
     "test": "node --test"
   },
   "dependencies": {
-    "@jskit-ai/kernel": "0.1.29"
+    "@jskit-ai/kernel": "0.1.30"
   },
   "exports": {
     "./server/buildTemplateContext": "./src/server/buildTemplateContext.js"

package/src/server/buildTemplateContext.js

@@ -113,6 +113,21 @@ function resolveMenuToPropLine(options = {}) {
   return `      to: ${JSON.stringify(placementTo)},\n`;
 }
 
+function normalizePlacementIdSegment(value = "") {
+  return wordsToKebab(splitTextIntoWords(value));
+}
+
+function resolveMenuPlacementId(options = {}) {
+  const idSegments = [
+    ...splitPathSegments(options?.["directory-prefix"]),
+    ...splitPathSegments(options?.name)
+  ]
+    .map((segment) => normalizePlacementIdSegment(segment))
+    .filter(Boolean);
+
+  return `ui-generator.page.${idSegments.join(".")}.menu`;
+}
+
 async function buildUiPageTemplateContext({ appRoot, options } = {}) {
   const placementTarget = await resolveShellOutletPlacementTargetFromApp({
     appRoot,
@@ -121,6 +136,7 @@ async function buildUiPageTemplateContext({ appRoot, options } = {}) {
   });
 
   return {
+    __JSKIT_UI_MENU_PLACEMENT_ID__: resolveMenuPlacementId(options),
     __JSKIT_UI_MENU_PLACEMENT_HOST__: normalizeText(placementTarget?.host),
     __JSKIT_UI_MENU_PLACEMENT_POSITION__: normalizeText(placementTarget?.position),
     __JSKIT_UI_MENU_COMPONENT_TOKEN__: resolveMenuComponentToken(options),

package/test/elementSubcommand.test.js

@@ -86,7 +86,7 @@ test("ui-generator element subcommand creates component and outlet placement", a
       options: {
         name: "Ops Panel",
         surface: "admin",
-        placement: "admin-settings:forms"
+        placement: "shell-layout:top-right"
       }
     });
 
@@ -105,8 +105,8 @@ test("ui-generator element subcommand creates component and outlet placement", a
 
     const placementSource = await readFile(path.join(appRoot, "src", "placement.js"), "utf8");
     assert.match(placementSource, /id: "ui-generator\.element\.ops-panel"/);
-    assert.match(placementSource, /host: "admin-settings"/);
-    assert.match(placementSource, /position: "forms"/);
+    assert.match(placementSource, /host: "shell-layout"/);
+    assert.match(placementSource, /position: "top-right"/);
     assert.match(placementSource, /componentToken: "local\.main\.ui\.element\.ops-panel"/);
   });
 });