@lightningtv/solid 3.0.0-18 → 3.0.0-19

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/Virtual.tsx

@@ -300,8 +300,10 @@ function createVirtual<T>(
       if (itemCount() === 0) return;
 
       lastNavTime = performance.now();
-      viewRef.lng[axis] = originalPosition;
-      targetPosition = originalPosition;
+      if (originalPosition !== undefined) {
+        viewRef.lng[axis] = originalPosition;
+        targetPosition = originalPosition;
+      }
 
       updateSelected([utils.clamp(index, 0, itemCount() - 1)]);
     });
@@ -405,9 +407,9 @@ function createVirtual<T>(
     // offset just for wrap so we keep one item before
     queueMicrotask(() => {
       const childSize = computeSize(slice().selected);
-      viewRef.lng[axis] = viewRef.lng[axis]! + (childSize * -1);
+      viewRef.lng[axis] = (viewRef.lng[axis] || 0) + (childSize * -1);
       // Original Position is offset to support scrollToIndex
-      originalPosition = viewRef.lng[axis]
+      originalPosition = viewRef.lng[axis];
       targetPosition = viewRef.lng[axis];
     });
   }));

package/src/primitives/createFocusStack.tsx

@@ -17,7 +17,7 @@
  * - `restoreFocus()`: Restores focus to the last stored element and removes it from the stack. Returns `true` if successful, `false` otherwise.
  * - `clearFocusStack()`: Empties the focus stack.
  */
-import { createSignal, createContext, useContext, JSX } from 'solid-js';
+import * as s from 'solid-js';
 import { type ElementNode } from '@lightningtv/solid';
 
 interface FocusStackContextType {
@@ -26,13 +26,16 @@ interface FocusStackContextType {
   clearFocusStack: () => void;
 }
 
-const FocusStackContext = createContext<FocusStackContextType | undefined>(undefined);
+const FocusStackContext = s.createContext<FocusStackContextType | undefined>(undefined);
 
-export function FocusStackProvider(props: { children: JSX.Element}) {
-  const [_focusStack, setFocusStack] = createSignal<ElementNode[]>([]);
+export function FocusStackProvider(props: { children: s.JSX.Element}) {
+  const [_focusStack, setFocusStack] = s.createSignal<ElementNode[]>([]);
 
   function storeFocus(element: ElementNode, prevElement?: ElementNode) {
-    setFocusStack((stack) => [...stack, prevElement || element]);
+    const elm = prevElement || element;
+    if (elm) {
+      setFocusStack(stack => [...stack, elm]);
+    }
   }
 
   function restoreFocus(): boolean {
@@ -59,10 +62,18 @@ export function FocusStackProvider(props: { children: JSX.Element}) {
   );
 }
 
-export function useFocusStack() {
-  const context = useContext(FocusStackContext);
+export function useFocusStack(autoClear = true) {
+  const context = s.useContext(FocusStackContext);
   if (!context) {
     throw new Error("useFocusStack must be used within a FocusStackProvider");
   }
+
+  if (autoClear) {
+    s.onCleanup(() => {
+      // delay clearing the focus stack so restoreFocus can happen first.
+      setTimeout(() => context.clearFocusStack(), 5);
+    });
+  }
+
   return context;
 }

package/src/primitives/index.ts

@@ -4,6 +4,7 @@ export * from './createInfiniteItems.js';
 export * from './useMouse.js';
 export * from './portal.jsx';
 export * from './Lazy.jsx';
+export * from './Image.jsx';
 export * from './Visible.jsx';
 export * from './router.js';
 export * from './Column.jsx';
@@ -16,11 +17,7 @@ export * from './Suspense.jsx';
 export * from './Marquee.jsx';
 export * from './createFocusStack.jsx';
 export * from './useHold.js';
-export {
-  withScrolling,
-  scrollColumn,
-  scrollRow,
-} from './utils/withScrolling.js';
+export * from './KeepAlive.jsx';
 export * from './VirtualGrid.jsx';
 export * from './Virtual.jsx';
 export * from './utils/withScrolling.js';

package/src/primitives/useMouse.ts

@@ -1,4 +1,4 @@
-import type { ElementText, INode, TextNode } from '@lightningtv/core';
+import type { ElementText, TextNode } from '@lightningtv/core';
 import {
   ElementNode,
   activeElement,
@@ -6,12 +6,24 @@ import {
   isTextNode,
   rootNode,
   Config,
+  isFunc,
 } from '@lightningtv/solid';
 import { makeEventListener } from '@solid-primitives/event-listener';
 import { useMousePosition } from '@solid-primitives/mouse';
 import { createScheduled, throttle } from '@solid-primitives/scheduled';
 import { createEffect } from 'solid-js';
 
+declare module '@lightningtv/core' {
+  interface ElementNode {
+    /** function to be called on mouse click */
+    onMouseClick?: (
+      this: ElementNode,
+      event: MouseEvent,
+      active: ElementNode,
+    ) => void;
+  }
+}
+
 function createKeyboardEvent(
   key: string,
   keyCode: number,
@@ -29,6 +41,7 @@ function createKeyboardEvent(
   });
 }
 
+let scrollTimeout: number;
 const handleScroll = throttle((e: WheelEvent): void => {
   const deltaY = e.deltaY;
   if (deltaY < 0) {
@@ -36,6 +49,14 @@ const handleScroll = throttle((e: WheelEvent): void => {
   } else if (deltaY > 0) {
     document.body.dispatchEvent(createKeyboardEvent('ArrowDown', 40));
   }
+
+  // clear the last timeout if the user is still scrolling
+  clearTimeout(scrollTimeout);
+  // after 250ms of no scroll events, we send a keyup event to stop the scrolling
+  scrollTimeout = setTimeout(() => {
+    document.body.dispatchEvent(createKeyboardEvent('ArrowUp', 38, 'keyup'));
+    document.body.dispatchEvent(createKeyboardEvent('ArrowDown', 40, 'keyup'));
+  }, 250);
 }, 250);
 
 const handleClick = (e: MouseEvent): void => {
@@ -46,18 +67,42 @@ const handleClick = (e: MouseEvent): void => {
     testCollision(
       e.clientX,
       e.clientY,
-      (active.lng.absX as number) || 0 * precision,
-      (active.lng.absY as number) || 0 * precision,
-      active.width || 0 * precision,
-      active.height || 0 * precision,
+      ((active.lng.absX as number) || 0) * precision,
+      ((active.lng.absY as number) || 0) * precision,
+      (active.width || 0) * precision,
+      (active.height || 0) * precision,
     )
   ) {
+    if (isFunc(active.onMouseClick)) {
+      active.onMouseClick.call(active, e, active);
+      return;
+    }
+
     document.dispatchEvent(createKeyboardEvent('Enter', 13));
     setTimeout(
       () =>
         document.body.dispatchEvent(createKeyboardEvent('Enter', 13, 'keyup')),
       1,
     );
+  } else {
+    let parent = active?.parent;
+    while (parent) {
+      if (
+        isFunc(parent.onMouseClick) &&
+        testCollision(
+          e.clientX,
+          e.clientY,
+          ((parent.lng.absX as number) || 0) * precision,
+          ((parent.lng.absY as number) || 0) * precision,
+          (parent.width || 0) * precision,
+          (parent.height || 0) * precision,
+        )
+      ) {
+        parent.onMouseClick.call(parent, e, active!);
+        return;
+      }
+      parent = parent.parent;
+    }
   }
 };
 
@@ -95,8 +140,8 @@ function getChildrenByPosition(
         testCollision(
           x,
           y,
-          (currentNode.lng.absX as number) || 0 * precision,
-          (currentNode.lng.absY as number) || 0 * precision,
+          ((currentNode.lng.absX as number) || 0) * precision,
+          ((currentNode.lng.absY as number) || 0) * precision,
           (currentNode.width || 0) * precision,
           (currentNode.height || 0) * precision,
         )

package/src/primitives/utils/withScrolling.ts

@@ -73,6 +73,7 @@ export function withScrolling(isRow: boolean): Scroller {
       if (componentRef.parent!.clipping) {
         const p = componentRef.parent!;
         componentRef.endOffset =
+          componentRef.endOffset ??
           screenSize - ((isRow ? p.absX : p.absY) || 0) - p[dimension];
       }
 
@@ -118,7 +119,7 @@ export function withScrolling(isRow: boolean): Scroller {
       screenSize -
         containerSize -
         screenOffset -
-        (componentRef.endOffset || 2 * gap),
+        (componentRef.endOffset ?? 2 * gap),
       offset,
     );