webstudio 0.123.0 → 0.124.0

package/README.md

@@ -108,7 +108,7 @@ If you want to build a production version of the app, you can run `npm run build
 
 ### Vercel
 
-Once you've built the project locally, you can use the [Vercel CLI](https://vercel.com/docs/cli) to deploy your site directly to [Vercel](https://vercel.com):
+Once you've built the project locally, you can use the [Vercel CLI](https://vercel.com/docs/cli) to deploy your project directly to [Vercel](https://vercel.com):
 
 ```bash
 vercel deploy
@@ -118,7 +118,7 @@ Follow the instructions [here](https://vercel.com/docs/cli) to install the `verc
 
 ### Netlify
 
-If you want to deploy to netlify, you can use [Netlify CLI](https://docs.netlify.com/cli/get-started/) to deploy your site directly to [Netlify](https://netlify.com/):
+If you want to deploy to netlify, you can use [Netlify CLI](https://docs.netlify.com/cli/get-started/) to deploy your project directly to [Netlify](https://netlify.com/):
 
 ```bash
 netlify deploy

package/lib/cli.js

@@ -258,12 +258,16 @@ import pLimit from "p-limit";
 import ora2 from "ora";
 import merge from "deepmerge";
 import {
-  generateCssText,
+  generateCss,
   generateUtilsExport,
   generatePageComponent,
   getIndexesWithinAncestors,
   namespaceMeta,
-  normalizeProps
+  normalizeProps,
+  generateRemixRoute,
+  generateRemixParams,
+  generateResourcesLoader,
+  collectionComponent
 } from "@webstudio-is/react-sdk";
 import {
   createScope,
@@ -382,11 +386,8 @@ var prebuild = async (options) => {
   }
   const domain = siteData.build.deployment?.projectDomain;
   if (domain === void 0) {
-    throw new Error(`Project domain is missing from the site data`);
+    throw new Error(`Project domain is missing from the project data`);
   }
-  const remixRoutes = {
-    routes: []
-  };
   const radixComponentNamespacedMetas = Object.entries(
     radixComponentMetas
   ).reduce(
@@ -412,14 +413,6 @@ var prebuild = async (options) => {
   const componentsByPage = {};
   const siteDataByPage = {};
   for (const page of Object.values(siteData.pages)) {
-    const originPath = page.path;
-    const path = originPath === "" ? "index" : originPath.replace("/", "");
-    if (path !== "index") {
-      remixRoutes.routes.push({
-        path: originPath === "" ? "/" : originPath,
-        file: `routes/${path}.tsx`
-      });
-    }
     const instanceMap = new Map(siteData.build.instances);
     const pageInstanceSet = findTreeInstanceIds(
       instanceMap,
@@ -439,29 +432,41 @@ var prebuild = async (options) => {
         props.push([prop.id, prop]);
       }
     }
+    const resourceIds = /* @__PURE__ */ new Set();
     for (const [dataSourceId, dataSource] of siteData.build.dataSources) {
       if (dataSource.scopeInstanceId === void 0 || pageInstanceSet.has(dataSource.scopeInstanceId)) {
         dataSources.push([dataSourceId, dataSource]);
+        if (dataSource.type === "resource") {
+          resourceIds.add(dataSource.resourceId);
+        }
       }
     }
-    siteDataByPage[path] = {
+    const resources = [];
+    for (const [resourceId, resource] of siteData.build.resources ?? []) {
+      if (resourceIds.has(resourceId)) {
+        resources.push([resourceId, resource]);
+      }
+    }
+    siteDataByPage[page.path] = {
       build: {
         props,
         instances,
-        dataSources
+        dataSources,
+        resources
       },
       pages: siteData.pages,
       page,
       assets: siteData.assets
     };
-    componentsByPage[path] = /* @__PURE__ */ new Set();
+    componentsByPage[page.path] = /* @__PURE__ */ new Set();
     for (const [_instanceId, instance] of instances) {
-      if (instance.component) {
-        componentsByPage[path].add(instance.component);
-        const meta = metas.get(instance.component);
-        if (meta) {
-          projectMetas.set(instance.component, meta);
-        }
+      if (instance.component === collectionComponent) {
+        continue;
+      }
+      componentsByPage[page.path].add(instance.component);
+      const meta = metas.get(instance.component);
+      if (meta) {
+        projectMetas.set(instance.component, meta);
       }
     }
   }
@@ -503,6 +508,22 @@ var prebuild = async (options) => {
       }
     }
   }
+  spinner.text = "Generating css file";
+  const { cssText, classesMap } = generateCss(
+    {
+      assets: siteData.assets,
+      breakpoints: siteData.build?.breakpoints,
+      styles: siteData.build?.styles,
+      styleSourceSelections: siteData.build?.styleSourceSelections,
+      // pass only used metas to not generate unused preset styles
+      componentMetas: projectMetas
+    },
+    {
+      assetBaseUrl,
+      atomic: siteData.build.pages.settings?.atomicStyles ?? true
+    }
+  );
+  await ensureFileInPath(join4(generatedDir, "index.css"), cssText);
   spinner.text = "Generating routes and pages";
   const routeFileTemplate = await readFile4(
     normalize(
@@ -515,11 +536,11 @@ var prebuild = async (options) => {
     ),
     "utf8"
   );
-  for (const [pathName, pageComponents] of Object.entries(componentsByPage)) {
+  for (const [pathname, pageComponents] of Object.entries(componentsByPage)) {
     const scope = createScope([
       // manually maintained list of occupied identifiers
       "useState",
-      "ReactNode",
+      "Fragment",
       "PageData",
       "Asset",
       "fontAssets",
@@ -528,7 +549,7 @@ var prebuild = async (options) => {
       "projectId",
       "formsProperties",
       "Page",
-      "props"
+      "_props"
     ]);
     const namespaces = /* @__PURE__ */ new Map();
     const BASE_NAMESPACE = "@webstudio-is/sdk-components-react";
@@ -560,25 +581,27 @@ var prebuild = async (options) => {
       componentImports += `import { ${specifiers} } from "${namespace}";
 `;
     }
-    const pageData = siteDataByPage[pathName];
+    const pageData = siteDataByPage[pathname];
     const renderedPageData = {
-      site: siteData.build.pages.meta,
+      project: siteData.build.pages.meta,
       page: pageData.page
     };
     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({
       pages: siteData.build.pages,
       props
     });
     const pageComponent = generatePageComponent({
       scope,
-      rootInstanceId,
+      page: pageData.page,
       instances,
       props,
       dataSources,
+      classesMap,
       indexesWithinAncestors: getIndexesWithinAncestors(
         projectMetas,
         instances,
@@ -588,9 +611,9 @@ var prebuild = async (options) => {
     const pageExports = `/* eslint-disable */
 /* This is a auto generated file for building the project */ 
 
-import { type ReactNode, useState } from "react";
+import { Fragment, useState } from "react";
 import type { PageData } from "~/routes/_index";
-import type { Asset, ImageAsset, SiteMeta } from "@webstudio-is/sdk";
+import type { Asset, ImageAsset, ProjectMeta } from "@webstudio-is/sdk";
 ${componentImports}
 export const fontAssets: Asset[] = ${JSON.stringify(fontAssets)}
 export const imageAssets: ImageAsset[] = ${JSON.stringify(imageAssets)}
@@ -604,31 +627,28 @@ ${pageComponent}
 
 export { Page }
 
+${generateRemixParams(pathname)}
+
 ${utilsExport}
 `;
-    const fileName = pathName === "main" || pathName === "index" ? "_index.tsx" : `${pathName.split("/").map((route) => `[${route}]`).join(".")}._index.tsx`;
-    const routeFileContent = routeFileTemplate.replace(
-      "../__generated__/index",
-      `../__generated__/${fileName}`
+    const remixRoute = generateRemixRoute(pathname);
+    const fileName = `${remixRoute}.tsx`;
+    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);
+    await ensureFileInPath(
+      join4(generatedDir, `${remixRoute}.server.tsx`),
+      generateResourcesLoader({
+        scope,
+        page: pageData.page,
+        dataSources,
+        resources
+      })
+    );
   }
-  spinner.text = "Generating css file";
-  const cssText = generateCssText(
-    {
-      assets: siteData.assets,
-      breakpoints: siteData.build?.breakpoints,
-      styles: siteData.build?.styles,
-      styleSourceSelections: siteData.build?.styleSourceSelections,
-      // pass only used metas to not generate unused preset styles
-      componentMetas: projectMetas
-    },
-    {
-      assetBaseUrl
-    }
-  );
-  await ensureFileInPath(join4(generatedDir, "index.css"), cssText);
   await writeFile4(
     join4(generatedDir, "[sitemap.xml].ts"),
     `
@@ -788,7 +808,7 @@ Your project was successfully synced \u{1F389}`)));
     [
       "Now you can:",
       folderName && `Go to your project: ${pc2.dim(`cd ${folderName}`)}`,
-      `Run ${pc2.dim("npm run dev")} to preview your site on a local server.`,
+      `Run ${pc2.dim("npm run dev")} to preview your project on a local server.`,
       projectTemplate && getDeploymentInstructions(projectTemplate)
     ].filter(Boolean).join("\n")
   );
@@ -802,8 +822,10 @@ var getDeploymentInstructions = (deployTarget) => {
       return [
         `To deploy to Netlify, run the following commands: `,
         `Run ${pc2.dim("npx netlify-cli login")} to login to Netlify.`,
-        `Run ${pc2.dim("npx netlify-cli sites:create")} to create a new site.`,
-        `Run ${pc2.dim("npx netlify-cli build")} to build the site`,
+        `Run ${pc2.dim(
+          "npx netlify-cli sites:create"
+        )} to create a new project.`,
+        `Run ${pc2.dim("npx netlify-cli build")} to build the project`,
         `Run ${pc2.dim("npx netlify-cli deploy")} to deploy on Netlify.`
       ].join("\n");
   }
@@ -815,7 +837,7 @@ import makeCLI from "yargs";
 // package.json
 var package_default = {
   name: "webstudio",
-  version: "0.123.0",
+  version: "0.124.0",
   description: "Webstudio CLI",
   author: "Webstudio <github@webstudio.is>",
   homepage: "https://webstudio.is",

package/package.json

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

package/templates/netlify-functions/_app_redirects

@@ -1,7 +1,9 @@
-# This template uses this file instead of the typicial Netlify _redirects file.
+# This template uses this file instead of the typicial Netlify \_redirects file.
+
 # For more information about redirects and rewrites, see https://docs.netlify.com/routing/redirects/.
 
-# Do not remove the line below. This is required to serve the site when deployed.
-/* /.netlify/functions/server 200
+# Do not remove the line below. This is required to serve the project when deployed.
+
+/\* /.netlify/functions/server 200
 
 # Add other redirects and rewrites here and/or in your netlify.toml

package/templates/route-template.tsx

@@ -7,7 +7,8 @@ import {
   type LoaderArgs,
   json,
 } from "@remix-run/server-runtime";
-import type { Page as PageType, SiteMeta } from "@webstudio-is/sdk";
+import { useLoaderData } from "@remix-run/react";
+import type { Page as PageType, ProjectMeta } from "@webstudio-is/sdk";
 import { ReactSdkContext } from "@webstudio-is/react-sdk";
 import { n8nHandler, getFormId } from "@webstudio-is/form-handlers";
 import {
@@ -19,16 +20,21 @@ import {
   formsProperties,
   Page,
   imageAssets,
+  getRemixParams,
 } 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 = {
-  site?: SiteMeta;
+  project?: ProjectMeta;
   page: PageType;
 };
 
 export const loader = async (arg: LoaderArgs) => {
+  const params = getRemixParams(arg.params);
+  const resources = await loadResources({ params });
+
   const host =
     arg.request.headers.get("x-forwarded-host") ||
     arg.request.headers.get("host") ||
@@ -46,6 +52,8 @@ export const loader = async (arg: LoaderArgs) => {
       host,
       url: url.href,
       excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH,
+      params,
+      resources,
     },
     // No way for current information to change, so add cache for 10 minutes
     // In case of CRM Data, this should be set to 0
@@ -60,7 +68,7 @@ export const headers = () => {
 };
 
 export const meta: V2_ServerRuntimeMetaFunction<typeof loader> = ({ data }) => {
-  const { page, site } = pageData;
+  const { page, project } = pageData;
 
   const metas: ReturnType<V2_ServerRuntimeMetaFunction> = [];
 
@@ -84,16 +92,16 @@ export const meta: V2_ServerRuntimeMetaFunction<typeof loader> = ({ data }) => {
 
   const origin = `https://${data?.host}`;
 
-  if (site?.siteName) {
+  if (project?.siteName) {
     metas.push({
       property: "og:site_name",
-      content: site.siteName,
+      content: project.siteName,
     });
     metas.push({
       "script:ld+json": {
         "@context": "https://schema.org",
         "@type": "WebSite",
-        name: site.siteName,
+        name: project.siteName,
         url: origin,
       },
     });
@@ -152,11 +160,11 @@ export const links: LinksFunction = () => {
     href: css,
   });
 
-  const { site } = pageData;
+  const { project } = pageData;
 
-  if (site?.faviconAssetId) {
+  if (project?.faviconAssetId) {
     const imageAsset = imageAssets.find(
-      (asset) => asset.id === site.faviconAssetId
+      (asset) => asset.id === project.faviconAssetId
     );
 
     if (imageAsset) {
@@ -282,6 +290,7 @@ export const action = async ({ request, context }: ActionArgs) => {
 };
 
 const Outlet = () => {
+  const { params, resources } = useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -291,7 +300,7 @@ const Outlet = () => {
         pagesPaths,
       }}
     >
-      <Page />
+      <Page params={params} resources={resources} />
     </ReactSdkContext.Provider>
   );
 };