webstudio 0.142.0 → 0.143.1

package/lib/cli.js

@@ -259,23 +259,23 @@ import ora2 from "ora";
 import merge from "deepmerge";
 import {
   generateCss,
-  generateUtilsExport,
   generateWebstudioComponent,
   getIndexesWithinAncestors,
   namespaceMeta,
   normalizeProps,
   generateRemixRoute,
   generateRemixParams,
-  generateResourcesLoader,
-  collectionComponent,
-  generatePageMeta,
-  executeExpression
+  collectionComponent
 } from "@webstudio-is/react-sdk";
 import {
   createScope,
   findTreeInstanceIds,
   getPagePath,
-  parseComponentName
+  parseComponentName,
+  executeExpression,
+  generateFormsProperties,
+  generateResourcesLoader,
+  generatePageMeta
 } from "@webstudio-is/sdk";
 import { createImageLoader } from "@webstudio-is/image";
 import * as baseComponentMetas from "@webstudio-is/sdk-components-react/metas";
@@ -514,12 +514,6 @@ var prebuild = async (options) => {
     backgroundImageAssetsByPage[page.id] = backgroundImageAssets;
   }
   const assetsToDownload = [];
-  const imageAssets = [];
-  for (const asset of siteData.assets) {
-    if (asset.type === "image") {
-      imageAssets.push(asset);
-    }
-  }
   const appDomain = options.preview ? "wstd.work" : "wstd.io";
   const assetBuildUrl = `https://${domain}.${appDomain}/cgi/asset/`;
   const imageLoader = createImageLoader({
@@ -549,6 +543,7 @@ var prebuild = async (options) => {
       }
     }
   }
+  const assets = new Map(siteData.assets.map((asset) => [asset.id, asset]));
   spinner.text = "Generating css file";
   const { cssText, classesMap } = generateCss(
     {
@@ -577,17 +572,6 @@ var prebuild = async (options) => {
       "useState",
       "Fragment",
       "useResource",
-      "PageMeta",
-      "createPageMeta",
-      "PageData",
-      "Asset",
-      "ProjectMeta",
-      "System",
-      "fontAssets",
-      "pageData",
-      "user",
-      "projectId",
-      "formsProperties",
       "Page",
       "_props"
     ]);
@@ -624,15 +608,11 @@ var prebuild = async (options) => {
     const pageData = siteDataByPage[pageId];
     const pageFontAssets = fontAssetsByPage[pageId];
     const pageBackgroundImageAssets = backgroundImageAssetsByPage[pageId];
-    const renderedPageData = {
-      project: siteData.build.pages.meta
-    };
     const rootInstanceId = pageData.page.rootInstanceId;
     const instances = new Map(pageData.build.instances);
     const props = new Map(pageData.build.props);
     const dataSources = new Map(pageData.build.dataSources);
     const resources = new Map(pageData.build.resources);
-    const utilsExport = generateUtilsExport({ props });
     const pageComponent = generateWebstudioComponent({
       scope,
       name: "Page",
@@ -656,39 +636,67 @@ var prebuild = async (options) => {
         [rootInstanceId]
       )
     });
+    const projectMeta = siteData.build.pages.meta;
+    const pageMeta = pageData.page.meta;
+    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 */ 
 
+
 import { Fragment, useState } from "react";
-import type { Asset, FontAsset, ImageAsset, ProjectMeta, System } from "@webstudio-is/sdk";
+import type { FontAsset, ImageAsset } 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 imageAssets: ImageAsset[] = ${JSON.stringify(imageAssets)}
+
+export const favIconAsset: ImageAsset | undefined =
+  ${JSON.stringify(favIconAsset)};
+
+export const socialImageAsset: ImageAsset | undefined =
+  ${JSON.stringify(socialImageAsset)};
 
 // Font assets on current page (can be preloaded)
-export const pageFontAssets: FontAsset[] = ${JSON.stringify(pageFontAssets)}
+export const pageFontAssets: FontAsset[] =
+  ${JSON.stringify(pageFontAssets)}
 
-export const pageBackgroundImageAssets: ImageAsset[] = ${JSON.stringify(
-      pageBackgroundImageAssets
-    )}
+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({ globalScope: scope, page: pageData.page, dataSources })}
 
 ${pageComponent}
 
 export { Page }
+`;
+    const serverExports = `/* eslint-disable */
+/* This is a auto generated file for building the project */ 
+
+
+import type { ProjectMeta, PageMeta } from "@webstudio-is/sdk";
+${generateResourcesLoader({
+      scope,
+      page: pageData.page,
+      dataSources,
+      resources
+    })}
+
+${generatePageMeta({
+      globalScope: scope,
+      page: pageData.page,
+      dataSources
+    })}
+
+${generateFormsProperties(props)}
 
 ${generateRemixParams(pageData.page.path)}
 
-${utilsExport}
+export const projectId = "${siteData.build.projectId}";
+
+export const user: { email: string | null } | undefined =
+  ${JSON.stringify(siteData.user)};
+
+export const projectMeta: ProjectMeta =
+  ${JSON.stringify(projectMeta)};
 `;
     const pagePath = getPagePath(pageData.page.id, siteData.build.pages);
     const remixRoute = generateRemixRoute(pagePath);
@@ -704,12 +712,7 @@ ${utilsExport}
     await ensureFileInPath(join4(generatedDir, fileName), pageExports);
     await ensureFileInPath(
       join4(generatedDir, `${remixRoute}.server.tsx`),
-      generateResourcesLoader({
-        scope,
-        page: pageData.page,
-        dataSources,
-        resources
-      })
+      serverExports
     );
   }
   await writeFile4(
@@ -918,7 +921,7 @@ import makeCLI from "yargs";
 // package.json
 var package_default = {
   name: "webstudio",
-  version: "0.142.0",
+  version: "0.143.1",
   description: "Webstudio CLI",
   author: "Webstudio <github@webstudio.is>",
   homepage: "https://webstudio.is",

package/package.json

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

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

@@ -10,34 +10,34 @@ import {
   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 {
-  pageData,
-  user,
-  projectId,
-  formsProperties,
   Page,
-  imageAssets,
-  getRemixParams,
-  getPageMeta,
+  favIconAsset,
+  socialImageAsset,
   pageFontAssets,
   pageBackgroundImageAssets,
 } from "../../../__generated__/_index";
-import { loadResources } from "../../../__generated__/_index.server";
+import {
+  formsProperties,
+  loadResources,
+  getPageMeta,
+  getRemixParams,
+  projectId,
+  user,
+  projectMeta,
+} from "../../../__generated__/_index.server";
+
 import css from "../__generated__/index.css";
 import { assetBaseUrl, imageBaseUrl, imageLoader } from "~/constants.mjs";
 
-export type PageData = {
-  project?: ProjectMeta;
-};
-
 export const loader = async (arg: LoaderArgs) => {
+  const url = new URL(arg.request.url);
   const params = getRemixParams(arg.params);
   const system = {
     params,
-    search: {},
+    search: Object.fromEntries(url.searchParams),
   };
   const resources = await loadResources({ system });
   const pageMeta = getPageMeta({ system, resources });
@@ -55,7 +55,6 @@ export const loader = async (arg: LoaderArgs) => {
     arg.request.headers.get("host") ||
     "";
 
-  const url = new URL(arg.request.url);
   url.host = host;
   url.protocol = "https";
 
@@ -70,6 +69,7 @@ export const loader = async (arg: LoaderArgs) => {
       system,
       resources,
       pageMeta,
+      projectMeta,
     },
     // No way for current information to change, so add cache for 10 minutes
     // In case of CRM Data, this should be set to 0
@@ -95,8 +95,7 @@ export const meta: V2_ServerRuntimeMetaFunction<typeof loader> = ({ data }) => {
   if (data === undefined) {
     return metas;
   }
-  const { pageMeta } = data;
-  const { project } = pageData;
+  const { pageMeta, projectMeta } = data;
 
   if (data.url) {
     metas.push({
@@ -118,16 +117,16 @@ export const meta: V2_ServerRuntimeMetaFunction<typeof loader> = ({ data }) => {
 
   const origin = `https://${data.host}`;
 
-  if (project?.siteName) {
+  if (projectMeta?.siteName) {
     metas.push({
       property: "og:site_name",
-      content: project.siteName,
+      content: projectMeta.siteName,
     });
     metas.push({
       "script:ld+json": {
         "@context": "https://schema.org",
         "@type": "WebSite",
-        name: project.siteName,
+        name: projectMeta.siteName,
         url: origin,
       },
     });
@@ -151,21 +150,15 @@ export const meta: V2_ServerRuntimeMetaFunction<typeof loader> = ({ data }) => {
     });
   }
 
-  if (pageMeta.socialImageAssetId) {
-    const imageAsset = imageAssets.find(
-      (asset) => asset.id === pageMeta.socialImageAssetId
-    );
-
-    if (imageAsset) {
-      metas.push({
-        property: "og:image",
-        content: `https://${data.host}${imageLoader({
-          src: imageAsset.name,
-          // Do not transform social image (not enough information do we need to do this)
-          format: "raw",
-        })}`,
-      });
-    }
+  if (socialImageAsset) {
+    metas.push({
+      property: "og:image",
+      content: `https://${data.host}${imageLoader({
+        src: socialImageAsset.name,
+        // 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",
@@ -186,25 +179,17 @@ export const links: LinksFunction = () => {
     href: css,
   });
 
-  const { project } = pageData;
-
-  if (project?.faviconAssetId) {
-    const imageAsset = imageAssets.find(
-      (asset) => asset.id === project.faviconAssetId
-    );
-
-    if (imageAsset) {
-      result.push({
-        rel: "icon",
-        href: imageLoader({
-          src: imageAsset.name,
-          width: 128,
-          quality: 100,
-          format: "auto",
-        }),
-        type: undefined,
-      });
-    }
+  if (favIconAsset) {
+    result.push({
+      rel: "icon",
+      href: imageLoader({
+        src: favIconAsset.name,
+        width: 128,
+        quality: 100,
+        format: "auto",
+      }),
+      type: undefined,
+    });
   } else {
     result.push({
       rel: "icon",

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.142.0",
-    "@webstudio-is/sdk-components-react-radix": "0.142.0",
-    "@webstudio-is/sdk-components-react-remix": "0.142.0",
-    "@webstudio-is/sdk-components-react": "0.142.0",
-    "@webstudio-is/form-handlers": "0.142.0",
-    "@webstudio-is/image": "0.142.0",
-    "@webstudio-is/sdk": "0.142.0",
+    "@webstudio-is/react-sdk": "0.143.1",
+    "@webstudio-is/sdk-components-react-radix": "0.143.1",
+    "@webstudio-is/sdk-components-react-remix": "0.143.1",
+    "@webstudio-is/sdk-components-react": "0.143.1",
+    "@webstudio-is/form-handlers": "0.143.1",
+    "@webstudio-is/image": "0.143.1",
+    "@webstudio-is/sdk": "0.143.1",
     "isbot": "^3.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package/templates/defaults/remix.config.js

@@ -5,7 +5,6 @@ module.exports = {
   serverDependenciesToBundle: [
     /@webstudio-is\//,
     "nanoid",
-    "@jsep-plugin/assignment",
     "change-case",
     "title-case",
   ],

package/templates/netlify-edge-functions/remix.config.js

@@ -8,7 +8,6 @@ const baseConfig =
         serverDependenciesToBundle: [
           /@webstudio-is\//,
           "nanoid",
-          "@jsep-plugin/assignment",
           "change-case",
           "title-case",
         ],

package/templates/netlify-functions/remix.config.js

@@ -16,7 +16,6 @@ module.exports = {
   serverDependenciesToBundle: [
     /@webstudio-is\//,
     "nanoid",
-    "@jsep-plugin/assignment",
     "change-case",
     "title-case",
   ],