webstudio 0.198.0 → 0.200.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.198.0",
+  "version": "0.200.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -47,6 +47,7 @@
   "devDependencies": {
     "@netlify/remix-adapter": "^2.5.1",
     "@netlify/remix-edge-adapter": "3.4.2",
+    "@react-router/dev": "^7.1.1",
     "@remix-run/cloudflare": "^2.15.2",
     "@remix-run/cloudflare-pages": "^2.15.2",
     "@remix-run/dev": "^2.15.2",
@@ -57,20 +58,25 @@
     "@types/react-dom": "^18.2.25",
     "@types/yargs": "^17.0.33",
     "@vitejs/plugin-react": "^4.3.4",
+    "h3": "^1.13.1",
+    "ipx": "^3.0.1",
     "prettier": "3.4.2",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
+    "react-router": "^7.1.1",
     "ts-expect": "^1.3.0",
     "vike": "^0.4.210",
     "vite": "^5.4.11",
-    "vitest": "^2.1.8",
+    "vitest": "^3.0.2",
     "wrangler": "^3.63.2",
-    "@webstudio-is/http-client": "0.198.0",
-    "@webstudio-is/image": "0.198.0",
-    "@webstudio-is/react-sdk": "0.198.0",
-    "@webstudio-is/sdk-components-react": "0.198.0",
-    "@webstudio-is/sdk-components-react-radix": "0.198.0",
-    "@webstudio-is/sdk": "0.198.0",
-    "@webstudio-is/sdk-components-react-remix": "0.198.0",
+    "@webstudio-is/http-client": "0.200.0",
+    "@webstudio-is/react-sdk": "0.200.0",
+    "@webstudio-is/image": "0.200.0",
+    "@webstudio-is/sdk": "0.200.0",
+    "@webstudio-is/sdk-components-animation": "0.200.0",
+    "@webstudio-is/sdk-components-react": "0.200.0",
+    "@webstudio-is/sdk-components-react-radix": "0.200.0",
+    "@webstudio-is/sdk-components-react-remix": "0.200.0",
+    "@webstudio-is/sdk-components-react-router": "0.200.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {

package/templates/defaults/app/constants.mjs

@@ -3,7 +3,6 @@
  * and we use `node --eval` to extract the constants.
  */
 export const assetBaseUrl = "/assets/";
-export const imageBaseUrl = "/assets/";
 
 /**
  * @type {import("@webstudio-is/image").ImageLoader}

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

@@ -16,7 +16,12 @@ import {
   formIdFieldName,
   formBotFieldName,
 } from "@webstudio-is/sdk/runtime";
-import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
+import {
+  ReactSdkContext,
+  PageSettingsMeta,
+  PageSettingsTitle,
+  PageSettingsCanonicalLink,
+} from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
   siteName,
@@ -117,33 +122,10 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
   if (data === undefined) {
     return metas;
   }
-  const { pageMeta } = data;
-
-  if (data.url) {
-    metas.push({
-      property: "og:url",
-      content: data.url,
-    });
-  }
-
-  if (pageMeta.title) {
-    metas.push({ title: pageMeta.title });
-
-    metas.push({
-      property: "og:title",
-      content: pageMeta.title,
-    });
-  }
-
-  metas.push({ property: "og:type", content: "website" });
 
   const origin = `https://${data.host}`;
 
   if (siteName) {
-    metas.push({
-      property: "og:site_name",
-      content: siteName,
-    });
     metas.push({
       "script:ld+json": {
         "@context": "https://schema.org",
@@ -154,42 +136,6 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
     });
   }
 
-  if (pageMeta.excludePageFromSearch) {
-    metas.push({
-      name: "robots",
-      content: "noindex, nofollow",
-    });
-  }
-
-  if (pageMeta.description) {
-    metas.push({
-      name: "description",
-      content: pageMeta.description,
-    });
-    metas.push({
-      property: "og:description",
-      content: pageMeta.description,
-    });
-  }
-
-  if (pageMeta.socialImageAssetName) {
-    metas.push({
-      property: "og:image",
-      content: `https://${data.host}${imageLoader({
-        src: pageMeta.socialImageAssetName,
-        // Do not transform social image (not enough information do we need to do this)
-        format: "raw",
-      })}`,
-    });
-  } else if (pageMeta.socialImageUrl) {
-    metas.push({
-      property: "og:image",
-      content: pageMeta.socialImageUrl,
-    });
-  }
-
-  metas.push(...pageMeta.custom);
-
   return metas;
 };
 
@@ -323,7 +269,8 @@ export const action = async ({
 };
 
 const Outlet = () => {
-  const { system, resources, url } = useLoaderData<typeof loader>();
+  const { system, resources, url, pageMeta, host } =
+    useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -334,6 +281,15 @@ const Outlet = () => {
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
       <Page key={url} system={system} />
+      <PageSettingsMeta
+        url={url}
+        pageMeta={pageMeta}
+        host={host}
+        siteName={siteName}
+        imageLoader={imageLoader}
+      />
+      <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
+      <PageSettingsCanonicalLink href={url} />
     </ReactSdkContext.Provider>
   );
 };

package/templates/defaults/package.json

@@ -11,12 +11,13 @@
     "@remix-run/node": "2.15.2",
     "@remix-run/react": "2.15.2",
     "@remix-run/server-runtime": "2.15.2",
-    "@webstudio-is/react-sdk": "0.198.0",
-    "@webstudio-is/sdk-components-react-radix": "0.198.0",
-    "@webstudio-is/sdk-components-react-remix": "0.198.0",
-    "@webstudio-is/sdk-components-react": "0.198.0",
-    "@webstudio-is/image": "0.198.0",
-    "@webstudio-is/sdk": "0.198.0",
+    "@webstudio-is/image": "0.200.0",
+    "@webstudio-is/react-sdk": "0.200.0",
+    "@webstudio-is/sdk": "0.200.0",
+    "@webstudio-is/sdk-components-react": "0.200.0",
+    "@webstudio-is/sdk-components-animation": "0.200.0",
+    "@webstudio-is/sdk-components-react-radix": "0.200.0",
+    "@webstudio-is/sdk-components-react-remix": "0.200.0",
     "isbot": "^5.1.19",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
@@ -25,7 +26,7 @@
     "@remix-run/dev": "2.15.2",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
-    "typescript": "5.7.2",
+    "typescript": "5.7.3",
     "vite": "^5.4.11"
   },
   "engines": {

package/templates/internal/package.json

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

package/templates/netlify-edge-functions/app/constants.mjs

@@ -3,7 +3,6 @@
  * and we use `node --eval` to extract the constants.
  */
 export const assetBaseUrl = "/assets/";
-export const imageBaseUrl = "/assets/";
 
 /**
  * @type {import("@webstudio-is/image").ImageLoader}

package/templates/netlify-functions/app/constants.mjs

@@ -3,7 +3,6 @@
  * and we use `node --eval` to extract the constants.
  */
 export const assetBaseUrl = "/assets/";
-export const imageBaseUrl = "/assets/";
 
 /**
  * @type {import("@webstudio-is/image").ImageLoader}

package/templates/react-router-docker/.dockerignore

@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md

package/templates/react-router-docker/Dockerfile

@@ -0,0 +1,23 @@
+FROM node:22-alpine AS development-dependencies-env
+COPY . /app
+WORKDIR /app
+RUN npm install
+
+FROM node:22-alpine AS production-dependencies-env
+COPY ./package.json package-lock.json /app/
+WORKDIR /app
+RUN npm install --omit=dev
+
+FROM node:22-alpine AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN npm run build
+
+FROM node:22-alpine
+COPY ./package.json package-lock.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+# there is a DOMAINS env with comma separated allowed domains for image processing
+CMD ["npm", "run", "start"]

package/templates/react-router-docker/app/constants.mjs

@@ -0,0 +1,18 @@
+/**
+ * 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 (props.format === "raw") {
+    return props.src;
+  }
+  // handle absolute urls
+  const path = URL.canParse(props.src) ? `/${props.src}` : props.src;
+  // https://github.com/unjs/ipx?tab=readme-ov-file#modifiers
+  return `/_image/w_${props.width},q_${props.quality}${path}`;
+};

package/templates/react-router-docker/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-docker/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-docker/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,
+    }
+  );
+};

package/templates/react-router-docker/app/route-templates/html.tsx

@@ -0,0 +1,295 @@
+import {
+  type MetaFunction,
+  type LinksFunction,
+  type LinkDescriptor,
+  type ActionFunctionArgs,
+  type LoaderFunctionArgs,
+  type HeadersFunction,
+  data,
+  redirect,
+  useLoaderData,
+} from "react-router";
+import {
+  isLocalResource,
+  loadResource,
+  loadResources,
+  formIdFieldName,
+  formBotFieldName,
+} from "@webstudio-is/sdk/runtime";
+import {
+  ReactSdkContext,
+  PageSettingsMeta,
+  PageSettingsTitle,
+} from "@webstudio-is/react-sdk/runtime";
+import {
+  Page,
+  siteName,
+  favIconAsset,
+  pageFontAssets,
+  pageBackgroundImageAssets,
+} from "__CLIENT__";
+import {
+  getResources,
+  getPageMeta,
+  getRemixParams,
+  projectId,
+  contactEmail,
+} from "__SERVER__";
+import { assetBaseUrl, 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);
+  }
+
+  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;
+    throw redirect(pageMeta.redirect, status);
+  }
+
+  // typecheck
+  arg.context.EXCLUDE_FROM_SEARCH satisfies boolean;
+
+  if (arg.context.EXCLUDE_FROM_SEARCH) {
+    pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
+  }
+
+  return data(
+    {
+      host,
+      url: url.href,
+      system,
+      resources,
+      pageMeta,
+    },
+    // No way for current information to change, so add cache for 10 minutes
+    // In case of CRM Data, this should be set to 0
+    {
+      status: pageMeta.status,
+      headers: {
+        "Cache-Control": "public, max-age=600",
+      },
+    }
+  );
+};
+
+export const headers: HeadersFunction = () => {
+  return {
+    "Cache-Control": "public, max-age=0, must-revalidate",
+  };
+};
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  const metas: ReturnType<MetaFunction> = [];
+  if (data === undefined) {
+    return metas;
+  }
+
+  const origin = `https://${data.host}`;
+
+  if (siteName) {
+    metas.push({
+      "script:ld+json": {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        name: siteName,
+        url: origin,
+      },
+    });
+  }
+
+  return metas;
+};
+
+export const links: LinksFunction = () => {
+  const result: LinkDescriptor[] = [];
+
+  result.push({
+    rel: "stylesheet",
+    href: css,
+  });
+
+  if (favIconAsset) {
+    result.push({
+      rel: "icon",
+      href: imageLoader({
+        src: `${assetBaseUrl}${favIconAsset.name}`,
+        // width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
+        width: 144,
+        height: 144,
+        fit: "pad",
+        quality: 100,
+        format: "auto",
+      }),
+      type: undefined,
+    });
+  }
+
+  for (const asset of pageFontAssets) {
+    result.push({
+      rel: "preload",
+      href: `${assetBaseUrl}${asset.name}`,
+      as: "font",
+      crossOrigin: "anonymous",
+    });
+  }
+
+  for (const backgroundImageAsset of pageBackgroundImageAssets) {
+    result.push({
+      rel: "preload",
+      href: `${assetBaseUrl}${backgroundImageAsset.name}`,
+      as: "image",
+    });
+  }
+
+  return result;
+};
+
+const getRequestHost = (request: Request): string =>
+  request.headers.get("x-forwarded-host") || request.headers.get("host") || "";
+
+export const action = async ({
+  request,
+  context,
+}: ActionFunctionArgs): Promise<
+  { success: true } | { success: false; errors: string[] }
+> => {
+  try {
+    const url = new URL(request.url);
+    url.host = getRequestHost(request);
+
+    const formData = await request.formData();
+
+    const system = {
+      params: {},
+      search: {},
+      origin: url.origin,
+    };
+
+    const resourceName = formData.get(formIdFieldName);
+    let resource =
+      typeof resourceName === "string"
+        ? getResources({ system }).action.get(resourceName)
+        : undefined;
+
+    const formBotValue = formData.get(formBotFieldName);
+
+    if (formBotValue == null || typeof formBotValue !== "string") {
+      throw new Error("Form bot field not found");
+    }
+
+    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}`);
+    }
+
+    formData.delete(formIdFieldName);
+    formData.delete(formBotFieldName);
+
+    if (resource) {
+      resource.headers.push({
+        name: "Content-Type",
+        value: "application/json",
+      });
+      resource.body = Object.fromEntries(formData);
+    } else {
+      if (contactEmail === undefined) {
+        throw new Error("Contact email not found");
+      }
+
+      resource = context.getDefaultActionResource?.({
+        url,
+        projectId,
+        contactEmail,
+        formData,
+      });
+    }
+
+    if (resource === undefined) {
+      throw Error("Resource not found");
+    }
+    const { ok, statusText } = await loadResource(fetch, resource);
+    if (ok) {
+      return { success: true };
+    }
+    return { success: false, errors: [statusText] };
+  } catch (error) {
+    console.error(error);
+
+    return {
+      success: false,
+      errors: [error instanceof Error ? error.message : "Unknown error"],
+    };
+  }
+};
+
+const Outlet = () => {
+  const { system, resources, url, pageMeta, host } =
+    useLoaderData<typeof loader>();
+  return (
+    <ReactSdkContext.Provider
+      value={{
+        imageLoader,
+        assetBaseUrl,
+        resources,
+      }}
+    >
+      {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
+      <Page key={url} system={system} />
+      <PageSettingsMeta
+        url={url}
+        pageMeta={pageMeta}
+        host={host}
+        siteName={siteName}
+        imageLoader={imageLoader}
+      />
+      <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
+    </ReactSdkContext.Provider>
+  );
+};
+
+export default Outlet;

package/templates/react-router-docker/app/route-templates/redirect.tsx

@@ -0,0 +1,6 @@
+import { redirect } from "react-router";
+import { url, status } from "__REDIRECT__";
+
+export const loader = () => {
+  throw redirect(url, status);
+};