@lightningtv/solid 2.7.19 → 2.8.0

package/src/devtools/index.ts

@@ -0,0 +1,77 @@
+import * as debug from '@solid-devtools/debugger/types';
+import * as lng from '@lightningtv/core';
+
+const EMPTY_CHILDREN: (lng.ElementNode | lng.ElementText)[] = [];
+
+/**
+ * Implementation of the solid-devtools element interface for Lightning elements
+ */
+export const elementInterface: debug.ElementInterface<
+  lng.ElementNode | lng.ElementText
+> = {
+  isElement(node): node is lng.ElementNode | lng.ElementText {
+    return (
+      '_type' in node &&
+      (node._type === lng.NodeType.Element ||
+        node._type === lng.NodeType.TextNode)
+    );
+  },
+  getChildren(node) {
+    return node instanceof lng.ElementNode ? node.children : EMPTY_CHILDREN;
+  },
+  getName(node) {
+    return node._type === lng.NodeType.Element ? 'view' : 'text';
+  },
+  getParent(node) {
+    return node.parent ?? null;
+  },
+  getRect(node) {
+    let { width, height } = node;
+    let x = 0,
+      y = 0;
+
+    if (node.scaleX != null) width *= node.scaleX;
+    if (node.scaleY != null) height *= node.scaleY;
+
+    let curr = node as lng.ElementNode | undefined | null;
+    while (curr != null) {
+      x += curr.x;
+      y += curr.y;
+
+      if (curr.scaleX != null) {
+        x += (curr.width / 2) * (1 - curr.scaleX);
+      }
+      if (curr.scaleY != null) {
+        y += (curr.height / 2) * (1 - curr.scaleY);
+      }
+
+      curr = curr.parent;
+    }
+
+    if (lng.Config.rendererOptions != null) {
+      let dpr = lng.Config.rendererOptions.deviceLogicalPixelRatio;
+      if (dpr != null) {
+        x *= dpr;
+        y *= dpr;
+        width *= dpr;
+        height *= dpr;
+      }
+    }
+
+    return { x, y, width, height };
+  },
+  getElementAt(e) {
+    let target = e.target as any;
+    return target != null && target.element instanceof lng.ElementNode
+      ? target.element
+      : null;
+  },
+  getLocation(node) {
+    if (typeof node[debug.LOCATION_ATTRIBUTE_NAME] === 'string') {
+      return (
+        debug.parseLocationString(node[debug.LOCATION_ATTRIBUTE_NAME]) ?? null
+      );
+    }
+    return null;
+  },
+};

package/src/index.ts

@@ -1,4 +1,4 @@
-import './jsx-runtime.js';
+export * from '@lightningtv/solid/jsx-runtime';
 export * from '@lightningtv/core';
 export type * from '@lightningtv/core';
 export type { KeyHandler, KeyMap } from '@lightningtv/core/focusManager';

package/src/primitives/Column.tsx

@@ -1,5 +1,5 @@
 import { type Component } from 'solid-js';
-import { ElementNode, View, combineStyles, type NodeStyles } from '@lightningtv/solid';
+import { ElementNode, combineStyles, type NodeStyles } from '@lightningtv/solid';
 import {
   handleNavigation,
   onGridFocus,
@@ -32,7 +32,7 @@ function scrollToIndex(this: ElementNode, index: number) {
 
 export const Column: Component<ColumnProps> = (props) => {
   return (
-    <View
+    <view
       {...props}
       onUp={/* @once */ chainFunctions(props.onUp, onUp)}
       onDown={/* @once */ chainFunctions(props.onDown, onDown)}

package/src/primitives/FPSCounter.tsx

@@ -1,4 +1,4 @@
-import { View, Text, type Stage, type NodeProps, RendererMain } from '@lightningtv/solid';
+import { type Stage, type NodeProps, RendererMain } from '@lightningtv/solid';
 import { createSignal } from 'solid-js';
 
 const fpsStyle = {
@@ -90,90 +90,90 @@ export function setupFPS(root: any) {
 
 export const FPSCounter = (props: NodeProps) => {
   return (
-    <View {...props} style={fpsStyle}>
-      <View y={6}>
-        <Text style={fpsLabel}>FPS:</Text>
-        <Text style={fpsValue} x={90}>
+    <view {...props} style={fpsStyle}>
+      <view y={6}>
+        <text style={fpsLabel}>FPS:</text>
+        <text style={fpsValue} x={90}>
           {fps().toString()}
-        </Text>
-      </View>
+        </text>
+      </view>
 
-      <View y={6} x={160}>
-        <Text style={fpsLabel}>AVG:</Text>
-        <Text style={fpsValue} x={100}>
+      <view y={6} x={160}>
+        <text style={fpsLabel}>AVG:</text>
+        <text style={fpsValue} x={100}>
           {avgFps().toString()}
-        </Text>
-      </View>
+        </text>
+      </view>
 
-      <View x={0} y={26}>
-        <Text style={fpsLabel}>MIN:</Text>
-        <Text style={fpsValue} x={90}>
+      <view x={0} y={26}>
+        <text style={fpsLabel}>MIN:</text>
+        <text style={fpsValue} x={90}>
           {minFps().toString()}
-        </Text>
-      </View>
+        </text>
+      </view>
 
-      <View x={160} y={26}>
-        <Text style={fpsLabel}>MAX:</Text>
-        <Text style={fpsValue} x={100}>
+      <view x={160} y={26}>
+        <text style={fpsLabel}>MAX:</text>
+        <text style={fpsValue} x={100}>
           {maxFps().toString()}
-        </Text>
-      </View>
+        </text>
+      </view>
 
-      <View display="flex" flexDirection="column" y={58} gap={4}>
-        <View height={infoFontSize}>
-          <Text fontSize={infoFontSize} style={fpsLabel}>
+      <view display="flex" flexDirection="column" y={58} gap={4}>
+        <view height={infoFontSize}>
+          <text fontSize={infoFontSize} style={fpsLabel}>
             criticalThreshold:
-          </Text>
-          <Text fontSize={infoFontSize} style={fpsLabel} x={230}>
+          </text>
+          <text fontSize={infoFontSize} style={fpsLabel} x={230}>
             {criticalThresholdSignal()}
-          </Text>
-        </View>
+          </text>
+        </view>
 
-        <View height={infoFontSize}>
-          <Text fontSize={infoFontSize} style={fpsLabel}>
+        <view height={infoFontSize}>
+          <text fontSize={infoFontSize} style={fpsLabel}>
             targetThreshold:
-          </Text>
-          <Text fontSize={infoFontSize} style={fpsLabel} x={230}>
+          </text>
+          <text fontSize={infoFontSize} style={fpsLabel} x={230}>
             {targetThresholdSignal()}
-          </Text>
-        </View>
+          </text>
+        </view>
 
-        <View height={infoFontSize}>
-          <Text fontSize={infoFontSize} style={fpsLabel}>
+        <view height={infoFontSize}>
+          <text fontSize={infoFontSize} style={fpsLabel}>
             renderableMemUsed:
-          </Text>
-          <Text fontSize={infoFontSize} style={fpsLabel} x={230}>
+          </text>
+          <text fontSize={infoFontSize} style={fpsLabel} x={230}>
             {renderableMemUsedSignal()}
-          </Text>
-        </View>
+          </text>
+        </view>
 
-        <View height={infoFontSize}>
-          <Text fontSize={infoFontSize} style={fpsLabel}>
+        <view height={infoFontSize}>
+          <text fontSize={infoFontSize} style={fpsLabel}>
             memUsed:
-          </Text>
-          <Text fontSize={infoFontSize} style={fpsLabel} x={230}>
+          </text>
+          <text fontSize={infoFontSize} style={fpsLabel} x={230}>
             {memUsedSignal()}
-          </Text>
-        </View>
+          </text>
+        </view>
 
-        <View height={infoFontSize}>
-          <Text fontSize={infoFontSize} style={fpsLabel}>
+        <view height={infoFontSize}>
+          <text fontSize={infoFontSize} style={fpsLabel}>
             renderableTexturesLoaded:
-          </Text>
-          <Text fontSize={infoFontSize} style={fpsLabel} x={230}>
+          </text>
+          <text fontSize={infoFontSize} style={fpsLabel} x={230}>
             {renderableTexturesLoadedSignal().toString()}
-          </Text>
-        </View>
+          </text>
+        </view>
 
-        <View height={infoFontSize}>
-          <Text fontSize={infoFontSize} style={fpsLabel}>
+        <view height={infoFontSize}>
+          <text fontSize={infoFontSize} style={fpsLabel}>
             loadedTextures:
-          </Text>
-          <Text fontSize={infoFontSize} style={fpsLabel} x={230}>
+          </text>
+          <text fontSize={infoFontSize} style={fpsLabel} x={230}>
             {loadedTexturesSignal().toString()}
-          </Text>
-        </View>
-      </View>
-    </View>
+          </text>
+        </view>
+      </view>
+    </view>
   );
 };

package/src/primitives/FadeInOut.tsx

@@ -0,0 +1,34 @@
+import { ElementNode, NodeProps, View  } from '@lightningtv/solid';
+import { Show } from 'solid-js';
+
+interface Props {
+  transition?: {
+    duration?: number;
+    easing?: string;
+  };
+  when?: boolean;
+}
+
+const DEFAULT_PROPS = {
+  duration: 250,
+  easing: 'ease-in-out',
+};
+
+export default function FadeInOut(props: Props & NodeProps) {
+  const config = Object.assign({}, DEFAULT_PROPS, props.transition);
+  function onCreate(elm: ElementNode) {
+    elm.alpha = 0;
+    elm.animate({ alpha: 1 }, { duration: config.duration, easing: config.easing }).start();
+  }
+
+  function onDestroy(elm: ElementNode) {
+    elm.rtt = true;
+    return elm.animate({ alpha: 0 }, { duration: config.duration, easing: config.easing })
+      .start().waitUntilStopped();
+  }
+
+  return (
+    <Show when={props.when} keyed>
+      <View {...props} onDestroy={onDestroy} onCreate={onCreate} />
+    </Show>);
+}

package/src/primitives/Grid.tsx

@@ -1,25 +1,51 @@
-import { ValidComponent, For, createSignal, createMemo } from "solid-js";
-import { View, Dynamic, type NodeProps, type ElementNode, isFunction } from "@lightningtv/solid";
+import { For, createSignal, createMemo, createEffect, JSX } from "solid-js";
+import { type NodeProps, ElementNode, NewOmit } from "@lightningtv/solid";
+import { chainRefs } from "./utils/chainFunctions.js";
 
-export const Grid = <T,>(props: {
-  item: ValidComponent;
+export interface GridItemProps<T> {
+  item:   T
+  index:  number
+  width:  number
+  height: number
+  x:      number
+  y:      number
+}
+
+export interface GridProps<T> extends NewOmit<NodeProps, 'children'> {
+  items: readonly T[];
+  children: (props: GridItemProps<T>) => JSX.Element,
   itemHeight?: number;
   itemWidth?: number;
   itemOffset?: number;
-  items: T[];
   columns?: number;
   looping?: boolean;
   scroll?: "auto" | "none";
   onSelectedChanged?: (index: number, grid: ElementNode, elm?: ElementNode) => void;
-} & NodeProps) => {
+}
+
+export function Grid<T>(props: GridProps<T>): JSX.Element {
+
   const [focusedIndex, setFocusedIndex] = createSignal(0);
   const baseColumns = 4;
 
+  const itemWidth = () => props.itemWidth ?? 300
+  const itemHeight = () => props.itemHeight ?? 300
+
   const columns = createMemo(() => props.columns || baseColumns);
-  const totalWidth = createMemo(() => (props.itemWidth ?? 300) + (props.itemOffset ?? 0));
-  const totalHeight = createMemo(() => (props.itemHeight ?? 300) + (props.itemOffset ?? 0));
+  const totalWidth = createMemo(() => itemWidth() + (props.itemOffset ?? 0));
+  const totalHeight = createMemo(() => itemHeight() + (props.itemOffset ?? 0));
+
+  function focus() {
+    const focusedElm = gridRef.children[focusedIndex()];
+    if (focusedElm instanceof ElementNode && !focusedElm.states.has('$focus')) {
+      focusedElm.setFocus();
+      props.onSelectedChanged?.call(gridRef, focusedIndex(), gridRef, focusedElm);
+      return true;
+    }
+    return false;
+  }
 
-  const moveFocus = (delta: number, elm: ElementNode) => {
+  function moveFocus(delta: number) {
     if (!props.items || props.items.length === 0) return false;
     const newIndex = focusedIndex() + delta;
 
@@ -37,13 +63,10 @@ export const Grid = <T,>(props: {
     } else {
       return false;
     }
-    const focusedElm = elm.children[focusedIndex()] as ElementNode;
-    focusedElm.setFocus();
-    isFunction(props.onSelectedChanged) && props.onSelectedChanged.call(elm, focusedIndex(), elm, focusedElm);
-    return true;
+    return focus();
   };
 
-  const handleHorizontalFocus = (delta: number, elm: ElementNode) => {
+  function handleHorizontalFocus(delta: number) {
     if (!props.items || props.items.length === 0) return false;
     const newIndex = focusedIndex() + delta;
     const isWithinRow = Math.floor(newIndex / columns()) === Math.floor(focusedIndex() / columns());
@@ -57,45 +80,46 @@ export const Grid = <T,>(props: {
     } else {
       return false;
     }
-    const focusedElm = elm.children[focusedIndex()] as ElementNode;
-    focusedElm.setFocus();
-    isFunction(props.onSelectedChanged) && props.onSelectedChanged.call(elm, focusedIndex(), elm, focusedElm);
-    return true;
+    return focus();
   };
 
-  function onFocus(this: ElementNode) {
-    handleHorizontalFocus(0, this);
-  }
+  // Handle focus when items change - important for autofocus
+  createEffect(() => {
+    if (props.items && props.items.length > 0 && gridRef && gridRef.states.has('$focus')) {
+      queueMicrotask(focus)
+    }
+  })
 
   const scrollY = createMemo(() =>
     props.scroll === "none" ? props.y ?? 0 : -Math.floor(focusedIndex() / columns()) * totalHeight() + (props.y || 0)
   );
 
+  let gridRef!: ElementNode;
   return (
-    <View
-      transition={{ y: true }}
+    <view
       {...props}
-      onUp={(_e, elm) => moveFocus(-columns(), elm)}
-      onDown={(_e, elm) => moveFocus(columns(), elm)}
-      onLeft={(_e, elm) => handleHorizontalFocus(-1, elm)}
-      onRight={(_e, elm) => handleHorizontalFocus(1, elm)}
-      onFocus={onFocus}
+      ref={chainRefs(el => gridRef = el, props.ref)}
+      transition={{ y: true }}
+      onUp={() => moveFocus(-columns())}
+      onDown={() => moveFocus(columns())}
+      onLeft={() => handleHorizontalFocus(-1)}
+      onRight={() => handleHorizontalFocus(1)}
+      onFocus={() => handleHorizontalFocus(0)}
       strictBounds={false}
       y={scrollY()}
     >
       <For each={props.items}>
         {(item, index) => (
-          <Dynamic
-            {...item}
-            component={props.item}
-            width={props.itemWidth}
-            height={props.itemHeight}
+          <props.children
+            item={item}
+            index={index()}
+            width={itemWidth()}
+            height={itemHeight()}
             x={(index() % columns()) * totalWidth()}
             y={Math.floor(index() / columns()) * totalHeight()}
           />
         )}
       </For>
-    </View>
+    </view>
   );
 };
-

package/src/primitives/Lazy.tsx

@@ -33,7 +33,7 @@ function createLazy<T>(
 
   createEffect(() => setOffset(offset => Math.max(offset, (props.selected || 0) + 1)));
 
-  if (!props.sync) {
+  if (!props.sync || props.eaglerLoad) {
     createEffect(() => {
       if (props.each) {
         const loadItems = () => {

package/src/primitives/Row.tsx

@@ -31,7 +31,7 @@ function scrollToIndex(this: ElementNode, index: number) {
 
 export const Row: Component<RowProps> = (props) => {
   return (
-    <View
+    <view
       {...props}
       selected={props.selected || 0}
       onLeft={/* @once */ chainFunctions(props.onLeft, onLeft)}

package/src/primitives/index.ts

@@ -3,7 +3,6 @@ export * from './announcer/index.js';
 export * from './createInfiniteItems.js';
 export * from './useMouse.js';
 export * from './portal.jsx';
-export * from './LazyUp.jsx';
 export * from './Lazy.jsx';
 export * from './Visible.jsx';
 export * from './router.js';
@@ -11,11 +10,16 @@ export * from './Column.jsx';
 export * from './Row.jsx';
 export * from './Grid.jsx';
 export * from './FPSCounter.jsx';
+export * from './FadeInOut.jsx';
 export * from './createFocusStack.jsx';
 export * from './marquee.jsx';
 export * from './useHold.js';
 export { withScrolling } from './utils/withScrolling.js';
-export { chainFunctions } from './utils/chainFunctions.js';
+export {
+  type AnyFunction,
+  chainFunctions,
+  chainRefs,
+} from './utils/chainFunctions.js';
 export { handleNavigation, onGridFocus } from './utils/handleNavigation.js';
 export { createSpriteMap, type SpriteDef } from './utils/createSpriteMap.js';
 

package/src/primitives/utils/chainFunctions.ts

@@ -1,13 +1,29 @@
-type ChainableFunction = (...args: unknown[]) => unknown;
+import * as s from 'solid-js';
 
-export function chainFunctions(...args: ChainableFunction[]): ChainableFunction;
-export function chainFunctions<T>(...args: (ChainableFunction | T)[]): T;
+export type AnyFunction = (this: any, ...args: any[]) => any;
 
-// take an array of functions and if you return true from a function, it will stop the chain
-export function chainFunctions<T extends ChainableFunction>(
-  ...args: (ChainableFunction | T)[]
-) {
-  const onlyFunctions = args.filter((func) => typeof func === 'function');
+/**
+ * take an array of functions and if you return `true` from a function, it will stop the chain
+ * @param fns list of functions to chain together, can be `undefined`, `null`, or `false` to skip them
+ * @returns a function that will call each function in the list until one returns `true` or all functions are called.
+ * If no functions are provided, it will return `undefined`.
+ *
+ * @example
+ * ```tsx
+ * function Button (props: NodeProps) {
+ *   function onEnter (el: ElementNode) {...}
+ *   return <view onEnter={chainFunctions(props.onEnter, onEnter)} />
+ * }
+ * ```
+ */
+export function chainFunctions<T extends AnyFunction>(...fns: T[]): T;
+export function chainFunctions<T extends AnyFunction>(
+  ...fns: (T | undefined | null | false)[]
+): T | undefined;
+export function chainFunctions(
+  ...fns: (AnyFunction | undefined | null | false)[]
+): AnyFunction | undefined {
+  const onlyFunctions = fns.filter((func) => typeof func === 'function');
   if (onlyFunctions.length === 0) {
     return undefined;
   }
@@ -16,7 +32,7 @@ export function chainFunctions<T extends ChainableFunction>(
     return onlyFunctions[0];
   }
 
-  return function (this: unknown | T, ...innerArgs: unknown[]) {
+  return function (...innerArgs) {
     let result;
     for (const func of onlyFunctions) {
       result = func.apply(this, innerArgs);
@@ -27,3 +43,18 @@ export function chainFunctions<T extends ChainableFunction>(
     return result;
   };
 }
+
+/**
+ * Utility for chaining multiple `ref` assignments with `props.ref` forwarding.
+ * @param refs list of ref setters. Can be a `props.ref` prop for ref forwarding or a setter to a local variable (`el => ref = el`).
+ * @example
+ * ```tsx
+ * function Button (props: NodeProps) {
+ *    let localRef: ElementNode | undefined
+ *    return <view ref={chainRefs(props.ref, el => localRef = el)} />
+ * }
+ * ```
+ */
+export const chainRefs = chainFunctions as <T>(
+  ...refs: (s.Ref<T> | undefined)[]
+) => (el: T) => void;

package/src/primitives/utils/createSpriteMap.ts

@@ -1,4 +1,4 @@
-import { renderer, type TextureMap } from '@lightningtv/core';
+import { type TextureMap, renderer } from '@lightningtv/core';
 
 export interface SpriteDef {
   name: string | number;

package/src/primitives/utils/withScrolling.ts

@@ -82,9 +82,10 @@ export function withScrolling(isRow: boolean) {
 
     // Allows manual position control
     const targetPosition = componentRef._targetPosition ?? componentRef[axis];
-    const rootPosition = isIncrementing
-      ? Math.min(targetPosition, componentRef[axis])
-      : Math.max(targetPosition, componentRef[axis]);
+    const rootPosition =
+      isIncrementing || scroll === 'auto'
+        ? Math.min(targetPosition, componentRef[axis])
+        : Math.max(targetPosition, componentRef[axis]);
     componentRef.offset = componentRef.offset ?? rootPosition;
     const offset = componentRef.offset;
     selectedElement =

package/src/render.ts

@@ -4,8 +4,8 @@ import {
   type NodeProps,
   type TextProps,
   startLightningRenderer,
-  type RendererMain,
   type RendererMainSettings,
+  type RendererMain as IRendererMain,
 } from '@lightningtv/core';
 import nodeOpts from './solidOpts.js';
 import {
@@ -14,14 +14,15 @@ import {
   createRenderEffect,
   untrack,
   type JSXElement,
-  type ValidComponent,
+  createRoot,
+  type Component,
 } from 'solid-js';
 import type { SolidNode } from './types.js';
 import { activeElement, setActiveElement } from './activeElement.js';
 
 const solidRenderer = solidCreateRenderer<SolidNode>(nodeOpts);
 
-let renderer: RendererMain;
+let renderer: IRendererMain;
 export const rootNode = nodeOpts.createElement('App');
 
 const render = function (code: () => JSXElement) {
@@ -71,11 +72,13 @@ type Task = () => void;
 const taskQueue: Task[] = [];
 let tasksEnabled = false;
 
-createRenderEffect(() => {
-  // should change whenever a keypress occurs, so we disable the task queue
-  // until the renderer is idle again.
-  activeElement();
-  tasksEnabled = false;
+createRoot(() => {
+  createRenderEffect(() => {
+    // should change whenever a keypress occurs, so we disable the task queue
+    // until the renderer is idle again.
+    activeElement();
+    tasksEnabled = false;
+  });
 });
 
 export function setTasksEnabled(enabled: boolean): void {
@@ -117,10 +120,8 @@ function processTasks(): void {
  * ```
  * @description https://www.solidjs.com/docs/latest/api#dynamic
  */
-export function Dynamic<T>(
-  props: T & {
-    component?: ValidComponent;
-  },
+export function Dynamic<T extends Record<string, any>>(
+  props: T & { component?: Component<T> | undefined | null },
 ): JSXElement {
   const [p, others] = splitProps(props, ['component']);