@lightningtv/solid 3.0.0-2 → 3.0.0-20

package/src/primitives/Grid.tsx

@@ -1,25 +1,51 @@
-import { ValidComponent, For, createSignal, createMemo } from "solid-js";
-import { 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,39 +80,41 @@ 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 }}
       {...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()}
           />
@@ -98,4 +123,3 @@ export const Grid = <T,>(props: {
     </view>
   );
 };
-

package/src/primitives/Image.tsx

@@ -0,0 +1,36 @@
+import { type Component, createRenderEffect, createSignal } from 'solid-js';
+import { renderer, type NodeProps, type ImageTexture} from '@lightningtv/solid';
+export interface ImageProps extends NodeProps {
+  src: string;
+  /* image to load while src is being loaded */
+  placeholder?: string;
+  fallback?: string;
+}
+
+export const Image: Component<ImageProps> = (props) => {
+  const [texture, setTexture] = createSignal<any>(null);
+  const [src, setSrc] = createSignal<string | null>(props.placeholder || null);
+
+  createRenderEffect(() => {
+    const srcTexture = renderer.createTexture('ImageTexture', props) as ImageTexture;
+
+    if (props.fallback) {
+      srcTexture.once('failed', () => {
+        if (props.fallback === props.placeholder) {
+          return;
+        }
+        setSrc(props.fallback!);
+      });
+    }
+
+    srcTexture.getTextureData().then(resp => {
+      // if texture fails to load, this is still called after the failed handler
+      if (resp.data)
+        setTexture(srcTexture);
+    })
+  })
+
+  return (
+    <view {...props} src={src()} color={props.color || 0xffffffff} texture={texture()} />
+  );
+};

package/src/primitives/KeepAlive.tsx

@@ -0,0 +1,124 @@
+import { Route, RoutePreloadFuncArgs, RouteProps } from "@solidjs/router";
+import * as s from 'solid-js';
+import { ElementNode } from "@lightningtv/solid";
+
+export interface KeepAliveElement {
+  id: string;
+  owner: s.Owner | null;
+  children: s.JSX.Element;
+  routeSignal?: s.Signal<unknown>;
+  dispose: () => void;
+}
+
+const keepAliveElements = new Map<string, KeepAliveElement>();
+
+export const storeKeepAlive = (
+  element: KeepAliveElement
+): KeepAliveElement | undefined => {
+  if (keepAliveElements.has(element.id)) {
+    console.warn(`[KeepAlive] Element with id "${element.id}" already in cache. Recreating.`);
+    return element;
+  }
+  keepAliveElements.set(element.id, element);
+  return element;
+};
+
+export const removeKeepAlive = (id: string): void => {
+  const element = keepAliveElements.get(id);
+  if (element) {
+    element.dispose();
+    keepAliveElements.delete(id);
+  }
+};
+
+interface KeepAliveProps {
+  id: string;
+  shouldDispose?: (key: string) => boolean;
+  onRemove?: ElementNode['onRemove'];
+  onRender?: ElementNode['onRender'];
+  transition?: ElementNode['transition'];
+}
+
+function wrapChildren(props: s.ParentProps<KeepAliveProps>) {
+  const onRemove = props.onRemove || ((elm: ElementNode) => { elm.alpha = 0; });
+  const onRender = props.onRender || ((elm: ElementNode) => { elm.alpha = 1; });
+  const transition = props.transition || { alpha: true };
+
+  return (
+    <view
+      preserve
+      onRemove={onRemove}
+      onRender={onRender}
+      forwardFocus={0}
+      transition={transition}
+      {...props}
+    />)
+}
+
+export const KeepAlive = (props: s.ParentProps<KeepAliveProps>) => {
+  let existing = keepAliveElements.get(props.id)
+
+  if (existing && props.shouldDispose?.(props.id)) {
+    existing.dispose();
+    keepAliveElements.delete(props.id);
+    existing = undefined;
+  }
+
+  if (!existing) {
+    return s.createRoot((dispose) => {
+      const children = wrapChildren(props);
+      storeKeepAlive({
+        id: props.id,
+        owner: s.getOwner(),
+        children,
+        dispose,
+      });
+      return children;
+    });
+  } else if (existing && !existing.children) {
+    existing.children = s.runWithOwner(existing.owner, () => wrapChildren(props));
+  }
+  return existing.children;
+};
+
+export const KeepAliveRoute = <S extends string>(props: RouteProps<S> & {
+  id?: string,
+  path: string,
+  component: s.Component<RouteProps<S>>,
+  shouldDispose?: (key: string) => boolean,
+  onRemove?: ElementNode['onRemove'];
+  onRender?: ElementNode['onRender'];
+  transition?: ElementNode['transition'];
+}) => {
+  const key = props.id || props.path;
+
+  const preload = props.preload ? (preloadProps: RoutePreloadFuncArgs) => {
+    let existing = keepAliveElements.get(key)
+
+    if (existing && props.shouldDispose?.(key)) {
+      existing.dispose();
+      keepAliveElements.delete(key);
+      existing = undefined;
+    }
+
+    if (!existing) {
+      return s.createRoot((dispose) => {
+        storeKeepAlive({
+          id: key,
+          owner: s.getOwner(),
+          dispose,
+          children: null,
+        });
+        return props.preload!(preloadProps);
+      });
+    } else if (existing.children) {
+      (existing.children as unknown as ElementNode)?.setFocus();
+    }
+  } : undefined;
+
+  return (<Route {...props} preload={preload} component={(childProps) =>
+            <KeepAlive id={key} onRemove={props.onRemove} onRender={props.onRender} transition={props.transition}>
+              {props.component(childProps)}
+            </KeepAlive>
+        }/>);
+};

package/src/primitives/Lazy.tsx

@@ -1,54 +1,55 @@
-import {
-  Index,
-  createEffect,
-  createMemo,
-  createSignal,
-  Show,
-  type JSX,
-  type ValidComponent,
-  untrack,
-  type Accessor,
-} from 'solid-js';
-import { Dynamic, type NewOmit, scheduleTask, type NodeProps } from '@lightningtv/solid';
-import { Row, Column } from '@lightningtv/solid/primitives';
+import * as s from 'solid-js';
+import * as lng from '@lightningtv/solid';
+import * as lngp from '@lightningtv/solid/primitives';
 
-type LazyProps<T extends readonly any[]> = NewOmit<NodeProps, 'children'> & {
+type LazyProps<T extends readonly any[]> = lng.NewOmit<lng.NodeProps, 'children'> & {
   each: T | undefined | null | false;
-  fallback?: JSX.Element;
   upCount: number;
+  buffer?: number;
   delay?: number;
   sync?: boolean;
   eagerLoad?: boolean;
-  children: (item: Accessor<T[number]>, index: number) => JSX.Element;
+  noRefocus?: boolean;
+  children: (item: s.Accessor<T[number]>, index: number) => s.JSX.Element;
 };
 
 function createLazy<T>(
-  component: ValidComponent,
+  component: s.ValidComponent,
   props: LazyProps<readonly T[]>,
-  keyHandler: (updateOffset: () => void) => Record<string, () => void>
+  keyHandler: (updateOffset: (event: KeyboardEvent, container: lng.ElementNode) => void) => Record<string, (event: KeyboardEvent, container: lng.ElementNode) => void>
 ) {
   // Need at least one item so it can be focused
-  const [offset, setOffset] = createSignal(1);
+  const [offset, setOffset] = s.createSignal<number>(props.sync ? props.upCount : 0);
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  let viewRef!: lngp.NavigableElement;
+  let itemLength: number = 0;
 
-  createEffect(() => setOffset((props.selected || 0) + 1));
+  const buffer = s.createMemo(() => {
+    if (typeof props.buffer === 'number') {
+      return props.buffer;
+    }
+    const scroll = props.scroll || props.style?.scroll;
+    if (!scroll || scroll === 'auto' || scroll === 'always') return props.upCount + 1;
+    if (scroll === 'center') return Math.ceil(props.upCount / 2) + 1;
+    return 2;
+  });
+
+  s.createRenderEffect(() => setOffset(offset => Math.max(offset, (props.selected || 0) + buffer())));
 
-  if (props.sync) {
-    setOffset(props.upCount);
-  } else {
-    createEffect(() => {
+  if (!props.sync || props.eagerLoad) {
+    s.createEffect(() => {
       if (props.each) {
         const loadItems = () => {
-          let count = untrack(offset);
+          let count = s.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 (count >= maxOffset) return;
             setOffset((prev) => Math.min(prev + 1, maxOffset));
-            scheduleTask(loadItems);
+            lng.scheduleTask(loadItems);
           }
         };
         loadItems();
@@ -56,11 +57,30 @@ function createLazy<T>(
     });
   }
 
-  const items = createMemo(() => (Array.isArray(props.each) ? props.each.slice(0, offset()) : []));
+  const items: s.Accessor<T[]> = s.createMemo(() => {
+    if (Array.isArray(props.each)) {
+      if (itemLength != props.each.length) {
+        itemLength = props.each.length;
+        if (viewRef && !viewRef.noRefocus && lng.hasFocus(viewRef)) {
+          queueMicrotask(viewRef.setFocus);
+        }
+      }
+      return props.each.slice(0, offset());
+    }
+    itemLength = 0;
+    return [];
+  });
+
+  function lazyScrollToIndex(this: lngp.NavigableElement, index: number) {
+    setOffset(Math.max(index, 0) + buffer())
+    queueMicrotask(() => viewRef.scrollToIndex(index));
+  }
 
-  const updateOffset = () => {
+  const updateOffset = (_event: KeyboardEvent, container: lng.ElementNode) => {
     const maxOffset = props.each ? props.each.length : 0;
-    if (offset() >= maxOffset) return;
+    const selected = container.selected || 0;
+    const numChildren = container.children.length;
+    if (offset() >= maxOffset || selected < numChildren - buffer()) return;
 
     if (!props.delay) {
       setOffset((prev) => Math.min(prev + 1, maxOffset));
@@ -82,18 +102,21 @@ function createLazy<T>(
   const handler = keyHandler(updateOffset);
 
   return (
-    <Show when={items()} fallback={props.fallback}>
-      <Dynamic component={component} {...props} {/* @once */ ...handler}>
-        <Index each={items()} children={props.children} />
-      </Dynamic>
-    </Show>
+    <lng.Dynamic
+      {...props}
+      component={component}
+      {/* @once */ ...handler}
+      lazyScrollToIndex={lazyScrollToIndex}
+      ref={lngp.chainRefs(el => { viewRef = el as lngp.NavigableElement; }, props.ref)} >
+      <s.Index each={items()} children={props.children} />
+    </lng.Dynamic>
   );
 }
 
 export function LazyRow<T extends readonly any[]>(props: LazyProps<T>) {
-  return createLazy(Row, props, (updateOffset) => ({ onRight: updateOffset }));
+  return createLazy(lngp.Row, props, (updateOffset) => ({ onRight: updateOffset }));
 }
 
 export function LazyColumn<T extends readonly any[]>(props: LazyProps<T>) {
-  return createLazy(Column, props, (updateOffset) => ({ onDown: updateOffset }));
+  return createLazy(lngp.Column, props, (updateOffset) => ({ onDown: updateOffset }));
 }

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,12 +1,12 @@
 import { type Component } from 'solid-js';
-import { combineStyles, type NodeStyles, View, type ElementNode } from '@lightningtv/solid';
+import { combineStyles, type NodeStyles, type ElementNode } from '@lightningtv/solid';
 import { chainFunctions } from './utils/chainFunctions.js';
 import {
   handleNavigation,
-  onGridFocus,
+  navigableForwardFocus
 } from './utils/handleNavigation.js';
-import { withScrolling } from './utils/withScrolling.js';
 import type { RowProps } from './types.js';
+import { scrollRow } from './utils/withScrolling.js';
 
 const RowStyles: NodeStyles = {
   display: 'flex',
@@ -19,16 +19,15 @@ const RowStyles: NodeStyles = {
   },
 };
 
-const onLeft = handleNavigation('left');
-const onRight = handleNavigation('right');
-const scroll = withScrolling(true);
-
 function scrollToIndex(this: ElementNode, index: number) {
   this.selected = index;
-  scroll(index, this);
-  this.setFocus();
+  scrollRow(index, this);
+  this.children[index]?.setFocus();
 }
 
+const onLeft = handleNavigation('left');
+const onRight = handleNavigation('right');
+
 export const Row: Component<RowProps> = (props) => {
   return (
     <view
@@ -36,16 +35,16 @@ export const Row: Component<RowProps> = (props) => {
       selected={props.selected || 0}
       onLeft={/* @once */ chainFunctions(props.onLeft, onLeft)}
       onRight={/* @once */ chainFunctions(props.onRight, onRight)}
-      forwardFocus={/* once */ onGridFocus(props.onSelectedChanged)}
+      forwardFocus={navigableForwardFocus}
       scrollToIndex={scrollToIndex}
       onLayout={
         /* @once */
-        props.selected ? chainFunctions(props.onLayout, scroll) : props.onLayout
+        props.selected ? chainFunctions(props.onLayout, scrollRow) : props.onLayout
       }
       onSelectedChanged={
         /* @once */ chainFunctions(
           props.onSelectedChanged,
-          props.scroll !== 'none' ? scroll : undefined,
+          props.scroll !== 'none' ? scrollRow : undefined,
         )
       }
       style={/* @once */ combineStyles(props.style, RowStyles)}