@webflow/webflow-cli 1.22.0-next.0 → 1.22.0-next.2

package/dist/templates/astro/astro.config.webflow.ts

@@ -0,0 +1,67 @@
+// Merge logic for the generated astro.config.mjs (shared between Astro 5 + 6).
+// Copied verbatim into the user's project; types are local to avoid Astro
+// cross-version drift.
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AstroIntegration = { name?: string; [key: string]: any };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AstroUserConfig = Record<string, any>;
+
+export type WebflowOverridesOptions = {
+  mountPath: string;
+  deployUrl: string;
+  /** The result of `cloudflare({ ... })` from `@astrojs/cloudflare`. */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  adapter: any;
+  /** The result of `react()` from `@astrojs/react`. Auto-added if the user hasn't already added `@astrojs/react`. */
+  reactIntegration: AstroIntegration;
+  /** Extra Vite resolve.alias to inject (e.g. react-dom/server -> react-dom/server.edge for React 19+ in prod). Pass `undefined` to skip. */
+  reactDomServerAlias: Record<string, string> | undefined;
+};
+
+/**
+ * Wrap the user's Astro config with Webflow Cloud's required overrides.
+ * `userExport` is always provided — `{}` when the user ships no astro.config.*.
+ *
+ * Matches pre-1.2 behaviour: top-level keys in the override block REPLACE the
+ * user's. We need our adapter / base / output to win.
+ */
+export function withWebflowOverrides(
+  userExport: AstroUserConfig,
+  opts: WebflowOverridesOptions
+): AstroUserConfig {
+  const userIntegrations: AstroIntegration[] = userExport.integrations || [];
+  const hasReact = userIntegrations.some((i) => i?.name === "@astrojs/react");
+  const integrations = hasReact
+    ? userIntegrations
+    : [...userIntegrations, opts.reactIntegration];
+
+  return {
+    ...userExport,
+    base: opts.mountPath,
+    output: "server",
+    adapter: opts.adapter,
+    integrations,
+    vite: {
+      ...userExport.vite,
+      resolve: {
+        ...userExport.vite?.resolve,
+        alias: opts.reactDomServerAlias,
+      },
+    },
+    build: {
+      assetsPrefix:
+        opts.deployUrl + (opts.mountPath === "/" ? "" : opts.mountPath),
+    },
+    image: {
+      ...userExport.image,
+      service: {
+        entrypoint: "./webflow-loader.ts",
+        config: {
+          deployUrl: opts.deployUrl,
+          mountPath: opts.mountPath,
+        },
+      },
+    },
+  };
+}

package/dist/templates/astro/v5/astro.config.mjs.template

@@ -0,0 +1,25 @@
+// Generated by the Webflow Cloud builder. Merge logic lives in ./astro.config.webflow.ts.
+import { defineConfig } from 'astro/config';
+import cloudflare from '@astrojs/cloudflare';
+import react from '@astrojs/react';
+import userConfig from './clouduser.astro.config';
+import { withWebflowOverrides } from './astro.config.webflow';
+
+export default defineConfig(
+  withWebflowOverrides(userConfig, {
+    mountPath: '${COSMIC_MOUNT_PATH}',
+    deployUrl: '${COSMIC_DEPLOY_URL}',
+    adapter: cloudflare({
+      imageService: 'custom',
+      platformProxy: {
+        enabled: true,
+      },
+    }),
+    reactIntegration: react(),
+    // Use react-dom/server.edge instead of react-dom/server.browser for React 19.
+    // Without this, MessageChannel from node:worker_threads needs to be polyfilled.
+    reactDomServerAlias: import.meta.env.PROD
+      ? { 'react-dom/server': 'react-dom/server.edge' }
+      : undefined,
+  })
+);

package/dist/templates/astro/{webflow-loader.ts → v5/webflow-loader.ts}

@@ -84,18 +84,18 @@ const cloudflareLoader: ExternalImageService = {
   getHTMLAttributes(options: ImageTransform) {
     const { targetWidth, targetHeight } = getTargetDimensions(options);
     const {
-      src: _src,
-      width: _width,
-      height: _height,
-      format: _format,
-      quality: _quality,
-      densities: _densities,
-      widths: _widths,
-      formats: _formats,
-      layout: _layout,
-      priority: _priority,
-      fit: _fit,
-      position: _position,
+      src,
+      width,
+      height,
+      format,
+      quality,
+      densities,
+      widths,
+      formats,
+      layout,
+      priority,
+      fit,
+      position,
       ...attributes
     } = options;
 

package/dist/templates/astro/{wrangler.astro.json → v5/wrangler.json}

@@ -1,6 +1,6 @@
 {
   "name": "cosmic-builder-dry-run",
-  "main": "./dist/_worker.js/index.js",
+  "main": "dist/_worker.js/index.js",
   "compatibility_date": "2025-03-03",
   "compatibility_flags": ["nodejs_compat"]
 }

package/dist/templates/astro/v6/astro.config.mjs.template

@@ -0,0 +1,34 @@
+// Generated by the Webflow Cloud builder. Merge logic lives in ./astro.config.webflow.ts.
+import { defineConfig } from 'astro/config';
+import { readFileSync } from 'node:fs';
+import cloudflare from '@astrojs/cloudflare';
+import react from '@astrojs/react';
+import userConfig from './clouduser.astro.config';
+import { withWebflowOverrides } from './astro.config.webflow';
+
+// Detect React 19+ so we know whether to alias react-dom/server -> .edge.
+let isReact19 = false;
+try {
+  const pkg = JSON.parse(readFileSync('./package.json', 'utf8'));
+  const reactVersion = pkg.dependencies?.react || pkg.devDependencies?.react || '';
+  // Match versions like "19", "^19", "~19", "19.0.0", "^19.0.0", etc.
+  isReact19 = /(?:^|[^\d])19(?:\.|$)/.test(reactVersion);
+} catch {
+  // Could not read package.json, assume not React 19.
+}
+
+export default defineConfig(
+  withWebflowOverrides(userConfig, {
+    mountPath: '${COSMIC_MOUNT_PATH}',
+    deployUrl: '${COSMIC_DEPLOY_URL}',
+    adapter: cloudflare({
+      imageService: 'custom',
+      // Note: platformProxy removed in Astro 6 — workerd runs natively via @cloudflare/vite-plugin.
+    }),
+    reactIntegration: react(),
+    // Only React 19+ has react-dom/server.edge. React 18 has only .browser, which doesn't run in edge runtimes.
+    reactDomServerAlias: import.meta.env.PROD && isReact19
+      ? { 'react-dom/server': 'react-dom/server.edge' }
+      : undefined,
+  })
+);

package/dist/templates/astro/v6/webflow-loader.ts

@@ -0,0 +1,122 @@
+/**
+ * Webflow Image Loader for Astro 6
+ *
+ * This is the same loader as Astro 5 - it handles image optimization
+ * through Cloudflare's image resizing service.
+ *
+ * Note: Astro 6 defaults to 'cloudflare-binding' for imageService,
+ * but we use 'custom' to maintain compatibility with our CDN setup.
+ */
+
+import type { ExternalImageService, ImageTransform, AstroConfig } from "astro";
+
+function normalizeSrc(src: string, deployUrl?: string, mountPath?: string) {
+  // For local assets, include the mount path but not the deploy url, and remove the leading slash
+  if (deployUrl && src.startsWith(deployUrl)) {
+    return `${src.slice(deployUrl.length)}`.slice(1);
+  } else if (mountPath && src.startsWith(mountPath)) {
+    return src.slice(1);
+  } else if (src.startsWith("/")) {
+    return `${mountPath}${src}`.slice(1);
+  }
+  return src;
+}
+
+// Default implementation copied from Astro's baseService
+function getTargetDimensions(options: ImageTransform) {
+  let targetWidth = options.width;
+  let targetHeight = options.height;
+
+  // For ESM imported images, calculate missing dimensions based on aspect ratio
+  if (
+    typeof options.src === "object" &&
+    "width" in options.src &&
+    "height" in options.src
+  ) {
+    const aspectRatio = options.src.width / options.src.height;
+    if (targetHeight && !targetWidth) {
+      targetWidth = Math.round(targetHeight * aspectRatio);
+    } else if (targetWidth && !targetHeight) {
+      targetHeight = Math.round(targetWidth / aspectRatio);
+    } else if (!targetWidth && !targetHeight) {
+      targetWidth = options.src.width;
+      targetHeight = options.src.height;
+    }
+  }
+
+  return {
+    targetWidth,
+    targetHeight,
+  };
+}
+
+const cloudflareLoader: ExternalImageService = {
+  getURL(options: ImageTransform, imageConfig: AstroConfig["image"]) {
+    const normalizedSrc = normalizeSrc(
+      typeof options.src === "object" ? options.src.src : options.src,
+      imageConfig.service.config.deployUrl,
+      imageConfig.service.config.mountPath
+    );
+    // Our cloudflare zone doesn't allow optimizing external images for security reasons, so just load the original image
+    // For now, also skip optimization for images hosted on regular webflow sites (cdn.website-files.com)
+    // because optimizing them would result in two bandwidth charges: one from the website-files zone (for the full image)
+    // and one from the cosmic.webflow.services zone (for the resized image)
+    if (
+      normalizedSrc.startsWith("http://") ||
+      normalizedSrc.startsWith("https://")
+    ) {
+      return normalizedSrc;
+    }
+
+    const supportedOptions = ["width", "height", "quality", "format"];
+    const params = [];
+    for (const option of supportedOptions) {
+      if (options[option]) {
+        params.push(`${option}=${options[option]}`);
+      }
+    }
+
+    const workerUrl = imageConfig.service.config.deployUrl;
+    // Skip resizing svgs, since it doesn't do anything
+    const isSvg =
+      typeof options.src === "object"
+        ? options.src.format === "svg"
+        : options.src.endsWith(".svg");
+    if (isSvg || params.length === 0) {
+      return `${workerUrl}/${normalizedSrc}`;
+    }
+
+    const paramsString = params.join(",");
+    return `${workerUrl}/cdn-cgi/image/${paramsString}/${normalizedSrc}`;
+  },
+
+  // Default implementation copied from Astro's baseService
+  getHTMLAttributes(options: ImageTransform) {
+    const { targetWidth, targetHeight } = getTargetDimensions(options);
+    const {
+      src,
+      width,
+      height,
+      format,
+      quality,
+      densities,
+      widths,
+      formats,
+      layout,
+      priority,
+      fit,
+      position,
+      ...attributes
+    } = options;
+
+    return {
+      ...attributes,
+      width: targetWidth,
+      height: targetHeight,
+      loading: attributes.loading ?? "lazy",
+      decoding: attributes.decoding ?? "async",
+    };
+  },
+};
+
+export default cloudflareLoader;

package/dist/templates/astro/v6/wrangler.json

@@ -0,0 +1,9 @@
+{
+  "name": "cosmic-builder-dry-run",
+  "main": "@astrojs/cloudflare/entrypoints/server",
+  "compatibility_date": "2025-03-03",
+  "compatibility_flags": ["nodejs_compat"],
+  "assets": {
+    "directory": "./dist/client"
+  }
+}

package/dist/templates/nextjs/next.config.ts.template

@@ -1,24 +1,13 @@
-import type { NextConfig } from "next";
+// Generated by the Webflow Cloud builder. Merge logic lives in ./next.config.webflow.ts.
 import userConfig from './clouduser.next.config';
+import { withWebflowOverrides } from './next.config.webflow';
 
-const webflowOverrides: NextConfig = {
-  basePath: '${COSMIC_MOUNT_PATH}',
-  assetPrefix: '${COSMIC_DEPLOY_URL}${COSMIC_MOUNT_PATH}',
-  images: {
-    ...userConfig.images,
-    // TODO: determine whether any of the non-custom loader options (imgix, cloudinary, akamai) work
-    // and if so allow them to be used here
-    loader: 'custom',
-    loaderFile: userConfig.images?.loaderFile || './webflow-loader.ts',
-  },
-};
+// Next.js disallows '/' as basePath, so '/' maps to ''.
+const mountPath: string = '${COSMIC_MOUNT_PATH}';
+export const webflowBasePath = mountPath === '/' ? '' : mountPath;
+export const webflowAssetPrefix = '${COSMIC_DEPLOY_URL}' + webflowBasePath;
 
-const nextConfig: NextConfig = {
-  ...userConfig,
-  ...webflowOverrides,
-};
-
-export default nextConfig;
-
-import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare";
-initOpenNextCloudflareForDev();
+export default withWebflowOverrides(userConfig, {
+  basePath: webflowBasePath,
+  assetPrefix: webflowAssetPrefix,
+});

package/dist/templates/nextjs/next.config.webflow.ts

@@ -0,0 +1,55 @@
+// Merge logic for the generated next.config.ts. Copied verbatim into the
+// user's project; types are local to avoid Next.js cross-version drift.
+import type { NextConfig } from "next";
+
+type NextConfigContext = { defaultConfig: NextConfig };
+type UserNextConfigFn = (
+  phase: string,
+  ctx: NextConfigContext
+) => NextConfig | Promise<NextConfig>;
+
+export type UserNextConfig = NextConfig | UserNextConfigFn;
+export type WebflowOverridesOptions = {
+  basePath: string;
+  assetPrefix: string;
+};
+
+/**
+ * Wrap the user's Next.js config with Webflow Cloud's required overrides.
+ * `userExport` is always provided — `{}` when the user ships no next.config.
+ */
+export function withWebflowOverrides(
+  userExport: UserNextConfig,
+  opts: WebflowOverridesOptions
+): UserNextConfigFn {
+  return async function nextConfig(
+    phase: string,
+    ctx: NextConfigContext
+  ): Promise<NextConfig> {
+    const resolved = await resolveUserConfig(userExport, phase, ctx);
+    return {
+      ...resolved,
+      basePath: opts.basePath,
+      assetPrefix: opts.assetPrefix,
+      images: {
+        ...resolved.images,
+        // TODO: support non-custom loaders (imgix, cloudinary, akamai) if they work
+        loader: "custom",
+        loaderFile: resolved.images?.loaderFile || "./webflow-loader.ts",
+      },
+    };
+  };
+}
+
+async function resolveUserConfig(
+  userExport: UserNextConfig,
+  phase: string,
+  ctx: NextConfigContext
+): Promise<NextConfig> {
+  if (typeof userExport === "function") {
+    return (await userExport(phase, ctx)) ?? {};
+  }
+  // `export default null` is rare but not impossible; guard so the spread
+  // below in withWebflowOverrides can't NPE.
+  return userExport ?? {};
+}

package/dist/templates/nextjs/open-next.config.ts

@@ -0,0 +1,3 @@
+import { defineCloudflareConfig } from "@opennextjs/cloudflare";
+
+export default defineCloudflareConfig();

package/dist/templates/nextjs/webflow-loader.ts

@@ -1,16 +1,16 @@
-import config from "./next.config";
+import { webflowAssetPrefix, webflowBasePath } from "./next.config";
 
-const basePath = config.basePath || "";
-const assetPrefix = config.assetPrefix || basePath;
+const basePath = webflowBasePath;
+const assetPrefix = webflowAssetPrefix || basePath;
 
 function normalizeSrc(src: string) {
-  // For local assets, include the base path but not the asset prefix, and remove the leading slash
+  // For local assets, include the base path but not the asset prefix
   if (assetPrefix && src.startsWith(assetPrefix)) {
-    return `${basePath}${src.slice(assetPrefix.length)}`.slice(1);
+    return `${basePath}${src.slice(assetPrefix.length)}`;
   } else if (basePath && src.startsWith(basePath)) {
-    return src.slice(1);
+    return src;
   } else if (src.startsWith("/")) {
-    return `${basePath}${src}`.slice(1);
+    return basePath + src;
   }
   return src;
 }
@@ -42,6 +42,8 @@ export default function cloudflareLoader({
     params.push(`quality=${quality}`);
   }
   const paramsString = params.join(",");
-  const workerUrl = `${assetPrefix.slice(0, -basePath.length)}`;
-  return `${workerUrl}/cdn-cgi/image/${paramsString}/${normalizedSrc}`;
+  const workerUrl = basePath
+    ? assetPrefix.slice(0, -basePath.length)
+    : assetPrefix;
+  return `${workerUrl}/cdn-cgi/image/${paramsString}${normalizedSrc}`;
 }

package/dist/templates/vite/vite.config.ts.template

@@ -0,0 +1,14 @@
+// Generated by the Webflow Cloud builder. Merge logic lives in ./vite.config.webflow.ts.
+import { defineConfig } from 'vite';
+import { cloudflare } from '@cloudflare/vite-plugin';
+import userConfig from './clouduser.vite.config';
+import { withWebflowOverrides } from './vite.config.webflow';
+
+const WF_BASE_PATH = '${COSMIC_MOUNT_PATH}';
+
+export default defineConfig(
+  withWebflowOverrides(userConfig, {
+    basePath: WF_BASE_PATH,
+    cloudflarePlugins: [cloudflare()],
+  })
+);

package/dist/templates/vite/vite.config.webflow.ts

@@ -0,0 +1,58 @@
+// Merge logic for the generated vite.config.ts. Copied verbatim into the
+// user's project; types are local to avoid Vite cross-version drift.
+
+type ViteConfigEnv = { mode: string; command: string; isPreview?: boolean };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ViteUserConfig = Record<string, any>;
+type ViteUserConfigFn = (
+  env: ViteConfigEnv
+) => ViteUserConfig | Promise<ViteUserConfig>;
+
+export type UserViteConfig = ViteUserConfig | ViteUserConfigFn;
+export type WebflowOverridesOptions = {
+  basePath: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  cloudflarePlugins: any[];
+};
+
+/**
+ * Wrap the user's Vite config with Webflow Cloud's required overrides.
+ * `userExport` is always provided — `{}` when the user ships no vite.config.*.
+ *
+ * Returns an async factory so the resulting config plays nicely with Vite's
+ * loadConfigFromFile under both ESM and CJS package types.
+ */
+export function withWebflowOverrides(
+  userExport: UserViteConfig,
+  opts: WebflowOverridesOptions
+): ViteUserConfigFn {
+  return async function viteConfig(
+    env: ViteConfigEnv
+  ): Promise<ViteUserConfig> {
+    const resolved = await resolveUserConfig(userExport, env);
+    return {
+      ...resolved,
+      base: opts.basePath,
+      define: {
+        ...resolved.define,
+        __WF_BASE_PATH__: JSON.stringify(opts.basePath),
+        __WF_BASE_URL__: JSON.stringify(
+          opts.basePath.endsWith("/") ? opts.basePath : opts.basePath + "/"
+        ),
+      },
+      // Cloudflare's plugins go first so they sit at the head of the chain;
+      // user plugins are preserved after them (matching pre-1.2 behaviour).
+      plugins: [...opts.cloudflarePlugins, ...(resolved.plugins || [])],
+    };
+  };
+}
+
+async function resolveUserConfig(
+  userExport: UserViteConfig,
+  env: ViteConfigEnv
+): Promise<ViteUserConfig> {
+  if (typeof userExport === "function") {
+    return (await userExport(env)) ?? {};
+  }
+  return userExport ?? {};
+}

package/dist/templates/vite/wrangler.json

@@ -0,0 +1,10 @@
+{
+  "name": "cosmic-builder-dry-run",
+  "main": "./src/worker.ts",
+  "compatibility_date": "2026-01-14",
+  "compatibility_flags": ["nodejs_compat"],
+  "assets": {
+    "binding": "ASSETS",
+    "directory": "./dist"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webflow/webflow-cli",
-  "version": "1.22.0-next.0",
+  "version": "1.22.0-next.2",
   "license": "MIT",
   "bin": {
     "webflow": "./dist/index.js"