webstudio 0.217.0 → 0.219.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.217.0",
+  "version": "0.219.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -35,7 +35,7 @@
     "env-paths": "^3.0.0",
     "nanoid": "^5.1.5",
     "p-limit": "^6.2.0",
-    "parse5": "7.2.1",
+    "parse5": "7.3.0",
     "picocolors": "^1.1.1",
     "reserved-identifiers": "^1.0.0",
     "tinyexec": "^0.3.2",
@@ -43,42 +43,44 @@
     "zod": "^3.24.2"
   },
   "devDependencies": {
+    "@cloudflare/vite-plugin": "^1.1.0",
     "@netlify/vite-plugin-react-router": "^1.0.1",
-    "@react-router/dev": "^7.5.0",
-    "@react-router/fs-routes": "^7.5.0",
-    "@remix-run/cloudflare": "^2.16.4",
-    "@remix-run/cloudflare-pages": "^2.16.4",
-    "@remix-run/dev": "^2.16.4",
-    "@remix-run/node": "^2.16.4",
-    "@remix-run/react": "^2.16.4",
-    "@remix-run/server-runtime": "^2.16.4",
+    "@react-router/dev": "^7.5.3",
+    "@react-router/fs-routes": "^7.5.3",
+    "@remix-run/cloudflare": "^2.16.5",
+    "@remix-run/cloudflare-pages": "^2.16.5",
+    "@remix-run/dev": "^2.16.5",
+    "@remix-run/node": "^2.16.5",
+    "@remix-run/react": "^2.16.5",
+    "@remix-run/server-runtime": "^2.16.5",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "@types/yargs": "^17.0.33",
     "@vercel/react-router": "^1.1.0",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.4.1",
     "h3": "^1.15.1",
     "ipx": "^3.0.3",
+    "isbot": "^5.1.25",
     "prettier": "3.5.3",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "react-router": "^7.5.0",
+    "react-router": "^7.5.3",
     "ts-expect": "^1.3.0",
-    "vike": "^0.4.228",
-    "vite": "^5.4.11",
-    "vitest": "^3.0.8",
+    "vike": "^0.4.229",
+    "vite": "^6.3.4",
+    "vitest": "^3.1.2",
     "wrangler": "^3.63.2",
-    "@webstudio-is/css-engine": "0.217.0",
-    "@webstudio-is/http-client": "0.217.0",
-    "@webstudio-is/image": "0.217.0",
-    "@webstudio-is/sdk": "0.217.0",
-    "@webstudio-is/sdk-components-animation": "0.217.0",
-    "@webstudio-is/sdk-components-react-radix": "0.217.0",
-    "@webstudio-is/sdk-components-react-remix": "0.217.0",
-    "@webstudio-is/react-sdk": "0.217.0",
-    "@webstudio-is/sdk-components-react-router": "0.217.0",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/sdk-components-react": "0.217.0"
+    "@webstudio-is/css-engine": "0.219.0",
+    "@webstudio-is/http-client": "0.219.0",
+    "@webstudio-is/image": "0.219.0",
+    "@webstudio-is/react-sdk": "0.219.0",
+    "@webstudio-is/sdk": "0.219.0",
+    "@webstudio-is/sdk-components-animation": "0.219.0",
+    "@webstudio-is/sdk-components-react-radix": "0.219.0",
+    "@webstudio-is/sdk-components-react": "0.219.0",
+    "@webstudio-is/sdk-components-react-router": "0.219.0",
+    "@webstudio-is/sdk-components-react-remix": "0.219.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "typecheck": "tsc",

package/templates/cloudflare/package.json

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

package/templates/cloudflare/vite.config.ts

@@ -18,4 +18,12 @@ export default defineConfig(({ mode }) => ({
       },
     }),
   ].filter(Boolean),
+  resolve: {
+    conditions: ["browser", "development|production"],
+  },
+  ssr: {
+    resolve: {
+      conditions: ["node", "development|production"],
+    },
+  },
 }));

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

@@ -286,6 +286,7 @@ const Outlet = () => {
         host={host}
         siteName={siteName}
         imageLoader={imageLoader}
+        assetBaseUrl={assetBaseUrl}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
       <PageSettingsCanonicalLink href={url} />

package/templates/defaults/package.json

@@ -8,26 +8,26 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/node": "2.16.4",
-    "@remix-run/react": "2.16.4",
-    "@remix-run/server-runtime": "2.16.4",
-    "@webstudio-is/image": "0.217.0",
-    "@webstudio-is/react-sdk": "0.217.0",
-    "@webstudio-is/sdk": "0.217.0",
-    "@webstudio-is/sdk-components-react": "0.217.0",
-    "@webstudio-is/sdk-components-animation": "0.217.0",
-    "@webstudio-is/sdk-components-react-radix": "0.217.0",
-    "@webstudio-is/sdk-components-react-remix": "0.217.0",
+    "@remix-run/node": "2.16.5",
+    "@remix-run/react": "2.16.5",
+    "@remix-run/server-runtime": "2.16.5",
+    "@webstudio-is/image": "0.219.0",
+    "@webstudio-is/react-sdk": "0.219.0",
+    "@webstudio-is/sdk": "0.219.0",
+    "@webstudio-is/sdk-components-react": "0.219.0",
+    "@webstudio-is/sdk-components-animation": "0.219.0",
+    "@webstudio-is/sdk-components-react-radix": "0.219.0",
+    "@webstudio-is/sdk-components-react-remix": "0.219.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "devDependencies": {
-    "@remix-run/dev": "2.16.4",
+    "@remix-run/dev": "2.16.5",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "typescript": "5.8.2",
-    "vite": "^5.4.11"
+    "vite": "^6.3.4"
   },
   "engines": {
     "node": ">=20.0.0"

package/templates/defaults/vite.config.ts

@@ -13,4 +13,12 @@ export default defineConfig({
       },
     }),
   ],
+  resolve: {
+    conditions: ["browser", "development|production"],
+  },
+  ssr: {
+    resolve: {
+      conditions: ["node", "development|production"],
+    },
+  },
 });

package/templates/react-router/app/route-templates/html.tsx

@@ -285,6 +285,7 @@ const Outlet = () => {
         host={host}
         siteName={siteName}
         imageLoader={imageLoader}
+        assetBaseUrl={assetBaseUrl}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
     </ReactSdkContext.Provider>

package/templates/react-router/package.json

@@ -8,20 +8,20 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@react-router/dev": "^7.5.0",
-    "@react-router/fs-routes": "^7.5.0",
-    "@webstudio-is/image": "0.217.0",
-    "@webstudio-is/react-sdk": "0.217.0",
-    "@webstudio-is/sdk": "0.217.0",
-    "@webstudio-is/sdk-components-animation": "0.217.0",
-    "@webstudio-is/sdk-components-react-radix": "0.217.0",
-    "@webstudio-is/sdk-components-react-router": "0.217.0",
-    "@webstudio-is/sdk-components-react": "0.217.0",
+    "@react-router/dev": "^7.5.3",
+    "@react-router/fs-routes": "^7.5.3",
+    "@webstudio-is/image": "0.219.0",
+    "@webstudio-is/react-sdk": "0.219.0",
+    "@webstudio-is/sdk": "0.219.0",
+    "@webstudio-is/sdk-components-animation": "0.219.0",
+    "@webstudio-is/sdk-components-react-radix": "0.219.0",
+    "@webstudio-is/sdk-components-react-router": "0.219.0",
+    "@webstudio-is/sdk-components-react": "0.219.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "react-router": "^7.5.0",
-    "vite": "^5.4.11"
+    "react-router": "^7.5.3",
+    "vite": "^6.3.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",

package/templates/react-router/vite.config.ts

@@ -3,4 +3,12 @@ import { reactRouter } from "@react-router/dev/vite";
 
 export default defineConfig({
   plugins: [reactRouter()],
+  resolve: {
+    conditions: ["browser", "development|production"],
+  },
+  ssr: {
+    resolve: {
+      conditions: ["node", "development|production"],
+    },
+  },
 });

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

@@ -0,0 +1,21 @@
+/**
+ * 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 (import.meta.env.DEV) {
+    return props.src;
+  }
+
+  if (props.format === "raw") {
+    return props.src;
+  }
+
+  // @todo https://developers.cloudflare.com/images/transform-images/transform-via-url/
+  return props.src;
+};

package/templates/react-router-cloudflare/app/entry.server.tsx

@@ -0,0 +1,43 @@
+import type { AppLoadContext, EntryContext } from "react-router";
+import { ServerRouter } from "react-router";
+import { isbot } from "isbot";
+import { renderToReadableStream } from "react-dom/server";
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  routerContext: EntryContext,
+  _loadContext: AppLoadContext
+) {
+  let shellRendered = false;
+  const userAgent = request.headers.get("user-agent");
+
+  const body = await renderToReadableStream(
+    <ServerRouter context={routerContext} url={request.url} />,
+    {
+      onError(error: unknown) {
+        responseStatusCode = 500;
+        // Log streaming rendering errors from inside the shell.  Don't log
+        // errors encountered during initial shell rendering since they'll
+        // reject and get logged in handleDocumentRequest.
+        if (shellRendered) {
+          console.error(error);
+        }
+      },
+    }
+  );
+  shellRendered = true;
+
+  // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+  // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+  if ((userAgent && isbot(userAgent)) || routerContext.isSpaMode) {
+    await body.allReady;
+  }
+
+  responseHeaders.set("Content-Type", "text/html");
+  return new Response(body, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}

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

@@ -0,0 +1,12 @@
+{
+  "scripts": {
+    "typecheck": "wrangler types && tsc",
+    "typegen": "wrangler types",
+    "preview": "react-router build && vite preview",
+    "deploy": "react-router build && wrangler deploy"
+  },
+  "dependencies": {
+    "@cloudflare/vite-plugin": "^1.1.0",
+    "wrangler": "^4.14.1"
+  }
+}

package/templates/react-router-cloudflare/react-router.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  future: {
+    unstable_viteEnvironmentApi: true,
+  },
+} satisfies Config;

package/templates/react-router-cloudflare/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "include": ["**/*.ts", "**/*.tsx", "**/*.mjs"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": [
+      "./worker-configuration.d.ts",
+      "vite/client",
+      "@webstudio-is/react-sdk/placeholder"
+    ],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "customConditions": ["webstudio"]
+  }
+}

package/templates/react-router-cloudflare/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import { cloudflare } from "@cloudflare/vite-plugin";
+import { reactRouter } from "@react-router/dev/vite";
+
+export default defineConfig({
+  plugins: [cloudflare({ viteEnvironment: { name: "ssr" } }), reactRouter()],
+  resolve: {
+    conditions: ["browser", "development|production"],
+  },
+  ssr: {
+    resolve: {
+      conditions: ["node", "development|production"],
+    },
+  },
+});

package/templates/react-router-cloudflare/workers/app.ts

@@ -0,0 +1,26 @@
+import { createRequestHandler } from "react-router";
+
+declare module "react-router" {
+  export interface AppLoadContext {
+    cloudflare: {
+      env: Env;
+      ctx: ExecutionContext;
+    };
+  }
+}
+
+const requestHandler = createRequestHandler(
+  // @ts-ignore
+  () => import("virtual:react-router/server-build"),
+  import.meta.env.MODE
+);
+
+export default {
+  async fetch(request, env, ctx) {
+    return requestHandler(request, {
+      EXCLUDE_FROM_SEARCH: false,
+      getDefaultActionResource: undefined,
+      cloudflare: { env, ctx },
+    });
+  },
+} satisfies ExportedHandler<Env>;

package/templates/react-router-cloudflare/wrangler.jsonc

@@ -0,0 +1,6 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "webstudio-app",
+  "compatibility_date": "2025-04-28",
+  "main": "./workers/app.ts"
+}

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

@@ -3,8 +3,8 @@
     "start": "react-router-serve ./build/server/index.js"
   },
   "dependencies": {
-    "@react-router/node": "^7.5.0",
-    "@react-router/serve": "^7.5.0",
+    "@react-router/node": "^7.5.3",
+    "@react-router/serve": "^7.5.3",
     "h3": "^1.15.1",
     "ipx": "^3.0.3"
   }

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

@@ -5,6 +5,6 @@
   },
   "dependencies": {
     "@netlify/vite-plugin-react-router": "^1.0.1",
-    "@react-router/node": "^7.5.0"
+    "@react-router/node": "^7.5.3"
   }
 }

package/templates/react-router-netlify/vite.config.ts

@@ -4,4 +4,12 @@ import netlifyPlugin from "@netlify/vite-plugin-react-router";
 
 export default defineConfig({
   plugins: [reactRouter(), netlifyPlugin()],
+  resolve: {
+    conditions: ["browser", "development|production"],
+  },
+  ssr: {
+    resolve: {
+      conditions: ["node", "development|production"],
+    },
+  },
 });

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

@@ -3,7 +3,7 @@
     "deploy": "npx vercel deploy"
   },
   "dependencies": {
-    "@react-router/node": "^7.5.0",
+    "@react-router/node": "^7.5.3",
     "@vercel/react-router": "^1.1.0"
   }
 }

package/templates/saas-helpers/vite.config.ts

@@ -25,11 +25,11 @@ const conditions = hasPrivateFolders
 
 export default defineConfig(({ mode }) => ({
   resolve: {
-    conditions,
+    conditions: [...conditions, "browser", "development|production"],
   },
   ssr: {
     resolve: {
-      conditions,
+      conditions: [...conditions, "node", "development|production"],
     },
   },
   plugins: [

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

@@ -20,11 +20,14 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
   let socialImageUrl = pageMeta.socialImageUrl;
   if (pageMeta.socialImageAssetName) {
     socialImageUrl = `${origin}${imageLoader({
-      src: pageMeta.socialImageAssetName,
+      src: `${assetBaseUrl}/${pageMeta.socialImageAssetName}`,
       // Do not transform social image (not enough information do we need to do this)
       format: "raw",
     })}`;
   }
+  const isTwitterCardSizeDefined = pageMeta.custom.some(
+    (meta) => meta.property === "twitter:card"
+  );
   return (
     <>
       {data.url && <meta property="og:url" content={data.url} />}
@@ -55,6 +58,11 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       {pageMeta.custom.map(({ property, content }) => (
         <meta key={property} property={property} content={content} />
       ))}
+      {(pageMeta.socialImageAssetName !== undefined ||
+        pageMeta.socialImageUrl !== undefined) &&
+        isTwitterCardSizeDefined === false && (
+          <meta property="twitter:card" content="summary_large_image" />
+        )}
 
       {favIconAsset && (
         <link

package/templates/ssg/package.json

@@ -8,22 +8,22 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@webstudio-is/image": "0.217.0",
-    "@webstudio-is/react-sdk": "0.217.0",
-    "@webstudio-is/sdk": "0.217.0",
-    "@webstudio-is/sdk-components-react": "0.217.0",
-    "@webstudio-is/sdk-components-animation": "0.217.0",
-    "@webstudio-is/sdk-components-react-radix": "0.217.0",
+    "@webstudio-is/image": "0.219.0",
+    "@webstudio-is/react-sdk": "0.219.0",
+    "@webstudio-is/sdk": "0.219.0",
+    "@webstudio-is/sdk-components-react": "0.219.0",
+    "@webstudio-is/sdk-components-animation": "0.219.0",
+    "@webstudio-is/sdk-components-react-radix": "0.219.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "vike": "^0.4.228"
+    "vike": "^0.4.229"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.4.1",
     "typescript": "5.8.2",
-    "vite": "^5.4.11"
+    "vite": "^6.3.4"
   },
   "engines": {
     "node": ">=20.0.0"

package/templates/ssg/vite.config.ts

@@ -4,4 +4,12 @@ import vike from "vike/plugin";
 
 export default defineConfig({
   plugins: [react(), vike({ prerender: true })],
+  resolve: {
+    conditions: ["browser", "development|production"],
+  },
+  ssr: {
+    resolve: {
+      conditions: ["node", "development|production"],
+    },
+  },
 });