webstudio 0.0.0-5844e28 → 0.0.0-73cd6ea

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/app/constants.mjs

@@ -4,6 +4,19 @@
  */
 export const assetBaseUrl = "/assets/";
 
+/**
+ * URL.canParse(props.src)
+ * @type {(url: string) => boolean}
+ */
+const UrlCanParse = (url) => {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
 /**
  * @type {import("@webstudio-is/image").ImageLoader}
  */
@@ -12,7 +25,7 @@ export const imageLoader = (props) => {
     return props.src;
   }
   // handle absolute urls
-  const path = URL.canParse(props.src) ? `/${props.src}` : props.src;
+  const path = UrlCanParse(props.src) ? `/${props.src}` : props.src;
   // https://github.com/unjs/ipx?tab=readme-ov-file#modifiers
   return `/_image/w_${props.width},q_${props.quality}${path}`;
 };

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

@@ -3,9 +3,9 @@
     "start": "react-router-serve ./build/server/index.js"
   },
   "dependencies": {
-    "@react-router/node": "^7.1.5",
-    "@react-router/serve": "^7.1.5",
-    "h3": "^1.15.0",
-    "ipx": "^3.0.1"
+    "@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

@@ -4,7 +4,7 @@
     "deploy": "npx netlify-cli deploy --build --prod"
   },
   "dependencies": {
-    "@netlify/vite-plugin-react-router": "^1.0.0",
-    "@react-router/node": "^7.1.5"
+    "@netlify/vite-plugin-react-router": "^1.0.1",
+    "@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.1.5",
-    "@vercel/react-router": "^1.0.2"
+    "@react-router/node": "^7.5.3",
+    "@vercel/react-router": "^1.1.0"
   }
 }

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

@@ -1,5 +1,5 @@
 {
-  "framework": "vite",
+  "framework": "react-router",
   "images": {
     "domains": [],
     "sizes": [

package/templates/saas-helpers/package.json

@@ -1,6 +1,9 @@
 {
   "dependencies": {
     "worktop": "0.8.0-next.18",
-    "zod": "^3.22.4"
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "fast-glob": "^3.3.2"
   }
 }

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

@@ -0,0 +1,48 @@
+import {
+  vitePlugin as remix,
+  cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
+} from "@remix-run/dev";
+import { defineConfig } from "vite";
+
+import { existsSync } from "node:fs";
+// @ts-ignore
+import path from "node:path";
+// @ts-ignore
+import fg from "fast-glob";
+
+const rootDir = ["..", "../..", "../../.."]
+  .map((dir) => path.join(__dirname, dir))
+  .find((dir) => existsSync(path.join(dir, ".git")));
+
+const hasPrivateFolders =
+  fg.sync([path.join(rootDir ?? "", "packages/*/private-src/*")], {
+    ignore: ["**/node_modules/**"],
+  }).length > 0;
+
+const conditions = hasPrivateFolders
+  ? ["webstudio-private", "webstudio"]
+  : ["webstudio"];
+
+export default defineConfig(({ mode }) => ({
+  resolve: {
+    conditions: [...conditions, "browser", "development|production"],
+  },
+  ssr: {
+    resolve: {
+      conditions: [...conditions, "node", "development|production"],
+    },
+  },
+  plugins: [
+    // without this, remixCloudflareDevProxy trying to load workerd even for production (it's not needed for production)
+    mode === "production" ? undefined : remixCloudflareDevProxy(),
+    remix({
+      future: {
+        v3_lazyRouteDiscovery: false,
+        v3_relativeSplatPath: false,
+        v3_singleFetch: false,
+        v3_fetcherPersist: false,
+        v3_throwAbortReason: false,
+      },
+    }),
+  ].filter(Boolean),
+}));

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,12 +58,17 @@ 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
           rel="icon"
           href={imageLoader({
-            src: `${assetBaseUrl}${favIconAsset.name}`,
+            src: `${assetBaseUrl}${favIconAsset}`,
             // width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
             width: 144,
             height: 144,
@@ -72,18 +80,18 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       )}
       {pageFontAssets.map((asset) => (
         <link
-          key={asset.id}
+          key={asset}
           rel="preload"
-          href={`${assetBaseUrl}${asset.name}`}
+          href={`${assetBaseUrl}${asset}`}
           as="font"
           crossOrigin="anonymous"
         />
       ))}
       {pageBackgroundImageAssets.map((asset) => (
         <link
-          key={asset.id}
+          key={asset}
           rel="preload"
-          href={`${assetBaseUrl}${asset.name}`}
+          href={`${assetBaseUrl}${asset}`}
           as="image"
         />
       ))}

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

@@ -1,7 +1,7 @@
 import type { PageContext } from "vike/types";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
-import { Page } from "__CLIENT__";
+import { Page, breakpoints } from "__CLIENT__";
 
 const PageComponent = ({ data }: { data: PageContext["data"] }) => {
   const { system, resources, url } = data;
@@ -11,6 +11,8 @@ const PageComponent = ({ data }: { data: PageContext["data"] }) => {
         imageLoader,
         assetBaseUrl,
         resources,
+        breakpoints,
+        onError: console.error,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}

package/templates/ssg/package.json

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

package/templates/ssg/renderer/+onRenderHtml.tsx

@@ -1,10 +1,14 @@
 import { renderToString } from "react-dom/server";
 import { dangerouslySkipEscape, escapeInject } from "vike/server";
 import type { OnRenderHtmlSync } from "vike/types";
-// @todo think about how to make __generated__ typeable
-/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-// @ts-ignore
-import { CustomCode } from "../app/__generated__/_index";
+import {
+  CustomCode,
+  projectId,
+  lastPublished,
+  // @todo think about how to make __generated__ typeable
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+} from "../app/__generated__/_index";
 
 export const onRenderHtml: OnRenderHtmlSync = (pageContext) => {
   const lang = pageContext.data.pageMeta.language || "en";
@@ -12,7 +16,11 @@ export const onRenderHtml: OnRenderHtmlSync = (pageContext) => {
   const Page = pageContext.Page ?? (() => <></>);
   const html = dangerouslySkipEscape(
     renderToString(
-      <html lang={lang}>
+      <html
+        lang={lang}
+        data-ws-project={projectId}
+        data-ws-last-published={lastPublished}
+      >
         <head>
           <meta charSet="UTF-8" />
           <meta name="viewport" content="width=device-width,initial-scale=1" />

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"],
+    },
+  },
 });

package/templates/vercel/.vercelignore

@@ -1,8 +0,0 @@
-node_modules
-
-.cache
-.env
-.vercel
-.webstudio
-build
-public/build

package/templates/vercel/package.json

@@ -1 +0,0 @@
-{}

package/templates/vercel/vercel.json

@@ -1,11 +0,0 @@
-{
-  "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"]
-  }
-}