@rxdrag/website-studio 0.0.3 → 0.0.5

package/dist/components/EditorScope/useAllMaterials.d.ts

@@ -0,0 +1 @@
+export declare function useAllMaterials(): import("@rxdrag/react-core-pro").IMaterial[];

package/dist/generator/classes/Coder.d.ts

@@ -8,6 +8,7 @@ export declare abstract class Coder {
     protected elements: INodeSchema<XData>[];
     protected imports: Record<string, string[]>;
     protected typeImports: Record<string, string[]>;
+    protected defaultImports: Record<string, string[]>;
     constructor(comsStore: TemplatesStore, elements: INodeSchema<XData>[]);
     getUsedMaterials(): IMaterial[];
     getMaterialsFromElements(elements: INodeSchema<XData>[], usedMaterials: IMaterial[]): void;
@@ -30,6 +31,7 @@ export declare abstract class Coder {
         [key: string]: INodeSchema | undefined;
     } | undefined, spaces?: number): string;
     addImport(componentName: string, packagePath: string): void;
+    addDefaultImport(componentName: string, packagePath: string): void;
     addTypeImport(componentName: string, packagePath: string): void;
     abstract getFileName(): string;
 }

package/dist/generator/classes/ComponentsStore.d.ts

@@ -3,9 +3,9 @@ import { ComponentCoder } from "./ComponentCoder";
 import { IMaterial } from "@rxdrag/react-core-pro";
 export declare class TemplatesStore {
     protected components: FrontComponent[];
-    maretials: Record<string, IMaterial | undefined> | undefined;
+    materials: IMaterial[];
     coders: ComponentCoder[];
-    constructor(components: FrontComponent[], maretials: Record<string, IMaterial | undefined> | undefined);
+    constructor(components: FrontComponent[], materials: IMaterial[]);
     getComponentCoders(): ComponentCoder[];
     getComponentCoder(name: string): ComponentCoder | undefined;
 }

package/dist/generator/classes/WebsiteGenerator.d.ts

@@ -4,8 +4,8 @@ import { IMaterial } from "@rxdrag/react-core-pro";
 import { StudioContextProps } from "../../components/StudioRoot";
 export declare class WebsiteGenerator {
     protected studioProps: StudioContextProps;
-    protected materials: Record<string, IMaterial | undefined> | undefined;
-    constructor(studioProps: StudioContextProps, materials: Record<string, IMaterial | undefined> | undefined);
+    protected materials: IMaterial[];
+    constructor(studioProps: StudioContextProps, materials: IMaterial[]);
     getComponents(): import("@rxdrag/rxcms-models").FrontComponent[];
     getPages(): Page[] | undefined;
     get404Page(): Page | undefined;

package/dist/generator/templates/vars.d.ts

@@ -9,6 +9,6 @@ export declare const APP_PPACKAGES = "#appPackages#";
 export declare const WEBSITE_ID = "#websiteId#";
 export declare const LOADER_FUNCTION = "#loader#";
 export declare const USE_LOADER_DATA = "#useLoaderData#";
-export declare const rxcmsModelsVersion = "0.3.35";
-export declare const entifyHooksVersion = "0.2.29";
-export declare const modelRemixLibVersion = "0.1.46";
+export declare const rxcmsModelsVersion = "0.3.36";
+export declare const entifyHooksVersion = "0.2.30";
+export declare const modelRemixLibVersion = "0.1.47";

package/dist/index.mjs

@@ -10,6 +10,8 @@ import React__default, { createContext, useContext, useMemo, memo, Fragment, use
 import { useFilterMeta, useDesignerEngine, ComponentDesignersRoot, useComponentDesigners, useNode, Designer, useDocument, useDocumentChangedState, useCurrentNode, useGetNode, useChangeNodeMeta, useNodeMeta, useUndo, useRedo, useLanguage, useSetters, useResourceNode, useActiveIdState, useActions, useCurrentTree, useSelectedNodeIds, ComponentTreeWidget, useSelect, DocumentRoot } from "@rxdrag/react-core-pro";
 import { RXID_ATTR_NAME, TOOLBAR_HEIGHT, CanvasScrollEvent, CanvasResizeEvent, numbToPx, getMaxZIndex, HistoryableActionType, MARGIN_DECORATOR_NAME, LINE_DECORTOR_NAME, LineDecorator, MarginDecorator, IFrameCanvasImpl, KeyboardDriver, DragDropDriver, DragOverDriver, MouseClickDriver, MouseMoveDriver, MouseOverOutDriver, CanvasResizeDriver, CanvasScrollDriver, MouseUpDriver, ContainerImpl } from "@rxdrag/core-pro";
 import { TextNodeName } from "@rxdrag/schema-pro";
+import { propSetters, Input, Textarea, ImageSelect, TargetSetter, DeviceBreakpoints, DeviceContext } from "@rxdrag/schema-setters";
+import { createSchema as createSchema$1, staticMaterials, attachmentNameResource, XAttachmentIconMaterial, attachmentLinkResource, websiteSettingsContactResource, websiteSettingsAvatarResource, websiteSettingsAddressResource, webisteSettingsEmailResource, webisteSettingsTelResource, webisteSettingsFaxResource, webisteSettingMobileResource, userNameResource, userAvatarResource, userPositionResource, userProfileResource, userEmailResource, userTelResource, userMobileResource, userLinkedInResource, userTwitterResource, userFacebookResource, userInstagramResource, userLinkResource, productCategoryNameResource, productCategoryMediaResource, productCategoryDescriptionResource, productCategoryCreatedAtResource, productCategoryUpdatedAtResource, productCategoryProductsResource, proudctCategoryLinkResource, postCategoryNameResource, postCategoryDescriptionResource, postCategoryCreatedAtResource, postCategoryUpdatedAtResource, postCategoryPostsResource, postCategoryLinkResource, productTitleResource, productShortTitleResource, productCoverResource, productMediasResource, productDescriptionResource, productFeaturesResource, productContentResource, productContent2Resource, productContent3Resource, productPublishedAtResource, productCreatedAtResource, productUpdatedAtResource, productAssociationCategoryResource, productAttachmentsResource, productRelatedResource, productLinkResource, postCoverResource, postAuthorResource, postTitleResource, postDescriptionResource, postContentResource, postPublishedAtResource, postCreatedAtResource, postUpdatedAtResource, postAssociationCategoryResource, postOutlineResource, postLinkResource, productResource, productListResource, postResource, postListResource, productCategoryResource, productCategoryListResource, postCategoryResource, postCategoryListResource, searchListResource, featuredProductsResource, latestPostsResource, XPaginationMaterial, XPaginationPrevButtonMaterial, XPaginationNextButtonMaterial, XPaginationPagesMaterial, XPaginationPageIndexMaterial, XPaginationTotalMaterial, pageTitleResource, XBreadcrumbsMaterial, xHeading1Resource, xHeading2Resource, xHeading3Resource, xHeading4Resource, XParagraphMaterial, XDateMaterial, ImgMaterial, XIconMaterial, XMenuMaterial, XModalMaterial, XModalCloseMaterial, RouteLinkMaterial, XSearchMaterial, XShareMaterial, XToTopMaterial, XAnimationNumberMaterial, XSectionMaterial, XBoxMaterial, xRowName, xColName, XPageOutletMaterial, XTabsMaterial, XTabsNavTitleMaterial, XTabPanelMaterial, XFormMaterial, XFormEmailMaterial, XFormNameMaterial, XFormCompanyMaterial, XFormTelMaterial, XFormMessageMaterial, XSubmitMaterial, AMaterial, creatHtmlMaterial } from "@rxdrag/website-materials";
 import { ThemeQueryOptions, ThemeFields, WebsiteFrameQueryOptions, WebsiteFrameFields, TemplateQueryOptions, TemplateFields, TemplateCategoryFields, PageQueryOptions, PageFields, PageAssciations, MediaQueryOptions, FrontComponentQueryOptions, FrontComponentFields, ComponentCategoryFields, MediaFields, WebsiteSettingsFields, ProductCategoryAssciations, ProductCategoryFields, ProductFields, PostFields, PostAssciations, UserFields, UserAssciations, ComponentType, FrontComponentEntityName, TemplateEntityName, mediaToInput, templateToInput, TemplateCategoryQueryOptions, frontComponentToInput, ComponentCategoryQueryOptions, ExtendFieldType, PageEntityName, PageType, pageToInput, ComponentCategoryEntityName, componentCategoryToInput, TemplateCategoryEntityName, templateCategoryToInput, MediaType, ProductAssciations, PostCategoryAssciations } from "@rxdrag/rxcms-models";
 import { GlobalLoading, EntityEditModal, EntitySelectField, EditingPopoverScope, useRemoveRow, useEditRow, EntityListScope, EntityRowScope, useListData, QueryListScope, useNewRow, useIsLoading, NewButton } from "@rxdrag/rxcms-models-ui";
 import { useOneTheme, useOneWebsiteFrame, useTemplateList, usePageList, useFrontComponentList, useUpsertOnePage, useUpsertOneWebsiteFrame, useUpsertOneTheme, useDeletePageById, useDeleteWebsiteFrameById } from "@rxdrag/rxcms-model-hooks";
@@ -21,9 +23,7 @@ import { isHTMLElement, makeRxId, isStr } from "@rxdrag/shared";
 import { faker } from "@faker-js/faker";
 import { XDataType, XDataScope, PRODUCT_COVER, PAGE_BREADCRUMBS, PAGE_TITLE, TriggerType } from "@rxdrag/website-components";
 import { merge, keys, uniqueId, isObject, isArray, isString, uniqBy } from "lodash-es";
-import { Input, Textarea, ImageSelect, TargetSetter, propSetters, DeviceBreakpoints, DeviceContext } from "@rxdrag/schema-setters";
 import { ColorPicker, StyledTooltip, Modal, ModalContent, ModalHeader, ModalBody, WarningIcon, ModalFooter, SettingsIcon, AddIcon, Drawer, ModalClose, PinIcon, CloseIcon, LeafNode, GroupNode, SearchIcon, TreeView, PredefinedColorPicker, FrameIcon, HomeIcon, RemoveIcon, MenuIcon } from "@rxdrag/rxcms-common";
-import { createSchema as createSchema$1, staticMaterials, attachmentNameResource, XAttachmentIconMaterial, attachmentLinkResource, websiteSettingsContactResource, websiteSettingsAvatarResource, websiteSettingsAddressResource, webisteSettingsEmailResource, webisteSettingsTelResource, webisteSettingsFaxResource, webisteSettingMobileResource, userNameResource, userAvatarResource, userPositionResource, userProfileResource, userEmailResource, userTelResource, userMobileResource, userLinkedInResource, userTwitterResource, userFacebookResource, userInstagramResource, userLinkResource, productCategoryNameResource, productCategoryMediaResource, productCategoryDescriptionResource, productCategoryCreatedAtResource, productCategoryUpdatedAtResource, productCategoryProductsResource, proudctCategoryLinkResource, postCategoryNameResource, postCategoryDescriptionResource, postCategoryCreatedAtResource, postCategoryUpdatedAtResource, postCategoryPostsResource, postCategoryLinkResource, productTitleResource, productShortTitleResource, productCoverResource, productMediasResource, productDescriptionResource, productFeaturesResource, productContentResource, productContent2Resource, productContent3Resource, productPublishedAtResource, productCreatedAtResource, productUpdatedAtResource, productAssociationCategoryResource, productAttachmentsResource, productRelatedResource, productLinkResource, postCoverResource, postAuthorResource, postTitleResource, postDescriptionResource, postContentResource, postPublishedAtResource, postCreatedAtResource, postUpdatedAtResource, postAssociationCategoryResource, postOutlineResource, postLinkResource, productResource, productListResource, postResource, postListResource, productCategoryResource, productCategoryListResource, postCategoryResource, postCategoryListResource, searchListResource, featuredProductsResource, latestPostsResource, XPaginationMaterial, XPaginationPrevButtonMaterial, XPaginationNextButtonMaterial, XPaginationPagesMaterial, XPaginationPageIndexMaterial, XPaginationTotalMaterial, pageTitleResource, XBreadcrumbsMaterial, xHeading1Resource, xHeading2Resource, xHeading3Resource, xHeading4Resource, XParagraphMaterial, XDateMaterial, ImgMaterial, XIconMaterial, XMenuMaterial, XModalMaterial, XModalCloseMaterial, RouteLinkMaterial, XSearchMaterial, XShareMaterial, XToTopMaterial, XAnimationNumberMaterial, XSectionMaterial, XBoxMaterial, xRowName, xColName, XPageOutletMaterial, XTabsMaterial, XTabsNavTitleMaterial, XTabPanelMaterial, XFormMaterial, XFormEmailMaterial, XFormNameMaterial, XFormCompanyMaterial, XFormTelMaterial, XFormMessageMaterial, XSubmitMaterial, AMaterial, creatHtmlMaterial } from "@rxdrag/website-materials";
 import { Icon } from "@iconify/react";
 import { useUpsertEntityWithIndicator, globalErrorState } from "@rxdrag/rxcms-entify-wrapper";
 import { InputField, Form, TextareaField } from "@rxdrag/fieldy-nextui";
@@ -1352,6 +1352,27 @@ class ContentEditorImpl {
 const ContentEditor = (engine) => {
   return new ContentEditorImpl(engine);
 };
+const studioSetters = {
+  ...propSetters,
+  Fragment: React__default.Fragment
+  // TabList,
+  // Tab,
+  // TabPanel,
+  // Stack,
+  // FormControl,
+  // FormLabel: FormLabel,
+  // Autocomplete: Autocomplete,
+  // Input: toControlled(Input, 'value', ''),
+  // Textarea: toControlled(Textarea, 'value', ''),
+  //Select,
+  //Option: Option,
+  //Switch: Switch,
+  //IconPicker,
+  //ToggleButtonGroup,
+  // Button,
+  // IconButton,
+  // SlotSwitch,
+};
 const StudioContext = createContext({});
 function useStudioContext() {
   return useContext(StudioContext);
@@ -3284,33 +3305,16 @@ function useCustomizedMaterials() {
   }, [components]);
   return materials;
 }
-const studioSetters = {
-  ...propSetters,
-  Fragment: React__default.Fragment
-  // TabList,
-  // Tab,
-  // TabPanel,
-  // Stack,
-  // FormControl,
-  // FormLabel: FormLabel,
-  // Autocomplete: Autocomplete,
-  // Input: toControlled(Input, 'value', ''),
-  // Textarea: toControlled(Textarea, 'value', ''),
-  //Select,
-  //Option: Option,
-  //Switch: Switch,
-  //IconPicker,
-  //ToggleButtonGroup,
-  // Button,
-  // IconButton,
-  // SlotSwitch,
-};
-function EditorScope(props) {
-  const { children, resources, ...rest } = props;
+function useAllMaterials() {
   const customMaterials = useCustomizedMaterials();
   const materials = useMemo(() => {
     return staticMaterials.concat(customMaterials || []);
   }, [customMaterials]);
+  return materials;
+}
+function EditorScope(props) {
+  const { children, resources, ...rest } = props;
+  const materials = useAllMaterials();
   const plugins = useMemo(() => {
     return [ContentEditor];
   }, []);
@@ -15417,9 +15421,9 @@ const APP_PPACKAGES = "#appPackages#";
 const WEBSITE_ID = "#websiteId#";
 const LOADER_FUNCTION = "#loader#";
 const USE_LOADER_DATA = "#useLoaderData#";
-const rxcmsModelsVersion = "0.3.35";
-const entifyHooksVersion = "0.2.29";
-const modelRemixLibVersion = "0.1.46";
+const rxcmsModelsVersion = "0.3.36";
+const entifyHooksVersion = "0.2.30";
+const modelRemixLibVersion = "0.1.47";
 const envTemplate = {
   name: ".env",
   content: `VITE_SERVER_URL = http://139.129.23.194:4000/graphql
@@ -15853,122 +15857,91 @@ const tailwindCssTemplate = {
 };
 const slugTemplate = {
   name: "$slug.tsx",
-  content: `import type { LoaderFunction, MetaFunction } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
-import { EntifyClient } from "@rxdrag/entify-hooks";
-import { MediaFields, Post, PostCategoryFields, PostFields, ProductCategoryFields, ProductFields, Slug, SlugBoolExp, SlugDistinctExp, SlugEntityName, SlugFields, SlugOrderBy, UserFields } from "@rxdrag/rxcms-models";
-import { Datas } from "@rxdrag/website-components";
-import { PostPage } from "~/components/PostPage";
-import { ProductPage } from "~/components/ProductPage";
-
-export const meta: MetaFunction = ({ data }) => {
-  const datas = data as Datas | undefined
-  const obj = datas?.post || datas?.product;
-  return [
-    { title: obj?.seoTitle || obj?.title },
-    {
-      name: "description",
-      content: obj?.seoDescription
-    },
-  ];
-};
+  content: `import { redirect, type LoaderFunction, type LoaderFunctionArgs } from "~/deploy/remix-run-node";
+import type { WebsiteSettings, WebsiteSettingsBoolExp, WebsiteSettingsOrderBy, WebsiteSettingsDistinctExp, Product, ProductBoolExp, ProductDistinctExp, ProductOrderBy, Post, PostBoolExp, PostDistinctExp, PostOrderBy } from "@rxdrag/rxcms-models";
+import { WebsiteSettingsQueryOptions, WebsiteSettingsFields, ProductFields, ProductQueryOptions, PostQueryOptions } from "@rxdrag/rxcms-models";
+import { queryOneEntity } from "@rxdrag/model-remix-lib";
+import { getEnvVariables } from "~/deploy/get-env";
 
 // 定义 loader 函数
-export const loader: LoaderFunction = async ({ params }) => {
+export const loader: LoaderFunction = async (args: LoaderFunctionArgs) => {
+  const { params } = args
   const { slug } = params;
-  if (!process.env.VITE_SERVER_URL) {
-    return { status: 404, error: new Error("VITE_SERVER_URL Not Set") };
-  }
-  const websiteId = process.env.VITE_WEBSITE_ID;
-  if (!process.env.VITE_WEBSITE_ID) {
-    return { status: 404, error: new Error("VITE_WEBSITE_ID Not Set") };
-  }
 
-  const entifyClient = new EntifyClient(process.env.VITE_SERVER_URL);
-  const slugObj = await entifyClient.oneEntity<Slug, SlugBoolExp, SlugOrderBy, SlugDistinctExp>(SlugEntityName, {
-    queryArgs: {
-      where: {
-        [SlugFields.websiteId]: {
-          "_eq": websiteId
-        },
+  if (!slug) {
+    throw new Response(null, { status: 404 });
+  }
+  const envVariables = getEnvVariables(args)
 
+  const webisteSettings = await queryOneEntity<WebsiteSettings, WebsiteSettingsBoolExp, WebsiteSettingsOrderBy, WebsiteSettingsDistinctExp>(
+    new WebsiteSettingsQueryOptions(
+      [
+        WebsiteSettingsFields.id,
+        WebsiteSettingsFields.map301,
+      ],
+    ),
+    envVariables
+  )
+  if (webisteSettings?.map301) {
+    for (const line of webisteSettings.map301?.split('
+')) {
+      const [from, to] = line.split(',');
+      if (slug === from) {
+        return redirect(to, 301);
       }
-    },
-    fields: [
+    }
+  }
+
+  const product = await queryOneEntity<Product, ProductBoolExp, ProductOrderBy, ProductDistinctExp>(
+    new ProductQueryOptions(
+      [
+        ProductFields.id,
+        ProductFields.slug,
+      ],
       {
-        [SlugFields.post]: [
-          PostFields.id,
-          PostFields.title,
-          PostFields.seoTitle,
-          PostFields.seoKeywords,
-          PostFields.seoDescription,
-          PostFields.content,
-          {
-            [PostFields.author]: [
-              UserFields.id,
-              UserFields.name,
-              {
-                [UserFields.avatar]: [
-                  MediaFields.id,
-                  {
-                    [MediaFields.file]: [
-                      'thumbnail',
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            [PostFields.category]: [
-              PostCategoryFields.id,
-              PostCategoryFields.name,
-              PostCategoryFields.description
-            ]
-          }
-        ],
-        [SlugFields.product]: [
-          ProductFields.id,
-          ProductFields.title,
-          ProductFields.seoTitle,
-          ProductFields.seoKeywords,
-          ProductFields.seoDescription,
-          ProductFields.content,
-          {
-            [ProductFields.category]: [
-              ProductCategoryFields.id,
-              ProductCategoryFields.name,
-              ProductCategoryFields.description
-            ]
+        where: {
+          slug: {
+            _eq: slug
           }
-        ]
+        }
       }
-    ],
-  });
-  return {
-    datas: {
-      post: slugObj?.post,
-      product: slugObj?.product
-    }
-  };
-};
+    ),
+    envVariables
+  )
+  if (product) {
+    return redirect(\`/product/\${product.slug}\`, 301);
+  }
 
+  const post = await queryOneEntity<Post, PostBoolExp, PostOrderBy, PostDistinctExp>(
+    new PostQueryOptions(
+      [
+        ProductFields.id,
+        ProductFields.slug,
+      ],
+      {
+        where: {
+          slug: {
+            _eq: slug
+          }
+        }
+      }
+    ),
+    envVariables
+  )
 
-export default function SlugPage() {
-  const { datas } = useLoaderData<{ datas: Datas | undefined }>();
-  if (datas?.post) {
-    return <PostPage datas={datas as Datas} />
-  } else if (datas?.product) {
-    return <ProductPage datas={datas as Datas} />
+  if (post) {
+    return redirect(\`/post/\${post.slug}\`, 301);
   }
-  return <>404 can find slug</>
-}
+
+  return redirect("/404", 404);
+};
 `
 };
 class Coder {
   constructor(comsStore, elements) {
     __publicField(this, "imports", {});
     __publicField(this, "typeImports", {});
+    __publicField(this, "defaultImports", {});
     this.comsStore = comsStore;
     this.elements = elements;
     const customizedComponents = this.getCustomizedComponents();
@@ -15990,13 +15963,16 @@ class Coder {
   getMaterialsFromElements(elements, usedMaterials) {
     var _a2;
     for (const element of elements) {
-      const maretial = (_a2 = this.comsStore.maretials) == null ? void 0 : _a2[element.componentName];
-      if (maretial) {
+      const maretial = (_a2 = this.comsStore.materials) == null ? void 0 : _a2.find((material) => material.componentName === element.componentName);
+      if (maretial && !usedMaterials.find((material) => material.componentName === maretial.componentName)) {
         usedMaterials.push(maretial);
       }
       if (element.children) {
         this.getMaterialsFromElements(element.children, usedMaterials);
       }
+      if (element.slots) {
+        this.getMaterialsFromElements(Object.values(element.slots).filter(Boolean), usedMaterials);
+      }
     }
   }
   getXDataSchemas() {
@@ -16015,6 +15991,9 @@ class Coder {
         if (element.children) {
           this.getXSchemas(element.children, xSchemas);
         }
+        if (element.slots) {
+          this.getXSchemas(Object.values(element.slots).filter(Boolean), xSchemas);
+        }
       }
       if (element.componentName.startsWith(CUSTOMIZED_COMPONENT_NAME_PREFIX)) {
         const componentCoder = this.comsStore.getComponentCoder((_a2 = element.props) == null ? void 0 : _a2.name);
@@ -16035,12 +16014,16 @@ class Coder {
         components.push((_a2 = element.props) == null ? void 0 : _a2.name);
       }
       this.getCustomzedComponentsFromElements(element.children, components);
+      if (element.slots) {
+        this.getCustomzedComponentsFromElements(Object.values(element.slots).filter(Boolean), components);
+      }
     }
   }
   getImportsCode() {
+    const defaultImportsCode = Object.keys(this.defaultImports).map((key) => `import ${this.defaultImports[key].join(", ")} from "${key}"`).join("\n");
     const importsCode = Object.keys(this.imports).map((key) => `import { ${this.imports[key].join(", ")} } from "${key}"`).join("\n");
     const typeImportsCode = Object.keys(this.typeImports).map((key) => `import type { ${this.typeImports[key].join(", ")} } from "${key}"`).join("\n");
-    const codes = [importsCode, typeImportsCode].filter((code) => code);
+    const codes = [defaultImportsCode, importsCode, typeImportsCode].filter((code) => code);
     return codes.join("\n") + "\n";
   }
   getUseLoaderDataCode(spaces = 2) {
@@ -16236,6 +16219,14 @@ ${spacesStr}}`).join("\n" + spacesStr);
       this.imports[packagePath].push(componentName);
     }
   }
+  addDefaultImport(componentName, packagePath) {
+    if (!this.defaultImports[packagePath]) {
+      this.defaultImports[packagePath] = [];
+    }
+    if (!this.defaultImports[packagePath].find((name) => name === componentName)) {
+      this.defaultImports[packagePath].push(componentName);
+    }
+  }
   addTypeImport(componentName, packagePath) {
     if (!this.typeImports[packagePath]) {
       this.typeImports[packagePath] = [];
@@ -16249,9 +16240,7 @@ const rootTemplate = {
   name: "root.tsx",
   content: `import type { LoaderFunctionArgs } from "~/deploy/remix-run-node";
 import { entify } from "@rxdrag/model-remix-lib";
-import type { TDatas } from "@rxdrag/website-components";
-import { useAppInit, toViewModel, XDataScope, HtmlDocument } from "@rxdrag/website-components";
-import { Page404 } from "./components/Page404";
+import { useAppInit, XDataScope, HtmlDocument } from "@rxdrag/website-components";
 import "./tailwind.css";
 import './frontend.css'
 ${FRAME_IMPORTS}
@@ -16324,7 +16313,7 @@ class FrameCoder extends Coder {
     return `export const loader = async (args: LoaderFunctionArgs) => {
   //为了兼容cloudflare，把环境变量抽离到一个函数
   const envVariables = getEnvVariables(args)
-  const productCategories = await entify.queryProductCategories(undefined, envVariables);
+  const productCategories = await entify.queryProductCategories(envVariables);
   const webSiteSettings = await entify.queryWebSiteSettings(envVariables);
   const datas: TDatas = {
     [XDataScope.WebsiteSettings]: webSiteSettings,
@@ -16357,7 +16346,7 @@ class ComponentCoder extends Coder {
     this.comsStore = comsStore;
     this.component = component;
     if (this.component.droppable) {
-      this.addImport("React", "react");
+      this.addDefaultImport("React", "react");
     }
     if (this.getXDataSchemas().length) {
       this.addTypeImport("TDatas", "@rxdrag/website-components");
@@ -16426,10 +16415,10 @@ class ComponentCoder extends Coder {
   }
 }
 class TemplatesStore {
-  constructor(components, maretials) {
+  constructor(components, materials) {
     __publicField(this, "coders", []);
     this.components = components;
-    this.maretials = maretials;
+    this.materials = materials;
     this.coders = this.components.map((component) => new ComponentCoder(this, component));
   }
   getComponentCoders() {
@@ -16844,14 +16833,14 @@ function useExportWebsite() {
   const website = useWebsite();
   const save = useSave();
   const contextValue = useStudioContext();
-  const engine = useDesignerEngine();
+  const materials = useAllMaterials();
   const exportWebsite = useCallback(async () => {
     try {
       if (nopClient && website) {
         setExporting(true);
         const generator = new WebsiteGenerator(
           contextValue,
-          engine == null ? void 0 : engine.getComponentManager().getAllComponentConfigs()
+          materials
         );
         const zip = await generator.generate();
         const content = await zip.generateAsync({ type: "blob" });
@@ -16863,7 +16852,7 @@ function useExportWebsite() {
     } finally {
       setExporting(false);
     }
-  }, [contextValue, engine, nopClient, save, setError, website]);
+  }, [contextValue, materials, nopClient, save, setError, website]);
   return { exportWebsite, exporting };
 }
 const Toolbar = memo(() => {