fix: createComponent should return ele in fn

GrinZero · Jan 26, 2024 · f772d56 · f772d56
1 parent 42cdc19
commit f772d56
Show file tree

Hide file tree

Showing 9 changed files with 188 additions and 194 deletions.
diff --git a/apps/demo/src/components/counter/index.ts b/apps/demo/src/components/counter/index.ts
@@ -1,12 +1,26 @@
-import { render, useStyles, useRef, useState, useEffect } from "extreme";
+import {
+  useStyles,
+  useRef,
+  useState,
+  useEffect,
+  createComponent,
+  useMount,
+} from "extreme";
 import styles from "./index.css?raw";
 import template from "./index.html?raw";
 
-export const Counter = (element: HTMLElement) => {
-  useStyles(styles);
+export const Counter = createComponent("Counter", () => {
   const resetRef = useRef();
   const [count, setCount] = useState(0);
   const [title, setTitle] = useState(`<img src="123"/>`);
+  useStyles(styles);
+
+  useMount(() => {
+    resetRef()?.addEventListener("click", () => {
+      setCount(0);
+      setTitle("the form is not submit");
+    });
+  });
 
   const decrement = () => {
     setCount(count() - 1);
@@ -18,10 +32,19 @@ export const Counter = (element: HTMLElement) => {
     setTitle("submit success");
   };
 
-  const base = render(element, template, {
+  count((newV) => {
+    console.log("newV", newV);
+  });
+
+  useEffect(() => {
+    console.log("count&title", count(), title());
+  }, [count, title]);
+
+  return {
+    template,
     state: {
       count,
-      title
+      title,
     },
     ref: {
       resetRef,
@@ -31,20 +54,5 @@ export const Counter = (element: HTMLElement) => {
       increment,
       handleSubmit: submit,
     },
-  });
-
-  count((newV) => {
-    console.log("newV", newV);
-  });
-
-  useEffect(() => {
-    console.log("count&title", count(), title());
-  }, [count, title]);
-
-  resetRef()?.addEventListener("click", () => {
-    setCount(0);
-    setTitle("the form is not submit");
-  });
-
-  return base;
-};
+  };
+});
diff --git a/apps/demo/src/components/custom-component/index.ts b/apps/demo/src/components/custom-component/index.ts
@@ -1,35 +1,38 @@
-import { GetState, useRef, render } from "extreme";
+import { GetState, useRef, createComponent } from "extreme";
 import template from "./index.html?raw";
 
-export const CustomComponent = (
-  element: HTMLElement,
-  props: {
-    open?: boolean | GetState<boolean>;
-  } = {}
-) => {
-  const defaultData = [
-    {
-      src: "https://img.alicdn.com/imgextra/i4/O1CN01QYQ1QI1CZQYQ1QYQI_!!6000000001382-2-tps-200-200.png",
-      content: "这是一段描述1，但是我是新的默认数据",
-      title: "这是一段标题1",
-      key: 1,
-    },
-    {
-      src: "https://img.alicdn.com/imgextra/i4/O1CN01QYQ1QI1CZQYQ1QYQI_!!6000000001382-2-tps-200-200.png",
-      content: "这是一段描述2",
-      title: "这是一段标题2",
-      key: 2,
-    },
-  ];
-  const divRef = useRef();
+export const CustomComponent = createComponent(
+  "CustomComponent",
+  (
+    props: {
+      open?: boolean | GetState<boolean>;
+    } = {}
+  ) => {
+    const defaultData = [
+      {
+        src: "https://img.alicdn.com/imgextra/i4/O1CN01QYQ1QI1CZQYQ1QYQI_!!6000000001382-2-tps-200-200.png",
+        content: "这是一段描述1，但是我是新的默认数据",
+        title: "这是一段标题1",
+        key: 1,
+      },
+      {
+        src: "https://img.alicdn.com/imgextra/i4/O1CN01QYQ1QI1CZQYQ1QYQI_!!6000000001382-2-tps-200-200.png",
+        content: "这是一段描述2",
+        title: "这是一段标题2",
+        key: 2,
+      },
+    ];
+    const divRef = useRef();
 
-  return render(element, template, {
-    state: {
-      defaultData,
-      open: props.open,
-    },
-    ref: {
-      divRef,
-    },
-  });
-};
+    return {
+      template,
+      state: {
+        defaultData,
+        open: props.open,
+      },
+      ref: {
+        divRef,
+      },
+    };
+  }
+);
diff --git a/apps/demo/src/components/list/index.ts b/apps/demo/src/components/list/index.ts
@@ -1,4 +1,4 @@
-import { useStyles, useState, useRef, render } from "extreme";
+import { useStyles, useState, useRef, createComponent } from "extreme";
 import styles from "./index.css?raw";
 import template from "./index.html?raw";
 
@@ -16,92 +16,94 @@ const defaultData = [
     key: 2,
   },
 ];
-export const List = (
-  element: HTMLElement,
-  props: {
-    defaultData?: typeof defaultData;
-  } = {}
-) => {
-  useStyles(styles);
 
-  const [data, setData] = useState(props.defaultData || defaultData);
-  const listRef = useRef();
+export const List = createComponent(
+  "List",
+  (
+    props: {
+      defaultData?: typeof defaultData;
+    } = {}
+  ) => {
+    useStyles(styles);
 
-  const handleClear = () => {
-    setData([]);
-  };
-  const handleReset = () => {
-    setData(defaultData);
-  };
-  const handleAdd = () => {
-    const source = data();
+    const [data, setData] = useState(props.defaultData || defaultData);
+    const listRef = useRef();
 
-    const newKey =
-      source.length > 0 ? Math.max(...source.map((item) => item.key)) + 1 : 1;
-    setData([
-      ...data(),
-      {
-        src: "https://img.alicdn.com/imgextra/i4/O1CN01QYQ1QI1CZQYQ1QYQI_!!6000000001382-2-tps-200-200.png",
-        content: "这是一段描述" + newKey,
-        title: "这是一段标题" + newKey,
-        key: newKey,
-      },
-    ]);
+    const handleClear = () => {
+      setData([]);
+    };
+    const handleReset = () => {
+      setData(defaultData);
+    };
+    const handleAdd = () => {
+      const source = data();
 
-    const listContainer = listRef();
-    if (listContainer) {
-      listContainer.scrollTop = listContainer.scrollHeight;
-    }
-  };
-  const handleMove = () => {
-    setData([
-      {
-        src: "https://img.alicdn.com/imgextra/i4/O1CN01QYQ1QI1CZQYQ1QYQI_!!6000000001382-2-tps-200-200.png",
-        content: "这是一段描述",
-        title: "这是一段标题",
-        key: 2,
-      },
-      {
-        src: "https://img.alicdn.com/imgextra/i4/O1CN01QYQ1QI1CZQYQ1QYQI_!!6000000001382-2-tps-200-200.png",
-        content: "这是一段描述Move+Update",
-        title: "这是一段标题Move+Update",
-        key: 1,
+      const newKey =
+        source.length > 0 ? Math.max(...source.map((item) => item.key)) + 1 : 1;
+      setData([
+        ...data(),
+        {
+          src: "https://img.alicdn.com/imgextra/i4/O1CN01QYQ1QI1CZQYQ1QYQI_!!6000000001382-2-tps-200-200.png",
+          content: "这是一段描述" + newKey,
+          title: "这是一段标题" + newKey,
+          key: newKey,
+        },
+      ]);
+
+      const listContainer = listRef();
+      if (listContainer) {
+        listContainer.scrollTop = listContainer.scrollHeight;
+      }
+    };
+    const handleMove = () => {
+      setData([
+        {
+          src: "https://img.alicdn.com/imgextra/i4/O1CN01QYQ1QI1CZQYQ1QYQI_!!6000000001382-2-tps-200-200.png",
+          content: "这是一段描述",
+          title: "这是一段标题",
+          key: 2,
+        },
+        {
+          src: "https://img.alicdn.com/imgextra/i4/O1CN01QYQ1QI1CZQYQ1QYQI_!!6000000001382-2-tps-200-200.png",
+          content: "这是一段描述Move+Update",
+          title: "这是一段标题Move+Update",
+          key: 1,
+        },
+      ]);
+    };
+    const handleUpdate = () => {
+      setData([
+        {
+          src: "https://img.alicdn.com/imgextra/i4/O1CN01QYQ1QI1CZQYQ1QYQI_!!6000000001382-2-tps-200-200.png",
+          content: "这是一段描述[key没有变化]",
+          title: "这是一段标题",
+          key: 1,
+        },
+        {
+          src: "https://img.alicdn.com/imgextra/i4/O1CN01QYQ1QI1CZQYQ1QYQI_!!6000000001382-2-tps-200-200.png",
+          content: "这是一段描述",
+          title: "这是一段标题",
+          key: 2,
+        },
+      ]);
+    };
+
+    return {
+      template,
+      state: {
+        items: data,
+        showReset: () => data().length > 0,
       },
-    ]);
-  };
-  const handleUpdate = () => {
-    setData([
-      {
-        src: "https://img.alicdn.com/imgextra/i4/O1CN01QYQ1QI1CZQYQ1QYQI_!!6000000001382-2-tps-200-200.png",
-        content: "这是一段描述[key没有变化]",
-        title: "这是一段标题",
-        key: 1,
+      methods: {
+        handleClear,
+        handleReset,
+        handleAdd,
+        handleMove,
+        handleUpdate,
       },
-      {
-        src: "https://img.alicdn.com/imgextra/i4/O1CN01QYQ1QI1CZQYQ1QYQI_!!6000000001382-2-tps-200-200.png",
-        content: "这是一段描述",
-        title: "这是一段标题",
-        key: 2,
+      ref: {
+        listRef,
       },
-    ]);
-  };
-
-  const list = render(element, template, {
-    state: {
-      items: data,
-      showReset: () => data().length > 0,
-    },
-    methods: {
-      handleClear,
-      handleReset,
-      handleAdd,
-      handleMove,
-      handleUpdate,
-    },
-    ref: {
-      listRef,
-    },
-  });
-
-  return list;
-};
+    };
+  }
+);
diff --git a/apps/demo/src/main.ts b/apps/demo/src/main.ts
@@ -1,16 +1,7 @@
 import "./style.css";
-import { Counter, List, CustomComponent } from "./components";
-import { App, Topbar, Content, Demo } from "./modules";
-
-import { extreme } from "extreme";
-
-extreme.use({
-  Counter,
-  List,
-  CustomComponent,
-  Topbar,
-  Content,
-});
+import { App, Demo } from "./modules";
+export * from "./components"
+export * from "./modules"
 
 const handleHashChange = () => {
   if (window.location.hash.match(/#\/demo/)) {

diff --git a/apps/demo/src/modules/content/index.ts b/apps/demo/src/modules/content/index.ts
@@ -1,6 +1,6 @@
-import { render } from "extreme";
+import { createComponent } from "extreme";
 import template from "./index.html?raw";
 
-export const Content = (element: HTMLElement) => {
-  return render(element, template);
-};
+export const Content = createComponent("Content", () => {
+  return { template };
+});
diff --git a/apps/demo/src/modules/top-bar/index.ts b/apps/demo/src/modules/top-bar/index.ts
@@ -1,10 +1,11 @@
-import { render } from "extreme";
+import { createComponent } from "extreme";
 import template from "./index.html?raw";
 
-export const Topbar = (element: HTMLElement) => {
-  return render(element, template, {
+export const Topbar = createComponent("Topbar", () => {
+  return {
+    template,
     state: {
       title: "topbar",
     },
-  });
-};
+  };
+});
diff --git a/packages/extreme/src/core/extreme.ts b/packages/extreme/src/core/extreme.ts
@@ -31,9 +31,10 @@ export const createComponent = (name: string, component: ExtremeRenderFn) => {
     replace: boolean = true
   ) => {
     const result = component(props);
-    render(element, result.template, result, replace);
+    const ele = render(element, result.template, result, replace);
     currentCell.mount?.();
     resetCurrentCell();
+    return ele;
   };
   fn.displayName = name;
   if (extreme.store[name]) {