lithent 0.1.0

package/src/render.ts

@@ -0,0 +1,409 @@
+/**
+ * Rerender시 실제 dom에 반영해줘야 하는 상태
+ *
+ * 1. (ADD). 가상돔 비교시 오리지날이 없으면 새로 추가되는 dom으로 판단한다.
+ * 2. (REPLACE). 오리지날이 있고 같은 엘리먼트타입이 아닌 경우 해당 위치의 태그 자체를 교체해준다.
+ * 3. (UPDATE). 오리지날이 있고 같은 타입이면 dom의 속성만 변경해 주며, 텍스트 노드일 경우는 텍스트를 교체해준다.
+ * 4. (DELETE). 오리지날이 있고 새로운 엘리먼트 타입은 null타입일 경우 dom을 삭제한다.
+ * 5. (SORTED-REPLACE). loop의 경우 REPLACE라도 키값에 의해 순서가 변경될 수 있으므로 새로운 dom을 단순히 기존 위치에 교체하지 않고 새로 삼입하여 정렬한다.
+ * 6. (SORTED-UPDATE). loop의 경우 UPDATE라도 키값에 의해 순서가 변경될수 있으므로 재 삽입하여 정렬한다.
+ * 7. (NONE). text타입의 경우 text가 같다면 변경이 필요 없으므로 방치한다. (Todo. 다른 타입의 경우 처리필요)
+ */
+
+import { WDom, Props } from '@/types';
+import {
+  checkStyleData,
+  checkRefData,
+  checkNormalAttribute,
+  checkExisty,
+  checkOptionElement,
+} from '@/utils/predicator';
+import { runMountedQueueFromWDom } from '@/hook/mountCallback';
+import { runUpdatedQueueFromWDom } from '@/hook/useUpdate';
+import { getParent } from '@/utils';
+
+export const render = (
+  wDom: WDom,
+  wrapElement: HTMLElement | null,
+  afterElement?: HTMLElement | null
+) => {
+  if (!wrapElement) {
+    throw Error('WrapELement is null');
+  }
+  wDom.isRoot = true;
+  wDom.wrapElement = wrapElement;
+
+  const Dom = wDomToDom(wDom, true);
+
+  if (afterElement) {
+    wrapElement.insertBefore(Dom, afterElement);
+  } else {
+    wrapElement.appendChild(Dom);
+  }
+};
+
+export const wDomUpdate = (newWDomTree: WDom) => {
+  const { needRerender } = newWDomTree;
+
+  if (needRerender && needRerender !== 'N') {
+    const exec = {
+      A: typeAdd,
+      D: typeDelete,
+      R: typeReplace,
+      U: typeUpdate,
+      SR: typeSortedReplace,
+      SU: typeSortedUpdate,
+    }[needRerender];
+    exec(newWDomTree);
+  }
+};
+
+export const recursiveRemoveEvent = (originalWDom: WDom) => {
+  if (originalWDom.props && originalWDom.el) {
+    removeEvent(originalWDom.props, originalWDom.el);
+  }
+
+  (originalWDom.children || []).forEach((childItem: WDom) => {
+    recursiveRemoveEvent(childItem);
+  });
+};
+
+const typeDelete = (newWDom: WDom) => {
+  const parent = findRealParentElement(newWDom);
+
+  if (newWDom.oldProps && newWDom.el) {
+    removeEvent(newWDom.oldProps, newWDom.el);
+  }
+
+  if (parent && newWDom.el) {
+    if (newWDom.el?.nodeType === 1) {
+      parent.removeChild(newWDom.el);
+    } else if (newWDom.el?.nodeType === 11) {
+      findChildWithRemoveElement(newWDom, parent as HTMLElement);
+    }
+    delete newWDom.el;
+  }
+};
+
+const findChildWithRemoveElement = (newWDom: WDom, parent: HTMLElement) => {
+  (newWDom?.children || []).forEach(item => {
+    if (item.el?.nodeType === 1) {
+      parent.removeChild(item?.el);
+    } else if (item.el?.nodeType === 11) {
+      findChildWithRemoveElement(item, parent);
+    }
+  });
+};
+
+const typeSortedReplace = (newWDom: WDom) => {
+  typeDelete(newWDom);
+  typeAdd(newWDom);
+};
+
+const typeSortedUpdate = (newWDom: WDom) => {
+  typeDelete(newWDom);
+  typeAdd(newWDom, newWDom.el);
+};
+
+const typeAdd = (
+  newWDom: WDom,
+  newElement?: HTMLElement | DocumentFragment | Text
+) => {
+  if (!newElement) {
+    newElement = wDomToDom(newWDom, true);
+  }
+
+  const parentWDom = getParent(newWDom);
+  if (parentWDom.type) {
+    const parentEl = findRealParentElement(parentWDom);
+    const nextEl = startFindNextBrotherElement(newWDom, parentWDom);
+
+    if (newElement && parentEl) {
+      if (nextEl) {
+        parentEl.insertBefore(newElement, nextEl);
+      } else {
+        parentEl.appendChild(newElement);
+      }
+    }
+  }
+
+  runMountedQueueFromWDom(newWDom);
+};
+
+const startFindNextBrotherElement = (
+  wDom: WDom,
+  parentWDom: WDom
+): HTMLElement | DocumentFragment | Text | undefined => {
+  const brothers = parentWDom.children || [];
+  const index = brothers.indexOf(wDom);
+  const nextIndex = index + 1;
+  const candidiateBrothers = brothers.slice(nextIndex);
+
+  const finedNextEl = findChildFragmentNextElement(candidiateBrothers);
+  const parentType = parentWDom.type || '';
+
+  if (finedNextEl) {
+    return finedNextEl;
+  }
+
+  if (!parentWDom.isRoot && ['fragment', 'loop'].includes(parentType)) {
+    return startFindNextBrotherElement(parentWDom, getParent(parentWDom));
+  }
+
+  return undefined;
+};
+
+const findChildFragmentNextElement = (
+  candidiateBrothers: WDom[]
+): HTMLElement | DocumentFragment | Text | undefined =>
+  candidiateBrothers.reduce(
+    (
+      targetEl: HTMLElement | DocumentFragment | Text | undefined,
+      bItem: WDom
+    ) => {
+      const type = bItem.type;
+      const el = bItem.el;
+      const isFragment = type && ['fragment', 'loop'].includes(type);
+
+      if (targetEl) {
+        return targetEl;
+      } else if (isFragment) {
+        return findChildFragmentNextElement(bItem.children || []);
+      } else if (el && el.nodeType !== 11) {
+        return el;
+      }
+
+      return targetEl;
+    },
+    undefined
+  );
+
+const typeReplace = (newWDom: WDom) => {
+  const parentWDom = getParent(newWDom);
+  const orignalElement = newWDom.el;
+
+  if (parentWDom.type && orignalElement) {
+    const parentElement = parentWDom.el;
+    const newElement = wDomToDom(newWDom, true);
+
+    if (newWDom.oldProps) {
+      removeEvent(newWDom.oldProps, orignalElement);
+    }
+
+    if (parentElement) {
+      parentElement.replaceChild(newElement, orignalElement);
+    }
+  }
+
+  runMountedQueueFromWDom(newWDom);
+};
+
+const removeEvent = (
+  oldProps: Props,
+  element?: HTMLElement | DocumentFragment | Text
+) => {
+  if (element) {
+    Object.entries(oldProps || {}).forEach(
+      ([dataKey, dataValue]: [string, unknown]) => {
+        if (dataKey.match(/^on/)) {
+          element.removeEventListener(dataKey, dataValue as (e: Event) => void);
+        }
+      }
+    );
+  }
+};
+
+const typeUpdate = (newWDom: WDom) => {
+  const element = newWDom.el;
+
+  if (newWDom.type === 'text') {
+    updateText(newWDom);
+
+    return;
+  }
+
+  if (element) {
+    const { oldProps, props } = newWDom;
+
+    updateProps({ oldProps, props, element });
+
+    delete newWDom.oldProps;
+
+    if (newWDom.tag === 'input') {
+      (element as HTMLInputElement).value = String(newWDom?.props?.value || '');
+    }
+  }
+
+  (newWDom.children || []).forEach((childItem: WDom) => wDomUpdate(childItem));
+
+  runUpdatedQueueFromWDom(newWDom);
+};
+
+const updateText = (newWDom: WDom) => {
+  const element = newWDom.el;
+
+  if (element) {
+    element.nodeValue = String(newWDom.text);
+  }
+};
+
+const updateProps = ({
+  oldProps,
+  props,
+  element,
+}: {
+  oldProps?: Props;
+  props?: Props;
+  element?: HTMLElement | DocumentFragment | Text;
+}) => {
+  const originalProps = { ...oldProps };
+
+  Object.entries(props || {}).forEach(
+    ([dataKey, dataValue]: [string, unknown]) => {
+      if (dataKey === 'key') {
+        // Do nothing
+      } else if (checkStyleData(dataKey, dataValue)) {
+        const style = dataValue;
+        const oldStyle = checkStyleData(dataKey, originalProps.style) || {};
+
+        updateStyle({ style, oldStyle, element });
+      } else if (checkRefData(dataKey, dataValue)) {
+        dataValue.value = element;
+      } else if (dataKey.match(/^on/)) {
+        updateEvent({
+          element: element as HTMLElement,
+          eventKey: dataKey,
+          newEventHandler: dataValue as (e: Event) => void,
+          oldEventHandler: originalProps[dataKey] as (e: Event) => void,
+        });
+      } else if (checkNormalAttribute(dataValue)) {
+        (element as HTMLElement).setAttribute(dataKey, String(dataValue));
+      } else if (checkOptionElement(element) && dataKey === 'selected') {
+        (element as HTMLOptionElement).selected = !!dataValue;
+      }
+
+      delete originalProps[dataKey];
+    }
+  );
+
+  Object.keys(originalProps).forEach(dataKey =>
+    (element as HTMLElement).removeAttribute(dataKey)
+  );
+};
+
+const wDomToDom = (wDom: WDom, init: boolean) => {
+  let element;
+  const { type, tag, text, props, children = [] } = wDom;
+  const isVirtualType = type === 'fragment' || type === 'loop';
+
+  if (isVirtualType) {
+    element = new DocumentFragment();
+  } else if (type === 'element' && tag) {
+    element = document.createElement(tag);
+  } else if (type === 'text' && checkExisty(text)) {
+    element = document.createTextNode(String(text));
+  }
+
+  wDomChildrenToDom(children, element, init);
+  updateProps({ props, element });
+
+  wDom.el = element;
+
+  runMountedQueueFromWDom(wDom);
+
+  return element || document.createElement('div');
+};
+
+const wDomChildrenToDom = (
+  children: WDom[],
+  parentElement?: HTMLElement | DocumentFragment | Text,
+  init?: boolean
+) => {
+  if (init) {
+    const elementChildren = children.reduce(
+      (acc: DocumentFragment, childItem: WDom) => {
+        if (childItem.type) {
+          acc.appendChild(wDomToDom(childItem, init));
+        }
+
+        return acc;
+      },
+      new DocumentFragment()
+    );
+
+    if (parentElement && elementChildren.hasChildNodes()) {
+      parentElement.appendChild(elementChildren);
+    }
+  }
+};
+
+const updateEvent = ({
+  element,
+  eventKey,
+  newEventHandler,
+  oldEventHandler,
+}: {
+  element: HTMLElement;
+  eventKey: string;
+  newEventHandler: (e: Event) => void;
+  oldEventHandler: (e: Event) => void;
+}) => {
+  const eventName = eventKey.replace(/^on(.*)/, (_match, p1) =>
+    p1.toLowerCase()
+  );
+
+  if (oldEventHandler !== newEventHandler) {
+    if (oldEventHandler) {
+      element.removeEventListener(eventName, oldEventHandler);
+    }
+
+    if (newEventHandler) {
+      element.addEventListener(eventName, newEventHandler);
+    }
+  }
+};
+
+const updateStyle = ({
+  style,
+  oldStyle,
+  element,
+}: {
+  style: Record<string, string>;
+  oldStyle: Record<string, string>;
+  element?: HTMLElement | DocumentFragment | Text;
+}) => {
+  const originalStyle = { ...oldStyle };
+  const elementStyle = (element as HTMLElement)?.style;
+
+  if (elementStyle) {
+    Object.entries(style).forEach(([styleKey, dataValue]) => {
+      elementStyle.setProperty(styleKey, dataValue);
+      delete originalStyle[styleKey];
+    });
+
+    Object.entries(originalStyle).forEach(([styleKey]) =>
+      elementStyle.removeProperty(styleKey)
+    );
+  }
+};
+
+const findRealParentElement = (
+  vDom: WDom
+): HTMLElement | DocumentFragment | Text | undefined => {
+  const isVirtualType =
+    vDom.type === 'fragment' ||
+    vDom.type === 'loop' ||
+    (!vDom.type && vDom?.el?.nodeType === 11);
+
+  if (vDom.isRoot && isVirtualType) {
+    return vDom.wrapElement;
+  }
+
+  if (!isVirtualType) {
+    return vDom.el?.parentNode as HTMLElement;
+  }
+
+  const parentVDom = getParent(vDom);
+
+  return findRealParentElement(parentVDom);
+};

package/src/types/index.ts

@@ -0,0 +1,107 @@
+export type UseDataStoreValue = { [key: string | symbol]: unknown };
+
+export type Props = { [key: string]: unknown };
+
+export type TagFunction = (
+  prop: Props,
+  children: WDom[]
+) => (renew: Renew, prop: Props, children: WDom[]) => () => WDom;
+
+export type Renew = () => boolean;
+export type Component<T> = (
+  renew: Renew,
+  props: T,
+  childen: WDom[]
+) => () => WDom;
+
+export type TagFunctionResolver = {
+  tagName: string;
+  constructor: Function;
+  props: Props;
+  children: WDom[];
+  resolve: (componentKey?: Props) => WDom;
+};
+
+export type FragmentFunction = (props: Props, children: WDom[]) => WDom;
+
+export type NodePointer = { value: WDom | undefined };
+
+export type NodeChildKey = { value: Props[] };
+
+export type MiddleStateWDom =
+  | WDom
+  | number
+  | string
+  | false
+  | null
+  | MiddleStateWDomChildren;
+
+export type MiddleStateWDomChildren = MiddleStateWDom[];
+
+// component, fragment, element, loop, text, none
+export type WDomType = 'c' | 'f' | 'e' | 'l' | 't' | 'et';
+
+export interface WDom {
+  type: string | null;
+  isRoot?: boolean;
+  tag?: string;
+  props?: Props;
+  oldProps?: Props;
+  tagName?: string;
+  constructor?: Function;
+  children?: WDom[];
+  getParent?: () => WDom | undefined;
+  nodeChildKey?: NodeChildKey;
+  text?: string | number;
+  componentKey?: Props;
+  reRender?: () => WDom;
+  componentProps?: Props;
+  componentChildren?: WDom[];
+  wrapElement?: HTMLElement;
+  el?: HTMLElement | DocumentFragment | Text;
+  needRerender?: RenderType;
+}
+
+export type RenderType =
+  | 'A' // ADD
+  | 'D' // DELETE
+  | 'R' // REPLACE
+  | 'U' // UPDATE
+  | 'SR' // S_REPLACE
+  | 'SU' // S_UPDATE
+  | 'N'; // NONE
+
+export type ComponentSubKey =
+  | 'up'
+  | 'upR'
+  | 'upS'
+  | 'upD'
+  | 'upCB'
+  | 'mts'
+  | 'umts';
+
+export type ComponentRef = WeakMap<
+  Props,
+  {
+    up: () => void;
+    upR: (() => void)[];
+    upS: { value: number };
+    upD: unknown[][];
+    upCB: (() => void)[];
+    mts: (() => void)[];
+    umts: (() => void)[];
+  }
+>;
+
+export type Param<Updater, Member, Props> = {
+  updater: Updater;
+  props: Props;
+  member: Member;
+  children: WDom[];
+};
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    [name: string]: any;
+  }
+}

package/src/utils/index.ts

@@ -0,0 +1,52 @@
+import { WDom, TagFunctionResolver, Props } from '@/types';
+
+export const getParent = (vDom: WDom) => {
+  const parentVDom = vDom.getParent && vDom.getParent();
+
+  if (!parentVDom) {
+    throw Error('Not found parent vDom');
+  }
+
+  return parentVDom;
+};
+
+export const reRender = (vDom: WDom, infoVdom: TagFunctionResolver) => {
+  const { componentProps: props, componentChildren: children } = vDom;
+  const { props: infoProps, children: infoChidren } = infoVdom;
+
+  if (props) {
+    updateProps(props, infoProps);
+  }
+
+  if (children) {
+    updateChildren(children, infoChidren);
+  }
+
+  const newVDom = vDom.reRender && vDom.reRender();
+
+  if (!newVDom) {
+    throw Error('Unable reRender');
+  }
+
+  return newVDom;
+};
+
+const updateProps = (props: Props, infoProps: Props) => {
+  if (props && infoProps !== props) {
+    Object.keys(props).forEach(key => delete props[key]);
+
+    Object.entries(infoProps || {}).forEach(
+      ([key, value]) => (props[key] = value)
+    );
+  }
+};
+
+const updateChildren = (children: WDom[], infoChidren: WDom[]) => {
+  if (children && infoChidren !== children) {
+    children.splice(0, children.length);
+
+    if (infoChidren) {
+      infoChidren.forEach(childrenItem => children.push(childrenItem));
+    }
+  }
+};

package/src/utils/predicator.ts

@@ -0,0 +1,119 @@
+import { Fragment } from '@/wDom';
+import {
+  WDom,
+  TagFunction,
+  TagFunctionResolver,
+  FragmentFunction,
+  WDomType,
+} from '@/types';
+
+type DiffParam = {
+  originalWDom?: WDom;
+  newWDom: WDom | TagFunction | TagFunctionResolver;
+};
+
+type WDomParam =
+  | string
+  | WDom
+  | TagFunction
+  | TagFunctionResolver
+  | FragmentFunction;
+
+/**
+ * Predicator
+ */
+export const checkCustemComponentFunction = (
+  target: WDomParam
+): target is TagFunction | TagFunctionResolver =>
+  (typeof target === 'function' && !checkFragmentFunction(target)) ||
+  (typeof target === 'object' && 'resolve' in target);
+
+export const checkFragmentFunction = (
+  target: unknown
+): target is FragmentFunction =>
+  typeof target === 'function' && target === Fragment;
+
+export const checkPlainWDomType = (wDom: WDomParam): wDom is WDom =>
+  typeof wDom === 'object' && !('resolve' in wDom);
+
+export const checkPlainType = (wDom: WDomParam, typeName: string) =>
+  checkPlainWDomType(wDom) && wDom.type === typeName;
+
+export const checkEmptyElement = (wDom: WDomParam) =>
+  checkPlainWDomType(wDom) && !wDom.type;
+
+export const checkSameCustomComponent = ({
+  originalWDom,
+  newWDom,
+}: DiffParam) => newWDom.constructor === originalWDom?.constructor;
+
+export const checkSameFragment = ({ originalWDom, newWDom }: DiffParam) =>
+  checkPlainWDomType(newWDom) &&
+  originalWDom?.type === 'fragment' &&
+  originalWDom?.children?.length === newWDom?.children?.length;
+
+export const checkSameTagElement = ({ originalWDom, newWDom }: DiffParam) =>
+  checkPlainWDomType(newWDom) &&
+  originalWDom?.type === 'element' &&
+  originalWDom?.tag === newWDom.tag;
+
+export const checkNormalTypeElement = ({ originalWDom, newWDom }: DiffParam) =>
+  checkPlainWDomType(newWDom) && originalWDom?.type === newWDom.type;
+
+export const checkExisty = (value: unknown) =>
+  value !== null && value !== undefined;
+
+export const checkFunction = (target: unknown): target is Function =>
+  typeof target === 'function';
+
+export const checkStyleData = (
+  dataKey: string,
+  dataValue: unknown
+): dataValue is Record<string, string> =>
+  dataKey === 'style' && typeof dataValue === 'object';
+
+export const checkRefData = (
+  dataKey: string,
+  dataValue: unknown
+): dataValue is { value: HTMLElement | DocumentFragment | Text | undefined } =>
+  dataKey === 'ref' && typeof dataValue === 'object';
+
+export const checkOptionElement = (element: any): element is HTMLElement => {
+  return element.nodeType === 1 && element.tagName === 'OPTION';
+};
+
+export const checkNormalAttribute = (
+  dataValue: unknown
+): dataValue is number | string =>
+  typeof dataValue === 'number' || typeof dataValue === 'string';
+
+export const getWDomType = (
+  wDom: WDom | TagFunction | TagFunctionResolver
+): WDomType | undefined => {
+  let result: WDomType | undefined;
+
+  if (checkCustemComponentFunction(wDom)) {
+    result = 'c';
+  } else if (checkPlainType(wDom, 'fragment')) {
+    result = 'f';
+  } else if (checkPlainType(wDom, 'element')) {
+    result = 'e';
+  } else if (checkPlainType(wDom, 'loop')) {
+    result = 'l';
+  } else if (checkPlainType(wDom, 'text')) {
+    result = 't';
+  } else if (checkEmptyElement(wDom)) {
+    result = 'et';
+  }
+
+  return result;
+};
+
+export const checkSameWDomWithOriginal = {
+  c: checkSameCustomComponent,
+  l: checkNormalTypeElement,
+  t: checkNormalTypeElement,
+  e: checkSameTagElement,
+  f: checkSameFragment,
+  et: checkNormalTypeElement,
+};