nuxt-og-image 0.4.0 → 0.4.3

package/README.md

@@ -39,11 +39,23 @@ Generate dynamic social share images for you Nuxt v3 app.
 
 ```bash
 npm install --save-dev nuxt-og-image
-
 # Using yarn
 yarn add --dev nuxt-og-image
 ```
 
+### Chromium Dependency
+
+By default, this module does not install chromium binaries for you, instead relying on locally
+installed chrome.
+
+If you want to use this module in a CI or SSR environment, you will need the binaries.
+
+You can either use `puppeteer` or `chrome-aws-lambda`.
+
+```bash
+npm install --save-dev puppeteer # or chrome-aws-lambda
+```
+
 ## Setup
 
 _nuxt.config.ts_

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "0.4.0"
+  "version": "0.4.3"
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { mkdir, writeFile, readFile, rm } from 'node:fs/promises';
+import { readFile, writeFile, rm, mkdir } from 'node:fs/promises';
 import { defineNuxtModule, createResolver, addTemplate, getNuxtVersion, addServerHandler, addImports, addComponent } from '@nuxt/kit';
 import { execa } from 'execa';
 import { hash } from 'ohash';
@@ -10,15 +10,38 @@ import fg from 'fast-glob';
 import { join } from 'pathe';
 
 async function createBrowser() {
-  if (!process.env.AWS_LAMBDA_FUNCTION_NAME)
-    process.env.AWS_LAMBDA_FUNCTION_NAME = "test";
-  const playwright = await import('playwright-core');
-  const awsChrome = await import('chrome-aws-lambda');
-  return await playwright.chromium.launch({
-    args: awsChrome.args,
-    executablePath: await awsChrome.executablePath,
-    headless: awsChrome.headless
-  });
+  try {
+    const playwrightCore = await import('playwright-core');
+    process.env.AWS_LAMBDA_FUNCTION_NAME = process.env.AWS_LAMBDA_FUNCTION_NAME || "RUNTIME_HACK";
+    const awsChrome = await import(String("chrome-aws-lambda"));
+    return await playwrightCore.chromium.launch({
+      args: awsChrome.args,
+      executablePath: await awsChrome.executablePath,
+      headless: awsChrome.headless
+    });
+  } catch (e) {
+  }
+  try {
+    const playwrightCore = await import('playwright-core');
+    const { Launcher } = await import('chrome-launcher');
+    const chromePath = Launcher.getFirstInstallation();
+    return await playwrightCore.chromium.launch({
+      headless: true,
+      executablePath: chromePath
+    });
+  } catch (e) {
+  }
+  try {
+    const playwright = await import(String("playwright"));
+    return await playwright.chromium.launch({
+      headless: true
+    });
+  } catch (e) {
+    throw new Error(`
+      Missing chromium binary. You need either 'playwright' or 'chrome-aws-lambda'.
+      Please run 'yarn add --dev playwright' or 'npm install --save-dev playwright'
+    `);
+  }
 }
 async function screenshot(browser, url, options) {
   const page = await browser.newPage({
@@ -131,6 +154,7 @@ declare module 'nitropack' {
     });
     nuxt.hooks.hook("nitro:init", async (nitro) => {
       let entries = [];
+      let cleanupEntries = [];
       const _routeRulesMatcher = toRouteMatcher(
         createRouter({ routes: nitro.options.routeRules })
       );
@@ -184,22 +208,24 @@ declare module 'nitropack' {
             });
           })).trim();
           browser = await createBrowser();
-          nitro.logger.info(`Generating ${entries.length} og:images...`);
-          for (const k in entries) {
-            const entry = entries[k];
-            const start = Date.now();
-            let hasError = false;
-            try {
-              const imgBuffer = await screenshot(browser, `${host}${entry.screenshotPath}`, config);
-              await writeFile(entry.outputPath, imgBuffer);
-            } catch (e) {
-              hasError = true;
-              console.error(e);
+          if (browser) {
+            nitro.logger.info(`Generating ${entries.length} og:images...`);
+            for (const k in entries) {
+              const entry = entries[k];
+              const start = Date.now();
+              let hasError = false;
+              try {
+                const imgBuffer = await screenshot(browser, `${host}${entry.screenshotPath}`, config);
+                await writeFile(entry.outputPath, imgBuffer);
+              } catch (e) {
+                hasError = true;
+                console.error(e);
+              }
+              const generateTimeMS = Date.now() - start;
+              nitro.logger.log(chalk[hasError ? "red" : "gray"](
+                `  ${Number(k) === entries.length - 1 ? "\u2514\u2500" : "\u251C\u2500"} /${config.outputDir}/${entry.fileName} (${generateTimeMS}ms) ${Math.round(Number(k) / (entries.length - 1) * 100)}%`
+              ));
             }
-            const generateTimeMS = Date.now() - start;
-            nitro.logger.log(chalk[hasError ? "red" : "gray"](
-              `  ${Number(k) === entries.length - 1 ? "\u2514\u2500" : "\u251C\u2500"} /${config.outputDir}/${entry.fileName} (${generateTimeMS}ms) ${Math.round(Number(k) / (entries.length - 1) * 100)}%`
-            ));
           }
         } catch (e) {
           console.error(e);
@@ -207,16 +233,7 @@ declare module 'nitropack' {
           await browser?.close();
           previewProcess.kill();
         }
-        for (const entry of entries) {
-          const html = await readFile(entry.linkingHtml, "utf-8");
-          const newHtml = html.replace(new RegExp(`<link id="${LinkPrerenderId}" rel="prerender" href="(.*?)">`), "").replace(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.*?)<\/script>`), "").replace("\n\n", "\n");
-          if (html !== newHtml) {
-            await writeFile(entry.linkingHtml, newHtml, { encoding: "utf-8" });
-          }
-        }
-        const ogImageFolders = await fg([`**/${HtmlRendererRoute}`], { cwd: nitro.options.output.publicDir, onlyDirectories: true });
-        for (const ogImageFolder of ogImageFolders)
-          await rm(join(nitro.options.output.publicDir, ogImageFolder), { recursive: true, force: true });
+        cleanupEntries = [...entries];
         entries = [];
       };
       nitro.hooks.hook("rollup:before", async () => {
@@ -224,6 +241,20 @@ declare module 'nitropack' {
       });
       nitro.hooks.hook("close", async () => {
         await outputOgImages();
+        for (const entry of cleanupEntries) {
+          try {
+            const html = await readFile(entry.linkingHtml, "utf-8");
+            const newHtml = html.replace(new RegExp(`<link id="${LinkPrerenderId}" rel="prerender" href="(.*?)">`), "").replace(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.*?)<\/script>`), "").replace("\n\n", "\n");
+            if (html !== newHtml) {
+              await writeFile(entry.linkingHtml, newHtml, { encoding: "utf-8" });
+            }
+          } catch (e) {
+            console.error(e);
+          }
+        }
+        const ogImageFolders = await fg([`**/${HtmlRendererRoute}`], { cwd: nitro.options.output.publicDir, onlyDirectories: true });
+        for (const ogImageFolder of ogImageFolders)
+          await rm(join(nitro.options.output.publicDir, ogImageFolder), { recursive: true, force: true });
       });
     });
   }

package/dist/runtime/browserService.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="node" />
 import type { Browser } from 'playwright-core';
 import type { ScreenshotOptions } from '../types';
-export declare function createBrowser(): Promise<Browser>;
+export declare function createBrowser(): Promise<any>;
 export declare function screenshot(browser: Browser, url: string, options: ScreenshotOptions): Promise<Buffer>;

package/dist/runtime/browserService.mjs

@@ -1,13 +1,36 @@
 export async function createBrowser() {
-  if (!process.env.AWS_LAMBDA_FUNCTION_NAME)
-    process.env.AWS_LAMBDA_FUNCTION_NAME = "test";
-  const playwright = await import("playwright-core");
-  const awsChrome = await import("chrome-aws-lambda");
-  return await playwright.chromium.launch({
-    args: awsChrome.args,
-    executablePath: await awsChrome.executablePath,
-    headless: awsChrome.headless
-  });
+  try {
+    const playwrightCore = await import("playwright-core");
+    process.env.AWS_LAMBDA_FUNCTION_NAME = process.env.AWS_LAMBDA_FUNCTION_NAME || "RUNTIME_HACK";
+    const awsChrome = await import(String("chrome-aws-lambda"));
+    return await playwrightCore.chromium.launch({
+      args: awsChrome.args,
+      executablePath: await awsChrome.executablePath,
+      headless: awsChrome.headless
+    });
+  } catch (e) {
+  }
+  try {
+    const playwrightCore = await import("playwright-core");
+    const { Launcher } = await import("chrome-launcher");
+    const chromePath = Launcher.getFirstInstallation();
+    return await playwrightCore.chromium.launch({
+      headless: true,
+      executablePath: chromePath
+    });
+  } catch (e) {
+  }
+  try {
+    const playwright = await import(String("playwright"));
+    return await playwright.chromium.launch({
+      headless: true
+    });
+  } catch (e) {
+    throw new Error(`
+      Missing chromium binary. You need either 'playwright' or 'chrome-aws-lambda'.
+      Please run 'yarn add --dev playwright' or 'npm install --save-dev playwright'
+    `);
+  }
 }
 export async function screenshot(browser, url, options) {
   const page = await browser.newPage({

package/dist/runtime/nitro/image.mjs

@@ -1,10 +1,10 @@
 import { defineEventHandler, getRequestHeader, setHeader } from "h3";
 import { createBrowser, screenshot } from "../browserService.mjs";
-import { HtmlRendererRoute, RuntimeImageSuffix } from "#nuxt-og-image/constants";
+import { DefaultRuntimeImageSuffix, HtmlRendererRoute } from "#nuxt-og-image/constants";
 export default defineEventHandler(async (e) => {
-  if (!e.path?.endsWith(RuntimeImageSuffix))
+  if (!e.path?.endsWith(DefaultRuntimeImageSuffix))
     return;
-  const path = e.path.replace(RuntimeImageSuffix, HtmlRendererRoute);
+  const path = e.path.replace(DefaultRuntimeImageSuffix, HtmlRendererRoute);
   const host = getRequestHeader(e, "host") || "localhost:3000";
   const browser = await createBrowser();
   setHeader(e, "Content-Type", "image/png");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.4.3",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -28,7 +28,7 @@
   "dependencies": {
     "@nuxt/kit": "3.0.0",
     "chalk": "^5.2.0",
-    "chrome-aws-lambda": "^10.1.0",
+    "chrome-launcher": "^0.15.1",
     "defu": "^6.1.1",
     "execa": "^6.1.0",
     "fast-glob": "^3.2.12",