webstudio 0.0.0-2738e1e → 0.0.0-5558cd0

package/lib/cli.js

@@ -84,6 +84,11 @@ const PROJECT_TEMPLATES = [
   {
     value: "vercel",
     label: "Vercel",
+    expand: ["react-router", "react-router-vercel"]
+  },
+  {
+    value: "vercel-legacy",
+    label: "Vercel (legacy)",
     expand: ["defaults", "vercel"]
   },
   {
@@ -93,12 +98,12 @@ const PROJECT_TEMPLATES = [
   },
   {
     value: "netlify-functions",
-    label: "Netlify Functions",
+    label: "Netlify Functions (legacy)",
     expand: ["defaults", "netlify-functions"]
   },
   {
     value: "netlify-edge-functions",
-    label: "Netlify Edge Functions",
+    label: "Netlify Edge Functions (legacy)",
     expand: ["defaults", "netlify-edge-functions"]
   },
   {
@@ -746,19 +751,13 @@ const prefixStyles = (styleMap) => {
     if (property === "backdrop-filter") {
       newStyleMap.set("-webkit-backdrop-filter", value);
     }
+    if (property === "view-timeline-name" || property === "scroll-timeline-name") {
+      newStyleMap.set(`--${property}`, value);
+    }
     newStyleMap.set(property, value);
   }
   return newStyleMap;
 };
-const captureError = (error, value) => {
-  if (process.env.NODE_ENV === "development") {
-    throw error;
-  }
-  setTimeout(() => {
-    throw error;
-  });
-  return value;
-};
 const fallbackTransform = (styleValue) => {
   var _a;
   if (styleValue.type !== "fontFamily") {
@@ -850,7 +849,7 @@ const toValue = (styleValue, transformValue) => {
   if (value.type === "guaranteedInvalid") {
     return "";
   }
-  return captureError(new Error("Unknown value type"), value);
+  return "";
 };
 const Unit = z.string();
 const UnitValue = z.object({
@@ -3451,7 +3450,7 @@ ${prop.name}={${propValue}}`;
       return "";
     }
     const indexVariable = scope.getName(`${instance.id}-index`, "index");
-    generatedElement += `{${collectionDataValue}?.map((${collectionItemValue}: any, ${indexVariable}: number) =>
+    generatedElement += `{${collectionDataValue}?.map?.((${collectionItemValue}: any, ${indexVariable}: number) =>
 `;
     generatedElement += `<Fragment key={${indexVariable}}>
 `;
@@ -6000,7 +5999,7 @@ Please check webstudio --help for more details`
         assetsToDownload.push(
           limit(
             () => downloadAsset(
-              `${assetOrigin}/cgi/image/${asset.name}`,
+              `${assetOrigin}/cgi/image/${asset.name}?format=raw`,
               asset.name,
               assetBaseUrl
             )
@@ -6417,6 +6416,7 @@ const getDeploymentInstructions = (deployTarget) => {
   switch (deployTarget) {
     case "vercel":
       return `Run ${pc.dim("npx vercel")} to publish on Vercel.`;
+    case "netlify":
     case "netlify-functions":
     case "netlify-edge-functions":
       return [
@@ -6431,7 +6431,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.0.0-2738e1e";
+const version = "0.0.0-5558cd0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";
@@ -6482,8 +6482,8 @@ const devDependencies = {
   "@netlify/remix-adapter": "^2.5.1",
   "@netlify/remix-edge-adapter": "3.4.2",
   "@netlify/vite-plugin-react-router": "^1.0.0",
-  "@react-router/dev": "^7.1.4",
-  "@react-router/fs-routes": "^7.1.4",
+  "@react-router/dev": "^7.1.5",
+  "@react-router/fs-routes": "^7.1.5",
   "@remix-run/cloudflare": "^2.15.2",
   "@remix-run/cloudflare-pages": "^2.15.2",
   "@remix-run/dev": "^2.15.2",
@@ -6509,11 +6509,11 @@ const devDependencies = {
   prettier: "3.4.2",
   react: "18.3.0-canary-14898b6a9-20240318",
   "react-dom": "18.3.0-canary-14898b6a9-20240318",
-  "react-router": "^7.1.4",
+  "react-router": "^7.1.5",
   "ts-expect": "^1.3.0",
   vike: "^0.4.220",
   vite: "^5.4.11",
-  vitest: "^3.0.2",
+  vitest: "^3.0.4",
   wrangler: "^3.63.2"
 };
 const packageJson = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.0.0-2738e1e",
+  "version": "0.0.0-5558cd0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -46,8 +46,8 @@
     "@netlify/remix-adapter": "^2.5.1",
     "@netlify/remix-edge-adapter": "3.4.2",
     "@netlify/vite-plugin-react-router": "^1.0.0",
-    "@react-router/dev": "^7.1.4",
-    "@react-router/fs-routes": "^7.1.4",
+    "@react-router/dev": "^7.1.5",
+    "@react-router/fs-routes": "^7.1.5",
     "@remix-run/cloudflare": "^2.15.2",
     "@remix-run/cloudflare-pages": "^2.15.2",
     "@remix-run/dev": "^2.15.2",
@@ -63,21 +63,21 @@
     "prettier": "3.4.2",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "react-router": "^7.1.4",
+    "react-router": "^7.1.5",
     "ts-expect": "^1.3.0",
     "vike": "^0.4.220",
     "vite": "^5.4.11",
-    "vitest": "^3.0.2",
+    "vitest": "^3.0.4",
     "wrangler": "^3.63.2",
-    "@webstudio-is/image": "0.0.0-2738e1e",
-    "@webstudio-is/http-client": "0.0.0-2738e1e",
-    "@webstudio-is/react-sdk": "0.0.0-2738e1e",
-    "@webstudio-is/sdk": "0.0.0-2738e1e",
-    "@webstudio-is/sdk-components-react": "0.0.0-2738e1e",
-    "@webstudio-is/sdk-components-react-radix": "0.0.0-2738e1e",
-    "@webstudio-is/sdk-components-react-remix": "0.0.0-2738e1e",
-    "@webstudio-is/sdk-components-animation": "0.0.0-2738e1e",
-    "@webstudio-is/sdk-components-react-router": "0.0.0-2738e1e",
+    "@webstudio-is/http-client": "0.0.0-5558cd0",
+    "@webstudio-is/image": "0.0.0-5558cd0",
+    "@webstudio-is/react-sdk": "0.0.0-5558cd0",
+    "@webstudio-is/sdk": "0.0.0-5558cd0",
+    "@webstudio-is/sdk-components-animation": "0.0.0-5558cd0",
+    "@webstudio-is/sdk-components-react": "0.0.0-5558cd0",
+    "@webstudio-is/sdk-components-react-remix": "0.0.0-5558cd0",
+    "@webstudio-is/sdk-components-react-radix": "0.0.0-5558cd0",
+    "@webstudio-is/sdk-components-react-router": "0.0.0-5558cd0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {

package/templates/defaults/package.json

@@ -11,13 +11,13 @@
     "@remix-run/node": "2.15.2",
     "@remix-run/react": "2.15.2",
     "@remix-run/server-runtime": "2.15.2",
-    "@webstudio-is/image": "0.0.0-2738e1e",
-    "@webstudio-is/react-sdk": "0.0.0-2738e1e",
-    "@webstudio-is/sdk": "0.0.0-2738e1e",
-    "@webstudio-is/sdk-components-react": "0.0.0-2738e1e",
-    "@webstudio-is/sdk-components-animation": "0.0.0-2738e1e",
-    "@webstudio-is/sdk-components-react-radix": "0.0.0-2738e1e",
-    "@webstudio-is/sdk-components-react-remix": "0.0.0-2738e1e",
+    "@webstudio-is/image": "0.0.0-5558cd0",
+    "@webstudio-is/react-sdk": "0.0.0-5558cd0",
+    "@webstudio-is/sdk": "0.0.0-5558cd0",
+    "@webstudio-is/sdk-components-react": "0.0.0-5558cd0",
+    "@webstudio-is/sdk-components-animation": "0.0.0-5558cd0",
+    "@webstudio-is/sdk-components-react-radix": "0.0.0-5558cd0",
+    "@webstudio-is/sdk-components-react-remix": "0.0.0-5558cd0",
     "isbot": "^5.1.22",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"

package/templates/react-router/package.json

@@ -5,24 +5,22 @@
   "scripts": {
     "build": "react-router build",
     "dev": "react-router dev",
-    "start": "react-router-serve ./build/server/index.js",
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@react-router/dev": "^7.1.4",
-    "@react-router/fs-routes": "^7.1.4",
-    "@react-router/serve": "^7.1.4",
-    "@webstudio-is/image": "0.0.0-2738e1e",
-    "@webstudio-is/react-sdk": "0.0.0-2738e1e",
-    "@webstudio-is/sdk": "0.0.0-2738e1e",
-    "@webstudio-is/sdk-components-animation": "0.0.0-2738e1e",
-    "@webstudio-is/sdk-components-react-radix": "0.0.0-2738e1e",
-    "@webstudio-is/sdk-components-react-router": "0.0.0-2738e1e",
-    "@webstudio-is/sdk-components-react": "0.0.0-2738e1e",
+    "@react-router/dev": "^7.1.5",
+    "@react-router/fs-routes": "^7.1.5",
+    "@webstudio-is/image": "0.0.0-5558cd0",
+    "@webstudio-is/react-sdk": "0.0.0-5558cd0",
+    "@webstudio-is/sdk": "0.0.0-5558cd0",
+    "@webstudio-is/sdk-components-animation": "0.0.0-5558cd0",
+    "@webstudio-is/sdk-components-react-radix": "0.0.0-5558cd0",
+    "@webstudio-is/sdk-components-react-router": "0.0.0-5558cd0",
+    "@webstudio-is/sdk-components-react": "0.0.0-5558cd0",
     "isbot": "^5.1.22",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "react-router": "^7.1.4",
+    "react-router": "^7.1.5",
     "vite": "^5.4.11"
   },
   "devDependencies": {

package/templates/react-router-docker/package.json

@@ -1,6 +1,10 @@
 {
+  "scripts": {
+    "start": "react-router-serve ./build/server/index.js"
+  },
   "dependencies": {
-    "@react-router/node": "^7.1.4",
+    "@react-router/node": "^7.1.5",
+    "@react-router/serve": "^7.1.5",
     "h3": "^1.14.0",
     "ipx": "^3.0.1"
   }

package/templates/react-router-netlify/app/constants.mjs

@@ -8,7 +8,7 @@ export const assetBaseUrl = "/assets/";
  * @type {import("@webstudio-is/image").ImageLoader}
  */
 export const imageLoader = (props) => {
-  if (process.env.NODE_ENV !== "production") {
+  if (import.meta.env.DEV) {
     return props.src;
   }
 

package/templates/react-router-netlify/package.json

@@ -1,9 +1,10 @@
 {
   "scripts": {
-    "start": "npx netlify-cli serve"
+    "start": "npx netlify-cli serve",
+    "deploy": "npx netlify-cli deploy --build --prod"
   },
   "dependencies": {
     "@netlify/vite-plugin-react-router": "^1.0.0",
-    "@react-router/node": "^7.1.4"
+    "@react-router/node": "^7.1.5"
   }
 }

package/templates/react-router-vercel/app/constants.mjs

@@ -0,0 +1,25 @@
+/**
+ * We use mjs extension as constants in this file is shared with the build script
+ * and we use `node --eval` to extract the constants.
+ */
+export const assetBaseUrl = "/assets/";
+
+/**
+ * @type {import("@webstudio-is/image").ImageLoader}
+ */
+export const imageLoader = (props) => {
+  if (process.env.NODE_ENV !== "production") {
+    return props.src;
+  }
+
+  if (props.format === "raw") {
+    return props.src;
+  }
+
+  // https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
+  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/react-router-vercel/package.json

@@ -0,0 +1,9 @@
+{
+  "scripts": {
+    "start": "npx vercel dev",
+    "deploy": "npx vercel deploy"
+  },
+  "dependencies": {
+    "@react-router/node": "^7.1.5"
+  }
+}

package/templates/react-router-vercel/vercel.json

@@ -0,0 +1,11 @@
+{
+  "images": {
+    "domains": [],
+    "sizes": [
+      16, 32, 48, 64, 96, 128, 144, 256, 384, 640, 750, 828, 1080, 1200, 1920,
+      2048, 3840
+    ],
+    "minimumCacheTTL": 60,
+    "formats": ["image/webp", "image/avif"]
+  }
+}

package/templates/ssg/package.json

@@ -8,12 +8,12 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@webstudio-is/image": "0.0.0-2738e1e",
-    "@webstudio-is/react-sdk": "0.0.0-2738e1e",
-    "@webstudio-is/sdk": "0.0.0-2738e1e",
-    "@webstudio-is/sdk-components-react": "0.0.0-2738e1e",
-    "@webstudio-is/sdk-components-animation": "0.0.0-2738e1e",
-    "@webstudio-is/sdk-components-react-radix": "0.0.0-2738e1e",
+    "@webstudio-is/image": "0.0.0-5558cd0",
+    "@webstudio-is/react-sdk": "0.0.0-5558cd0",
+    "@webstudio-is/sdk": "0.0.0-5558cd0",
+    "@webstudio-is/sdk-components-react": "0.0.0-5558cd0",
+    "@webstudio-is/sdk-components-animation": "0.0.0-5558cd0",
+    "@webstudio-is/sdk-components-react-radix": "0.0.0-5558cd0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vike": "^0.4.220"