webstudio 0.193.0 → 0.195.0

package/lib/cli.js

@@ -325,7 +325,7 @@ import {
   getStaticSiteMapXml,
   replaceFormActionsWithResources
 } from "@webstudio-is/sdk";
-import { createImageLoader } from "@webstudio-is/image";
+import { wsImageLoader } from "@webstudio-is/image";
 
 // src/html-to-jsx.ts
 import {
@@ -834,25 +834,28 @@ Please check webstudio --help for more details`
     if (domain === void 0) {
       throw new Error(`Project domain is missing from the project data`);
     }
-    const assetBuildUrl = `https://${domain}.${appDomain}/cgi/asset/`;
-    const imageLoader = createImageLoader({
-      imageBaseUrl: assetBuildUrl
-    });
+    const assetOrigin = `https://${domain}.${appDomain}`;
     for (const asset of siteData.assets) {
       if (asset.type === "image") {
-        const imageSrc = imageLoader({
+        const imagePath = wsImageLoader({
           src: asset.name,
           format: "raw"
         });
         assetsToDownload.push(
-          limit(() => downloadAsset(imageSrc, asset.name, assetBaseUrl))
+          limit(
+            () => downloadAsset(
+              `${assetOrigin}${imagePath}`,
+              asset.name,
+              assetBaseUrl
+            )
+          )
         );
       }
       if (asset.type === "font") {
         assetsToDownload.push(
           limit(
             () => downloadAsset(
-              `${assetBuildUrl}${asset.name}`,
+              `${assetOrigin}/cgi/asset/${asset.name}`,
               asset.name,
               assetBaseUrl
             )
@@ -1304,7 +1307,7 @@ import makeCLI from "yargs";
 // package.json
 var package_default = {
   name: "webstudio",
-  version: "0.193.0",
+  version: "0.195.0",
   description: "Webstudio CLI",
   author: "Webstudio <github@webstudio.is>",
   homepage: "https://webstudio.is",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.193.0",
+  "version": "0.195.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -37,13 +37,13 @@
     "tinyexec": "^0.3.1",
     "yargs": "^17.7.2",
     "zod": "^3.22.4",
-    "@webstudio-is/http-client": "0.193.0",
-    "@webstudio-is/image": "0.193.0",
-    "@webstudio-is/react-sdk": "0.193.0",
-    "@webstudio-is/sdk-components-react": "0.193.0",
-    "@webstudio-is/sdk": "0.193.0",
-    "@webstudio-is/sdk-components-react-remix": "0.193.0",
-    "@webstudio-is/sdk-components-react-radix": "0.193.0"
+    "@webstudio-is/http-client": "0.195.0",
+    "@webstudio-is/react-sdk": "0.195.0",
+    "@webstudio-is/image": "0.195.0",
+    "@webstudio-is/sdk": "0.195.0",
+    "@webstudio-is/sdk-components-react": "0.195.0",
+    "@webstudio-is/sdk-components-react-radix": "0.195.0",
+    "@webstudio-is/sdk-components-react-remix": "0.195.0"
   },
   "devDependencies": {
     "@netlify/remix-adapter": "^2.5.1",

package/templates/defaults/app/constants.mjs

@@ -9,5 +9,5 @@ export const imageBaseUrl = "/assets/";
  * @type {import("@webstudio-is/image").ImageLoader}
  */
 export const imageLoader = ({ src }) => {
-  return imageBaseUrl + src;
+  return src;
 };

package/templates/defaults/app/route-templates/html.tsx

@@ -31,7 +31,7 @@ import {
   projectId,
   contactEmail,
 } from "__SERVER__";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "__CONSTANTS__";
+import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
 import css from "__CSS__?url";
 import { sitemap } from "__SITEMAP__";
 
@@ -329,7 +329,6 @@ const Outlet = () => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >

package/templates/defaults/app/route-templates/xml.tsx

@@ -4,7 +4,7 @@ import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import { Page } from "__CLIENT__";
 import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "__CONSTANTS__";
+import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
 import { sitemap } from "__SITEMAP__";
 
 const customFetch: typeof fetch = (input, init) => {
@@ -61,7 +61,6 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >

package/templates/defaults/package.json

@@ -11,12 +11,12 @@
     "@remix-run/node": "2.15.0",
     "@remix-run/react": "2.15.0",
     "@remix-run/server-runtime": "2.15.0",
-    "@webstudio-is/react-sdk": "0.193.0",
-    "@webstudio-is/sdk-components-react-radix": "0.193.0",
-    "@webstudio-is/sdk-components-react-remix": "0.193.0",
-    "@webstudio-is/sdk-components-react": "0.193.0",
-    "@webstudio-is/image": "0.193.0",
-    "@webstudio-is/sdk": "0.193.0",
+    "@webstudio-is/react-sdk": "0.195.0",
+    "@webstudio-is/sdk-components-react-radix": "0.195.0",
+    "@webstudio-is/sdk-components-react-remix": "0.195.0",
+    "@webstudio-is/sdk-components-react": "0.195.0",
+    "@webstudio-is/image": "0.195.0",
+    "@webstudio-is/sdk": "0.195.0",
     "isbot": "^5.1.17",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"

package/templates/netlify-edge-functions/app/constants.mjs

@@ -10,17 +10,17 @@ export const imageBaseUrl = "/assets/";
  */
 export const imageLoader = (props) => {
   if (process.env.NODE_ENV !== "production") {
-    return imageBaseUrl + props.src;
+    return props.src;
   }
 
   if (props.format === "raw") {
-    return imageBaseUrl + props.src;
+    return props.src;
   }
 
   // https://docs.netlify.com/image-cdn/overview/
   return (
     "/.netlify/images?url=" +
-    encodeURIComponent(imageBaseUrl + props.src) +
+    encodeURIComponent(props.src) +
     "&w=" +
     props.width +
     "&q=" +

package/templates/netlify-functions/app/constants.mjs

@@ -10,17 +10,17 @@ export const imageBaseUrl = "/assets/";
  */
 export const imageLoader = (props) => {
   if (process.env.NODE_ENV !== "production") {
-    return imageBaseUrl + props.src;
+    return props.src;
   }
 
   if (props.format === "raw") {
-    return imageBaseUrl + props.src;
+    return props.src;
   }
 
   // https://docs.netlify.com/image-cdn/overview/
   return (
     "/.netlify/images?url=" +
-    encodeURIComponent(imageBaseUrl + props.src) +
+    encodeURIComponent(props.src) +
     "&w=" +
     props.width +
     "&q=" +

package/templates/ssg/app/constants.mjs

@@ -2,7 +2,6 @@
  * We use mjs extension as constants in this file is shared with the build script
  * and we use `node --eval` to extract the constants.
  */
-import { UrlCanParse } from "@webstudio-is/image";
 
 export const assetBaseUrl = "/assets/";
 export const imageBaseUrl = "/assets/";
@@ -11,9 +10,5 @@ export const imageBaseUrl = "/assets/";
  * @type {import("@webstudio-is/image").ImageLoader}
  */
 export const imageLoader = ({ src }) => {
-  if (UrlCanParse(src)) {
-    return src;
-  }
-
-  return imageBaseUrl + src;
+  return src;
 };

package/templates/ssg/app/route-templates/html/+Page.tsx

@@ -1,6 +1,6 @@
 import type { PageContext } from "vike/types";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "__CONSTANTS__";
+import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
 import { Page } from "__CLIENT__";
 
 const PageComponent = ({ data }: { data: PageContext["data"] }) => {
@@ -10,7 +10,6 @@ const PageComponent = ({ data }: { data: PageContext["data"] }) => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >

package/templates/ssg/package.json

@@ -8,11 +8,11 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@webstudio-is/react-sdk": "0.193.0",
-    "@webstudio-is/sdk-components-react-radix": "0.193.0",
-    "@webstudio-is/sdk-components-react": "0.193.0",
-    "@webstudio-is/image": "0.193.0",
-    "@webstudio-is/sdk": "0.193.0",
+    "@webstudio-is/react-sdk": "0.195.0",
+    "@webstudio-is/sdk-components-react-radix": "0.195.0",
+    "@webstudio-is/sdk-components-react": "0.195.0",
+    "@webstudio-is/image": "0.195.0",
+    "@webstudio-is/sdk": "0.195.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vike": "^0.4.206"

package/templates/ssg-netlify/app/constants.mjs

@@ -16,17 +16,17 @@ export const imageLoader = (props) => {
   }
 
   if (process.env.NODE_ENV !== "production") {
-    return imageBaseUrl + props.src;
+    return props.src;
   }
 
   if (props.format === "raw") {
-    return imageBaseUrl + props.src;
+    return props.src;
   }
 
   // https://docs.netlify.com/image-cdn/overview/
   return (
     "/.netlify/images?url=" +
-    encodeURIComponent(imageBaseUrl + props.src) +
+    encodeURIComponent(props.src) +
     "&w=" +
     props.width +
     "&q=" +

package/templates/ssg-vercel/app/constants.mjs

@@ -16,17 +16,17 @@ export const imageLoader = (props) => {
   }
 
   if (process.env.NODE_ENV !== "production") {
-    return imageBaseUrl + props.src;
+    return props.src;
   }
 
   if (props.format === "raw") {
-    return imageBaseUrl + props.src;
+    return props.src;
   }
 
   // https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
   return (
     "/_vercel/image?url=" +
-    encodeURIComponent(imageBaseUrl + props.src) +
+    encodeURIComponent(props.src) +
     "&w=" +
     props.width +
     "&q=" +

package/templates/vercel/app/constants.mjs

@@ -10,17 +10,17 @@ export const imageBaseUrl = "/assets/";
  */
 export const imageLoader = (props) => {
   if (process.env.NODE_ENV !== "production") {
-    return imageBaseUrl + props.src;
+    return props.src;
   }
 
   if (props.format === "raw") {
-    return imageBaseUrl + props.src;
+    return props.src;
   }
 
   // https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
   return (
     "/_vercel/image?url=" +
-    encodeURIComponent(imageBaseUrl + props.src) +
+    encodeURIComponent(props.src) +
     "&w=" +
     props.width +
     "&q=" +