webstudio 0.128.0 → 0.130.0

package/lib/cli.js

@@ -260,14 +260,16 @@ import merge from "deepmerge";
 import {
   generateCss,
   generateUtilsExport,
-  generatePageComponent,
+  generateWebstudioComponent,
   getIndexesWithinAncestors,
   namespaceMeta,
   normalizeProps,
   generateRemixRoute,
   generateRemixParams,
   generateResourcesLoader,
-  collectionComponent
+  collectionComponent,
+  generatePageMeta,
+  executeExpression
 } from "@webstudio-is/react-sdk";
 import {
   createScope,
@@ -334,18 +336,22 @@ var isCliTemplate = async (template) => {
   }
   return false;
 };
-var copyTemplates = async (template = "defaults") => {
+var getTemplatePath = async (template) => {
   const currentPath = fileURLToPath(new URL(import.meta.url));
-  const templatesPath = await isCliTemplate(template) ? normalize(join4(dirname2(currentPath), "..", "templates", template)) : template;
-  await cp(templatesPath, cwd3(), {
+  const templatePath = await isCliTemplate(template) ? normalize(join4(dirname2(currentPath), "..", "templates", template)) : template;
+  return templatePath;
+};
+var copyTemplates = async (template = "defaults") => {
+  const templatePath = await getTemplatePath(template);
+  await cp(templatePath, cwd3(), {
     recursive: true,
     filter: (source) => {
       return basename(source) !== "package.json";
     }
   });
-  if (await isFileExists(join4(templatesPath, "package.json")) === true) {
+  if (await isFileExists(join4(templatePath, "package.json")) === true) {
     await mergeJsonFiles(
-      join4(templatesPath, "package.json"),
+      join4(templatePath, "package.json"),
       join4(cwd3(), "package.json")
     );
   }
@@ -521,28 +527,24 @@ var prebuild = async (options) => {
     },
     {
       assetBaseUrl,
-      atomic: siteData.build.pages.settings?.atomicStyles ?? true
+      atomic: siteData.build.pages.compiler?.atomicStyles ?? true
     }
   );
   await ensureFileInPath(join4(generatedDir, "index.css"), cssText);
   spinner.text = "Generating routes and pages";
-  const routeFileTemplate = await readFile4(
-    normalize(
-      join4(
-        dirname2(fileURLToPath(new URL(import.meta.url))),
-        "..",
-        "templates",
-        "route-template.tsx"
-      )
-    ),
-    "utf8"
+  const routeTemplatePath = normalize(
+    join4(cwd3(), "__templates__", "route-template.tsx")
   );
+  const routeFileTemplate = await readFile4(routeTemplatePath, "utf8");
+  await rm(dirname2(routeTemplatePath), { recursive: true });
   for (const [pageId, pageComponents] of Object.entries(componentsByPage)) {
     const scope = createScope([
       // manually maintained list of occupied identifiers
       "useState",
       "Fragment",
       "useResource",
+      "PageMeta",
+      "createPageMeta",
       "PageData",
       "Asset",
       "fontAssets",
@@ -585,8 +587,7 @@ var prebuild = async (options) => {
     }
     const pageData = siteDataByPage[pageId];
     const renderedPageData = {
-      project: siteData.build.pages.meta,
-      page: pageData.page
+      project: siteData.build.pages.meta
     };
     const rootInstanceId = pageData.page.rootInstanceId;
     const instances = new Map(pageData.build.instances);
@@ -597,9 +598,27 @@ var prebuild = async (options) => {
       pages: siteData.build.pages,
       props
     });
-    const pageComponent = generatePageComponent({
+    const pathVariableId = pageData.page.pathVariableId ?? "pathVariableId";
+    if (pageData.page.pathVariableId === void 0) {
+      dataSources.set(pathVariableId, {
+        id: pathVariableId,
+        name: "Page Params",
+        type: "parameter"
+      });
+    }
+    const pageComponent = generateWebstudioComponent({
       scope,
-      page: pageData.page,
+      name: "Page",
+      rootInstanceId: pageData.page.rootInstanceId,
+      parameters: [
+        {
+          id: `params`,
+          instanceId: "",
+          name: "params",
+          type: "parameter",
+          value: pathVariableId
+        }
+      ],
       instances,
       props,
       dataSources,
@@ -616,6 +635,7 @@ var prebuild = async (options) => {
 import { Fragment, useState } from "react";
 import type { Asset, 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)}
@@ -626,6 +646,8 @@ export const user: { email: string | null } | undefined = ${JSON.stringify(
     )};
 export const projectId = "${siteData.build.projectId}";
 
+${generatePageMeta({ scope, page: pageData.page, dataSources })}
+
 ${pageComponent}
 
 export { Page }
@@ -637,9 +659,12 @@ ${utilsExport}
     const path = getPagePath(pageData.page.id, siteData.build.pages);
     const remixRoute = generateRemixRoute(path);
     const fileName = `${remixRoute}.tsx`;
-    const routeFileContent = routeFileTemplate.replace('../__generated__/index"', `../__generated__/${remixRoute}"`).replace(
-      '../__generated__/index.server"',
-      `../__generated__/${remixRoute}.server"`
+    const routeFileContent = routeFileTemplate.replace(
+      /".*\/__generated__\/_index"/,
+      `"../__generated__/${remixRoute}"`
+    ).replace(
+      /".*\/__generated__\/_index.server"/,
+      `"../__generated__/${remixRoute}.server"`
     );
     await ensureFileInPath(join4(routesDir, fileName), routeFileContent);
     await ensureFileInPath(join4(generatedDir, fileName), pageExports);
@@ -658,7 +683,9 @@ ${utilsExport}
     `
       export const sitemap = ${JSON.stringify(
       {
-        pages: siteData.pages.filter((page) => page.meta.excludePageFromSearch !== true).map((page) => ({
+        pages: siteData.pages.filter(
+          (page) => executeExpression(page.meta.excludePageFromSearch) !== true
+        ).map((page) => ({
           path: page.path,
           lastModified: siteData.build.updatedAt
         }))
@@ -841,7 +868,7 @@ import makeCLI from "yargs";
 // package.json
 var package_default = {
   name: "webstudio",
-  version: "0.128.0",
+  version: "0.130.0",
   description: "Webstudio CLI",
   author: "Webstudio <github@webstudio.is>",
   homepage: "https://webstudio.is",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.128.0",
+  "version": "0.130.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.128.0",
-    "@webstudio-is/react-sdk": "0.128.0",
-    "@webstudio-is/image": "0.128.0",
-    "@webstudio-is/sdk": "0.128.0",
-    "@webstudio-is/sdk-components-react": "0.128.0",
-    "@webstudio-is/sdk-components-react-radix": "0.128.0",
-    "@webstudio-is/sdk-components-react-remix": "0.128.0"
+    "@webstudio-is/react-sdk": "0.130.0",
+    "@webstudio-is/image": "0.130.0",
+    "@webstudio-is/http-client": "0.130.0",
+    "@webstudio-is/sdk": "0.130.0",
+    "@webstudio-is/sdk-components-react": "0.130.0",
+    "@webstudio-is/sdk-components-react-radix": "0.130.0",
+    "@webstudio-is/sdk-components-react-remix": "0.130.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.128.0",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/form-handlers": "0.130.0"
   },
   "scripts": {
     "typecheck": "tsc",

package/templates/{route-template.tsx → defaults/__templates__/route-template.tsx}

@@ -8,7 +8,7 @@ import {
   json,
 } from "@remix-run/server-runtime";
 import { useLoaderData } from "@remix-run/react";
-import type { Page as PageType, ProjectMeta } from "@webstudio-is/sdk";
+import type { ProjectMeta } from "@webstudio-is/sdk";
 import { ReactSdkContext } from "@webstudio-is/react-sdk";
 import { n8nHandler, getFormId } from "@webstudio-is/form-handlers";
 import {
@@ -21,19 +21,20 @@ import {
   Page,
   imageAssets,
   getRemixParams,
-} from "../__generated__/index";
-import { loadResources } from "../__generated__/index.server";
+  getPageMeta,
+} from "../../../__generated__/_index";
+import { loadResources } from "../../../__generated__/_index.server";
 import css from "../__generated__/index.css";
 import { assetBaseUrl, imageBaseUrl, imageLoader } from "~/constants.mjs";
 
 export type PageData = {
   project?: ProjectMeta;
-  page: PageType;
 };
 
 export const loader = async (arg: LoaderArgs) => {
   const params = getRemixParams(arg.params);
   const resources = await loadResources({ params });
+  const pageMeta = getPageMeta({ params, resources });
 
   const host =
     arg.request.headers.get("x-forwarded-host") ||
@@ -54,6 +55,7 @@ export const loader = async (arg: LoaderArgs) => {
       excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH,
       params,
       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
@@ -68,29 +70,32 @@ export const headers = () => {
 };
 
 export const meta: V2_ServerRuntimeMetaFunction<typeof loader> = ({ data }) => {
-  const { page, project } = pageData;
-
   const metas: ReturnType<V2_ServerRuntimeMetaFunction> = [];
+  if (data === undefined) {
+    return metas;
+  }
+  const { pageMeta } = data;
+  const { project } = pageData;
 
-  if (data?.url) {
+  if (data.url) {
     metas.push({
       property: "og:url",
       content: data.url,
     });
   }
 
-  if (page.title) {
-    metas.push({ title: page.title });
+  if (pageMeta.title) {
+    metas.push({ title: pageMeta.title });
 
     metas.push({
       property: "og:title",
-      content: page.title,
+      content: pageMeta.title,
     });
   }
 
   metas.push({ property: "og:type", content: "website" });
 
-  const origin = `https://${data?.host}`;
+  const origin = `https://${data.host}`;
 
   if (project?.siteName) {
     metas.push({
@@ -107,47 +112,47 @@ export const meta: V2_ServerRuntimeMetaFunction<typeof loader> = ({ data }) => {
     });
   }
 
-  if (page.meta.excludePageFromSearch || data?.excludeFromSearch) {
+  if (pageMeta.excludePageFromSearch || data.excludeFromSearch) {
     metas.push({
       name: "robots",
       content: "noindex, nofollow",
     });
   }
 
-  if (page.meta.description) {
+  if (pageMeta.description) {
     metas.push({
       name: "description",
-      content: page.meta.description,
+      content: pageMeta.description,
     });
     metas.push({
       property: "og:description",
-      content: page.meta.description,
+      content: pageMeta.description,
     });
   }
 
-  if (page.meta.socialImageAssetId) {
+  if (pageMeta.socialImageAssetId) {
     const imageAsset = imageAssets.find(
-      (asset) => asset.id === page.meta.socialImageAssetId
+      (asset) => asset.id === pageMeta.socialImageAssetId
     );
 
     if (imageAsset) {
       metas.push({
         property: "og:image",
-        content: `https://${data?.host}${imageLoader({
+        content: `https://${data.host}${imageLoader({
           src: imageAsset.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",
+      content: pageMeta.socialImageUrl,
+    });
   }
 
-  for (const customMeta of page.meta.custom ?? []) {
-    if (customMeta.property.trim().length === 0) {
-      continue;
-    }
-    metas.push(customMeta);
-  }
+  metas.push(...pageMeta.custom);
 
   return metas;
 };

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