webstudio 0.195.0 → 0.197.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.195.0",
+  "version": "0.197.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -26,52 +26,56 @@
     "node": ">=20.12"
   },
   "dependencies": {
-    "@clack/prompts": "^0.7.0",
+    "@clack/prompts": "^0.9.0",
+    "@emotion/hash": "^0.9.2",
+    "acorn": "^8.14.0",
+    "acorn-walk": "^8.3.4",
     "change-case": "^5.4.4",
     "deepmerge": "^4.3.1",
     "env-paths": "^3.0.0",
-    "p-limit": "^4.0.0",
-    "parse5": "7.1.2",
-    "picocolors": "^1.1.0",
-    "strip-indent": "^4.0.0",
-    "tinyexec": "^0.3.1",
+    "nanoid": "^5.0.9",
+    "p-limit": "^6.2.0",
+    "parse5": "7.2.1",
+    "picocolors": "^1.1.1",
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "reserved-identifiers": "^1.0.0",
+    "tinyexec": "^0.3.2",
+    "warn-once": "^0.1.1",
     "yargs": "^17.7.2",
-    "zod": "^3.22.4",
-    "@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"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@netlify/remix-adapter": "^2.5.1",
     "@netlify/remix-edge-adapter": "3.4.2",
-    "@remix-run/cloudflare": "^2.15.0",
-    "@remix-run/cloudflare-pages": "^2.15.0",
-    "@remix-run/dev": "^2.15.0",
-    "@remix-run/node": "^2.15.0",
-    "@remix-run/react": "^2.15.0",
-    "@remix-run/server-runtime": "^2.15.0",
-    "@types/node": "^22.9.3",
+    "@remix-run/cloudflare": "^2.15.2",
+    "@remix-run/cloudflare-pages": "^2.15.2",
+    "@remix-run/dev": "^2.15.2",
+    "@remix-run/node": "^2.15.2",
+    "@remix-run/react": "^2.15.2",
+    "@remix-run/server-runtime": "^2.15.2",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "@types/yargs": "^17.0.33",
     "@vitejs/plugin-react": "^4.3.4",
     "prettier": "3.4.2",
-    "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "ts-expect": "^1.3.0",
-    "vike": "^0.4.206",
+    "vike": "^0.4.210",
     "vite": "^5.4.11",
     "vitest": "^2.1.8",
     "wrangler": "^3.63.2",
+    "@webstudio-is/http-client": "0.197.0",
+    "@webstudio-is/image": "0.197.0",
+    "@webstudio-is/react-sdk": "0.197.0",
+    "@webstudio-is/sdk": "0.197.0",
+    "@webstudio-is/sdk-components-react": "0.197.0",
+    "@webstudio-is/sdk-components-react-remix": "0.197.0",
+    "@webstudio-is/sdk-components-react-radix": "0.197.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "typecheck": "tsc",
-    "build": "rm -rf lib && esbuild src/cli.ts --outdir=lib --bundle --format=esm --packages=external",
+    "build": "rm -rf lib && vite build",
     "test": "vitest run"
   }
 }

package/templates/cloudflare/package.json

@@ -12,8 +12,8 @@
     "build-cf-types": "wrangler types"
   },
   "dependencies": {
-    "@remix-run/cloudflare": "2.15.0",
-    "@remix-run/cloudflare-pages": "2.15.0"
+    "@remix-run/cloudflare": "2.15.2",
+    "@remix-run/cloudflare-pages": "2.15.2"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240620.0",

package/templates/cloudflare/vite.config.ts

@@ -8,6 +8,14 @@ export default defineConfig(({ mode }) => ({
   plugins: [
     // without this, remixCloudflareDevProxy trying to load workerd even for production (it's not needed for production)
     mode === "production" ? undefined : remixCloudflareDevProxy(),
-    remix(),
+    remix({
+      future: {
+        v3_lazyRouteDiscovery: false,
+        v3_relativeSplatPath: false,
+        v3_singleFetch: false,
+        v3_fetcherPersist: false,
+        v3_throwAbortReason: false,
+      },
+    }),
   ].filter(Boolean),
 }));

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

@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        src: `${assetBaseUrl}${favIconAsset.name}`,
         // width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
         width: 144,
         height: 144,

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

@@ -1,7 +1,10 @@
 import { renderToString } from "react-dom/server";
 import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
 import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
-import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
+import {
+  ReactSdkContext,
+  xmlNodeTagSuffix,
+} from "@webstudio-is/react-sdk/runtime";
 import { Page } from "__CLIENT__";
 import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
@@ -72,6 +75,10 @@ export const loader = async (arg: LoaderFunctionArgs) => {
   // More details: https://github.com/facebook/react/blob/7c8e5e7ab8bb63de911637892392c5efd8ce1d0f/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L3083
   text = text.replace(/^<svg>/g, "").replace(/<\/svg>$/g, "");
 
+  // React has issues rendering certain elements, such as errors when a <link> element has children.
+  // To render XML, we wrap it with an <svg> tag and add a suffix to avoid React's default behavior on these elements.
+  text = text.replaceAll(xmlNodeTagSuffix, "");
+
   return new Response(`<?xml version="1.0" encoding="UTF-8"?>\n${text}`, {
     headers: { "Content-Type": "application/xml" },
   });

package/templates/defaults/package.json

@@ -8,21 +8,21 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/node": "2.15.0",
-    "@remix-run/react": "2.15.0",
-    "@remix-run/server-runtime": "2.15.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",
+    "@remix-run/node": "2.15.2",
+    "@remix-run/react": "2.15.2",
+    "@remix-run/server-runtime": "2.15.2",
+    "@webstudio-is/react-sdk": "0.197.0",
+    "@webstudio-is/sdk-components-react-radix": "0.197.0",
+    "@webstudio-is/sdk-components-react-remix": "0.197.0",
+    "@webstudio-is/sdk-components-react": "0.197.0",
+    "@webstudio-is/image": "0.197.0",
+    "@webstudio-is/sdk": "0.197.0",
+    "isbot": "^5.1.19",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "devDependencies": {
-    "@remix-run/dev": "2.15.0",
+    "@remix-run/dev": "2.15.2",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "typescript": "5.7.2",

package/templates/defaults/vite.config.ts

@@ -2,5 +2,15 @@ import { defineConfig } from "vite";
 import { vitePlugin as remix } from "@remix-run/dev";
 
 export default defineConfig({
-  plugins: [remix()],
+  plugins: [
+    remix({
+      future: {
+        v3_lazyRouteDiscovery: false,
+        v3_relativeSplatPath: false,
+        v3_singleFetch: false,
+        v3_fetcherPersist: false,
+        v3_throwAbortReason: false,
+      },
+    }),
+  ],
 });

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

@@ -18,12 +18,13 @@ export const imageLoader = (props) => {
   }
 
   // https://docs.netlify.com/image-cdn/overview/
-  return (
-    "/.netlify/images?url=" +
-    encodeURIComponent(props.src) +
-    "&w=" +
-    props.width +
-    "&q=" +
-    props.quality
-  );
+  const searchParams = new URLSearchParams();
+  searchParams.set("url", props.src);
+  searchParams.set("w", props.width.toString());
+  if (props.height) {
+    searchParams.set("h", props.height.toString());
+  }
+  searchParams.set("q", props.quality.toString());
+  // fit=contain by default
+  return `/.netlify/images?${searchParams}`;
 };

package/templates/netlify-edge-functions/vite.config.ts

@@ -3,5 +3,16 @@ import { defineConfig } from "vite";
 import { netlifyPlugin } from "@netlify/remix-edge-adapter/plugin";
 
 export default defineConfig({
-  plugins: [remix(), netlifyPlugin()],
+  plugins: [
+    remix({
+      future: {
+        v3_lazyRouteDiscovery: false,
+        v3_relativeSplatPath: false,
+        v3_singleFetch: false,
+        v3_fetcherPersist: false,
+        v3_throwAbortReason: false,
+      },
+    }),
+    netlifyPlugin(),
+  ],
 });

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

@@ -18,12 +18,13 @@ export const imageLoader = (props) => {
   }
 
   // https://docs.netlify.com/image-cdn/overview/
-  return (
-    "/.netlify/images?url=" +
-    encodeURIComponent(props.src) +
-    "&w=" +
-    props.width +
-    "&q=" +
-    props.quality
-  );
+  const searchParams = new URLSearchParams();
+  searchParams.set("url", props.src);
+  searchParams.set("w", props.width.toString());
+  if (props.height) {
+    searchParams.set("h", props.height.toString());
+  }
+  searchParams.set("q", props.quality.toString());
+  // fit=contain by default
+  return `/.netlify/images?${searchParams}`;
 };

package/templates/netlify-functions/package.json

@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "start": "netlify serve"
+    "start": "npx netlify-cli serve"
   },
   "dependencies": {
     "@netlify/functions": "^2.8.2",

package/templates/netlify-functions/vite.config.ts

@@ -3,5 +3,16 @@ import { defineConfig } from "vite";
 import { netlifyPlugin } from "@netlify/remix-adapter/plugin";
 
 export default defineConfig({
-  plugins: [remix(), netlifyPlugin()],
+  plugins: [
+    remix({
+      future: {
+        v3_lazyRouteDiscovery: false,
+        v3_relativeSplatPath: false,
+        v3_singleFetch: false,
+        v3_fetcherPersist: false,
+        v3_throwAbortReason: false,
+      },
+    }),
+    netlifyPlugin(),
+  ],
 });

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

@@ -60,7 +60,7 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
         <link
           rel="icon"
           href={imageLoader({
-            src: favIconAsset.name,
+            src: `${assetBaseUrl}${favIconAsset.name}`,
             // width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
             width: 144,
             height: 144,

package/templates/ssg/package.json

@@ -8,14 +8,14 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@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",
+    "@webstudio-is/react-sdk": "0.197.0",
+    "@webstudio-is/sdk-components-react-radix": "0.197.0",
+    "@webstudio-is/sdk-components-react": "0.197.0",
+    "@webstudio-is/image": "0.197.0",
+    "@webstudio-is/sdk": "0.197.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "vike": "^0.4.206"
+    "vike": "^0.4.210"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",

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

@@ -24,12 +24,13 @@ export const imageLoader = (props) => {
   }
 
   // https://docs.netlify.com/image-cdn/overview/
-  return (
-    "/.netlify/images?url=" +
-    encodeURIComponent(props.src) +
-    "&w=" +
-    props.width +
-    "&q=" +
-    props.quality
-  );
+  const searchParams = new URLSearchParams();
+  searchParams.set("url", props.src);
+  searchParams.set("w", props.width.toString());
+  if (props.height) {
+    searchParams.set("h", props.height.toString());
+  }
+  searchParams.set("q", props.quality.toString());
+  // fit=contain by default
+  return `/.netlify/images?${searchParams}`;
 };

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

@@ -24,12 +24,9 @@ export const imageLoader = (props) => {
   }
 
   // https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
-  return (
-    "/_vercel/image?url=" +
-    encodeURIComponent(props.src) +
-    "&w=" +
-    props.width +
-    "&q=" +
-    props.quality
-  );
+  const searchParams = new URLSearchParams();
+  searchParams.set("url", props.src);
+  searchParams.set("w", props.width.toString());
+  searchParams.set("q", props.quality.toString());
+  return `/_vercel/image?${searchParams}`;
 };

package/templates/vercel/app/constants.mjs

@@ -18,12 +18,9 @@ export const imageLoader = (props) => {
   }
 
   // https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
-  return (
-    "/_vercel/image?url=" +
-    encodeURIComponent(props.src) +
-    "&w=" +
-    props.width +
-    "&q=" +
-    props.quality
-  );
+  const searchParams = new URLSearchParams();
+  searchParams.set("url", props.src);
+  searchParams.set("w", props.width.toString());
+  searchParams.set("q", props.quality.toString());
+  return `/_vercel/image?${searchParams}`;
 };