@astrojs/cloudflare 0.0.0-cf-assets-20231021193132

package/dist/entrypoints/image-service.js

@@ -0,0 +1,340 @@
+function isESMImportedImage(src) {
+    return typeof src === 'object';
+}
+function isRemotePath(src) {
+    return /^(http|ftp|https|ws):?\/\//.test(src) || src.startsWith('data:');
+}
+function matchHostname(url, hostname, allowWildcard) {
+    if (!hostname) {
+        return true;
+    }
+    else if (!allowWildcard || !hostname.startsWith('*')) {
+        return hostname === url.hostname;
+    }
+    else if (hostname.startsWith('**.')) {
+        const slicedHostname = hostname.slice(2); // ** length
+        return slicedHostname !== url.hostname && url.hostname.endsWith(slicedHostname);
+    }
+    else if (hostname.startsWith('*.')) {
+        const slicedHostname = hostname.slice(1); // * length
+        const additionalSubdomains = url.hostname
+            .replace(slicedHostname, '')
+            .split('.')
+            .filter(Boolean);
+        return additionalSubdomains.length === 1;
+    }
+    return false;
+}
+export function matchPort(url, port) {
+    return !port || port === url.port;
+}
+export function matchProtocol(url, protocol) {
+    return !protocol || protocol === url.protocol.slice(0, -1);
+}
+export function matchPathname(url, pathname, allowWildcard) {
+    if (!pathname) {
+        return true;
+    }
+    else if (!allowWildcard || !pathname.endsWith('*')) {
+        return pathname === url.pathname;
+    }
+    else if (pathname.endsWith('/**')) {
+        const slicedPathname = pathname.slice(0, -2); // ** length
+        return slicedPathname !== url.pathname && url.pathname.startsWith(slicedPathname);
+    }
+    else if (pathname.endsWith('/*')) {
+        const slicedPathname = pathname.slice(0, -1); // * length
+        const additionalPathChunks = url.pathname
+            .replace(slicedPathname, '')
+            .split('/')
+            .filter(Boolean);
+        return additionalPathChunks.length === 1;
+    }
+    return false;
+}
+function matchPattern(url, remotePattern) {
+    return (matchProtocol(url, remotePattern.protocol) &&
+        matchHostname(url, remotePattern.hostname, true) &&
+        matchPort(url, remotePattern.port) &&
+        matchPathname(url, remotePattern.pathname, true));
+}
+function isRemoteAllowed(src, { domains = [], remotePatterns = [], }) {
+    if (!isRemotePath(src))
+        return false;
+    const url = new URL(src);
+    return (domains.some((domain) => matchHostname(url, domain)) ||
+        remotePatterns.some((remotePattern) => matchPattern(url, remotePattern)));
+}
+const VALID_SUPPORTED_FORMATS = [
+    'jpeg',
+    'jpg',
+    'png',
+    'tiff',
+    'webp',
+    'gif',
+    'svg',
+    'avif',
+];
+const DEFAULT_OUTPUT_FORMAT = 'webp';
+function isString(path) {
+    return typeof path === 'string' || path instanceof String;
+}
+function removeTrailingForwardSlash(path) {
+    return path.endsWith('/') ? path.slice(0, path.length - 1) : path;
+}
+function removeLeadingForwardSlash(path) {
+    return path.startsWith('/') ? path.substring(1) : path;
+}
+function trimSlashes(path) {
+    return path.replace(/^\/|\/$/g, '');
+}
+function joinPaths(...paths) {
+    return paths
+        .filter(isString)
+        .map((path, i) => {
+        if (i === 0) {
+            return removeTrailingForwardSlash(path);
+        }
+        else if (i === paths.length - 1) {
+            return removeLeadingForwardSlash(path);
+        }
+        else {
+            return trimSlashes(path);
+        }
+    })
+        .join('/');
+}
+/**
+ * Returns the final dimensions of an image based on the user's options.
+ *
+ * For local images:
+ * - If the user specified both width and height, we'll use those.
+ * - If the user specified only one of them, we'll use the original image's aspect ratio to calculate the other.
+ * - If the user didn't specify either, we'll use the original image's dimensions.
+ *
+ * For remote images:
+ * - Widths and heights are always required, so we'll use the user's specified width and height.
+ */
+function getTargetDimensions(options) {
+    let targetWidth = options.width;
+    let targetHeight = options.height;
+    if (isESMImportedImage(options.src)) {
+        const aspectRatio = options.src.width / options.src.height;
+        if (targetHeight && !targetWidth) {
+            // If we have a height but no width, use height to calculate the width
+            targetWidth = Math.round(targetHeight * aspectRatio);
+        }
+        else if (targetWidth && !targetHeight) {
+            // If we have a width but no height, use width to calculate the height
+            targetHeight = Math.round(targetWidth / aspectRatio);
+        }
+        else if (!targetWidth && !targetHeight) {
+            // If we have neither width or height, use the original image's dimensions
+            targetWidth = options.src.width;
+            targetHeight = options.src.height;
+        }
+    }
+    // TypeScript doesn't know this, but because of previous hooks we always know that targetWidth and targetHeight are defined
+    return {
+        targetWidth: targetWidth,
+        targetHeight: targetHeight,
+    };
+}
+const service = {
+    validateOptions: (options /*, imageConfig: AstroConfig['image']*/) => {
+        // add custom global CF image service options
+        // const serviceConfig = imageConfig.service.config;
+        // need to add checks for limits
+        // https://developers.cloudflare.com/images/image-resizing/format-limitations/#format-limitations
+        // `src` is missing or is `undefined`.
+        if (!options.src || (typeof options.src !== 'string' && typeof options.src !== 'object')) {
+            throw new Error('ExpectedImage');
+            // throw new AstroError({
+            // 	...AstroErrorData.ExpectedImage,
+            // 	message: AstroErrorData.ExpectedImage.message(
+            // 		JSON.stringify(options.src),
+            // 		typeof options.src,
+            // 		JSON.stringify(options, (_, v) => (v === undefined ? null : v))
+            // 	),
+            // });
+        }
+        if (!isESMImportedImage(options.src)) {
+            // User passed an `/@fs/` path or a filesystem path instead of the full image.
+            if (options.src.startsWith('/@fs/') ||
+                (!isRemotePath(options.src) && !options.src.startsWith('/'))) {
+                throw new Error('LocalImageUsedWrongly');
+                // throw new AstroError({
+                // 	...AstroErrorData.LocalImageUsedWrongly,
+                // 	message: AstroErrorData.LocalImageUsedWrongly.message(options.src),
+                // });
+            }
+            // For remote images, width and height are explicitly required as we can't infer them from the file
+            let missingDimension;
+            if (!options.width && !options.height) {
+                missingDimension = 'both';
+            }
+            else if (!options.width && options.height) {
+                missingDimension = 'width';
+            }
+            else if (options.width && !options.height) {
+                missingDimension = 'height';
+            }
+            if (missingDimension) {
+                throw new Error('MissingImageDimension');
+                // throw new AstroError({
+                // 	...AstroErrorData.MissingImageDimension,
+                // 	message: AstroErrorData.MissingImageDimension.message(missingDimension, options.src),
+                // });
+            }
+        }
+        else {
+            if (!VALID_SUPPORTED_FORMATS.includes(options.src.format)) {
+                throw new Error('UnsupportedImageFormat');
+                // throw new AstroError({
+                // 	...AstroErrorData.UnsupportedImageFormat,
+                // 	message: AstroErrorData.UnsupportedImageFormat.message(
+                // 		options.src.format,
+                // 		options.src.src,
+                // 		VALID_SUPPORTED_FORMATS
+                // 	),
+                // });
+            }
+            if (options.widths && options.densities) {
+                throw new Error('IncompatibleDescriptorOptions');
+                // throw new AstroError(AstroErrorData.IncompatibleDescriptorOptions);
+            }
+            // We currently do not support processing SVGs, so whenever the input format is a SVG, force the output to also be one
+            if (options.src.format === 'svg') {
+                options.format = 'svg';
+            }
+            if ((options.src.format === 'svg' && options.format !== 'svg') ||
+                (options.src.format !== 'svg' && options.format === 'svg')) {
+                throw new Error('UnsupportedImageConversion');
+                // throw new AstroError(AstroErrorData.UnsupportedImageConversion);
+            }
+        }
+        // If the user didn't specify a format, we'll default to `webp`. It offers the best ratio of compatibility / quality
+        // In the future, hopefully we can replace this with `avif`, alas, Edge. See https://caniuse.com/avif
+        if (!options.format) {
+            options.format = DEFAULT_OUTPUT_FORMAT;
+        }
+        // Sometimes users will pass number generated from division, which can result in floating point numbers
+        if (options.width)
+            options.width = Math.round(options.width);
+        if (options.height)
+            options.height = Math.round(options.height);
+        return options;
+    },
+    getHTMLAttributes: (options) => {
+        const { targetWidth, targetHeight } = getTargetDimensions(options);
+        const { src, width, height, format, quality, densities, widths, formats, ...attributes } = options;
+        return {
+            ...attributes,
+            width: targetWidth,
+            height: targetHeight,
+            loading: attributes.loading ?? 'lazy',
+            decoding: attributes.decoding ?? 'async',
+        };
+    },
+    getSrcSet(options) {
+        const srcSet = [];
+        const { targetWidth } = getTargetDimensions(options);
+        const { widths, densities } = options;
+        const targetFormat = options.format ?? DEFAULT_OUTPUT_FORMAT;
+        // NOTE: Depending on the cloudflare fit value, the image might never be enlarged
+        // For remote images, we don't know the original image's dimensions, so we cannot know the maximum width
+        // It is ultimately the user's responsibility to make sure they don't request images larger than the original
+        let imageWidth = options.width;
+        let maxWidth = Infinity;
+        // However, if it's an imported image, we can use the original image's width as a maximum width
+        if (isESMImportedImage(options.src)) {
+            imageWidth = options.src.width;
+            maxWidth = imageWidth;
+        }
+        // Since `widths` and `densities` ultimately control the width and height of the image,
+        // we don't want the dimensions the user specified, we'll create those ourselves.
+        const { width: transformWidth, height: transformHeight, ...transformWithoutDimensions } = options;
+        // Collect widths to generate from specified densities or widths
+        const allWidths = [];
+        if (densities) {
+            // Densities can either be specified as numbers, or descriptors (ex: '1x'), we'll convert them all to numbers
+            const densityValues = densities.map((density) => {
+                if (typeof density === 'number') {
+                    return density;
+                }
+                else {
+                    return parseFloat(density);
+                }
+            });
+            // Calculate the widths for each density, rounding to avoid floats.
+            const densityWidths = densityValues
+                .sort()
+                .map((density) => Math.round(targetWidth * density));
+            allWidths.push(...densityWidths.map((width, index) => ({
+                maxTargetWidth: Math.min(width, maxWidth),
+                descriptor: `${densityValues[index]}x`,
+            })));
+        }
+        else if (widths) {
+            allWidths.push(...widths.map((width) => ({
+                maxTargetWidth: Math.min(width, maxWidth),
+                descriptor: `${width}w`,
+            })));
+        }
+        // Caution: The logic below is a bit tricky, as we need to make sure we don't generate the same image multiple times
+        // When making changes, make sure to test with different combinations of local/remote images widths, densities, and dimensions etc.
+        for (const { maxTargetWidth, descriptor } of allWidths) {
+            const srcSetTransform = { ...transformWithoutDimensions };
+            // Only set the width if it's different from the original image's width, to avoid generating the same image multiple times
+            if (maxTargetWidth !== imageWidth) {
+                srcSetTransform.width = maxTargetWidth;
+            }
+            else {
+                // If the width is the same as the original image's width, and we have both dimensions, it probably means
+                // it's a remote image, so we'll use the user's specified dimensions to avoid recreating the original image unnecessarily
+                if (options.width && options.height) {
+                    srcSetTransform.width = options.width;
+                    srcSetTransform.height = options.height;
+                }
+            }
+            srcSet.push({
+                transform: srcSetTransform,
+                descriptor,
+                attributes: {
+                    type: `image/${targetFormat}`,
+                },
+            });
+        }
+        return srcSet;
+    },
+    getURL: (options, imageConfig) => {
+        const resizingParams = [];
+        if (options.width)
+            resizingParams.push(`width=${options.width}`);
+        if (options.height)
+            resizingParams.push(`height=${options.height}`);
+        if (options.quality)
+            resizingParams.push(`quality=${options.quality}`);
+        if (options.fit)
+            resizingParams.push(`fit=${options.fit}`);
+        if (options.format)
+            resizingParams.push(`format=${options.format}`);
+        let imageSource = '';
+        if (isESMImportedImage(options.src)) {
+            imageSource = options.src.src;
+        }
+        else if (isRemoteAllowed(options.src, imageConfig)) {
+            imageSource = options.src;
+        }
+        else {
+            // If it's not an imported image, nor is it allowed using the current domains or remote patterns, we'll just return the original URL
+            return options.src;
+        }
+        const imageEndpoint = joinPaths(
+        //@ts-ignore
+        import.meta.env.BASE_URL, '/cdn-cgi/image', resizingParams.join(','), imageSource);
+        console.log(imageEndpoint);
+        return imageEndpoint;
+    },
+};
+export default service;

package/dist/entrypoints/server.advanced.d.ts

@@ -0,0 +1,21 @@
+import type { CacheStorage, ExecutionContext, Request as CFRequest } from '@cloudflare/workers-types';
+import type { SSRManifest } from 'astro';
+type Env = {
+    ASSETS: {
+        fetch: (req: Request) => Promise<Response>;
+    };
+};
+export interface AdvancedRuntime<T extends object = object> {
+    runtime: {
+        waitUntil: (promise: Promise<any>) => void;
+        env: Env & T;
+        cf: CFRequest['cf'];
+        caches: CacheStorage;
+    };
+}
+export declare function createExports(manifest: SSRManifest): {
+    default: {
+        fetch: (request: Request & CFRequest, env: Env, context: ExecutionContext) => Promise<Response>;
+    };
+};
+export {};

package/dist/entrypoints/server.advanced.js

@@ -0,0 +1,44 @@
+import { App } from 'astro/app';
+import { getProcessEnvProxy, isNode } from '../util.js';
+if (!isNode) {
+    process.env = getProcessEnvProxy();
+}
+export function createExports(manifest) {
+    const app = new App(manifest);
+    const fetch = async (request, env, context) => {
+        // TODO: remove this any cast in the future
+        // REF: the type cast to any is needed because the Cloudflare Env Type is not assignable to type 'ProcessEnv'
+        process.env = env;
+        const { pathname } = new URL(request.url);
+        // static assets fallback, in case default _routes.json is not used
+        if (manifest.assets.has(pathname)) {
+            return env.ASSETS.fetch(request);
+        }
+        let routeData = app.match(request, { matchNotFound: true });
+        if (routeData) {
+            Reflect.set(request, Symbol.for('astro.clientAddress'), request.headers.get('cf-connecting-ip'));
+            const locals = {
+                runtime: {
+                    waitUntil: (promise) => {
+                        context.waitUntil(promise);
+                    },
+                    env: env,
+                    cf: request.cf,
+                    caches: caches,
+                },
+            };
+            let response = await app.render(request, routeData, locals);
+            if (app.setCookieHeaders) {
+                for (const setCookieHeader of app.setCookieHeaders(response)) {
+                    response.headers.append('Set-Cookie', setCookieHeader);
+                }
+            }
+            return response;
+        }
+        return new Response(null, {
+            status: 404,
+            statusText: 'Not found',
+        });
+    };
+    return { default: { fetch } };
+}

package/dist/entrypoints/server.directory.d.ts

@@ -0,0 +1,14 @@
+import type { CacheStorage, EventContext, Request as CFRequest } from '@cloudflare/workers-types';
+import type { SSRManifest } from 'astro';
+export interface DirectoryRuntime<T extends object = object> {
+    runtime: {
+        waitUntil: (promise: Promise<any>) => void;
+        env: EventContext<unknown, string, unknown>['env'] & T;
+        cf: CFRequest['cf'];
+        caches: CacheStorage;
+    };
+}
+export declare function createExports(manifest: SSRManifest): {
+    onRequest: (context: EventContext<unknown, string, unknown>) => Promise<Response | import("@cloudflare/workers-types").Response>;
+    manifest: SSRManifest;
+};

package/dist/entrypoints/server.directory.js

@@ -0,0 +1,46 @@
+import { App } from 'astro/app';
+import { getProcessEnvProxy, isNode } from '../util.js';
+if (!isNode) {
+    process.env = getProcessEnvProxy();
+}
+export function createExports(manifest) {
+    const app = new App(manifest);
+    const onRequest = async (context) => {
+        const request = context.request;
+        const { env } = context;
+        // TODO: remove this any cast in the future
+        // REF: the type cast to any is needed because the Cloudflare Env Type is not assignable to type 'ProcessEnv'
+        process.env = env;
+        const { pathname } = new URL(request.url);
+        // static assets fallback, in case default _routes.json is not used
+        if (manifest.assets.has(pathname)) {
+            return env.ASSETS.fetch(request);
+        }
+        let routeData = app.match(request, { matchNotFound: true });
+        if (routeData) {
+            Reflect.set(request, Symbol.for('astro.clientAddress'), request.headers.get('cf-connecting-ip'));
+            const locals = {
+                runtime: {
+                    waitUntil: (promise) => {
+                        context.waitUntil(promise);
+                    },
+                    env: context.env,
+                    cf: request.cf,
+                    caches: caches,
+                },
+            };
+            let response = await app.render(request, routeData, locals);
+            if (app.setCookieHeaders) {
+                for (const setCookieHeader of app.setCookieHeaders(response)) {
+                    response.headers.append('Set-Cookie', setCookieHeader);
+                }
+            }
+            return response;
+        }
+        return new Response(null, {
+            status: 404,
+            statusText: 'Not found',
+        });
+    };
+    return { onRequest, manifest };
+}

package/dist/getAdapter.d.ts

@@ -0,0 +1,5 @@
+import type { AstroAdapter } from 'astro';
+export declare function getAdapter({ isModeDirectory, functionPerRoute, }: {
+    isModeDirectory: boolean;
+    functionPerRoute: boolean;
+}): AstroAdapter;

package/dist/getAdapter.js

@@ -0,0 +1,31 @@
+export function getAdapter({ isModeDirectory, functionPerRoute, }) {
+    const astroFeatures = {
+        hybridOutput: 'stable',
+        staticOutput: 'unsupported',
+        serverOutput: 'stable',
+        assets: {
+            supportKind: 'stable',
+            // FIXME: UNDO THIS BEFORE RELEASE
+            isSharpCompatible: true,
+            isSquooshCompatible: false,
+        },
+    };
+    if (isModeDirectory) {
+        return {
+            name: '@astrojs/cloudflare',
+            serverEntrypoint: '@astrojs/cloudflare/entrypoints/server.directory.js',
+            exports: ['onRequest', 'manifest'],
+            adapterFeatures: {
+                functionPerRoute,
+                edgeMiddleware: false,
+            },
+            supportedAstroFeatures: astroFeatures,
+        };
+    }
+    return {
+        name: '@astrojs/cloudflare',
+        serverEntrypoint: '@astrojs/cloudflare/entrypoints/server.advanced.js',
+        exports: ['default'],
+        supportedAstroFeatures: astroFeatures,
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import type { AstroIntegration } from 'astro';
+export type { AdvancedRuntime } from './entrypoints/server.advanced.js';
+export type { DirectoryRuntime } from './entrypoints/server.directory.js';
+type Options = {
+    mode?: 'directory' | 'advanced';
+    functionPerRoute?: boolean;
+    /** Configure automatic `routes.json` generation */
+    routes?: {
+        /** Strategy for generating `include` and `exclude` patterns
+         * - `auto`: Will use the strategy that generates the least amount of entries.
+         * - `include`: For each page or endpoint in your application that is not prerendered, an entry in the `include` array will be generated. For each page that is prerendered and whoose path is matched by an `include` entry, an entry in the `exclude` array will be generated.
+         * - `exclude`: One `"/*"` entry in the `include` array will be generated. For each page that is prerendered, an entry in the `exclude` array will be generated.
+         * */
+        strategy?: 'auto' | 'include' | 'exclude';
+        /** Additional `include` patterns */
+        include?: string[];
+        /** Additional `exclude` patterns */
+        exclude?: string[];
+    };
+    /**
+     * Going forward only the object API should be used. The modes work as known before:
+     * 'off': current behaviour (wrangler is needed)
+     * 'local': use a static req.cf object, and env vars defined in wrangler.toml & .dev.vars (astro dev is enough)
+     * 'remote': use a dynamic real-live req.cf object, and env vars defined in wrangler.toml & .dev.vars (astro dev is enough)
+     */
+    runtime?: 'off' | 'local' | 'remote' | {
+        mode: 'off';
+    } | {
+        mode: 'remote';
+    } | {
+        mode: 'local';
+        persistTo?: string;
+    };
+    wasmModuleImports?: boolean;
+};
+export default function createIntegration(args?: Options): AstroIntegration;