@lightningtv/solid 2.7.18 → 2.8.0-0

package/src/primitives/utils/withScrolling.ts

@@ -82,9 +82,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 RendererMain as IRendererMain,
 } from '@lightningtv/core';
 import nodeOpts from './solidOpts.js';
 import {
@@ -14,14 +14,15 @@ import {
   createRenderEffect,
   untrack,
   type JSXElement,
-  type ValidComponent,
+  createRoot,
+  type Component,
 } 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 {
@@ -117,10 +120,8 @@ function processTasks(): void {
  * ```
  * @description https://www.solidjs.com/docs/latest/api#dynamic
  */
-export function Dynamic<T>(
-  props: T & {
-    component?: ValidComponent;
-  },
+export function Dynamic<T extends Record<string, any>>(
+  props: T & { component?: Component<T> | undefined | null },
 ): JSXElement {
   const [p, others] = splitProps(props, ['component']);
 

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,14 @@ 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);
+    } else if (isElementText(parent)) {
+      // TextNodes can be placed outside of <text> nodes when <Show> is used as placeholder
+      parent.text = parent.getText();
     }
   },
   getParentNode(node: SolidNode): ElementNode | ElementText | undefined {

package/src/primitives/LazyUp.tsx

@@ -1,72 +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()}>
-      {/* @ts-ignore */}
-      <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];
-    }
-  }
-}