lithent 0.1.0

package/router/dist/Router.mjs

@@ -0,0 +1,56 @@
+import { mount as h, mountCallback as i, h as v, Fragment as m } from "lithent";
+const w = (a, s) => {
+  let t = a;
+  return {
+    get value() {
+      return t;
+    },
+    get v() {
+      return t;
+    },
+    set value(r) {
+      t = r, s();
+    },
+    set v(r) {
+      t = r, s();
+    }
+  };
+}, f = { value: {} };
+function C() {
+  return f.value;
+}
+function S(a, s) {
+  f.value[a] = s;
+}
+const L = h((a, s, t) => {
+  const r = w("", a), g = (o) => t.find((n) => {
+    var e;
+    return ((e = n.componentProps) == null ? void 0 : e.path) === o;
+  }), P = () => t.find((o) => {
+    var n;
+    return /^:/.test(String(((n = o == null ? void 0 : o.componentProps) == null ? void 0 : n.path) || ""));
+  }), u = () => {
+    var e, c, p, l;
+    const o = window.location.hash.replace(/^[#\/]*/, "") || String(((c = (e = t[0]) == null ? void 0 : e.componentProps) == null ? void 0 : c.path) || "");
+    let n = g(o);
+    n || (n = P(), n && S(
+      String(((p = n == null ? void 0 : n.componentProps) == null ? void 0 : p.path) || "").replace(/^:/, ""),
+      o
+    )), n && (r.v = String(((l = n == null ? void 0 : n.componentProps) == null ? void 0 : l.path) || ""));
+  }, d = () => {
+    console.log("unmount"), window.removeEventListener("hashchange", u);
+  };
+  return window.addEventListener("hashchange", u), i(() => (u(), d)), () => /* @__PURE__ */ v(m, null, t.map((o) => {
+    var c, p;
+    const n = String(((c = o == null ? void 0 : o.componentProps) == null ? void 0 : c.path) || ""), e = (p = o == null ? void 0 : o.componentProps) == null ? void 0 : p.element;
+    return r.v === n ? e : null;
+  }));
+}), R = h(function() {
+  return () => /* @__PURE__ */ v("div", null);
+});
+export {
+  L as Router,
+  R as RouterItem,
+  C as useParams
+};
+//# sourceMappingURL=Router.mjs.map

package/router/dist/Router.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Router.mjs","sources":["../../helper/dist/lithentHelper.mjs","../src/hook/params.ts","../src/Router.tsx"],"sourcesContent":["import { mountCallback as o, updateCallback as a } from \"lithent\";\nconst s = (r, e) => {\n  let t = r;\n  return {\n    get value() {\n      return t;\n    },\n    get v() {\n      return t;\n    },\n    set value(u) {\n      t = u, e();\n    },\n    set v(u) {\n      t = u, e();\n    }\n  };\n}, v = (r) => {\n  let e = r;\n  return {\n    get value() {\n      return e();\n    },\n    get v() {\n      return e();\n    },\n    set value(t) {\n      throw new Error(\"You can't change 'computed'\");\n    },\n    set v(t) {\n      throw new Error(\"You can't change 'computed'\");\n    }\n  };\n}, g = (r, e, t = () => []) => {\n  o(() => (r(), e)), a(() => (e(), r), t);\n}, p = (r, e) => c({\n  initValue: r,\n  renew: e\n}), c = ({\n  initValue: r,\n  renew: e\n}) => new Proxy(r, {\n  get(t, u) {\n    return t[u];\n  },\n  set(t, u, n) {\n    return t[u] = n, e(), !0;\n  }\n});\nexport {\n  v as computed,\n  g as effect,\n  s as state,\n  p as store\n};\n//# sourceMappingURL=lithentHelper.mjs.map\n","const routerParams = { value: {} } as { value: Record<string, string> };\n\nexport function useParams() {\n  return routerParams.value;\n}\n\nexport function addParams(key: string, value: string) {\n  routerParams.value[key] = value;\n}\n","import { h, Fragment, TagFunction, mountCallback, mount } from 'lithent';\nimport { state } from 'lithent/helper';\nimport { addParams } from '@/hook/params';\nexport { useParams } from '@/hook/params';\n\nexport const Router: TagFunction = mount((renew, _props, children) => {\n  const targetPathString = state<string>('', renew);\n  const findPath = (injectPath: string) =>\n    children.find(item => item.componentProps?.path === injectPath);\n\n  const findDynamicPath = () =>\n    children.find(item => /^:/.test(String(item?.componentProps?.path || '')));\n\n  const handleHashChange = () => {\n    const injectPath =\n      window.location.hash.replace(/^[#\\/]*/, '') ||\n      String(children[0]?.componentProps?.path || '');\n    let targetPath = findPath(injectPath);\n\n    if (!targetPath) {\n      targetPath = findDynamicPath();\n\n      if (targetPath) {\n        addParams(\n          String(targetPath?.componentProps?.path || '').replace(/^:/, ''),\n          injectPath\n        );\n      }\n    }\n\n    if (targetPath) {\n      targetPathString.v = String(targetPath?.componentProps?.path || '');\n    }\n  };\n\n  const removeEvent = () => {\n    console.log('unmount');\n    window.removeEventListener('hashchange', handleHashChange);\n  };\n\n  window.addEventListener('hashchange', handleHashChange);\n\n  mountCallback(() => {\n    handleHashChange();\n\n    return removeEvent;\n  });\n\n  return () => (\n    <Fragment>\n      {children.map(item => {\n        const path = String(item?.componentProps?.path || '');\n        const element = item?.componentProps?.element;\n\n        return targetPathString.v === path ? element : null;\n      })}\n    </Fragment>\n  );\n});\n\nexport const RouterItem: TagFunction = mount(function () {\n  return () => <div />;\n});\n"],"names":["s","r","e","u","routerParams","useParams","addParams","key","value","Router","mount","renew","_props","children","targetPathString","state","findPath","injectPath","item","_a","findDynamicPath","handleHashChange","_b","targetPath","_c","_d","removeEvent","mountCallback","h","Fragment","path","element","RouterItem"],"mappings":";AACK,MAACA,IAAI,CAACC,GAAGC,MAAM;AAClB,MAAI,IAAID;AACR,SAAO;AAAA,IACL,IAAI,QAAQ;AACV,aAAO;AAAA,IACR;AAAA,IACD,IAAI,IAAI;AACN,aAAO;AAAA,IACR;AAAA,IACD,IAAI,MAAME,GAAG;AACX,UAAIA,GAAGD;IACR;AAAA,IACD,IAAI,EAAEC,GAAG;AACP,UAAIA,GAAGD;IACR;AAAA,EACL;AACA,GCjBME,IAAe,EAAE,OAAO,CAAA;AAEvB,SAASC,IAAY;AAC1B,SAAOD,EAAa;AACtB;AAEgB,SAAAE,EAAUC,GAAaC,GAAe;AACpD,EAAAJ,EAAa,MAAMG,KAAOC;AAC5B;ACHO,MAAMC,IAAsBC,EAAM,CAACC,GAAOC,GAAQC,MAAa;AAC9D,QAAAC,IAAmBC,EAAc,IAAIJ,CAAK,GAC1CK,IAAW,CAACC,MAChBJ,EAAS,KAAK,CAAQK,MAAA;;AAAA,aAAAC,IAAAD,EAAK,mBAAL,gBAAAC,EAAqB,UAASF;AAAA,GAAU,GAE1DG,IAAkB,MACtBP,EAAS,KAAK,CAAQK,MAAA;;AAAA,gBAAK,KAAK,SAAOC,IAAAD,KAAA,gBAAAA,EAAM,mBAAN,gBAAAC,EAAsB,SAAQ,EAAE,CAAC;AAAA,GAAC,GAErEE,IAAmB,MAAM;;AAC7B,UAAMJ,IACJ,OAAO,SAAS,KAAK,QAAQ,WAAW,EAAE,KAC1C,SAAOK,KAAAH,IAAAN,EAAS,OAAT,gBAAAM,EAAa,mBAAb,gBAAAG,EAA6B,SAAQ,EAAE;AAC5C,QAAAC,IAAaP,EAASC,CAAU;AAEpC,IAAKM,MACHA,IAAaH,EAAgB,GAEzBG,KACFjB;AAAA,MACE,SAAOkB,IAAAD,KAAA,gBAAAA,EAAY,mBAAZ,gBAAAC,EAA4B,SAAQ,EAAE,EAAE,QAAQ,MAAM,EAAE;AAAA,MAC/DP;AAAA,IAAA,IAKFM,MACFT,EAAiB,IAAI,SAAOW,IAAAF,KAAA,gBAAAA,EAAY,mBAAZ,gBAAAE,EAA4B,SAAQ,EAAE;AAAA,EACpE,GAGIC,IAAc,MAAM;AACxB,YAAQ,IAAI,SAAS,GACd,OAAA,oBAAoB,cAAcL,CAAgB;AAAA,EAAA;AAGpD,gBAAA,iBAAiB,cAAcA,CAAgB,GAEtDM,EAAc,OACKN,KAEVK,EACR,GAEM,MACL,gBAAAE,EAACC,GACE,MAAAhB,EAAS,IAAI,CAAQK,MAAA;;AACpB,UAAMY,IAAO,SAAOX,IAAAD,KAAA,gBAAAA,EAAM,mBAAN,gBAAAC,EAAsB,SAAQ,EAAE,GAC9CY,KAAUT,IAAAJ,KAAA,gBAAAA,EAAM,mBAAN,gBAAAI,EAAsB;AAE/B,WAAAR,EAAiB,MAAMgB,IAAOC,IAAU;AAAA,EAChD,CAAA,CACH;AAEJ,CAAC,GAEYC,IAA0BtB,EAAM,WAAY;AAChD,SAAA,wBAAO,OAAI,IAAA;AACpB,CAAC;"}

package/router/dist/Router.umd.js

@@ -0,0 +1,2 @@
+(function(t,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("lithent")):typeof define=="function"&&define.amd?define(["exports","lithent"],o):(t=typeof globalThis<"u"?globalThis:t||self,o(t.Router={},t.lithent))})(this,function(t,o){"use strict";const h=(a,c)=>{let r=a;return{get value(){return r},get v(){return r},set value(u){r=u,c()},set v(u){r=u,c()}}},d={value:{}};function v(){return d.value}function m(a,c){d.value[a]=c}const P=o.mount((a,c,r)=>{const u=h("",a),S=e=>r.find(n=>{var s;return((s=n.componentProps)==null?void 0:s.path)===e}),w=()=>r.find(e=>{var n;return/^:/.test(String(((n=e==null?void 0:e.componentProps)==null?void 0:n.path)||""))}),l=()=>{var s,p,i,f;const e=window.location.hash.replace(/^[#\/]*/,"")||String(((p=(s=r[0])==null?void 0:s.componentProps)==null?void 0:p.path)||"");let n=S(e);n||(n=w(),n&&m(String(((i=n==null?void 0:n.componentProps)==null?void 0:i.path)||"").replace(/^:/,""),e)),n&&(u.v=String(((f=n==null?void 0:n.componentProps)==null?void 0:f.path)||""))},R=()=>{console.log("unmount"),window.removeEventListener("hashchange",l)};return window.addEventListener("hashchange",l),o.mountCallback(()=>(l(),R)),()=>o.h(o.Fragment,null,r.map(e=>{var p,i;const n=String(((p=e==null?void 0:e.componentProps)==null?void 0:p.path)||""),s=(i=e==null?void 0:e.componentProps)==null?void 0:i.element;return u.v===n?s:null}))}),g=o.mount(function(){return()=>o.h("div",null)});t.Router=P,t.RouterItem=g,t.useParams=v,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+//# sourceMappingURL=Router.umd.js.map

package/router/dist/Router.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Router.umd.js","sources":["../../helper/dist/lithentHelper.mjs","../src/hook/params.ts","../src/Router.tsx"],"sourcesContent":["import { mountCallback as o, updateCallback as a } from \"lithent\";\nconst s = (r, e) => {\n  let t = r;\n  return {\n    get value() {\n      return t;\n    },\n    get v() {\n      return t;\n    },\n    set value(u) {\n      t = u, e();\n    },\n    set v(u) {\n      t = u, e();\n    }\n  };\n}, v = (r) => {\n  let e = r;\n  return {\n    get value() {\n      return e();\n    },\n    get v() {\n      return e();\n    },\n    set value(t) {\n      throw new Error(\"You can't change 'computed'\");\n    },\n    set v(t) {\n      throw new Error(\"You can't change 'computed'\");\n    }\n  };\n}, g = (r, e, t = () => []) => {\n  o(() => (r(), e)), a(() => (e(), r), t);\n}, p = (r, e) => c({\n  initValue: r,\n  renew: e\n}), c = ({\n  initValue: r,\n  renew: e\n}) => new Proxy(r, {\n  get(t, u) {\n    return t[u];\n  },\n  set(t, u, n) {\n    return t[u] = n, e(), !0;\n  }\n});\nexport {\n  v as computed,\n  g as effect,\n  s as state,\n  p as store\n};\n//# sourceMappingURL=lithentHelper.mjs.map\n","const routerParams = { value: {} } as { value: Record<string, string> };\n\nexport function useParams() {\n  return routerParams.value;\n}\n\nexport function addParams(key: string, value: string) {\n  routerParams.value[key] = value;\n}\n","import { h, Fragment, TagFunction, mountCallback, mount } from 'lithent';\nimport { state } from 'lithent/helper';\nimport { addParams } from '@/hook/params';\nexport { useParams } from '@/hook/params';\n\nexport const Router: TagFunction = mount((renew, _props, children) => {\n  const targetPathString = state<string>('', renew);\n  const findPath = (injectPath: string) =>\n    children.find(item => item.componentProps?.path === injectPath);\n\n  const findDynamicPath = () =>\n    children.find(item => /^:/.test(String(item?.componentProps?.path || '')));\n\n  const handleHashChange = () => {\n    const injectPath =\n      window.location.hash.replace(/^[#\\/]*/, '') ||\n      String(children[0]?.componentProps?.path || '');\n    let targetPath = findPath(injectPath);\n\n    if (!targetPath) {\n      targetPath = findDynamicPath();\n\n      if (targetPath) {\n        addParams(\n          String(targetPath?.componentProps?.path || '').replace(/^:/, ''),\n          injectPath\n        );\n      }\n    }\n\n    if (targetPath) {\n      targetPathString.v = String(targetPath?.componentProps?.path || '');\n    }\n  };\n\n  const removeEvent = () => {\n    console.log('unmount');\n    window.removeEventListener('hashchange', handleHashChange);\n  };\n\n  window.addEventListener('hashchange', handleHashChange);\n\n  mountCallback(() => {\n    handleHashChange();\n\n    return removeEvent;\n  });\n\n  return () => (\n    <Fragment>\n      {children.map(item => {\n        const path = String(item?.componentProps?.path || '');\n        const element = item?.componentProps?.element;\n\n        return targetPathString.v === path ? element : null;\n      })}\n    </Fragment>\n  );\n});\n\nexport const RouterItem: TagFunction = mount(function () {\n  return () => <div />;\n});\n"],"names":["s","r","e","t","routerParams","useParams","addParams","key","value","Router","mount","renew","_props","children","targetPathString","state","findPath","injectPath","item","_a","findDynamicPath","handleHashChange","_b","targetPath","_c","_d","removeEvent","mountCallback","h","Fragment","path","element","RouterItem"],"mappings":"uQACK,MAACA,EAAI,CAACC,EAAGC,IAAM,CAClB,IAAIC,EAAIF,EACR,MAAO,CACL,IAAI,OAAQ,CACV,OAAOE,CACR,EACD,IAAI,GAAI,CACN,OAAOA,CACR,EACD,IAAI,MAAM,EAAG,CACXA,EAAI,EAAGD,GACR,EACD,IAAI,EAAE,EAAG,CACPC,EAAI,EAAGD,GACR,CACL,CACA,ECjBME,EAAe,CAAE,MAAO,CAAA,GAEvB,SAASC,GAAY,CAC1B,OAAOD,EAAa,KACtB,CAEgB,SAAAE,EAAUC,EAAaC,EAAe,CACpDJ,EAAa,MAAMG,GAAOC,CAC5B,CCHa,MAAAC,EAAsBC,EAAAA,MAAM,CAACC,EAAOC,EAAQC,IAAa,CAC9D,MAAAC,EAAmBC,EAAc,GAAIJ,CAAK,EAC1CK,EAAYC,GAChBJ,EAAS,KAAaK,GAAA,OAAA,QAAAC,EAAAD,EAAK,iBAAL,YAAAC,EAAqB,QAASF,EAAU,EAE1DG,EAAkB,IACtBP,EAAS,KAAaK,GAAA,OAAA,WAAK,KAAK,SAAOC,EAAAD,GAAA,YAAAA,EAAM,iBAAN,YAAAC,EAAsB,OAAQ,EAAE,CAAC,EAAC,EAErEE,EAAmB,IAAM,aAC7B,MAAMJ,EACJ,OAAO,SAAS,KAAK,QAAQ,UAAW,EAAE,GAC1C,SAAOK,GAAAH,EAAAN,EAAS,KAAT,YAAAM,EAAa,iBAAb,YAAAG,EAA6B,OAAQ,EAAE,EAC5C,IAAAC,EAAaP,EAASC,CAAU,EAE/BM,IACHA,EAAaH,EAAgB,EAEzBG,GACFjB,EACE,SAAOkB,EAAAD,GAAA,YAAAA,EAAY,iBAAZ,YAAAC,EAA4B,OAAQ,EAAE,EAAE,QAAQ,KAAM,EAAE,EAC/DP,CAAA,GAKFM,IACFT,EAAiB,EAAI,SAAOW,EAAAF,GAAA,YAAAA,EAAY,iBAAZ,YAAAE,EAA4B,OAAQ,EAAE,EACpE,EAGIC,EAAc,IAAM,CACxB,QAAQ,IAAI,SAAS,EACd,OAAA,oBAAoB,aAAcL,CAAgB,CAAA,EAGpD,cAAA,iBAAiB,aAAcA,CAAgB,EAEtDM,EAAAA,cAAc,KACKN,IAEVK,EACR,EAEM,IACLE,EAAA,EAACC,WACE,KAAAhB,EAAS,IAAYK,GAAA,SACpB,MAAMY,EAAO,SAAOX,EAAAD,GAAA,YAAAA,EAAM,iBAAN,YAAAC,EAAsB,OAAQ,EAAE,EAC9CY,GAAUT,EAAAJ,GAAA,YAAAA,EAAM,iBAAN,YAAAI,EAAsB,QAE/B,OAAAR,EAAiB,IAAMgB,EAAOC,EAAU,IAChD,CAAA,CACH,CAEJ,CAAC,EAEYC,EAA0BtB,QAAM,UAAY,CAChD,MAAA,QAAO,MAAI,IAAA,CACpB,CAAC"}

package/router/dist/hook/params.d.ts

@@ -0,0 +1,2 @@
+export declare function useParams(): Record<string, string>;
+export declare function addParams(key: string, value: string): void;

package/router/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "lithent-router",
+  "private": true,
+  "version": "0.6.0",
+  "description": "lithent-router",
+  "main": "./dist/Router.umd.js",
+  "module": "./dist/Router.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/Router.mjs",
+      "require": "./dist/Router.umd.js"
+    }
+  },
+  "types": "./dist/Router.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "lithent": "workspace:*",
+    "lithent-helper": "workspace:*"
+  },
+  "author": "superlucky84",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https@github.com:superlucky84/lithent.git",
+    "directory": "router"
+  },
+  "homepage": "https://github.com/superlucky84/lithent/tree/master/router",
+  "keywords": [
+    "lithent"
+  ],
+  "volta": {
+    "node": "20.3.0"
+  }
+}

package/router/src/Router.tsx

@@ -0,0 +1,63 @@
+import { h, Fragment, TagFunction, mountCallback, mount } from 'lithent';
+import { state } from 'lithent/helper';
+import { addParams } from '@/hook/params';
+export { useParams } from '@/hook/params';
+
+export const Router: TagFunction = mount((renew, _props, children) => {
+  const targetPathString = state<string>('', renew);
+  const findPath = (injectPath: string) =>
+    children.find(item => item.componentProps?.path === injectPath);
+
+  const findDynamicPath = () =>
+    children.find(item => /^:/.test(String(item?.componentProps?.path || '')));
+
+  const handleHashChange = () => {
+    const injectPath =
+      window.location.hash.replace(/^[#\/]*/, '') ||
+      String(children[0]?.componentProps?.path || '');
+    let targetPath = findPath(injectPath);
+
+    if (!targetPath) {
+      targetPath = findDynamicPath();
+
+      if (targetPath) {
+        addParams(
+          String(targetPath?.componentProps?.path || '').replace(/^:/, ''),
+          injectPath
+        );
+      }
+    }
+
+    if (targetPath) {
+      targetPathString.v = String(targetPath?.componentProps?.path || '');
+    }
+  };
+
+  const removeEvent = () => {
+    console.log('unmount');
+    window.removeEventListener('hashchange', handleHashChange);
+  };
+
+  window.addEventListener('hashchange', handleHashChange);
+
+  mountCallback(() => {
+    handleHashChange();
+
+    return removeEvent;
+  });
+
+  return () => (
+    <Fragment>
+      {children.map(item => {
+        const path = String(item?.componentProps?.path || '');
+        const element = item?.componentProps?.element;
+
+        return targetPathString.v === path ? element : null;
+      })}
+    </Fragment>
+  );
+});
+
+export const RouterItem: TagFunction = mount(function () {
+  return () => <div />;
+});

package/router/src/components/Main.tsx

@@ -0,0 +1,14 @@
+import { h, Fragment, mount, TagFunction } from 'lithent';
+
+const Main: TagFunction = mount(function () {
+  return () => (
+    <div>
+      <Fragment>
+        <div>3</div>
+        <div>3</div>
+      </Fragment>
+    </div>
+  );
+});
+
+export default Main;

package/router/src/components/Sub.tsx

@@ -0,0 +1,7 @@
+import { h, mount, TagFunction } from 'lithent';
+
+const Sub: TagFunction = mount(function Sub() {
+  return () => <div>Sub</div>;
+});
+
+export default Sub;

package/router/src/components/Sub2.tsx

@@ -0,0 +1,17 @@
+import { h, mount, TagFunction } from 'lithent';
+import { useParams } from '@/hook/params';
+
+const Sub2: TagFunction = mount(function () {
+  const params = useParams();
+  const handle = () => {
+    console.log('red', params);
+  };
+
+  return () => (
+    <div style={{ color: 'red' }} onClick={handle}>
+      Sub222
+    </div>
+  );
+});
+
+export default Sub2;

package/router/src/example.tsx

@@ -0,0 +1,19 @@
+import { h, Fragment, render, mount } from 'lithent';
+import { Router, RouterItem } from '@/Router';
+import Main from '@/components/Main';
+import Sub from '@/components/Sub';
+import Sub2 from '@/components/Sub2';
+
+const Root = mount(function () {
+  return () => (
+    <Fragment>
+      <Router>
+        <RouterItem path="main" element={<Main />} />
+        <RouterItem path="sub" element={<Sub />} />
+        <RouterItem path=":sub" element={<Sub2 />} />
+      </Router>
+    </Fragment>
+  );
+});
+
+render(<Root />, document.getElementById('root'));

package/router/src/hook/params.ts

@@ -0,0 +1,9 @@
+const routerParams = { value: {} } as { value: Record<string, string> };
+
+export function useParams() {
+  return routerParams.value;
+}
+
+export function addParams(key: string, value: string) {
+  routerParams.value[key] = value;
+}

package/src/diff.ts

@@ -0,0 +1,235 @@
+/**
+ * 변경점의 컴포넌트로 부터 기존트리와 상태를 비교하며 새로 가상돔 트리를 새로 만든다.
+ * (오리지널 가상돔으로 부터 유의미한 상태를 유지해야 하는 경우를 판별하여 새로운 트리를 만듬)
+ *
+ * 1. 동일한 트리의 위치해 있고 오리지널과 컴포넌트의 타입이 같은경우 기존 상태를 계승한다.
+ * 2. 동일한 컴포넌트가 아니라고 판단되는 경우에는 기존 상태를 무시하는 새로운 트리를 생성한다.
+ * 3. fragment타입의 경우에는 children의 갯수까지 같아야지 같은 타입이라고 판단한다.
+ * 4. loop타입의 자식들은 같은 키값을 가졌는지로 동일한지 판단하며 키값이 없을경우 fragment타입처럼 취급한다.
+ */
+import { WDom, TagFunctionResolver, RenderType } from '@/types';
+import { checkCustemComponentFunction } from '@/utils/predicator';
+import { getParent, reRender } from '@/utils';
+import { recursiveRemoveEvent } from '@/render';
+import {
+  checkEmptyElement,
+  checkSameWDomWithOriginal,
+  getWDomType,
+  checkExisty,
+} from '@/utils/predicator';
+
+import { runUnmountQueueFromWDom } from '@/hook/unmount';
+import { removeNodeChildKey } from '@/utils/universalRef';
+
+type DiffPrimaryParam = {
+  originalWDom?: WDom;
+  newWDom: WDom | TagFunctionResolver;
+  isSameType: boolean;
+};
+
+type DiffSecondeParam = {
+  originalWDom?: WDom;
+  newWDom: WDom;
+  isSameType: boolean;
+};
+
+export const makeNewWDomTree = ({
+  originalWDom,
+  newWDom,
+}: {
+  originalWDom?: WDom;
+  newWDom: WDom | TagFunctionResolver;
+}) => {
+  const type = getWDomType(newWDom);
+
+  if (!type) {
+    throw new Error('Unknown type wdom');
+  }
+  const isSameType = checkSameWDomWithOriginal[type]({ originalWDom, newWDom });
+
+  const result = remakeNewWDom({ originalWDom, newWDom, isSameType });
+
+  if (result?.nodeChildKey) {
+    removeNodeChildKey(result.nodeChildKey);
+  }
+
+  return result;
+};
+
+const remakeNewWDom = ({
+  newWDom,
+  originalWDom,
+  isSameType,
+}: DiffPrimaryParam) => {
+  const remakeWDom = generalize({ newWDom, originalWDom, isSameType });
+
+  remakeWDom.children = remakeChildrenForDiff({
+    isSameType,
+    newWDom: remakeWDom,
+    originalWDom,
+  });
+
+  const needRerender = addReRenderTypeProperty({
+    originalWDom,
+    newWDom: remakeWDom,
+    isSameType,
+  });
+
+  remakeWDom.needRerender = needRerender;
+
+  if (needRerender !== 'A' && originalWDom) {
+    remakeWDom.el = originalWDom.el;
+  }
+
+  if (
+    needRerender &&
+    ['D', 'R', 'SR'].includes(needRerender) &&
+    originalWDom?.componentKey
+  ) {
+    runUnmountQueueFromWDom(originalWDom);
+    recursiveRemoveEvent(originalWDom);
+    remakeWDom.children = originalWDom.children;
+  }
+
+  remakeWDom.oldProps = originalWDom?.props;
+
+  return remakeWDom;
+};
+
+const addReRenderTypeProperty = ({
+  originalWDom,
+  newWDom,
+  isSameType,
+}: DiffSecondeParam): RenderType | undefined => {
+  const existOriginalWDom = originalWDom && originalWDom.type;
+  const isEmptyElement = checkEmptyElement(newWDom);
+  const isRoot = !newWDom.getParent;
+  const parentType = !isRoot && getParent(newWDom).type;
+  const key = getKey(newWDom);
+  const isKeyCheckedWDom = parentType === 'loop' && checkExisty(key);
+  const isSameText =
+    newWDom.type === 'text' &&
+    isSameType &&
+    newWDom.text === originalWDom?.text;
+
+  let result: RenderType | undefined;
+  if (isEmptyElement) {
+    result = 'D';
+  } else if (isSameText) {
+    result = 'N';
+  } else if (!existOriginalWDom) {
+    result = 'A';
+  } else if (isSameType) {
+    result = isKeyCheckedWDom ? 'SU' : 'U';
+  } else {
+    result = isKeyCheckedWDom ? 'SR' : 'R';
+  }
+
+  return result;
+};
+
+const generalize = ({
+  newWDom,
+  originalWDom,
+  isSameType,
+}: DiffPrimaryParam): WDom => {
+  if (checkCustemComponentFunction(newWDom)) {
+    return isSameType && originalWDom
+      ? reRender(originalWDom, newWDom)
+      : newWDom.resolve();
+  }
+
+  return newWDom;
+};
+
+const remakeChildrenForDiff = ({
+  isSameType,
+  newWDom,
+  originalWDom,
+}: DiffSecondeParam) =>
+  isSameType && originalWDom
+    ? remakeChildrenForUpdate(newWDom, originalWDom)
+    : remakeChildrenForAdd(newWDom);
+
+const remakeChildrenForAdd = (newWDom: WDom) =>
+  (newWDom.children || []).map((item: WDom) => {
+    const childItem = makeNewWDomTree({ newWDom: item });
+
+    childItem.getParent = () => newWDom;
+
+    return childItem;
+  });
+
+const remakeChildrenForUpdate = (newWDom: WDom, originalWDom: WDom) => {
+  if (
+    newWDom.type === 'loop' &&
+    checkExisty(getKey((newWDom.children || [])[0]))
+  ) {
+    return remakeChildrenForLoopUpdate(newWDom, originalWDom);
+  }
+
+  return (newWDom.children || []).map((item: WDom, index: number) => {
+    const childItem = makeNewWDomTree({
+      newWDom: item,
+      originalWDom: (originalWDom.children || [])[index],
+    });
+
+    childItem.getParent = () => newWDom;
+
+    return childItem;
+  });
+};
+
+const remakeChildrenForLoopUpdate = (newWDom: WDom, originalWDom: WDom) => {
+  const { remakedChildren, unUsedChildren } = diffLoopChildren(
+    newWDom,
+    originalWDom
+  );
+
+  unUsedChildren.map(unusedItem => {
+    const el = unusedItem.el;
+
+    if (el && el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+  });
+
+  return remakedChildren;
+};
+
+const diffLoopChildren = (newWDom: WDom, originalWDom: WDom) => {
+  const newChildren = [...(newWDom.children || [])];
+  const originalChildren = [...(originalWDom.children || [])];
+
+  const remakedChildren = newChildren.map(item => {
+    const originalItem = findSameKeyOriginalItem(item, originalChildren);
+    const childItem = makeNewWDomTree({
+      newWDom: item,
+      originalWDom: originalItem,
+    });
+
+    if (originalItem) {
+      originalChildren.splice(originalChildren.indexOf(originalItem), 1);
+    }
+
+    childItem.getParent = () => newWDom;
+
+    return childItem;
+  });
+
+  return {
+    remakedChildren,
+    unUsedChildren: originalChildren,
+  };
+};
+
+const findSameKeyOriginalItem = (item: WDom, originalChildren: WDom[]) => {
+  const key = getKey(item);
+
+  return originalChildren.find(
+    orignalChildItem => getKey(orignalChildItem) === key
+  );
+};
+
+const getKey = (target: WDom) =>
+  target?.componentProps?.key ?? target?.props?.key;

package/src/examples/callback.tsx

@@ -0,0 +1,81 @@
+// example.jsx
+import { h, Fragment, render, mount, mountCallback } from '@/index';
+
+const Depth4 = mount(() => {
+  mountCallback(() => {
+    console.log('MOUNT - Depth4');
+    return () => console.log('UNMOUNT - Depth4');
+  });
+
+  return () => (
+    <Fragment>
+      <div>depth4</div>
+    </Fragment>
+  );
+});
+
+const Depth3 = mount(() => {
+  mountCallback(() => {
+    console.log('MOUNT - Depth3');
+    return () => console.log('UNMOUNT - Depth3');
+  });
+
+  return () => (
+    <Fragment>
+      <div>depth3</div>
+      <Depth4 />
+    </Fragment>
+  );
+});
+
+const Depth2 = mount(() => {
+  mountCallback(() => {
+    console.log('MOUNT - Depth2');
+    return () => console.log('UNMOUNT - Depth2');
+  });
+
+  return () => (
+    <Fragment>
+      <div>depth2</div>
+      <Depth3 />
+    </Fragment>
+  );
+});
+
+const Depth1 = mount(() => {
+  mountCallback(() => {
+    console.log('MOUNT - Depth1');
+    return () => console.log('UNMOUNT - Depth1');
+  });
+
+  return () => (
+    <Fragment>
+      <div>depth1</div>
+      <Depth2 />
+    </Fragment>
+  );
+});
+
+const CallbackRoot = mount(renew => {
+  let isShow = true;
+
+  const toggle = () => {
+    isShow = !isShow;
+    console.log(isShow);
+    renew();
+  };
+
+  return () => (
+    <Fragment>
+      <button onClick={toggle}>TOGGLE</button>
+      {isShow ? <Depth1 /> : null}
+    </Fragment>
+  );
+});
+
+const Root = <CallbackRoot />;
+
+//@ts-ignore
+window.root = Root;
+
+render(Root, document.getElementById('root'));

package/src/examples/insert.tsx

@@ -0,0 +1,36 @@
+// example.jsx
+import { h, Fragment, render, mount } from '@/index';
+
+const Root = mount(function (renew) {
+  let showFive = false;
+  let showSix = false;
+
+  const toggleFive = () => {
+    showFive = !showFive;
+    renew();
+  };
+
+  const toggleSix = () => {
+    showSix = !showSix;
+    renew();
+  };
+
+  return () => (
+    <Fragment>
+      <li>
+        4 <button onClick={toggleFive}>ShowFive</button>
+        <button onClick={toggleSix}>ShowSix</button>
+      </li>
+      {showFive ? <li>5</li> : null}
+      {showSix ? <li>6</li> : null}
+      <li>7</li>
+    </Fragment>
+  );
+});
+
+const R = <Root />;
+
+//@ts-ignore
+window.root = R;
+
+render(R, document.getElementById('list-root'), document.getElementById('8'));

package/src/examples/loop.tsx

@@ -0,0 +1,33 @@
+import { mount, render, Fragment, h } from '@/index';
+
+const Loop = mount(function (renew) {
+  let list: { key: number; value: string }[] = [
+    { key: 1, value: '일' },
+    { key: 2, value: '이' },
+    { key: 3, value: '삼' },
+    { key: 4, value: '사' },
+  ];
+  const handle = () => {
+    list = [
+      { key: 3, value: '삼삼' },
+      { key: 2, value: '이이' },
+    ];
+    renew();
+  };
+
+  return () => (
+    <Fragment>
+      <button onClick={handle}>handle</button>
+      {list.map(item => (
+        <div key={item.key}>{item.value}</div>
+      ))}
+    </Fragment>
+  );
+});
+
+const Root = <Loop />;
+
+//@ts-ignore
+window.root = Root;
+
+render(Root, document.getElementById('root'));