@lightningtv/solid 3.0.0-0 → 3.0.0-2

package/src/devtools/index.ts

@@ -0,0 +1,77 @@
+import * as debug from '@solid-devtools/debugger/types';
+import * as lng from '@lightningtv/core';
+
+const EMPTY_CHILDREN: (lng.ElementNode | lng.ElementText)[] = [];
+
+/**
+ * Implementation of the solid-devtools element interface for Lightning elements
+ */
+export const elementInterface: debug.ElementInterface<
+  lng.ElementNode | lng.ElementText
+> = {
+  isElement(node): node is lng.ElementNode | lng.ElementText {
+    return (
+      '_type' in node &&
+      (node._type === lng.NodeType.Element ||
+        node._type === lng.NodeType.TextNode)
+    );
+  },
+  getChildren(node) {
+    return node instanceof lng.ElementNode ? node.children : EMPTY_CHILDREN;
+  },
+  getName(node) {
+    return node._type === lng.NodeType.Element ? 'view' : 'text';
+  },
+  getParent(node) {
+    return node.parent ?? null;
+  },
+  getRect(node) {
+    let { width, height } = node;
+    let x = 0,
+      y = 0;
+
+    if (node.scaleX != null) width *= node.scaleX;
+    if (node.scaleY != null) height *= node.scaleY;
+
+    let curr = node as lng.ElementNode | undefined | null;
+    while (curr != null) {
+      x += curr.x;
+      y += curr.y;
+
+      if (curr.scaleX != null) {
+        x += (curr.width / 2) * (1 - curr.scaleX);
+      }
+      if (curr.scaleY != null) {
+        y += (curr.height / 2) * (1 - curr.scaleY);
+      }
+
+      curr = curr.parent;
+    }
+
+    if (lng.Config.rendererOptions != null) {
+      let dpr = lng.Config.rendererOptions.deviceLogicalPixelRatio;
+      if (dpr != null) {
+        x *= dpr;
+        y *= dpr;
+        width *= dpr;
+        height *= dpr;
+      }
+    }
+
+    return { x, y, width, height };
+  },
+  getElementAt(e) {
+    let target = e.target as any;
+    return target != null && target.element instanceof lng.ElementNode
+      ? target.element
+      : null;
+  },
+  getLocation(node) {
+    if (typeof node[debug.LOCATION_ATTRIBUTE_NAME] === 'string') {
+      return (
+        debug.parseLocationString(node[debug.LOCATION_ATTRIBUTE_NAME]) ?? null
+      );
+    }
+    return null;
+  },
+};

package/src/index.ts

@@ -1,4 +1,4 @@
-import './jsx-runtime.js';
+export * from '@lightningtv/solid/jsx-runtime';
 export * from '@lightningtv/core';
 export type * from '@lightningtv/core';
 export type { KeyHandler, KeyMap } from '@lightningtv/core/focusManager';

package/src/primitives/Column.tsx

@@ -1,5 +1,5 @@
 import { type Component } from 'solid-js';
-import { ElementNode, View, combineStyles, type NodeStyles } from '@lightningtv/solid';
+import { ElementNode, combineStyles, type NodeStyles } from '@lightningtv/solid';
 import {
   handleNavigation,
   onGridFocus,
@@ -32,7 +32,7 @@ function scrollToIndex(this: ElementNode, index: number) {
 
 export const Column: Component<ColumnProps> = (props) => {
   return (
-    <View
+    <view
       {...props}
       onUp={/* @once */ chainFunctions(props.onUp, onUp)}
       onDown={/* @once */ chainFunctions(props.onDown, onDown)}

package/src/primitives/FPSCounter.tsx

@@ -1,4 +1,4 @@
-import { View, Text, type Stage, type NodeProps, RendererMain } from '@lightningtv/solid';
+import { type Stage, type NodeProps, RendererMain } from '@lightningtv/solid';
 import { createSignal } from 'solid-js';
 
 const fpsStyle = {
@@ -90,90 +90,90 @@ export function setupFPS(root: any) {
 
 export const FPSCounter = (props: NodeProps) => {
   return (
-    <View {...props} style={fpsStyle}>
-      <View y={6}>
-        <Text style={fpsLabel}>FPS:</Text>
-        <Text style={fpsValue} x={90}>
+    <view {...props} style={fpsStyle}>
+      <view y={6}>
+        <text style={fpsLabel}>FPS:</text>
+        <text style={fpsValue} x={90}>
           {fps().toString()}
-        </Text>
-      </View>
+        </text>
+      </view>
 
-      <View y={6} x={160}>
-        <Text style={fpsLabel}>AVG:</Text>
-        <Text style={fpsValue} x={100}>
+      <view y={6} x={160}>
+        <text style={fpsLabel}>AVG:</text>
+        <text style={fpsValue} x={100}>
           {avgFps().toString()}
-        </Text>
-      </View>
+        </text>
+      </view>
 
-      <View x={0} y={26}>
-        <Text style={fpsLabel}>MIN:</Text>
-        <Text style={fpsValue} x={90}>
+      <view x={0} y={26}>
+        <text style={fpsLabel}>MIN:</text>
+        <text style={fpsValue} x={90}>
           {minFps().toString()}
-        </Text>
-      </View>
+        </text>
+      </view>
 
-      <View x={160} y={26}>
-        <Text style={fpsLabel}>MAX:</Text>
-        <Text style={fpsValue} x={100}>
+      <view x={160} y={26}>
+        <text style={fpsLabel}>MAX:</text>
+        <text style={fpsValue} x={100}>
           {maxFps().toString()}
-        </Text>
-      </View>
+        </text>
+      </view>
 
-      <View display="flex" flexDirection="column" y={58} gap={4}>
-        <View height={infoFontSize}>
-          <Text fontSize={infoFontSize} style={fpsLabel}>
+      <view display="flex" flexDirection="column" y={58} gap={4}>
+        <view height={infoFontSize}>
+          <text fontSize={infoFontSize} style={fpsLabel}>
             criticalThreshold:
-          </Text>
-          <Text fontSize={infoFontSize} style={fpsLabel} x={230}>
+          </text>
+          <text fontSize={infoFontSize} style={fpsLabel} x={230}>
             {criticalThresholdSignal()}
-          </Text>
-        </View>
+          </text>
+        </view>
 
-        <View height={infoFontSize}>
-          <Text fontSize={infoFontSize} style={fpsLabel}>
+        <view height={infoFontSize}>
+          <text fontSize={infoFontSize} style={fpsLabel}>
             targetThreshold:
-          </Text>
-          <Text fontSize={infoFontSize} style={fpsLabel} x={230}>
+          </text>
+          <text fontSize={infoFontSize} style={fpsLabel} x={230}>
             {targetThresholdSignal()}
-          </Text>
-        </View>
+          </text>
+        </view>
 
-        <View height={infoFontSize}>
-          <Text fontSize={infoFontSize} style={fpsLabel}>
+        <view height={infoFontSize}>
+          <text fontSize={infoFontSize} style={fpsLabel}>
             renderableMemUsed:
-          </Text>
-          <Text fontSize={infoFontSize} style={fpsLabel} x={230}>
+          </text>
+          <text fontSize={infoFontSize} style={fpsLabel} x={230}>
             {renderableMemUsedSignal()}
-          </Text>
-        </View>
+          </text>
+        </view>
 
-        <View height={infoFontSize}>
-          <Text fontSize={infoFontSize} style={fpsLabel}>
+        <view height={infoFontSize}>
+          <text fontSize={infoFontSize} style={fpsLabel}>
             memUsed:
-          </Text>
-          <Text fontSize={infoFontSize} style={fpsLabel} x={230}>
+          </text>
+          <text fontSize={infoFontSize} style={fpsLabel} x={230}>
             {memUsedSignal()}
-          </Text>
-        </View>
+          </text>
+        </view>
 
-        <View height={infoFontSize}>
-          <Text fontSize={infoFontSize} style={fpsLabel}>
+        <view height={infoFontSize}>
+          <text fontSize={infoFontSize} style={fpsLabel}>
             renderableTexturesLoaded:
-          </Text>
-          <Text fontSize={infoFontSize} style={fpsLabel} x={230}>
+          </text>
+          <text fontSize={infoFontSize} style={fpsLabel} x={230}>
             {renderableTexturesLoadedSignal().toString()}
-          </Text>
-        </View>
+          </text>
+        </view>
 
-        <View height={infoFontSize}>
-          <Text fontSize={infoFontSize} style={fpsLabel}>
+        <view height={infoFontSize}>
+          <text fontSize={infoFontSize} style={fpsLabel}>
             loadedTextures:
-          </Text>
-          <Text fontSize={infoFontSize} style={fpsLabel} x={230}>
+          </text>
+          <text fontSize={infoFontSize} style={fpsLabel} x={230}>
             {loadedTexturesSignal().toString()}
-          </Text>
-        </View>
-      </View>
-    </View>
+          </text>
+        </view>
+      </view>
+    </view>
   );
 };

package/src/primitives/FadeInOut.tsx

@@ -0,0 +1,34 @@
+import { ElementNode, NodeProps, View  } from '@lightningtv/solid';
+import { Show } from 'solid-js';
+
+interface Props {
+  transition?: {
+    duration?: number;
+    easing?: string;
+  };
+  when?: boolean;
+}
+
+const DEFAULT_PROPS = {
+  duration: 250,
+  easing: 'ease-in-out',
+};
+
+export default function FadeInOut(props: Props & NodeProps) {
+  const config = Object.assign({}, DEFAULT_PROPS, props.transition);
+  function onCreate(elm: ElementNode) {
+    elm.alpha = 0;
+    elm.animate({ alpha: 1 }, { duration: config.duration, easing: config.easing }).start();
+  }
+
+  function onDestroy(elm: ElementNode) {
+    elm.rtt = true;
+    return elm.animate({ alpha: 0 }, { duration: config.duration, easing: config.easing })
+      .start().waitUntilStopped();
+  }
+
+  return (
+    <Show when={props.when} keyed>
+      <View {...props} onDestroy={onDestroy} onCreate={onCreate} />
+    </Show>);
+}

package/src/primitives/Grid.tsx

@@ -1,5 +1,5 @@
 import { ValidComponent, For, createSignal, createMemo } from "solid-js";
-import { View, Dynamic, type NodeProps, type ElementNode, isFunction } from "@lightningtv/solid";
+import { Dynamic, type NodeProps, type ElementNode, isFunction } from "@lightningtv/solid";
 
 export const Grid = <T,>(props: {
   item: ValidComponent;
@@ -72,7 +72,7 @@ export const Grid = <T,>(props: {
   );
 
   return (
-    <View
+    <view
       transition={{ y: true }}
       {...props}
       onUp={(_e, elm) => moveFocus(-columns(), elm)}
@@ -95,7 +95,7 @@ export const Grid = <T,>(props: {
           />
         )}
       </For>
-    </View>
+    </view>
   );
 };
 

package/src/primitives/Lazy.tsx

@@ -7,47 +7,46 @@ import {
   type JSX,
   type ValidComponent,
   untrack,
+  type Accessor,
 } from 'solid-js';
-import { Dynamic, scheduleTask, type NodeProps } from '@lightningtv/solid';
+import { Dynamic, type NewOmit, scheduleTask, type NodeProps } from '@lightningtv/solid';
 import { Row, Column } from '@lightningtv/solid/primitives';
 
-type LazyProps<T extends readonly any[]> = Omit<NodeProps, 'children'> & {
+type LazyProps<T extends readonly any[]> = NewOmit<NodeProps, 'children'> & {
   each: T | undefined | null | false;
   fallback?: JSX.Element;
   upCount: number;
   delay?: number;
   sync?: boolean;
   eagerLoad?: boolean;
-  selected?: number;
-  children: (item: T[number], index: number) => JSX.Element;
+  children: (item: Accessor<T[number]>, index: number) => JSX.Element;
 };
 
-function createLazy<T extends readonly any[]>(
+function createLazy<T>(
   component: ValidComponent,
-  props: LazyProps<T>,
+  props: LazyProps<readonly T[]>,
   keyHandler: (updateOffset: () => void) => Record<string, () => void>
 ) {
   // Need at least one item so it can be focused
   const [offset, setOffset] = createSignal(1);
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
 
-  createEffect(() => setOffset(props.selected || 1));
+  createEffect(() => setOffset((props.selected || 0) + 1));
 
   if (props.sync) {
     setOffset(props.upCount);
   } else {
     createEffect(() => {
       if (props.each) {
-        let count = untrack(offset);
-
         const loadItems = () => {
+          let count = 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 (offset() >= maxOffset) return;
             setOffset((prev) => Math.min(prev + 1, maxOffset));
             scheduleTask(loadItems);
           }
@@ -61,9 +60,19 @@ function createLazy<T extends readonly any[]>(
 
   const updateOffset = () => {
     const maxOffset = props.each ? props.each.length : 0;
-    if (offset() > maxOffset) return;
+    if (offset() >= maxOffset) return;
+
+    if (!props.delay) {
+      setOffset((prev) => Math.min(prev + 1, maxOffset));
+      return;
+    }
+
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      //Moving faster than the delay so need to go sync
+      setOffset((prev) => Math.min(prev + 1, maxOffset));
+    }
 
-    if (timeoutId) clearTimeout(timeoutId);
     timeoutId = setTimeout(() => {
       setOffset((prev) => Math.min(prev + 1, maxOffset));
       timeoutId = null;

package/src/primitives/Row.tsx

@@ -31,7 +31,7 @@ function scrollToIndex(this: ElementNode, index: number) {
 
 export const Row: Component<RowProps> = (props) => {
   return (
-    <View
+    <view
       {...props}
       selected={props.selected || 0}
       onLeft={/* @once */ chainFunctions(props.onLeft, onLeft)}

package/src/primitives/index.ts

@@ -3,7 +3,6 @@ export * from './announcer/index.js';
 export * from './createInfiniteItems.js';
 export * from './useMouse.js';
 export * from './portal.jsx';
-export * from './LazyUp.jsx';
 export * from './Lazy.jsx';
 export * from './Visible.jsx';
 export * from './router.js';
@@ -11,6 +10,7 @@ export * from './Column.jsx';
 export * from './Row.jsx';
 export * from './Grid.jsx';
 export * from './FPSCounter.jsx';
+export * from './FadeInOut.jsx';
 export * from './createFocusStack.jsx';
 export { withScrolling } from './utils/withScrolling.js';
 export { chainFunctions } from './utils/chainFunctions.js';

package/src/primitives/utils/createSpriteMap.ts

@@ -1,4 +1,4 @@
-import { renderer, type TextureMap } from '@lightningtv/core';
+import { type IRendererTexture, renderer } from '@lightningtv/core';
 
 export interface SpriteDef {
   name: string | number;
@@ -11,14 +11,12 @@ export interface SpriteDef {
 export function createSpriteMap(
   src: string,
   subTextures: SpriteDef[],
-): Record<string, InstanceType<TextureMap['SubTexture']>> {
+): Record<string, IRendererTexture> {
   const spriteMapTexture = renderer.createTexture('ImageTexture', {
     src,
   });
 
-  return subTextures.reduce<
-    Record<string, InstanceType<TextureMap['SubTexture']>>
-  >((acc, t) => {
+  return subTextures.reduce<Record<string, IRendererTexture>>((acc, t) => {
     const { x, y, width, height } = t;
     acc[t.name] = renderer.createTexture('SubTexture', {
       texture: spriteMapTexture,

package/src/primitives/utils/withScrolling.ts

@@ -72,9 +72,10 @@ export function withScrolling(isRow: boolean) {
 
     // Allows manual position control
     const targetPosition = componentRef._targetPosition ?? componentRef[axis];
-    const rootPosition = isIncrementing
-      ? Math.min(targetPosition, componentRef[axis])
-      : Math.max(targetPosition, componentRef[axis]);
+    const rootPosition =
+      isIncrementing || scroll === 'auto'
+        ? Math.min(targetPosition, componentRef[axis])
+        : Math.max(targetPosition, componentRef[axis]);
     componentRef.offset = componentRef.offset ?? rootPosition;
     const offset = componentRef.offset;
     selectedElement =

package/src/render.ts

@@ -4,8 +4,8 @@ import {
   type NodeProps,
   type TextProps,
   startLightningRenderer,
-  type RendererMain,
   type RendererMainSettings,
+  type IRendererMain,
 } from '@lightningtv/core';
 import nodeOpts from './solidOpts.js';
 import {
@@ -15,13 +15,14 @@ import {
   untrack,
   type JSXElement,
   type ValidComponent,
+  createRoot,
 } from 'solid-js';
 import type { SolidNode } from './types.js';
 import { activeElement, setActiveElement } from './activeElement.js';
 
 const solidRenderer = solidCreateRenderer<SolidNode>(nodeOpts);
 
-let renderer: RendererMain;
+let renderer: IRendererMain;
 export const rootNode = nodeOpts.createElement('App');
 
 const render = function (code: () => JSXElement) {
@@ -71,11 +72,13 @@ type Task = () => void;
 const taskQueue: Task[] = [];
 let tasksEnabled = false;
 
-createRenderEffect(() => {
-  // should change whenever a keypress occurs, so we disable the task queue
-  // until the renderer is idle again.
-  activeElement();
-  tasksEnabled = false;
+createRoot(() => {
+  createRenderEffect(() => {
+    // should change whenever a keypress occurs, so we disable the task queue
+    // until the renderer is idle again.
+    activeElement();
+    tasksEnabled = false;
+  });
 });
 
 export function setTasksEnabled(enabled: boolean): void {

package/src/solidOpts.ts

@@ -9,6 +9,35 @@ import {
 } from '@lightningtv/core';
 import type { SolidNode, SolidRendererOptions } from './types.js';
 
+declare module '@lightningtv/core' {
+  interface ElementNode {
+    _queueInsert?: true;
+    _queueRemove?: true;
+  }
+}
+
+let elementQueue: ElementNode[] = [];
+
+function flushQueue(): void {
+  for (let el of elementQueue) {
+    if (el._queueRemove && !el._queueInsert) {
+      el.destroy();
+    }
+    el._queueInsert = el._queueRemove = undefined;
+  }
+  elementQueue.length = 0;
+}
+
+function addToQueue(node: ElementNode): void {
+  if (node._queueInsert && node._queueRemove) {
+    return; // Already in the queue
+  }
+
+  if (elementQueue.push(node) === 1) {
+    queueMicrotask(flushQueue);
+  }
+}
+
 export default {
   createElement(name: string): ElementNode {
     return new ElementNode(name);
@@ -31,10 +60,11 @@ export default {
     log('INSERT: ', parent, node, anchor);
 
     parent.insertChild(node, anchor);
-    node._queueDelete = false;
 
     if (node instanceof ElementNode) {
-      parent.rendered && node.render(true);
+      node._queueInsert = true;
+      node.parent!.rendered && node.render(true);
+      addToQueue(node);
     } else if (isElementText(parent)) {
       // TextNodes can be placed outside of <text> nodes when <Show> is used as placeholder
       parent.text = parent.getText();
@@ -45,13 +75,12 @@ export default {
   },
   removeNode(parent: ElementNode, node: SolidNode): void {
     log('REMOVE: ', parent, node);
+
     parent.removeChild(node);
-    node._queueDelete = true;
+
     if (node instanceof ElementNode) {
-      // Solid replacesNodes to move them (via insert and remove),
-      // so we need to wait for the next microtask to destroy the node
-      // in the event it gets a new parent.
-      queueMicrotask(() => node.destroy());
+      node._queueRemove = true;
+      addToQueue(node);
     }
   },
   getParentNode(node: SolidNode): ElementNode | ElementText | undefined {

package/src/jsx-runtime.ts

@@ -1,14 +0,0 @@
-/* eslint-disable @typescript-eslint/no-namespace */
-import type { NodeProps, TextProps } from '@lightningtv/core';
-
-declare module 'solid-js' {
-  namespace JSX {
-    interface IntrinsicElements {
-      node: NodeProps;
-      view: NodeProps;
-      text: TextProps;
-    }
-
-    interface IntrinsicAttributes extends Omit<NodeProps, 'children'> {}
-  }
-}

package/src/primitives/LazyUp.tsx

@@ -1,71 +0,0 @@
-import {
-  Index,
-  createEffect,
-  createMemo,
-  createSignal,
-  splitProps,
-  Show,
-  type JSX,
-  type ValidComponent,
-} from 'solid-js';
-import { Dynamic, type ElementNode } from '@lightningtv/solid';
-
-export function LazyUp<T extends readonly any[], U extends JSX.Element>(
-  props: T &
-    ElementNode & {
-      each: T | undefined | null | false;
-      fallback?: JSX.Element;
-      container?: JSX.Element;
-      component?: ValidComponent;
-      direction?: 'row' | 'column';
-      upCount: number;
-      children: (item: T[number], index: number) => U;
-    },
-) {
-  const [p, others] = splitProps(props, [
-    'component',
-    'each',
-    'fallback',
-    'children',
-  ]);
-
-  const [offset, setOffset] = createSignal(0);
-
-  createEffect(() => {
-    setOffset(props.selected || 0);
-  });
-
-  const items = createMemo(() => {
-    if (p.each) {
-      return p.each.slice(0, props.upCount + offset());
-    }
-  });
-
-  console.log('LazyUp is deprecated. Please use LazyRow or LazyColumn instead.');
-
-  const isRow = createMemo(() => {
-    return (
-      others.direction !== undefined && others.direction === 'row' ||
-      others.style?.flexDirection === 'row' ||
-      others.flexDirection === 'row'
-    );
-  });
-
-  const keyHandlers = createMemo(() => {
-    const updateOffset = () => {
-      setOffset(
-        (prev) => p.each && Math.min(prev + 1, p.each.length - props.upCount),
-      );
-    };
-
-    return isRow() ? { onRight: updateOffset } : { onDown: updateOffset };
-  });
-
-  return (
-    <Show when={items()}>
-      <Dynamic component={p.component} {...others} {...keyHandlers()}>
-        <Index each={items()} fallback={p.fallback} children={p.children} />
-      </Dynamic>
-    </Show>
-  );
-}

package/src/primitives/jsx-runtime.d.ts

@@ -1,8 +0,0 @@
-import 'solid-js';
-declare module 'solid-js' {
-  namespace JSX {
-    interface Directives {
-      model: [() => any, (v: any) => any];
-    }
-  }
-}