refactor: drop image base url from cli and templates (#4563)

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.

Author: TrySound

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: {},

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,
   };
 

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"]))

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=" +

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,
       }}
     >

fixtures/ssg/app/constants.mjs

@@ -15,5 +15,5 @@ export const imageLoader = ({ src }) => {
     return src;
   }
 
-  return imageBaseUrl + src;
+  return assetBaseUrl + src;
 };

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,
       }}
     >

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,
       }}
     >

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;
 };

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,
       }}
     >