webstudio 0.145.0 → 0.163.0

package/lib/cli.js

@@ -68,16 +68,16 @@ var isFileExists = async (filePath) => {
     return false;
   }
 };
-var ensureFileInPath = async (filePath, content) => {
+var createFileIfNotExists = async (filePath, content) => {
   const dir = dirname(filePath);
-  await ensureFolderExists(dir);
+  await createFolderIfNotExists(dir);
   try {
     await access(filePath, constants.F_OK);
   } catch {
     await writeFile(filePath, content || "", "utf8");
   }
 };
-var ensureFolderExists = async (folderPath) => {
+var createFolderIfNotExists = async (folderPath) => {
   try {
     await access(folderPath, constants.F_OK);
   } catch {
@@ -142,7 +142,7 @@ var link = async (options) => {
     const localConfig = {
       projectId
     };
-    await ensureFileInPath(
+    await createFileIfNotExists(
       join2(cwd(), LOCAL_CONFIG_FILE),
       JSON.stringify(localConfig, null, 2)
     );
@@ -231,7 +231,7 @@ var sync = async (options) => {
   project;
   spinner.text = "Saving project data to config file";
   const localBuildFilePath = join3(cwd2(), LOCAL_DATA_FILE);
-  await ensureFileInPath(localBuildFilePath);
+  await createFileIfNotExists(localBuildFilePath);
   await writeFile3(localBuildFilePath, JSON.stringify(project, null, 2), "utf8");
   spinner.succeed("Project data synced successfully");
 };
@@ -265,17 +265,17 @@ import {
   normalizeProps,
   generateRemixRoute,
   generateRemixParams,
-  collectionComponent
+  isCoreComponent
 } from "@webstudio-is/react-sdk";
 import {
   createScope,
   findTreeInstanceIds,
   getPagePath,
   parseComponentName,
-  executeExpression,
   generateFormsProperties,
   generateResourcesLoader,
-  generatePageMeta
+  generatePageMeta,
+  getStaticSiteMapXml
 } from "@webstudio-is/sdk";
 import { createImageLoader } from "@webstudio-is/image";
 import * as baseComponentMetas from "@webstudio-is/sdk-components-react/metas";
@@ -288,7 +288,7 @@ var downloadAsset = async (url, name, assetBaseUrl) => {
   try {
     await access2(assetPath);
   } catch {
-    await ensureFolderExists(dirname2(assetPath));
+    await createFolderIfNotExists(dirname2(assetPath));
     try {
       const response = await fetch(url);
       if (!response.ok) {
@@ -480,7 +480,7 @@ var prebuild = async (options) => {
     };
     componentsByPage[page.id] = /* @__PURE__ */ new Set();
     for (const [_instanceId, instance] of instances) {
-      if (instance.component === collectionComponent) {
+      if (isCoreComponent(instance.component)) {
         continue;
       }
       componentsByPage[page.id].add(instance.component);
@@ -546,6 +546,8 @@ var prebuild = async (options) => {
   const assets = new Map(siteData.assets.map((asset) => [asset.id, asset]));
   spinner.text = "Generating css file";
   const { cssText, classesMap } = generateCss({
+    instances: new Map(siteData.build.instances),
+    props: new Map(siteData.build.props),
     assets,
     breakpoints: new Map(siteData.build?.breakpoints),
     styles: new Map(siteData.build?.styles),
@@ -555,13 +557,18 @@ var prebuild = async (options) => {
     assetBaseUrl,
     atomic: siteData.build.pages.compiler?.atomicStyles ?? true
   });
-  await ensureFileInPath(join4(generatedDir, "index.css"), cssText);
+  await createFileIfNotExists(join4(generatedDir, "index.css"), cssText);
   spinner.text = "Generating routes and pages";
-  const routeTemplatePath = normalize(
-    join4(cwd3(), "__templates__", "route-template.tsx")
+  const routeTemplatesDir = join4(cwd3(), "app/route-templates");
+  const routeTemplatePath = normalize(join4(routeTemplatesDir, "html.tsx"));
+  const routeXmlTemplatePath = normalize(join4(routeTemplatesDir, "xml.tsx"));
+  const defaultSiteMapXmlPath = normalize(
+    join4(routeTemplatesDir, "default-sitemap.tsx")
   );
   const routeFileTemplate = await readFile4(routeTemplatePath, "utf8");
-  await rm(dirname2(routeTemplatePath), { recursive: true });
+  const routeXmlFileTemplate = await readFile4(routeXmlTemplatePath, "utf8");
+  const defaultSiteMapTemplate = await readFile4(defaultSiteMapXmlPath, "utf8");
+  await rm(routeTemplatesDir, { recursive: true, force: true });
   for (const [pageId, pageComponents] of Object.entries(componentsByPage)) {
     const scope = createScope([
       // manually maintained list of occupied identifiers
@@ -594,14 +601,36 @@ var prebuild = async (options) => {
       namespaces.get(namespace)?.add([shortName, component]);
     }
     let componentImports = "";
+    let xmlPresentationComponents = "";
+    const pageData = siteDataByPage[pageId];
+    const documentType = pageData.page.meta.documentType ?? "html";
     for (const [namespace, componentsSet] of namespaces.entries()) {
-      const specifiers = Array.from(componentsSet).map(
-        ([shortName, component]) => `${shortName} as ${scope.getName(component, shortName)}`
-      ).join(", ");
-      componentImports += `import { ${specifiers} } from "${namespace}";
+      switch (documentType) {
+        case "html":
+          {
+            const specifiers = Array.from(componentsSet).map(
+              ([shortName, component]) => `${shortName} as ${scope.getName(component, shortName)}`
+            ).join(", ");
+            componentImports += `import { ${specifiers} } from "${namespace}";
+`;
+          }
+          break;
+        case "xml":
+          {
+            componentImports = `import { XmlNode } from "@webstudio-is/sdk-components-react";
 `;
+            xmlPresentationComponents += Array.from(componentsSet).map(
+              ([shortName, component]) => scope.getName(component, shortName)
+            ).filter((scopedName) => scopedName !== "XmlNode").map(
+              (scopedName) => scopedName === "Body" ? `const ${scopedName} = (props: any) => props.children;` : `const ${scopedName} = () => null;`
+            ).join("\n");
+          }
+          break;
+        default: {
+          documentType;
+        }
+      }
     }
-    const pageData = siteDataByPage[pageId];
     const pageFontAssets = fontAssetsByPage[pageId];
     const pageBackgroundImageAssets = backgroundImageAssetsByPage[pageId];
     const rootInstanceId = pageData.page.rootInstanceId;
@@ -633,96 +662,99 @@ var prebuild = async (options) => {
       )
     });
     const projectMeta = siteData.build.pages.meta;
+    const contactEmail = (
+      // fallback to user email when contact email is empty string
+      projectMeta?.contactEmail || siteData.user?.email || void 0
+    );
     const pageMeta = pageData.page.meta;
     const favIconAsset = assets.get(projectMeta?.faviconAssetId ?? "");
     const socialImageAsset = assets.get(pageMeta.socialImageAssetId ?? "");
     const pageExports = `/* eslint-disable */
-/* This is a auto generated file for building the project */ 
+      /* This is a auto generated file for building the project */ 
 
 
-import { Fragment, useState } from "react";
-import type { FontAsset, ImageAsset } from "@webstudio-is/sdk";
-import { useResource } from "@webstudio-is/react-sdk";
-${componentImports}
+      import { Fragment, useState } from "react";
+      import type { FontAsset, ImageAsset } from "@webstudio-is/sdk";
+      import { useResource } from "@webstudio-is/react-sdk";
+      ${componentImports}
 
-export const favIconAsset: ImageAsset | undefined =
-  ${JSON.stringify(favIconAsset)};
+      export const siteName = ${JSON.stringify(projectMeta?.siteName)};
 
-export const socialImageAsset: ImageAsset | undefined =
-  ${JSON.stringify(socialImageAsset)};
+      export const favIconAsset: ImageAsset | undefined =
+        ${JSON.stringify(favIconAsset)};
 
-// Font assets on current page (can be preloaded)
-export const pageFontAssets: FontAsset[] =
-  ${JSON.stringify(pageFontAssets)}
+      export const socialImageAsset: ImageAsset | undefined =
+        ${JSON.stringify(socialImageAsset)};
 
-export const pageBackgroundImageAssets: ImageAsset[] =
-  ${JSON.stringify(pageBackgroundImageAssets)}
+      // Font assets on current page (can be preloaded)
+      export const pageFontAssets: FontAsset[] =
+        ${JSON.stringify(pageFontAssets)}
 
+      export const pageBackgroundImageAssets: ImageAsset[] =
+        ${JSON.stringify(pageBackgroundImageAssets)}
 
+      ${xmlPresentationComponents}
 
-${pageComponent}
+      ${pageComponent}
 
-export { Page }
-`;
+      export { Page }
+    `;
     const serverExports = `/* eslint-disable */
-/* This is a auto generated file for building the project */ 
+      /* This is a auto generated file for building the project */ 
 
 
-import type { ProjectMeta, PageMeta } from "@webstudio-is/sdk";
-${generateResourcesLoader({
+      import type { PageMeta } from "@webstudio-is/sdk";
+      ${generateResourcesLoader({
       scope,
       page: pageData.page,
       dataSources,
       resources
     })}
 
-${generatePageMeta({
+      ${generatePageMeta({
       globalScope: scope,
       page: pageData.page,
       dataSources
     })}
 
-${generateFormsProperties(props)}
+      ${generateFormsProperties(props)}
 
-${generateRemixParams(pageData.page.path)}
+      ${generateRemixParams(pageData.page.path)}
 
-export const projectId = "${siteData.build.projectId}";
+      export const projectId = "${siteData.build.projectId}";
 
-export const user: { email: string | null } | undefined =
-  ${JSON.stringify(siteData.user)};
+      export const contactEmail = ${JSON.stringify(contactEmail)};
 
-export const projectMeta: ProjectMeta =
-  ${JSON.stringify(projectMeta)};
-`;
+      export const customCode = ${JSON.stringify(
+      projectMeta?.code?.trim() ?? ""
+    )};
+    `;
     const pagePath = getPagePath(pageData.page.id, siteData.build.pages);
     const remixRoute = generateRemixRoute(pagePath);
     const fileName = `${remixRoute}.tsx`;
-    const routeFileContent = routeFileTemplate.replace(
+    const routeFileContent = (documentType === "html" ? routeFileTemplate : routeXmlFileTemplate).replace(
       /".*\/__generated__\/_index"/,
       `"../__generated__/${remixRoute}"`
     ).replace(
       /".*\/__generated__\/_index.server"/,
       `"../__generated__/${remixRoute}.server"`
     );
-    await ensureFileInPath(join4(routesDir, fileName), routeFileContent);
-    await ensureFileInPath(join4(generatedDir, fileName), pageExports);
-    await ensureFileInPath(
+    await createFileIfNotExists(join4(routesDir, fileName), routeFileContent);
+    await createFileIfNotExists(join4(generatedDir, fileName), pageExports);
+    await createFileIfNotExists(
       join4(generatedDir, `${remixRoute}.server.tsx`),
       serverExports
     );
   }
-  await writeFile4(
-    join4(generatedDir, "[sitemap.xml].ts"),
+  await createFileIfNotExists(
+    join4(routesDir, "[sitemap.xml]._index.tsx"),
+    defaultSiteMapTemplate.replace(/".*\/__generated__\//, `"../__generated__/`)
+  );
+  await createFileIfNotExists(
+    join4(generatedDir, "$resources.sitemap.xml.ts"),
     `
       export const sitemap = ${JSON.stringify(
-      {
-        pages: siteData.pages.filter(
-          (page) => executeExpression(page.meta.excludePageFromSearch) !== true
-        ).map((page) => ({
-          path: page.path,
-          lastModified: siteData.build.updatedAt
-        }))
-      },
+      getStaticSiteMapXml(siteData.build.pages, siteData.build.updatedAt),
       null,
       2
     )};
@@ -736,11 +768,11 @@ export const projectMeta: ProjectMeta =
       const redirectFileName = `${redirectPagePath}.ts`;
       const content = `import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
 
-export const loader = (arg: LoaderFunctionArgs) => {
-  return redirect("${redirect.new}", ${redirect.status ?? 301});
-};
-`;
-      await ensureFileInPath(join4(routesDir, redirectFileName), content);
+      export const loader = (arg: LoaderFunctionArgs) => {
+      return redirect("${redirect.new}", ${redirect.status ?? 301});
+      };
+      `;
+      await createFileIfNotExists(join4(routesDir, redirectFileName), content);
     }
   }
   spinner.text = "Downloading fonts and images";
@@ -825,7 +857,7 @@ var initFlow = async (options) => {
       if (folderName === void 0) {
         throw new Error("Folder name is required");
       }
-      await ensureFolderExists(join5(cwd4(), folderName));
+      await createFolderIfNotExists(join5(cwd4(), folderName));
       chdir(join5(cwd4(), folderName));
     }
     const { projectLink } = await prompt({
@@ -917,7 +949,7 @@ import makeCLI from "yargs";
 // package.json
 var package_default = {
   name: "webstudio",
-  version: "0.145.0",
+  version: "0.163.0",
   description: "Webstudio CLI",
   author: "Webstudio <github@webstudio.is>",
   homepage: "https://webstudio.is",
@@ -961,24 +993,26 @@ var package_default = {
     zod: "^3.22.4"
   },
   devDependencies: {
-    "@netlify/remix-adapter": "^2.3.0",
-    "@netlify/remix-edge-adapter": "3.2.0",
-    "@remix-run/cloudflare": "^2.8.1",
-    "@remix-run/cloudflare-pages": "^2.8.1",
-    "@remix-run/dev": "^2.8.1",
-    "@remix-run/node": "^2.8.1",
-    "@remix-run/react": "^2.8.1",
-    "@remix-run/server-runtime": "^2.8.1",
-    "@types/node": "^18.17.1",
+    "@netlify/remix-adapter": "^2.3.1",
+    "@netlify/remix-edge-adapter": "3.2.2",
+    "@remix-run/cloudflare": "^2.9.1",
+    "@remix-run/cloudflare-pages": "^2.9.1",
+    "@remix-run/dev": "^2.9.1",
+    "@remix-run/node": "^2.9.1",
+    "@remix-run/react": "^2.9.1",
+    "@remix-run/server-runtime": "^2.9.1",
+    "@types/node": "^20.12.7",
     "@types/prompts": "^2.4.5",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "@types/yargs": "^17.0.32",
     "@webstudio-is/form-handlers": "workspace:*",
     "@webstudio-is/tsconfig": "workspace:*",
+    react: "18.3.0-canary-14898b6a9-20240318",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318",
     tsx: "^4.7.2",
     typescript: "5.4.5",
-    "vite-tsconfig-paths": "^4.3.2",
+    vite: "^5.2.11",
     wrangler: "^3.48.0"
   }
 };
@@ -986,7 +1020,7 @@ var package_default = {
 // src/cli.ts
 var main = async () => {
   try {
-    await ensureFileInPath(GLOBAL_CONFIG_FILE, "{}");
+    await createFileIfNotExists(GLOBAL_CONFIG_FILE, "{}");
     const cmd = makeCLI(hideBin(argv)).strict().fail(function(msg, err, yargs) {
       if (err) {
         throw err;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.145.0",
+  "version": "0.163.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -28,33 +28,35 @@
     "title-case": "^4.1.0",
     "yargs": "^17.7.2",
     "zod": "^3.22.4",
-    "@webstudio-is/http-client": "0.145.0",
-    "@webstudio-is/image": "0.145.0",
-    "@webstudio-is/sdk": "0.145.0",
-    "@webstudio-is/react-sdk": "0.145.0",
-    "@webstudio-is/sdk-components-react": "0.145.0",
-    "@webstudio-is/sdk-components-react-radix": "0.145.0",
-    "@webstudio-is/sdk-components-react-remix": "0.145.0"
+    "@webstudio-is/http-client": "0.163.0",
+    "@webstudio-is/react-sdk": "0.163.0",
+    "@webstudio-is/image": "0.163.0",
+    "@webstudio-is/sdk": "0.163.0",
+    "@webstudio-is/sdk-components-react-radix": "0.163.0",
+    "@webstudio-is/sdk-components-react": "0.163.0",
+    "@webstudio-is/sdk-components-react-remix": "0.163.0"
   },
   "devDependencies": {
-    "@netlify/remix-adapter": "^2.3.0",
-    "@netlify/remix-edge-adapter": "3.2.0",
-    "@remix-run/cloudflare": "^2.8.1",
-    "@remix-run/cloudflare-pages": "^2.8.1",
-    "@remix-run/dev": "^2.8.1",
-    "@remix-run/node": "^2.8.1",
-    "@remix-run/react": "^2.8.1",
-    "@remix-run/server-runtime": "^2.8.1",
-    "@types/node": "^18.17.1",
+    "@netlify/remix-adapter": "^2.3.1",
+    "@netlify/remix-edge-adapter": "3.2.2",
+    "@remix-run/cloudflare": "^2.9.1",
+    "@remix-run/cloudflare-pages": "^2.9.1",
+    "@remix-run/dev": "^2.9.1",
+    "@remix-run/node": "^2.9.1",
+    "@remix-run/react": "^2.9.1",
+    "@remix-run/server-runtime": "^2.9.1",
+    "@types/node": "^20.12.7",
     "@types/prompts": "^2.4.5",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "@types/yargs": "^17.0.32",
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "tsx": "^4.7.2",
     "typescript": "5.4.5",
-    "vite-tsconfig-paths": "^4.3.2",
+    "vite": "^5.2.11",
     "wrangler": "^3.48.0",
-    "@webstudio-is/form-handlers": "0.145.0",
+    "@webstudio-is/form-handlers": "0.163.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {

package/templates/cloudflare/functions/[[path]].ts

@@ -2,7 +2,6 @@ import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore - the server build file is generated by `remix vite:build`
-// eslint-disable-next-line import/no-unresolved
 import * as build from "../build/server";
 
 export const onRequest = createPagesFunctionHandler({ build });

package/templates/cloudflare/package.json

@@ -12,17 +12,13 @@
     "build-cf-types": "wrangler types"
   },
   "dependencies": {
-    "@remix-run/cloudflare": "^2.8.1",
-    "@remix-run/cloudflare-pages": "^2.8.1",
+    "@remix-run/cloudflare": "2.9.1",
+    "@remix-run/cloudflare-pages": "2.9.1",
     "isbot": "^4.1.0"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240405.0",
-    "vite-tsconfig-paths": "^4.2.1",
     "wrangler": "^3.48.0",
     "miniflare": "^3.20231030.4"
-  },
-  "engines": {
-    "node": ">=18.0.0"
   }
 }

package/templates/cloudflare/tsconfig.json

@@ -26,9 +26,6 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
-    "paths": {
-      "~/*": ["./app/*"]
-    },
 
     // Vite takes care of building everything, not tsc.
     "noEmit": true

package/templates/cloudflare/vite.config.ts

@@ -3,13 +3,11 @@ import {
   cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
 } from "@remix-run/dev";
 import { defineConfig } from "vite";
-import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig(({ mode }) => ({
   plugins: [
     // without this, remixCloudflareDevProxy trying to load workerd even for production (it's not needed for production)
     mode === "production" ? undefined : remixCloudflareDevProxy(),
     remix(),
-    tsconfigPaths(),
   ].filter(Boolean),
 }));

package/templates/defaults/app/{routes/[sitemap.xml].tsx → route-templates/default-sitemap.tsx}

@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { sitemap } from "../__generated__/[sitemap.xml]";
+import { sitemap } from "../../../../__generated__/$resources.sitemap.xml";
 
 export const loader = (arg: LoaderFunctionArgs) => {
   const host =
@@ -7,7 +7,7 @@ export const loader = (arg: LoaderFunctionArgs) => {
     arg.request.headers.get("host") ||
     "";
 
-  const urls = sitemap.pages.map((page) => {
+  const urls = sitemap.map((page) => {
     const url = new URL(`https://${host}${page.path}`);
 
     return `

package/templates/defaults/{__templates__/route-template.tsx → app/route-templates/html.tsx}

@@ -11,34 +11,47 @@ import {
 } from "@remix-run/server-runtime";
 import { useLoaderData } from "@remix-run/react";
 import { ReactSdkContext } from "@webstudio-is/react-sdk";
-import { n8nHandler, getFormId } from "@webstudio-is/form-handlers";
+import {
+  n8nHandler,
+  formIdFieldName,
+  formBotFieldName,
+} from "@webstudio-is/form-handlers";
 import {
   Page,
+  siteName,
   favIconAsset,
   socialImageAsset,
   pageFontAssets,
   pageBackgroundImageAssets,
-} from "../../../__generated__/_index";
+} from "../../../../__generated__/_index";
 import {
   formsProperties,
   loadResources,
   getPageMeta,
   getRemixParams,
   projectId,
-  user,
-  projectMeta,
-} from "../../../__generated__/_index.server";
+  contactEmail,
+} from "../../../../__generated__/_index.server";
 
 import css from "../__generated__/index.css?url";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "~/constants.mjs";
+import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
 
 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({ system });
   const pageMeta = getPageMeta({ system, resources });
 
@@ -50,14 +63,6 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     return redirect(pageMeta.redirect, status);
   }
 
-  const host =
-    arg.request.headers.get("x-forwarded-host") ||
-    arg.request.headers.get("host") ||
-    "";
-
-  url.host = host;
-  url.protocol = "https";
-
   // typecheck
   arg.context.EXCLUDE_FROM_SEARCH satisfies boolean;
 
@@ -69,7 +74,6 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       system,
       resources,
       pageMeta,
-      projectMeta,
     },
     // No way for current information to change, so add cache for 10 minutes
     // In case of CRM Data, this should be set to 0
@@ -95,7 +99,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
   if (data === undefined) {
     return metas;
   }
-  const { pageMeta, projectMeta } = data;
+  const { pageMeta } = data;
 
   if (data.url) {
     metas.push({
@@ -117,16 +121,16 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 
   const origin = `https://${data.host}`;
 
-  if (projectMeta?.siteName) {
+  if (siteName) {
     metas.push({
       property: "og:site_name",
-      content: projectMeta.siteName,
+      content: siteName,
     });
     metas.push({
       "script:ld+json": {
         "@context": "https://schema.org",
         "@type": "WebSite",
-        name: projectMeta.siteName,
+        name: siteName,
         url: origin,
       },
     });
@@ -240,68 +244,86 @@ const getMethod = (value: string | undefined) => {
   }
 };
 
-export const action = async ({ request, context }: ActionFunctionArgs) => {
-  const formData = await request.formData();
+export const action = async ({
+  request,
+  context,
+}: ActionFunctionArgs): Promise<
+  { success: true } | { success: false; errors: string[] }
+> => {
+  try {
+    const formData = await request.formData();
 
-  const formId = getFormId(formData);
-  if (formId === undefined) {
-    // We're throwing rather than returning { success: false }
-    // because this isn't supposed to happen normally: bug or malicious user
-    throw json("Form not found", { status: 404 });
-  }
+    const formId = formData.get(formIdFieldName);
 
-  const formProperties = formsProperties.get(formId);
+    if (formId == null || typeof formId !== "string") {
+      throw new Error("No form id in FormData");
+    }
 
-  // form properties are not defined when defaults are used
-  const { action, method } = formProperties ?? {};
+    const formBotValue = formData.get(formBotFieldName);
 
-  const email = user?.email;
+    if (formBotValue == null || typeof formBotValue !== "string") {
+      throw new Error("Form bot field not found");
+    }
 
-  if (email == null) {
-    return { success: false };
-  }
+    const submitTime = parseInt(formBotValue, 16);
+    // Assumes that the difference between the server time and the form submission time,
+    // including any client-server time drift, is within a 5-minute range.
+    // Note: submitTime might be NaN because formBotValue can be any string used for logging purposes.
+    // Example: `formBotValue: jsdom`, or `formBotValue: headless-env`
+    if (
+      Number.isNaN(submitTime) ||
+      Math.abs(Date.now() - submitTime) > 1000 * 60 * 5
+    ) {
+      throw new Error(`Form bot value invalid ${formBotValue}`);
+    }
 
-  // wrapped in try/catch just in cases new URL() throws
-  // (should not happen)
-  let pageUrl: URL;
-  try {
-    pageUrl = new URL(request.url);
+    const formProperties = formsProperties.get(formId);
+
+    // form properties are not defined when defaults are used
+    const { action, method } = formProperties ?? {};
+
+    if (contactEmail === undefined) {
+      throw new Error("Contact email not found");
+    }
+
+    const pageUrl = new URL(request.url);
     pageUrl.host = getRequestHost(request);
-  } catch {
-    return { success: false };
-  }
 
-  if (action !== undefined) {
-    try {
-      // Test that action is full URL
-      new URL(action);
-    } catch {
-      return json(
-        {
-          success: false,
-          error: "Invalid action URL, must be valid http/https protocol",
-        },
-        { status: 200 }
-      );
+    if (action !== undefined) {
+      try {
+        // Test that action is full URL
+        new URL(action);
+      } catch {
+        throw new Error(
+          "Invalid action URL, must be valid http/https protocol"
+        );
+      }
     }
-  }
 
-  const formInfo = {
-    formData,
-    projectId,
-    action: action ?? null,
-    method: getMethod(method),
-    pageUrl: pageUrl.toString(),
-    toEmail: email,
-    fromEmail: pageUrl.hostname + "@webstudio.email",
-  } as const;
-
-  const result = await n8nHandler({
-    formInfo,
-    hookUrl: context.N8N_FORM_EMAIL_HOOK,
-  });
+    const formInfo = {
+      formData,
+      projectId,
+      action: action ?? null,
+      method: getMethod(method),
+      pageUrl: pageUrl.toString(),
+      toEmail: contactEmail,
+      fromEmail: pageUrl.hostname + "@webstudio.email",
+    } as const;
+
+    const result = await n8nHandler({
+      formInfo,
+      hookUrl: context.N8N_FORM_EMAIL_HOOK,
+    });
 
-  return result;
+    return result;
+  } catch (error) {
+    console.error(error);
+
+    return {
+      success: false,
+      errors: [error instanceof Error ? error.message : "Unknown error"],
+    };
+  }
 };
 
 const Outlet = () => {

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

@@ -0,0 +1,61 @@
+/* eslint-disable camelcase */
+import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
+import { ReactSdkContext } from "@webstudio-is/react-sdk";
+import { Page } from "../../../../__generated__/_index";
+import {
+  loadResources,
+  getPageMeta,
+  getRemixParams,
+} from "../../../../__generated__/_index.server";
+
+import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
+import { renderToString } from "react-dom/server";
+
+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({ system });
+  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;
+
+  const text = renderToString(
+    <ReactSdkContext.Provider
+      value={{
+        imageLoader,
+        assetBaseUrl,
+        imageBaseUrl,
+        resources,
+      }}
+    >
+      <Page system={system} />
+    </ReactSdkContext.Provider>
+  );
+
+  return new Response(`<?xml version="1.0" encoding="UTF-8"?>\n${text}`, {
+    headers: { "Content-Type": "application/xml" },
+  });
+};

package/templates/defaults/package.json

@@ -8,28 +8,28 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/react": "^2.8.1",
-    "@remix-run/server-runtime": "^2.8.1",
-    "@remix-run/node": "^2.8.1",
-    "@webstudio-is/react-sdk": "0.145.0",
-    "@webstudio-is/sdk-components-react-radix": "0.145.0",
-    "@webstudio-is/sdk-components-react-remix": "0.145.0",
-    "@webstudio-is/sdk-components-react": "0.145.0",
-    "@webstudio-is/form-handlers": "0.145.0",
-    "@webstudio-is/image": "0.145.0",
-    "@webstudio-is/sdk": "0.145.0",
+    "@remix-run/node": "2.9.1",
+    "@remix-run/react": "2.9.1",
+    "@remix-run/server-runtime": "2.9.1",
+    "@webstudio-is/react-sdk": "0.163.0",
+    "@webstudio-is/sdk-components-react-radix": "0.163.0",
+    "@webstudio-is/sdk-components-react-remix": "0.163.0",
+    "@webstudio-is/sdk-components-react": "0.163.0",
+    "@webstudio-is/form-handlers": "0.163.0",
+    "@webstudio-is/image": "0.163.0",
+    "@webstudio-is/sdk": "0.163.0",
     "isbot": "^3.6.8",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.8.1",
+    "@remix-run/dev": "2.9.1",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "typescript": "5.4.5",
-    "vite": "^5.2.8"
+    "vite": "^5.2.11"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   }
 }

package/templates/defaults/tsconfig.json

@@ -16,11 +16,6 @@
     "forceConsistentCasingInFileNames": true,
     "allowImportingTsExtensions": true,
     "baseUrl": ".",
-    "paths": {
-      "~/*": ["./app/*"]
-    },
-    "customConditions": ["webstudio"],
-
     // Remix takes care of building everything in `remix build`.
     "noEmit": true,
     "skipLibCheck": true

package/templates/defaults/vite.config.ts

@@ -1,15 +1,6 @@
-import { resolve } from "node:path";
 import { defineConfig } from "vite";
 import { vitePlugin as remix } from "@remix-run/dev";
 
 export default defineConfig({
   plugins: [remix()],
-  resolve: {
-    alias: [
-      {
-        find: "~",
-        replacement: resolve("app"),
-      },
-    ],
-  },
 });

package/templates/internal/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "include": ["**/*.ts", "**/*.tsx", "**/*.mjs"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["@remix-run/node", "vite/client"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "checkJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowImportingTsExtensions": true,
+    "baseUrl": ".",
+    "customConditions": ["webstudio"],
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true,
+    "skipLibCheck": true
+  }
+}

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

@@ -3,7 +3,7 @@
     "start": "netlify serve"
   },
   "dependencies": {
-    "@netlify/edge-functions": "^2.3.1",
-    "@netlify/remix-edge-adapter": "3.2.0"
+    "@netlify/edge-functions": "^2.6.0",
+    "@netlify/remix-edge-adapter": "^3.2.2"
   }
 }

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

@@ -1,16 +1,7 @@
-import { resolve } from "node:path";
 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(), netlifyPlugin()],
-  resolve: {
-    alias: [
-      {
-        find: "~",
-        replacement: resolve("app"),
-      },
-    ],
-  },
 });

package/templates/netlify-functions/package.json

@@ -4,6 +4,6 @@
   },
   "dependencies": {
     "@netlify/functions": "^2.6.0",
-    "@netlify/remix-adapter": "^2.3.0"
+    "@netlify/remix-adapter": "^2.3.1"
   }
 }

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

@@ -1,16 +1,7 @@
-import { resolve } from "node:path";
 import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import { netlifyPlugin } from "@netlify/remix-adapter/plugin";
 
 export default defineConfig({
   plugins: [remix(), netlifyPlugin()],
-  resolve: {
-    alias: [
-      {
-        find: "~",
-        replacement: resolve("app"),
-      },
-    ],
-  },
 });

package/templates/saas-helpers/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": [
+      "@remix-run/cloudflare",
+      "vite/client",
+      "@cloudflare/workers-types/2023-07-01"
+    ],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "customConditions": ["webstudio"],
+
+    // Vite takes care of building everything, not tsc.
+    "noEmit": true
+  }
+}

package/templates/defaults/app/__generated__/[sitemap.xml].ts

@@ -1,11 +0,0 @@
-/**
- * The only intent of this file is to support typings inside ../routes/[sitemap.xml].tsx for easier development.
- **/
-export const sitemap = {
-  pages: [
-    {
-      path: "",
-      lastModified: "2021-10-13T12:00:00.000Z",
-    },
-  ],
-};