nuxt-og-image 6.0.0 → 6.0.2

package/README.md

@@ -1,4 +1,4 @@
-<img src="https://github.com/nuxt-modules/og-image/assets/5326365/e337b490-dccb-4e58-972a-5e6e63f30986" alt="Nuxt OG Image DevTools Preview">
+<img src=".github/assets/og-image-preview.png" alt="Nuxt OG Image DevTools Preview">
 
 <h1>nuxt-og-image</h1>
 

package/dist/chunks/tw4.cjs

@@ -4,7 +4,7 @@ const promises = require('node:fs/promises');
 const exsolve = require('exsolve');
 const pathe = require('pathe');
 const cssProvider = require('./css-provider.cjs');
-const module$1 = require('../shared/nuxt-og-image.Dxgo_zuB.cjs');
+const module$1 = require('../shared/nuxt-og-image.Bo99TlIa.cjs');
 require('node:fs');
 require('@nuxt/kit');
 require('defu');

package/dist/chunks/tw4.mjs

@@ -2,7 +2,7 @@ import { readFile } from 'node:fs/promises';
 import { resolveModulePath } from 'exsolve';
 import { dirname, join } from 'pathe';
 import { extractVariantBaseClasses, resolveVariantPrefixes } from './css-provider.mjs';
-import { g as resolveVarsDeep, s as simplifyCss, p as postProcessStyles, l as loadLightningCss, e as extractCssVars, b as extractUniversalVars, c as extractPerClassVars, d as extractClassStyles } from '../shared/nuxt-og-image.BYpTHg51.mjs';
+import { g as resolveVarsDeep, s as simplifyCss, p as postProcessStyles, l as loadLightningCss, e as extractCssVars, b as extractUniversalVars, c as extractPerClassVars, d as extractClassStyles } from '../shared/nuxt-og-image.fzu6dYsO.mjs';
 import 'node:fs';
 import '@nuxt/kit';
 import 'defu';

package/dist/chunks/uno.cjs

@@ -4,7 +4,7 @@ const promises = require('node:fs/promises');
 const defu = require('defu');
 const logger_js = require('../../dist/runtime/logger.js');
 const cssProvider = require('./css-provider.cjs');
-const module$1 = require('../shared/nuxt-og-image.Dxgo_zuB.cjs');
+const module$1 = require('../shared/nuxt-og-image.Bo99TlIa.cjs');
 require('exsolve');
 require('node:fs');
 require('@nuxt/kit');

package/dist/chunks/uno.mjs

@@ -2,7 +2,7 @@ import { readFile } from 'node:fs/promises';
 import { defu } from 'defu';
 import { logger } from '../../dist/runtime/logger.js';
 import { extractVariantBaseClasses, resolveVariantPrefixes } from './css-provider.mjs';
-import { s as simplifyCss, e as extractCssVars, a as extractPropertyInitialValues, b as extractUniversalVars, c as extractPerClassVars, d as extractClassStyles, p as postProcessStyles, f as extractVarsFromCss, r as resolveExtractedVars } from '../shared/nuxt-og-image.BYpTHg51.mjs';
+import { s as simplifyCss, e as extractCssVars, a as extractPropertyInitialValues, b as extractUniversalVars, c as extractPerClassVars, d as extractClassStyles, p as postProcessStyles, f as extractVarsFromCss, r as resolveExtractedVars } from '../shared/nuxt-og-image.fzu6dYsO.mjs';
 import 'exsolve';
 import 'node:fs';
 import '@nuxt/kit';

package/dist/cli.cjs

@@ -6,7 +6,9 @@ const node_url = require('node:url');
 const p = require('@clack/prompts');
 const kit = require('@nuxt/kit');
 const nypm = require('nypm');
+const oxcWalker = require('oxc-walker');
 const pathe = require('pathe');
+const ultrahtml = require('ultrahtml');
 const fonts = require('./shared/nuxt-og-image.CMYbz66P.cjs');
 require('magicast');
 require('magicast/helpers');
@@ -32,37 +34,137 @@ const communityDir = pathe.resolve(__dirname$1, "runtime/app/components/Template
 const RE_RENDERER_SUFFIX = /\.(satori|browser|takumi)\.vue$/;
 const RE_ANY_RENDERER_SUFFIX = /\.(?:satori|browser|takumi|chromium)\.vue$/;
 const RE_CHROMIUM_SUFFIX = /\.chromium\.vue$/;
-const RE_ATTR = /:(\w+)="([^"]*)"|(\w+)="([^"]*)"|(\w+)/g;
 const RE_EXCLUDE_NODE_MODULES = /node_modules/;
 const RE_EXCLUDE_NUXT = /\.nuxt/;
 const RE_EXCLUDE_OUTPUT = /\.output/;
 const RE_EXCLUDE_DATA = /\.data/;
 const RE_EXCLUDE_DIST = /dist/;
 const RE_VUE_OR_SCRIPT = /\.(?:vue|ts|tsx|js|jsx)$/;
-const RE_OG_IMAGE_SCREENSHOT_SELF_CLOSE = /<OgImageScreenshot([^>]*?)\/>/g;
-const RE_OG_IMAGE_SCREENSHOT_OPEN_CLOSE = /<OgImageScreenshot([^>]*)>[\s\S]*?<\/OgImageScreenshot>/g;
-const RE_OG_IMAGE_SELF_CLOSE = /<OgImage(?!Screenshot)([^>]*?)\/>/g;
-const RE_OG_IMAGE_OPEN_CLOSE = /<OgImage(?!Screenshot)([^>]*)>[\s\S]*?<\/OgImage>/g;
-const RE_DEFINE_OG_IMAGE_COMPONENT = /defineOgImageComponent\s*\(/;
-const RE_DEFINE_OG_IMAGE_COMPONENT_GLOBAL = /defineOgImageComponent\s*\(/g;
-const RE_DEFINE_OG_IMAGE_CALL = /defineOgImage\s*\(\s*(\{[\s\S]*?\})\s*\)/g;
-const RE_COMPONENT_PROP = /component\s*:\s*['"]([^'"]+)['"]/;
-const RE_RENDERER_PROP = /renderer\s*:\s*['"]([^'"]+)['"]/;
-const RE_PROPS_PROP = /props\s*:\s*(\{[^}]*\})/;
-const RE_RENDERER_PROP_GLOBAL = /renderer\s*:\s*['"][^'"]+['"]\s*,?\s*/g;
-const RE_TRAILING_COMMA = /,\s*$/;
-const RE_EMPTY_BRACES = /^\{\s*\}$/;
-const RE_COMMA_NOT_IN_BRACES = /,(?![^{]*\})/;
-const RE_LINE_COMPONENT = /^component\s*:/;
-const RE_LINE_PROPS = /^props\s*:/;
-const RE_LINE_RENDERER = /^renderer\s*:/;
-const RE_IMPORT_USE_OG_IMAGE_RUNTIME_CONFIG = /import\s*\{[^}]*useOgImageRuntimeConfig[^}]*\}\s*from\s*['"]#og-image\/shared['"]/;
-const RE_IMPORT_USE_OG_IMAGE_RUNTIME_CONFIG_GLOBAL = /(import\s*\{[^}]*useOgImageRuntimeConfig[^}]*\}\s*from\s*['"])#og-image\/shared(['"])/g;
-const RE_NUXT_OG_IMAGE_UTILS_GLOBAL = /#nuxt-og-image-utils/g;
-const RE_DEFINE_OG_IMAGE_STATIC = /defineOgImageStatic\s*\(/g;
-const RE_DEFINE_OG_IMAGE_DYNAMIC = /defineOgImageDynamic\s*\(/g;
-const RE_DEFINE_OG_IMAGE_CACHED = /defineOgImageCached\s*\(/g;
-const RE_DEFINE_OG_IMAGE_WITHOUT_CACHE = /defineOgImageWithoutCache\s*\(/g;
+const DEPRECATED_COMPOSABLE_NAMES = /* @__PURE__ */ new Set([
+  "defineOgImageComponent",
+  "defineOgImageStatic",
+  "defineOgImageDynamic",
+  "defineOgImageCached",
+  "defineOgImageWithoutCache"
+]);
+const ALL_OG_IMAGE_COMPOSABLES = /* @__PURE__ */ new Set([
+  "defineOgImage",
+  ...DEPRECATED_COMPOSABLE_NAMES
+]);
+function collectScriptReplacements(code, filename) {
+  const replacements = [];
+  oxcWalker.parseAndWalk(code, filename, (node) => {
+    if (node.type === "ImportDeclaration") {
+      const source = node.source;
+      const sourceValue = source?.value;
+      if (sourceValue === "#nuxt-og-image-utils") {
+        replacements.push({ start: source.start + 1, end: source.end - 1, text: "#og-image/shared" });
+      } else if (sourceValue === "#og-image/shared") {
+        const specifiers = node.specifiers || [];
+        const hasRuntimeConfig = specifiers.some((s) => {
+          const imported = s.imported || s.local;
+          return imported?.name === "useOgImageRuntimeConfig";
+        });
+        if (hasRuntimeConfig) {
+          replacements.push({ start: source.start + 1, end: source.end - 1, text: "#og-image/app/utils" });
+        }
+      }
+      return;
+    }
+    if (node.type !== "CallExpression")
+      return;
+    const callee = node.callee;
+    const calleeName = callee?.name;
+    if (!calleeName || !ALL_OG_IMAGE_COMPOSABLES.has(calleeName))
+      return;
+    const args2 = node.arguments || [];
+    if (args2.length === 1 && args2[0]?.type === "ObjectExpression") {
+      const objArg = args2[0];
+      const properties = (objArg.properties || []).filter(
+        (p2) => p2.type === "ObjectProperty" || p2.type === "Property"
+      );
+      const findProp = (name) => properties.find(
+        (p2) => p2.key?.name === name
+      );
+      const urlProp = findProp("url");
+      const componentProp = findProp("component");
+      const rendererProp = findProp("renderer");
+      const propsProp = findProp("props");
+      if (urlProp) {
+        const urlValue = code.slice(urlProp.value.start, urlProp.value.end);
+        const ogPropMap = {
+          width: "ogImageWidth",
+          height: "ogImageHeight",
+          alt: "ogImageAlt",
+          type: "ogImageType"
+        };
+        const seoMetaProps = [`ogImage: ${urlValue}`];
+        for (const prop of properties) {
+          if (prop === urlProp)
+            continue;
+          const keyName = prop.key?.name;
+          const mappedName = ogPropMap[keyName];
+          if (mappedName) {
+            seoMetaProps.push(`${mappedName}: ${code.slice(prop.value.start, prop.value.end)}`);
+          }
+        }
+        const text = `useSeoMeta({ ${seoMetaProps.join(", ")} })`;
+        replacements.push({ start: node.start, end: node.end, text });
+        return;
+      }
+      if (!componentProp && rendererProp) {
+        const rendererValue = code.slice(rendererProp.value.start, rendererProp.value.end).trim();
+        if (rendererValue === "'chromium'" || rendererValue === '"chromium"') {
+          const otherProps = properties.filter((p2) => p2 !== rendererProp);
+          const text = otherProps.length > 0 ? `defineOgImageScreenshot({ ${otherProps.map((p2) => code.slice(p2.start, p2.end)).join(", ")} })` : `defineOgImageScreenshot()`;
+          replacements.push({ start: node.start, end: node.end, text });
+          return;
+        }
+      }
+      if (componentProp || rendererProp) {
+        const componentName = componentProp ? code.slice(componentProp.value.start, componentProp.value.end) : "'NuxtSeo'";
+        const propsValue = propsProp ? code.slice(propsProp.value.start, propsProp.value.end) : "{}";
+        const otherProps = properties.filter(
+          (p2) => p2 !== componentProp && p2 !== rendererProp && p2 !== propsProp
+        );
+        const text = otherProps.length > 0 ? `defineOgImage(${componentName}, ${propsValue}, { ${otherProps.map((p2) => code.slice(p2.start, p2.end)).join(", ")} })` : `defineOgImage(${componentName}, ${propsValue})`;
+        replacements.push({ start: node.start, end: node.end, text });
+        return;
+      }
+    }
+    if (DEPRECATED_COMPOSABLE_NAMES.has(calleeName)) {
+      replacements.push({ start: callee.start, end: callee.end, text: "defineOgImage" });
+    }
+  });
+  return replacements;
+}
+function parseSfcBlocks(code) {
+  const scripts = [];
+  let template = null;
+  const ast = ultrahtml.parse(code);
+  ultrahtml.walkSync(ast, (node) => {
+    if (node.type !== ultrahtml.ELEMENT_NODE || !("name" in node))
+      return;
+    const el = node;
+    if (el.name === "script" && el.loc) {
+      const start = el.loc[0].end;
+      const end = el.loc[1].start;
+      scripts.push({ content: code.slice(start, end), offset: start });
+    } else if (el.name === "template" && el.loc) {
+      const start = el.loc[0].end;
+      const end = el.loc[1].start;
+      template = { content: code.slice(start, end), offset: start };
+    }
+  });
+  return { scripts, template };
+}
+function applyReplacements(code, replacements) {
+  const sorted = replacements.toSorted((a, b) => b.start - a.start);
+  for (const r of sorted) {
+    code = code.slice(0, r.start) + r.text + code.slice(r.end);
+  }
+  return code;
+}
 const defaultComponentDirs = ["OgImage", "OgImageCommunity", "og-image", "OgImageTemplate"];
 const RENDERERS = [
   {
@@ -325,20 +427,38 @@ async function checkMigrationNeeded(rootDir) {
   result.usedCommunityTemplates = detectCommunityTemplateUsage(rootDir);
   return result;
 }
-function attrsToProps(attrs) {
-  if (!attrs)
-    return "";
+function attrsToProps(attributes) {
   const props = [];
-  for (const m of attrs.matchAll(RE_ATTR)) {
-    if (m[1])
-      props.push(`${m[1]}: ${m[2]}`);
-    else if (m[3])
-      props.push(`${m[3]}: '${m[4]}'`);
-    else if (m[5])
-      props.push(`${m[5]}: true`);
+  for (const [key, value] of Object.entries(attributes)) {
+    if (key.startsWith(":")) {
+      props.push(`${key.slice(1)}: ${value}`);
+    } else if (value === "") {
+      props.push(`${key}: true`);
+    } else {
+      props.push(`${key}: '${value}'`);
+    }
   }
   return props.length ? `{ ${props.join(", ")} }` : "";
 }
+function collectTemplateReplacements(templateHtml) {
+  const replacements = [];
+  const ast = ultrahtml.parse(templateHtml);
+  ultrahtml.walkSync(ast, (node) => {
+    if (node.type !== ultrahtml.ELEMENT_NODE || !("name" in node))
+      return;
+    const el = node;
+    if (el.name !== "OgImage" && el.name !== "OgImageScreenshot")
+      return;
+    const isScreenshot = el.name === "OgImageScreenshot";
+    const composable = isScreenshot ? "defineOgImageScreenshot" : "defineOgImage";
+    const propsStr = attrsToProps(el.attributes);
+    const start = el.loc[0].start;
+    const end = el.loc[1].end;
+    const text = propsStr ? `<!-- Migrated: use ${composable}(${propsStr}) in <script setup> -->` : `<!-- Migrated: use ${composable}() in <script setup> -->`;
+    replacements.push({ start, end, text });
+  });
+  return replacements;
+}
 function migrateDefineOgImageApi(dryRun) {
   const cwd = process.cwd();
   const excludePatterns = [RE_EXCLUDE_NODE_MODULES, RE_EXCLUDE_NUXT, RE_EXCLUDE_OUTPUT, RE_EXCLUDE_DATA, RE_EXCLUDE_DIST];
@@ -346,97 +466,45 @@ function migrateDefineOgImageApi(dryRun) {
   const changes = [];
   for (const file of files) {
     let content = fs.readFileSync(file, "utf-8");
+    if (!content.includes("defineOgImage") && !content.includes("OgImage") && !content.includes("#nuxt-og-image-utils") && !content.includes("useOgImageRuntimeConfig")) {
+      continue;
+    }
     let modified = false;
     let changeCount = 0;
-    content = content.replace(RE_OG_IMAGE_SCREENSHOT_SELF_CLOSE, (_match, attrs) => {
-      modified = true;
-      changeCount++;
-      const propsStr = attrsToProps(attrs.trim());
-      return propsStr ? `<!-- Migrated: use defineOgImageScreenshot(${propsStr}) in <script setup> -->` : `<!-- Migrated: use defineOgImageScreenshot() in <script setup> -->`;
-    });
-    content = content.replace(RE_OG_IMAGE_SCREENSHOT_OPEN_CLOSE, (_match, attrs) => {
-      modified = true;
-      changeCount++;
-      const propsStr = attrsToProps(attrs.trim());
-      return propsStr ? `<!-- Migrated: use defineOgImageScreenshot(${propsStr}) in <script setup> -->` : `<!-- Migrated: use defineOgImageScreenshot() in <script setup> -->`;
-    });
-    content = content.replace(RE_OG_IMAGE_SELF_CLOSE, (_match, attrs) => {
-      modified = true;
-      changeCount++;
-      const propsStr = attrsToProps(attrs.trim());
-      return propsStr ? `<!-- Migrated: use defineOgImage(${propsStr}) in <script setup> -->` : `<!-- Migrated: use defineOgImage() in <script setup> -->`;
-    });
-    content = content.replace(RE_OG_IMAGE_OPEN_CLOSE, (_match, attrs) => {
-      modified = true;
-      changeCount++;
-      const propsStr = attrsToProps(attrs.trim());
-      return propsStr ? `<!-- Migrated: use defineOgImage(${propsStr}) in <script setup> -->` : `<!-- Migrated: use defineOgImage() in <script setup> -->`;
-    });
-    if (RE_DEFINE_OG_IMAGE_COMPONENT.test(content)) {
-      content = content.replace(RE_DEFINE_OG_IMAGE_COMPONENT_GLOBAL, "defineOgImage(");
-      modified = true;
-      changeCount++;
-    }
-    for (const [re] of [
-      [RE_DEFINE_OG_IMAGE_STATIC],
-      [RE_DEFINE_OG_IMAGE_DYNAMIC],
-      [RE_DEFINE_OG_IMAGE_CACHED],
-      [RE_DEFINE_OG_IMAGE_WITHOUT_CACHE]
-    ]) {
-      if (re.test(content)) {
-        re.lastIndex = 0;
-        content = content.replace(re, "defineOgImage(");
-        modified = true;
-        changeCount++;
+    if (file.endsWith(".vue")) {
+      const { scripts, template } = parseSfcBlocks(content);
+      if (template && content.includes("OgImage")) {
+        const replacements = collectTemplateReplacements(template.content);
+        if (replacements.length > 0) {
+          const adjusted = replacements.map((r) => ({
+            start: r.start + template.offset,
+            end: r.end + template.offset,
+            text: r.text
+          }));
+          content = applyReplacements(content, adjusted);
+          modified = true;
+          changeCount += replacements.length;
+        }
       }
-    }
-    content = content.replace(RE_DEFINE_OG_IMAGE_CALL, (match, inner) => {
-      const componentMatch = inner.match(RE_COMPONENT_PROP);
-      const rendererMatch = inner.match(RE_RENDERER_PROP);
-      const propsMatch = inner.match(RE_PROPS_PROP);
-      if (!componentMatch && rendererMatch && rendererMatch[1] === "chromium") {
-        const remaining = inner.replace(RE_RENDERER_PROP_GLOBAL, "").replace(RE_TRAILING_COMMA, "").replace(RE_EMPTY_BRACES, "").trim();
+      const allReplacements = [];
+      for (const script of scripts) {
+        const replacements = collectScriptReplacements(script.content, file);
+        for (const r of replacements) {
+          allReplacements.push({ start: r.start + script.offset, end: r.end + script.offset, text: r.text });
+        }
+      }
+      if (allReplacements.length > 0) {
+        content = applyReplacements(content, allReplacements);
         modified = true;
-        changeCount++;
-        return remaining ? `defineOgImageScreenshot(${remaining})` : `defineOgImageScreenshot()`;
+        changeCount += allReplacements.length;
       }
-      if (componentMatch || rendererMatch) {
-        const componentName = componentMatch ? componentMatch[1] : "NuxtSeo";
-        const props = propsMatch ? propsMatch[1] : "{}";
-        const otherOptions = [];
-        const lines = inner.split(RE_COMMA_NOT_IN_BRACES).map((s) => s.trim());
-        for (const line of lines) {
-          if (!line)
-            continue;
-          if (RE_LINE_COMPONENT.test(line))
-            continue;
-          if (RE_LINE_PROPS.test(line))
-            continue;
-          if (RE_LINE_RENDERER.test(line))
-            continue;
-          otherOptions.push(line);
-        }
+    } else {
+      const replacements = collectScriptReplacements(content, file);
+      if (replacements.length > 0) {
+        content = applyReplacements(content, replacements);
         modified = true;
-        changeCount++;
-        if (otherOptions.length > 0) {
-          return `defineOgImage('${componentName}', ${props}, { ${otherOptions.join(", ")} })`;
-        }
-        return `defineOgImage('${componentName}', ${props})`;
+        changeCount += replacements.length;
       }
-      return match;
-    });
-    if (content.includes("#nuxt-og-image-utils")) {
-      content = content.replace(RE_NUXT_OG_IMAGE_UTILS_GLOBAL, "#og-image/shared");
-      modified = true;
-      changeCount++;
-    }
-    if (RE_IMPORT_USE_OG_IMAGE_RUNTIME_CONFIG.test(content)) {
-      content = content.replace(
-        RE_IMPORT_USE_OG_IMAGE_RUNTIME_CONFIG_GLOBAL,
-        "$1#og-image/app/utils$2"
-      );
-      modified = true;
-      changeCount++;
     }
     if (modified) {
       changes.push({ file, count: changeCount });
@@ -548,6 +616,7 @@ async function runMigrate(args2) {
   }
   tasks.push("Migrate deprecated composables (defineOgImageStatic, etc.) to defineOgImage()");
   tasks.push("Migrate <OgImage> and <OgImageScreenshot> components to composables");
+  tasks.push("Migrate defineOgImage({ url }) to useSeoMeta({ ogImage })");
   tasks.push("Update defineOgImage() calls to new API");
   p__namespace.note(tasks.map((t) => `\u2022 ${t}`).join("\n"), "Migration tasks");
   if (dryRun) {