@lightningtv/solid 3.0.0-9 → 3.0.1

package/src/core/utils.ts

@@ -0,0 +1,222 @@
+import { type INode, type Point } from '@lightningjs/renderer';
+import { Config, isDev } from './config.js';
+import type { Styles, ElementText, TextNode } from './intrinsicTypes.js';
+import { ElementNode } from './elementNode.js';
+import { NodeType } from './nodeTypes.js';
+
+function hasDebug(node: any) {
+  return isObject(node) && node.debug;
+}
+
+export function log(
+  msg: string,
+  node: ElementNode | ElementText | TextNode,
+  ...args: any[]
+) {
+  if (isDev) {
+    if (Config.debug || hasDebug(node) || hasDebug(args[0])) {
+      console.log(msg, node, ...args);
+    }
+  }
+}
+
+export const isFunc = (obj: unknown): obj is CallableFunction =>
+  obj instanceof Function;
+
+export const isFunction = (obj: unknown): obj is Function =>
+  typeof obj === 'function';
+
+export function isObject(
+  item: unknown,
+): item is Record<string | number | symbol, unknown> {
+  return typeof item === 'object';
+}
+
+export function isArray(item: unknown): item is any[] {
+  return Array.isArray(item);
+}
+
+export function isString(item: unknown): item is string {
+  return typeof item === 'string';
+}
+
+export function isNumber(item: unknown): item is number {
+  return typeof item === 'number';
+}
+
+export function isInteger(item: unknown): item is number {
+  return Number.isInteger(item);
+}
+
+export function isINode(node: object): node is INode {
+  return 'destroy' in node && typeof node.destroy === 'function';
+}
+
+export function isElementNode(node: unknown): node is ElementNode {
+  return node instanceof ElementNode;
+}
+
+export function isElementText(
+  node: ElementNode | ElementText | TextNode,
+): node is ElementText {
+  return node._type === NodeType.TextNode;
+}
+
+export function isTextNode(
+  node: ElementNode | ElementText | TextNode,
+): node is TextNode {
+  return node._type === NodeType.Text;
+}
+
+export function keyExists(
+  obj: Record<string, unknown>,
+  keys: (string | number | symbol)[],
+) {
+  for (const key of keys) {
+    if (key in obj) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function spliceItem<T>(
+  arr: T[],
+  item: T,
+  deleteCount: number,
+  ...insert: T[]
+): number {
+  const index = arr.indexOf(item);
+  if (index > -1) {
+    arr.splice(index, deleteCount, ...insert);
+  }
+  return index;
+}
+
+export function flattenStyles(
+  obj: Styles | undefined | (Styles | undefined)[],
+  result: Styles = {},
+): Styles {
+  if (isArray(obj)) {
+    obj.forEach((item) => {
+      flattenStyles(item, result);
+    });
+  } else if (obj) {
+    // handle the case where the object is not an array
+    for (const key in obj) {
+      // be careful of 0 values
+      if (result[key] === undefined) {
+        result[key as keyof Styles] = obj[key as keyof Styles]!;
+      }
+    }
+  }
+
+  return result;
+}
+
+export function logRenderTree(node: ElementNode) {
+  const tree = [node];
+  let parent = node.parent;
+  while (parent) {
+    tree.push(parent);
+    parent = parent.parent;
+  }
+  tree.reverse();
+
+  let output = `
+function convertEffectsToShader(styleEffects) {
+  const effects = [];
+  let index = 0;
+
+  for (const [type, props] of Object.entries(styleEffects)) {
+    effects.push({ type, props });
+    index++;
+  }
+  return createShader('DynamicShader', { effects });
+}
+`;
+  tree.forEach((node, i) => {
+    if (!node._rendererProps) {
+      return;
+    }
+    node._rendererProps.parent = undefined;
+    node._rendererProps.shader = undefined;
+    const props = JSON.stringify(node._rendererProps, null, 2);
+    const effects = node._effects
+      ? `props${i}.shader = convertEffectsToShader(${JSON.stringify(node._effects, null, 2)});`
+      : '';
+    const parent = i === 0 ? 'rootNode' : `node${i - 1}`;
+    output += `
+const props${i} = ${props};
+props${i}.parent = ${parent};
+${effects}
+const node${i} = renderer.createNode(props${i});
+`;
+  });
+
+  return output;
+}
+
+export interface Rect extends Point {
+  width: number;
+  height: number;
+}
+
+/**
+ * Calculates the rectangle of an element on the screen,
+ * taking into account its position, size, and scaling.
+ *
+ * @param el   - The element to calculate the rectangle for.
+ * @param from - Optional ancestor element to calculate the rectangle relative to.
+ * @param out  - Optional output rectangle to fill with the result.
+ * @returns The rectangle of the element on the screen.
+ */
+export function getElementScreenRect(
+  el: ElementNode | ElementText,
+  from?: ElementNode,
+  out: Rect = { x: 0, y: 0, width: 0, height: 0 },
+): Rect {
+  out.x = 0;
+  out.y = 0;
+  out.width = el.width;
+  out.height = el.height;
+
+  if (el.scaleX != null) out.width *= el.scaleX;
+  if (el.scaleY != null) out.height *= el.scaleY;
+
+  let curr = el as ElementNode | undefined | null;
+  while (curr != null && curr !== from) {
+    out.x += curr.x;
+    out.y += curr.y;
+
+    if (curr.scaleX != null) {
+      out.x += (curr.width / 2) * (1 - curr.scaleX);
+    }
+    if (curr.scaleY != null) {
+      out.y += (curr.height / 2) * (1 - curr.scaleY);
+    }
+
+    curr = curr.parent;
+  }
+
+  if (Config.rendererOptions != null) {
+    let dpr = Config.rendererOptions.deviceLogicalPixelRatio;
+    if (dpr != null) {
+      out.x *= dpr;
+      out.y *= dpr;
+      out.width *= dpr;
+      out.height *= dpr;
+    }
+  }
+
+  return out;
+}
+
+/**
+ * Checks if the element has focus.\
+ * ({@link ElementNode.states} contains the {@link Config.focusStateKey} focus state)
+ */
+export function isFocused(el: ElementNode | ElementText): boolean {
+  return el?.states?.has(Config.focusStateKey);
+}
+export const hasFocus = isFocused;

package/src/devtools/index.ts

@@ -1,5 +1,5 @@
 import * as debug from '@solid-devtools/debugger/types';
-import * as lng from '@lightningtv/core';
+import * as lng from '../core/index.js';
 
 const EMPTY_CHILDREN: (lng.ElementNode | lng.ElementText)[] = [];
 

package/src/index.ts

@@ -1,7 +1,7 @@
 export * from '@lightningtv/solid/jsx-runtime';
-export * from '@lightningtv/core';
-export type * from '@lightningtv/core';
-export type { KeyHandler, KeyMap } from '@lightningtv/core/focusManager';
+export * from './core/index.js';
+export type * from './core/index.js';
+export type { KeyHandler, KeyMap } from './core/focusManager.js';
 export * from './activeElement.js';
 export * from './utils.js';
 export * from './render.js';

package/src/primitives/Column.tsx

@@ -1,10 +1,9 @@
 import { type Component } from 'solid-js';
 import { ElementNode, combineStyles, type NodeStyles } from '@lightningtv/solid';
 import {
-  handleNavigation,
-  onGridFocus,
+  navigableForwardFocus, handleNavigation
 } from './utils/handleNavigation.js';
-import { withScrolling } from './utils/withScrolling.js';
+import { scrollColumn } from './utils/withScrolling.js';
 import { chainFunctions } from './utils/chainFunctions.js';
 import type { ColumnProps } from './types.js';
 
@@ -20,16 +19,15 @@ const ColumnStyles: NodeStyles = {
   },
 };
 
-const onUp = handleNavigation('up');
-const onDown = handleNavigation('down');
-const scroll = withScrolling(false);
-
 function scrollToIndex(this: ElementNode, index: number) {
   this.selected = index;
-  scroll(index, this);
-  this.setFocus();
+  scrollColumn(index, this);
+  this.children[index]?.setFocus();
 }
 
+const onUp = handleNavigation('up');
+const onDown = handleNavigation('down');
+
 export const Column: Component<ColumnProps> = (props) => {
   return (
     <view
@@ -38,15 +36,15 @@ export const Column: Component<ColumnProps> = (props) => {
       onDown={/* @once */ chainFunctions(props.onDown, onDown)}
       selected={props.selected || 0}
       scrollToIndex={scrollToIndex}
-      forwardFocus={/* once */ onGridFocus(props.onSelectedChanged)}
+      forwardFocus={navigableForwardFocus}
       onLayout={
         /* @once */
-        props.selected ? chainFunctions(props.onLayout, scroll) : props.onLayout
+        props.selected ? chainFunctions(props.onLayout, scrollColumn) : props.onLayout
       }
       onSelectedChanged={
         /* @once */ chainFunctions(
           props.onSelectedChanged,
-          props.scroll !== 'none' ? scroll : undefined,
+          props.scroll !== 'none' ? scrollColumn : undefined,
         )
       }
       style={/* @once */ combineStyles(props.style, ColumnStyles)}

package/src/primitives/FPSCounter.tsx

@@ -3,12 +3,12 @@ import { createSignal } from 'solid-js';
 
 const fpsStyle = {
   color: 0x000000ff,
-  height: 180,
+  height: 192,
   width: 330,
   x: 1900,
   y: 6,
   mountX: 1,
-  alpha: 0.8,
+  alpha: 1,
   zIndex: 100
 };
 
@@ -27,6 +27,7 @@ const [fps, setFps] = createSignal(0);
 const [avgFps, setAvgFps] = createSignal(0);
 const [minFps, setMinFps] = createSignal(99);
 const [maxFps, setMaxFps] = createSignal(0);
+const [quads, setQuads] = createSignal(0);
 const [criticalThresholdSignal, setCriticalThresholdSignal] = createSignal('');
 const [targetThresholdSignal, setTargetThresholdSignal] = createSignal('');
 const [renderableMemUsedSignal, setRenderableMemUsedSignal] = createSignal('');
@@ -86,6 +87,10 @@ export function setupFPS(root: any) {
       frameCount++;
     }
   });
+
+  root.renderer.on('quadsUpdate', (target: RendererMain, quadsData: any) => {
+    setQuads(quadsData.quads);
+  });
 }
 
 export const FPSCounter = (props: NodeProps) => {
@@ -173,6 +178,15 @@ export const FPSCounter = (props: NodeProps) => {
             {loadedTexturesSignal().toString()}
           </text>
         </view>
+
+        <view height={infoFontSize}>
+          <text fontSize={infoFontSize} style={fpsLabel}>
+            quads:
+          </text>
+          <text fontSize={infoFontSize} style={fpsLabel} x={230}>
+            {quads().toString()}
+          </text>
+        </view>
       </view>
     </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,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 || 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
             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 }));
 }