@lightningtv/solid 3.0.0-1 → 3.0.0-10

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/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

@@ -8,8 +8,8 @@ import {
   type ValidComponent,
   untrack,
   type Accessor,
-} from 'solid-js';
-import { Dynamic, type NewOmit, scheduleTask, type NodeProps } from '@lightningtv/solid';
+} from 'solid-js'; // Dynamic removed
+import { type NewOmit, scheduleTask, type NodeProps, Dynamic } from '@lightningtv/solid'; // Dynamic removed from imports
 import { Row, Column } from '@lightningtv/solid/primitives';
 
 type LazyProps<T extends readonly any[]> = NewOmit<NodeProps, 'children'> & {
@@ -28,26 +28,23 @@ function createLazy<T>(
   keyHandler: (updateOffset: () => void) => Record<string, () => void>
 ) {
   // Need at least one item so it can be focused
-  const [offset, setOffset] = createSignal(1);
+  const [offset, setOffset] = createSignal<number>(props.sync ? props.upCount : 1);
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
 
-  createEffect(() => setOffset(props.selected || 1));
+  createEffect(() => setOffset(offset => Math.max(offset, (props.selected || 0) + 1)));
 
-  if (props.sync) {
-    setOffset(props.upCount);
-  } else {
+  if (!props.sync || props.eaglerLoad) {
     createEffect(() => {
       if (props.each) {
-        let count = untrack(offset);
-
         const loadItems = () => {
+          let count = untrack(offset);
           if (count < props.upCount) {
             setOffset(count + 1);
             timeoutId = setTimeout(loadItems, 16); // ~60fps
             count++;
           } else if (props.eagerLoad) {
             const maxOffset = props.each ? props.each.length : 0;
-            if (offset() > maxOffset) return;
+            if (offset() >= maxOffset) return;
             setOffset((prev) => Math.min(prev + 1, maxOffset));
             scheduleTask(loadItems);
           }
@@ -57,13 +54,25 @@ function createLazy<T>(
     });
   }
 
-  const items = createMemo(() => (Array.isArray(props.each) ? props.each.slice(0, offset()) : []));
+  const items = createMemo(() => (
+    Array.isArray(props.each) ? props.each.slice(0, offset()) : [])
+  );
 
   const updateOffset = () => {
     const maxOffset = props.each ? props.each.length : 0;
     if (offset() >= maxOffset) return;
 
-    if (timeoutId) clearTimeout(timeoutId);
+    if (!props.delay) {
+      setOffset((prev) => Math.min(prev + 1, maxOffset));
+      return;
+    }
+
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      //Moving faster than the delay so need to go sync
+      setOffset((prev) => Math.min(prev + 1, maxOffset));
+    }
+
     timeoutId = setTimeout(() => {
       setOffset((prev) => Math.min(prev + 1, maxOffset));
       timeoutId = null;

package/src/primitives/Marquee.tsx

@@ -0,0 +1,149 @@
+import * as s from 'solid-js'
+import * as lng from '@lightningtv/solid'
+import { chainFunctions } from './utils/chainFunctions.js'
+
+export interface MarqueeAnimationProps {
+  /** delay in ms between animations, @default 1000 */
+  delay?: number
+  /** pixels per second, @default 200 */
+  speed?: number
+  /**
+   * distance between the end of the text and the start of the next animation
+   * @default `0.5 * clipWidth`
+   */
+  scrollGap?: number
+  /** easing function, @default 'linear' */
+  easing?: string
+}
+
+export interface MarqueeControlProps {
+  /** whether to scroll the text or show it contained */
+  marquee: boolean
+}
+
+export interface MarqueeTextProps
+  extends lng.TextProps, MarqueeControlProps, MarqueeAnimationProps {
+  /** width of the container */
+  clipWidth: number
+}
+
+export interface MarqueeProps
+  extends lng.NewOmit<lng.NodeProps, 'children'>, MarqueeControlProps, MarqueeAnimationProps {
+  textProps?: lng.TextProps
+  children:   lng.TextProps['children']
+}
+
+const SAFETY_MARGIN = 10
+
+/**
+ * MarqueeText is a component that scrolls text when it overflows the container.
+ *
+ * @example
+ * ```tsx
+ * <view width={400} height={28} clipping>
+ *   <MarqueeText
+ *     clipWidth={400}
+ *     marquee={inFocus()}
+ *     speed={200}
+ *     delay={1000}
+ *     scrollGap={24}
+ *     easing='ease-in-out'
+ *   >
+ *     This is a long text that will scroll when it overflows the container.
+ *   </MarqueeText>
+ * </view>
+ */
+export function MarqueeText(props: MarqueeTextProps) {
+
+  const speed = s.createMemo(() => props.speed || 200)
+  const delay = s.createMemo(() => props.delay ?? 1000)
+  const scrollGap = s.createMemo(() => props.scrollGap ?? (props.clipWidth * 0.5))
+
+  const [textWidth, setTextWidth] = s.createSignal(0)
+
+  const isTextOverflowing = s.createMemo(() => textWidth() > props.clipWidth - SAFETY_MARGIN)
+  const shouldScroll = s.createMemo(() => props.marquee && isTextOverflowing())
+
+  const wasFocusedBefore = s.createMemo<boolean>(p => p || props.marquee, false)
+
+  s.createEffect(() => {
+    if (shouldScroll()) {
+
+      let options: lng.AnimationSettings = {
+        duration: (textWidth() + scrollGap()) / speed() * 1000,
+        delay: delay(),
+        loop: true,
+        easing: props.easing,
+      }
+
+      text1.lng.x = 0
+      text2.lng.x = textWidth() + scrollGap()
+
+      let a1 = text1.lng.animate!({x: -textWidth() -scrollGap()}, options).start()
+      let a2 = text2.lng.animate!({x: 0}, options).start()
+
+      s.onCleanup(() => {
+        a1.stop()
+        a2.stop()
+      })
+    }
+  })
+
+  const events = {loaded(el: lng.ElementNode) {setTextWidth(el.width)}}
+
+  let text1!: lng.ElementNode
+  let text2!: lng.ElementNode
+  return (
+    <>
+      {wasFocusedBefore() && <>
+        <text {...props} ref={text1} hidden={!shouldScroll()} rtt maxLines={1} onEvent={events} />
+        <text {...props} ref={text2} hidden={!shouldScroll()} rtt maxLines={1} />
+      </>}
+      <text {...props} maxLines={1} hidden={shouldScroll()} contain='width' />
+    </>
+  )
+}
+
+/**
+ * Marquee is a component that scrolls text when it overflows the container.
+ * It uses the {@link MarqueeText} component to do the actual scrolling.
+ *
+ * @example
+ * ```tsx
+ * <Marquee
+ *   width={400}
+ *   marquee={inFocus()}
+ *   easing='ease-in-out'
+ *   textProps={{
+ *     fontSize: 28,
+ *   }}
+ * >
+ *   This is a long text that will scroll when it overflows the container.
+ * </Marquee>
+ * ```
+ */
+export function Marquee(props: MarqueeProps) {
+  const [clipWidth, setClipWidth] = s.createSignal(props.width || 0);
+  const clipHeight = s.createMemo(() => props.height || props.textProps?.lineHeight || ((props.textProps?.fontSize || 16) * 1.5));
+
+  return (
+    <view
+      {...props}
+      height={clipHeight()}
+      onLayout={/* @once */ chainFunctions(props.onLayout, (e: lng.ElementNode) => setClipWidth(e.width))}
+      clipping={props.marquee}
+    >
+      <MarqueeText
+        {...props.textProps}
+        marquee={props.marquee}
+        clipWidth={clipWidth()}
+        speed={props.speed}
+        delay={props.delay}
+        scrollGap={props.scrollGap}
+        easing={props.easing}
+      >
+        {props.children}
+      </MarqueeText>
+    </view>
+  )
+}

package/src/primitives/Preserve.tsx

@@ -0,0 +1,18 @@
+import * as s from 'solid-js'
+import * as lng from '@lightningtv/solid'
+
+function Preserve(props: lng.NodeProps): s.JSX.Element {
+
+  let view = <view {...props} /> as any as lng.ElementNode
+
+  view.preserve = true;
+
+  view.onRender ??= () => {view.hidden = false}
+  view.onRemove ??= () => {view.hidden = true}
+
+  s.onCleanup(() => {view.destroy()})
+
+  return view as any as s.JSX.Element
+}
+
+export default Preserve;

package/src/primitives/Row.tsx

@@ -1,5 +1,5 @@
 import { type Component } from 'solid-js';
-import { combineStyles, type NodeStyles, View, type ElementNode } from '@lightningtv/solid';
+import { combineStyles, type NodeStyles, View, type ElementNode, Config } from '@lightningtv/solid';
 import { chainFunctions } from './utils/chainFunctions.js';
 import {
   handleNavigation,
@@ -30,17 +30,24 @@ function scrollToIndex(this: ElementNode, index: number) {
 }
 
 export const Row: Component<RowProps> = (props) => {
+  const gridFocus = onGridFocus(props.onSelectedChanged);
+  const refocus = (elm: ElementNode) => {
+    if (elm.states.has(Config.focusStateKey)) {
+      gridFocus.call(elm);
+    }
+  };
+
   return (
-    <View
+    <view
       {...props}
       selected={props.selected || 0}
       onLeft={/* @once */ chainFunctions(props.onLeft, onLeft)}
       onRight={/* @once */ chainFunctions(props.onRight, onRight)}
-      forwardFocus={/* once */ onGridFocus(props.onSelectedChanged)}
+      forwardFocus={gridFocus}
       scrollToIndex={scrollToIndex}
       onLayout={
         /* @once */
-        props.selected ? chainFunctions(props.onLayout, scroll) : props.onLayout
+        props.selected ? chainFunctions(props.onLayout, refocus, scroll) : props.onLayout
       }
       onSelectedChanged={
         /* @once */ chainFunctions(

package/src/primitives/Suspense.tsx

@@ -0,0 +1,41 @@
+import * as s from 'solid-js';
+
+/**
+ * Tracks all resources inside a component and renders a fallback until they are all resolved.
+ *
+ * ```tsx
+ * const [data] = createResource(async () => ...);
+ *
+ * <Suspense fallback={<LoadingIndicator />}>
+ *   <view>
+ *     <text>{data()}</text>
+ *   </view>
+ * </Suspense>
+ * ```
+ *
+ * This is a modified version of the SolidJS Suspense component that works with Lightning.
+ *
+ * @see https://docs.solidjs.com/reference/components/suspense
+ */
+function Suspense(props: {
+  fallback?: s.JSX.Element;
+  children: s.JSX.Element;
+}): s.JSX.Element {
+
+  let children: s.JSX.Element;
+
+  let suspense = s.Suspense({
+    get children() {
+      return [children = s.children(() => props.children) as any];
+    },
+  }) as any as () => s.JSX.Element;
+
+  return <>
+    {suspense() ?? props.fallback}
+    <view hidden>
+      {suspense() ? null : children}
+    </view>
+  </>
+}
+
+export default Suspense;

package/src/primitives/announcer/announcer.ts

@@ -73,8 +73,9 @@ function onFocusChangeCore(focusPath: ElementNode[] = []) {
   prevFocusPath = focusPath.slice(0);
 
   const toAnnounceText: SpeechType[] = [];
-  const toAnnounce = focusDiff.reduce(
-    (acc: [string, string, SpeechType][], elm) => {
+  const toAnnounce = focusDiff
+    .reverse()
+    .reduce((acc: [string, string, SpeechType][], elm) => {
       if (elm.announce) {
         acc.push([getElmName(elm), 'Announce', elm.announce]);
         toAnnounceText.push(elm.announce);
@@ -85,9 +86,7 @@ function onFocusChangeCore(focusPath: ElementNode[] = []) {
         acc.push([getElmName(elm), 'No Announce', '']);
       }
       return acc;
-    },
-    [],
-  );
+    }, []);
 
   focusDiff.reverse().reduce((acc, elm) => {
     if (elm.announceContext) {
@@ -110,18 +109,19 @@ function onFocusChangeCore(focusPath: ElementNode[] = []) {
   }
 }
 
-function textToSpeech(toSpeak: SpeechType, lang: string) {
+function textToSpeech(toSpeak: SpeechType, lang: string, voice?: string) {
   if (voiceOutDisabled) {
     return;
   }
 
-  return (currentlySpeaking = SpeechEngine(toSpeak, lang));
+  return (currentlySpeaking = SpeechEngine(toSpeak, lang, voice));
 }
 
 export interface Announcer {
   debug: boolean;
   enabled: boolean;
   lang: string;
+  voice?: string;
   cancel: VoidFunction;
   clearPrevFocus: (depth?: number) => void;
   speak: (
@@ -147,14 +147,13 @@ export const Announcer: Announcer = {
     prevFocusPath = prevFocusPath.slice(0, depth);
     resetFocusPathTimer();
   },
-  speak: function (text, { append = false, notification = false} = {}) {
+  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, Announcer.lang);
+        textToSpeech(text, Announcer.lang, Announcer.voice);
       }
 
       if (notification) {