@lightningtv/solid 3.0.0-8 → 3.0.0

package/src/primitives/Lazy.tsx

@@ -1,52 +1,61 @@
-import {
-  Index,
-  createEffect,
-  createMemo,
-  createSignal,
-  Show,
-  type JSX,
-  type ValidComponent,
-  untrack,
-  type Accessor,
-} 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';
+import * as lng from '@lightningtv/solid';
+import * as lngp from '@lightningtv/solid/primitives';
+import * as s from 'solid-js';
 
-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<number>(props.sync ? props.upCount : 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(offset => Math.max(offset, (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' ||
+      scroll === 'bounded'
+    )
+      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) {
-    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();
@@ -54,13 +63,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 +108,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 → Marquee.tsx}

@@ -130,7 +130,7 @@ export function Marquee(props: MarqueeProps) {
     <view
       {...props}
       height={clipHeight()}
-      onLayout={/* @once */ chainFunctions(props.onLayout, e => setClipWidth(e.width))}
+      onLayout={/* @once */ chainFunctions(props.onLayout, (e: lng.ElementNode) => setClipWidth(e.width))}
       clipping={props.marquee}
     >
       <MarqueeText

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,17 +35,17 @@ 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.onSelectedChanged,
+        props.scroll !== 'none' ? scrollRow : undefined,
+      )
       }
       style={/* @once */ combineStyles(props.style, RowStyles)}
     />

package/src/primitives/Suspense.tsx

@@ -0,0 +1,39 @@
+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
+ */
+export 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 forwardFocus={0}>
+      {suspense() ? null : children}
+    </view>
+  </>
+}