@rxdrag/website-studio 0.0.4 → 0.0.6

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/templates/vars.d.ts

@@ -1,6 +1,7 @@
 export declare const FRAME_CONTENT = "#frameContent#";
 export declare const FRAME_IMPORTS = "#frameImports#";
 export declare const FRAME_404 = "#frame404#";
+export declare const CSS_CONTENT = "#cssContent#";
 export declare const PAGE_CONTENT = "#content#";
 export declare const PAGE_IMPORTS = "#imports#";
 export declare const APP_NAME = "#appName#";

package/dist/index.mjs

@@ -15415,6 +15415,7 @@ const MenuContent = memo((props) => {
 const FRAME_CONTENT = "#frameContent#";
 const FRAME_IMPORTS = "#frameImports#";
 const FRAME_404 = "#frame404#";
+const CSS_CONTENT = "#cssContent#";
 const APP_NAME = "#appName#";
 const APP_VERSION = "#appVersion#";
 const APP_PPACKAGES = "#appPackages#";
@@ -15853,126 +15854,95 @@ const tailwindCssTemplate = {
 @tailwind components;
 @tailwind utilities;
 
+${CSS_CONTENT}
 `
 };
 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('\\n')) {
+      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();
@@ -16051,9 +16021,10 @@ class Coder {
     }
   }
   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) {
@@ -16073,7 +16044,7 @@ class Coder {
     }
   }
   jsonToTsx(node, spaces = 0, hasRootClassName) {
-    var _a2, _b2;
+    var _a2, _b2, _c2, _d2, _e2, _f2;
     const spacesStr = " ".repeat(spaces);
     if (node.componentName === TextNodeName) {
       return spacesStr + (node.text || "");
@@ -16120,9 +16091,18 @@ class Coder {
       spaceAddon = 2;
       str += `  ${spacesStr}{(datas) => (
 `;
+      if (((_b2 = node.children) == null ? void 0 : _b2.length) && ((_c2 = node.children) == null ? void 0 : _c2.length) > 1) {
+        str += `    ${spacesStr}<>
+`;
+        spaceAddon = 4;
+      }
     }
-    str += ((_b2 = node.children) == null ? void 0 : _b2.map((child) => this.jsonToTsx(child, spaces + 2 + spaceAddon)).join("\n")) + "\n";
+    str += ((_d2 = node.children) == null ? void 0 : _d2.map((child) => this.jsonToTsx(child, spaces + 2 + spaceAddon)).join("\n")) + "\n";
     if (this.needAddDatas(xdata)) {
+      if (((_e2 = node.children) == null ? void 0 : _e2.length) && ((_f2 = node.children) == null ? void 0 : _f2.length) > 1) {
+        str += `    ${spacesStr}</>
+`;
+      }
       str += `  ${spacesStr})}`;
     }
     str += `
@@ -16249,6 +16229,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] = [];
@@ -16264,7 +16252,6 @@ const rootTemplate = {
 import { entify } from "@rxdrag/model-remix-lib";
 import { useAppInit, XDataScope, HtmlDocument } from "@rxdrag/website-components";
 import "./tailwind.css";
-import './frontend.css'
 ${FRAME_IMPORTS}
 
 ${LOADER_FUNCTION}
@@ -16368,7 +16355,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");
@@ -16382,7 +16369,7 @@ class ComponentCoder extends Coder {
     let code = "\n";
     code += this.getPropsTypeCode();
     const xdatas = this.getXDataSchemas();
-    code += `export default function ${this.component.name}(props: ${this.component.name}Props) {
+    code += `export function ${this.component.name}(props: ${this.component.name}Props) {
 `;
     const childrenCode = this.component.droppable ? `, children` : "";
     const propsStr = (_b2 = (_a2 = this.component.props) == null ? void 0 : _a2.items) == null ? void 0 : _b2.map((field) => field.name).join(", ");
@@ -16412,18 +16399,23 @@ class ComponentCoder extends Coder {
     return code;
   }
   getPropsTypeCode() {
-    var _a2;
+    var _a2, _b2;
     let code = `export type ${this.component.name}Props = {
 `;
     code += `  className?: string
 `;
     if (this.getXDataSchemas().length) {
-      code += `  datas: TDatas
+      code += `  datas?: TDatas
 `;
     }
     for (const field of ((_a2 = this.component.props) == null ? void 0 : _a2.items) || []) {
-      code += `  ${field.name}: ${field.type}
+      if (field.type === ExtendFieldType.Json) {
+        code += `  ${field.name}?: any
 `;
+      } else {
+        code += `  ${field.name}: ${(_b2 = field.type) == null ? void 0 : _b2.toLowerCase()}
+`;
+      }
     }
     if (this.component.droppable) {
       code += `  children: React.ReactNode
@@ -16738,6 +16730,7 @@ class WebsiteGenerator {
     return this.studioProps.frame;
   }
   async generate() {
+    var _a2, _b2, _c2;
     const zip = new JSZip();
     const pages = this.getPages();
     const frame = this.getFrame();
@@ -16764,7 +16757,7 @@ class WebsiteGenerator {
       );
       usedMaterials.push(...frameCoder.getUsedMaterials());
       appFolder.file(frameCoder.getFileName(), frameCoder.getFileCode());
-      appFolder.file(tailwindCssTemplate.name, tailwindCssTemplate.content);
+      appFolder.file(tailwindCssTemplate.name, tailwindCssTemplate.content.replace(CSS_CONTENT, ((_a2 = this.studioProps.theme) == null ? void 0 : _a2.css) || ""));
       const deplyFolder = appFolder.folder("deploy");
       if (deplyFolder) {
         deplyFolder.file(deployEnvTemplate.name, deployEnvTemplate.content);
@@ -16775,9 +16768,11 @@ class WebsiteGenerator {
       if (routesFolder) {
         routesFolder.file(slugTemplate.name, slugTemplate.content);
         for (const page of pages || []) {
-          const pageCoder = new PageCoder(comsStore, page);
-          routesFolder.file(pageCoder.getFileName(), pageCoder.getFileCode());
-          usedMaterials.push(...pageCoder.getUsedMaterials());
+          if ((_c2 = (_b2 = page.content) == null ? void 0 : _b2.elements) == null ? void 0 : _c2.length) {
+            const pageCoder = new PageCoder(comsStore, page);
+            routesFolder.file(pageCoder.getFileName(), pageCoder.getFileCode());
+            usedMaterials.push(...pageCoder.getUsedMaterials());
+          }
         }
       }
       const componentsFolder = appFolder == null ? void 0 : appFolder.folder("components");
@@ -16787,7 +16782,7 @@ class WebsiteGenerator {
           componentsFolder.file(comCoder.getFileName(), comCoder.getFileCode());
           usedMaterials.push(...comCoder.getUsedMaterials());
         }
-        componentsFolder.file("index.ts", coders.map((coder) => `export { ${coder.getComponent().name} } from "./components/${coder.getComponent().name}"`).join("\n"));
+        componentsFolder.file("index.ts", coders.map((coder) => `export { ${coder.getComponent().name} } from "./${coder.getComponent().name}"`).join("\n"));
       }
     }
     const packages = {};