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

package/packages/jsx/src/textNode.ts

@@ -1,9 +1,9 @@
-import { Reference, TextNodeComponent, FunctionComponent } from './types';
-
-export const TextNode: FunctionComponent<{}> = () => null;
-
-export const textNode = (text: string, ref: Reference<Text>): TextNodeComponent => ({
-    text,
-    isTextNode: true,
-    ref,
-});
+import { Reference, TextNodeComponent, FunctionComponent } from './types';
+
+export const TextNode: FunctionComponent<{}> = () => null;
+
+export const textNode = (text: string, ref: Reference<Text>): TextNodeComponent => ({
+    text,
+    isTextNode: true,
+    ref,
+});

package/packages/jsx/src/types.ts

@@ -1,128 +1,128 @@
-import '@24i/bigscreen-sdk/types-bigscreen-jsx';
-
-type ChildrenProp = {
-    children?: Children,
-};
-
-type RefProp = {
-    ref?: Reference,
-};
-
-type WithChildrenIfMissing<P> = (
-    Omit<P, 'children'> extends P // read: Is P without a 'children' key?
-        ? P & ChildrenProp
-        : P
-);
-
-// @ts-ignore - sometimes JSX cannot be found as namespace
-type Child = JSX.Element | string | number | boolean | null | undefined | Child[];
-export type Children = Child | Child[];
-
-// @ts-ignore - sometimes JSX cannot be found as namespace
-export type RenderResult = JSX.Element | null;
-
-export type BareNXGNode<P extends Props = Props> = {
-    type: string | FunctionComponent<P> | ClassComponent<P>,
-    props: Props,
-    process: () => ProcessedNXGNode<P>,
-};
-
-export type ProcessedNXGNode<P extends Props = Props> = {
-    childNodes: NXGVNode<P>[],
-    node?: ClassComponentInterface,
-    element?: HTMLElement,
-};
-
-export type NXGNode<P extends Props = Props> = BareNXGNode<P> & ProcessedNXGNode<P>;
-
-export type NXGVNode<P extends Props = Props> = (
-    NXGNode<P> | null | string | number | boolean | TextNodeComponent
-);
-
-export interface ClassComponentInterface {
-    isMounted: boolean,
-    componentDidMount: () => void,
-    componentWillUnmount: () => void,
-    render: () => RenderResult,
-}
-
-export type ClassComponent<P extends Props> = {
-    isClass: true,
-    defaultProps?: Partial<P>,
-    new (props: P & ChildrenProp & RefProp): ClassComponentInterface,
-};
-
-export interface FunctionComponent<P extends Props> {
-    (props: WithChildrenIfMissing<P> & RefProp): RenderResult,
-    defaultProps?: Partial<P>,
-}
-
-export interface FunctionComponentWithRef<P extends Props> {
-    (props: WithChildrenIfMissing<P> & RefProp, ref: Reference): RenderResult,
-    defaultProps?: Partial<P>,
-}
-
-export type ForwardedRefComponent<P extends Props> = FunctionComponent<P> & {
-    isForwardedRef: true,
-};
-
-export type TextNodeComponent = {
-    text: string,
-    isTextNode: true,
-    ref: Reference<Text>,
-};
-
-export type AnyComponent<P extends Props> = (
-    ClassComponent<P> | FunctionComponent<P> | ForwardedRefComponent<P> | string
-);
-
-export type VNodeChild<P extends Props> = (
-    string | number | null | false | undefined | NXGVNode<P>[]
-);
-
-export type Reference<T = any> = {
-    current: T | null,
-};
-
-export type Props = Record<string, any>;
-
-export type MountingPoint = HTMLElement | DocumentFragment;
-
-export type MountType = 'mount_inside' | 'mount_before';
-
-export type MountingFunction = (
-    mountingPoint: MountingPoint,
-    elementToMount: HTMLElement | Text | DocumentFragment,
-) => MountType;
-
-export type ClassComponentMounter = {
-    classNode: ClassComponentInterface,
-    isBoundToElement: boolean,
-} | null;
-
-export type Mountable = JSX.Element[] | JSX.Element | string | number;
-
-export type Listener = {
-    event: string,
-    listener: EventListener,
-    useCapture: boolean,
-};
-
-export type ExtendedHTMLElement<P extends Props = Props> = HTMLElement & {
-    cleanUp?: () => void,
-    unmountNode?: () => void,
-    unmountChildren?: () => void,
-    unmountChildNode?: (node: NXGVNode<P>) => void,
-    nxgvNode?: NXGVNode<P>;
-    nxgvChildNodes?: NXGVNode<P>[];
-};
-
-export type DeclareProps<
-    P extends Props,
-    DP extends Props,
-    PKeys = keyof P,
-    AllDPKeys = keyof DP,
-    InvalidDPKeys = Exclude<AllDPKeys, PKeys>,
-    ValidDPKeys = Exclude<AllDPKeys, InvalidDPKeys>,
-// @ts-ignore - ValidKeys are all DP keys that are also P keys - it's taken care of
-> = P & Required<Pick<P, ValidDPKeys>>;
+import '@24i/bigscreen-sdk/types-bigscreen-jsx';
+
+type ChildrenProp = {
+    children?: Children,
+};
+
+type RefProp = {
+    ref?: Reference,
+};
+
+type WithChildrenIfMissing<P> = (
+    Omit<P, 'children'> extends P // read: Is P without a 'children' key?
+        ? P & ChildrenProp
+        : P
+);
+
+// @ts-ignore - sometimes JSX cannot be found as namespace
+type Child = JSX.Element | string | number | boolean | null | undefined | Child[];
+export type Children = Child | Child[];
+
+// @ts-ignore - sometimes JSX cannot be found as namespace
+export type RenderResult = JSX.Element | null;
+
+export type BareNXGNode<P extends Props = Props> = {
+    type: string | FunctionComponent<P> | ClassComponent<P>,
+    props: Props,
+    process: () => ProcessedNXGNode<P>,
+};
+
+export type ProcessedNXGNode<P extends Props = Props> = {
+    childNodes: NXGVNode<P>[],
+    node?: ClassComponentInterface,
+    element?: HTMLElement,
+};
+
+export type NXGNode<P extends Props = Props> = BareNXGNode<P> & ProcessedNXGNode<P>;
+
+export type NXGVNode<P extends Props = Props> = (
+    NXGNode<P> | null | string | number | boolean | TextNodeComponent
+);
+
+export interface ClassComponentInterface {
+    isMounted: boolean,
+    componentDidMount: () => void,
+    componentWillUnmount: () => void,
+    render: () => RenderResult,
+}
+
+export type ClassComponent<P extends Props> = {
+    isClass: true,
+    defaultProps?: Partial<P>,
+    new (props: P & ChildrenProp & RefProp): ClassComponentInterface,
+};
+
+export interface FunctionComponent<P extends Props> {
+    (props: WithChildrenIfMissing<P> & RefProp): RenderResult,
+    defaultProps?: Partial<P>,
+}
+
+export interface FunctionComponentWithRef<P extends Props> {
+    (props: WithChildrenIfMissing<P> & RefProp, ref: Reference): RenderResult,
+    defaultProps?: Partial<P>,
+}
+
+export type ForwardedRefComponent<P extends Props> = FunctionComponent<P> & {
+    isForwardedRef: true,
+};
+
+export type TextNodeComponent = {
+    text: string,
+    isTextNode: true,
+    ref: Reference<Text>,
+};
+
+export type AnyComponent<P extends Props> = (
+    ClassComponent<P> | FunctionComponent<P> | ForwardedRefComponent<P> | string
+);
+
+export type VNodeChild<P extends Props> = (
+    string | number | null | false | undefined | NXGVNode<P>[]
+);
+
+export type Reference<T = any> = {
+    current: T | null,
+};
+
+export type Props = Record<string, any>;
+
+export type MountingPoint = HTMLElement | DocumentFragment;
+
+export type MountType = 'mount_inside' | 'mount_before';
+
+export type MountingFunction = (
+    mountingPoint: MountingPoint,
+    elementToMount: HTMLElement | Text | DocumentFragment,
+) => MountType;
+
+export type ClassComponentMounter = {
+    classNode: ClassComponentInterface,
+    isBoundToElement: boolean,
+} | null;
+
+export type Mountable = JSX.Element[] | JSX.Element | string | number;
+
+export type Listener = {
+    event: string,
+    listener: EventListener,
+    useCapture: boolean,
+};
+
+export type ExtendedHTMLElement<P extends Props = Props> = HTMLElement & {
+    cleanUp?: () => void,
+    unmountNode?: () => void,
+    unmountChildren?: () => void,
+    unmountChildNode?: (node: NXGVNode<P>) => void,
+    nxgvNode?: NXGVNode<P>;
+    nxgvChildNodes?: NXGVNode<P>[];
+};
+
+export type DeclareProps<
+    P extends Props,
+    DP extends Props,
+    PKeys = keyof P,
+    AllDPKeys = keyof DP,
+    InvalidDPKeys = Exclude<AllDPKeys, PKeys>,
+    ValidDPKeys = Exclude<AllDPKeys, InvalidDPKeys>,
+// @ts-ignore - ValidKeys are all DP keys that are also P keys - it's taken care of
+> = P & Required<Pick<P, ValidDPKeys>>;

package/packages/jsx/src/utils.ts

@@ -1,35 +1,35 @@
-import { ClassComponentInterface, Reference } from './types';
-
-export const safeComponentDidMount = (instance?: ClassComponentInterface) => {
-    if (instance && !instance.isMounted) {
-        instance.isMounted = true;
-        instance.componentDidMount();
-    }
-};
-
-export const safeComponentWillUnmount = (instance?: ClassComponentInterface) => {
-    if (instance && instance.isMounted) {
-        instance.isMounted = false;
-        instance.componentWillUnmount();
-    }
-};
-
-export const isReference = (ref: Reference | any): ref is Reference => (
-    typeof ref.current !== 'undefined'
-);
-
-export const getSafeArrayOf = <T>(value: any): T[] => {
-    if (value instanceof Array) {
-        return value as T[];
-    }
-    if (value === null || typeof value === 'undefined') {
-        return [];
-    }
-    return [value as T];
-};
-
-export const unwrapReference = <T>(valueOrReference: T | Reference<T>) => (
-    isReference(valueOrReference)
-        ? valueOrReference.current!
-        : valueOrReference
-);
+import { ClassComponentInterface, Reference } from './types';
+
+export const safeComponentDidMount = (instance?: ClassComponentInterface) => {
+    if (instance && !instance.isMounted) {
+        instance.isMounted = true;
+        instance.componentDidMount();
+    }
+};
+
+export const safeComponentWillUnmount = (instance?: ClassComponentInterface) => {
+    if (instance && instance.isMounted) {
+        instance.isMounted = false;
+        instance.componentWillUnmount();
+    }
+};
+
+export const isReference = (ref: Reference | any): ref is Reference => (
+    typeof ref.current !== 'undefined'
+);
+
+export const getSafeArrayOf = <T>(value: any): T[] => {
+    if (value instanceof Array) {
+        return value as T[];
+    }
+    if (value === null || typeof value === 'undefined') {
+        return [];
+    }
+    return [value as T];
+};
+
+export const unwrapReference = <T>(valueOrReference: T | Reference<T>) => (
+    isReference(valueOrReference)
+        ? valueOrReference.current!
+        : valueOrReference
+);

package/packages/jsx/src/virtualDOM.ts

@@ -1,121 +1,121 @@
-import { TextNode, textNode } from './textNode';
-import {
-    AnyComponent,
-    NXGVNode,
-    Props,
-    ClassComponent,
-    FunctionComponent,
-    ForwardedRefComponent,
-    BareNXGNode,
-} from './types';
-
-export const Fragment = Symbol('Fragment');
-
-const getProps = <P extends Props>(
-    props: P,
-    component: FunctionComponent<P> | ForwardedRefComponent<P> | ClassComponent<P>,
-): Props => {
-    if (!props && !component.defaultProps) return {} as unknown as Props;
-    if (!props && !!component.defaultProps) return component.defaultProps as unknown as Props;
-    if (!component.defaultProps) return props;
-    return { ...component.defaultProps, ...props };
-};
-
-const createStringComponent = <P extends Props>(component: string, props: P): BareNXGNode<P> => ({
-    type: component,
-    props,
-    process: () => ({
-        //  @ts-ignore - retyping from react types to ours
-        childNodes: props.children,
-    }),
-});
-
-const createClassComponent = <P extends Props>(
-    Component: ClassComponent<P>, passedProps: P,
-): BareNXGNode<P> => {
-    const props = getProps(passedProps, Component);
-    return {
-        type: Component,
-        props,
-        process: () => {
-            const { ref, ...propsWithoutRef } = props;
-            const node = new Component(propsWithoutRef as P);
-            if (ref) {
-                ref.current = node;
-            }
-            return {
-                node,
-                childNodes: node.render() as unknown as NXGVNode<P>[],
-            };
-        },
-    };
-};
-
-const createForwardedRefComponent = <P extends Props>(
-    component: ForwardedRefComponent<P>, passedProps: P,
-): BareNXGNode<P> => {
-    const props = getProps(passedProps, component);
-    return {
-        type: component,
-        props,
-        process: () => {
-            const { ref, ...propsWithoutRef } = props;
-            return {
-                //  @ts-ignore - retyping from react types to ours
-                childNodes: component(propsWithoutRef, ref) as NXGVNode<P>[],
-            };
-        },
-    };
-};
-
-const createFunctionComponent = <P extends Props>(
-    component: FunctionComponent<P>, passedProps: P,
-): BareNXGNode<P> => {
-    const props = getProps(passedProps, component);
-    return {
-        type: component,
-        props,
-        process: () => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { ref, ...propsWithoutRef } = props;
-            return {
-                //  @ts-ignore - retyping from react types to ours
-                childNodes: component(propsWithoutRef) as NXGVNode<P>[],
-            };
-        },
-    };
-};
-
-const createElementByType = <P extends Props>(
-    component: AnyComponent<P> | Symbol, props: P,
-): BareNXGNode<P> => {
-    if (component === Fragment) {
-        return props.children as unknown as BareNXGNode<P>;
-    }
-    if (component === TextNode) {
-        if (typeof props.children !== 'string') {
-            throw new Error('TextNode must have single child of type string');
-        }
-        if (typeof props.ref === 'undefined') {
-            throw new Error('TextNode must have ref prop');
-        }
-        return textNode(props.children, props.ref) as unknown as BareNXGNode<P>;
-    }
-    if (typeof component === 'string') {
-        return createStringComponent(component, props);
-    }
-    if ((component as ClassComponent<P>).isClass) {
-        return createClassComponent((component as ClassComponent<P>), props);
-    }
-    if ((component as ForwardedRefComponent<P>).isForwardedRef) {
-        return createForwardedRefComponent((component as ForwardedRefComponent<P>), props);
-    }
-    return createFunctionComponent((component as FunctionComponent<P>), props);
-};
-
-export const createElement = <P extends Props>(
-    component: AnyComponent<P>, props: P | null,
-): BareNXGNode<P> => {
-    const normalizedProps: P = props === null ? ({} as unknown as P) : props;
-    return createElementByType(component, normalizedProps);
-};
+import { TextNode, textNode } from './textNode';
+import {
+    AnyComponent,
+    NXGVNode,
+    Props,
+    ClassComponent,
+    FunctionComponent,
+    ForwardedRefComponent,
+    BareNXGNode,
+} from './types';
+
+export const Fragment = Symbol('Fragment');
+
+const getProps = <P extends Props>(
+    props: P,
+    component: FunctionComponent<P> | ForwardedRefComponent<P> | ClassComponent<P>,
+): Props => {
+    if (!props && !component.defaultProps) return {} as unknown as Props;
+    if (!props && !!component.defaultProps) return component.defaultProps as unknown as Props;
+    if (!component.defaultProps) return props;
+    return { ...component.defaultProps, ...props };
+};
+
+const createStringComponent = <P extends Props>(component: string, props: P): BareNXGNode<P> => ({
+    type: component,
+    props,
+    process: () => ({
+        //  @ts-ignore - retyping from react types to ours
+        childNodes: props.children,
+    }),
+});
+
+const createClassComponent = <P extends Props>(
+    Component: ClassComponent<P>, passedProps: P,
+): BareNXGNode<P> => {
+    const props = getProps(passedProps, Component);
+    return {
+        type: Component,
+        props,
+        process: () => {
+            const { ref, ...propsWithoutRef } = props;
+            const node = new Component(propsWithoutRef as P);
+            if (ref) {
+                ref.current = node;
+            }
+            return {
+                node,
+                childNodes: node.render() as unknown as NXGVNode<P>[],
+            };
+        },
+    };
+};
+
+const createForwardedRefComponent = <P extends Props>(
+    component: ForwardedRefComponent<P>, passedProps: P,
+): BareNXGNode<P> => {
+    const props = getProps(passedProps, component);
+    return {
+        type: component,
+        props,
+        process: () => {
+            const { ref, ...propsWithoutRef } = props;
+            return {
+                //  @ts-ignore - retyping from react types to ours
+                childNodes: component(propsWithoutRef, ref) as NXGVNode<P>[],
+            };
+        },
+    };
+};
+
+const createFunctionComponent = <P extends Props>(
+    component: FunctionComponent<P>, passedProps: P,
+): BareNXGNode<P> => {
+    const props = getProps(passedProps, component);
+    return {
+        type: component,
+        props,
+        process: () => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { ref, ...propsWithoutRef } = props;
+            return {
+                //  @ts-ignore - retyping from react types to ours
+                childNodes: component(propsWithoutRef) as NXGVNode<P>[],
+            };
+        },
+    };
+};
+
+const createElementByType = <P extends Props>(
+    component: AnyComponent<P> | Symbol, props: P,
+): BareNXGNode<P> => {
+    if (component === Fragment) {
+        return props.children as unknown as BareNXGNode<P>;
+    }
+    if (component === TextNode) {
+        if (typeof props.children !== 'string') {
+            throw new Error('TextNode must have single child of type string');
+        }
+        if (typeof props.ref === 'undefined') {
+            throw new Error('TextNode must have ref prop');
+        }
+        return textNode(props.children, props.ref) as unknown as BareNXGNode<P>;
+    }
+    if (typeof component === 'string') {
+        return createStringComponent(component, props);
+    }
+    if ((component as ClassComponent<P>).isClass) {
+        return createClassComponent((component as ClassComponent<P>), props);
+    }
+    if ((component as ForwardedRefComponent<P>).isForwardedRef) {
+        return createForwardedRefComponent((component as ForwardedRefComponent<P>), props);
+    }
+    return createFunctionComponent((component as FunctionComponent<P>), props);
+};
+
+export const createElement = <P extends Props>(
+    component: AnyComponent<P>, props: P | null,
+): BareNXGNode<P> => {
+    const normalizedProps: P = props === null ? ({} as unknown as P) : props;
+    return createElementByType(component, normalizedProps);
+};