webstudio 0.151.0 → 0.167.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.151.0",
+  "version": "0.167.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -17,53 +17,55 @@
   ],
   "license": "AGPL-3.0-or-later",
   "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "change-case": "^5.0.2",
     "deepmerge": "^4.3.1",
     "env-paths": "^3.0.0",
     "execa": "^7.2.0",
-    "ora": "^7.0.1",
+    "parse5": "7.1.2",
     "p-limit": "^4.0.0",
-    "picocolors": "^1.0.0",
-    "prompts": "^2.4.2",
+    "picocolors": "^1.0.1",
     "strip-indent": "^4.0.0",
     "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.167.0",
+    "@webstudio-is/image": "0.167.0",
+    "@webstudio-is/react-sdk": "0.167.0",
+    "@webstudio-is/sdk": "0.167.0",
+    "@webstudio-is/sdk-components-react-radix": "0.167.0",
+    "@webstudio-is/sdk-components-react": "0.167.0",
+    "@webstudio-is/sdk-components-react-remix": "0.167.0"
   },
   "devDependencies": {
-    "@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",
+    "@jest/globals": "^29.7.0",
+    "@netlify/remix-adapter": "^2.4.0",
+    "@netlify/remix-edge-adapter": "3.3.0",
+    "@remix-run/cloudflare": "^2.9.2",
+    "@remix-run/cloudflare-pages": "^2.9.2",
+    "@remix-run/dev": "^2.9.2",
+    "@remix-run/node": "^2.9.2",
+    "@remix-run/react": "^2.9.2",
+    "@remix-run/server-runtime": "^2.9.2",
     "@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": "^5.2.11",
+    "vite": "^5.2.12",
     "wrangler": "^3.48.0",
-    "@webstudio-is/form-handlers": "0.151.0",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/form-handlers": "0.167.0",
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/jest-config": "1.0.7"
   },
   "scripts": {
     "typecheck": "tsc",
     "checks": "pnpm typecheck",
     "build": "rm -rf lib && esbuild src/cli.ts --outdir=lib --bundle --format=esm --packages=external",
     "local-run": "tsx --no-warnings ./src/bin.ts",
-    "dev": "esbuild src/cli.ts --watch --bundle --format=esm --packages=external --outdir=./lib"
+    "dev": "esbuild src/cli.ts --watch --bundle --format=esm --packages=external --outdir=./lib",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest"
   }
 }

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,9 +12,9 @@
     "build-cf-types": "wrangler types"
   },
   "dependencies": {
-    "@remix-run/cloudflare": "2.9.1",
-    "@remix-run/cloudflare-pages": "2.9.1",
-    "isbot": "^4.1.0"
+    "@remix-run/cloudflare": "2.9.2",
+    "@remix-run/cloudflare-pages": "2.9.2",
+    "isbot": "^5.1.8"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240405.0",

package/templates/cloudflare/tsconfig.json

@@ -8,7 +8,7 @@
     "**/.client/**/*.tsx"
   ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "lib": ["DOM", "DOM.Iterable", "ES2023"],
     "types": [
       "@remix-run/cloudflare",
       "vite/client",

package/templates/defaults/app/root.tsx

@@ -1,13 +1,31 @@
-import { Links, Meta, Outlet } from "@remix-run/react";
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+import { Links, Meta, Outlet, useMatches } from "@remix-run/react";
+// @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="en">
+    <html lang={lang}>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
+        <CustomCode />
       </head>
       <Outlet />
     </html>

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,
@@ -77,7 +81,6 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       status: pageMeta.status,
       headers: {
         "Cache-Control": "public, max-age=600",
-        "x-ws-language": pageMeta.language ?? "en",
       },
     }
   );
@@ -86,7 +89,6 @@ export const loader = async (arg: LoaderFunctionArgs) => {
 export const headers: HeadersFunction = ({ loaderHeaders }) => {
   return {
     "Cache-Control": "public, max-age=0, must-revalidate",
-    "x-ws-language": loaderHeaders.get("x-ws-language") ?? "",
   };
 };
 
@@ -240,66 +242,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

@@ -8,26 +8,26 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@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",
-    "isbot": "^3.6.8",
+    "@remix-run/node": "2.9.2",
+    "@remix-run/react": "2.9.2",
+    "@remix-run/server-runtime": "2.9.2",
+    "@webstudio-is/react-sdk": "0.167.0",
+    "@webstudio-is/sdk-components-react-radix": "0.167.0",
+    "@webstudio-is/sdk-components-react-remix": "0.167.0",
+    "@webstudio-is/sdk-components-react": "0.167.0",
+    "@webstudio-is/form-handlers": "0.167.0",
+    "@webstudio-is/image": "0.167.0",
+    "@webstudio-is/sdk": "0.167.0",
+    "isbot": "^5.1.8",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "devDependencies": {
-    "@remix-run/dev": "2.9.1",
+    "@remix-run/dev": "2.9.2",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "typescript": "5.4.5",
-    "vite": "^5.2.11"
+    "vite": "^5.2.12"
   },
   "engines": {
     "node": ">=20.0.0"

package/templates/defaults/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "include": ["**/*.ts", "**/*.tsx", "**/*.mjs"],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "types": ["@remix-run/node", "vite/client"],
     "isolatedModules": true,
     "esModuleInterop": true,

package/templates/internal/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "include": ["**/*.ts", "**/*.tsx", "**/*.mjs"],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "lib": ["DOM", "DOM.Iterable", "ES2023"],
     "types": ["@remix-run/node", "vite/client"],
     "isolatedModules": true,
     "esModuleInterop": true,

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

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

package/templates/netlify-functions/package.json

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

package/templates/saas-helpers/tsconfig.json

@@ -8,7 +8,7 @@
     "**/.client/**/*.tsx"
   ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "lib": ["DOM", "DOM.Iterable", "ES2023"],
     "types": [
       "@remix-run/cloudflare",
       "vite/client",

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",
-  },
-];