webstudio 0.168.0 → 0.173.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.168.0",
+  "version": "0.173.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -35,45 +35,44 @@
     "parse5": "7.1.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/image": "0.168.0",
-    "@webstudio-is/react-sdk": "0.168.0",
-    "@webstudio-is/sdk": "0.168.0",
-    "@webstudio-is/http-client": "0.168.0",
-    "@webstudio-is/sdk-components-react": "0.168.0",
-    "@webstudio-is/sdk-components-react-radix": "0.168.0",
-    "@webstudio-is/sdk-components-react-remix": "0.168.0"
+    "@webstudio-is/http-client": "0.173.0",
+    "@webstudio-is/sdk": "0.173.0",
+    "@webstudio-is/sdk-components-react": "0.173.0",
+    "@webstudio-is/image": "0.173.0",
+    "@webstudio-is/react-sdk": "0.173.0",
+    "@webstudio-is/sdk-components-react-radix": "0.173.0",
+    "@webstudio-is/sdk-components-react-remix": "0.173.0"
   },
   "devDependencies": {
     "@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",
+    "@remix-run/cloudflare": "^2.10.3",
+    "@remix-run/cloudflare-pages": "^2.10.3",
+    "@remix-run/dev": "^2.10.3",
+    "@remix-run/node": "^2.10.3",
+    "@remix-run/react": "^2.10.3",
+    "@remix-run/server-runtime": "^2.10.3",
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "@types/yargs": "^17.0.32",
+    "@vitejs/plugin-react": "^4.3.1",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "typescript": "5.4.5",
-    "vite": "^5.2.13",
-    "wrangler": "^3.48.0",
+    "typescript": "5.5.2",
+    "vike": "^0.4.180",
+    "vite": "^5.3.4",
+    "wrangler": "^3.63.2",
+    "@webstudio-is/form-handlers": "0.173.0",
     "@webstudio-is/jest-config": "1.0.7",
-    "@webstudio-is/form-handlers": "0.168.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "typecheck": "tsc",
-    "checks": "pnpm typecheck",
     "build": "rm -rf lib && esbuild src/cli.ts --outdir=lib --bundle --format=esm --packages=external",
-    "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

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

package/templates/cloudflare/package.json

@@ -12,13 +12,11 @@
     "build-cf-types": "wrangler types"
   },
   "dependencies": {
-    "@remix-run/cloudflare": "2.9.2",
-    "@remix-run/cloudflare-pages": "2.9.2",
-    "isbot": "^5.1.8"
+    "@remix-run/cloudflare": "2.10.3",
+    "@remix-run/cloudflare-pages": "2.10.3"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20240405.0",
-    "wrangler": "^3.48.0",
-    "miniflare": "^3.20231030.4"
+    "@cloudflare/workers-types": "^4.20240620.0",
+    "wrangler": "^3.63.2"
   }
 }

package/templates/cloudflare/tsconfig.json

@@ -8,26 +8,11 @@
     "**/.client/**/*.tsx"
   ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2023"],
     "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": ".",
-
-    // Vite takes care of building everything, not tsc.
-    "noEmit": true
+      "@cloudflare/workers-types/2023-07-01",
+      "@webstudio-is/react-sdk/placeholder"
+    ]
   }
 }

package/templates/defaults/app/route-templates/default-sitemap.tsx

@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { sitemap } from "../../../../__generated__/$resources.sitemap.xml";
+import { sitemap } from "__SITEMAP__";
 
 export const loader = (arg: LoaderFunctionArgs) => {
   const host =

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

@@ -10,6 +10,11 @@ import {
   redirect,
 } from "@remix-run/server-runtime";
 import { useLoaderData } from "@remix-run/react";
+import {
+  isLocalResource,
+  loadResource,
+  loadResources,
+} from "@webstudio-is/sdk";
 import { ReactSdkContext } from "@webstudio-is/react-sdk";
 import {
   n8nHandler,
@@ -20,21 +25,34 @@ import {
   Page,
   siteName,
   favIconAsset,
-  socialImageAsset,
   pageFontAssets,
   pageBackgroundImageAssets,
-} from "../../../../__generated__/_index";
+} from "__CLIENT__";
 import {
-  formsProperties,
-  loadResources,
+  getResources,
   getPageMeta,
   getRemixParams,
   projectId,
   contactEmail,
-} from "../../../../__generated__/_index.server";
+} from "__SERVER__";
+import { assetBaseUrl, imageBaseUrl, imageLoader } from "__CONSTANTS__";
+import css from "__CSS__?url";
+import { sitemap } from "__SITEMAP__";
+
+const customFetch: typeof fetch = (input, init) => {
+  if (typeof input !== "string") {
+    return fetch(input, init);
+  }
 
-import css from "../__generated__/index.css?url";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
+  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);
@@ -52,7 +70,10 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     origin: url.origin,
   };
 
-  const resources = await loadResources({ system });
+  const resources = await loadResources(
+    customFetch,
+    getResources({ system }).data
+  );
   const pageMeta = getPageMeta({ system, resources });
 
   if (pageMeta.redirect) {
@@ -66,11 +87,14 @@ export const loader = async (arg: LoaderFunctionArgs) => {
   // typecheck
   arg.context.EXCLUDE_FROM_SEARCH satisfies boolean;
 
+  if (arg.context.EXCLUDE_FROM_SEARCH) {
+    pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
+  }
+
   return json(
     {
       host,
       url: url.href,
-      excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH,
       system,
       resources,
       pageMeta,
@@ -86,7 +110,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
   );
 };
 
-export const headers: HeadersFunction = ({ loaderHeaders }) => {
+export const headers: HeadersFunction = () => {
   return {
     "Cache-Control": "public, max-age=0, must-revalidate",
   };
@@ -134,7 +158,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
     });
   }
 
-  if (pageMeta.excludePageFromSearch || data.excludeFromSearch) {
+  if (pageMeta.excludePageFromSearch) {
     metas.push({
       name: "robots",
       content: "noindex, nofollow",
@@ -152,11 +176,11 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
     });
   }
 
-  if (socialImageAsset) {
+  if (pageMeta.socialImageAssetName) {
     metas.push({
       property: "og:image",
       content: `https://${data.host}${imageLoader({
-        src: socialImageAsset.name,
+        src: pageMeta.socialImageAssetName,
         // Do not transform social image (not enough information do we need to do this)
         format: "raw",
       })}`,
@@ -220,19 +244,6 @@ export const links: LinksFunction = () => {
 const getRequestHost = (request: Request): string =>
   request.headers.get("x-forwarded-host") || request.headers.get("host") || "";
 
-const getMethod = (value: string | undefined) => {
-  if (value === undefined) {
-    return "post";
-  }
-
-  switch (value.toLowerCase()) {
-    case "get":
-      return "get";
-    default:
-      return "post";
-  }
-};
-
 export const action = async ({
   request,
   context,
@@ -240,14 +251,25 @@ export const action = async ({
   { success: true } | { success: false; errors: string[] }
 > => {
   try {
+    const pageUrl = new URL(request.url);
+    pageUrl.host = getRequestHost(request);
+
     const formData = await request.formData();
 
-    const formId = formData.get(formIdFieldName);
+    const system = {
+      params: {},
+      search: {},
+      origin: pageUrl.origin,
+    };
+
+    const resourceName = formData.get(formIdFieldName);
 
-    if (formId == null || typeof formId !== "string") {
+    if (resourceName == null || typeof resourceName !== "string") {
       throw new Error("No form id in FormData");
     }
 
+    const resource = getResources({ system }).action.get(resourceName);
+
     const formBotValue = formData.get(formBotFieldName);
 
     if (formBotValue == null || typeof formBotValue !== "string") {
@@ -266,41 +288,32 @@ export const action = async ({
       throw new Error(`Form bot value invalid ${formBotValue}`);
     }
 
-    const formProperties = formsProperties.get(formId);
+    formData.delete(formIdFieldName);
+    formData.delete(formBotFieldName);
 
-    // form properties are not defined when defaults are used
-    const { action, method } = formProperties ?? {};
+    if (resource) {
+      const { ok, statusText } = await loadResource(fetch, {
+        ...resource,
+        body: Object.fromEntries(formData),
+      });
+      if (ok) {
+        return { success: true };
+      }
+      return { success: false, errors: [statusText] };
+    }
 
     if (contactEmail === undefined) {
       throw new Error("Contact email not found");
     }
 
-    const pageUrl = new URL(request.url);
-    pageUrl.host = getRequestHost(request);
-
-    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,
+      formInfo: {
+        formId: [projectId, resourceName].join("--"),
+        formData,
+        pageUrl: pageUrl.toString(),
+        toEmail: contactEmail,
+        fromEmail: pageUrl.hostname + "@webstudio.email",
+      },
       hookUrl: context.N8N_FORM_EMAIL_HOOK,
     });
 
@@ -316,7 +329,7 @@ export const action = async ({
 };
 
 const Outlet = () => {
-  const { system, resources } = useLoaderData<typeof loader>();
+  const { system, resources, url } = useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -326,7 +339,8 @@ const Outlet = () => {
         resources,
       }}
     >
-      <Page system={system} />
+      {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
+      <Page key={url} system={system} />
     </ReactSdkContext.Provider>
   );
 };

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

@@ -0,0 +1,6 @@
+import { redirect } from "@remix-run/server-runtime";
+import { url, status } from "__REDIRECT__";
+
+export const loader = () => {
+  return redirect(url, status);
+};

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

@@ -1,15 +1,27 @@
 /* eslint-disable camelcase */
+import { renderToString } from "react-dom/server";
 import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
+import { isLocalResource, loadResources } from "@webstudio-is/sdk";
 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";
+import { Page } from "__CLIENT__";
+import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
+import { assetBaseUrl, imageBaseUrl, 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);
@@ -28,7 +40,10 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     origin: url.origin,
   };
 
-  const resources = await loadResources({ system });
+  const resources = await loadResources(
+    customFetch,
+    getResources({ system }).data
+  );
   const pageMeta = getPageMeta({ system, resources });
 
   if (pageMeta.redirect) {

package/templates/defaults/package.json

@@ -8,26 +8,26 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/node": "2.9.2",
-    "@remix-run/react": "2.9.2",
-    "@remix-run/server-runtime": "2.9.2",
-    "@webstudio-is/react-sdk": "0.168.0",
-    "@webstudio-is/sdk-components-react-radix": "0.168.0",
-    "@webstudio-is/sdk-components-react-remix": "0.168.0",
-    "@webstudio-is/sdk-components-react": "0.168.0",
-    "@webstudio-is/form-handlers": "0.168.0",
-    "@webstudio-is/image": "0.168.0",
-    "@webstudio-is/sdk": "0.168.0",
-    "isbot": "^5.1.8",
+    "@remix-run/node": "2.10.3",
+    "@remix-run/react": "2.10.3",
+    "@remix-run/server-runtime": "2.10.3",
+    "@webstudio-is/react-sdk": "0.173.0",
+    "@webstudio-is/sdk-components-react-radix": "0.173.0",
+    "@webstudio-is/sdk-components-react-remix": "0.173.0",
+    "@webstudio-is/sdk-components-react": "0.173.0",
+    "@webstudio-is/form-handlers": "0.173.0",
+    "@webstudio-is/image": "0.173.0",
+    "@webstudio-is/sdk": "0.173.0",
+    "isbot": "^5.1.13",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "devDependencies": {
-    "@remix-run/dev": "2.9.2",
+    "@remix-run/dev": "2.10.3",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
-    "typescript": "5.4.5",
-    "vite": "^5.2.13"
+    "typescript": "5.5.2",
+    "vite": "^5.3.4"
   },
   "engines": {
     "node": ">=20.0.0"

package/templates/defaults/tsconfig.json

@@ -2,21 +2,20 @@
   "include": ["**/*.ts", "**/*.tsx", "**/*.mjs"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["@remix-run/node", "vite/client"],
+    "types": [
+      "@remix-run/node",
+      "vite/client",
+      "@webstudio-is/react-sdk/placeholder"
+    ],
     "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": ".",
-    // Remix takes care of building everything in `remix build`.
     "noEmit": true,
     "skipLibCheck": true
   }

package/templates/internal/tsconfig.json

@@ -1,25 +1,5 @@
 {
-  "include": ["**/*.ts", "**/*.tsx", "**/*.mjs"],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2023"],
-    "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
+    "customConditions": ["webstudio"]
   }
 }

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

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

package/templates/netlify-functions/package.json

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

package/templates/saas-helpers/tsconfig.json

@@ -8,27 +8,11 @@
     "**/.client/**/*.tsx"
   ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2023"],
     "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
+      "@cloudflare/workers-types/2023-07-01",
+      "@webstudio-is/react-sdk/placeholder"
+    ]
   }
 }

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/";
+export const imageBaseUrl = "/assets/";
+
+/**
+ * @type {import("@webstudio-is/image").ImageLoader}
+ */
+export const imageLoader = ({ src }) => {
+  return imageBaseUrl + src;
+};