webstudio 0.0.0-017f1bd

package/templates/react-router/app/routes/[robots.txt].tsx

@@ -0,0 +1,24 @@
+import type { LoaderFunctionArgs } from "react-router";
+
+export const loader = (arg: LoaderFunctionArgs) => {
+  const host =
+    arg.request.headers.get("x-forwarded-host") ||
+    arg.request.headers.get("host") ||
+    "";
+
+  return new Response(
+    `
+User-agent: *
+Disallow: /api/
+
+Sitemap: https://${host}/sitemap.xml
+
+  `,
+    {
+      headers: {
+        "Content-Type": "text/plain",
+      },
+      status: 200,
+    }
+  );
+};

package/templates/react-router/app/routes.ts

@@ -0,0 +1,4 @@
+import { type RouteConfig } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
+
+export default flatRoutes() satisfies RouteConfig;

package/templates/react-router/package.json

@@ -0,0 +1,34 @@
+{
+  "type": "module",
+  "private": true,
+  "sideEffects": false,
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@react-router/dev": "^7.5.3",
+    "@react-router/fs-routes": "^7.5.3",
+    "@webstudio-is/image": "0.0.0-017f1bd",
+    "@webstudio-is/react-sdk": "0.0.0-017f1bd",
+    "@webstudio-is/sdk": "0.0.0-017f1bd",
+    "@webstudio-is/sdk-components-animation": "0.0.0-017f1bd",
+    "@webstudio-is/sdk-components-react-radix": "0.0.0-017f1bd",
+    "@webstudio-is/sdk-components-react-router": "0.0.0-017f1bd",
+    "@webstudio-is/sdk-components-react": "0.0.0-017f1bd",
+    "isbot": "^5.1.25",
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318",
+    "react-router": "^7.5.3",
+    "vite": "^6.3.4"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.70",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "5.8.2"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/templates/react-router/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "include": ["**/*.ts", "**/*.tsx", "**/*.mjs"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["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
+  }
+}

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

@@ -0,0 +1,14 @@
+import { defineConfig } from "vite";
+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/.dockerignore

@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md

package/templates/react-router-docker/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:22-alpine AS dependencies-env
+COPY .npmrc package.json /app/
+WORKDIR /app
+RUN npm install --omit=dev
+
+FROM dependencies-env AS build-env
+COPY . /app/
+WORKDIR /app
+RUN npm install
+RUN npm run build
+
+FROM node:22-alpine
+COPY .npmrc package.json /app/
+COPY --from=dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+COPY --from=build-env /app/public /app/public
+WORKDIR /app
+# there is a DOMAINS env with comma separated allowed domains for image processing
+CMD ["npm", "run", "start"]

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

@@ -0,0 +1,31 @@
+/**
+ * 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/";
+
+/**
+ * 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}
+ */
+export const imageLoader = (props) => {
+  if (props.format === "raw") {
+    return props.src;
+  }
+  // handle absolute urls
+  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/app/routes/[_image].$.ts

@@ -0,0 +1,24 @@
+import { env } from "node:process";
+import type { LoaderFunctionArgs } from "react-router";
+import {
+  createIPX,
+  createIPXH3Handler,
+  ipxFSStorage,
+  ipxHttpStorage,
+} from "ipx";
+import { createApp, toWebHandler } from "h3";
+
+const domains = env.DOMAINS?.split(/\s*,\s*/) ?? [];
+
+const ipx = createIPX({
+  storage: ipxFSStorage({ dir: "./public" }),
+  httpStorage: ipxHttpStorage({ domains }),
+});
+
+const handleRequest = toWebHandler(
+  createApp().use("/_image", createIPXH3Handler(ipx))
+);
+
+export const loader = async (args: LoaderFunctionArgs) => {
+  return handleRequest(args.request);
+};

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

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "start": "react-router-serve ./build/server/index.js"
+  },
+  "dependencies": {
+    "@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/app/constants.mjs

@@ -0,0 +1,29 @@
+/**
+ * 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;
+  }
+
+  // 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/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/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 (import.meta.env.DEV) {
+    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": {
+    "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/react-router-vercel/vercel.json

@@ -0,0 +1,12 @@
+{
+  "framework": "react-router",
+  "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/saas-helpers/package.json

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

package/templates/saas-helpers/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
+  ],
+  "compilerOptions": {
+    "types": [
+      "@remix-run/cloudflare",
+      "vite/client",
+      "@cloudflare/workers-types/2023-07-01",
+      "@webstudio-is/react-sdk/placeholder"
+    ]
+  }
+}

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

@@ -0,0 +1,13 @@
+/**
+ * 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 = ({ src }) => {
+  return src;
+};