npm - nuxtseo-shared - Versions diffs - 5.2.4 → 5.2.6 - Mend

nuxtseo-shared 5.2.4 → 5.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/devtools.d.mts CHANGED Viewed

@@ -18,6 +18,8 @@ interface DevToolsUIConfig {
 }
 interface SeoModuleInfo {
     name: string;
+    /** npm package name — the stable identifier the client matches installed state on. */
+    npm?: string;
     title: string;
     icon: string;
     route: string;

package/dist/devtools.d.ts CHANGED Viewed

@@ -18,6 +18,8 @@ interface DevToolsUIConfig {
 }
 interface SeoModuleInfo {
     name: string;
+    /** npm package name — the stable identifier the client matches installed state on. */
+    npm?: string;
     title: string;
     icon: string;
     route: string;

package/dist/devtools.mjs CHANGED Viewed

@@ -2,17 +2,41 @@ import { spawn } from 'node:child_process';
 import { existsSync, readFileSync, readdirSync, mkdirSync, writeFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { join, dirname } from 'node:path';
+import process from 'node:process';
 import { onDevToolsInitialized, extendServerRpc, addCustomTab } from '@nuxt/devtools-kit';
 import { useNuxt } from '@nuxt/kit';
 import sirv from 'sirv';
+import { modules } from './const.mjs';
+import { detectNuxtSeoModules } from './kit.mjs';
+import 'node:url';
+import 'pathe';
+import 'pkg-types';
+import 'std-env';
+function npmForSlug(slug) {
+  return modules.find((m) => m.slug === slug)?.npm;
+}
 const UNIFIED_CLIENT_ROUTE = "/__nuxt-seo-devtools";
 const hashSet = (arr) => [...JSON.stringify(arr)].reduce((h, c) => h * 31 + c.charCodeAt(0) >>> 0, 7).toString(36);
 function placeholderHtml() {
   return `<!doctype html><html><head><meta charset="utf-8"><title>Nuxt SEO DevTools</title>
-<style>html,body{margin:0;height:100%;font-family:'Hubot Sans',system-ui,sans-serif;background:oklch(98.4% 0.005 292);color:oklch(16% 0.036 292)}@media(prefers-color-scheme:dark){html,body{background:oklch(11% 0.029 292);color:oklch(96.8% 0.009 292)}}.wrap{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}.spin{width:34px;height:34px;border-radius:50%;border:3px solid color-mix(in oklab,oklch(54% 0.225 292) 25%,transparent);border-top-color:oklch(54% 0.225 292);animation:s .8s linear infinite}@keyframes s{to{transform:rotate(360deg)}}h1{font-size:15px;font-weight:600;margin:0}p{font-size:13px;opacity:.6;margin:0}</style></head>
-<body><div class="wrap"><div class="spin"></div><h1>Building Nuxt SEO DevTools\u2026</h1><p>Assembling panels for your installed modules. This runs once.</p></div>
-<script>setInterval(async()=>{try{const r=await fetch('${UNIFIED_CLIENT_ROUTE}/__status');const j=await r.json();if(j.ready)location.reload()}catch{}},1000)<\/script></body></html>`;
+<style>html,body{margin:0;height:100%;font-family:'Hubot Sans',system-ui,sans-serif;background:oklch(98.4% 0.005 292);color:oklch(16% 0.036 292)}@media(prefers-color-scheme:dark){html,body{background:oklch(11% 0.029 292);color:oklch(96.8% 0.009 292)}}.wrap{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}.spin{width:34px;height:34px;border-radius:50%;border:3px solid color-mix(in oklab,oklch(54% 0.225 292) 25%,transparent);border-top-color:oklch(54% 0.225 292);animation:s .8s linear infinite}@keyframes s{to{transform:rotate(360deg)}}h1{font-size:15px;font-weight:600;margin:0}p{font-size:13px;opacity:.6;margin:0}.mods{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:420px}.chip{font-size:11px;padding:2px 9px;border-radius:999px;background:color-mix(in oklab,oklch(54% 0.225 292) 14%,transparent);color:oklch(54% 0.225 292)}.step{font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.55;max-width:520px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:16px}.t{font-variant-numeric:tabular-nums;opacity:.85}.err .spin{border-top-color:oklch(60% 0.2 25);border-color:color-mix(in oklab,oklch(60% 0.2 25) 25%,transparent);animation:none}</style></head>
+<body><div class="wrap" id="wrap"><div class="spin"></div><h1 id="title">Building Nuxt SEO DevTools\u2026</h1><div class="mods" id="mods"></div><p>Assembling panels for your installed modules. This runs once.</p><div class="step" id="step"></div></div>
+<script>
+const $=id=>document.getElementById(id)
+let mods=false
+async function poll(){
+  try{
+    const j=await (await fetch('${UNIFIED_CLIENT_ROUTE}/__status')).json()
+    if(j.ready){location.reload();return}
+    if(!mods&&Array.isArray(j.modules)&&j.modules.length){mods=true;$('mods').innerHTML=j.modules.map(m=>'<span class="chip">'+m+'</span>').join('')}
+    if(j.failed){$('wrap').classList.add('err');$('title').textContent='DevTools build failed';$('step').textContent=j.step||'';return}
+    const t=j.elapsed?' \xB7 <span class="t">'+Math.round(j.elapsed/1000)+'s</span>':''
+    $('step').innerHTML=(j.step?j.step.replace(/[<>&]/g,c=>({'<':'&lt;','>':'&gt;','&':'&amp;'}[c])):'')+t
+  }catch{}
+}
+setInterval(poll,800);poll()
+<\/script></body></html>`;
 }
 function deriveRoutes(layerDir, slug) {
   const routes = [`/${slug}`];
@@ -31,7 +55,24 @@ function registerSharedRpcOnce(nuxt) {
   nuxt._seoDevtoolsRpcRegistered = true;
   onDevToolsInitialized(() => {
     extendServerRpc("nuxt-seo-modules", {
-      getInstalledSeoModules: () => nuxt._seoDevtoolsModules || []
+      // Registered modules (those that shipped a devtools panel) carry the iframe route.
+      // detectNuxtSeoModules adds every *installed* SEO module from nuxt's module list —
+      // independent of whether it self-registered a panel or which shared version it ships —
+      // so the picker reflects the full install (e.g. site-config, which has no panel).
+      getInstalledSeoModules: () => {
+        const byNpm = /* @__PURE__ */ new Map();
+        for (const m of nuxt._seoDevtoolsModules || []) {
+          if (m.npm)
+            byNpm.set(m.npm, m);
+        }
+        for (const det of detectNuxtSeoModules(nuxt)) {
+          if (!byNpm.has(det.name)) {
+            const meta = modules.find((s) => s.npm === det.name);
+            byNpm.set(det.name, { name: meta?.slug ?? det.name, npm: det.name, title: meta?.label ?? det.name, icon: meta?.icon ?? "", route: "" });
+          }
+        }
+        return [...byNpm.values()];
+      }
     }, nuxt);
   }, nuxt);
 }
@@ -45,7 +86,30 @@ function resolveBaseLayer(installed) {
   console.warn("[nuxt-seo] could not resolve nuxtseo-layer-devtools from any installed SEO module \u2014 add it to the module's dependencies. Falling back to a bare specifier, which only works when your app installs it directly.");
   return "nuxtseo-layer-devtools";
 }
-function generateAndBuild(cacheDir, installed, onReady) {
+function resolveNuxtCli(rootDir) {
+  const bases = [process.argv[1], join(rootDir, "index.js")].filter(Boolean);
+  for (const base of bases) {
+    let req;
+    try {
+      req = createRequire(base);
+    } catch {
+      continue;
+    }
+    for (const spec of ["nuxi", "nuxt", "@nuxt/cli"]) {
+      try {
+        const pkgPath = req.resolve(`${spec}/package.json`);
+        const bin = JSON.parse(readFileSync(pkgPath, "utf8")).bin;
+        const rel = typeof bin === "string" ? bin : bin?.nuxi ?? bin?.nuxt;
+        if (rel)
+          return join(dirname(pkgPath), rel);
+      } catch {
+      }
+    }
+  }
+  return null;
+}
+const stripAnsi = (s) => s.replace(new RegExp(`${String.fromCharCode(27)}\\[[0-9;]*m`, "g"), "");
+function generateAndBuild(cacheDir, rootDir, installed, hooks) {
   const routes = ["/", ...installed.flatMap((m) => deriveRoutes(m.layerDir, m.slug))];
   const extendsList = [resolveBaseLayer(installed), ...installed.map((m) => m.layerDir)];
   mkdirSync(join(cacheDir, "pages"), { recursive: true });
@@ -66,12 +130,29 @@ export default defineNuxtConfig({
   writeFileSync(join(cacheDir, "pages/index.vue"), `<template><div class="p-4">${installed.map((m) => `<NuxtLink to="/${m.slug}" class="block underline">${m.title}</NuxtLink>`).join("")}</div></template>
 `);
   console.log(`[nuxt-seo] building devtools client for: ${installed.map((m) => m.slug).join(", ")}`);
-  const child = spawn("npx", ["nuxi", "build"], { cwd: cacheDir, stdio: "inherit" });
+  const cliBin = resolveNuxtCli(rootDir);
+  const child = cliBin ? spawn(process.execPath, [cliBin, "build"], { cwd: cacheDir, stdio: ["inherit", "pipe", "pipe"] }) : spawn("npx", ["nuxi", "build"], { cwd: cacheDir, stdio: ["inherit", "pipe", "pipe"], shell: true });
+  const statusLine = /^(?:[ℹ✔✓✨⚠✖✗●➜√]|\[\w)/;
+  const forward = (chunk, sink) => {
+    sink.write(chunk);
+    const step = stripAnsi(chunk.toString()).split("\n").map((l) => l.trim()).filter((l) => statusLine.test(l)).pop();
+    if (step)
+      hooks.onProgress(step);
+  };
+  child.stdout?.on("data", (c) => forward(c, process.stdout));
+  child.stderr?.on("data", (c) => forward(c, process.stderr));
+  child.on("error", (err) => {
+    console.error(`[nuxt-seo] could not build devtools client, the panel will stay unavailable: ${err.message}`);
+    hooks.onError();
+  });
   child.on("exit", (code) => {
     if (code === 0) {
       writeFileSync(join(cacheDir, ".installed-hash"), hashSet(installed.map((m) => m.slug).sort()));
-      onReady();
+      hooks.onReady();
       console.log("[nuxt-seo] devtools client ready");
+    } else {
+      console.error(`[nuxt-seo] devtools client build exited with code ${code}, the panel will stay unavailable`);
+      hooks.onError();
     }
   });
 }
@@ -79,7 +160,7 @@ function setupLayerModule(config, layerDir, nuxt) {
   const slug = config.slug ?? config.name.replace(/^nuxt-/, "");
   const clientRoute = `${UNIFIED_CLIENT_ROUTE}/${slug}`;
   const modules = nuxt._seoDevtoolsModules ??= [];
-  modules.push({ name: config.name, title: config.title, icon: config.icon, route: clientRoute });
+  modules.push({ name: config.name, npm: npmForSlug(slug), title: config.title, icon: config.icon, route: clientRoute });
   const layers = nuxt._seoDevtoolsLayers ??= [];
   layers.push({ slug, name: config.name, title: config.title, icon: config.icon, layerDir });
   addCustomTab({ name: `nuxt-seo-${slug}`, title: config.title, icon: config.icon, view: { type: "iframe", src: clientRoute } });
@@ -88,24 +169,52 @@ function setupLayerModule(config, layerDir, nuxt) {
   nuxt._seoDevtoolsInit = true;
   const cacheDir = join(nuxt.options.rootDir, "node_modules/.cache/nuxt-seo-devtools");
   const dist = join(cacheDir, "dist/devtools");
-  const state = { ready: false };
+  const state = { ready: false, building: false, failed: false, startedAt: 0, step: "", modules: [] };
+  function ensureBuilt() {
+    if (state.ready || state.building)
+      return;
+    state.building = true;
+    state.failed = false;
+    state.startedAt = Date.now();
+    state.step = "Starting build\u2026";
+    const installed = nuxt._seoDevtoolsLayers;
+    state.modules = installed.map((m) => m.title);
+    generateAndBuild(cacheDir, nuxt.options.rootDir, installed, {
+      onProgress: (step) => {
+        state.step = step;
+      },
+      onReady: () => {
+        state.ready = true;
+        state.building = false;
+      },
+      onError: () => {
+        state.building = false;
+        state.failed = true;
+        state.step = "Build failed, see the dev server logs";
+      }
+    });
+  }
   nuxt.hook("modules:done", () => {
     const installed = nuxt._seoDevtoolsLayers;
     const key = hashSet(installed.map((m) => m.slug).sort());
     state.ready = existsSync(join(cacheDir, ".installed-hash")) && readFileSync(join(cacheDir, ".installed-hash"), "utf8") === key && existsSync(dist);
-    if (!state.ready)
-      generateAndBuild(cacheDir, installed, () => {
-        state.ready = true;
-      });
   });
   nuxt.hook("vite:serverCreated", (server) => {
     const serve = sirv(dist, { dev: true, single: "200.html" });
     server.middlewares.use(UNIFIED_CLIENT_ROUTE, (req, res, next) => {
       if ((req.url || "/").startsWith("/__status")) {
+        ensureBuilt();
         res.setHeader("content-type", "application/json");
-        return res.end(JSON.stringify({ ready: state.ready }));
+        return res.end(JSON.stringify({
+          ready: state.ready,
+          failed: state.failed,
+          step: state.step,
+          modules: state.modules,
+          elapsed: state.startedAt ? Date.now() - state.startedAt : 0
+        }));
       }
       if (!state.ready) {
+        ensureBuilt();
         res.setHeader("content-type", "text/html");
         return res.end(placeholderHtml());
       }
@@ -115,9 +224,10 @@ function setupLayerModule(config, layerDir, nuxt) {
 }
 function setupLegacyModule(config, clientPath, nuxt) {
   const { name, title, icon, devPort = 3030 } = config;
-  const route = config.route ?? `/__${name.replace(/^nuxt-/, "")}`;
+  const slug = config.slug ?? name.replace(/^nuxt-/, "");
+  const route = config.route ?? `/__${slug}`;
   const modules = nuxt._seoDevtoolsModules ??= [];
-  modules.push({ name, title, icon, route });
+  modules.push({ name, npm: npmForSlug(slug), title, icon, route });
   const isProductionBuild = existsSync(clientPath) && readdirSync(clientPath).length > 0;
   if (isProductionBuild) {
     nuxt.hook("vite:serverCreated", (server) => {
@@ -155,8 +265,9 @@ function setupLegacyModule(config, clientPath, nuxt) {
 function setupDevToolsUI(config, resolve, nuxt = useNuxt()) {
   if (!nuxt.options.dev)
     return;
-  const layerCandidates = [resolve("./devtools"), resolve("../devtools")];
-  const layerDir = layerCandidates.find((dir) => existsSync(join(dir, "nuxt.config.ts"))) ?? layerCandidates[0];
+  const layerFallback = resolve("./devtools");
+  const layerCandidates = [layerFallback, resolve("../devtools")];
+  const layerDir = layerCandidates.find((dir) => existsSync(join(dir, "nuxt.config.ts"))) ?? layerFallback;
   const isLayer = existsSync(join(layerDir, "nuxt.config.ts")) && !existsSync(join(layerDir, "index.html"));
   registerSharedRpcOnce(nuxt);
   if (isLayer)

package/dist/module.json CHANGED Viewed

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "5.2.4",
+  "version": "5.2.6",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "nuxtseo-shared",
   "type": "module",
-  "version": "5.2.4",
+  "version": "5.2.6",
   "description": "Shared utilities for Nuxt SEO modules.",
   "author": {
     "name": "Harlan Wilton",