@24i/bigscreen-sdk 1.0.40-alpha.2687 → 1.0.40

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

@@ -1,141 +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);
+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

@@ -1,7 +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/',
-};
+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

@@ -1,121 +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);
-};
+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);
+};