webstudio 0.132.0 → 0.134.0

package/lib/cli.js

@@ -419,6 +419,8 @@ var prebuild = async (options) => {
   const projectMetas = /* @__PURE__ */ new Map();
   const componentsByPage = {};
   const siteDataByPage = {};
+  const fontAssetsByPage = {};
+  const backgroundImageAssetsByPage = {};
   for (const page of Object.values(siteData.pages)) {
     const instanceMap = new Map(siteData.build.instances);
     const pageInstanceSet = findTreeInstanceIds(
@@ -476,9 +478,31 @@ var prebuild = async (options) => {
         projectMetas.set(instance.component, meta);
       }
     }
+    const styleSourceSelections = siteData.build?.styleSourceSelections ?? [];
+    const pageStyleSourceIds = new Set(
+      styleSourceSelections.filter(([, { instanceId }]) => pageInstanceSet.has(instanceId)).map(([, { values }]) => values).flat()
+    );
+    const pageStyles = siteData.build?.styles?.filter(
+      ([, { styleSourceId }]) => pageStyleSourceIds.has(styleSourceId)
+    );
+    const pageFontFamilySet = new Set(
+      pageStyles.filter(([, { property }]) => property === "fontFamily").map(
+        ([, { value }]) => value.type === "fontFamily" ? value.value : void 0
+      ).flat().filter((value) => value !== void 0)
+    );
+    const pageFontAssets = siteData.assets.filter((asset) => asset.type === "font").filter((fontAsset) => pageFontFamilySet.has(fontAsset.meta.family));
+    fontAssetsByPage[page.id] = pageFontAssets;
+    const backgroundImageAssetIdSet = new Set(
+      pageStyles.filter(([, { property }]) => property === "backgroundImage").map(
+        ([, { value }]) => value.type === "layers" ? value.value.map(
+          (layer) => layer.type === "image" ? layer.value.type === "asset" ? layer.value.value : void 0 : void 0
+        ) : void 0
+      ).flat().filter((value) => value !== void 0)
+    );
+    const backgroundImageAssets = siteData.assets.filter((asset) => asset.type === "image").filter((imageAsset) => backgroundImageAssetIdSet.has(imageAsset.id));
+    backgroundImageAssetsByPage[page.id] = backgroundImageAssets;
   }
   const assetsToDownload = [];
-  const fontAssets = [];
   const imageAssets = [];
   for (const asset of siteData.assets) {
     if (asset.type === "image") {
@@ -511,7 +535,6 @@ var prebuild = async (options) => {
             )
           )
         );
-        fontAssets.push(asset);
       }
     }
   }
@@ -586,6 +609,8 @@ var prebuild = async (options) => {
 `;
     }
     const pageData = siteDataByPage[pageId];
+    const pageFontAssets = fontAssetsByPage[pageId];
+    const pageBackgroundImageAssets = backgroundImageAssetsByPage[pageId];
     const renderedPageData = {
       project: siteData.build.pages.meta
     };
@@ -598,25 +623,25 @@ var prebuild = async (options) => {
       pages: siteData.build.pages,
       props
     });
-    const pathVariableId = pageData.page.pathVariableId ?? "pathVariableId";
-    if (pageData.page.pathVariableId === void 0) {
-      dataSources.set(pathVariableId, {
-        id: pathVariableId,
-        name: "Page Params",
+    const pathParamsDataSourceId = pageData.page.pathParamsDataSourceId ?? "pathParamsDataSourceId";
+    if (pageData.page.pathParamsDataSourceId === void 0) {
+      dataSources.set(pathParamsDataSourceId, {
+        id: pathParamsDataSourceId,
+        name: "Path Params",
         type: "parameter"
       });
     }
     const pageComponent = generateWebstudioComponent({
       scope,
       name: "Page",
-      rootInstanceId: pageData.page.rootInstanceId,
+      rootInstanceId,
       parameters: [
         {
           id: `params`,
           instanceId: "",
           name: "params",
           type: "parameter",
-          value: pathVariableId
+          value: pathParamsDataSourceId
         }
       ],
       instances,
@@ -633,20 +658,27 @@ var prebuild = async (options) => {
 /* This is a auto generated file for building the project */ 
 
 import { Fragment, useState } from "react";
-import type { Asset, ImageAsset, ProjectMeta } from "@webstudio-is/sdk";
+import type { Asset, FontAsset, ImageAsset, ProjectMeta } from "@webstudio-is/sdk";
 import { useResource } from "@webstudio-is/react-sdk";
 import type { PageMeta } from "@webstudio-is/react-sdk";
 ${componentImports}
 import type { PageData } from "~/routes/_index";
-export const fontAssets: Asset[] = ${JSON.stringify(fontAssets)}
 export const imageAssets: ImageAsset[] = ${JSON.stringify(imageAssets)}
+
+// Font assets on current page (can be preloaded)
+export const pageFontAssets: FontAsset[] = ${JSON.stringify(pageFontAssets)}
+
+export const pageBackgroundImageAssets: ImageAsset[] = ${JSON.stringify(
+      pageBackgroundImageAssets
+    )}
+
 export const pageData: PageData = ${JSON.stringify(renderedPageData)};
 export const user: { email: string | null } | undefined = ${JSON.stringify(
       siteData.user
     )};
 export const projectId = "${siteData.build.projectId}";
 
-${generatePageMeta({ scope, page: pageData.page, dataSources })}
+${generatePageMeta({ globalScope: scope, page: pageData.page, dataSources })}
 
 ${pageComponent}
 
@@ -656,8 +688,8 @@ ${generateRemixParams(pageData.page.path)}
 
 ${utilsExport}
 `;
-    const path = getPagePath(pageData.page.id, siteData.build.pages);
-    const remixRoute = generateRemixRoute(path);
+    const pagePath = getPagePath(pageData.page.id, siteData.build.pages);
+    const remixRoute = generateRemixRoute(pagePath);
     const fileName = `${remixRoute}.tsx`;
     const routeFileContent = routeFileTemplate.replace(
       /".*\/__generated__\/_index"/,
@@ -695,6 +727,21 @@ ${utilsExport}
     )};
     `
   );
+  const redirects = siteData.build.pages?.redirects;
+  if (redirects !== void 0 && redirects.length > 0) {
+    spinner.text = "Generating redirects";
+    for (const redirect of redirects) {
+      const redirectPagePath = generateRemixRoute(redirect.old);
+      const redirectFileName = `${redirectPagePath}.ts`;
+      const content = `import { type LoaderArgs, redirect } from "@remix-run/server-runtime";
+
+export const loader = (arg: LoaderArgs) => {
+  return redirect("${redirect.new}", ${redirect.status ?? 301});
+};
+`;
+      await ensureFileInPath(join4(routesDir, redirectFileName), content);
+    }
+  }
   spinner.text = "Downloading fonts and images";
   await Promise.all(assetsToDownload);
   spinner.succeed("Build finished");
@@ -868,7 +915,7 @@ import makeCLI from "yargs";
 // package.json
 var package_default = {
   name: "webstudio",
-  version: "0.132.0",
+  version: "0.134.0",
   description: "Webstudio CLI",
   author: "Webstudio <github@webstudio.is>",
   homepage: "https://webstudio.is",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.132.0",
+  "version": "0.134.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -28,21 +28,21 @@
     "title-case": "^4.1.0",
     "yargs": "^17.7.2",
     "zod": "^3.21.4",
-    "@webstudio-is/http-client": "0.132.0",
-    "@webstudio-is/image": "0.132.0",
-    "@webstudio-is/react-sdk": "0.132.0",
-    "@webstudio-is/sdk": "0.132.0",
-    "@webstudio-is/sdk-components-react": "0.132.0",
-    "@webstudio-is/sdk-components-react-remix": "0.132.0",
-    "@webstudio-is/sdk-components-react-radix": "0.132.0"
+    "@webstudio-is/image": "0.134.0",
+    "@webstudio-is/http-client": "0.134.0",
+    "@webstudio-is/sdk": "0.134.0",
+    "@webstudio-is/react-sdk": "0.134.0",
+    "@webstudio-is/sdk-components-react-radix": "0.134.0",
+    "@webstudio-is/sdk-components-react-remix": "0.134.0",
+    "@webstudio-is/sdk-components-react": "0.134.0"
   },
   "devDependencies": {
     "@types/node": "^18.17.1",
     "@types/prompts": "^2.4.5",
     "tsx": "^3.12.8",
     "typescript": "5.2.2",
-    "@webstudio-is/form-handlers": "0.132.0",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/form-handlers": "0.134.0"
   },
   "scripts": {
     "typecheck": "tsc",

package/templates/defaults/__templates__/route-template.tsx

@@ -6,13 +6,13 @@ import {
   type ActionArgs,
   type LoaderArgs,
   json,
+  redirect,
 } from "@remix-run/server-runtime";
 import { useLoaderData } from "@remix-run/react";
 import type { ProjectMeta } from "@webstudio-is/sdk";
 import { ReactSdkContext } from "@webstudio-is/react-sdk";
 import { n8nHandler, getFormId } from "@webstudio-is/form-handlers";
 import {
-  fontAssets,
   pageData,
   user,
   projectId,
@@ -22,6 +22,8 @@ import {
   imageAssets,
   getRemixParams,
   getPageMeta,
+  pageFontAssets,
+  pageBackgroundImageAssets,
 } from "../../../__generated__/_index";
 import { loadResources } from "../../../__generated__/_index.server";
 import css from "../__generated__/index.css";
@@ -36,6 +38,14 @@ export const loader = async (arg: LoaderArgs) => {
   const resources = await loadResources({ params });
   const pageMeta = getPageMeta({ params, resources });
 
+  if (pageMeta.redirect) {
+    const status =
+      pageMeta.status === 301 || pageMeta.status === 302
+        ? pageMeta.status
+        : 302;
+    return redirect(pageMeta.redirect, status);
+  }
+
   const host =
     arg.request.headers.get("x-forwarded-host") ||
     arg.request.headers.get("host") ||
@@ -59,7 +69,10 @@ export const loader = async (arg: LoaderArgs) => {
     },
     // No way for current information to change, so add cache for 10 minutes
     // In case of CRM Data, this should be set to 0
-    { headers: { "Cache-Control": "public, max-age=600" } }
+    {
+      status: pageMeta.status,
+      headers: { "Cache-Control": "public, max-age=600" },
+    }
   );
 };
 
@@ -198,17 +211,23 @@ export const links: LinksFunction = () => {
     });
   }
 
-  for (const asset of fontAssets) {
-    if (asset.type === "font") {
-      result.push({
-        rel: "preload",
-        href: assetBaseUrl + asset.name,
-        as: "font",
-        crossOrigin: "anonymous",
-        // @todo add mimeType
-        // type: asset.mimeType,
-      });
-    }
+  for (const asset of pageFontAssets) {
+    result.push({
+      rel: "preload",
+      href: assetBaseUrl + asset.name,
+      as: "font",
+    });
+  }
+
+  for (const backgroundImageAsset of pageBackgroundImageAssets) {
+    result.push({
+      rel: "preload",
+      href: imageLoader({
+        src: backgroundImageAsset.name,
+        format: "raw",
+      }),
+      as: "image",
+    });
   }
 
   return result;

package/templates/defaults/package.json

@@ -10,13 +10,13 @@
     "@remix-run/react": "^1.19.2",
     "@remix-run/server-runtime": "^1.19.2",
     "@remix-run/node": "^1.19.2",
-    "@webstudio-is/react-sdk": "0.132.0",
-    "@webstudio-is/sdk-components-react-radix": "0.132.0",
-    "@webstudio-is/sdk-components-react-remix": "0.132.0",
-    "@webstudio-is/sdk-components-react": "0.132.0",
-    "@webstudio-is/form-handlers": "0.132.0",
-    "@webstudio-is/image": "0.132.0",
-    "@webstudio-is/sdk": "0.132.0",
+    "@webstudio-is/react-sdk": "0.134.0",
+    "@webstudio-is/sdk-components-react-radix": "0.134.0",
+    "@webstudio-is/sdk-components-react-remix": "0.134.0",
+    "@webstudio-is/sdk-components-react": "0.134.0",
+    "@webstudio-is/form-handlers": "0.134.0",
+    "@webstudio-is/image": "0.134.0",
+    "@webstudio-is/sdk": "0.134.0",
     "isbot": "^3.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"