refactor: drop image base url from cli and templates

In all cli templates asset base url and image base url are the same so we can safely switch. Removed image loader from prebuild.ts. Dropped imageBaseUrl from sdk react context.
webstudio-is · Dec 11, 2024 · c1045ce · c1045ce
1 parent f7f98b6
commit c1045ce
Show file tree

Hide file tree

Showing 51 changed files with 98 additions and 183 deletions.
diff --git a/apps/builder/app/canvas/canvas.tsx b/apps/builder/app/canvas/canvas.tsx
@@ -119,7 +119,6 @@ const useElementsTree = (
       <ReactSdkContext.Provider
         value={{
           renderer: isPreviewMode ? "preview" : "canvas",
-          imageBaseUrl: "/cgi/image/",
           assetBaseUrl: params.assetBaseUrl,
           imageLoader,
           resources: {},

diff --git a/apps/builder/app/routes/_canvas.canvas.tsx b/apps/builder/app/routes/_canvas.canvas.tsx
@@ -16,7 +16,6 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   }
 
   const params: Params = {
-    imageBaseUrl: "/cgi/image/",
     assetBaseUrl: env.ASSET_BASE_URL,
   };
 

diff --git a/apps/builder/app/shared/nano-states/props.test.ts b/apps/builder/app/shared/nano-states/props.test.ts
@@ -243,7 +243,6 @@ test("resolve asset prop values when params is provided", () => {
 
   $params.set({
     assetBaseUrl: "/asset/",
-    imageBaseUrl: "/image/",
   });
   expect(
     $propValuesByInstanceSelector.get().get(JSON.stringify(["box"]))
@@ -279,7 +278,6 @@ test("resolve page prop values when params is provided", () => {
 
   $params.set({
     assetBaseUrl: "/asset/",
-    imageBaseUrl: "/image/",
   });
   expect(
     $propValuesByInstanceSelector.get().get(JSON.stringify(["box"]))

diff --git a/fixtures/ssg-netlify-by-project-id/app/constants.mjs b/fixtures/ssg-netlify-by-project-id/app/constants.mjs
@@ -16,17 +16,17 @@ export const imageLoader = (props) => {
   }
 
   if (process.env.NODE_ENV !== "production") {
-    return imageBaseUrl + props.src;
+    return assetBaseUrl + props.src;
   }
 
   if (props.format === "raw") {
-    return imageBaseUrl + props.src;
+    return assetBaseUrl + props.src;
   }
 
   // https://docs.netlify.com/image-cdn/overview/
   return (
     "/.netlify/images?url=" +
-    encodeURIComponent(imageBaseUrl + props.src) +
+    encodeURIComponent(assetBaseUrl + props.src) +
     "&w=" +
     props.width +
     "&q=" +

diff --git a/fixtures/ssg-netlify-by-project-id/pages/index/+Page.tsx b/fixtures/ssg-netlify-by-project-id/pages/index/+Page.tsx
@@ -1,10 +1,6 @@
 import type { PageContext } from "vike/types";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
-import {
-  assetBaseUrl,
-  imageBaseUrl,
-  imageLoader,
-} from "../../app/constants.mjs";
+import { assetBaseUrl, imageLoader } from "../../app/constants.mjs";
 import { Page } from "../../app/__generated__/_index";
 
 const PageComponent = ({ data }: { data: PageContext["data"] }) => {
@@ -14,7 +10,6 @@ const PageComponent = ({ data }: { data: PageContext["data"] }) => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >

diff --git a/fixtures/ssg/app/constants.mjs b/fixtures/ssg/app/constants.mjs
@@ -15,5 +15,5 @@ export const imageLoader = ({ src }) => {
     return src;
   }
 
-  return imageBaseUrl + src;
+  return assetBaseUrl + src;
 };
diff --git a/fixtures/ssg/pages/another-page/+Page.tsx b/fixtures/ssg/pages/another-page/+Page.tsx
@@ -1,10 +1,6 @@
 import type { PageContext } from "vike/types";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
-import {
-  assetBaseUrl,
-  imageBaseUrl,
-  imageLoader,
-} from "../../app/constants.mjs";
+import { assetBaseUrl, imageLoader } from "../../app/constants.mjs";
 import { Page } from "../../app/__generated__/[another-page]._index";
 
 const PageComponent = ({ data }: { data: PageContext["data"] }) => {
@@ -14,7 +10,6 @@ const PageComponent = ({ data }: { data: PageContext["data"] }) => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >

diff --git a/fixtures/ssg/pages/index/+Page.tsx b/fixtures/ssg/pages/index/+Page.tsx
@@ -1,10 +1,6 @@
 import type { PageContext } from "vike/types";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
-import {
-  assetBaseUrl,
-  imageBaseUrl,
-  imageLoader,
-} from "../../app/constants.mjs";
+import { assetBaseUrl, imageLoader } from "../../app/constants.mjs";
 import { Page } from "../../app/__generated__/_index";
 
 const PageComponent = ({ data }: { data: PageContext["data"] }) => {
@@ -14,7 +10,6 @@ const PageComponent = ({ data }: { data: PageContext["data"] }) => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >

diff --git a/fixtures/webstudio-cloudflare-template/app/constants.mjs b/fixtures/webstudio-cloudflare-template/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 assetBaseUrl + src;
 };
diff --git a/fixtures/webstudio-cloudflare-template/app/routes/[another-page]._index.tsx b/fixtures/webstudio-cloudflare-template/app/routes/[another-page]._index.tsx
@@ -31,7 +31,7 @@ import {
   projectId,
   contactEmail,
 } from "../__generated__/[another-page]._index.server";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
+import { assetBaseUrl, imageLoader } from "../constants.mjs";
 import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
@@ -329,7 +329,6 @@ const Outlet = () => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >

diff --git a/fixtures/webstudio-cloudflare-template/app/routes/_index.tsx b/fixtures/webstudio-cloudflare-template/app/routes/_index.tsx
@@ -31,7 +31,7 @@ import {
   projectId,
   contactEmail,
 } from "../__generated__/_index.server";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
+import { assetBaseUrl, imageLoader } from "../constants.mjs";
 import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
@@ -329,7 +329,6 @@ const Outlet = () => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >

diff --git a/fixtures/webstudio-custom-template/app/constants.mjs b/fixtures/webstudio-custom-template/app/constants.mjs
@@ -9,5 +9,5 @@ export const imageBaseUrl = "/custom-folder/";
  * @type {import("@webstudio-is/image").ImageLoader}
  */
 export const imageLoader = ({ src }) => {
-  return imageBaseUrl + src;
+  return assetBaseUrl + src;
 };
diff --git a/fixtures/webstudio-custom-template/app/routes/[script-test]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[script-test]._index.tsx
@@ -31,7 +31,7 @@ import {
   projectId,
   contactEmail,
 } from "../__generated__/[script-test]._index.server";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
+import { assetBaseUrl, imageLoader } from "../constants.mjs";
 import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
@@ -329,7 +329,6 @@ const Outlet = () => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >

diff --git a/fixtures/webstudio-custom-template/app/routes/[sitemap.xml]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[sitemap.xml]._index.tsx
@@ -8,7 +8,7 @@ import {
   getRemixParams,
   getResources,
 } from "../__generated__/[sitemap.xml]._index.server";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
+import { assetBaseUrl, imageLoader } from "../constants.mjs";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
 const customFetch: typeof fetch = (input, init) => {
@@ -65,7 +65,6 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >

diff --git a/fixtures/webstudio-custom-template/app/routes/[world]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[world]._index.tsx
@@ -31,7 +31,7 @@ import {
   projectId,
   contactEmail,
 } from "../__generated__/[world]._index.server";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
+import { assetBaseUrl, imageLoader } from "../constants.mjs";
 import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
@@ -329,7 +329,6 @@ const Outlet = () => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >

diff --git a/fixtures/webstudio-custom-template/app/routes/_index.tsx b/fixtures/webstudio-custom-template/app/routes/_index.tsx
@@ -31,7 +31,7 @@ import {
   projectId,
   contactEmail,
 } from "../__generated__/_index.server";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
+import { assetBaseUrl, imageLoader } from "../constants.mjs";
 import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
@@ -329,7 +329,6 @@ const Outlet = () => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >

diff --git a/fixtures/webstudio-custom-template/custom-template/app/constants.mjs b/fixtures/webstudio-custom-template/custom-template/app/constants.mjs
@@ -9,5 +9,5 @@ export const imageBaseUrl = "/custom-folder/";
  * @type {import("@webstudio-is/image").ImageLoader}
  */
 export const imageLoader = ({ src }) => {
-  return imageBaseUrl + src;
+  return assetBaseUrl + src;
 };
diff --git a/fixtures/webstudio-remix-netlify-edge-functions/app/constants.mjs b/fixtures/webstudio-remix-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 assetBaseUrl + props.src;
   }
 
   if (props.format === "raw") {
-    return imageBaseUrl + props.src;
+    return assetBaseUrl + props.src;
   }
 
   // https://docs.netlify.com/image-cdn/overview/
   return (
     "/.netlify/images?url=" +
-    encodeURIComponent(imageBaseUrl + props.src) +
+    encodeURIComponent(assetBaseUrl + props.src) +
     "&w=" +
     props.width +
     "&q=" +

diff --git a/fixtures/webstudio-remix-netlify-edge-functions/app/routes/[another-page]._index.tsx b/fixtures/webstudio-remix-netlify-edge-functions/app/routes/[another-page]._index.tsx
@@ -31,7 +31,7 @@ import {
   projectId,
   contactEmail,
 } from "../__generated__/[another-page]._index.server";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
+import { assetBaseUrl, imageLoader } from "../constants.mjs";
 import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
@@ -329,7 +329,6 @@ const Outlet = () => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >

diff --git a/fixtures/webstudio-remix-netlify-edge-functions/app/routes/_index.tsx b/fixtures/webstudio-remix-netlify-edge-functions/app/routes/_index.tsx
@@ -31,7 +31,7 @@ import {
   projectId,
   contactEmail,
 } from "../__generated__/_index.server";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
+import { assetBaseUrl, imageLoader } from "../constants.mjs";
 import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
@@ -329,7 +329,6 @@ const Outlet = () => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >

diff --git a/fixtures/webstudio-remix-netlify-functions/app/constants.mjs b/fixtures/webstudio-remix-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 assetBaseUrl + props.src;
   }
 
   if (props.format === "raw") {
-    return imageBaseUrl + props.src;
+    return assetBaseUrl + props.src;
   }
 
   // https://docs.netlify.com/image-cdn/overview/
   return (
     "/.netlify/images?url=" +
-    encodeURIComponent(imageBaseUrl + props.src) +
+    encodeURIComponent(assetBaseUrl + props.src) +
     "&w=" +
     props.width +
     "&q=" +

diff --git a/fixtures/webstudio-remix-netlify-functions/app/routes/[another-page]._index.tsx b/fixtures/webstudio-remix-netlify-functions/app/routes/[another-page]._index.tsx
@@ -31,7 +31,7 @@ import {
   projectId,
   contactEmail,
 } from "../__generated__/[another-page]._index.server";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
+import { assetBaseUrl, imageLoader } from "../constants.mjs";
 import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
@@ -329,7 +329,6 @@ const Outlet = () => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >

diff --git a/fixtures/webstudio-remix-netlify-functions/app/routes/_index.tsx b/fixtures/webstudio-remix-netlify-functions/app/routes/_index.tsx
@@ -31,7 +31,7 @@ import {
   projectId,
   contactEmail,
 } from "../__generated__/_index.server";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
+import { assetBaseUrl, imageLoader } from "../constants.mjs";
 import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
@@ -329,7 +329,6 @@ const Outlet = () => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >

diff --git a/fixtures/webstudio-remix-vercel/app/constants.mjs b/fixtures/webstudio-remix-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 assetBaseUrl + props.src;
   }
 
   if (props.format === "raw") {
-    return imageBaseUrl + props.src;
+    return assetBaseUrl + props.src;
   }
 
   // https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
   return (
     "/_vercel/image?url=" +
-    encodeURIComponent(imageBaseUrl + props.src) +
+    encodeURIComponent(assetBaseUrl + props.src) +
     "&w=" +
     props.width +
     "&q=" +

diff --git a/fixtures/webstudio-remix-vercel/app/routes/[_route_with_symbols_]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[_route_with_symbols_]._index.tsx
@@ -31,7 +31,7 @@ import {
   projectId,
   contactEmail,
 } from "../__generated__/[_route_with_symbols_]._index.server";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
+import { assetBaseUrl, imageLoader } from "../constants.mjs";
 import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
@@ -329,7 +329,6 @@ const Outlet = () => {
       value={{
         imageLoader,
         assetBaseUrl,
-        imageBaseUrl,
         resources,
       }}
     >
-Original file line number
+Diff line change
@@ Expand Up @@
       }
       const params: Params = {
-        imageBaseUrl: "/cgi/image/",
         assetBaseUrl: env.ASSET_BASE_URL,
       };
@@ Expand Down @@