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

nuxtseo-shared 5.2.6 → 5.3.0

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 (3) hide show

package/dist/devtools.mjs CHANGED Viewed

@@ -3,8 +3,9 @@ import { existsSync, readFileSync, readdirSync, mkdirSync, writeFileSync } from
 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 { onDevToolsInitialized, extendServerRpc, addCustomTab, startSubprocess } from '@nuxt/devtools-kit';
 import { useNuxt } from '@nuxt/kit';
+import { detectPackageManager } from 'nypm';
 import sirv from 'sirv';
 import { modules } from './const.mjs';
 import { detectNuxtSeoModules } from './kit.mjs';
@@ -17,22 +18,44 @@ function npmForSlug(slug) {
   return modules.find((m) => m.slug === slug)?.npm;
 }
 const UNIFIED_CLIENT_ROUTE = "/__nuxt-seo-devtools";
+const TOOLCHAIN_PACKAGE = "nuxtseo-layer-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: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>
+<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;max-width:440px}.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)}.btn{font:inherit;font-size:13px;font-weight:600;padding:7px 16px;border-radius:8px;border:0;background:oklch(54% 0.225 292);color:#fff;cursor:pointer}.btn:hover{background:oklch(49% 0.225 292)}.btn:disabled{opacity:.6;cursor:default}.hide{display:none}.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" id="spin"></div><h1 id="title">Nuxt SEO DevTools</h1><div class="mods" id="mods"></div><p id="desc">Starting\u2026</p><button class="btn hide" id="install">Install</button><div class="step" id="step"></div></div>
 <script>
 const $=id=>document.getElementById(id)
-let mods=false
+const esc=s=>(s||'').replace(/[<>&]/g,c=>({'<':'&lt;','>':'&gt;','&':'&amp;'}[c]))
+let mods=false,clicked=false
+$('install').addEventListener('click',async()=>{
+  clicked=true
+  $('install').disabled=true;$('install').classList.add('hide')
+  $('spin').classList.remove('hide')
+  $('title').textContent='Installing\u2026'
+  $('desc').textContent='Adding the dev-only DevTools UI to your project.'
+  try{await fetch('${UNIFIED_CLIENT_ROUTE}/__install')}catch{}
+})
 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}
+    if(!mods&&Array.isArray(j.modules)&&j.modules.length){mods=true;$('mods').innerHTML=j.modules.map(m=>'<span class="chip">'+esc(m)+'</span>').join('')}
+    if(j.failed){$('wrap').classList.add('err');$('spin').classList.remove('hide');$('install').classList.add('hide');$('title').textContent='DevTools unavailable';$('desc').textContent='';$('step').textContent=j.step||'';return}
+    if(j.needsInstall&&!clicked){
+      const pkg=j.packageName||'nuxtseo-devtools'
+      $('spin').classList.add('hide')
+      $('install').classList.remove('hide');$('install').disabled=false;$('install').textContent='Install '+pkg
+      $('title').textContent='Nuxt SEO DevTools'
+      $('desc').textContent='The panel needs '+pkg+' (dev only). Installing it adds the package to your devDependencies; nothing is changed until you choose to install.'
+      $('step').textContent=''
+      return
+    }
+    $('spin').classList.remove('hide');$('install').classList.add('hide')
+    $('title').textContent=j.installing?'Installing\u2026':'Building Nuxt SEO DevTools\u2026'
+    $('desc').textContent=j.installing?'Adding the dev-only DevTools UI to your project.':'Assembling panels for your installed modules. This runs once.'
     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
+    $('step').innerHTML=esc(j.step)+t
   }catch{}
 }
 setInterval(poll,800);poll()
@@ -109,6 +132,44 @@ function resolveNuxtCli(rootDir) {
   return null;
 }
 const stripAnsi = (s) => s.replace(new RegExp(`${String.fromCharCode(27)}\\[[0-9;]*m`, "g"), "");
+function toolchainInstalled(rootDir) {
+  try {
+    createRequire(join(rootDir, "index.js")).resolve(TOOLCHAIN_PACKAGE);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function devAddArgs(rootDir) {
+  const pm = await detectPackageManager(rootDir).catch(() => null);
+  const name = pm?.name ?? "npm";
+  if (name === "npm")
+    return { command: "npm", args: ["install", "--save-dev", TOOLCHAIN_PACKAGE] };
+  if (name === "yarn")
+    return { command: "yarn", args: ["add", "--dev", TOOLCHAIN_PACKAGE] };
+  return { command: name, args: ["add", "-D", TOOLCHAIN_PACKAGE] };
+}
+async function installToolchain(rootDir, nuxt, onProgress) {
+  const { command, args } = await devAddArgs(rootDir);
+  onProgress(`Installing ${TOOLCHAIN_PACKAGE} with ${command}\u2026`);
+  return await new Promise((resolve) => {
+    const { getProcess } = startSubprocess(
+      { command, args, cwd: rootDir },
+      { id: "nuxt-seo:install-devtools", name: `Install ${TOOLCHAIN_PACKAGE}`, icon: "carbon:download" },
+      nuxt
+    );
+    const proc = getProcess();
+    if (!proc) {
+      resolve(false);
+      return;
+    }
+    proc.on("exit", (code) => resolve(code === 0 && toolchainInstalled(rootDir)));
+    proc.on("error", (err) => {
+      console.error(`[nuxt-seo] could not run "${command} ${args.join(" ")}": ${err.message}`);
+      resolve(false);
+    });
+  });
+}
 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)];
@@ -169,7 +230,8 @@ 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, building: false, failed: false, startedAt: 0, step: "", modules: [] };
+  const state = { ready: false, building: false, installing: false, needsInstall: false, failed: false, startedAt: 0, step: "", modules: [] };
+  const rootDir = nuxt.options.rootDir;
   function ensureBuilt() {
     if (state.ready || state.building)
       return;
@@ -179,7 +241,7 @@ function setupLayerModule(config, layerDir, nuxt) {
     state.step = "Starting build\u2026";
     const installed = nuxt._seoDevtoolsLayers;
     state.modules = installed.map((m) => m.title);
-    generateAndBuild(cacheDir, nuxt.options.rootDir, installed, {
+    generateAndBuild(cacheDir, rootDir, installed, {
       onProgress: (step) => {
         state.step = step;
       },
@@ -187,13 +249,38 @@ function setupLayerModule(config, layerDir, nuxt) {
         state.ready = true;
         state.building = false;
       },
-      onError: () => {
+      onError: (message) => {
         state.building = false;
         state.failed = true;
-        state.step = "Build failed, see the dev server logs";
+        state.step = message ?? "Build failed, see the dev server logs";
       }
     });
   }
+  function startInstall() {
+    if (state.installing || state.building || state.ready)
+      return;
+    state.installing = true;
+    state.needsInstall = false;
+    state.failed = false;
+    state.startedAt = Date.now();
+    state.step = `Installing ${TOOLCHAIN_PACKAGE}\u2026`;
+    installToolchain(rootDir, nuxt, (step) => {
+      state.step = step;
+    }).then((ok) => {
+      state.installing = false;
+      if (ok) {
+        ensureBuilt();
+      } else {
+        state.failed = true;
+        state.step = `Could not install ${TOOLCHAIN_PACKAGE} \u2014 see the dev server logs`;
+      }
+    }).catch((err) => {
+      state.installing = false;
+      state.failed = true;
+      state.step = `Could not install ${TOOLCHAIN_PACKAGE} \u2014 see the dev server logs`;
+      console.error(`[nuxt-seo] devtools toolchain install failed: ${err.message}`);
+    });
+  }
   nuxt.hook("modules:done", () => {
     const installed = nuxt._seoDevtoolsLayers;
     const key = hashSet(installed.map((m) => m.slug).sort());
@@ -202,19 +289,32 @@ function setupLayerModule(config, layerDir, nuxt) {
   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();
+      const url = req.url || "/";
+      if (url.startsWith("/__install")) {
+        startInstall();
+        res.setHeader("content-type", "application/json");
+        return res.end(JSON.stringify({ installing: state.installing }));
+      }
+      if (url.startsWith("/__status")) {
+        if (!state.ready && !state.building && !state.installing) {
+          if (toolchainInstalled(rootDir))
+            ensureBuilt();
+          else
+            state.needsInstall = true;
+        }
         res.setHeader("content-type", "application/json");
         return res.end(JSON.stringify({
           ready: state.ready,
           failed: state.failed,
+          needsInstall: state.needsInstall,
+          installing: state.installing,
+          packageName: TOOLCHAIN_PACKAGE,
           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());
       }

package/dist/module.json CHANGED Viewed

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "5.2.6",
+  "version": "5.3.0",
   "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.6",
+  "version": "5.3.0",
   "description": "Shared utilities for Nuxt SEO modules.",
   "author": {
     "name": "Harlan Wilton",
@@ -81,6 +81,7 @@
     "birpc": "^4.0.0",
     "consola": "^3.4.2",
     "defu": "^6.1.7",
+    "nypm": "^0.6.6",
     "ofetch": "^1.5.1",
     "pathe": "^2.0.3",
     "pkg-types": "^2.3.1",
@@ -96,7 +97,7 @@
     "@nuxtjs/i18n": "^10.4.0",
     "nitropack": "^2.13.4",
     "nuxt": "^4.4.8",
-    "nuxt-site-config": "^4.0.8",
+    "nuxt-site-config": "^4.1.0",
     "typescript": "^6.0.3",
     "vitest": "^4.1.8",
     "vue": "^3.5.35",