Merge pull request #24 from magne4000/og

fix: wasm import

examples/demo/endpoints/og.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ImageResponse } from '@vercel/og';
+
+import type { VercelRequest, VercelResponse } from '@vercel/node';
+
+export default async function handler(
+  request: VercelRequest,
+  response: VercelResponse,
+) {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: 40,
+          color: 'black',
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          padding: '50px 200px',
+          textAlign: 'center',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        👋 Hello
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+    },
+  );
+}

examples/demo/package.json

@@ -22,6 +22,7 @@
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@vercel/edge-config": "^0.2.1",
+    "@vercel/og": "^0.5.17",
     "@vite-plugin-vercel/vike": "workspace:*",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "cross-fetch": "^4.0.0",

examples/demo/renderer/PageShell.tsx

@@ -27,6 +27,7 @@ function PageShell({
             <Link href="/catch-all/a/b/c">Catch-all</Link>
             <Link href="/function/a">Function</Link>
             <Link href="/edge">Edge Function endpoint</Link>
+            <Link href="/og">Edge OG endpoint</Link>
           </Sidebar>
           <Content>{children}</Content>
         </Layout>

examples/demo/tests/05-vite-plugin-ssr/config.test.ts

@@ -24,6 +24,11 @@ prepareTestJsonFileContent('config.json', (context) => {
         dest: '/edge/$1',
         check: true,
       },
+      {
+        src: '^/og(?:/((?:[^/]+?)(?:/(?:[^/]+?))*))?$',
+        dest: '/og/$1',
+        check: true,
+      },
       {
         check: true,
         src: '^/api/page$',

examples/demo/tests/05-vite-plugin-ssr/fs.test.ts

@@ -23,6 +23,11 @@ describe('fs', function () {
     '/functions/api/post.func/.vc-config.json',
     '/functions/edge.func/index.js',
     '/functions/edge.func/.vc-config.json',
+    '/functions/og.func/index.js',
+    '/functions/og.func/.vc-config.json',
+    new RegExp('/functions/og.func/.*.ttf'),
+    '/functions/og.func/resvg.wasm',
+    '/functions/og.func/yoga.wasm',
     '/static/vite-plugin-ssr.json',
     '/static/manifest.json',
     // ISR + Static pages

examples/demo/vite.config.ts

@@ -20,6 +20,12 @@ export default {
         edge: true,
         addRoute: true,
       },
+      {
+        source: 'endpoints/og.tsx',
+        destination: `og`,
+        edge: true,
+        addRoute: true,
+      },
     ],
   },
   // We manually add a list of dependencies to be pre-bundled, in order to avoid a page reload at dev start which breaks vite-plugin-ssr's CI

packages/vercel/src/build.ts

@@ -1,12 +1,12 @@
 import { ResolvedConfig } from 'vite';
 import glob from 'fast-glob';
-import path from 'path';
+import path, { basename, dirname } from 'path';
 import { getOutput, getRoot, pathRelativeTo } from './utils';
-import { build, BuildOptions } from 'esbuild';
+import { build, BuildOptions, type Plugin } from 'esbuild';
 import { ViteVercelApiEntry } from './types';
 import { assert } from './assert';
 import { vercelOutputVcConfigSchema } from './schemas/config/vc-config';
-import fs from 'fs/promises';
+import fs, { copyFile } from 'fs/promises';
 import type { Rewrite } from '@vercel/routing-utils';
 
 export function getAdditionalEndpoints(resolvedConfig: ResolvedConfig) {
@@ -57,13 +57,43 @@ export function getEntries(
   }, getAdditionalEndpoints(resolvedConfig));
 }
 
+const wasmPlugin: Plugin = {
+  name: 'wasm',
+  setup(build) {
+    build.onResolve({ filter: /\.wasm/ }, (args) => {
+      return {
+        path: args.path.replace(/\.wasm\?module$/i, '.wasm'),
+        external: true,
+      };
+    });
+  },
+};
+
+const vercelOgPlugin = (ctx: { found: boolean; index: string }): Plugin => {
+  return {
+    name: 'vercel-og',
+    setup(build) {
+      build.onResolve({ filter: /@vercel\/og/ }, () => {
+        ctx.found = true;
+        return undefined;
+      });
+
+      build.onLoad({ filter: /@vercel\/og/ }, (args) => {
+        ctx.index = args.path;
+        return undefined;
+      });
+    },
+  };
+};
+
 const standardBuildOptions: BuildOptions = {
   bundle: true,
   target: 'es2020',
   format: 'cjs',
   platform: 'node',
   logLevel: 'info',
   minify: true,
+  plugins: [wasmPlugin],
 };
 
 export async function buildFn(
@@ -114,9 +144,33 @@ export async function buildFn(
       'import',
       'require',
     ];
+    options.format = 'esm';
   }
 
+  const ctx = { found: false, index: '' };
+  options.plugins!.push(vercelOgPlugin(ctx));
+
   await build(options);
+
+  // Special case for @vercel/og
+  // See https://github.com/magne4000/vite-plugin-vercel/issues/23
+  // and https://github.com/magne4000/vite-plugin-vercel/issues/25
+  if (ctx.found && ctx.index) {
+    const dir = dirname(ctx.index);
+    const externalFiles = await glob(`${dir}/*.{ttf,wasm}`);
+
+    for (const f of externalFiles) {
+      await copyFile(
+        f,
+        path.join(
+          getOutput(resolvedConfig, 'functions'),
+          entry.destination,
+          basename(f),
+        ),
+      );
+    }
+  }
+
   await writeVcConfig(resolvedConfig, entry.destination, Boolean(entry.edge));
 }
 

packages/vercel/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es2020",
-    "lib": ["ES2020"],
+    "target": "ES2021",
+    "lib": ["es2021", "dom"],
     "module": "ESNext",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,