webstudio 0.151.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,7 +265,7 @@ import {
   normalizeProps,
   generateRemixRoute,
   generateRemixParams,
-  collectionComponent
+  isCoreComponent
 } from "@webstudio-is/react-sdk";
 import {
   createScope,
@@ -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,11 +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(), "app/routes/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(routeTemplatePath);
+  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
@@ -592,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;
@@ -639,82 +670,88 @@ var prebuild = async (options) => {
     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}
 
-export const siteName = ${JSON.stringify(projectMeta?.siteName)};
+      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 { 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 contactEmail = ${JSON.stringify(contactEmail)};
+      export const contactEmail = ${JSON.stringify(contactEmail)};
 
-export const customCode = ${JSON.stringify(projectMeta?.code?.trim() ?? "")};
-`;
+      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(
       getStaticSiteMapXml(siteData.build.pages, siteData.build.updatedAt),
@@ -731,11 +768,11 @@ export const customCode = ${JSON.stringify(projectMeta?.code?.trim() ?? "")};
       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";
@@ -820,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({
@@ -912,7 +949,7 @@ import makeCLI from "yargs";
 // package.json
 var package_default = {
   name: "webstudio",
-  version: "0.151.0",
+  version: "0.163.0",
   description: "Webstudio CLI",
   author: "Webstudio <github@webstudio.is>",
   homepage: "https://webstudio.is",
@@ -983,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.151.0",
+  "version": "0.163.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -28,13 +28,13 @@
     "title-case": "^4.1.0",
     "yargs": "^17.7.2",
     "zod": "^3.22.4",
-    "@webstudio-is/http-client": "0.151.0",
-    "@webstudio-is/react-sdk": "0.151.0",
-    "@webstudio-is/image": "0.151.0",
-    "@webstudio-is/sdk": "0.151.0",
-    "@webstudio-is/sdk-components-react-radix": "0.151.0",
-    "@webstudio-is/sdk-components-react-remix": "0.151.0",
-    "@webstudio-is/sdk-components-react": "0.151.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.1",
@@ -56,7 +56,7 @@
     "typescript": "5.4.5",
     "vite": "^5.2.11",
     "wrangler": "^3.48.0",
-    "@webstudio-is/form-handlers": "0.151.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/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 =

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

@@ -11,7 +11,11 @@ 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,
@@ -240,66 +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);
 
-  if (contactEmail === undefined) {
-    return { success: false };
-  }
+    if (formBotValue == null || typeof formBotValue !== "string") {
+      throw new Error("Form bot field not found");
+    }
 
-  // wrapped in try/catch just in cases new URL() throws
-  // (should not happen)
-  let pageUrl: URL;
-  try {
-    pageUrl = new URL(request.url);
+    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}`);
+    }
+
+    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: contactEmail,
-    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

@@ -11,13 +11,13 @@
     "@remix-run/node": "2.9.1",
     "@remix-run/react": "2.9.1",
     "@remix-run/server-runtime": "2.9.1",
-    "@webstudio-is/react-sdk": "0.151.0",
-    "@webstudio-is/sdk-components-react-radix": "0.151.0",
-    "@webstudio-is/sdk-components-react-remix": "0.151.0",
-    "@webstudio-is/sdk-components-react": "0.151.0",
-    "@webstudio-is/form-handlers": "0.151.0",
-    "@webstudio-is/image": "0.151.0",
-    "@webstudio-is/sdk": "0.151.0",
+    "@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"

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

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