gomtm 0.0.384 → 0.0.386

package/dist/esm/block/ChildrenDebug.d.ts

@@ -1,11 +1,15 @@
 import { PropsWithChildren } from "react";
 export interface DemoChildrenProps {
-    debugData?: any;
+    originPropsList?: any;
+    designMode?: boolean;
+    overrideData?: any;
 }
 export interface DemoChildrenState extends DemoChildrenProps {
-    setDebugData: (debugData: any) => void;
+    setOriginPropsList: (debugData: any) => void;
+    setDesignMode: (designMode: boolean) => void;
+    setOverrideData: (overrideData: any) => void;
 }
 export declare const blockContext: import("react").Context<import("zustand").StoreApi<DemoChildrenState> | null>;
 export declare const DemoChildrenProvider: (props: PropsWithChildren<DemoChildrenProps>) => import("react").JSX.Element;
 export declare function useDemoChildrenBlock<T>(selector: (state: DemoChildrenState) => T): T;
-export declare const ChildrenDebug: (props: any) => import("react").JSX.Element;
+export declare const BlockCanva: (props: any) => import("react").JSX.Element;

package/dist/esm/block/ChildrenDebug.js

@@ -31,11 +31,17 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Children, createContext, createElement, useContext, useMemo, useRef } from "react";
+import { cn } from "mtxuilib/lib/utils";
+import { Dialog, DialogContent, DialogTrigger } from "mtxuilib/ui/dialog";
+import { MtButton } from "mtxuilib/ui/ui-mt/Button";
+import { Children, createContext, createElement, useContext, useMemo, useRef, useState } from "react";
 import { createStore, useStore } from "zustand";
+import { MtBlockRender, getComponentName } from "./blockRegister";
 const createDemoChildrenStore = (initProps) => {
   return createStore()((set, get) => __spreadProps(__spreadValues({}, initProps), {
-    setDebugData: (debugData) => set({ debugData })
+    setOriginPropsList: (debugData) => set({ originPropsList: debugData }),
+    setDesignMode: (designMode) => set({ designMode }),
+    setOverrideData: (overrideData) => set({ overrideData })
   }));
 };
 const blockContext = createContext(null);
@@ -46,8 +52,8 @@ const DemoChildrenProvider = (props) => {
     storeRef.current = createDemoChildrenStore(props);
   }
   return /* @__PURE__ */ jsxs(blockContext.Provider, { value: storeRef.current, children: [
-    children,
-    /* @__PURE__ */ jsx(ChildrenDebugInnerInfo, {})
+    /* @__PURE__ */ jsx(BlockDesignToolbar, {}),
+    children
   ] });
 };
 function useDemoChildrenBlock(selector) {
@@ -56,7 +62,7 @@ function useDemoChildrenBlock(selector) {
     throw new Error("useDemoChildrenBlock Missing DemoChildrenProvider in the tree");
   return useStore(store, selector);
 }
-const ChildrenDebug = (props) => {
+const BlockCanva = (props) => {
   const { children } = props;
   if (!children) {
     return /* @__PURE__ */ jsx("div", { children: "no children" });
@@ -65,46 +71,106 @@ const ChildrenDebug = (props) => {
 };
 const ChildrenDebugInner = (props) => {
   const { children } = props;
-  const setDebugData = useDemoChildrenBlock((x) => x.setDebugData);
+  const originPropsList = useDemoChildrenBlock((x) => x.originPropsList);
+  const setDebugData = useDemoChildrenBlock((x) => x.setOriginPropsList);
+  const designMode = useDemoChildrenBlock((x) => x.designMode);
   useMemo(() => {
+    let data2 = [];
     {
       Children.map(children, (child) => {
-        var _a;
+        const compName = getComponentName(child.type);
         const debugData = {
-          "\u7EC4\u4EF6\u540D\u79F0": (_a = child.type) == null ? void 0 : _a.name,
-          // "children.type": child.type,
-          "\u5176\u4ED6\u5C5E\u6027": child.props
+          "blockType": compName,
+          "props": child.props
         };
-        setDebugData(debugData);
+        data2 = [...data2, debugData];
       });
     }
+    setDebugData(data2);
   }, [children, setDebugData]);
   if (!children) {
     return /* @__PURE__ */ jsx("div", { children: "no children" });
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: Children.map(children, (child) => {
-    var _a;
-    const debugData = {
-      "\u7EC4\u4EF6\u540D\u79F0": (_a = children.type) == null ? void 0 : _a.name,
-      "children.type": children.type,
-      "\u5176\u4ED6\u5C5E\u6027": children.props
-    };
-    console.log(debugData);
-    return child.props.name ? createElement(child.type, __spreadValues({}, __spreadProps(__spreadValues({}, child.props), {
-      // register: methods.register,
-      key: child.props.name
-    }))) : child;
+  return /* @__PURE__ */ jsx("div", { className: cn(
+    designMode && "bg-red-300 shadow-md outline"
+  ), children: Children.map(children, (child, i) => {
+    return designMode ? /* @__PURE__ */ jsx(ChildrenEditMode, { child, i }) : /* @__PURE__ */ jsx(ChildrenOrigin, { child, i });
   }) });
 };
-const ChildrenDebugInnerInfo = () => {
-  const debugData = useDemoChildrenBlock((x) => x.debugData);
-  return /* @__PURE__ */ jsxs("div", { children: [
-    "ChildrenDebugInner",
-    /* @__PURE__ */ jsx("pre", { children: JSON.stringify(debugData, null, 2) })
+function ChildrenOrigin(props) {
+  const { child, i } = props;
+  const originPropsList = useDemoChildrenBlock((x) => x.originPropsList);
+  const overProps = useMemo(() => originPropsList && originPropsList[i].props, [i, originPropsList]);
+  return /* @__PURE__ */ jsx(Fragment, { children: createElement(child.type, __spreadValues(__spreadValues({}, child.props), overProps)) });
+}
+function ChildrenEditMode(props) {
+  var _a;
+  const { child, i } = props;
+  const [open, setOpen] = useState(false);
+  const originPropsList = useDemoChildrenBlock((x) => x.originPropsList);
+  const setOriginPropsList = useDemoChildrenBlock((x) => x.setOriginPropsList);
+  const oriProps = useMemo(() => {
+    return originPropsList[i];
+  }, [i, originPropsList]);
+  const Editor = (_a = child.type) == null ? void 0 : _a.Editor;
+  const overProps = useMemo(() => originPropsList && originPropsList[i].props, [i, originPropsList]);
+  return /* @__PURE__ */ jsxs("div", { className: " relative", children: [
+    /* @__PURE__ */ jsxs(
+      MtButton,
+      {
+        className: " absolute right-0 top-0",
+        onClick: () => {
+          setOpen(true);
+        },
+        children: [
+          "ed(",
+          i,
+          ")"
+        ]
+      }
+    ),
+    createElement(child.type, __spreadValues(__spreadValues({}, child.props), overProps)),
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+      "editor",
+      Editor && /* @__PURE__ */ jsx(Editor, { preProps: oriProps, setNewProps: (values) => {
+        console.log("\u8BBE\u7F6E\u65B0\u503C", values);
+        setOriginPropsList(originPropsList.map((item, j) => {
+          if (i == j) {
+            return { props: values };
+          }
+          return item;
+        }));
+      } })
+    ] }) })
+  ] });
+}
+const BlockDesignToolbar = () => {
+  const debugData = useDemoChildrenBlock((x) => x.originPropsList);
+  const designMode = useDemoChildrenBlock((x) => x.designMode);
+  const setDesignMode = useDemoChildrenBlock((x) => x.setDesignMode);
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-1 bg-slate-600 p-2", children: [
+    /* @__PURE__ */ jsx(MtButton, { onClick: () => {
+      setDesignMode(!designMode);
+    }, children: "edit" }),
+    /* @__PURE__ */ jsxs(Dialog, { children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(MtButton, { children: "info" }) }),
+      /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx("pre", { children: JSON.stringify(debugData, null, 2) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Dialog, { children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(MtButton, { children: "reRender" }) }),
+      /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(RenderByPresistData, { data: debugData }) })
+    ] })
   ] });
 };
+function RenderByPresistData(props) {
+  const { data } = props;
+  const items = data;
+  return /* @__PURE__ */ jsx("div", { className: "bg-yellow-100 p-2", children: items.map((item, i) => {
+    return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(MtBlockRender, { type: item.blockType, compProps: item.props }) }, i);
+  }) });
+}
 export {
-  ChildrenDebug,
+  BlockCanva,
   DemoChildrenProvider,
   blockContext,
   useDemoChildrenBlock

package/dist/esm/block/MtBlockSS.js

@@ -1,10 +1,9 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 import { Suspense } from "react";
 import { BlockProvider } from "./block-store";
-import { MtBlockRender } from "./blockRegister";
 function MtBlock(props) {
   const { id, type, blockProps } = props;
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "loading block" }), children: /* @__PURE__ */ jsx(BlockProvider, { id, type, children: /* @__PURE__ */ jsx(MtBlockRender, {}) }) }) });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "loading block" }), children: /* @__PURE__ */ jsx(BlockProvider, { id, type }) }) });
 }
 export {
   MtBlock

package/dist/esm/block/blockRegister.d.ts

@@ -1,3 +1,8 @@
 import { ComponentType } from "react";
-export declare const registerBlock: (type: string, comp: ComponentType<any>) => void;
-export declare function MtBlockRender(): import("react").JSX.Element;
+export declare const getComponentName: (comp: any) => any;
+export declare const registerBlock: (comp: ComponentType<any>, type?: string) => void;
+export declare const registAllBlock: () => void;
+export declare function MtBlockRender(props: {
+    type: string;
+    compProps: any;
+}): import("react").JSX.Element;

package/dist/esm/block/blockRegister.js

@@ -16,20 +16,28 @@ var __spreadValues = (a, b) => {
   return a;
 };
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { lazy } from "react";
-import { useBlock } from "./block-store";
+import HelloBlock from "./blocks/hello";
+import Hello2Block from "./blocks/hello2";
+const getComponentName = (comp) => {
+  let name1 = comp.blockName;
+  if (!name1) {
+    name1 = comp == null ? void 0 : comp.name;
+  }
+  return name1;
+};
 const blocks = {};
-const registerBlock = (type, comp) => {
-  blocks[type] = comp;
+const registerBlock = (comp, type) => {
+  const name = getComponentName(comp);
+  console.log("registerBlock", name);
+  blocks[name] = comp;
+};
+const registAllBlock = () => {
+  registerBlock(HelloBlock);
+  registerBlock(Hello2Block);
 };
-const LzHelloBlock = lazy(() => import("./blocks/HelloText"));
-const LzHello2Block = lazy(() => import("./blocks/Hello2Block"));
-registerBlock("hello", LzHelloBlock);
-registerBlock("hello2", LzHello2Block);
-function MtBlockRender() {
-  const id = useBlock((x) => x.id);
-  const type = useBlock((x) => x.type);
-  const blockProps = useBlock((x) => x.props);
+registAllBlock();
+function MtBlockRender(props) {
+  const { compProps, type } = props;
   const BlockComp = blocks[type];
   if (!BlockComp) {
     return /* @__PURE__ */ jsxs("div", { className: "bg-600 mx-auto p-8", children: [
@@ -37,9 +45,11 @@ function MtBlockRender() {
       type
     ] });
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(BlockComp, __spreadValues({}, blockProps)) });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(BlockComp, __spreadValues({}, compProps)) });
 }
 export {
   MtBlockRender,
+  getComponentName,
+  registAllBlock,
   registerBlock
 };

package/dist/esm/block/blocks/HelloBlock.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function HelloBlock(props: {
+    id: string;
+    text?: string;
+}): import("react").JSX.Element;

package/dist/esm/block/blocks/HelloBlock.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsxs } from "react/jsx-runtime";
+function HelloBlock(props) {
+  const { id, text } = props;
+  return /* @__PURE__ */ jsxs("div", { className: "bg-slate-100 p-2", children: [
+    "hello block: ",
+    id,
+    ",text:",
+    text
+  ] });
+}
+export {
+  HelloBlock as default
+};

package/dist/esm/block/blocks/hello/Hello.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default function HelloBlock(props: {
+    text?: string;
+}): import("react").JSX.Element;

package/dist/esm/block/blocks/hello/Hello.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function HelloBlock(props) {
+  const { text } = props;
+  return /* @__PURE__ */ jsxs("div", { className: "border bg-slate-100 p-2 shadow-md outline", children: [
+    /* @__PURE__ */ jsx("h1", { children: "hello-block" }),
+    /* @__PURE__ */ jsx("div", { className: "bg-slate-300 p-2", children: text })
+  ] });
+}
+export {
+  HelloBlock as default
+};

package/dist/esm/block/blocks/hello/edit.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function HelloBlockEditor(props: {
+    preProps: any;
+    setNewProps: (props: any) => void;
+}): import("react").JSX.Element;

package/dist/esm/block/blocks/hello/edit.js

@@ -0,0 +1,16 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MtButton } from "mtxuilib/ui/ui-mt/Button";
+function HelloBlockEditor(props) {
+  const { preProps, setNewProps } = props;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("h1", { children: "hello editor" }),
+    /* @__PURE__ */ jsx(MtButton, { onClick: () => {
+      console.log("todo set text");
+      setNewProps({ text: "new text-------------------" });
+    }, children: "set text" }),
+    /* @__PURE__ */ jsx("pre", { children: JSON.stringify(preProps, null, 2) })
+  ] });
+}
+export {
+  HelloBlockEditor as default
+};

package/dist/esm/block/blocks/hello/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare function HelloBlock(props: {
+    id: string;
+    text?: string;
+}): import("react").JSX.Element;
+declare namespace HelloBlock {
+    var blockName: string;
+    var Editor: import("react").LazyExoticComponent<typeof import("./edit").default>;
+}
+export default HelloBlock;

package/dist/esm/block/blocks/hello/index.js

@@ -0,0 +1,29 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { jsx } from "react/jsx-runtime";
+import { lazy } from "react";
+const LzHelloBlock = lazy(() => import("./Hello"));
+const LzEdit = lazy(() => import("./edit"));
+function HelloBlock(props) {
+  return /* @__PURE__ */ jsx(LzHelloBlock, __spreadValues({}, props));
+}
+HelloBlock.blockName = "hello-block";
+HelloBlock.Editor = LzEdit;
+export {
+  HelloBlock as default
+};

package/dist/esm/block/blocks/hello2/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default function Hello2Block(props: {
+    id: string;
+}): import("react").JSX.Element;

package/dist/esm/block/blocks/hello2/index.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsxs } from "react/jsx-runtime";
+function Hello2Block(props) {
+  const { id } = props;
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex gap-2 bg-blue-100 p-2", children: [
+    "hello2 block: ",
+    id
+  ] });
+}
+export {
+  Hello2Block as default
+};