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

package/dist/cli.cjs

@@ -0,0 +1,333 @@
+#!/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');
+
+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");
+    });
+  });
+}
+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"]
+};
+function getBaseName(filename) {
+  return filename.replace(/\.(satori|chromium|takumi)\.vue$/, "");
+}
+function hasRendererSuffix(filename) {
+  return /\.(?:satori|chromium|takumi)\.vue$/.test(filename);
+}
+function listTemplates() {
+  const templates = fs.readdirSync(communityDir).filter((f) => f.endsWith(".vue")).map(getBaseName);
+  console.log("\nAvailable community templates:");
+  templates.forEach((t) => console.log(`  - ${t}`));
+  console.log("\nUsage: npx nuxt-og-image eject <template-name>\n");
+}
+function findTemplateFile(name) {
+  const files = fs.readdirSync(communityDir).filter((f) => f.endsWith(".vue"));
+  const match = files.find((f) => getBaseName(f) === name);
+  return match || null;
+}
+function ejectTemplate(name, targetDir) {
+  const templateFile = findTemplateFile(name);
+  if (!templateFile) {
+    console.error(`Template "${name}" not found.`);
+    listTemplates();
+    process.exit(1);
+  }
+  const templatePath = node_path.join(communityDir, templateFile);
+  const outputDir = node_path.resolve(targetDir, "components", "OgImage");
+  if (!fs.existsSync(outputDir))
+    fs.mkdirSync(outputDir, { recursive: true });
+  const outputPath = node_path.join(outputDir, templateFile);
+  if (fs.existsSync(outputPath)) {
+    console.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}`);
+}
+function findOgImageComponents(dir) {
+  const components = [];
+  for (const componentDir of defaultComponentDirs) {
+    const ogImageDir = node_path.join(dir, "components", componentDir);
+    if (fs.existsSync(ogImageDir)) {
+      const files = fs.readdirSync(ogImageDir, { withFileTypes: true });
+      for (const file of files) {
+        if (file.isFile() && file.name.endsWith(".vue"))
+          components.push(node_path.join(ogImageDir, file.name));
+      }
+    }
+  }
+  return components;
+}
+function globFiles(dir, pattern, exclude = []) {
+  const results = [];
+  function walk(currentDir) {
+    if (!fs.existsSync(currentDir))
+      return;
+    const entries = fs.readdirSync(currentDir, { withFileTypes: true });
+    for (const entry of entries) {
+      const fullPath = node_path.join(currentDir, entry.name);
+      if (exclude.some((re) => re.test(fullPath)))
+        continue;
+      if (entry.isDirectory()) {
+        walk(fullPath);
+      } else if (entry.isFile() && pattern.test(entry.name)) {
+        results.push(fullPath);
+      }
+    }
+  }
+  walk(dir);
+  return results;
+}
+function migrateDefineOgImageApi(dryRun) {
+  const cwd = process.cwd();
+  const excludePatterns = [
+    /node_modules/,
+    /\.nuxt/,
+    /\.output/,
+    /dist/
+  ];
+  const files = globFiles(cwd, /\.(?:vue|ts|tsx|js|jsx)$/, excludePatterns);
+  const changes = [];
+  for (const file of files) {
+    let content = fs.readFileSync(file, "utf-8");
+    let modified = false;
+    let changeCount = 0;
+    if (/defineOgImageComponent\s*\(/.test(content)) {
+      content = content.replace(/defineOgImageComponent\s*\(/g, "defineOgImage(");
+      modified = true;
+      changeCount++;
+    }
+    const defineOgImageRegex = /defineOgImage\s*\(\s*(\{[\s\S]*?\})\s*\)/g;
+    content = content.replace(defineOgImageRegex, (match, inner) => {
+      const componentMatch = inner.match(/component\s*:\s*['"]([^'"]+)['"]/);
+      const rendererMatch = inner.match(/renderer\s*:\s*['"]([^'"]+)['"]/);
+      const propsMatch = inner.match(/props\s*:\s*(\{[^}]*\})/);
+      if (!componentMatch && rendererMatch && rendererMatch[1] === "chromium") {
+        const remaining = inner.replace(/renderer\s*:\s*['"][^'"]+['"]\s*,?\s*/g, "").replace(/,\s*$/, "").trim();
+        modified = true;
+        changeCount++;
+        if (remaining) {
+          return `defineOgImageScreenshot({ ${remaining} })`;
+        }
+        return `defineOgImageScreenshot()`;
+      }
+      if (componentMatch || rendererMatch) {
+        const componentName = componentMatch ? componentMatch[1] : "NuxtSeo";
+        const props = propsMatch ? propsMatch[1] : "{}";
+        const otherOptions = [];
+        const lines = inner.split(/,(?![^{]*\})/).map((s) => s.trim());
+        for (const line of lines) {
+          if (!line)
+            continue;
+          if (/^component\s*:/.test(line))
+            continue;
+          if (/^props\s*:/.test(line))
+            continue;
+          if (/^renderer\s*:/.test(line))
+            continue;
+          otherOptions.push(line);
+        }
+        modified = true;
+        changeCount++;
+        if (otherOptions.length > 0) {
+          return `defineOgImage('${componentName}', ${props}, { ${otherOptions.join(", ")} })`;
+        }
+        return `defineOgImage('${componentName}', ${props})`;
+      }
+      return match;
+    });
+    if (modified) {
+      changes.push({ file, count: changeCount });
+      if (!dryRun) {
+        fs.writeFileSync(file, content, "utf-8");
+      }
+    }
+  }
+  if (changes.length === 0) {
+    console.log("\u2713 No defineOgImage calls need migration.");
+    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" : ""})`);
+  }
+  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.`);
+  }
+}
+function migrateV6(dryRun, defaultRenderer = "satori") {
+  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 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)
+        });
+      }
+    }
+  }
+  if (toRename.length === 0) {
+    console.log("\u2713 All OG Image components already have renderer suffixes.");
+    return;
+  }
+  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 (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(`
+\u2713 Migration complete. ${toRename.length} file(s) renamed.`);
+}
+function enableRenderer(renderer) {
+  const deps = RENDERER_DEPS[renderer];
+  if (!deps) {
+    console.error(`Unknown renderer: ${renderer}`);
+    console.log("Available renderers: satori, chromium, takumi");
+    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.`);
+}
+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.");
+    listTemplates();
+    process.exit(1);
+  }
+  const cwd = process.cwd();
+  const targetDir = fs.existsSync(node_path.join(cwd, "app")) ? node_path.join(cwd, "app") : cwd;
+  ejectTemplate(templateName, targetDir);
+} else if (command === "list") {
+  listTemplates();
+} 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.`);
+    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);
+    });
+  }
+} 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");
+    process.exit(1);
+  }
+  enableRenderer(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("  enable <renderer> Install dependencies for a renderer (satori, chromium, takumi)");
+}

package/dist/cli.d.cts

@@ -0,0 +1 @@
+

package/dist/cli.d.mts

@@ -0,0 +1 @@
+

package/dist/cli.d.ts

@@ -0,0 +1 @@
+

package/dist/cli.mjs

@@ -0,0 +1,330 @@
+#!/usr/bin/env node
+import { execSync } from 'node:child_process';
+import { existsSync, readdirSync, mkdirSync, readFileSync, writeFileSync, renameSync } from 'node:fs';
+import { dirname, resolve, join } from 'node:path';
+import { createInterface } from 'node:readline';
+import { fileURLToPath } from 'node:url';
+
+async function confirm(message) {
+  const rl = 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");
+    });
+  });
+}
+const __dirname$1 = dirname(fileURLToPath(import.meta.url));
+const communityDir = 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"]
+};
+function getBaseName(filename) {
+  return filename.replace(/\.(satori|chromium|takumi)\.vue$/, "");
+}
+function hasRendererSuffix(filename) {
+  return /\.(?:satori|chromium|takumi)\.vue$/.test(filename);
+}
+function listTemplates() {
+  const templates = readdirSync(communityDir).filter((f) => f.endsWith(".vue")).map(getBaseName);
+  console.log("\nAvailable community templates:");
+  templates.forEach((t) => console.log(`  - ${t}`));
+  console.log("\nUsage: npx nuxt-og-image eject <template-name>\n");
+}
+function findTemplateFile(name) {
+  const files = readdirSync(communityDir).filter((f) => f.endsWith(".vue"));
+  const match = files.find((f) => getBaseName(f) === name);
+  return match || null;
+}
+function ejectTemplate(name, targetDir) {
+  const templateFile = findTemplateFile(name);
+  if (!templateFile) {
+    console.error(`Template "${name}" not found.`);
+    listTemplates();
+    process.exit(1);
+  }
+  const templatePath = join(communityDir, templateFile);
+  const outputDir = resolve(targetDir, "components", "OgImage");
+  if (!existsSync(outputDir))
+    mkdirSync(outputDir, { recursive: true });
+  const outputPath = join(outputDir, templateFile);
+  if (existsSync(outputPath)) {
+    console.error(`File already exists: ${outputPath}`);
+    process.exit(1);
+  }
+  const content = readFileSync(templatePath, "utf-8");
+  writeFileSync(outputPath, content, "utf-8");
+  console.log(`\u2713 Ejected "${name}" to ${outputPath}`);
+}
+function findOgImageComponents(dir) {
+  const components = [];
+  for (const componentDir of defaultComponentDirs) {
+    const ogImageDir = join(dir, "components", componentDir);
+    if (existsSync(ogImageDir)) {
+      const files = readdirSync(ogImageDir, { withFileTypes: true });
+      for (const file of files) {
+        if (file.isFile() && file.name.endsWith(".vue"))
+          components.push(join(ogImageDir, file.name));
+      }
+    }
+  }
+  return components;
+}
+function globFiles(dir, pattern, exclude = []) {
+  const results = [];
+  function walk(currentDir) {
+    if (!existsSync(currentDir))
+      return;
+    const entries = readdirSync(currentDir, { withFileTypes: true });
+    for (const entry of entries) {
+      const fullPath = join(currentDir, entry.name);
+      if (exclude.some((re) => re.test(fullPath)))
+        continue;
+      if (entry.isDirectory()) {
+        walk(fullPath);
+      } else if (entry.isFile() && pattern.test(entry.name)) {
+        results.push(fullPath);
+      }
+    }
+  }
+  walk(dir);
+  return results;
+}
+function migrateDefineOgImageApi(dryRun) {
+  const cwd = process.cwd();
+  const excludePatterns = [
+    /node_modules/,
+    /\.nuxt/,
+    /\.output/,
+    /dist/
+  ];
+  const files = globFiles(cwd, /\.(?:vue|ts|tsx|js|jsx)$/, excludePatterns);
+  const changes = [];
+  for (const file of files) {
+    let content = readFileSync(file, "utf-8");
+    let modified = false;
+    let changeCount = 0;
+    if (/defineOgImageComponent\s*\(/.test(content)) {
+      content = content.replace(/defineOgImageComponent\s*\(/g, "defineOgImage(");
+      modified = true;
+      changeCount++;
+    }
+    const defineOgImageRegex = /defineOgImage\s*\(\s*(\{[\s\S]*?\})\s*\)/g;
+    content = content.replace(defineOgImageRegex, (match, inner) => {
+      const componentMatch = inner.match(/component\s*:\s*['"]([^'"]+)['"]/);
+      const rendererMatch = inner.match(/renderer\s*:\s*['"]([^'"]+)['"]/);
+      const propsMatch = inner.match(/props\s*:\s*(\{[^}]*\})/);
+      if (!componentMatch && rendererMatch && rendererMatch[1] === "chromium") {
+        const remaining = inner.replace(/renderer\s*:\s*['"][^'"]+['"]\s*,?\s*/g, "").replace(/,\s*$/, "").trim();
+        modified = true;
+        changeCount++;
+        if (remaining) {
+          return `defineOgImageScreenshot({ ${remaining} })`;
+        }
+        return `defineOgImageScreenshot()`;
+      }
+      if (componentMatch || rendererMatch) {
+        const componentName = componentMatch ? componentMatch[1] : "NuxtSeo";
+        const props = propsMatch ? propsMatch[1] : "{}";
+        const otherOptions = [];
+        const lines = inner.split(/,(?![^{]*\})/).map((s) => s.trim());
+        for (const line of lines) {
+          if (!line)
+            continue;
+          if (/^component\s*:/.test(line))
+            continue;
+          if (/^props\s*:/.test(line))
+            continue;
+          if (/^renderer\s*:/.test(line))
+            continue;
+          otherOptions.push(line);
+        }
+        modified = true;
+        changeCount++;
+        if (otherOptions.length > 0) {
+          return `defineOgImage('${componentName}', ${props}, { ${otherOptions.join(", ")} })`;
+        }
+        return `defineOgImage('${componentName}', ${props})`;
+      }
+      return match;
+    });
+    if (modified) {
+      changes.push({ file, count: changeCount });
+      if (!dryRun) {
+        writeFileSync(file, content, "utf-8");
+      }
+    }
+  }
+  if (changes.length === 0) {
+    console.log("\u2713 No defineOgImage calls need migration.");
+    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" : ""})`);
+  }
+  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.`);
+  }
+}
+function migrateV6(dryRun, defaultRenderer = "satori") {
+  const cwd = process.cwd();
+  const dirs = [cwd];
+  if (existsSync(join(cwd, "app")))
+    dirs.push(join(cwd, "app"));
+  const layersDir = join(cwd, "layers");
+  if (existsSync(layersDir)) {
+    const layerDirs = readdirSync(layersDir, { withFileTypes: true }).filter((d) => d.isDirectory()).map((d) => join(layersDir, d.name));
+    dirs.push(...layerDirs);
+  }
+  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)
+        });
+      }
+    }
+  }
+  if (toRename.length === 0) {
+    console.log("\u2713 All OG Image components already have renderer suffixes.");
+    return;
+  }
+  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 (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) {
+    renameSync(from, to);
+    console.log(`\u2713 Renamed ${from.split("/").pop()}`);
+  }
+  console.log(`
+\u2713 Migration complete. ${toRename.length} file(s) renamed.`);
+}
+function enableRenderer(renderer) {
+  const deps = RENDERER_DEPS[renderer];
+  if (!deps) {
+    console.error(`Unknown renderer: ${renderer}`);
+    console.log("Available renderers: satori, chromium, takumi");
+    process.exit(1);
+  }
+  console.log(`Installing dependencies for ${renderer} renderer:`);
+  console.log(`  ${deps.join(", ")}
+`);
+  const cwd = process.cwd();
+  let pm = "npm";
+  if (existsSync(join(cwd, "pnpm-lock.yaml")))
+    pm = "pnpm";
+  else if (existsSync(join(cwd, "yarn.lock")))
+    pm = "yarn";
+  else if (existsSync(join(cwd, "bun.lockb")))
+    pm = "bun";
+  const installCmd = pm === "npm" ? `${pm} install` : `${pm} add`;
+  const cmd = `${installCmd} ${deps.join(" ")}`;
+  console.log(`Running: ${cmd}
+`);
+  execSync(cmd, { stdio: "inherit", cwd });
+  console.log(`
+\u2713 ${renderer} renderer enabled.`);
+}
+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.");
+    listTemplates();
+    process.exit(1);
+  }
+  const cwd = process.cwd();
+  const targetDir = existsSync(join(cwd, "app")) ? join(cwd, "app") : cwd;
+  ejectTemplate(templateName, targetDir);
+} else if (command === "list") {
+  listTemplates();
+} 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.`);
+    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);
+    });
+  }
+} 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");
+    process.exit(1);
+  }
+  enableRenderer(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("  enable <renderer> Install dependencies for a renderer (satori, chromium, takumi)");
+}

package/dist/client/200.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/__nuxt-og-image/_nuxt/entry.cdy4VsCK.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__nuxt-og-image/_nuxt/CjQm5wk3.js"><script type="module" src="/__nuxt-og-image/_nuxt/CjQm5wk3.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},1765493670144,false]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-og-image",buildId:"eb2c0390-3125-4af7-b189-e76a7dfe3017",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script type="importmap">{"imports":{"#entry":"/__nuxt-og-image/_nuxt/DXObZt09.js"}}</script><link rel="stylesheet" href="/__nuxt-og-image/_nuxt/entry.BEExJd9R.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__nuxt-og-image/_nuxt/DXObZt09.js"><link rel="preload" as="font" crossorigin href="/__nuxt-og-image/fonts/HubotSans-Regular.woff2"><script type="module" src="/__nuxt-og-image/_nuxt/DXObZt09.js" crossorigin></script><script>"use strict";(()=>{const t=window,e=document.documentElement,c=["dark","light"],n=getStorageValue("localStorage","nuxt-color-mode")||"system";let i=n==="system"?u():n;const r=e.getAttribute("data-color-mode-forced");r&&(i=r),l(i),t["__NUXT_COLOR_MODE__"]={preference:n,value:i,getColorScheme:u,addColorScheme:l,removeColorScheme:d};function l(o){const s=""+o+"",a="";e.classList?e.classList.add(s):e.className+=" "+s,a&&e.setAttribute("data-"+a,o)}function d(o){const s=""+o+"",a="";e.classList?e.classList.remove(s):e.className=e.className.replace(new RegExp(s,"g"),""),a&&e.removeAttribute("data-"+a)}function f(o){return t.matchMedia("(prefers-color-scheme"+o+")")}function u(){if(t.matchMedia&&f("").media!=="not all"){for(const o of c)if(f(":"+o).matches)return o}return"light"}})();function getStorageValue(t,e){switch(t){case"localStorage":return window.localStorage.getItem(e);case"sessionStorage":return window.sessionStorage.getItem(e);case"cookie":return getCookie(e);default:return null}}function getCookie(t){const c=("; "+window.document.cookie).split("; "+t+"=");if(c.length===2)return c.pop()?.split(";").shift()}</script></head><body><div id="__nuxt" class="isolate"></div><div id="teleports"></div><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-og-image",buildId:"5205806b-8e5a-41ea-90c0-9cd83a75fc0a",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},1769156794534,false]</script></body></html>