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

package/packages/jsx/src/nodeUtils.ts

@@ -0,0 +1,69 @@
+import { NXGVNode } from './types';
+
+export const appendChildNode = (childNodes: NXGVNode[], node: NXGVNode) => {
+    childNodes.push(node);
+};
+
+export const removeChildNode = (childNodes: NXGVNode[], node: NXGVNode) => {
+    for (let i = 0; i < childNodes.length; i++) {
+        if (childNodes[i] === node) {
+            childNodes.splice(i, 1);
+            return;
+        }
+    }
+};
+
+export const insertBeforeChildNode = (
+    childNodes: NXGVNode[],
+    node: NXGVNode,
+    beforeNode: NXGVNode,
+) => {
+    for (let i = 0; i < childNodes.length; i++) {
+        if (childNodes[i] === beforeNode) {
+            childNodes.splice(i, 0, node);
+            return;
+        }
+    }
+};
+
+export const replaceChildNode = (
+    childNodes: NXGVNode[],
+    newNode: NXGVNode,
+    oldNode: NXGVNode,
+) => {
+    for (let i = 0; i < childNodes.length; i++) {
+        if (childNodes[i] === oldNode) {
+            childNodes[i] = newNode;
+            return;
+        }
+    }
+};
+
+export const swapChildNodes = (
+    childNodesNew: NXGVNode[],
+    childNodesOld: NXGVNode[],
+    newNode: NXGVNode,
+    oldNode: NXGVNode,
+) => {
+    let newNodeIndex = -1;
+    let oldNodeIndex = -1;
+
+    for (let i = 0; i < childNodesNew.length; i++) {
+        if (childNodesNew[i] === newNode) {
+            newNodeIndex = i;
+            break;
+        }
+    }
+
+    for (let i = 0; i < childNodesOld.length; i++) {
+        if (childNodesOld[i] === oldNode) {
+            oldNodeIndex = i;
+            break;
+        }
+    }
+
+    if (newNodeIndex !== -1 && oldNodeIndex !== -1) {
+        childNodesNew[newNodeIndex] = oldNode;
+        childNodesOld[oldNodeIndex] = newNode;
+    }
+};

package/packages/jsx/src/setText.ts

@@ -0,0 +1,15 @@
+import { Reference } from './types';
+import { unwrapReference } from './utils';
+
+export const setText = (elementOrReference: HTMLElement | Reference<HTMLElement>, text: string) => {
+    const element = unwrapReference<HTMLElement>(elementOrReference);
+    if (!element.childNodes[0]) {
+        if (typeof element.append === 'function') {
+            element.append(text);
+        } else {
+            element.appendChild(document.createTextNode(text));
+        }
+    } else {
+        element.childNodes[0].nodeValue = text;
+    }
+};

package/packages/jsx/src/test-utils/MountedComponent.ts

@@ -0,0 +1,50 @@
+import { clearNode } from '../manipulation/clearNode';
+import { Reference } from '../index';
+
+const NO_USE_AFTER_UNMOUNT = 'This component is already unmounted. It cannot be used anymore';
+
+export class MountedComponent<T> {
+    private isUnmounted = false;
+
+    constructor(
+        private readonly reference: Reference<T>,
+        private readonly rootElement: HTMLDivElement,
+    ) {}
+
+    find<E = Element>(selector: string): E {
+        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
+        return this.rootElement.querySelector(selector) as unknown as E;
+    }
+
+    findAll(selector: string) {
+        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
+        return this.rootElement.querySelectorAll(selector);
+    }
+
+    ref() {
+        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
+        return this.reference.current!;
+    }
+
+    root() {
+        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
+        return this.rootElement;
+    }
+
+    has(selector: string) {
+        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
+        return this.rootElement.querySelector(selector) !== null;
+    }
+
+    hasText(text: string) {
+        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
+        return this.rootElement.innerHTML.indexOf(text) !== -1;
+    }
+
+    unmount() {
+        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
+        clearNode(this.rootElement);
+        document.body.removeChild(this.rootElement);
+        this.isUnmounted = true;
+    }
+}

package/packages/jsx/src/test-utils/README.md

@@ -0,0 +1,73 @@
+---
+id: README
+title: BIGscreen JSX - Test Utils
+hide_title: true
+sidebar_label: BIGscreen JSX - Test Utils
+---
+
+# BIGscreen JSX Test Utils
+This package exports some simple utils to make testing easier.
+- shallow - function to mount a component and easily test basic properties
+- click - function to perform a click on an Element
+- keydown - function to perform a keydown on an Element
+- enter - function to perform a keydown with ENTER keycode on an Element
+
+### shallow
+This function allows you to mount a component and test some basic properties.
+
+**IMPORTANT**
+If the component that you are mounting subscribes to events from other components/packages/document/window/etc.
+You need to manually call unmount at the end of the test.
+
+The returned object has these methods:
+- ref() - returns an instance of the top most component
+- root() - returns a wrapping div instance
+- find(selector: string) - returns an HTMLElement or null (equivalent of `root().querySelector()`) 
+- findAll(selector: string) - returns an NodeList or null (equivalent of `root().querySelectorAll()`) 
+- has(selector: string) - returns boolean whether there is a such Element inside the wrapping div (equivalent of `root.querySelector(selector) !== null`)
+- hasText(text: string) - returns boolean whether there is a such text inside the wrapping div (equivalent of `root.innerHTML.indexOf(text) !== -1`)
+- unmount() - unmounts the component to test componentWillUnmount cleanup. No methods can be called afterwards.
+```tsx
+const mounted = shallow(<div id="wrap"><div className="test" /></div>);
+expect(mounted.has('.test')).toBe(true);
+```
+If you need the ref to be on a different component than the top most one, you can do it like this:
+```tsx
+const mounted = shallow((ref) => <div className="wrap"><div ref={ref} id="test" /></div>);
+expect(mounted.ref().id).toBe('test');
+```
+
+### click
+This function allows you to easily simulate a click. Just pass an Element or BIGscreen JSX Reference to an element.
+
+```tsx
+const spy = jest.fn();
+const mounted = shallow(<div onClick={spy} />);
+click(mounted.ref());
+expect(spy).toBeHaveBeenCalled();
+```
+
+### keydown
+This function allows you to easily simulate a keydown. Just pass an Element or BIGscreen JSX Reference to an element and a keyCode.
+
+```tsx
+const spy = jest.fn();
+const mounted = shallow(<div onKeyDown={spy} />);
+keydown(mounted.ref(), LEFT); // import { LEFT } from '@24i/bigscreen-sdk/device/keymap';
+expect(spy).toBeHaveBeenCalledWith(expect.objectContaining({
+    code: 'ArrowLeft',
+    keyCode: 37,
+}));
+```
+
+### enter
+This function allows you to easily simulate a keydown with ENTER keycode. Just pass an Element or BIGscreen JSX Reference to an element.
+
+```tsx
+const spy = jest.fn();
+const mounted = shallow(<div onKeyDown={spy} tabIndex={0} />);
+enter(mounted.ref());
+expect(spy).toBeHaveBeenCalledWith(expect.objectContaining({
+    keyCode: 13,
+}));
+```

package/packages/jsx/src/test-utils/click.ts

@@ -0,0 +1,7 @@
+import { Reference } from '..';
+import { unwrapReference } from '../utils';
+
+export const click = (toClick: Reference<Element> | Element) => {
+    const element = unwrapReference<Element>(toClick);
+    element.dispatchEvent(new MouseEvent('click'));
+};

package/packages/jsx/src/test-utils/enter.ts

@@ -0,0 +1,4 @@
+/* eslint-disable no-magic-numbers */
+import { keydown } from './keydown';
+
+export const enter = (ref: Parameters<typeof keydown>[0]) => keydown(ref, 13);

package/packages/jsx/src/test-utils/index.ts

@@ -0,0 +1,5 @@
+export { click } from './click';
+export { enter } from './enter';
+export { keydown } from './keydown';
+export { shallow } from './shallow';
+export { MountedComponent } from './MountedComponent';

package/packages/jsx/src/test-utils/keydown.ts

@@ -0,0 +1,21 @@
+import { Reference, Component } from '..';
+import { unwrapReference } from '../utils';
+
+type ToPress = Reference<HTMLElement> | HTMLElement | Window | Document | Component<any>;
+
+interface Key {
+    keyCode: number,
+    code: string,
+}
+
+export const keydown = (toPress: ToPress, keyOrKeyCode: number | Key) => {
+    const element = unwrapReference<ToPress>(toPress);
+    const keyCode = typeof keyOrKeyCode === 'number' ? keyOrKeyCode : keyOrKeyCode.keyCode;
+    const code = typeof keyOrKeyCode === 'number' ? '' : keyOrKeyCode.code;
+    const event = new KeyboardEvent('keydown', { keyCode, code } as KeyboardEventInit);
+    if ((element as any).onKeyDown) {
+        (element as any).onKeyDown(event);
+    } else if ((element as any).dispatchEvent) {
+        (element as Element).dispatchEvent(event);
+    }
+};

package/packages/jsx/src/test-utils/shallow.ts

@@ -0,0 +1,33 @@
+import { createRef, mount, Reference } from '../index';
+import { MountedComponent } from './MountedComponent';
+
+type FunctionToMount<T> = ((ref?: Reference<T>) => JSX.Element);
+
+type Mountable<T> = JSX.Element | FunctionToMount<T>;
+
+type ElementWithNode<T> = JSX.Element & {
+    node: T,
+};
+
+const isNotFunction = <T>(toMount: Mountable<T>): toMount is ElementWithNode<T> => (
+    typeof toMount !== 'function'
+);
+
+const isFunction = <T>(toMount: Mountable<T>): toMount is FunctionToMount<T> => (
+    typeof toMount === 'function'
+);
+
+export const shallow = <T>(toMount: Mountable<T>): MountedComponent<T> => {
+    const ref = createRef<T>();
+    let toMountWithRef!: JSX.Element;
+    if (isNotFunction(toMount)) {
+        if (!toMount.props.ref) toMount.props.ref = ref;
+        toMountWithRef = toMount;
+    } else if (isFunction(toMount)) {
+        toMountWithRef = toMount(ref);
+    }
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+    mount(toMountWithRef, root);
+    return new MountedComponent<T>(toMountWithRef.props.ref || ref, root);
+};

package/packages/jsx/src/test-utils/spec-utils.ts

@@ -0,0 +1,6 @@
+export const prepareElementAndSpy = (event: string) => {
+    const element = document.createElement('div');
+    const spy = jest.fn();
+    element.addEventListener(event, spy);
+    return { spy, element };
+};

package/packages/jsx/src/textNode.ts

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

package/packages/jsx/src/types.ts

@@ -0,0 +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>>;

package/packages/jsx/src/utils.ts

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

package/packages/jsx/src/virtualDOM.ts

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

package/packages/key-sequence/README.md

@@ -0,0 +1,44 @@
+---
+id: README
+title: Key Sequence
+hide_title: true
+sidebar_label: Key Sequence
+---
+
+# Key Sequence
+This is simple library to define sequence of keys and detect the key sequence 
+is currently being pressed.
+
+## Usage
+```tsx
+import { RED, GREEN } from '@24i/bigscreen-sdk/device/keymap';
+import { KeySequence } from '@24i/bigscreen-sdk/key-sequence';
+
+const keySequenceRGR = new KeySequence([RED, GREEN, RED], {}, () => {
+    // console.log("RGR sequence has been pressed")
+});
+
+window.document.addEventListener('keydown', (event) => {
+    keySequenceRGR.onKeyDown(event);
+
+    // Alternative way to check sequence has been pressed
+    // if(keySequenceRGR.isPassed()) {
+    //     console.log("RGR sequence has been pressed")
+    // }
+}, true);
+```
+
+## API Reference
+### `constructor(keySequence, options?, callback?)`
+- `keySequence`: *Array\<number\>* - The array of key codes specifying key sequence
+- `options` - optional, An options object specifies characteristics about the 
+key sequence. The available options are:
+    - `keystrokeDelayMs`*: number | false* (default: `2000`) - The max. time delay 
+    in milliseconds between the keystrokes. The `false` to ignore delay.
+- `callback`*: Function* - optional, The function called on key sequence is pressed.
+
+### `isPassed()`
+- method returns `true` if sequence of keys has been pressed. Otherwise, `false`.
+
+### `onKeyDown(keyboardEvent)`
+- method must be called every time to pass the keydown event in.