@lightningtv/solid 0.0.2 → 0.0.4

package/dist/source/primitives/createSpriteMap.js

@@ -0,0 +1,17 @@
+import { renderer } from '@lightningtv/solid';
+export function createSpriteMap(src, subTextures) {
+    const spriteMapTexture = renderer.createTexture('ImageTexture', {
+        src,
+    });
+    return subTextures.reduce((acc, t) => {
+        const { x, y, width, height } = t;
+        acc[t.name] = renderer.createTexture('SubTexture', {
+            texture: spriteMapTexture,
+            x,
+            y,
+            width,
+            height,
+        });
+        return acc;
+    }, {});
+}

package/dist/source/primitives/index.js

@@ -0,0 +1,5 @@
+export * from './useFocusManager.js';
+export * from './withPadding.js';
+export * from './announcer/index.js';
+export * from './createInfiniteItems.js';
+export * from './createSpriteMap.js';

package/dist/source/primitives/useFocusManager.js

@@ -0,0 +1,88 @@
+import { createEffect, on, createSignal, untrack } from 'solid-js';
+import { useKeyDownEvent } from '@solid-primitives/keyboard';
+import { activeElement, isFunc, isArray, } from '@lightningtv/solid';
+const keyMapEntries = {
+    ArrowLeft: 'Left',
+    ArrowRight: 'Right',
+    ArrowUp: 'Up',
+    ArrowDown: 'Down',
+    Enter: 'Enter',
+    l: 'Last',
+    ' ': 'Space',
+    Backspace: 'Back',
+    Escape: 'Escape',
+};
+const [focusPath, setFocusPath] = createSignal([]);
+export { focusPath };
+export const useFocusManager = (userKeyMap) => {
+    const keypressEvent = useKeyDownEvent();
+    if (userKeyMap) {
+        // Flatten the userKeyMap to a hash
+        for (const [key, value] of Object.entries(userKeyMap)) {
+            if (isArray(value)) {
+                value.forEach((v) => {
+                    keyMapEntries[v] = key;
+                });
+            }
+            else {
+                keyMapEntries[value] = key;
+            }
+        }
+    }
+    createEffect(on(activeElement, (currentFocusedElm, prevFocusedElm, prevFocusPath = []) => {
+        const newFocusedElms = [];
+        let current = currentFocusedElm;
+        const fp = [];
+        while (current) {
+            if (!current.states.has('focus')) {
+                current.states.add('focus');
+                isFunc(current.onFocus) &&
+                    current.onFocus.call(current, currentFocusedElm, prevFocusedElm);
+                newFocusedElms.push(current);
+            }
+            fp.push(current);
+            current = current.parent;
+        }
+        prevFocusPath.forEach((elm) => {
+            if (!fp.includes(elm)) {
+                elm.states.remove('focus');
+                isFunc(elm.onBlur) &&
+                    elm.onBlur.call(elm, currentFocusedElm, prevFocusedElm);
+            }
+        });
+        setFocusPath(fp);
+        return fp;
+    }, { defer: true }));
+    createEffect(() => {
+        const e = keypressEvent();
+        if (e) {
+            // Search keyMap for the value of the pressed key or keyCode if value undefined
+            const mappedKeyEvent = keyMapEntries[e.key] || keyMapEntries[e.keyCode];
+            untrack(() => {
+                const fp = focusPath();
+                let finalFocusElm = undefined;
+                for (const elm of fp) {
+                    finalFocusElm = finalFocusElm || elm;
+                    if (mappedKeyEvent) {
+                        const onKeyHandler = elm[`on${mappedKeyEvent}`];
+                        if (isFunc(onKeyHandler)) {
+                            if (onKeyHandler.call(elm, e, elm, finalFocusElm) === true) {
+                                break;
+                            }
+                        }
+                    }
+                    else {
+                        console.log(`Unhandled key event: ${e.key || e.keyCode}`);
+                    }
+                    if (isFunc(elm.onKeyPress)) {
+                        if (elm.onKeyPress.call(elm, e, mappedKeyEvent, elm, finalFocusElm) === true) {
+                            break;
+                        }
+                    }
+                }
+                return false;
+            });
+        }
+    });
+    return focusPath;
+};

package/dist/source/primitives/withPadding.js

@@ -0,0 +1,48 @@
+// To use with TS import withPadding and then put withPadding; on the next line to prevent tree shaking
+export function withPadding(el, padding) {
+    const pad = padding();
+    let top, left, right, bottom;
+    if (Array.isArray(pad)) {
+        // top right bottom left
+        if (pad.length === 2) {
+            top = bottom = pad[0];
+            left = right = pad[1];
+        }
+        else if (pad.length === 3) {
+            top = pad[0];
+            left = right = pad[1];
+            bottom = pad[2];
+        }
+        else {
+            [top, right, bottom, left] = pad;
+        }
+    }
+    else {
+        top = right = bottom = left = pad;
+    }
+    el.onBeforeLayout = (node, size) => {
+        if (size) {
+            el.width =
+                el.children.reduce((acc, c) => {
+                    return acc + (c.width || 0);
+                }, 0) +
+                    left +
+                    right;
+            const firstChild = el.children[0];
+            if (firstChild) {
+                // set padding or marginLeft for flex
+                firstChild.x = left;
+                firstChild.marginLeft = left;
+            }
+            let maxHeight = 0;
+            el.children.forEach((c) => {
+                c.y = top;
+                c.marginTop = top;
+                maxHeight = Math.max(maxHeight, c.height || 0);
+            });
+            el.height = maxHeight + top + bottom;
+            // let flex know we need to re-layout
+            return true;
+        }
+    };
+}

package/dist/source/solidOpts.js

@@ -1,12 +1,12 @@
 import { assertTruthy } from '@lightningjs/renderer/utils';
-import { ElementNode, log } from '@lightningtv/core';
+import { ElementNode, NodeType, log } from '@lightningtv/core';
 export default {
     createElement(name) {
         return new ElementNode(name);
     },
     createTextNode(text) {
         // A text node is just a string - not the <text> node
-        return { type: 2 /* NodeTypes.Text */, text, parent: undefined };
+        return { type: NodeType.Text, text, parent: undefined };
     },
     replaceText(node, value) {
         log('Replace Text: ', node, value);

package/dist/types/index.d.ts

@@ -6,3 +6,4 @@ export { View } from './View.jsx';
 export { Text } from './Text.jsx';
 export * from './utils.js';
 export * from './render.js';
+export * from './primitives/index.js';

package/dist/types/primitives/announcer/announcer.d.ts

@@ -0,0 +1,37 @@
+import type { ElementNode } from '@lightningtv/solid';
+import { type SeriesResult, type SpeechType } from './speech.js';
+type DebounceWithFlushFunction<T> = {
+    (newValue: T): void;
+    flush(): void;
+    clear: VoidFunction;
+};
+declare module '@lightningtv/solid' {
+    /**
+     * Augment the existing ElementNode interface with our own
+     * Announcer-specific properties.
+     */
+    interface IntrinsicCommonProps {
+        announce?: SpeechType;
+        announceContext?: SpeechType;
+        title?: SpeechType;
+        loading?: boolean;
+    }
+}
+export interface Announcer {
+    debug: boolean;
+    enabled: boolean;
+    cancel: VoidFunction;
+    clearPrevFocus: (depth?: number) => void;
+    speak: (text: SpeechType, options?: {
+        append?: boolean;
+        notification?: boolean;
+    }) => SeriesResult;
+    setupTimers: (options?: {
+        focusDebounce?: number;
+        focusChangeTimeout?: number;
+    }) => void;
+    onFocusChange?: DebounceWithFlushFunction<ElementNode[]>;
+    refresh: (depth?: number) => void;
+}
+export declare const Announcer: Announcer;
+export {};

package/dist/types/primitives/announcer/index.d.ts

@@ -0,0 +1,2 @@
+import { Announcer } from './announcer.js';
+export declare const useAnnouncer: () => Announcer;

package/dist/types/primitives/announcer/speech.d.ts

@@ -0,0 +1,10 @@
+type CoreSpeechType = string | (() => SpeechType) | SpeechType[];
+export type SpeechType = CoreSpeechType | Promise<CoreSpeechType>;
+export interface SeriesResult {
+    series: Promise<void>;
+    readonly active: boolean;
+    append: (toSpeak: SpeechType) => void;
+    cancel: () => void;
+}
+export default function (toSpeak: SpeechType, lang?: string): SeriesResult;
+export {};

package/dist/types/primitives/createInfiniteItems.d.ts

@@ -0,0 +1,27 @@
+import { type Accessor, type Setter } from 'solid-js';
+/**
+ * Provides an easy way to implement infinite items.
+ *
+ * ```ts
+ * const [items, loader, { item, setItem, setItems, end, setEnd }] = createInfiniteScroll(fetcher);
+ * ```
+ * @param fetcher `(item: number) => Promise<T[]>`
+ * @return `items()` is an accessor contains array of contents
+ * @property `items.loading` is a boolean indicator for the loading state
+ * @property `items.error` contains any error encountered
+ * @method `page` is an accessor that contains page number
+ * @method `setPage` allows to manually change the page number
+ * @method `setItems` allows to manually change the contents of the item
+ * @method `end` is a boolean indicator for end of the item
+ * @method `setEnd` allows to manually change the end
+ */
+export declare function createInfiniteItems<T>(fetcher: (item: number) => Promise<T[]>): [
+    items: Accessor<T[]>,
+    options: {
+        page: Accessor<number>;
+        setPage: Setter<number>;
+        setItems: Setter<T[]>;
+        end: Accessor<boolean>;
+        setEnd: Setter<boolean>;
+    }
+];

package/dist/types/primitives/createSpriteMap.d.ts

@@ -0,0 +1,8 @@
+export interface SpriteDef {
+    name: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare function createSpriteMap(src: string, subTextures: SpriteDef[]): Record<string, SpecificTextureRef<"SubTexture">>;

package/dist/types/primitives/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useFocusManager.js';
+export * from './withPadding.js';
+export * from './announcer/index.js';
+export * from './createInfiniteItems.js';
+export * from './createSpriteMap.js';

package/dist/types/primitives/useFocusManager.d.ts

@@ -0,0 +1,46 @@
+import { ElementNode } from '@lightningtv/solid';
+export interface DefaultKeyMap {
+    Left: string | number | (string | number)[];
+    Right: string | number | (string | number)[];
+    Up: string | number | (string | number)[];
+    Down: string | number | (string | number)[];
+    Enter: string | number | (string | number)[];
+    Last: string | number | (string | number)[];
+}
+export interface KeyMap extends DefaultKeyMap {
+}
+export type KeyHandlerReturn = boolean | void;
+export type KeyHandler = (this: ElementNode, e: KeyboardEvent, target: ElementNode, handlerElm: ElementNode) => KeyHandlerReturn;
+/**
+ * Generates a map of event handlers for each key in the KeyMap
+ */
+type KeyMapEventHandlers = {
+    [K in keyof KeyMap as `on${Capitalize<K>}`]?: KeyHandler;
+};
+declare module '@lightningtv/solid' {
+    /**
+     * Augment the existing IntrinsicCommonProps interface with our own
+     * FocusManager-specific properties.
+     */
+    interface IntrinsicCommonProps extends KeyMapEventHandlers {
+        onFocus?: (currentFocusedElm: ElementNode | undefined, prevFocusedElm: ElementNode | undefined) => void;
+        onBlur?: (currentFocusedElm: ElementNode | undefined, prevFocusedElm: ElementNode | undefined) => void;
+        onKeyPress?: (this: ElementNode, e: KeyboardEvent, mappedKeyEvent: string | undefined, handlerElm: ElementNode, currentFocusedElm: ElementNode) => KeyHandlerReturn;
+        onSelectedChanged?: (container: ElementNode, activeElm: ElementNode, selectedIndex: number | undefined, lastSelectedIndex: number | undefined) => void;
+        skipFocus?: boolean;
+        wrap?: boolean;
+        plinko?: boolean;
+    }
+    interface IntrinsicNodeStyleProps {
+        focus?: IntrinsicNodeStyleProps;
+    }
+    interface IntrinsicTextNodeStyleProps {
+        focus?: IntrinsicTextNodeStyleProps;
+    }
+    interface TextNode {
+        skipFocus?: undefined;
+    }
+}
+declare const focusPath: import("solid-js").Accessor<ElementNode[]>;
+export { focusPath };
+export declare const useFocusManager: (userKeyMap?: Partial<KeyMap>) => import("solid-js").Accessor<ElementNode[]>;

package/dist/types/primitives/withPadding.d.ts

@@ -0,0 +1,3 @@
+import type { ElementNode } from '@lightningtv/core';
+export type withPaddingInput = number | [number, number] | [number, number, number] | [number, number, number, number];
+export declare function withPadding(el: ElementNode, padding: () => withPaddingInput): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningtv/solid",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Lightning Renderer for Solid Universal",
   "type": "module",
   "source": "src/index.ts",
@@ -33,7 +33,10 @@
   "author": "Chris Lorenzo",
   "license": "Apache-2.0",
   "dependencies": {
-    "@lightningtv/core": "^0.0.1"
+    "@lightningtv/core": "^0.0.5",
+    "@lightningtv/solid": "file:",
+    "@solid-primitives/keyboard": "^1.2.8",
+    "@solid-primitives/scheduled": "^1.4.3"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.5",

package/src/index.ts

@@ -15,3 +15,4 @@ export { View } from './View.jsx';
 export { Text } from './Text.jsx';
 export * from './utils.js';
 export * from './render.js';
+export * from './primitives/index.js';

package/src/primitives/announcer/announcer.ts

@@ -0,0 +1,190 @@
+import type { ElementNode } from '@lightningtv/solid';
+import { untrack } from 'solid-js';
+import SpeechEngine, { type SeriesResult, type SpeechType } from './speech.js';
+import { debounce } from '@solid-primitives/scheduled';
+import { focusPath } from '../useFocusManager.js';
+
+type DebounceWithFlushFunction<T> = {
+  (newValue: T): void;
+  flush(): void;
+  clear: VoidFunction;
+};
+
+declare module '@lightningtv/solid' {
+  /**
+   * Augment the existing ElementNode interface with our own
+   * Announcer-specific properties.
+   */
+  interface IntrinsicCommonProps {
+    announce?: SpeechType;
+    announceContext?: SpeechType;
+    title?: SpeechType;
+    loading?: boolean;
+  }
+}
+
+let resetFocusPathTimer: DebounceWithFlushFunction<void>;
+let prevFocusPath: ElementNode[] = [];
+let currentlySpeaking: SeriesResult | undefined;
+let voiceOutDisabled = false;
+const fiveMinutes = 300000;
+
+function debounceWithFlush<T>(
+  callback: (newValue: T) => void,
+  time?: number,
+): DebounceWithFlushFunction<T> {
+  const trigger = debounce(callback, time);
+  let scopedValue: T;
+
+  const debounced = (newValue: T) => {
+    scopedValue = newValue;
+    trigger(newValue);
+  };
+
+  debounced.flush = () => {
+    trigger.clear();
+    callback(scopedValue);
+  };
+
+  debounced.clear = trigger.clear;
+
+  return debounced;
+}
+
+function getElmName(elm: ElementNode): string {
+  return (elm.id || elm.name) as string;
+}
+
+function onFocusChangeCore(focusPath: ElementNode[] = []) {
+  if (!Announcer.onFocusChange || !Announcer.enabled) {
+    return;
+  }
+
+  const loaded = focusPath.every((elm) => !elm.loading);
+  const focusDiff = focusPath.filter((elm) => !prevFocusPath.includes(elm));
+
+  resetFocusPathTimer();
+
+  if (!loaded && Announcer.onFocusChange) {
+    Announcer.onFocusChange([]);
+    return;
+  }
+
+  prevFocusPath = focusPath.slice(0);
+
+  const toAnnounceText: SpeechType[] = [];
+  const toAnnounce = focusDiff.reduce(
+    (acc: [string, string, SpeechType][], elm) => {
+      if (elm.announce) {
+        acc.push([getElmName(elm), 'Announce', elm.announce]);
+        toAnnounceText.push(elm.announce);
+      } else if (elm.title) {
+        acc.push([getElmName(elm), 'Title', elm.title]);
+        toAnnounceText.push(elm.title);
+      } else {
+        acc.push([getElmName(elm), 'No Announce', '']);
+      }
+      return acc;
+    },
+    [],
+  );
+
+  focusDiff.reverse().reduce((acc, elm) => {
+    if (elm.announceContext) {
+      acc.push([getElmName(elm), 'Context', elm.announceContext]);
+      toAnnounceText.push(elm.announceContext);
+    } else {
+      acc.push([getElmName(elm), 'No Context', '']);
+    }
+    return acc;
+  }, toAnnounce);
+
+  if (Announcer.debug) {
+    console.table(toAnnounce);
+  }
+
+  if (toAnnounceText.length) {
+    return Announcer.speak(
+      toAnnounceText.reduce((acc: SpeechType[], val) => acc.concat(val), []),
+    );
+  }
+}
+
+function textToSpeech(toSpeak: SpeechType) {
+  if (voiceOutDisabled) {
+    return;
+  }
+
+  return (currentlySpeaking = SpeechEngine(toSpeak));
+}
+
+export interface Announcer {
+  debug: boolean;
+  enabled: boolean;
+  cancel: VoidFunction;
+  clearPrevFocus: (depth?: number) => void;
+  speak: (
+    text: SpeechType,
+    options?: { append?: boolean; notification?: boolean },
+  ) => SeriesResult;
+  setupTimers: (options?: {
+    focusDebounce?: number;
+    focusChangeTimeout?: number;
+  }) => void;
+  onFocusChange?: DebounceWithFlushFunction<ElementNode[]>;
+  refresh: (depth?: number) => void;
+}
+
+export const Announcer: Announcer = {
+  debug: false,
+  enabled: true,
+  cancel: function () {
+    currentlySpeaking && currentlySpeaking.cancel();
+  },
+  clearPrevFocus: function (depth = 0) {
+    prevFocusPath = prevFocusPath.slice(0, depth);
+    resetFocusPathTimer();
+  },
+  speak: function (text, { append = false, notification = false } = {}) {
+    if (Announcer.onFocusChange && Announcer.enabled) {
+      Announcer.onFocusChange.flush();
+      if (append && currentlySpeaking && currentlySpeaking.active) {
+        currentlySpeaking.append(text);
+      } else {
+        Announcer.cancel();
+        textToSpeech(text);
+      }
+
+      if (notification) {
+        voiceOutDisabled = true;
+        currentlySpeaking?.series
+          .finally(() => {
+            voiceOutDisabled = false;
+            Announcer.refresh();
+          })
+          .catch(console.error);
+      }
+    }
+
+    return currentlySpeaking as SeriesResult;
+  },
+  refresh: function (depth = 0) {
+    Announcer.clearPrevFocus(depth);
+    Announcer.onFocusChange &&
+      Announcer.onFocusChange(untrack(() => focusPath()));
+  },
+  setupTimers: function ({
+    focusDebounce = 400,
+    focusChangeTimeout = fiveMinutes,
+  } = {}) {
+    Announcer.onFocusChange = debounceWithFlush(
+      onFocusChangeCore,
+      focusDebounce,
+    );
+
+    resetFocusPathTimer = debounceWithFlush(() => {
+      // Reset focus path for full announce
+      prevFocusPath = [];
+    }, focusChangeTimeout);
+  },
+};

package/src/primitives/announcer/index.ts

@@ -0,0 +1,10 @@
+import { createEffect, on } from 'solid-js';
+import { Announcer } from './announcer.js';
+import { focusPath } from '../useFocusManager.js';
+
+export const useAnnouncer = () => {
+  Announcer.setupTimers();
+  createEffect(on(focusPath, Announcer.onFocusChange!, { defer: true }));
+
+  return Announcer;
+};