lithent 1.0.0 → 1.0.2

package/examples/src/sharedStore.tsx

@@ -1,6 +1,6 @@
 // example.jsx
 import { h, render, mount } from 'lithent';
-import { store } from 'lithent-helper';
+import { store } from 'lithent/helper';
 
 const assignShardStore = store<{ text: string; count: number }>({
   text: 'sharedText',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lithent",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "An extensible virtual DOM library for lightweight use in a variety of environments.",
   "packageManager": "pnpm@7.6.0",
   "main": "./dist/lithent.umd.js",
@@ -17,7 +17,8 @@
     "build": "pnpm build:core && pnpm build:helper && pnpm build:examples && pnpm build:docs",
     "build:p": "pnpm build:core && pnpm -r build",
     "dev": "pnpm watch:core & pnpm watch:helper & pnpm dev:examples",
-    "test": "vitest",
+    "test": "vitest run --reporter verbose",
+    "test:dev": "vitest",
     "coverage": "vitest run --coverage",
     "clean": "pnpm clean:dist && pnpm clean:module",
     "clean:dist": "pnpm -r exec rm -rf dist && rm -rf dist",

package/src/diff.ts

@@ -1,5 +1,5 @@
 import { WDom, TagFunctionResolver, RenderType } from '@/types';
-import { checkCustemComponentFunction } from '@/utils/predicator';
+import { checkCustemComponentFunction, getKey } from '@/utils/predicator';
 import { getParent, reRender } from '@/utils';
 import { recursiveRemoveEvent } from '@/render';
 import {
@@ -27,38 +27,39 @@ const remakeNewWDom = (
   originalWDom?: WDom
 ) => {
   const remakeWDom = generalize(newWDom, isSameType, originalWDom);
-
-  remakeWDom.children = remakeChildrenForDiff(
-    remakeWDom,
-    isSameType,
-    originalWDom
-  );
-
-  const needRerender = addReRenderTypeProperty(
+  const param: [newWDom: WDom, isSameType: boolean, originalWDom?: WDom] = [
     remakeWDom,
     isSameType,
-    originalWDom
-  );
+    originalWDom,
+  ];
+  const needRerender = addReRenderTypeProperty(...param);
 
+  remakeWDom.children = remakeChildrenForDiff(...param);
   remakeWDom.needRerender = needRerender;
 
+  inheritPropForRender(remakeWDom, originalWDom, needRerender);
+
+  return remakeWDom;
+};
+
+const inheritPropForRender = (
+  remakeWDom: WDom,
+  originalWDom?: WDom,
+  needRerender?: RenderType
+) => {
   if (needRerender !== 'A' && originalWDom) {
     remakeWDom.el = originalWDom.el;
   }
 
-  if (
-    needRerender &&
-    ['D', 'R', 'SR'].includes(needRerender) &&
-    originalWDom?.componentKey
-  ) {
-    runUnmountQueueFromWDom(originalWDom);
-    recursiveRemoveEvent(originalWDom);
-    remakeWDom.oldChildren = originalWDom.children;
+  if (needRerender && ['D', 'R', 'SR'].includes(needRerender)) {
+    if (originalWDom?.compKey) {
+      runUnmountQueueFromWDom(originalWDom);
+      recursiveRemoveEvent(originalWDom);
+    }
+    remakeWDom.oldChildren = originalWDom?.children;
   }
 
   remakeWDom.oldProps = originalWDom?.props;
-
-  return remakeWDom;
 };
 
 const addReRenderTypeProperty = (
@@ -185,6 +186,3 @@ const findSameKeyOriginalItem = (item: WDom, originalChildren: WDom[]) =>
   originalChildren.find(
     orignalChildItem => getKey(orignalChildItem) === getKey(item)
   );
-
-const getKey = (target: WDom) =>
-  target?.componentProps?.key ?? target?.props?.key;

package/src/hook/mountCallback.ts

@@ -1,6 +1,6 @@
 import { WDom } from '@/types';
 import {
-  componentKeyRef,
+  compKeyRef,
   componentRef,
   getComponentKey,
 } from '@/utils/universalRef';
@@ -13,7 +13,7 @@ export const execMountedQueue = () => {
   mountedQueue = [];
 };
 export const addMountedQueue = (wDom: WDom) => {
-  if (wDom.componentKey) {
+  if (wDom.compKey) {
     mountedQueue.push(wDom);
   }
 };
@@ -21,14 +21,14 @@ export const mountCallback = (effectAction: () => void) =>
   componentRef.get(getComponentKey())!.mts.push(effectAction);
 
 export const runMountedQueueFromWDom = (newWDom: WDom) => {
-  const { componentKey } = newWDom;
+  const { compKey } = newWDom;
 
-  if (componentKey) {
-    const component = componentRef.get(componentKey);
+  if (compKey) {
+    const component = componentRef.get(compKey);
     const queue = component?.mts;
     const sequence = component?.upS;
 
-    componentKeyRef.value = componentKey;
+    compKeyRef.value = compKey;
 
     if (sequence) {
       sequence.value = 0;

package/src/hook/unmount.ts

@@ -6,17 +6,17 @@ export const unmount = (effectAction: () => void) => {
 };
 
 export const runUnmountQueueFromWDom = (newWDom: WDom) => {
-  const { componentKey } = newWDom;
+  const { compKey } = newWDom;
 
-  if (componentKey) {
-    removeItem(componentKey);
+  if (compKey) {
+    removeItem(compKey);
   }
   recursiveRunUnmount(newWDom);
 };
 
 const recursiveRunUnmount = (wDom: WDom) => {
   (wDom.children || []).forEach(item => {
-    const childComKey = item.componentKey;
+    const childComKey = item.compKey;
     if (childComKey) {
       runUnmountQueueFromWDom(item);
     } else {
@@ -25,11 +25,11 @@ const recursiveRunUnmount = (wDom: WDom) => {
   });
 };
 
-const removeItem = (componentKey: Props) => {
-  const subInfo = componentRef.get(componentKey);
+const removeItem = (compKey: Props) => {
+  const subInfo = componentRef.get(compKey);
   if (subInfo) {
     subInfo!.umts.forEach(effect => effect());
     subInfo!.umts = [];
-    componentRef.delete(componentKey);
+    componentRef.delete(compKey);
   }
 };

package/src/hook/useUpdate.ts

@@ -1,6 +1,6 @@
 import { WDom } from '@/types';
 import {
-  componentKeyRef,
+  compKeyRef,
   componentRef,
   getComponentKey,
 } from '@/utils/universalRef';
@@ -25,20 +25,20 @@ export const useUpdated = (
 };
 
 export const runUpdatedQueueFromWDom = (newWDom: WDom) => {
-  const { componentKey } = newWDom;
+  const { compKey } = newWDom;
 
-  if (componentKey) {
-    const component = componentRef.get(componentKey);
+  if (compKey) {
+    const component = componentRef.get(compKey);
     const queue = component?.upCB;
     const sequence = component?.upS;
 
-    componentKeyRef.value = componentKey;
+    compKeyRef.value = compKey;
 
     if (sequence) {
       sequence.value = 0;
     }
 
-    if (newWDom.constructor && queue) {
+    if (newWDom.ctor && queue) {
       component.upCB = [];
       queue.forEach((effect: Function) => effect());
     }

package/src/render.ts

@@ -14,7 +14,7 @@ import { componentRef, xmlnsRef } from '@/utils/universalRef';
 import { runUnmountQueueFromWDom } from '@/hook/unmount';
 import { execMountedQueue, addMountedQueue } from '@/hook/mountCallback';
 import { runUpdatedQueueFromWDom } from '@/hook/useUpdate';
-import { getParent, getEventName, getAttrKey } from '@/utils';
+import { getParent, getEventName, getAttrKey, entries, keys } from '@/utils';
 
 export const render = (
   wDom: WDom,
@@ -37,7 +37,7 @@ export const render = (
   execMountedQueue();
 
   return () => {
-    const component = componentRef.get(wDom.componentProps || {})?.vd.value;
+    const component = componentRef.get(wDom.compProps || {})?.vd.value;
     if (component) {
       runUnmountQueueFromWDom(component);
       recursiveRemoveEvent(component);
@@ -218,16 +218,14 @@ const removeEvent = (
   oldProps: Props,
   element: HTMLElement | DocumentFragment | Text
 ) => {
-  Object.entries(oldProps || {}).forEach(
-    ([dataKey, dataValue]: [string, unknown]) => {
-      if (dataKey.match(/^on/)) {
-        element.removeEventListener(
-          getEventName(dataKey),
-          dataValue as (e: Event) => void
-        );
-      }
+  entries(oldProps || {}).forEach(([dataKey, dataValue]: [string, unknown]) => {
+    if (dataKey.match(/^on/)) {
+      element.removeEventListener(
+        getEventName(dataKey),
+        dataValue as (e: Event) => void
+      );
     }
-  );
+  });
 };
 
 const typeUpdate = (newWDom: WDom) => {
@@ -271,55 +269,51 @@ const updateProps = (
 ) => {
   const originalProps = { ...oldProps };
 
-  Object.entries(props || {}).forEach(
-    ([dataKey, dataValue]: [string, unknown]) => {
-      if (dataKey === 'key') {
-        // Do nothing
-      } else if (dataKey === 'innerHTML' && typeof dataValue === 'string') {
-        (element as HTMLElement).innerHTML = dataValue;
-      } else if (checkStyleData(dataKey, dataValue)) {
-        updateStyle(
-          dataValue,
-          checkStyleData(dataKey, originalProps.style)
-            ? originalProps.style
-            : {},
-          element
+  entries(props || {}).forEach(([dataKey, dataValue]: [string, unknown]) => {
+    if (dataKey === 'key') {
+      // Do nothing
+    } else if (dataKey === 'innerHTML' && typeof dataValue === 'string') {
+      (element as HTMLElement).innerHTML = dataValue;
+    } else if (checkStyleData(dataKey, dataValue)) {
+      updateStyle(
+        dataValue,
+        checkStyleData(dataKey, originalProps.style) ? originalProps.style : {},
+        element
+      );
+    } else if (checkRefData(dataKey, dataValue)) {
+      dataValue.value = element;
+    } else if (dataKey.match(/^on/)) {
+      updateEvent(
+        element as HTMLElement,
+        dataKey,
+        dataValue as (e: Event) => void,
+        originalProps[dataKey] as (e: Event) => void
+      );
+    } else if (checkCheckableElement(element) && dataKey === 'checked') {
+      (element as HTMLInputElement).checked = !!dataValue;
+    } else if (checkTextareaElement(element) && dataKey === 'value') {
+      (element as HTMLInputElement).value = dataValue as string;
+    } else if (checkOptionElement(element) && dataKey === 'selected') {
+      (element as HTMLOptionElement).selected = !!dataValue;
+    } else if (checkNormalAttribute(dataValue)) {
+      if (xmlnsRef.value && dataKey !== 'xmlns') {
+        (element as HTMLElement).setAttributeNS(
+          null,
+          getAttrKey(dataKey),
+          String(dataValue)
         );
-      } else if (checkRefData(dataKey, dataValue)) {
-        dataValue.value = element;
-      } else if (dataKey.match(/^on/)) {
-        updateEvent(
-          element as HTMLElement,
-          dataKey,
-          dataValue as (e: Event) => void,
-          originalProps[dataKey] as (e: Event) => void
+      } else {
+        (element as HTMLElement).setAttribute(
+          getAttrKey(dataKey),
+          String(dataValue)
         );
-      } else if (checkCheckableElement(element) && dataKey === 'checked') {
-        (element as HTMLInputElement).checked = !!dataValue;
-      } else if (checkTextareaElement(element) && dataKey === 'value') {
-        (element as HTMLInputElement).value = dataValue as string;
-      } else if (checkOptionElement(element) && dataKey === 'selected') {
-        (element as HTMLOptionElement).selected = !!dataValue;
-      } else if (checkNormalAttribute(dataValue)) {
-        if (xmlnsRef.value && dataKey !== 'xmlns') {
-          (element as HTMLElement).setAttributeNS(
-            null,
-            getAttrKey(dataKey),
-            String(dataValue)
-          );
-        } else {
-          (element as HTMLElement).setAttribute(
-            getAttrKey(dataKey),
-            String(dataValue)
-          );
-        }
       }
-
-      delete originalProps[dataKey];
     }
-  );
 
-  Object.keys(originalProps).forEach(dataKey =>
+    delete originalProps[dataKey];
+  });
+
+  keys(originalProps).forEach(dataKey =>
     (element as HTMLElement).removeAttribute(dataKey)
   );
 };
@@ -407,12 +401,12 @@ const updateStyle = (
   const elementStyle = (element as HTMLElement)?.style;
 
   if (elementStyle) {
-    Object.entries(style).forEach(([styleKey, dataValue]) => {
+    entries(style).forEach(([styleKey, dataValue]) => {
       (elementStyle as any)[styleKey] = dataValue;
       delete originalStyle[styleKey];
     });
 
-    Object.entries(originalStyle).forEach(
+    entries(originalStyle).forEach(
       ([styleKey]) => ((elementStyle as any)[styleKey] = '')
     );
   }

package/src/tests/fragment.tsx

@@ -0,0 +1,38 @@
+import { mount, render, Fragment, h } from '@/index';
+
+const Loop = mount(function (renew) {
+  let pType: boolean = true;
+  const handle = () => {
+    pType = false;
+    renew();
+  };
+
+  return () => (
+    <div>
+      <button onClick={handle}>handle</button>
+      <div>start</div>
+      {pType ? (
+        <Fragment>
+          <div>1</div>
+          <div>2</div>
+          <div>3</div>
+          <div>4</div>
+        </Fragment>
+      ) : (
+        <Fragment>
+          <div>two</div>
+          <div>three</div>
+          <div>four</div>
+        </Fragment>
+      )}
+      <div>end</div>
+    </div>
+  );
+});
+
+const Root = <Loop />;
+
+//@ts-ignore
+window.root = Root;
+
+render(Root, document.getElementById('root'));

package/src/tests/loopWithoutKey.tsx

@@ -0,0 +1,55 @@
+import { mount, render, Fragment, ref, h, nextTick } from '@/index';
+const testChangeRef = ref<null | (() => void)>(null);
+
+const Loop = mount(function (renew) {
+  let list: { value: string }[] = [
+    { value: '일' },
+    { value: '이' },
+    { value: '삼' },
+    { value: '사' },
+  ];
+  const handle = () => {
+    list = [{ value: '사사' }, { value: '삼삼' }, { value: '이이' }];
+    renew();
+  };
+
+  testChangeRef.value = () => {
+    handle();
+  };
+
+  return () => (
+    <Fragment>
+      <button onClick={handle}>handle</button>
+      <div>first</div>
+      {list.map(item => (
+        <div>{item.value}</div>
+      ))}
+      <div>end</div>
+    </Fragment>
+  );
+});
+
+const testWrap =
+  document.getElementById('root') || document.createElement('div');
+
+render(<Loop />, testWrap);
+
+if (import.meta.vitest) {
+  const { it, expect } = import.meta.vitest;
+  it('It should be reflected in the DOM exactly in the order of the loop initialization.', () => {
+    expect(testWrap.outerHTML).toBe(
+      '<div><button>handle</button><div>first</div><div>일</div><div>이</div><div>삼</div><div>사</div><div>end</div></div>'
+    );
+  });
+
+  it('Even if there are no keys in the loop, "replace" should be reflected correctly.', () => {
+    if (testChangeRef.value) {
+      testChangeRef.value();
+    }
+    nextTick().then(() => {
+      expect(testWrap.outerHTML).toBe(
+        '<div><button>handle</button><div>first</div><div>사사</div><div>삼삼</div><div>이이</div><div>end</div></div>'
+      );
+    });
+  });
+}

package/src/tests/{example17.tsx → test17.tsx}

@@ -42,7 +42,7 @@ render(<Root />, testWrap);
 
 if (import.meta.vitest) {
   const { it, expect } = import.meta.vitest;
-  it('Is renew working properly?', () => {
+  it('Lithent draws the svg correctly.', () => {
     expect(testWrap.outerHTML).toBe(
       '<div><svg id="toggleSidebarMobileClose" class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg></div>'
     );

package/src/types/index.ts

@@ -16,10 +16,10 @@ export type Component<T> = (
 
 export type TagFunctionResolver = {
   tagName: string;
-  constructor: Function;
+  ctor: Function;
   props: Props;
   children: WDom[];
-  resolve: (componentKey?: Props) => WDom;
+  resolve: (compKey?: Props) => WDom;
 };
 
 export type FragmentFunction = (props: Props, children: WDom[]) => WDom;
@@ -46,15 +46,15 @@ export interface WDom {
   props?: Props;
   oldProps?: Props;
   tagName?: string;
-  constructor?: Function;
+  ctor?: Function;
   children?: WDom[];
   oldChildren?: WDom[];
   getParent?: () => WDom | undefined;
   text?: string | number;
-  componentKey?: Props;
+  compKey?: Props;
   reRender?: () => WDom;
-  componentProps?: Props;
-  componentChildren?: WDom[];
+  compProps?: Props;
+  compChild?: WDom[];
   wrapElement?: HTMLElement;
   afterElement?: HTMLElement;
   el?: HTMLElement | DocumentFragment | Text;

package/src/utils/index.ts

@@ -7,7 +7,7 @@ export const getParent = (vDom: WDom) => {
 };
 
 export const reRender = (vDom: WDom, infoVdom: TagFunctionResolver) => {
-  const { componentProps: props, componentChildren: children } = vDom;
+  const { compProps: props, compChild: children } = vDom;
   const { props: infoProps, children: infoChidren } = infoVdom;
 
   if (props) {
@@ -29,13 +29,15 @@ export const getEventName = (eventKey: string) =>
 export const getAttrKey = (keyName: string) =>
   keyName === 'className' ? 'class' : keyName;
 
+export const entries = Object.entries;
+export const keys = Object.keys;
+export const assign = Object.assign;
+
 const updateProps = (props: Props, infoProps: Props) => {
   if (props && infoProps !== props) {
-    Object.keys(props).forEach(key => delete props[key]);
+    keys(props).forEach(key => delete props[key]);
 
-    Object.entries(infoProps || {}).forEach(
-      ([key, value]) => (props[key] = value)
-    );
+    entries(infoProps || {}).forEach(([key, value]) => (props[key] = value));
   }
 };
 

package/src/utils/predicator.ts

@@ -27,7 +27,10 @@ const checkPlainType = (wDom: WDomParam, typeName: string) =>
 const checkSameCustomComponent = (
   newWDom: WDom | TagFunction | TagFunctionResolver,
   originalWDom?: WDom
-) => newWDom.constructor === originalWDom?.constructor;
+) =>
+  'ctor' in newWDom
+    ? newWDom.ctor === originalWDom?.ctor
+    : newWDom === originalWDom?.ctor;
 
 const checkSameFragment = (
   newWDom: WDom | TagFunction | TagFunctionResolver,
@@ -53,7 +56,12 @@ const checkNormalTypeElement = (
   checkPlainWDomType(newWDom) &&
   originalWDom?.type === newWDom.type &&
   (originalWDom?.children?.length === newWDom?.children?.length ||
-    newWDom.type === 'loop');
+    (newWDom.type === 'loop' &&
+      checkExisty(getKey((newWDom.children || [])[0])) &&
+      checkExisty(getKey((originalWDom.children || [])[0]))));
+
+export const getKey = (target: WDom) =>
+  target?.compProps?.key ?? target?.props?.key;
 
 export const checkVirtualType = (type: string | null) =>
   type && ['fragment', 'loop'].includes(type);

package/src/utils/universalRef.ts

@@ -1,23 +1,23 @@
 import { ComponentRef, ComponentSubKey, Props, WDom } from '@/types';
 
 type RedrawQueueList = {
-  componentKey: Props;
+  compKey: Props;
   exec: () => void;
 }[];
 
-let redrawQueue: { componentKey: Props; exec: () => void }[] = [];
+let redrawQueue: { compKey: Props; exec: () => void }[] = [];
 let redrawQueueTimeout: boolean = false;
 
 /**
  * Common
  */
 export const xmlnsRef: { value: string } = { value: '' };
-export const componentKeyRef: { value: Props } = { value: {} };
+export const compKeyRef: { value: Props } = { value: {} };
 export const needDiffRef: { value: boolean } = { value: false };
 export const componentRef: ComponentRef = new WeakMap();
 
-export const componentRender = (componentKey: Props) => () => {
-  const up = componentRef.get(componentKey)?.up;
+export const componentRender = (compKey: Props) => () => {
+  const up = componentRef.get(compKey)?.up;
   let result = false;
   if (up) {
     up();
@@ -27,8 +27,8 @@ export const componentRender = (componentKey: Props) => () => {
   return result;
 };
 
-const setComponetRef = (componentKey: Props) => {
-  componentRef.set(componentKey, {
+const setComponetRef = (compKey: Props) => {
+  componentRef.set(compKey, {
     vd: { value: null },
     up: () => {},
     upR: [],
@@ -40,17 +40,15 @@ const setComponetRef = (componentKey: Props) => {
   });
 };
 
-export const getComponentKey = () => componentKeyRef.value;
+export const getComponentKey = () => compKeyRef.value;
 
-export const getComponentSubInfo = (
-  componentKey: Props,
-  subKey: ComponentSubKey
-) => componentRef.get(componentKey)![subKey];
+export const getComponentSubInfo = (compKey: Props, subKey: ComponentSubKey) =>
+  componentRef.get(compKey)![subKey];
 
-export const setRedrawAction = (componentKey: Props, exec: () => void) => {
-  componentRef.get(componentKey)!.up = () => {
+export const setRedrawAction = (compKey: Props, exec: () => void) => {
+  componentRef.get(compKey)!.up = () => {
     redrawQueue.push({
-      componentKey,
+      compKey,
       exec,
     });
 
@@ -61,17 +59,17 @@ export const setRedrawAction = (componentKey: Props, exec: () => void) => {
   };
 };
 
-export const initUpdateHookState = (componentKey: Props) =>
-  (componentKeyRef.value = componentKey);
+export const initUpdateHookState = (compKey: Props) =>
+  (compKeyRef.value = compKey);
 
-export const initMountHookState = (componentKey: Props) => {
-  componentKeyRef.value = componentKey;
-  setComponetRef(componentKey);
+export const initMountHookState = (compKey: Props) => {
+  compKeyRef.value = compKey;
+  setComponetRef(compKey);
 };
 
 const recursiveGetChildKeys = (wDom: WDom, result: Props[]) => {
   (wDom.children || []).forEach(item => {
-    const childComKey = item.componentKey;
+    const childComKey = item.compKey;
     if (childComKey) {
       result.push(childComKey);
     }
@@ -84,7 +82,7 @@ const execRedrawQueue = () => {
   let childItemList: Props[] = [];
 
   redrawQueue.forEach(item => {
-    const childVd = componentRef.get(item.componentKey)?.vd?.value;
+    const childVd = componentRef.get(item.compKey)?.vd?.value;
     if (childVd) {
       recursiveGetChildKeys(childVd, childItemList);
     }
@@ -92,16 +90,13 @@ const execRedrawQueue = () => {
 
   const addedKey: Props[] = [];
   const result = redrawQueue.reduce((acc, item) => {
-    const { componentKey } = item;
+    const { compKey } = item;
 
-    if (
-      childItemList.includes(componentKey) ||
-      addedKey.includes(componentKey)
-    ) {
+    if (childItemList.includes(compKey) || addedKey.includes(compKey)) {
       return acc;
     }
 
-    addedKey.push(componentKey);
+    addedKey.push(compKey);
     acc.push(item);
 
     return acc;