webstudio 0.0.0-588fe22 → 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

@@ -1,39 +1,11 @@
 {
-  "type": "module",
-  "private": true,
-  "sideEffects": false,
   "scripts": {
-    "build": "react-router build",
-    "dev": "react-router dev",
-    "start": "react-router-serve ./build/server/index.js",
-    "typecheck": "tsc"
+    "start": "react-router-serve ./build/server/index.js"
   },
   "dependencies": {
-    "@react-router/dev": "^7.1.3",
-    "@react-router/fs-routes": "^7.1.3",
-    "@react-router/node": "^7.1.3",
-    "@react-router/serve": "^7.1.3",
-    "@webstudio-is/image": "0.0.0-588fe22",
-    "@webstudio-is/react-sdk": "0.0.0-588fe22",
-    "@webstudio-is/sdk": "0.0.0-588fe22",
-    "@webstudio-is/sdk-components-animation": "0.0.0-588fe22",
-    "@webstudio-is/sdk-components-react-radix": "0.0.0-588fe22",
-    "@webstudio-is/sdk-components-react-router": "0.0.0-588fe22",
-    "@webstudio-is/sdk-components-react": "0.0.0-588fe22",
-    "h3": "^1.14.0",
-    "ipx": "^3.0.1",
-    "isbot": "^5.1.21",
-    "react": "18.3.0-canary-14898b6a9-20240318",
-    "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "react-router": "^7.1.3",
-    "vite": "^5.4.11"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.70",
-    "@types/react-dom": "^18.2.25",
-    "typescript": "5.7.3"
-  },
-  "engines": {
-    "node": ">=20.0.0"
+    "@react-router/node": "^7.5.3",
+    "@react-router/serve": "^7.5.3",
+    "h3": "^1.15.1",
+    "ipx": "^3.0.3"
   }
 }

package/templates/{netlify-edge-functions → 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/netlify.toml

@@ -0,0 +1,6 @@
+[build]
+command = "react-router build"
+publish = "build/client"
+
+[dev]
+command = "react-router dev"

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

@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "start": "npx netlify-cli serve",
+    "deploy": "npx netlify-cli deploy --build --prod"
+  },
+  "dependencies": {
+    "@netlify/vite-plugin-react-router": "^1.0.1",
+    "@react-router/node": "^7.5.3"
+  }
+}

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

@@ -0,0 +1,15 @@
+import { reactRouter } from "@react-router/dev/vite";
+import { defineConfig } from "vite";
+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/{vercel → react-router-vercel}/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-vercel/package.json

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

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

@@ -0,0 +1,6 @@
+import type { Config } from "@react-router/dev/config";
+import { vercelPreset } from "@vercel/react-router/vite";
+
+export default {
+  presets: [vercelPreset()],
+} satisfies Config;

package/templates/{vercel → react-router-vercel}/vercel.json

@@ -1,4 +1,5 @@
 {
+  "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-588fe22",
-    "@webstudio-is/react-sdk": "0.0.0-588fe22",
-    "@webstudio-is/sdk": "0.0.0-588fe22",
-    "@webstudio-is/sdk-components-react": "0.0.0-588fe22",
-    "@webstudio-is/sdk-components-animation": "0.0.0-588fe22",
-    "@webstudio-is/sdk-components-react-radix": "0.0.0-588fe22",
+    "@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.219"
+    "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/netlify-edge-functions/app/entry.server.tsx

@@ -1,21 +0,0 @@
-import type { EntryContext } from "@remix-run/node";
-import { RemixServer } from "@remix-run/react";
-import { renderToString } from "react-dom/server";
-
-export default function handleRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext
-) {
-  const markup = renderToString(
-    <RemixServer context={remixContext} url={request.url} />
-  );
-
-  responseHeaders.set("Content-Type", "text/html");
-
-  return new Response("<!DOCTYPE html>" + markup, {
-    headers: responseHeaders,
-    status: responseStatusCode,
-  });
-}

package/templates/netlify-edge-functions/netlify.toml

@@ -1,16 +0,0 @@
-[build]
-command = "npm run build"
-publish = "build/client"
-
-[dev]
-command = "npm run dev"
-framework = "vite"
-
-# Set immutable caching for static files, because they have fingerprinted filenames
-
-[[headers]]
-for = "/build/*"
-
-[headers.values]
-
-"Cache-Control" = "public, max-age=31560000, immutable"

package/templates/netlify-edge-functions/package.json

@@ -1,9 +0,0 @@
-{
-  "scripts": {
-    "start": "netlify serve"
-  },
-  "dependencies": {
-    "@netlify/edge-functions": "^2.11.1",
-    "@netlify/remix-edge-adapter": "^3.4.2"
-  }
-}

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

@@ -1,18 +0,0 @@
-import { vitePlugin as remix } from "@remix-run/dev";
-import { defineConfig } from "vite";
-import { netlifyPlugin } from "@netlify/remix-edge-adapter/plugin";
-
-export default defineConfig({
-  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

@@ -1,29 +0,0 @@
-/**
- * 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://docs.netlify.com/image-cdn/overview/
-  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/app/entry.server.tsx

@@ -1 +0,0 @@
-export { handleRequest as default } from "@netlify/remix-adapter";

package/templates/netlify-functions/netlify.toml

@@ -1,16 +0,0 @@
-[build]
-command = "npm run build"
-publish = "build/client"
-
-[dev]
-command = "npm run dev"
-framework = "vite"
-
-# Set immutable caching for static files, because they have fingerprinted filenames
-
-[[headers]]
-for = "/build/*"
-
-[headers.values]
-
-"Cache-Control" = "public, max-age=31560000, immutable"

package/templates/netlify-functions/package.json

@@ -1,9 +0,0 @@
-{
-  "scripts": {
-    "start": "npx netlify-cli serve"
-  },
-  "dependencies": {
-    "@netlify/functions": "^2.8.2",
-    "@netlify/remix-adapter": "^2.5.1"
-  }
-}

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

@@ -1,18 +0,0 @@
-import { vitePlugin as remix } from "@remix-run/dev";
-import { defineConfig } from "vite";
-import { netlifyPlugin } from "@netlify/remix-adapter/plugin";
-
-export default defineConfig({
-  plugins: [
-    remix({
-      future: {
-        v3_lazyRouteDiscovery: false,
-        v3_relativeSplatPath: false,
-        v3_singleFetch: false,
-        v3_fetcherPersist: false,
-        v3_throwAbortReason: false,
-      },
-    }),
-    netlifyPlugin(),
-  ],
-});

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

@@ -1,6 +0,0 @@
-import { defineConfig } from "vite";
-import { reactRouter } from "@react-router/dev/vite";
-
-export default defineConfig({
-  plugins: [reactRouter()],
-});

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 @@
-{}