@webflow/webflow-cli 1.8.37 → 1.8.39

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

@@ -10,22 +10,13 @@ const webflowOverrides = {
   base: "${COSMIC_MOUNT_PATH}",
   output: "server",
   adapter: cloudflare({
+    imageService: "custom",
     platformProxy: {
       enabled: true
     }
   }),
 
   integrations: [react()],
-
-  build: {
-    assetsPrefix: "${COSMIC_DEPLOY_URL}${COSMIC_MOUNT_PATH}"
-  }
-};
-
-// https://astro.build/config
-export default defineConfig({
-  ...userConfig,
-  ...webflowOverrides,
   vite: {
     ...userConfig.vite,
     resolve: {
@@ -37,4 +28,25 @@ export default defineConfig({
       } : undefined,
     },
   },
-});
+
+  build: {
+    assetsPrefix: "${COSMIC_DEPLOY_URL}${COSMIC_MOUNT_PATH}"
+  },
+
+  image: {
+    ...userConfig.image,
+    service: {
+      entrypoint: "./webflow-loader.ts",
+      config: {
+        deployUrl: "${COSMIC_DEPLOY_URL}",
+        mountPath: "${COSMIC_MOUNT_PATH}"
+      }
+    },
+  }
+};
+
+// https://astro.build/config
+export default defineConfig({
+  ...userConfig,
+  ...webflowOverrides,
+});

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

@@ -0,0 +1,112 @@
+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/nextjs/next.config.ts

@@ -0,0 +1,5 @@
+// For tests
+export default {
+  basePath: "",
+  assetPrefix: "",
+};

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

@@ -2,8 +2,15 @@ import type { NextConfig } from "next";
 import userConfig from './clouduser.next.config';
 
 const webflowOverrides: NextConfig = {
-  basePath: "${COSMIC_MOUNT_PATH}",
-  assetPrefix: "${COSMIC_DEPLOY_URL}${COSMIC_MOUNT_PATH}",
+  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',
+  },
 };
 
 const nextConfig: NextConfig = {

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

@@ -0,0 +1,36 @@
+import config from './next.config';
+
+const basePath = config.basePath || '';
+const assetPrefix = config.assetPrefix || basePath;
+
+function normalizeSrc(src: string) {
+  // For local assets, include the base path but not the asset prefix, and remove the leading slash
+  if (assetPrefix && src.startsWith(assetPrefix)) {
+    return `${basePath}${src.slice(assetPrefix.length)}`.slice(1);
+  } else if (basePath && src.startsWith(basePath)) {
+    return src.slice(1);
+  } else if (src.startsWith('/')) {
+    return `${basePath}${src}`.slice(1);
+  }
+  return src;
+}
+
+export default function cloudflareLoader({ src, width, quality }: { src: string; width: number; quality?: number }) {
+  const normalizedSrc = normalizeSrc(src);
+
+  // 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 params = [`width=${width}`];
+  if (quality) {
+    params.push(`quality=${quality}`);
+  }
+  const paramsString = params.join(',');
+  const workerUrl = `${assetPrefix.slice(0, -basePath.length)}`;
+  return `${workerUrl}/cdn-cgi/image/${paramsString}/${normalizedSrc}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webflow/webflow-cli",
-  "version": "1.8.37",
+  "version": "1.8.39",
   "license": "MIT",
   "bin": {
     "webflow": "./dist/index.js"
@@ -24,8 +24,8 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.27.0",
     "@dotenvx/dotenvx": "^1.44.1",
-    "@module-federation/enhanced": "^0.18.0",
-    "@webflow/data-types": "0.0.11",
+    "@module-federation/enhanced": "0.18.3",
+    "@webflow/data-types": "0.0.12",
     "ajv": "^8.17.1",
     "archiver": "^5.3.1",
     "babel-loader": "^10.0.0",
@@ -37,6 +37,7 @@
     "env-paths": "^3.0.0",
     "fast-glob": "^3.3.3",
     "filenamify": "^6.0.0",
+    "fork-ts-checker-webpack-plugin": "9.1.0",
     "form-data": "4.0.0",
     "fs-extra": "^11.3.0",
     "inquirer": "^9.1.4",
@@ -79,6 +80,7 @@
     "@types/serve-handler": "^6.1.1",
     "@types/source-map": "^0.5.2",
     "@types/webpack-node-externals": "^3.0.4",
+    "astro": "^5.7.0",
     "eslint-config-custom": "*",
     "express": "^4.18.1",
     "jest": "^29.3.1",