lithent 0.1.0

package/src/examples/nested.tsx

@@ -0,0 +1,44 @@
+import { h, Fragment, mount, render } from '@/index';
+
+const Nested = mount(function (renew) {
+  let choiceNode = 7;
+
+  const handle = () => {
+    const randomValue = Math.floor(Math.random() * 10) + 1;
+    choiceNode = randomValue;
+    renew();
+  };
+
+  const componentMaker = () => {
+    return (
+      <Fragment>
+        <button onClick={handle}>handle</button>
+        {choiceNode === 1 && <div>1</div>}
+        {choiceNode === 2 && <div>2</div>}
+        <Fragment>
+          {choiceNode === 3 && <div>3</div>}
+          {choiceNode === 4 && <div>4</div>}
+          <Fragment>
+            {choiceNode === 5 && <div>5</div>}
+            {choiceNode === 6 && <div>6</div>}
+            <div>6.5</div>
+            {choiceNode === 7 && <div>7</div>}
+          </Fragment>
+          {choiceNode === 8 && <div>8</div>}
+          {choiceNode === 9 && <div>9</div>}
+        </Fragment>
+        {choiceNode === 10 && <div>10</div>}
+        <div>11</div>
+      </Fragment>
+    );
+  };
+
+  return componentMaker;
+});
+
+const Root = <Nested />;
+
+//@ts-ignore
+window.root = Root;
+
+render(Root, document.getElementById('root'));

package/src/examples/renew.tsx

@@ -0,0 +1,29 @@
+// example.jsx
+import { h, Fragment, render, Renew, mount } from '@/index';
+
+const Renew = mount((renew, _props) => {
+  let count1 = 0;
+  let count2 = 0;
+  let count3 = 0;
+  let count4 = 0;
+
+  const change = () => {
+    count1 += 1;
+    count2 += 2;
+    count3 += 3;
+    count4 -= 1;
+    renew();
+  };
+
+  return () => (
+    <Fragment>
+      <li>count1: {count1}</li>
+      <li>count2: {count2}</li>
+      <li>count3: {count3}</li>
+      <li>count4: {count4}</li>
+      <button onClick={change}>change</button>
+    </Fragment>
+  );
+});
+
+render(<Renew />, document.getElementById('root'));

package/src/examples/selectbox.tsx

@@ -0,0 +1,42 @@
+// example.jsx
+import { h, render, Fragment, mount } from '@/index';
+
+const Selectbox = mount(renew => {
+  let value = '3';
+
+  const changeChange = (event: InputEvent) => {
+    value = (event.target as HTMLInputElement).value;
+    renew();
+  };
+
+  return () => (
+    <Fragment>
+      <div>{value}</div>
+      <div>
+        <select onChange={changeChange}>
+          <option value="1" selected={value === '1'}>
+            1
+          </option>
+          <option value="2" selected={value === '2'}>
+            2
+          </option>
+          <option value="3" selected={value === '3'}>
+            3
+          </option>
+          <option value="4" selected={value === '4'}>
+            4
+          </option>
+          <option value="5" selected={value === '5'}>
+            5
+          </option>
+        </select>
+      </div>
+    </Fragment>
+  );
+});
+const Root = <Selectbox />;
+
+//@ts-ignore
+window.root = Root;
+
+render(Root, document.getElementById('root'));

package/src/examples/textarea.tsx

@@ -0,0 +1,24 @@
+// example.jsx
+import { h, render, mount } from '@/index';
+
+const TextArea = mount(renew => {
+  let text = '123';
+
+  const changeInput = (event: InputEvent) => {
+    text = (event?.target as HTMLInputElement).value;
+    renew();
+  };
+
+  return () => (
+    <div>
+      <textarea onInput={changeInput}>{text}</textarea>
+      <div>{text}</div>
+    </div>
+  );
+});
+const Root = <TextArea />;
+
+//@ts-ignore
+window.root = Root;
+
+render(Root, document.getElementById('root'));

package/src/hook/mountCallback.ts

@@ -0,0 +1,41 @@
+import { WDom } from '@/types';
+import {
+  componentKeyRef,
+  componentRef,
+  getComponentKey,
+} from '@/utils/universalRef';
+
+import { unmount } from '@/hook/unmount';
+
+export const mountCallback = (effectAction: () => void) => {
+  const mts = componentRef.get(getComponentKey())!.mts;
+
+  mts.push(effectAction);
+};
+
+export const runMountedQueueFromWDom = (newWDom: WDom) => {
+  const { componentKey } = newWDom;
+
+  if (componentKey) {
+    const component = componentRef.get(componentKey);
+    const queue = component?.mts;
+    const sequence = component?.upS;
+
+    componentKeyRef.value = componentKey;
+
+    if (sequence) {
+      sequence.value = 0;
+    }
+
+    if (queue) {
+      component.mts = [];
+
+      queue.forEach((effect: Function) => {
+        const callback = effect();
+        if (callback) {
+          unmount(callback);
+        }
+      });
+    }
+  }
+};

package/src/hook/ref.ts

@@ -0,0 +1 @@
+export const ref = <T>(initValue: T) => ({ value: initValue });

package/src/hook/unmount.ts

@@ -0,0 +1,26 @@
+import { WDom, Props } from '@/types';
+import { componentRef, getComponentKey } from '@/utils/universalRef';
+
+export const unmount = (effectAction: () => void) => {
+  componentRef.get(getComponentKey())!.umts.push(effectAction);
+};
+
+export const runUnmountQueueFromWDom = (newWDom: WDom) => {
+  const { componentKey, nodeChildKey } = newWDom;
+  const childKeys = nodeChildKey?.value;
+
+  if (componentKey) {
+    removeItem(componentKey);
+  }
+
+  if (childKeys) {
+    childKeys.forEach(childKey => removeItem(childKey));
+  }
+};
+
+const removeItem = (componentKey: Props) => {
+  const queue = componentRef.get(componentKey)!.umts;
+  componentRef.get(componentKey)!.umts = [];
+  queue.forEach(effect => effect());
+  componentRef.delete(componentKey);
+};

package/src/hook/updateCallback.ts

@@ -0,0 +1,29 @@
+import {
+  componentRef,
+  redrawQueue,
+  redrawQueueTimeout,
+  getComponentKey,
+} from '@/utils/universalRef';
+
+import { useUpdated } from '@/hook/useUpdate';
+
+export const updateCallback = (
+  effectAction: () => (() => void) | void,
+  dependencies: () => any[] = () => []
+) => {
+  const updateReqs = componentRef.get(getComponentKey())!.upR;
+
+  updateReqs.push(() => useUpdated(effectAction, dependencies));
+  useUpdated(effectAction, dependencies);
+};
+
+export const runUpdateCallback = () => {
+  const updateReqs = componentRef.get(getComponentKey())?.upR;
+
+  if (updateReqs?.length) {
+    updateReqs.forEach(callback => callback());
+  }
+
+  redrawQueue.value = [];
+  redrawQueueTimeout.value = null;
+};

package/src/hook/useUpdate.ts

@@ -0,0 +1,51 @@
+import { WDom } from '@/types';
+import {
+  componentKeyRef,
+  componentRef,
+  getComponentKey,
+} from '@/utils/universalRef';
+
+export const useUpdated = (
+  effectAction: () => (() => void) | void,
+  dependencies: () => any[] = () => []
+) => {
+  const component = componentRef.get(getComponentKey());
+  const { upD, upS } = component!;
+  const def = upD[upS.value];
+
+  if (def && checkNeedPushQueue(def, dependencies())) {
+    const callback = effectAction();
+    if (callback) {
+      component!.upCB.push(callback);
+    }
+  }
+
+  upD[upS.value] = dependencies();
+  upS.value += 1;
+};
+
+export const runUpdatedQueueFromWDom = (newWDom: WDom) => {
+  const { componentKey } = newWDom;
+
+  if (componentKey) {
+    const component = componentRef.get(componentKey);
+    const queue = component?.upCB;
+    const sequence = component?.upS;
+
+    componentKeyRef.value = componentKey;
+
+    if (sequence) {
+      sequence.value = 0;
+    }
+
+    if (newWDom.constructor && queue) {
+      component.upCB = [];
+      queue.forEach((effect: Function) => effect());
+    }
+  }
+};
+
+const checkNeedPushQueue = (originalDefs: unknown[], newDefs: unknown[]) =>
+  !originalDefs.length && !originalDefs.length
+    ? true
+    : originalDefs.some((def, index) => def !== newDefs[index]);

package/src/index.ts

@@ -0,0 +1,50 @@
+import { h, Fragment, mount } from '@/wDom';
+import { render } from '@/render';
+import { mountCallback } from '@/hook/mountCallback';
+import { updateCallback } from '@/hook/updateCallback';
+import { ref } from '@/hook/ref';
+import { checkFunction } from '@/utils/predicator';
+import {
+  componentRef,
+  componentKeyRef,
+  dataStoreStore,
+  dataStoreRenderQueue,
+  getComponentKey,
+  componentRender,
+} from '@/utils/universalRef';
+
+const ext = {
+  componentRef,
+  componentKeyRef,
+  dataStoreStore,
+  dataStoreRenderQueue,
+  checkFunction,
+  getComponentKey,
+  componentRender,
+};
+
+export type {
+  WDom,
+  TagFunction,
+  TagFunctionResolver,
+  FragmentFunction,
+  ComponentSubKey,
+  ComponentRef,
+  Props,
+  Renew,
+  MiddleStateWDomChildren,
+  MiddleStateWDom,
+  UseDataStoreValue,
+  NodePointer,
+  Param,
+} from '@/types';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [name: string]: any;
+    }
+  }
+}
+
+export { h, Fragment, render, mount, mountCallback, updateCallback, ref, ext };