nuxt-og-image 6.0.0-beta.1 → 6.0.0-beta.2

package/dist/chunks/tw4-classes.cjs

@@ -3,7 +3,7 @@
 const promises = require('node:fs/promises');
 const compilerSfc = require('@vue/compiler-sfc');
 const tinyglobby = require('tinyglobby');
-const module$1 = require('../shared/nuxt-og-image.DroaQ3v-.cjs');
+const module$1 = require('../shared/nuxt-og-image.iluFGbPR.cjs');
 require('node:fs');
 require('@nuxt/kit');
 require('defu');

package/dist/chunks/tw4-classes.mjs

@@ -1,7 +1,7 @@
 import { readFile } from 'node:fs/promises';
 import { parse } from '@vue/compiler-sfc';
 import { glob } from 'tinyglobby';
-import { w as walkTemplateAst } from '../shared/nuxt-og-image.HMyihp-D.mjs';
+import { w as walkTemplateAst } from '../shared/nuxt-og-image.D-QhzI76.mjs';
 import 'node:fs';
 import '@nuxt/kit';
 import 'defu';

package/dist/chunks/tw4-generator.cjs

@@ -6,7 +6,7 @@ const postcss = require('postcss');
 const postcssCalc = require('postcss-calc');
 const postcssCustomProperties = require('postcss-custom-properties');
 const tailwindcss = require('tailwindcss');
-const module$1 = require('../shared/nuxt-og-image.DroaQ3v-.cjs');
+const module$1 = require('../shared/nuxt-og-image.iluFGbPR.cjs');
 require('node:fs');
 require('@nuxt/kit');
 require('defu');

package/dist/chunks/tw4-generator.mjs

@@ -4,7 +4,7 @@ import postcss from 'postcss';
 import postcssCalc from 'postcss-calc';
 import postcssCustomProperties from 'postcss-custom-properties';
 import { compile } from 'tailwindcss';
-import { c as createStylesheetLoader, a as convertOklchToHex, b as buildNuxtUiVars, d as decodeCssClassName } from '../shared/nuxt-og-image.HMyihp-D.mjs';
+import { c as createStylesheetLoader, a as convertOklchToHex, b as buildNuxtUiVars, d as decodeCssClassName } from '../shared/nuxt-og-image.D-QhzI76.mjs';
 import 'node:fs';
 import '@nuxt/kit';
 import 'defu';

package/dist/cli.cjs

@@ -1,30 +1,51 @@
 #!/usr/bin/env node
 'use strict';
 
-const node_child_process = require('node:child_process');
 const fs = require('node:fs');
 const node_path = require('node:path');
-const node_readline = require('node:readline');
 const node_url = require('node:url');
+const p = require('@clack/prompts');
+const magicast = require('magicast');
+const nypm = require('nypm');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
-async function confirm(message) {
-  const rl = node_readline.createInterface({ input: process.stdin, output: process.stdout });
-  return new Promise((resolve2) => {
-    rl.question(`${message} (y/N) `, (answer) => {
-      rl.close();
-      resolve2(answer.toLowerCase() === "y" || answer.toLowerCase() === "yes");
-    });
-  });
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
 }
+
+const p__namespace = /*#__PURE__*/_interopNamespaceCompat(p);
+
 const __dirname$1 = node_path.dirname(node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('cli.cjs', document.baseURI).href))));
 const communityDir = node_path.resolve(__dirname$1, "runtime/app/components/Templates/Community");
 const defaultComponentDirs = ["OgImage", "OgImageCommunity", "og-image", "OgImageTemplate"];
-const RENDERER_DEPS = {
-  satori: ["satori", "@resvg/resvg-js"],
-  chromium: ["playwright-core"],
-  takumi: ["@aspect-build/aspect", "linkedom"]
-};
+const RENDERERS = [
+  {
+    name: "satori",
+    label: "Satori",
+    description: "SVG-based renderer - fast, works everywhere (recommended)",
+    deps: ["satori", "@resvg/resvg-js"]
+  },
+  {
+    name: "takumi",
+    label: "Takumi",
+    description: "Rust-based high-performance renderer",
+    deps: ["@takumi-rs/core"]
+  },
+  {
+    name: "chromium",
+    label: "Chromium",
+    description: "Browser screenshot renderer - pixel-perfect but slower",
+    deps: ["playwright-core"]
+  }
+];
 function getBaseName(filename) {
   return filename.replace(/\.(satori|chromium|takumi)\.vue$/, "");
 }
@@ -45,7 +66,7 @@ function findTemplateFile(name) {
 function ejectTemplate(name, targetDir) {
   const templateFile = findTemplateFile(name);
   if (!templateFile) {
-    console.error(`Template "${name}" not found.`);
+    p__namespace.log.error(`Template "${name}" not found.`);
     listTemplates();
     process.exit(1);
   }
@@ -55,12 +76,12 @@ function ejectTemplate(name, targetDir) {
     fs.mkdirSync(outputDir, { recursive: true });
   const outputPath = node_path.join(outputDir, templateFile);
   if (fs.existsSync(outputPath)) {
-    console.error(`File already exists: ${outputPath}`);
+    p__namespace.log.error(`File already exists: ${outputPath}`);
     process.exit(1);
   }
   const content = fs.readFileSync(templatePath, "utf-8");
   fs.writeFileSync(outputPath, content, "utf-8");
-  console.log(`\u2713 Ejected "${name}" to ${outputPath}`);
+  p__namespace.log.success(`Ejected "${name}" to ${outputPath}`);
 }
 function findOgImageComponents(dir) {
   const components = [];
@@ -96,14 +117,62 @@ function globFiles(dir, pattern, exclude = []) {
   walk(dir);
   return results;
 }
+async function checkNuxtConfig(rootDir) {
+  const configPaths = ["nuxt.config.ts", "nuxt.config.js", "nuxt.config.mjs"];
+  let configPath = null;
+  for (const _p of configPaths) {
+    const fullPath = node_path.join(rootDir, _p);
+    if (fs.existsSync(fullPath)) {
+      configPath = fullPath;
+      break;
+    }
+  }
+  if (!configPath)
+    return { hasDeprecatedFonts: false, hasNuxtFonts: false, configPath: null };
+  const mod = await magicast.loadFile(configPath).catch(() => null);
+  if (!mod)
+    return { hasDeprecatedFonts: false, hasNuxtFonts: false, configPath };
+  const config = mod.exports.default;
+  const hasDeprecatedFonts = !!config?.ogImage?.fonts;
+  const modules = config?.modules || [];
+  const hasNuxtFonts = modules.some(
+    (m) => typeof m === "string" && m === "@nuxt/fonts" || Array.isArray(m) && m[0] === "@nuxt/fonts"
+  );
+  return { hasDeprecatedFonts, hasNuxtFonts, configPath };
+}
+async function checkMigrationNeeded(rootDir) {
+  const result = {
+    needsComponentRename: false,
+    needsFontsMigration: false,
+    needsNuxtFonts: false,
+    componentsToRename: []
+  };
+  const dirs = [rootDir];
+  if (fs.existsSync(node_path.join(rootDir, "app")))
+    dirs.push(node_path.join(rootDir, "app"));
+  const layersDir = node_path.join(rootDir, "layers");
+  if (fs.existsSync(layersDir)) {
+    const layerDirs = fs.readdirSync(layersDir, { withFileTypes: true }).filter((d) => d.isDirectory()).map((d) => node_path.join(layersDir, d.name));
+    dirs.push(...layerDirs);
+  }
+  for (const dir of dirs) {
+    const components = findOgImageComponents(dir);
+    for (const filepath of components) {
+      const filename = filepath.split("/").pop();
+      if (!hasRendererSuffix(filename)) {
+        result.componentsToRename.push({ from: filepath, to: "" });
+      }
+    }
+  }
+  result.needsComponentRename = result.componentsToRename.length > 0;
+  const configCheck = await checkNuxtConfig(rootDir);
+  result.needsFontsMigration = configCheck.hasDeprecatedFonts;
+  result.needsNuxtFonts = !configCheck.hasNuxtFonts;
+  return result;
+}
 function migrateDefineOgImageApi(dryRun) {
   const cwd = process.cwd();
-  const excludePatterns = [
-    /node_modules/,
-    /\.nuxt/,
-    /\.output/,
-    /dist/
-  ];
+  const excludePatterns = [/node_modules/, /\.nuxt/, /\.output/, /dist/];
   const files = globFiles(cwd, /\.(?:vue|ts|tsx|js|jsx)$/, excludePatterns);
   const changes = [];
   for (const file of files) {
@@ -124,10 +193,7 @@ function migrateDefineOgImageApi(dryRun) {
         const remaining = inner.replace(/renderer\s*:\s*['"][^'"]+['"]\s*,?\s*/g, "").replace(/,\s*$/, "").trim();
         modified = true;
         changeCount++;
-        if (remaining) {
-          return `defineOgImageScreenshot({ ${remaining} })`;
-        }
-        return `defineOgImageScreenshot()`;
+        return remaining ? `defineOgImageScreenshot({ ${remaining} })` : `defineOgImageScreenshot()`;
       }
       if (componentMatch || rendererMatch) {
         const componentName = componentMatch ? componentMatch[1] : "NuxtSeo";
@@ -161,108 +227,178 @@ function migrateDefineOgImageApi(dryRun) {
       }
     }
   }
-  if (changes.length === 0) {
-    console.log("\u2713 No defineOgImage calls need migration.");
+  return { changes };
+}
+function migrateV6Components(componentsToRename, defaultRenderer, dryRun) {
+  for (const item of componentsToRename) {
+    const filename = item.from.split("/").pop();
+    const newName = filename.replace(".vue", `.${defaultRenderer}.vue`);
+    item.to = item.from.replace(filename, newName);
+  }
+  if (dryRun) {
+    console.log("\nWould rename:");
+    for (const { from, to } of componentsToRename) {
+      console.log(`  ${from.split("/").pop()} \u2192 ${to.split("/").pop()}`);
+    }
     return;
   }
-  console.log(`
-Found ${changes.length} file(s) with changes:
-`);
-  for (const { file, count } of changes) {
-    const relPath = file.replace(`${cwd}/`, "");
-    console.log(`  ${relPath} (${count} change${count > 1 ? "s" : ""})`);
+  for (const { from, to } of componentsToRename) {
+    fs.renameSync(from, to);
+    console.log(`\u2713 Renamed ${from.split("/").pop()}`);
   }
-  if (dryRun) {
-    console.log("\n[Dry run - no changes made]");
-    console.log(`
-Run without --dry-run to apply changes.`);
-  } else {
-    console.log(`
-\u2713 Migration complete. ${changes.length} file(s) updated.`);
+}
+async function installRendererDeps(renderers) {
+  const cwd = process.cwd();
+  const pm = await nypm.detectPackageManager(cwd);
+  const pmName = pm?.name || "npm";
+  const allDeps = [];
+  for (const renderer of renderers) {
+    const def = RENDERERS.find((r) => r.name === renderer);
+    if (def) {
+      allDeps.push(...def.deps);
+    }
+  }
+  if (allDeps.length === 0)
+    return;
+  const spinner = p__namespace.spinner();
+  spinner.start(`Installing dependencies with ${pmName}...`);
+  for (const dep of allDeps) {
+    await nypm.addDependency(dep, { cwd, dev: false }).catch(() => {
+      spinner.stop(`Failed to install ${dep}`);
+      p__namespace.log.warn(`Run manually: ${pmName} add ${dep}`);
+    });
   }
+  spinner.stop("Dependencies installed");
 }
-function migrateV6(dryRun, defaultRenderer = "satori") {
+async function installNuxtFonts() {
   const cwd = process.cwd();
-  const dirs = [cwd];
-  if (fs.existsSync(node_path.join(cwd, "app")))
-    dirs.push(node_path.join(cwd, "app"));
-  const layersDir = node_path.join(cwd, "layers");
-  if (fs.existsSync(layersDir)) {
-    const layerDirs = fs.readdirSync(layersDir, { withFileTypes: true }).filter((d) => d.isDirectory()).map((d) => node_path.join(layersDir, d.name));
-    dirs.push(...layerDirs);
+  const spinner = p__namespace.spinner();
+  spinner.start("Adding @nuxt/fonts module...");
+  const { execa } = await import('execa');
+  await execa("npx", ["nuxi", "module", "add", "@nuxt/fonts"], { cwd }).then(() => {
+    spinner.stop("@nuxt/fonts module added");
+  }).catch(() => {
+    spinner.stop("Failed to add @nuxt/fonts");
+    p__namespace.log.warn("Run manually: npx nuxi module add @nuxt/fonts");
+  });
+}
+async function runMigrate(args2) {
+  const dryRun = args2.includes("--dry-run") || args2.includes("-d");
+  const skipConfirm = args2.includes("--yes") || args2.includes("-y");
+  const rendererIdx = args2.indexOf("--renderer");
+  const cliRenderer = rendererIdx !== -1 ? args2[rendererIdx + 1] : null;
+  if (cliRenderer && !["satori", "chromium", "takumi"].includes(cliRenderer)) {
+    console.error(`Invalid renderer: ${cliRenderer}. Must be satori, chromium, or takumi.`);
+    process.exit(1);
   }
-  const toRename = [];
-  for (const dir of dirs) {
-    const components = findOgImageComponents(dir);
-    for (const filepath of components) {
-      const filename = filepath.split("/").pop();
-      if (!hasRendererSuffix(filename)) {
-        const newName = filename.replace(".vue", `.${defaultRenderer}.vue`);
-        toRename.push({
-          from: filepath,
-          to: filepath.replace(filename, newName)
-        });
+  p__namespace.intro("nuxt-og-image v6 Migration");
+  const cwd = process.cwd();
+  const migrationCheck = await checkMigrationNeeded(cwd);
+  const noComponentWork = !migrationCheck.needsComponentRename;
+  const noFontsWork = !migrationCheck.needsFontsMigration && !migrationCheck.needsNuxtFonts;
+  if (noComponentWork && noFontsWork) {
+    console.log("\u2713 All OG Image components already have renderer suffixes.");
+    p__namespace.outro("Done");
+    return;
+  }
+  const tasks = [];
+  if (migrationCheck.needsComponentRename) {
+    tasks.push(`Rename ${migrationCheck.componentsToRename.length} component(s) to include renderer suffix`);
+  }
+  if (migrationCheck.needsFontsMigration) {
+    tasks.push("Migrate ogImage.fonts to @nuxt/fonts config");
+  }
+  if (migrationCheck.needsNuxtFonts) {
+    tasks.push("Install @nuxt/fonts module");
+  }
+  tasks.push("Update defineOgImage() calls to new API");
+  p__namespace.note(tasks.map((t) => `\u2022 ${t}`).join("\n"), "Migration tasks");
+  if (dryRun) {
+    p__namespace.log.warn("[Dry run mode - no changes will be made]");
+  }
+  let selectedRenderers;
+  if (skipConfirm) {
+    selectedRenderers = cliRenderer ? [cliRenderer] : ["satori"];
+  } else {
+    const confirmed = await p__namespace.confirm({
+      message: "This will modify files. Continue?",
+      initialValue: false
+    });
+    if (p__namespace.isCancel(confirmed) || !confirmed) {
+      p__namespace.cancel("Migration cancelled");
+      process.exit(0);
+    }
+    const rendererSelection = await p__namespace.multiselect({
+      message: "Which renderers do you want to use?",
+      options: RENDERERS.map((r) => ({
+        value: r.name,
+        label: r.label,
+        hint: r.description
+      })),
+      initialValues: ["satori"],
+      required: true
+    });
+    if (p__namespace.isCancel(rendererSelection)) {
+      p__namespace.cancel("Migration cancelled");
+      process.exit(0);
+    }
+    selectedRenderers = rendererSelection;
+    if (!dryRun) {
+      const installDeps = await p__namespace.confirm({
+        message: "Install renderer dependencies?",
+        initialValue: true
+      });
+      if (!p__namespace.isCancel(installDeps) && installDeps) {
+        await installRendererDeps(selectedRenderers);
       }
     }
   }
-  if (toRename.length === 0) {
-    console.log("\u2713 All OG Image components already have renderer suffixes.");
-    return;
+  if (migrationCheck.needsComponentRename) {
+    console.log("\nRenaming components...");
+    migrateV6Components(migrationCheck.componentsToRename, selectedRenderers[0] || "satori", dryRun);
+  }
+  console.log("\nMigrating defineOgImage calls...");
+  const apiChanges = migrateDefineOgImageApi(dryRun);
+  if (apiChanges.changes.length > 0) {
+    for (const { file, count } of apiChanges.changes) {
+      const relPath = file.replace(`${cwd}/`, "");
+      console.log(`  ${relPath} (${count} change${count > 1 ? "s" : ""})`);
+    }
+  } else {
+    console.log("  No API changes needed");
   }
-  console.log(`
-Found ${toRename.length} component(s) to rename:
-`);
-  for (const { from, to } of toRename) {
-    const fromName = from.split("/").pop();
-    const toName = to.split("/").pop();
-    console.log(`  ${fromName} \u2192 ${toName}`);
+  if (migrationCheck.needsNuxtFonts && !dryRun && !skipConfirm) {
+    const addFonts = await p__namespace.confirm({
+      message: "@nuxt/fonts is recommended for custom fonts. Add it?",
+      initialValue: true
+    });
+    if (!p__namespace.isCancel(addFonts) && addFonts) {
+      await installNuxtFonts();
+    }
   }
   if (dryRun) {
     console.log("\n[Dry run - no changes made]");
-    console.log(`
-Run without --dry-run to apply changes.`);
-    return;
-  }
-  console.log("");
-  for (const { from, to } of toRename) {
-    fs.renameSync(from, to);
-    console.log(`\u2713 Renamed ${from.split("/").pop()}`);
+    console.log("Run without --dry-run to apply changes.");
   }
-  console.log(`
-\u2713 Migration complete. ${toRename.length} file(s) renamed.`);
+  p__namespace.outro(dryRun ? "Dry run complete" : "Migration complete!");
 }
-function enableRenderer(renderer) {
-  const deps = RENDERER_DEPS[renderer];
-  if (!deps) {
-    console.error(`Unknown renderer: ${renderer}`);
-    console.log("Available renderers: satori, chromium, takumi");
+async function runEnable(renderer) {
+  const def = RENDERERS.find((r) => r.name === renderer);
+  if (!def) {
+    p__namespace.log.error(`Unknown renderer: ${renderer}`);
+    p__namespace.log.info(`Available: ${RENDERERS.map((r) => r.name).join(", ")}`);
     process.exit(1);
   }
-  console.log(`Installing dependencies for ${renderer} renderer:`);
-  console.log(`  ${deps.join(", ")}
-`);
-  const cwd = process.cwd();
-  let pm = "npm";
-  if (fs.existsSync(node_path.join(cwd, "pnpm-lock.yaml")))
-    pm = "pnpm";
-  else if (fs.existsSync(node_path.join(cwd, "yarn.lock")))
-    pm = "yarn";
-  else if (fs.existsSync(node_path.join(cwd, "bun.lockb")))
-    pm = "bun";
-  const installCmd = pm === "npm" ? `${pm} install` : `${pm} add`;
-  const cmd = `${installCmd} ${deps.join(" ")}`;
-  console.log(`Running: ${cmd}
-`);
-  node_child_process.execSync(cmd, { stdio: "inherit", cwd });
-  console.log(`
-\u2713 ${renderer} renderer enabled.`);
+  p__namespace.intro(`Enable ${def.label} renderer`);
+  await installRendererDeps([renderer]);
+  p__namespace.outro("Done");
 }
 const args = process.argv.slice(2);
 const command = args[0];
 if (command === "eject") {
   const templateName = args[1];
   if (!templateName) {
-    console.error("Please specify a template name.");
+    p__namespace.log.error("Please specify a template name.");
     listTemplates();
     process.exit(1);
   }
@@ -274,60 +410,24 @@ if (command === "eject") {
 } else if (command === "migrate") {
   const version = args[1];
   if (version !== "v6") {
-    console.error("Usage: npx nuxt-og-image migrate v6 [--dry-run] [--renderer <satori|chromium|takumi>]");
-    process.exit(1);
-  }
-  const dryRun = args.includes("--dry-run") || args.includes("-d");
-  const skipConfirm = args.includes("--yes") || args.includes("-y");
-  const rendererIdx = args.indexOf("--renderer");
-  const renderer = rendererIdx !== -1 ? args[rendererIdx + 1] || "satori" : "satori";
-  if (!["satori", "chromium", "takumi"].includes(renderer)) {
-    console.error(`Invalid renderer: ${renderer}. Must be satori, chromium, or takumi.`);
+    p__namespace.log.error("Usage: npx nuxt-og-image migrate v6 [--dry-run] [--yes] [--renderer <satori|chromium|takumi>]");
     process.exit(1);
   }
-  console.log("nuxt-og-image v6 Migration\n");
-  console.log("This will:");
-  console.log("  1. Rename OgImage components to include renderer suffix (.satori.vue, etc.)");
-  console.log("  2. Update defineOgImage() calls to new component-first API");
-  console.log("");
-  console.log("\x1B[33m\u26A0 WARNING: This modifies files directly and could break your code.\x1B[0m");
-  console.log("\x1B[33m  Make sure you have committed or backed up your changes first.\x1B[0m");
-  console.log("");
-  if (dryRun) {
-    console.log("[Dry run mode - no files will be modified]\n");
-    migrateV6(true, renderer);
-    console.log("");
-    migrateDefineOgImageApi(true);
-  } else if (skipConfirm) {
-    migrateV6(false, renderer);
-    console.log("");
-    migrateDefineOgImageApi(false);
-  } else {
-    confirm("Continue with migration?").then((confirmed) => {
-      if (!confirmed) {
-        console.log("Migration cancelled.");
-        process.exit(0);
-      }
-      console.log("");
-      migrateV6(false, renderer);
-      console.log("");
-      migrateDefineOgImageApi(false);
-    });
-  }
+  runMigrate(args);
 } else if (command === "enable") {
   const renderer = args[1];
   if (!renderer) {
-    console.error("Usage: npx nuxt-og-image enable <renderer>");
-    console.log("Available renderers: satori, chromium, takumi");
+    p__namespace.log.error("Usage: npx nuxt-og-image enable <renderer>");
+    p__namespace.log.info(`Available: ${RENDERERS.map((r) => r.name).join(", ")}`);
     process.exit(1);
   }
-  enableRenderer(renderer);
+  runEnable(renderer);
 } else {
   console.log("nuxt-og-image CLI\n");
   console.log("Commands:");
   console.log("  list              List available community templates");
   console.log("  eject <name>      Eject a community template to your project");
   console.log("  migrate v6        Migrate to v6 (component suffixes + new API)");
-  console.log("                    Options: --dry-run, --renderer <satori|chromium|takumi>");
+  console.log("                    Options: --dry-run, --yes, --renderer <satori|chromium|takumi>");
   console.log("  enable <renderer> Install dependencies for a renderer (satori, chromium, takumi)");
 }