@lightningtv/solid 3.0.0-17 → 3.0.0-19

package/src/primitives/Lazy.tsx

@@ -1,56 +1,44 @@
-import {
-  Index,
-  createEffect,
-  createRenderEffect,
-  createMemo,
-  createSignal,
-  createReaction,
-  Show,
-  type JSX,
-  type ValidComponent,
-  untrack,
-  type Accessor,
-} from 'solid-js'; // Dynamic removed
-import { type NewOmit, scheduleTask, type NodeProps, Dynamic, ElementNode } from '@lightningtv/solid'; // Dynamic removed from imports
-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;
+  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: (event: KeyboardEvent, container: ElementNode) => void) => Record<string, (event: KeyboardEvent, container: ElementNode) => 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<number>(props.sync ? props.upCount : 0);
+  const [offset, setOffset] = s.createSignal<number>(props.sync ? props.upCount : 0);
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  let viewRef!: lngp.NavigableElement;
 
-  const buffer = createMemo(() => {
+  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;
-    if (scroll === 'center') return Math.ceil(props.upCount / 2);
+    if (!scroll || scroll === 'auto' || scroll === 'always') return props.upCount + 1;
+    if (scroll === 'center') return Math.ceil(props.upCount / 2) + 1;
     return 2;
   });
 
-  createRenderEffect(() => setOffset(offset => Math.max(offset, (props.selected || 0) + buffer())));
+  s.createRenderEffect(() => setOffset(offset => Math.max(offset, (props.selected || 0) + buffer())));
 
-  if (!props.sync || props.eaglerLoad) {
-    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
@@ -59,7 +47,7 @@ function createLazy<T>(
             const maxOffset = props.each ? props.each.length : 0;
             if (count >= maxOffset) return;
             setOffset((prev) => Math.min(prev + 1, maxOffset));
-            scheduleTask(loadItems);
+            lng.scheduleTask(loadItems);
           }
         };
         loadItems();
@@ -67,11 +55,16 @@ function createLazy<T>(
     });
   }
 
-  const items = createMemo(() => (
+  const items: s.Accessor<T[]> = s.createMemo(() => (
     Array.isArray(props.each) ? props.each.slice(0, offset()) : [])
   );
 
-  const updateOffset = (_event: KeyboardEvent, container: ElementNode) => {
+  function lazyScrollToIndex(this: lngp.NavigableElement, index: number) {
+    setOffset(Math.max(index, 0) + buffer())
+    queueMicrotask(() => viewRef.scrollToIndex(index));
+  }
+
+  const updateOffset = (_event: KeyboardEvent, container: lng.ElementNode) => {
     const maxOffset = props.each ? props.each.length : 0;
     const selected = container.selected || 0;
     const numChildren = container.children.length;
@@ -97,18 +90,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/Row.tsx

@@ -2,10 +2,11 @@ import { type Component } from 'solid-js';
 import { combineStyles, type NodeStyles, type ElementNode } from '@lightningtv/solid';
 import { chainFunctions } from './utils/chainFunctions.js';
 import {
-  navigableForwardFocus, navigableHandleNavigation
+  handleNavigation,
+  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',
@@ -18,31 +19,32 @@ const RowStyles: NodeStyles = {
   },
 };
 
-const scroll = withScrolling(true);
-
 function scrollToIndex(this: ElementNode, index: number) {
   this.selected = index;
-  scroll(index, this);
+  scrollRow(index, this);
   this.children[index]?.setFocus();
 }
 
+const onLeft = handleNavigation('left');
+const onRight = handleNavigation('right');
+
 export const Row: Component<RowProps> = (props) => {
   return (
     <view
       {...props}
       selected={props.selected || 0}
-      onLeft={/* @once */ chainFunctions(props.onLeft, navigableHandleNavigation)}
-      onRight={/* @once */ chainFunctions(props.onRight, navigableHandleNavigation)}
+      onLeft={/* @once */ chainFunctions(props.onLeft, onLeft)}
+      onRight={/* @once */ chainFunctions(props.onRight, onRight)}
       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)}

package/src/primitives/Virtual.tsx

@@ -0,0 +1,471 @@
+import * as s from 'solid-js';
+import * as lng from '@lightningtv/solid';
+import * as lngp from '@lightningtv/solid/primitives';
+import { List } from '@solid-primitives/list';
+import * as utils from '../utils.js';
+
+export type VirtualProps<T> = lng.NewOmit<lngp.RowProps, 'children'> & {
+  each: readonly T[] | undefined | null | false;
+  displaySize: number;
+  bufferSize?: number;
+  wrap?: boolean;
+  scrollIndex?: number;
+  onEndReached?: () => void;
+  onEndReachedThreshold?: number;
+  debugInfo?: boolean;
+  factorScale?: boolean;
+  uniformSize?: boolean;
+  children: (item: s.Accessor<T>, index: s.Accessor<number>) => s.JSX.Element;
+};
+
+function createVirtual<T>(
+  component: typeof lngp.Row | typeof lngp.Column,
+  props: VirtualProps<T>,
+  keyHandlers: Record<string, lng.KeyHandler>
+) {
+  const isRow = component === lngp.Row;
+  const axis = isRow ? 'x' : 'y';
+  const [cursor, setCursor] = s.createSignal(props.selected ?? 0);
+  const bufferSize = s.createMemo(() => props.bufferSize || 2);
+  const scrollIndex = s.createMemo(() => props.scrollIndex || 0);
+  const items = s.createMemo(() => props.each || []);
+  const itemCount = s.createMemo(() => items().length);
+  const scrollType = s.createMemo(() => props.scroll || 'auto');
+
+  const selected = () => {
+    if (props.wrap) {
+      return Math.max(bufferSize(), scrollIndex());
+    }
+    return props.selected || 0;
+  };
+
+  let cachedScaledSize: number | undefined;
+  let targetPosition: number | undefined;
+  let cachedAnimationController: lng.IAnimationController | undefined;
+  const uniformSize = s.createMemo(() => {
+    return props.uniformSize !== false;
+  });
+
+  type SliceState = { start: number; slice: T[]; selected: number, delta: number, shiftBy: number, atStart: boolean };
+    const [slice, setSlice] = s.createSignal<SliceState>({
+      start: 0,
+      slice: [],
+      selected: 0,
+      delta: 0,
+      shiftBy: 0,
+      atStart: true,
+    });
+
+    function normalizeDeltaForWindow(delta: number, windowLen: number): number {
+      if (!windowLen) return 0;
+      const half = windowLen / 2;
+      if (delta > half) return delta - windowLen;
+      if (delta < -half) return delta + windowLen;
+      return delta;
+    }
+
+    function computeSize(selected: number = 0) {
+      if (uniformSize() && cachedScaledSize) {
+        return cachedScaledSize;
+      } else if (viewRef) {
+        const gap = viewRef.gap || 0;
+        const dimension = isRow ? 'width' : 'height'; // This can't be moved up as it depends on viewRef
+        const prevSelectedChild = viewRef.children[selected];
+
+        if (prevSelectedChild instanceof lng.ElementNode) {
+          const itemSize = prevSelectedChild[dimension] || 0;
+          const focusStyle = (prevSelectedChild.style?.focus as lng.NodeStyles);
+          const scale = (focusStyle?.scale ?? prevSelectedChild.scale ?? 1);
+          const scaledSize = itemSize * (props.factorScale ? scale : 1) + gap;
+          cachedScaledSize = scaledSize;
+          return scaledSize;
+        }
+      }
+      return 0;
+    }
+
+    function computeSlice(c: number, delta: number, prev: SliceState): SliceState {
+      const total = itemCount();
+      if (total === 0) return { start: 0, slice: [], selected: 0, delta, shiftBy: 0, atStart: true };
+
+      const length = props.displaySize + bufferSize();
+      let start = prev.start;
+      let selected = prev.selected;
+      let atStart = prev.atStart;
+      let shiftBy = -delta;
+
+      switch (scrollType()) {
+        case 'always':
+          if (props.wrap) {
+            start = utils.mod(c - 1, total);
+            selected = 1;
+          } else {
+            start = utils.clamp(
+              c - bufferSize(),
+              0,
+              Math.max(0, total - props.displaySize - bufferSize()),
+            );
+            if (delta === 0 && c > 3) {
+              shiftBy = c < 3 ? -c : -2;
+              selected = 2;
+            } else {
+              selected =
+                c < bufferSize()
+                  ? c
+                  : c >= total - props.displaySize
+                  ? c - (total - props.displaySize) + bufferSize()
+                  : bufferSize();
+            }
+          }
+          break;
+
+        case 'auto':
+        if (props.wrap) {
+          if (delta === 0) {
+            selected = scrollIndex() || 1;
+            start = utils.mod(c - (scrollIndex() || 1), total);
+          } else {
+            start = utils.mod(c - (prev.selected || 1), total);
+          }
+        } else {
+          if (delta < 0) {
+            // Moving left
+            if (prev.start > 0 && prev.selected >= props.displaySize) {
+              // Move selection left inside slice
+              start = prev.start;
+              selected = prev.selected - 1;
+            } else if (prev.start > 0) {
+              // Move selection left inside slice
+              start = prev.start - 1;
+              selected = prev.selected;
+              // shiftBy = 0;
+            } else if (prev.start === 0 && !prev.atStart) {
+              start = 0;
+              selected = prev.selected - 1;
+              atStart = true;
+            }  else if (selected >= props.displaySize - 1) {
+              // Shift window left, keep selection pinned
+              start = 0;
+              selected = prev.selected - 1;
+            } else {
+              start = 0;
+              selected = prev.selected - 1;
+              shiftBy = 0;
+            }
+          } else if (delta > 0) {
+            // Moving right
+            if (prev.selected < scrollIndex()) {
+              // Move selection right inside slice
+              start = prev.start;
+              selected = prev.selected + 1;
+              shiftBy = 0;
+            } else if (prev.selected === scrollIndex() || atStart) {
+              start = prev.start;
+              selected = prev.selected + 1;
+              atStart = false;
+            } else if (prev.start === 0 && prev.selected === 0) {
+              start = 0;
+              selected = 1;
+              atStart = false;
+            } else if (prev.start >= total - props.displaySize) {
+              // At end: clamp slice, selection drifts right
+              start = prev.start;
+              selected = c - start;
+              shiftBy = 0;
+            } else {
+              // Shift window right, keep selection pinned
+              start = prev.start + 1;
+              selected = Math.max(prev.selected, scrollIndex() + 1);;
+            }
+          } else {
+            // Initial setup
+            if (c > 0) {
+              start = Math.min(c - (scrollIndex() || 1), total - props.displaySize - bufferSize());
+              selected = Math.max(scrollIndex() || 1, c - start);
+              shiftBy = total - c < 3 ? c - total : -1;
+              atStart = false;
+            } else {
+              start = prev.start;
+              selected = prev.selected;
+            }
+          }
+        }
+        break;
+
+        case 'edge':
+          const startScrolling = Math.max(1, props.displaySize + (atStart ? -1 : 0));
+          if (props.wrap) {
+            if (delta > 0) {
+              if (prev.selected < startScrolling) {
+                selected = prev.selected + 1;
+                shiftBy = 0;
+              } else if (prev.selected === startScrolling && atStart) {
+                selected = prev.selected + 1;
+                atStart = false;
+              } else {
+                start = utils.mod(prev.start + 1, total);
+                selected = prev.selected;
+              }
+            } else if (delta < 0) {
+              if (prev.selected > 1) {
+                selected = prev.selected - 1;
+                shiftBy = 0;
+              } else {
+                start = utils.mod(prev.start - 1, total);
+                selected = 1;
+              }
+            } else {
+              start = utils.mod(c - 1, total);
+              selected = 1;
+              shiftBy = -1;
+              atStart = false;
+            }
+          } else {
+            if (delta === 0 && c > 0) {
+              //initial setup
+              selected = c > startScrolling ? startScrolling : c;
+              start = Math.max(0, c - startScrolling + 1);
+              shiftBy = c > startScrolling ? -1 : 0;
+              atStart = c < startScrolling;
+            } else if (delta > 0) {
+              if (prev.selected < startScrolling) {
+                selected = prev.selected + 1;
+                shiftBy = 0;
+              } else if (prev.selected === startScrolling && atStart) {
+                selected = prev.selected + 1;
+                atStart = false;
+              } else {
+                start = prev.start + 1;
+                selected = prev.selected;
+                atStart = false;
+              }
+            } else if (delta < 0) {
+              if (prev.selected > 1) {
+                selected = prev.selected - 1;
+                shiftBy = 0;
+              } else if (c > 1) {
+                start = Math.max(0, c - 1);
+                selected = 1;
+              } else if (c === 1) {
+                start = 0;
+                selected = 1;
+              } else {
+                start = 0;
+                selected = 0;
+                shiftBy = atStart ? 0 : shiftBy;
+                atStart = true;
+              }
+            }
+          }
+          break;
+
+        case 'none':
+        default:
+          start = 0;
+          selected = c;
+          shiftBy = 0;
+          break;
+      }
+
+      let newSlice = prev.slice;
+      if (start !== prev.start || newSlice.length === 0) {
+        newSlice = props.wrap
+          ? Array.from(
+              { length },
+              (_, i) => items()[utils.mod(start + i, total)],
+            ) as T[]
+          : items().slice(start, start + length);
+      }
+
+      const state: SliceState = { start, slice: newSlice, selected, delta, shiftBy, atStart };
+
+      if (props.debugInfo) {
+        console.log(`[Virtual]`, {
+          cursor: c,
+          delta,
+          start,
+          selected,
+          shiftBy,
+          slice: state.slice,
+        });
+      }
+
+      return state;
+    }
+
+  let viewRef!: lngp.NavigableElement;
+
+  function scrollToIndex(this: lng.ElementNode, index: number) {
+    s.untrack(() => {
+      if (itemCount() === 0) return;
+
+      lastNavTime = performance.now();
+      if (originalPosition !== undefined) {
+        viewRef.lng[axis] = originalPosition;
+        targetPosition = originalPosition;
+      }
+
+      updateSelected([utils.clamp(index, 0, itemCount() - 1)]);
+    });
+  }
+
+  let lastNavTime = 0;
+  function getAdaptiveDuration(duration: number = 250) {
+    const now = performance.now();
+    const delta = now - lastNavTime;
+    lastNavTime = now;
+    if (delta < duration) return delta;
+    return duration;
+  }
+
+  let originalPosition: number | undefined;
+  const onSelectedChanged: lngp.OnSelectedChanged = function (_idx, elm, _active, _lastIdx) {
+    let idx = _idx;
+    let lastIdx = _lastIdx || 0;
+    let active = _active;
+    const noChange = idx === lastIdx;
+    const total = itemCount();
+    originalPosition = originalPosition ?? elm[axis];
+
+    if (props.onSelectedChanged) {
+      props.onSelectedChanged.call(this as lngp.NavigableElement, idx, this as lngp.NavigableElement, active, lastIdx);
+    }
+
+    if (noChange) return;
+
+    const rawDelta = idx - (lastIdx ?? 0);
+    const windowLen =
+          elm?.children?.length ?? props.displaySize + bufferSize();
+    const delta = props.wrap
+          ? normalizeDeltaForWindow(rawDelta, windowLen)
+          : rawDelta;
+
+    setCursor(c => {
+      const next = c + delta;
+      return props.wrap
+        ? utils.mod(next, total)
+        : utils.clamp(next, 0, total - 1);
+    });
+
+    const newState = computeSlice(cursor(), delta, slice());
+    setSlice(newState);
+    elm.selected = newState.selected;
+
+    if (
+      props.onEndReachedThreshold !== undefined &&
+      cursor() >= itemCount() - props.onEndReachedThreshold
+    ) {
+      props.onEndReached?.();
+    }
+
+    if (newState.shiftBy === 0) return;
+
+    const prevChildPos = (targetPosition ?? this[axis]) + active[axis];
+
+    queueMicrotask(() => {
+      elm.updateLayout();
+      const childSize = computeSize(slice().selected);
+
+      if (cachedAnimationController && cachedAnimationController.state === 'running') {
+        cachedAnimationController.stop();;
+      }
+
+      if (lng.Config.animationsEnabled) {
+        this.lng[axis] = prevChildPos - active[axis];
+        let offset = this.lng[axis] + (childSize * slice().shiftBy);
+        targetPosition = offset;
+        cachedAnimationController = this.animate(
+          { [axis]: offset },
+          { ...this.animationSettings, duration: getAdaptiveDuration(this.animationSettings?.duration)}
+        ).start();
+      } else {
+        this.lng[axis] = this.lng[axis]! + (childSize * slice().shiftBy);
+      }
+    });
+  };
+
+  const updateSelected = ([sel, _items]: [number?, any?]) => {
+    if (!viewRef || sel === undefined || itemCount() === 0) return;
+    const item = items()[sel];
+    setCursor(sel);
+    const newState = computeSlice(cursor(), 0, slice());
+    setSlice(newState);
+
+    queueMicrotask(() => {
+      viewRef.updateLayout();
+      let activeIndex = viewRef.children.findIndex(x => x.item === item);
+      if (activeIndex === -1) return;
+      viewRef.selected = activeIndex;
+      viewRef.children[activeIndex]?.setFocus();
+    });
+  };
+
+  let doOnce = false;
+  s.createEffect(s.on([() => props.wrap, items], () => {
+    if (!viewRef || itemCount() === 0 || !props.wrap || doOnce) return;
+    doOnce = true;
+    // offset just for wrap so we keep one item before
+    queueMicrotask(() => {
+      const childSize = computeSize(slice().selected);
+      viewRef.lng[axis] = (viewRef.lng[axis] || 0) + (childSize * -1);
+      // Original Position is offset to support scrollToIndex
+      originalPosition = viewRef.lng[axis];
+      targetPosition = viewRef.lng[axis];
+    });
+  }));
+
+  s.createEffect(s.on([() => props.selected, items], updateSelected));
+
+  s.createEffect(s.on(items, () => {
+    if (!viewRef || itemCount() === 0) return;
+    if (cursor() >= itemCount()) {
+      setCursor(itemCount() - 1);
+    }
+    const newState = computeSlice(cursor(), 0, slice());
+    setSlice(newState);
+    viewRef.selected = newState.selected;
+  }));
+
+  return (<view
+      {...props}
+      {...keyHandlers}
+      ref={lngp.chainRefs(el => { viewRef = el as lngp.NavigableElement; }, props.ref)}
+      selected={selected()}
+      cursor={cursor()}
+      forwardFocus={/* @once */ lngp.navigableForwardFocus}
+      scrollToIndex={/* @once */ scrollToIndex}
+      onSelectedChanged={/* @once */ onSelectedChanged}
+      style={/* @once */ lng.combineStyles(
+        props.style,
+        component === lngp.Row
+          ? {
+              display: 'flex',
+              gap: 30,
+              transition: { x: { duration: 250, easing: 'ease-out' } },
+            }
+          : {
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 30,
+              transition: { y: { duration: 250, easing: 'ease-out' } },
+            }
+      )}
+    >
+      <List each={slice().slice}>{props.children}</List>
+    </view>
+  );
+}
+
+export function VirtualRow<T>(props: VirtualProps<T>) {
+  return createVirtual(lngp.Row, props, {
+    onLeft: lngp.chainFunctions(props.onLeft, lngp.handleNavigation('left')) as lng.KeyHandler,
+    onRight: lngp.chainFunctions(props.onRight, lngp.handleNavigation('right')) as lng.KeyHandler,
+  });
+}
+
+export function VirtualColumn<T>(props: VirtualProps<T>) {
+  return createVirtual(lngp.Column, props, {
+    onUp: lngp.chainFunctions(props.onUp, lngp.handleNavigation('up')) as lng.KeyHandler,
+    onDown: lngp.chainFunctions(props.onDown, lngp.handleNavigation('down')) as lng.KeyHandler,
+  });
+}