fix: add optimization

examples/todo/src/main.tsx

@@ -1,9 +1,9 @@
-import { createState, upsert, useEffect } from "@idealjs/sapling";
+import { createProxy, createRef, upsert, useEffect } from "@idealjs/sapling";
 
 const TodoItem = (props: { name: number; count: number }) => {
   let { name, count } = props;
-  const state = createState(0);
-  const ref = createState<HTMLParagraphElement>(null);
+  const state = createProxy({ val: 0 });
+  const ref = createRef<HTMLParagraphElement>(null);
   useEffect(() => {
     const handler = setInterval(() => {
       state.val++;
@@ -25,7 +25,7 @@ const TodoItem = (props: { name: number; count: number }) => {
 
       <button
         onClick={() => {
-          ref.val?.appendChild(document.createElement("div"));
+          ref.current?.appendChild(document.createElement("div"));
         }}
       >
         test element function
@@ -43,7 +43,9 @@ const TodoItem = (props: { name: number; count: number }) => {
 };
 
 const Component = () => {
-  const items = createState<{ id: number; count: number }[]>([]);
+  const items = createProxy<{ val: { id: number; count: number }[] }>({
+    val: [],
+  });
   return (
     <div>
       <button

packages/core/src/createElement.ts

@@ -109,6 +109,10 @@ export class SaplingElement {
     prev: SaplingElement | null = null,
   ): SaplingElement | null => {
     if (child.el != null && prev?.el != null) {
+      if (child.el.parentElement != null) {
+        // skip append for optimization
+        return child;
+      }
       this.el?.insertBefore(child.el, prev.el.nextSibling);
       this.children.add(child);
       return child;
@@ -118,7 +122,11 @@ export class SaplingElement {
         // skip append for optimization
         return child;
       }
-      this.el?.appendChild(child.el);
+      if (this.el?.firstChild != null) {
+        this.el?.insertBefore(child.el, this.el?.firstChild);
+      } else {
+        this.el?.appendChild(child.el);
+      }
       this.children.add(child);
       return child;
     }