webstudio 0.0.0-021f2d4

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

@@ -0,0 +1,85 @@
+import { renderToString } from "react-dom/server";
+import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
+import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
+import {
+  ReactSdkContext,
+  xmlNodeTagSuffix,
+} from "@webstudio-is/react-sdk/runtime";
+import { Page } from "__CLIENT__";
+import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
+import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
+import { sitemap } from "__SITEMAP__";
+
+const customFetch: typeof fetch = (input, init) => {
+  if (typeof input !== "string") {
+    return fetch(input, init);
+  }
+
+  if (isLocalResource(input, "sitemap.xml")) {
+    // @todo: dynamic import sitemap ???
+    const response = new Response(JSON.stringify(sitemap));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
+  return fetch(input, init);
+};
+
+export const loader = async (arg: LoaderFunctionArgs) => {
+  const url = new URL(arg.request.url);
+  const host =
+    arg.request.headers.get("x-forwarded-host") ||
+    arg.request.headers.get("host") ||
+    "";
+  url.host = host;
+  url.protocol = "https";
+
+  const params = getRemixParams(arg.params);
+
+  const system = {
+    params,
+    search: Object.fromEntries(url.searchParams),
+    origin: url.origin,
+  };
+
+  const resources = await loadResources(
+    customFetch,
+    getResources({ system }).data
+  );
+  const pageMeta = getPageMeta({ system, resources });
+
+  if (pageMeta.redirect) {
+    const status =
+      pageMeta.status === 301 || pageMeta.status === 302
+        ? pageMeta.status
+        : 302;
+    return redirect(pageMeta.redirect, status);
+  }
+
+  // typecheck
+  arg.context.EXCLUDE_FROM_SEARCH satisfies boolean;
+
+  let text = renderToString(
+    <ReactSdkContext.Provider
+      value={{
+        imageLoader,
+        assetBaseUrl,
+        resources,
+      }}
+    >
+      <Page system={system} />
+    </ReactSdkContext.Provider>
+  );
+
+  // Xml is wrapped with <svg> to prevent React from hoisting elements like <title>, <meta>, and <link> out of their intended scope during rendering.
+  // More details: https://github.com/facebook/react/blob/7c8e5e7ab8bb63de911637892392c5efd8ce1d0f/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L3083
+  text = text.replace(/^<svg>/g, "").replace(/<\/svg>$/g, "");
+
+  // React has issues rendering certain elements, such as errors when a <link> element has children.
+  // To render XML, we wrap it with an <svg> tag and add a suffix to avoid React's default behavior on these elements.
+  text = text.replaceAll(xmlNodeTagSuffix, "");
+
+  return new Response(`<?xml version="1.0" encoding="UTF-8"?>\n${text}`, {
+    headers: { "Content-Type": "application/xml" },
+  });
+};

package/templates/defaults/app/routes/[robots.txt].tsx

@@ -0,0 +1,24 @@
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
+
+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/defaults/package.json

@@ -0,0 +1,35 @@
+{
+  "type": "module",
+  "private": true,
+  "sideEffects": false,
+  "scripts": {
+    "build": "remix vite:build",
+    "dev": "remix vite:dev",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@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-021f2d4",
+    "@webstudio-is/react-sdk": "0.0.0-021f2d4",
+    "@webstudio-is/sdk": "0.0.0-021f2d4",
+    "@webstudio-is/sdk-components-react": "0.0.0-021f2d4",
+    "@webstudio-is/sdk-components-animation": "0.0.0-021f2d4",
+    "@webstudio-is/sdk-components-react-radix": "0.0.0-021f2d4",
+    "@webstudio-is/sdk-components-react-remix": "0.0.0-021f2d4",
+    "isbot": "^5.1.22",
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "2.15.2",
+    "@types/react": "^18.2.70",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "5.7.3",
+    "vite": "^5.4.11"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/templates/defaults/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "include": ["**/*.ts", "**/*.tsx", "**/*.mjs"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": [
+      "@remix-run/node",
+      "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/defaults/vite.config.ts

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

package/templates/internal/package.json

@@ -0,0 +1,11 @@
+{
+  "dependencies": {
+    "@webstudio-is/image": "workspace:*",
+    "@webstudio-is/react-sdk": "workspace:*",
+    "@webstudio-is/sdk": "workspace:*",
+    "@webstudio-is/sdk-components-animation": "workspace:*",
+    "@webstudio-is/sdk-components-react": "workspace:*",
+    "@webstudio-is/sdk-components-react-radix": "workspace:*",
+    "@webstudio-is/sdk-components-react-remix": "workspace:*"
+  }
+}

package/templates/internal/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "customConditions": ["webstudio"]
+  }
+}

package/templates/netlify-edge-functions/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 (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-edge-functions/app/entry.server.tsx

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,16 @@
+[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

@@ -0,0 +1,9 @@
+{
+  "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

@@ -0,0 +1,18 @@
+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

@@ -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 (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

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

package/templates/netlify-functions/netlify.toml

@@ -0,0 +1,16 @@
+[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

@@ -0,0 +1,9 @@
+{
+  "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

@@ -0,0 +1,18 @@
+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/app/extension.ts

@@ -0,0 +1,13 @@
+import { ResourceRequest } from "@webstudio-is/sdk";
+
+declare module "react-router" {
+  interface AppLoadContext {
+    EXCLUDE_FROM_SEARCH: boolean;
+    getDefaultActionResource?: (options: {
+      url: URL;
+      projectId: string;
+      contactEmail: string;
+      formData: FormData;
+    }) => ResourceRequest;
+  }
+}

package/templates/react-router/app/root.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+import { Links, Meta, Outlet, useMatches } from "react-router";
+// @todo think about how to make __generated__ typeable
+// @ts-ignore
+import { CustomCode } from "./__generated__/_index";
+
+const Root = () => {
+  // Get language from matches
+  const matches = useMatches();
+
+  const lastMatchWithLanguage = matches.findLast((match) => {
+    // @ts-ignore
+    const language = match?.data?.pageMeta?.language;
+    return language != null;
+  });
+
+  // @ts-ignore
+  const lang = lastMatchWithLanguage?.data?.pageMeta?.language ?? "en";
+
+  return (
+    <html lang={lang}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+        <CustomCode />
+      </head>
+      <Outlet />
+    </html>
+  );
+};
+
+export default Root;

package/templates/react-router/app/route-templates/default-sitemap.tsx

@@ -0,0 +1,34 @@
+import type { LoaderFunctionArgs } from "react-router";
+import { sitemap } from "__SITEMAP__";
+
+export const loader = (arg: LoaderFunctionArgs) => {
+  const host =
+    arg.request.headers.get("x-forwarded-host") ||
+    arg.request.headers.get("host") ||
+    "";
+
+  const urls = sitemap.map((page) => {
+    const url = new URL(`https://${host}${page.path}`);
+
+    return `
+  <url>
+    <loc>${url.href}</loc>
+    <lastmod>${page.lastModified.split("T")[0]}</lastmod>
+  </url>
+    `;
+  });
+
+  return new Response(
+    `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urls.join("")}
+</urlset>
+  `,
+    {
+      headers: {
+        "Content-Type": "application/xml",
+      },
+      status: 200,
+    }
+  );
+};