@jskit-ai/ui-generator 0.1.5 → 0.1.6

package/src/server/subcommands/container.js

@@ -24,8 +24,27 @@ import {
 
 const CONTAINER_OUTLET_POSITION = "sub-pages";
 const SECTION_CONTAINER_SHELL_COMPONENT = "SectionContainerShell";
-const SECTION_TAB_LINK_COMPONENT = "SectionShellTabLinkItem";
-const SECTION_TAB_LINK_COMPONENT_TOKEN = "local.main.ui.section-shell.tab-link-item";
+const TAB_LINK_COMPONENT = "TabLinkItem";
+const TAB_LINK_COMPONENT_TOKEN = "local.main.ui.tab-link-item";
+const ROUTE_TAG_PATTERN = /<route\b([^>]*)>([\s\S]*?)<\/route>/;
+const ATTRIBUTE_PATTERN = /([:@]?[A-Za-z_][A-Za-z0-9_-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'))?/g;
+
+function isBracketRouteParamSegment(value = "") {
+  return value.startsWith("[") && value.endsWith("]");
+}
+
+function normalizeRoutePrefixSegment(value = "") {
+  const source = normalizeText(value);
+  if (!source) {
+    return "";
+  }
+
+  if (isBracketRouteParamSegment(source)) {
+    return source;
+  }
+
+  return toKebabCase(source);
+}
 
 function normalizeRoutePrefix(value = "") {
   const source = normalizeText(value).replaceAll("\\", "/");
@@ -35,11 +54,160 @@ function normalizeRoutePrefix(value = "") {
 
   const parts = source
     .split("/")
-    .map((entry) => toKebabCase(entry))
+    .map((entry) => normalizeRoutePrefixSegment(entry))
     .filter(Boolean);
   return parts.join("/");
 }
 
+function resolveContainerRoutePath({ name = "", routePath = "" } = {}) {
+  const rawRoutePath = normalizeText(routePath);
+  const normalizedRoutePath = normalizeRoutePrefix(routePath);
+  if (rawRoutePath && !normalizedRoutePath) {
+    throw new Error("ui-generator container requires a valid --route-path when provided.");
+  }
+  if (normalizedRoutePath) {
+    return normalizedRoutePath;
+  }
+  return toKebabCase(name);
+}
+
+function parseTagAttributes(attributesSource = "") {
+  const attributes = {};
+  const source = String(attributesSource || "");
+  for (const match of source.matchAll(ATTRIBUTE_PATTERN)) {
+    const attributeName = normalizeText(match[1]);
+    if (!attributeName) {
+      continue;
+    }
+
+    const hasValue = match[2] != null || match[3] != null;
+    const attributeValue = hasValue ? String(match[2] ?? match[3] ?? "") : true;
+    attributes[attributeName] = attributeValue;
+  }
+
+  return attributes;
+}
+
+function createContainerRouteMeta({
+  surface = "",
+  containerHost = "",
+  containerPosition = CONTAINER_OUTLET_POSITION
+} = {}) {
+  return {
+    meta: {
+      jskit: {
+        surface,
+        placements: {
+          outlets: [
+            {
+              host: containerHost,
+              position: containerPosition
+            }
+          ]
+        }
+      }
+    }
+  };
+}
+
+function renderContainerRouteMetaBlock(routeMeta = {}) {
+  return `<route lang="json">
+${JSON.stringify(routeMeta, null, 2)}
+</route>
+`;
+}
+
+function normalizeOutletTargetId(outlet = {}) {
+  const host = normalizeText(outlet?.host);
+  const position = normalizeText(outlet?.position);
+  if (!host || !position) {
+    return "";
+  }
+  return `${host}:${position}`;
+}
+
+function ensureContainerRouteMetaOutlets(source = "", { surface = "", containerHost = "", containerPosition = "" } = {}) {
+  const sourceText = String(source || "");
+  const routeTagMatch = ROUTE_TAG_PATTERN.exec(sourceText);
+  const expectedTargetId = normalizeOutletTargetId({
+    host: containerHost,
+    position: containerPosition
+  });
+  if (!expectedTargetId) {
+    return {
+      changed: false,
+      content: sourceText
+    };
+  }
+
+  if (!routeTagMatch) {
+    const appendedContent = `${sourceText.trimEnd()}\n\n${renderContainerRouteMetaBlock(createContainerRouteMeta({
+      surface,
+      containerHost,
+      containerPosition
+    }))}`;
+    return {
+      changed: appendedContent !== sourceText,
+      content: appendedContent
+    };
+  }
+
+  const routeTagAttributes = parseTagAttributes(routeTagMatch[1]);
+  const routeTagLanguage = normalizeText(routeTagAttributes.lang).toLowerCase();
+  if (routeTagLanguage && routeTagLanguage !== "json") {
+    return {
+      changed: false,
+      content: sourceText
+    };
+  }
+
+  let routeMetaRecord = null;
+  try {
+    routeMetaRecord = JSON.parse(String(routeTagMatch[2] || "").trim());
+  } catch {
+    return {
+      changed: false,
+      content: sourceText
+    };
+  }
+
+  const routeMeta = normalizeObject(routeMetaRecord);
+  const metadata = normalizeObject(routeMeta.meta);
+  const jskitMetadata = normalizeObject(metadata.jskit);
+  const placementsMetadata = normalizeObject(jskitMetadata.placements);
+  const outletRecords = Array.isArray(placementsMetadata.outlets) ? [...placementsMetadata.outlets] : [];
+  const knownTargetIds = new Set(outletRecords.map((entry) => normalizeOutletTargetId(entry)).filter(Boolean));
+  if (!knownTargetIds.has(expectedTargetId)) {
+    outletRecords.push({
+      host: containerHost,
+      position: containerPosition
+    });
+  }
+
+  const normalizedSurface = normalizeText(jskitMetadata.surface) || normalizeText(surface);
+  const nextRouteMeta = {
+    ...routeMeta,
+    meta: {
+      ...metadata,
+      jskit: {
+        ...jskitMetadata,
+        surface: normalizedSurface,
+        placements: {
+          ...placementsMetadata,
+          outlets: outletRecords
+        }
+      }
+    }
+  };
+  const renderedRouteMeta = renderContainerRouteMetaBlock(nextRouteMeta);
+  const replacementContent =
+    `${sourceText.slice(0, routeTagMatch.index)}${renderedRouteMeta}${sourceText.slice(routeTagMatch.index + routeTagMatch[0].length)}`;
+  return {
+    changed: replacementContent !== sourceText,
+    content: replacementContent
+  };
+}
+
 async function loadPublicConfig(appRoot = "") {
   const configPath = path.join(appRoot, "config", "public.js");
 
@@ -144,7 +312,7 @@ const resolvedSubtitle = computed(() => String(props.subtitle || "").trim());
   scrollbar-width: thin;
 }
 
-.section-container-shell__tabs :deep(.section-shell-tab-link) {
+.section-container-shell__tabs :deep(.tab-link-item) {
   flex: 0 0 auto;
 }
 
@@ -158,7 +326,7 @@ const resolvedSubtitle = computed(() => String(props.subtitle || "").trim());
 `;
 }
 
-function renderSectionShellTabLinkItemSource() {
+function renderTabLinkItemSource() {
   return `<script setup>
 import { computed } from "vue";
 import { useRoute } from "vue-router";
@@ -213,6 +381,22 @@ function normalizePathname(pathname = "") {
   return cutoff < 0 ? source : source.slice(0, cutoff);
 }
 
+function interpolateBracketParams(pathTemplate = "", params = {}) {
+  const source = String(pathTemplate || "").trim();
+  if (!source) {
+    return "";
+  }
+
+  return source.replace(/\\[([^\\]]+)\\]/g, (_match, rawKey) => {
+    const key = String(rawKey || "").trim();
+    if (!key) {
+      return "";
+    }
+    const value = params?.[key];
+    return value == null ? "[" + key + "]" : encodeURIComponent(String(value));
+  });
+}
+
 const targetSurfaceId = computed(() => {
   const explicitSurface = String(props.surface || "").trim().toLowerCase();
   if (explicitSurface && explicitSurface !== "*") {
@@ -224,6 +408,17 @@ const targetSurfaceId = computed(() => {
 const resolvedTo = computed(() => {
   const explicitTo = String(props.to || "").trim();
   if (explicitTo) {
+    if (explicitTo.startsWith("./")) {
+      const workspaceSlug = String(workspaceSlugFromRoute.value || "").trim();
+      const suffixTemplate = workspaceSlug ? props.workspaceSuffix : props.nonWorkspaceSuffix;
+      const interpolatedSuffix = interpolateBracketParams(suffixTemplate, route.params || {});
+      if (interpolatedSuffix && !interpolatedSuffix.includes("[")) {
+        return paths.page(interpolatedSuffix, {
+          surface: targetSurfaceId.value,
+          mode: "auto"
+        });
+      }
+    }
     return explicitTo;
   }
 
@@ -249,7 +444,7 @@ const isActive = computed(() => {
 <template>
   <v-btn
     v-if="resolvedTo"
-    class="section-shell-tab-link text-none"
+    class="tab-link-item text-none"
     :to="resolvedTo"
     rounded="pill"
     size="small"
@@ -272,6 +467,11 @@ function renderContainerPageSource({
   containerPosition = CONTAINER_OUTLET_POSITION,
   sectionContainerComponentImportPath = "/src/components/SectionContainerShell.vue"
 } = {}) {
+  const routeMeta = createContainerRouteMeta({
+    surface,
+    containerHost,
+    containerPosition
+  });
   return `<script setup>
 import { RouterView } from "vue-router";
 import SectionContainerShell from "${sectionContainerComponentImportPath}";
@@ -288,15 +488,7 @@ import SectionContainerShell from "${sectionContainerComponentImportPath}";
   </SectionContainerShell>
 </template>
 
-<route lang="json">
-{
-  "meta": {
-    "jskit": {
-      "surface": "${surface}"
-    }
-  }
-}
-</route>
+${renderContainerRouteMetaBlock(routeMeta)}
 `;
 }
 
@@ -322,18 +514,19 @@ async function runGeneratorSubcommand({
   const surface = requireOption(options, "surface", { context: "ui-generator container" }).toLowerCase();
   const routePrefix = normalizeRoutePrefix(options?.["directory-prefix"]);
   const componentDirectory = normalizeText(options?.path) || DEFAULT_COMPONENT_DIRECTORY;
+  const containerRoutePath = resolveContainerRoutePath({
+    name,
+    routePath: options?.["route-path"]
+  });
   const containerSlug = toKebabCase(name);
-  if (!containerSlug) {
+  if (!containerSlug || !containerRoutePath) {
     throw new Error("ui-generator container requires a valid --name.");
   }
 
-  const routePath = routePrefix ? `${routePrefix}/${containerSlug}` : containerSlug;
+  const routePath = routePrefix ? `${routePrefix}/${containerRoutePath}` : containerRoutePath;
   const pagesDirectory = await resolveSurfacePagesDirectory(resolvedAppRoot, surface);
   const containerFilePath = path.join(pagesDirectory, `${routePath}.vue`);
   const containerRelativePath = toPosixPath(path.relative(resolvedAppRoot, containerFilePath));
-  const placementPath = resolvePathWithinApp(resolvedAppRoot, PLACEMENT_FILE, {
-    context: "ui-generator container"
-  });
   const providerPath = resolvePathWithinApp(resolvedAppRoot, MAIN_CLIENT_PROVIDER_FILE, {
     context: "ui-generator container"
   });
@@ -346,17 +539,20 @@ async function runGeneratorSubcommand({
   );
   const sectionTabLinkPath = resolvePathWithinApp(
     resolvedAppRoot,
-    path.join(componentDirectory, `${SECTION_TAB_LINK_COMPONENT}.vue`),
+    path.join(componentDirectory, `${TAB_LINK_COMPONENT}.vue`),
     {
       context: "ui-generator container"
     }
   );
 
-  const placementTarget = await resolveShellOutletPlacementTargetFromApp({
-    appRoot: resolvedAppRoot,
-    context: "ui-generator container",
-    placement: options?.placement
-  });
+  const placementOption = normalizeText(options?.placement);
+  const placementTarget = placementOption
+    ? await resolveShellOutletPlacementTargetFromApp({
+        appRoot: resolvedAppRoot,
+        context: "ui-generator container",
+        placement: placementOption
+      })
+    : null;
 
   const touchedFiles = new Set();
 
@@ -383,7 +579,7 @@ async function runGeneratorSubcommand({
   if (!existingSectionTabLinkSource) {
     if (dryRun !== true) {
       await mkdir(path.dirname(sectionTabLinkPath.absolutePath), { recursive: true });
-      await writeFile(sectionTabLinkPath.absolutePath, renderSectionShellTabLinkItemSource(), "utf8");
+      await writeFile(sectionTabLinkPath.absolutePath, renderTabLinkItemSource(), "utf8");
     }
     touchedFiles.add(sectionTabLinkPath.relativePath);
   }
@@ -395,9 +591,9 @@ async function runGeneratorSubcommand({
     );
   }
 
-  const providerImportLine = `import ${SECTION_TAB_LINK_COMPONENT} from "/${toPosixPath(path.join(componentDirectory, `${SECTION_TAB_LINK_COMPONENT}.vue`))}";`;
+  const providerImportLine = `import ${TAB_LINK_COMPONENT} from "/${toPosixPath(path.join(componentDirectory, `${TAB_LINK_COMPONENT}.vue`))}";`;
   const providerRegisterLine =
-    `registerMainClientComponent("${SECTION_TAB_LINK_COMPONENT_TOKEN}", () => ${SECTION_TAB_LINK_COMPONENT});`;
+    `registerMainClientComponent("${TAB_LINK_COMPONENT_TOKEN}", () => ${TAB_LINK_COMPONENT});`;
   const providerImportApplied = insertImportIfMissing(providerSource, providerImportLine);
   const providerRegisterApplied = insertBeforeClassDeclaration(
     providerImportApplied.content,
@@ -436,36 +632,53 @@ async function runGeneratorSubcommand({
       );
     }
     touchedFiles.add(containerRelativePath);
+  } else {
+    const routeMetaApplied = ensureContainerRouteMetaOutlets(existingContainerSource, {
+      surface,
+      containerHost: containerSlug,
+      containerPosition: CONTAINER_OUTLET_POSITION
+    });
+    if (routeMetaApplied.changed) {
+      if (dryRun !== true) {
+        await writeFile(containerFilePath, routeMetaApplied.content, "utf8");
+      }
+      touchedFiles.add(containerRelativePath);
+    }
   }
 
-  const placementSource = await readFile(placementPath.absolutePath, "utf8");
-  const placementIdSuffix = routePath.replaceAll("/", "-");
-  const placementMarker = `jskit:ui-generator.container.menu:${surface}:${routePath}`;
-  const placementBlock =
-    `// ${placementMarker}\n` +
-    "{\n" +
-    "  addPlacement({\n" +
-    `    id: "ui-generator.container.${placementIdSuffix}.menu",\n` +
-    `    host: "${placementTarget.host}",\n` +
-    `    position: "${placementTarget.position}",\n` +
-    `    surfaces: ["${surface}"],\n` +
-    "    order: 155,\n" +
-    '    componentToken: "users.web.shell.surface-aware-menu-link-item",\n' +
-    "    props: {\n" +
-    `      label: "${name}",\n` +
-    `      surface: "${surface}",\n` +
-    `      workspaceSuffix: "/${routePath}",\n` +
-    `      nonWorkspaceSuffix: "/${routePath}"\n` +
-    "    },\n" +
-    "    when: ({ auth }) => Boolean(auth?.authenticated)\n" +
-    "  });\n" +
-    "}\n";
-  const placementApplied = appendBlockIfMarkerMissing(placementSource, placementMarker, placementBlock);
-  if (placementApplied.changed) {
-    if (dryRun !== true) {
-      await writeFile(placementPath.absolutePath, placementApplied.content, "utf8");
+  if (placementTarget) {
+    const placementPath = resolvePathWithinApp(resolvedAppRoot, PLACEMENT_FILE, {
+      context: "ui-generator container"
+    });
+    const placementSource = await readFile(placementPath.absolutePath, "utf8");
+    const placementIdSuffix = routePath.replaceAll("/", "-");
+    const placementMarker = `jskit:ui-generator.container.menu:${surface}:${routePath}`;
+    const placementBlock =
+      `// ${placementMarker}\n` +
+      "{\n" +
+      "  addPlacement({\n" +
+      `    id: "ui-generator.container.${placementIdSuffix}.menu",\n` +
+      `    host: "${placementTarget.host}",\n` +
+      `    position: "${placementTarget.position}",\n` +
+      `    surfaces: ["${surface}"],\n` +
+      "    order: 155,\n" +
+      '    componentToken: "users.web.shell.surface-aware-menu-link-item",\n' +
+      "    props: {\n" +
+      `      label: "${name}",\n` +
+      `      surface: "${surface}",\n` +
+      `      workspaceSuffix: "/${routePath}",\n` +
+      `      nonWorkspaceSuffix: "/${routePath}"\n` +
+      "    },\n" +
+      "    when: ({ auth }) => Boolean(auth?.authenticated)\n" +
+      "  });\n" +
+      "}\n";
+    const placementApplied = appendBlockIfMarkerMissing(placementSource, placementMarker, placementBlock);
+    if (placementApplied.changed) {
+      if (dryRun !== true) {
+        await writeFile(placementPath.absolutePath, placementApplied.content, "utf8");
+      }
+      touchedFiles.add(placementPath.relativePath);
     }
-    touchedFiles.add(placementPath.relativePath);
   }
 
   const touchedFileList = [...touchedFiles].sort((left, right) => left.localeCompare(right));