@24i/bigscreen-sdk 0.9.9-alpha.2147

package/packages/jsx/src/manipulation/attachNodeBefore.ts

@@ -0,0 +1,44 @@
+import { isExtendedHTMLElement } from '../mount/guards';
+import { Reference } from '../types';
+import { unwrapReference } from '../utils';
+import { insertBeforeChildNode } from '../nodeUtils';
+
+export const attachNodeBefore = (
+    elementOrReference: HTMLElement | Reference<HTMLElement>,
+    elementOrReferenceBefore: HTMLElement | Reference<HTMLElement>,
+) => {
+    const element = unwrapReference<HTMLElement>(elementOrReference);
+    const elementBefore = unwrapReference<HTMLElement>(elementOrReferenceBefore);
+    const elementBeforeParent = elementBefore.parentElement;
+
+    if (element.parentElement) {
+        throw new Error(
+            'ElementToAttach can\'t be part of the DOM, you need to detach it first',
+        );
+    }
+    if (!elementBeforeParent) {
+        throw new Error('ElementBefore needs to have parent element');
+    }
+    if (!isExtendedHTMLElement(element)) {
+        throw new Error('Element is not part of the VirtualDOM');
+    }
+    if (!isExtendedHTMLElement(elementBefore)) {
+        throw new Error('ElementBefore is not part of the VirtualDOM');
+    }
+    if (!isExtendedHTMLElement(elementBeforeParent)) {
+        throw new Error('Parent of elementBefore is not part of the VirtualDOM');
+    }
+    if (!element.nxgvNode) {
+        throw new Error('Element is missing nxgvNode');
+    }
+    if (!elementBefore.nxgvNode) {
+        throw new Error('ElementBefore is missing nxgvNode');
+    }
+
+    elementBeforeParent.insertBefore(element, elementBefore);
+    insertBeforeChildNode(
+        elementBeforeParent.nxgvChildNodes!,
+        element.nxgvNode,
+        elementBefore.nxgvNode,
+    );
+};

package/packages/jsx/src/manipulation/clearNode.ts

@@ -0,0 +1,14 @@
+import { isExtendedHTMLElement } from '../mount/guards';
+import { Reference } from '../types';
+import { unwrapReference } from '../utils';
+
+export const clearNode = (elementOrReference: HTMLElement | Reference<HTMLElement>) => {
+    const element = unwrapReference<HTMLElement>(elementOrReference);
+    if (isExtendedHTMLElement(element)) {
+        element.unmountChildren?.();
+    }
+    while (element.firstChild) {
+        const firstChild = element.firstChild as HTMLElement;
+        element.removeChild(firstChild);
+    }
+};

package/packages/jsx/src/manipulation/detachNode.ts

@@ -0,0 +1,26 @@
+import { isExtendedHTMLElement } from '../mount/guards';
+import { Reference } from '../types';
+import { unwrapReference } from '../utils';
+import { removeChildNode } from '../nodeUtils';
+
+export const detachNode = (
+    elementOrReference: HTMLElement | Reference<HTMLElement>,
+) => {
+    const element = unwrapReference<HTMLElement>(elementOrReference);
+    const elementParent = element.parentElement;
+
+    if (!elementParent) return;
+
+    if (!isExtendedHTMLElement(element)) {
+        throw new Error('Element is not part of the VirtualDOM');
+    }
+    if (!isExtendedHTMLElement(elementParent)) {
+        throw new Error('Parent of element is not part of the VirtualDOM');
+    }
+    if (!element.nxgvNode) {
+        throw new Error('Element is missing nxgvNode');
+    }
+
+    elementParent.removeChild(element);
+    removeChildNode(elementParent.nxgvChildNodes!, element.nxgvNode);
+};

package/packages/jsx/src/manipulation/index.ts

@@ -0,0 +1,7 @@
+export { clearNode } from './clearNode';
+export { removeNode } from './removeNode';
+export { attachNode } from './attachNode';
+export { attachNodeBefore } from './attachNodeBefore';
+export { detachNode } from './detachNode';
+export { replaceNode } from './replaceNode';
+export { swapNodes } from './swapNodes';

package/packages/jsx/src/manipulation/removeNode.ts

@@ -0,0 +1,18 @@
+import { isExtendedHTMLElement } from '../mount/guards';
+import { Reference } from '../types';
+import { unwrapReference } from '../utils';
+
+export const removeNode = (elementOrReference: HTMLElement | Reference<HTMLElement>) => {
+    const element = unwrapReference<HTMLElement>(elementOrReference);
+    const elementParent = element.parentElement;
+    if (elementParent) {
+        if (isExtendedHTMLElement(element)
+            && isExtendedHTMLElement(elementParent)
+            && element.nxgvNode) {
+            elementParent.unmountChildNode?.(element.nxgvNode);
+        }
+        elementParent.removeChild(element);
+    } else if (isExtendedHTMLElement(element)) {
+        element.unmountNode?.();
+    }
+};

package/packages/jsx/src/manipulation/replaceNode.ts

@@ -0,0 +1,42 @@
+import { isExtendedHTMLElement } from '../mount/guards';
+import { Reference } from '../types';
+import { unwrapReference } from '../utils';
+import { replaceChildNode } from '../nodeUtils';
+
+export const replaceNode = (
+    elementOrReferenceNew: HTMLElement | Reference<HTMLElement>,
+    elementOrReferenceOld: HTMLElement | Reference<HTMLElement>,
+) => {
+    const elementNew = unwrapReference<HTMLElement>(elementOrReferenceNew);
+    const elementOld = unwrapReference<HTMLElement>(elementOrReferenceOld);
+    const elementOldParent = elementOld.parentElement;
+
+    if (elementNew.parentElement) {
+        throw new Error('ElementNew can\'t be part of the DOM, use swapNodes instead');
+    }
+    if (!elementOldParent) {
+        throw new Error('ElementOld needs to have parent element');
+    }
+    if (!isExtendedHTMLElement(elementNew)) {
+        throw new Error('ElementNew is not part of the VirtualDOM');
+    }
+    if (!isExtendedHTMLElement(elementOld)) {
+        throw new Error('ElementOld is not part of the VirtualDOM');
+    }
+    if (!isExtendedHTMLElement(elementOldParent)) {
+        throw new Error('Parent of ElementOld is not part of the VirtualDOM');
+    }
+    if (!elementNew.nxgvNode) {
+        throw new Error('ElementNew is missing nxgvNode');
+    }
+    if (!elementOld.nxgvNode) {
+        throw new Error('ElementOld is missing nxgvNode');
+    }
+
+    elementOldParent.replaceChild(elementNew, elementOld);
+    replaceChildNode(
+        elementOldParent.nxgvChildNodes!,
+        elementNew.nxgvNode,
+        elementOld.nxgvNode,
+    );
+};

package/packages/jsx/src/manipulation/swapNodes.ts

@@ -0,0 +1,53 @@
+import { isExtendedHTMLElement } from '../mount/guards';
+import { Reference } from '../types';
+import { unwrapReference } from '../utils';
+import { swapChildNodes } from '../nodeUtils';
+
+export const swapNodes = (
+    elementOrReferenceNew: HTMLElement | Reference<HTMLElement>,
+    elementOrReferenceOld: HTMLElement | Reference<HTMLElement>,
+) => {
+    const elementNew = unwrapReference<HTMLElement>(elementOrReferenceNew);
+    const elementOld = unwrapReference<HTMLElement>(elementOrReferenceOld);
+    const elementAfterOld = elementOld.nextElementSibling;
+    const elementNewParent = elementNew.parentElement;
+    const elementOldParent = elementOld.parentElement;
+
+    if (!elementNewParent) {
+        throw new Error('ElementNew needs to have parent element');
+    }
+    if (!elementOldParent) {
+        throw new Error('ElementOld needs to have parent element');
+    }
+    if (!isExtendedHTMLElement(elementNew)) {
+        throw new Error('ElementNew is not part of the VirtualDOM');
+    }
+    if (!isExtendedHTMLElement(elementOld)) {
+        throw new Error('ElementOld is not part of the VirtualDOM');
+    }
+    if (!isExtendedHTMLElement(elementNewParent)) {
+        throw new Error('Parent of ElementNew is not part of the VirtualDOM');
+    }
+    if (!isExtendedHTMLElement(elementOldParent)) {
+        throw new Error('Parent of ElementOld is not part of the VirtualDOM');
+    }
+    if (!elementNew.nxgvNode) {
+        throw new Error('ElementNew is missing nxgvNode');
+    }
+    if (!elementOld.nxgvNode) {
+        throw new Error('ElementOld is missing nxgvNode');
+    }
+
+    if (elementNew === elementAfterOld) {
+        elementOldParent.insertBefore(elementNew, elementOld);
+    } else {
+        elementNewParent.replaceChild(elementOld, elementNew);
+        elementOldParent.insertBefore(elementNew, elementAfterOld);
+    }
+    swapChildNodes(
+        elementNewParent.nxgvChildNodes!,
+        elementOldParent.nxgvChildNodes!,
+        elementNew.nxgvNode,
+        elementOld.nxgvNode,
+    );
+};

package/packages/jsx/src/mount/guards.ts

@@ -0,0 +1,26 @@
+import { BareNXGNode, TextNodeComponent, NXGNode, NXGVNode, ExtendedHTMLElement } from '../types';
+
+export const isReference = (propName: string) => propName === 'ref';
+export const isEventListener = (propName: string) => !!propName.match(/^on[A-Z]/);
+export const isDataAttribute = (propName: string) => !!propName.match(/^data-/);
+export const isStyleAttribute = (propName: string) => propName === 'style';
+export const isChildren = (propName: string) => propName === 'children';
+export const isClassName = (propName: string) => propName === 'className';
+export const isCaptureEvent = (eventName: string) => !!eventName.match(/Capture$/);
+export const isNamespacedProp = (propName: string) => propName.indexOf(':') !== -1;
+export const isXmlNs = (prefix: string) => prefix === 'xmlns';
+export const isNXGNode = (
+    node?: BareNXGNode | string | number | TextNodeComponent | null | boolean,
+): node is NXGNode => (
+    !!node
+    && typeof node === 'object'
+    && !(node as TextNodeComponent).isTextNode
+);
+export const isTextNode = (node?: BareNXGNode | NXGVNode): node is TextNodeComponent => (
+    !!node && (node as TextNodeComponent).isTextNode
+);
+export const isExtendedHTMLElement = (
+    element: HTMLElement | ExtendedHTMLElement | null | undefined,
+): element is ExtendedHTMLElement => (
+    !!element && (element as ExtendedHTMLElement).nxgvChildNodes instanceof Array
+);

package/packages/jsx/src/mount/handleLifecycle.ts

@@ -0,0 +1,71 @@
+import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+import { Listener, NXGVNode, ExtendedHTMLElement, MountType } from '../types';
+import { appendChildren, clearChildren, insertChildrenBefore } from './lifecycleHelpers';
+import { componentWillUnmount } from './lifecycle';
+import { removeChildNode } from '../nodeUtils';
+
+/*
+    NOTE:
+    Each element in DOM tree contains reference to its childNodes virtual representation -
+    nxgvChildNodes which is used during clearing element content for calling lifecycle methods.
+    NxgvChildNodes array instance should be always kept unchanged and only content should change.
+    This is for keeping whole vdom tree alive and reflecting changes during its lifetime.
+*/
+
+export const handleLifecycle = (
+    listeners: Listener[],
+    element: HTMLElement,
+    childNodes: NXGVNode[],
+    mountType: MountType = 'mount_inside',
+) => {
+    const extendedElement = element as ExtendedHTMLElement;
+
+    if (childNodes.length) {
+        if (mountType === 'mount_inside') {
+            appendChildren(extendedElement, childNodes);
+        } else if (mountType === 'mount_before') {
+            insertChildrenBefore(extendedElement, childNodes);
+        }
+    } else {
+        extendedElement.nxgvChildNodes = childNodes;
+    }
+
+    if (!extendedElement.unmountNode) {
+        extendedElement.unmountNode = () => {
+            const { nxgvNode } = extendedElement;
+            if (nxgvNode) {
+                componentWillUnmount([nxgvNode]);
+            }
+        };
+    }
+
+    if (!extendedElement.unmountChildren) {
+        extendedElement.unmountChildren = () => {
+            const { nxgvChildNodes } = extendedElement;
+            componentWillUnmount(nxgvChildNodes!);
+            clearChildren(nxgvChildNodes!);
+        };
+    }
+
+    if (!extendedElement.unmountChildNode) {
+        extendedElement.unmountChildNode = (node: NXGVNode) => {
+            const { nxgvChildNodes } = extendedElement;
+            componentWillUnmount([node]);
+            removeChildNode(nxgvChildNodes!, node);
+        };
+    }
+
+    if (!extendedElement.cleanUp) {
+        extendedElement.cleanUp = () => {
+            forEach(listeners, ({ event, listener, useCapture }) => {
+                element.removeEventListener(event, listener, useCapture);
+            });
+            extendedElement.nxgvNode = undefined;
+            extendedElement.nxgvChildNodes = undefined;
+            extendedElement.unmountNode = undefined;
+            extendedElement.unmountChildren = undefined;
+            extendedElement.unmountChildNode = undefined;
+            extendedElement.cleanUp = undefined;
+        };
+    }
+};

package/packages/jsx/src/mount/index.ts

@@ -0,0 +1 @@
+export { mount, mountBefore } from './mount';

package/packages/jsx/src/mount/lifecycle.ts

@@ -0,0 +1,38 @@
+import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+import { safeComponentDidMount, safeComponentWillUnmount } from '../utils';
+import { NXGVNode } from '../types';
+import { isExtendedHTMLElement, isNXGNode } from './guards';
+
+export const componentDidMount = (vdom: NXGVNode[], currentNode?: NXGVNode) => {
+    if (!vdom) return;
+    forEach(vdom, (node) => {
+        if (node instanceof Array) componentDidMount(node, currentNode);
+        if (isNXGNode(node)) {
+            const { element, node: classNode, childNodes } = node;
+            if (isExtendedHTMLElement(element)) {
+                element.nxgvNode = currentNode || node;
+            }
+            componentDidMount(childNodes, classNode ? node : undefined);
+            if (classNode) {
+                safeComponentDidMount(classNode);
+            }
+        }
+    });
+};
+
+export const componentWillUnmount = (vdom: NXGVNode[]) => {
+    if (!vdom) return;
+    forEach(vdom, (node) => {
+        if (node instanceof Array) componentWillUnmount(node);
+        if (isNXGNode(node)) {
+            const { element, node: classNode, childNodes } = node;
+            if (classNode) {
+                safeComponentWillUnmount(classNode);
+            }
+            if (isExtendedHTMLElement(element)) {
+                element.cleanUp?.();
+            }
+            componentWillUnmount(childNodes);
+        }
+    });
+};

package/packages/jsx/src/mount/lifecycleHelpers.ts

@@ -0,0 +1,29 @@
+import { ExtendedHTMLElement, NXGVNode } from '../types';
+import { isExtendedHTMLElement } from './guards';
+
+export const appendChildren = (element: ExtendedHTMLElement, childNodes: NXGVNode[]) => {
+    const currentNodes = element.nxgvChildNodes;
+    if (currentNodes instanceof Array) {
+        currentNodes.push(...childNodes);
+    } else {
+        element.nxgvChildNodes = childNodes;
+    }
+};
+
+export const insertChildrenBefore = (element: ExtendedHTMLElement, childNodes: NXGVNode[]) => {
+    const parentElement = element.parentElement!;
+    if (isExtendedHTMLElement(parentElement)) {
+        const parentNodes = parentElement.nxgvChildNodes!;
+        const { nxgvNode } = element;
+        for (let i = 0; i < parentNodes.length; i++) {
+            if (parentNodes[i] === nxgvNode) {
+                parentNodes.splice(i, 0, ...childNodes);
+                return;
+            }
+        }
+    }
+};
+
+export const clearChildren = (childNodes: NXGVNode[]) => {
+    childNodes.splice(0, childNodes.length);
+};

package/packages/jsx/src/mount/mount.ts

@@ -0,0 +1,141 @@
+import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+import {
+    NXGVNode,
+    MountingFunction,
+    MountingPoint,
+    BareNXGNode,
+    TextNodeComponent,
+    NXGNode,
+    Mountable,
+} from '../types';
+import { getSafeArrayOf } from '../utils';
+import { componentDidMount } from './lifecycle';
+import {
+    isNXGNode,
+    isTextNode,
+} from './guards';
+import { handlePropsAndLifecycle } from './props';
+import { handleLifecycle } from './handleLifecycle';
+import { NAMESPACES } from './namespaces';
+
+const elemNamespace : { [name: string]: string } = {
+    svg: NAMESPACES.svg,
+};
+
+const processBareNXGNode = (
+    node: BareNXGNode | string | number | TextNodeComponent | null | boolean,
+) => {
+    if (isNXGNode(node)) {
+        const processed = node.process();
+        node.childNodes = getSafeArrayOf<NXGVNode>(processed.childNodes);
+        if (processed.node) {
+            node.node = processed.node;
+            if (node.props.ref) node.props.ref.current = node.node;
+        }
+    }
+    return node as NXGVNode;
+};
+
+const mountInsideParent: MountingFunction = (mountingPoint, elementToMount) => {
+    mountingPoint.appendChild(elementToMount);
+    return 'mount_inside';
+};
+
+const mountBeforeElement: MountingFunction = (mountingPoint, elementToMount) => {
+    mountingPoint.parentElement!.insertBefore(elementToMount, mountingPoint);
+    return 'mount_before';
+};
+
+/* eslint-disable @typescript-eslint/no-use-before-define, no-use-before-define */
+const render = (
+    vdom: BareNXGNode[] | NXGVNode[],
+    mountingPoint: MountingPoint,
+    namespace: string | null,
+) => {
+    forEach(vdom as NXGVNode[], (bareNode: BareNXGNode | NXGVNode) => {
+        renderNode(bareNode, mountingPoint, namespace);
+    });
+};
+/* eslint-enable @typescript-eslint/no-use-before-define, no-use-before-define */
+
+const renderStringOrNumber = (
+    node: string | number,
+    mountingPoint: MountingPoint,
+) => {
+    const element = document.createTextNode(node.toString());
+    mountInsideParent(mountingPoint, element);
+};
+
+const renderTextNode = (
+    node: TextNodeComponent,
+    mountingPoint: MountingPoint,
+) => {
+    const element = document.createTextNode(node.text.toString());
+    node.ref.current = element;
+    mountInsideParent(mountingPoint, element);
+};
+
+const renderElement = (
+    node: NXGNode,
+    mountingPoint: MountingPoint,
+    namespace: string | null,
+) => {
+    const nodeType = node.type as string;
+    const ns = node.props.xmlns || elemNamespace[nodeType] || namespace;
+    const element = ns && ns !== NAMESPACES.html
+        ? document.createElementNS(ns, nodeType)
+        : document.createElement(nodeType);
+
+    handlePropsAndLifecycle(element, node.props, node.childNodes);
+    render(node.childNodes, element, ns);
+    node.element = element;
+    mountInsideParent(mountingPoint, element);
+};
+
+const renderNode = (
+    bareNode: BareNXGNode | NXGVNode,
+    mountingPoint: MountingPoint,
+    namespace: string | null,
+) => {
+    if (bareNode instanceof Array) {
+        render(bareNode, mountingPoint, namespace);
+        return;
+    }
+    const node = processBareNXGNode(bareNode);
+    if (typeof node === 'string' || typeof node === 'number') {
+        renderStringOrNumber(node, mountingPoint);
+    } else if (isTextNode(node)) {
+        renderTextNode(node, mountingPoint);
+    } else if (typeof node !== 'boolean' && node) {
+        if (typeof node.type !== 'string') {
+            render(node.childNodes, mountingPoint, namespace);
+        } else {
+            renderElement(node, mountingPoint, namespace);
+        }
+    }
+};
+
+const mountWithMountingFunction = (mountingFunction: MountingFunction) => (
+    jsx: Mountable,
+    element: HTMLElement,
+) => {
+    /**
+     * NOTE:
+     * Vdom should be always array to represent childNodes chaining, because
+     * vdom here is in fact only childNodes array of its parent element
+     */
+    const vdom = getSafeArrayOf<BareNXGNode>(
+        (jsx as unknown as BareNXGNode | BareNXGNode[]),
+    );
+    const namespace = element.namespaceURI;
+    const fragment = document.createDocumentFragment();
+    render(vdom, fragment, namespace);
+    const mountType = mountingFunction(element, fragment);
+    // for keeping parent element and its vdom updated about latest mount changes
+    handleLifecycle([], element, vdom as NXGVNode[], mountType);
+    componentDidMount(vdom as NXGVNode[]);
+};
+
+export const mount = mountWithMountingFunction(mountInsideParent);
+
+export const mountBefore = mountWithMountingFunction(mountBeforeElement);

package/packages/jsx/src/mount/namespaces.ts

@@ -0,0 +1,7 @@
+export const NAMESPACES: { [name: string]: string } = {
+    svg: 'http://www.w3.org/2000/svg',
+    html: 'http://www.w3.org/1999/xhtml',
+    xml: 'http://www.w3.org/XML/1998/namespace',
+    xlink: 'http://www.w3.org/1999/xlink',
+    xmlns: 'http://www.w3.org/2000/xmlns/',
+};

package/packages/jsx/src/mount/props.ts

@@ -0,0 +1,121 @@
+import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+import { NXGVNode, Props, Reference, Listener } from '../types';
+import {
+    isReference,
+    isCaptureEvent,
+    isClassName,
+    isDataAttribute,
+    isEventListener,
+    isStyleAttribute,
+    isNamespacedProp,
+    isXmlNs,
+    isChildren,
+} from './guards';
+import { NAMESPACES } from './namespaces';
+import { handleLifecycle } from './handleLifecycle';
+
+type Dataset = {
+    key: string,
+    value: any,
+};
+
+type PropsEntry = {
+    propName: string,
+    propValue: any,
+};
+
+const normalizeEventName = (eventName: string) => eventName
+    .replace(/^on/, '')
+    .replace(/Capture$/, '')
+    .toLowerCase();
+
+const normalizeDataName = (dataName: string) => dataName.replace(/^data-/, '');
+
+const datasetKeyToCamelCase = (propName: string) => propName
+    .replace(
+        /(?:^[A-Z]|\b\w)/g, (firstWordChar: string, index: number) => (
+            index === 0 ? firstWordChar.toLowerCase() : firstWordChar.toUpperCase()
+        ),
+    ).replace(/-/g, '');
+
+const organizeProps = (props: Props) => {
+    const listeners: Listener[] = [];
+    const dataset: Dataset[] = [];
+    const otherProps: PropsEntry[] = [];
+    forEach(Object.entries(props), ([propName, propValue]) => {
+        if (isEventListener(propName)) {
+            listeners.push({
+                event: normalizeEventName(propName),
+                listener: propValue,
+                useCapture: isCaptureEvent(propName),
+            });
+        } else if (isDataAttribute(propName)) {
+            dataset.push({ key: normalizeDataName(propName), value: propValue });
+        } else if (!isChildren(propName)) {
+            otherProps.push({ propName, propValue });
+        }
+    });
+    return { listeners, dataset, otherProps };
+};
+
+const setReference = (propValue: Reference<HTMLElement> | undefined, element: HTMLElement) => {
+    if (propValue) {
+        propValue.current = element;
+    }
+};
+
+const setStyles = (styles: { [key: string]: string }, element: HTMLElement) => {
+    Object.assign(element.style, styles);
+};
+
+const setClasses = (className: string, element: HTMLElement) => {
+    const trimmedClassName = className?.trim();
+    if (!trimmedClassName) return;
+    element.className = trimmedClassName;
+};
+
+const setNamespacedProp = (propName: string, propValue: any, element: HTMLElement) => {
+    const [prefix, ...restPropName] = propName.split(':');
+    const namespace = NAMESPACES[prefix];
+    if (isXmlNs(prefix) && restPropName.length && namespace) {
+        element.setAttributeNS(namespace, propName.toLowerCase(), propValue);
+    }
+};
+
+const setProp = (propName: string, propValue: any, element: HTMLElement) => {
+    element.setAttribute(propName.toLowerCase(), propValue);
+};
+
+const addProps = (props: PropsEntry[], element: HTMLElement) => {
+    forEach(props, ({ propName, propValue }) => {
+        if (isReference(propName)) setReference(propValue, element);
+        else if (isStyleAttribute(propName)) setStyles(propValue, element);
+        else if (isClassName(propName)) setClasses(propValue, element);
+        else if (isNamespacedProp(propName)) setNamespacedProp(propName, propValue, element);
+        else setProp(propName, propValue, element);
+    });
+};
+
+const addDataset = (dataset: Dataset[], element: HTMLElement) => {
+    forEach(dataset, ({ key, value }) => {
+        element.dataset[datasetKeyToCamelCase(key)] = value;
+    });
+};
+
+const addListeners = (listeners: Listener[], element: HTMLElement) => {
+    forEach(listeners, ({ event, listener, useCapture }) => {
+        element.addEventListener(event, listener, useCapture);
+    });
+};
+
+export const handlePropsAndLifecycle = (
+    element: HTMLElement,
+    props: Props,
+    childNodes: NXGVNode[],
+) => {
+    const { listeners, dataset, otherProps } = organizeProps(props);
+    addProps(otherProps, element);
+    addDataset(dataset, element);
+    addListeners(listeners, element);
+    handleLifecycle(listeners, element, childNodes);
+};