@lightningtv/solid 3.0.0-1 → 3.0.0-3

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

@@ -1,23 +1,38 @@
-import { ValidComponent, For, createSignal, createMemo } from "solid-js";
-import { View, Dynamic, type NodeProps, type ElementNode, isFunction } from "@lightningtv/solid";
+import { For, createSignal, createMemo, JSX } from "solid-js";
+import { type NodeProps, type ElementNode, isFunction, NewOmit } from "@lightningtv/solid";
 
-export const Grid = <T,>(props: {
-  item: ValidComponent;
+export interface GridItemProps<T> {
+  item:   T
+  index:  number
+  width:  number
+  height: number
+  x:      number
+  y:      number
+}
+
+export interface GridProps<T> extends NewOmit<NodeProps, 'children'> {
+  items: T[];
+  children: (props: GridItemProps<T>) => JSX.Element,
   itemHeight?: number;
   itemWidth?: number;
   itemOffset?: number;
-  items: T[];
   columns?: number;
   looping?: boolean;
   scroll?: "auto" | "none";
   onSelectedChanged?: (index: number, grid: ElementNode, elm?: ElementNode) => void;
-} & NodeProps) => {
+}
+
+export function Grid<T>(props: GridProps<T>): JSX.Element {
+
   const [focusedIndex, setFocusedIndex] = createSignal(0);
   const baseColumns = 4;
 
+  const itemWidth = () => props.itemWidth ?? 300
+  const itemHeight = () => props.itemHeight ?? 300
+
   const columns = createMemo(() => props.columns || baseColumns);
-  const totalWidth = createMemo(() => (props.itemWidth ?? 300) + (props.itemOffset ?? 0));
-  const totalHeight = createMemo(() => (props.itemHeight ?? 300) + (props.itemOffset ?? 0));
+  const totalWidth = createMemo(() => itemWidth() + (props.itemOffset ?? 0));
+  const totalHeight = createMemo(() => itemHeight() + (props.itemOffset ?? 0));
 
   const moveFocus = (delta: number, elm: ElementNode) => {
     if (!props.items || props.items.length === 0) return false;
@@ -72,7 +87,7 @@ export const Grid = <T,>(props: {
   );
 
   return (
-    <View
+    <view
       transition={{ y: true }}
       {...props}
       onUp={(_e, elm) => moveFocus(-columns(), elm)}
@@ -85,17 +100,16 @@ export const Grid = <T,>(props: {
     >
       <For each={props.items}>
         {(item, index) => (
-          <Dynamic
-            {...item}
-            component={props.item}
-            width={props.itemWidth}
-            height={props.itemHeight}
+          <props.children
+            item={item}
+            index={index()}
+            width={itemWidth()}
+            height={itemHeight()}
             x={(index() % columns()) * totalWidth()}
             y={Math.floor(index() / columns()) * totalHeight()}
           />
         )}
       </For>
-    </View>
+    </view>
   );
 };
-

package/src/primitives/Lazy.tsx

@@ -31,23 +31,22 @@ function createLazy<T>(
   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);
           }
@@ -63,7 +62,17 @@ function createLazy<T>(
     const maxOffset = props.each ? props.each.length : 0;
     if (offset() >= maxOffset) return;
 
-    if (timeoutId) clearTimeout(timeoutId);
+    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));
+    }
+
     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/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/handleNavigation.ts

@@ -73,8 +73,8 @@ export function handleNavigation(
         return false;
       }
     }
-    const active = this.children[this.selected || 0];
-    assertTruthy(active instanceof ElementNode);
+    const active = this.children[this.selected || 0] || this.children[0];
+    if (!(active instanceof ElementNode)) return false;
     const navigableThis = this as NavigableElement;
 
     navigableThis.onSelectedChanged &&

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,36 @@ import {
 } from '@lightningtv/core';
 import type { SolidNode, SolidRendererOptions } from './types.js';
 
+declare module '@lightningtv/core' {
+  interface ElementNode {
+    /** @internal for managing series of insertions and deletions */
+    _queueDelete?: number;
+  }
+}
+
+let elementDeleteQueue: ElementNode[] = [];
+
+function flushDeleteQueue(): void {
+  for (let el of elementDeleteQueue) {
+    if (Number(el._queueDelete) < 0) {
+      el.destroy();
+    }
+    el._queueDelete = undefined;
+  }
+  elementDeleteQueue.length = 0;
+}
+
+function pushDeleteQueue(node: ElementNode, n: number): void {
+  if (node._queueDelete === undefined) {
+    node._queueDelete = n;
+    if (elementDeleteQueue.push(node) === 1) {
+      queueMicrotask(flushDeleteQueue);
+    }
+  } else {
+    node._queueDelete += n;
+  }
+}
+
 export default {
   createElement(name: string): ElementNode {
     return new ElementNode(name);
@@ -30,11 +60,14 @@ export default {
   insertNode(parent: ElementNode, node: SolidNode, anchor: SolidNode): void {
     log('INSERT: ', parent, node, anchor);
 
+    let prevParent = node.parent;
     parent.insertChild(node, anchor);
-    node._queueDelete = false;
 
     if (node instanceof ElementNode) {
-      parent.rendered && node.render(true);
+      node.parent!.rendered && node.render(true);
+      if (prevParent !== undefined) {
+        pushDeleteQueue(node, 1);
+      }
     } else if (isElementText(parent)) {
       // TextNodes can be placed outside of <text> nodes when <Show> is used as placeholder
       parent.text = parent.getText();
@@ -45,13 +78,11 @@ 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());
+      pushDeleteQueue(node, -1);
     }
   },
   getParentNode(node: SolidNode): ElementNode | ElementText | undefined {

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];
-    }
-  }
-}