@astrojs/cloudflare 10.2.5 → 10.3.0

package/dist/index.d.ts

@@ -43,9 +43,14 @@ export type Options = {
         };
     };
     /**
-     * Allow bundling cloudflare worker specific file types
-     * https://developers.cloudflare.com/workers/wrangler/bundling/
+     * Allow bundling cloudflare worker specific file types as importable modules. Defaults to true.
+     * When enabled, allows imports of '.wasm', '.bin', and '.txt' file types
+     *
+     * See https://developers.cloudflare.com/pages/functions/module-support/
+     * for reference on how these file types are exported
      */
+    cloudflareModules?: boolean;
+    /** @deprecated - use `cloudflareModules`, which defaults to true. You can set `cloudflareModuleLoading: false` to disable */
     wasmModuleImports?: boolean;
 };
 export default function createIntegration(args?: Options): AstroIntegration;

package/dist/index.js

@@ -7,14 +7,14 @@ import { AstroError } from 'astro/errors';
 import { walk } from 'estree-walker';
 import MagicString from 'magic-string';
 import { getPlatformProxy } from 'wrangler';
+import { cloudflareModuleLoader, } from './utils/cloudflare-module-loader.js';
 import { createRoutesFile, getParts } from './utils/generate-routes-json.js';
 import { setImageConfig } from './utils/image-config.js';
 import { mutateDynamicPageImportsInPlace, mutatePageMapInPlace } from './utils/index.js';
 import { NonServerChunkDetector } from './utils/non-server-chunk-detector.js';
-import { cloudflareModuleLoader } from './utils/wasm-module-loader.js';
 export default function createIntegration(args) {
     let _config;
-    const cloudflareModulePlugin = cloudflareModuleLoader(args?.wasmModuleImports ?? false);
+    const cloudflareModulePlugin = cloudflareModuleLoader(args?.cloudflareModules ?? args?.wasmModuleImports ?? true);
     // Initialize the unused chunk analyzer as a shared state between hooks.
     // The analyzer is used on earlier hooks to collect information about used hooks on a Vite plugin
     // and then later after the full build to clean up unused chunks, so it has to be shared between them.
@@ -175,6 +175,20 @@ export default function createIntegration(args) {
                     // @ts-expect-error
                     vite.build.rollupOptions.output.banner ||=
                         'globalThis.process ??= {}; globalThis.process.env ??= {};';
+                    // @ts-expect-error
+                    vite.build.rollupOptions.output.manualChunks = (id) => {
+                        if (id.includes('node_modules')) {
+                            if (id.indexOf('node_modules') !== -1) {
+                                const basic = id.toString().split('node_modules/')[1];
+                                const sub1 = basic.split('/')[0];
+                                if (sub1 !== '.pnpm') {
+                                    return sub1.toString();
+                                }
+                                const name2 = basic.split('/')[1];
+                                return name2.split('@')[name2[0] === '@' ? 1 : 0].toString();
+                            }
+                        }
+                    };
                     vite.build.rollupOptions.external = _config.vite.build?.rollupOptions?.external ?? [];
                     // Cloudflare env is only available per request. This isn't feasible for code that access env vars
                     // in a global way, so we shim their access as `process.env.*`. This is not the recommended way for users to access environment variables. But we'll add this for compatibility for chosen variables. Mainly to support `@astrojs/db`
@@ -191,6 +205,11 @@ export default function createIntegration(args) {
                     vite.resolve ||= {};
                     vite.resolve.conditions ||= [];
                     vite.resolve.conditions = vite.resolve.conditions.filter((c) => c !== 'workerd' && c !== 'worker');
+                    vite.build ||= {};
+                    vite.build.rollupOptions ||= {};
+                    vite.build.rollupOptions.output ||= {};
+                    // @ts-expect-error
+                    vite.build.rollupOptions.output.manualChunks = undefined;
                 }
             },
             'astro:build:done': async ({ pages, routes, dir, logger }) => {

package/dist/utils/cloudflare-module-loader.d.ts

@@ -0,0 +1,21 @@
+import type { AstroConfig } from 'astro';
+import type { PluginOption } from 'vite';
+export interface CloudflareModulePluginExtra {
+    afterBuildCompleted(config: AstroConfig): Promise<void>;
+}
+export type ModuleType = 'CompiledWasm' | 'Text' | 'Data';
+/**
+ * Enables support for various non-standard extensions in module imports that cloudflare workers supports.
+ *
+ * See https://developers.cloudflare.com/pages/functions/module-support/ for reference
+ *
+ * This adds supports for imports in the following formats:
+ * - .wasm
+ * - .wasm?module
+ * - .bin
+ * - .txt
+ *
+ * @param enabled - if true, will load all cloudflare pages supported types
+ * @returns Vite plugin with additional extension method to hook into astro build
+ */
+export declare function cloudflareModuleLoader(enabled: boolean): PluginOption & CloudflareModulePluginExtra;

package/dist/utils/{wasm-module-loader.js → cloudflare-module-loader.js}

@@ -2,21 +2,32 @@ import * as fs from 'node:fs/promises';
 import * as path from 'node:path';
 import * as url from 'node:url';
 /**
- * Enables support for wasm modules within cloudflare pages functions
+ * Enables support for various non-standard extensions in module imports that cloudflare workers supports.
  *
- * Loads '*.wasm?module' and `*.wasm` imports as WebAssembly modules, which is the only way to load WASM in cloudflare workers.
- * Current proposal for WASM modules: https://github.com/WebAssembly/esm-integration/tree/main/proposals/esm-integration
- * Cloudflare worker WASM from javascript support: https://developers.cloudflare.com/workers/runtime-apis/webassembly/javascript/
- * @param enabled - if true, load '.wasm' imports as Uint8Arrays, otherwise will throw errors when encountered to clarify that it must be enabled
- * @returns Vite plugin to load WASM tagged with '?module' as a WASM modules
+ * See https://developers.cloudflare.com/pages/functions/module-support/ for reference
+ *
+ * This adds supports for imports in the following formats:
+ * - .wasm
+ * - .wasm?module
+ * - .bin
+ * - .txt
+ *
+ * @param enabled - if true, will load all cloudflare pages supported types
+ * @returns Vite plugin with additional extension method to hook into astro build
  */
 export function cloudflareModuleLoader(enabled) {
-    const enabledAdapters = cloudflareImportAdapters.filter((x) => enabled);
+    /**
+     * It's likely that eventually cloudflare will add support for custom extensions, like they do in vanilla cloudflare workers,
+     * by adding rules to your wrangler.tome
+     * https://developers.cloudflare.com/workers/wrangler/bundling/
+     */
+    const adaptersByExtension = enabled ? { ...defaultAdapters } : {};
+    const extensions = Object.keys(adaptersByExtension);
     let isDev = false;
     const MAGIC_STRING = '__CLOUDFLARE_ASSET__';
     const replacements = [];
     return {
-        name: 'vite:wasm-module-loader',
+        name: 'vite:cf-module-loader',
         enforce: 'pre',
         configResolved(config) {
             isDev = config.command === 'serve';
@@ -24,27 +35,30 @@ export function cloudflareModuleLoader(enabled) {
         config(_, __) {
             // let vite know that file format and the magic import string is intentional, and will be handled in this plugin
             return {
-                assetsInclude: enabledAdapters.map((x) => `**/*.${x.qualifiedExtension}`),
+                assetsInclude: extensions.map((x) => `**/*${x}`),
                 build: {
                     rollupOptions: {
                         // mark the wasm files as external so that they are not bundled and instead are loaded from the files
-                        external: enabledAdapters.map((x) => new RegExp(`^${MAGIC_STRING}.+\\.${x.extension}.mjs$`, 'i')),
+                        external: extensions.map((x) => new RegExp(`^${MAGIC_STRING}.+${escapeRegExp(x)}.mjs$`, 'i')),
                     },
                 },
             };
         },
         async load(id, _) {
-            const importAdapter = cloudflareImportAdapters.find((x) => id.endsWith(x.qualifiedExtension));
-            if (!importAdapter) {
+            const maybeExtension = extensions.find((x) => id.endsWith(x));
+            const moduleType = (maybeExtension && adaptersByExtension[maybeExtension]) || undefined;
+            if (!moduleType || !maybeExtension) {
                 return;
             }
             if (!enabled) {
-                throw new Error(`Cloudflare module loading is experimental. The ${importAdapter.qualifiedExtension} module cannot be loaded unless you add \`wasmModuleImports: true\` to your astro config.`);
+                throw new Error(`Cloudflare module loading is experimental. The ${maybeExtension} module cannot be loaded unless you add \`wasmModuleImports: true\` to your astro config.`);
             }
-            const filePath = id.replace(/\?module$/, '');
+            const moduleLoader = renderers[moduleType];
+            const filePath = id.replace(/\?\w+$/, '');
+            const extension = maybeExtension.replace(/\?\w+$/, '');
             const data = await fs.readFile(filePath);
             const base64 = data.toString('base64');
-            const inlineModule = importAdapter.asNodeModule(data);
+            const inlineModule = moduleLoader(data);
             if (isDev) {
                 // no need to wire up the assets in dev mode, just rewrite
                 return inlineModule;
@@ -53,7 +67,7 @@ export function cloudflareModuleLoader(enabled) {
             const hash = hashString(base64);
             // emit the wasm binary as an asset file, to be picked up later by the esbuild bundle for the worker.
             // give it a shared deterministic name to make things easy for esbuild to switch on later
-            const assetName = `${path.basename(filePath).split('.')[0]}.${hash}.${importAdapter.extension}`;
+            const assetName = `${path.basename(filePath).split('.')[0]}.${hash}${extension}`;
             this.emitFile({
                 type: 'asset',
                 // emit the data explicitly as an esset with `fileName` rather than `name` so that
@@ -68,7 +82,7 @@ export function cloudflareModuleLoader(enabled) {
                 fileName: `${assetName}.mjs`,
                 code: inlineModule,
             });
-            return `import module from "${MAGIC_STRING}${chunkId}.${importAdapter.extension}.mjs";export default module;`;
+            return `import module from "${MAGIC_STRING}${chunkId}${extension}.mjs";export default module;`;
         },
         // output original wasm file relative to the chunk now that chunking has been achieved
         renderChunk(code, chunk, _) {
@@ -79,10 +93,10 @@ export function cloudflareModuleLoader(enabled) {
             // SSR will need the .mjs suffix removed from the import before this works in cloudflare, but this is done as a final step
             // so as to support prerendering from nodejs runtime
             let replaced = code;
-            for (const loader of enabledAdapters) {
-                replaced = replaced.replaceAll(
+            for (const ext of extensions) {
+                const extension = ext.replace(/\?\w+$/, '');
                 // chunk id can be many things, (alpha numeric, dollars, or underscores, maybe more)
-                new RegExp(`${MAGIC_STRING}([^\\s]+?)\\.${loader.extension}\\.mjs`, 'g'), (s, assetId) => {
+                replaced = replaced.replaceAll(new RegExp(`${MAGIC_STRING}([^\\s]+?)${escapeRegExp(extension)}\\.mjs`, 'g'), (s, assetId) => {
                     const fileName = this.getFileName(assetId);
                     const relativePath = path
                         .relative(path.dirname(chunk.fileName), fileName)
@@ -96,9 +110,6 @@ export function cloudflareModuleLoader(enabled) {
                     return `./${relativePath}`;
                 });
             }
-            if (replaced.includes(MAGIC_STRING)) {
-                console.error('failed to replace', replaced);
-            }
             return { code: replaced };
         },
         generateBundle(_, bundle) {
@@ -126,8 +137,9 @@ export function cloudflareModuleLoader(enabled) {
             const baseDir = url.fileURLToPath(config.outDir);
             const replacementsByFileName = new Map();
             for (const replacement of replacements) {
-                if (!replacement.fileName)
+                if (!replacement.fileName) {
                     continue;
+                }
                 const repls = replacementsByFileName.get(replacement.fileName) || [];
                 if (!repls.length) {
                     replacementsByFileName.set(replacement.fileName, repls);
@@ -139,22 +151,36 @@ export function cloudflareModuleLoader(enabled) {
                 const contents = await fs.readFile(filepath, 'utf-8');
                 let updated = contents;
                 for (const replacement of repls) {
-                    updated = contents.replaceAll(replacement.nodejsImport, replacement.cloudflareImport);
+                    updated = updated.replaceAll(replacement.nodejsImport, replacement.cloudflareImport);
                 }
                 await fs.writeFile(filepath, updated, 'utf-8');
             }
         },
     };
 }
-const wasmImportAdapter = {
-    extension: 'wasm',
-    qualifiedExtension: 'wasm?module',
-    asNodeModule(fileContents) {
+const renderers = {
+    CompiledWasm(fileContents) {
         const base64 = fileContents.toString('base64');
         return `const wasmModule = new WebAssembly.Module(Uint8Array.from(atob("${base64}"), c => c.charCodeAt(0)));export default wasmModule;`;
     },
+    Data(fileContents) {
+        const base64 = fileContents.toString('base64');
+        return `const binModule = Uint8Array.from(atob("${base64}"), c => c.charCodeAt(0)).buffer;export default binModule;`;
+    },
+    Text(fileContents) {
+        const escaped = JSON.stringify(fileContents.toString('utf-8'));
+        return `const stringModule = ${escaped};export default stringModule;`;
+    },
+};
+const defaultAdapters = {
+    // Loads '*.wasm?module' imports as WebAssembly modules, which is the only way to load WASM in cloudflare workers.
+    // Current proposal for WASM modules: https://github.com/WebAssembly/esm-integration/tree/main/proposals/esm-integration
+    '.wasm?module': 'CompiledWasm',
+    // treats the module as a WASM module
+    '.wasm': 'CompiledWasm',
+    '.bin': 'Data',
+    '.txt': 'Text',
 };
-const cloudflareImportAdapters = [wasmImportAdapter];
 /**
  * Returns a deterministic 32 bit hash code from a string
  */
@@ -167,3 +193,6 @@ function hashString(str) {
     }
     return new Uint32Array([hash])[0].toString(36);
 }
+function escapeRegExp(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/cloudflare",
   "description": "Deploy your site to Cloudflare Workers/Pages",
-  "version": "10.2.5",
+  "version": "10.3.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",

package/dist/utils/wasm-module-loader.d.ts

@@ -1,16 +0,0 @@
-import type { AstroConfig } from 'astro';
-import type { PluginOption } from 'vite';
-export interface CloudflareModulePluginExtra {
-    afterBuildCompleted(config: AstroConfig): Promise<void>;
-}
-/**
- * Enables support for wasm modules within cloudflare pages functions
- *
- * Loads '*.wasm?module' and `*.wasm` imports as WebAssembly modules, which is the only way to load WASM in cloudflare workers.
- * Current proposal for WASM modules: https://github.com/WebAssembly/esm-integration/tree/main/proposals/esm-integration
- * Cloudflare worker WASM from javascript support: https://developers.cloudflare.com/workers/runtime-apis/webassembly/javascript/
- * @param enabled - if true, load '.wasm' imports as Uint8Arrays, otherwise will throw errors when encountered to clarify that it must be enabled
- * @returns Vite plugin to load WASM tagged with '?module' as a WASM modules
- */
-export declare function cloudflareModuleLoader(enabled: boolean): PluginOption & CloudflareModulePluginExtra;
-export type ImportType = 'wasm';