@lightningtv/solid 3.0.3 → 3.0.4

package/src/core/elementNode.ts

@@ -49,7 +49,11 @@ import type {
 } from '@lightningjs/renderer';
 import { assertTruthy } from '@lightningjs/renderer/utils';
 import { NodeType } from './nodeTypes.js';
-import { ForwardFocusHandler, setActiveElement, FocusNode } from './focusManager.js';
+import {
+  ForwardFocusHandler,
+  setActiveElement,
+  FocusNode,
+} from './focusManager.js';
 import simpleAnimation, { SimpleAnimationSettings } from './animation.js';
 
 let layoutRunQueued = false;
@@ -73,7 +77,11 @@ function runLayout() {
   }
 }
 
-const parseAndAssignShaderProps = (prefix: string, obj: Record<string, any>, props: Record<string, any> = {}) => {
+const parseAndAssignShaderProps = (
+  prefix: string,
+  obj: Record<string, any>,
+  props: Record<string, any> = {},
+) => {
   if (!obj) return;
   props[prefix] = obj;
   Object.entries(obj).forEach(([key, value]) => {
@@ -172,7 +180,12 @@ declare global {
 }
 
 export type RendererNode = AddColorString<
-  Partial<NewOmit<INode, 'parent' | 'shader' | 'src' | 'children' | 'id' | 'removeChild'>>
+  Partial<
+    NewOmit<
+      INode,
+      'parent' | 'shader' | 'src' | 'children' | 'id' | 'removeChild'
+    >
+  >
 >;
 export interface ElementNode extends RendererNode, FocusNode {
   [key: string]: unknown;
@@ -257,7 +270,10 @@ export interface ElementNode extends RendererNode, FocusNode {
   /**
    * The underlying Lightning Renderer node object. This is where the properties are ultimately set for rendering.
    */
-  lng: Partial<ElementNode> | IRendererNode | (IRendererTextNode & { shader?: any });
+  lng:
+    | Partial<ElementNode>
+    | IRendererNode
+    | (IRendererTextNode & { shader?: any });
   /**
    * A reference to the `ElementNode` instance. Can be an object or a callback function.
    */
@@ -413,7 +429,13 @@ export interface ElementNode extends RendererNode, FocusNode {
    *
    * @see @see https://lightning-tv.github.io/solid/#/flow/layout?id=flex
    */
-  justifyContent?: 'flexStart' | 'flexEnd' | 'center' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly';
+  justifyContent?:
+    | 'flexStart'
+    | 'flexEnd'
+    | 'center'
+    | 'spaceBetween'
+    | 'spaceAround'
+    | 'spaceEvenly';
   /**
    * Applies a linear gradient effect to the element.
    *
@@ -486,6 +508,14 @@ export interface ElementNode extends RendererNode, FocusNode {
    * @see https://lightning-tv.github.io/solid/#/flow/layout
    */
   h: number;
+  /**
+   * The maximum width of the element.
+   */
+  maxWidth?: number;
+  /**
+   * The maximum height of the element.
+   */
+  maxHeight?: number;
   /**
    * The z-index of the element, which affects its stacking order.
    *
@@ -497,7 +527,10 @@ export interface ElementNode extends RendererNode, FocusNode {
    *
    * @see https://lightning-tv.github.io/solid/#/essentials/transitions?id=transitions-animations
    */
-  transition?: Record<string, AnimationSettings | undefined | true | false> | true | false;
+  transition?:
+    | Record<string, AnimationSettings | undefined | true | false>
+    | true
+    | false;
   /**
    * Optional handlers for animation events.
    *
@@ -628,19 +661,19 @@ export class ElementNode extends Object {
     }
   }
 
-  get height() {
-    return this.h;
+  get height(): number {
+    return this.maxHeight || this.h;
   }
 
-  set height(h) {
+  set height(h: number) {
     this.h = h;
   }
 
-  get width() {
-    return this.w;
+  get width(): number {
+    return this.maxWidth || this.w;
   }
 
-  set width(w) {
+  set width(w: number) {
     this.w = w;
   }
 
@@ -650,7 +683,10 @@ export class ElementNode extends Object {
     }
 
     this._fontWeight = v;
-    const weight = (Config.fontWeightAlias && (Config.fontWeightAlias[v as string] as number | string)) ?? v;
+    const weight =
+      (Config.fontWeightAlias &&
+        (Config.fontWeightAlias[v as string] as number | string)) ??
+      v;
     (this.lng as any).fontFamily = `${this.fontFamily}${weight}`;
   }
 
@@ -667,7 +703,10 @@ export class ElementNode extends Object {
     return this._fontFamily || Config.fontSettings?.fontFamily;
   }
 
-  insertChild(node: ElementNode | ElementText | TextNode, beforeNode?: ElementNode | ElementText | TextNode | null) {
+  insertChild(
+    node: ElementNode | ElementText | TextNode,
+    beforeNode?: ElementNode | ElementText | TextNode | null,
+  ) {
     // always remove nodes if they have a parent - for back swap of node
     // this will then put the node at the end of the array when re-added
     if (node.parent) {
@@ -716,8 +755,12 @@ export class ElementNode extends Object {
     return undefined;
   }
 
-  set shader(shaderProps: IRendererShader | [kind: string, props: IRendererShaderProps]) {
-    this.lng.shader = isArray(shaderProps) ? renderer.createShader(...shaderProps) : shaderProps;
+  set shader(
+    shaderProps: IRendererShader | [kind: string, props: IRendererShaderProps],
+  ) {
+    this.lng.shader = isArray(shaderProps)
+      ? renderer.createShader(...shaderProps)
+      : shaderProps;
   }
 
   _sendToLightningAnimatable(name: string, value: number) {
@@ -725,7 +768,9 @@ export class ElementNode extends Object {
       this.transition &&
       this.rendered &&
       Config.animationsEnabled &&
-      (this.transition === true || this.transition[name] || this.transition[getPropertyAlias(name)])
+      (this.transition === true ||
+        this.transition[name] ||
+        this.transition[getPropertyAlias(name)])
     ) {
       const animationSettings =
         this.transition === true || this.transition[name] === true
@@ -737,20 +782,29 @@ export class ElementNode extends Object {
           this,
           name,
           value,
-          animationSettings || (this.animationSettings as SimpleAnimationSettings),
+          animationSettings ||
+            (this.animationSettings as SimpleAnimationSettings),
         );
         simpleAnimation.register(renderer.stage);
         return;
       } else {
-        const animationController = this.animate({ [name]: value }, animationSettings);
+        const animationController = this.animate(
+          { [name]: value },
+          animationSettings,
+        );
 
         if (this.onAnimation) {
-          const animationEvents = Object.keys(this.onAnimation) as AnimationEvents[];
+          const animationEvents = Object.keys(
+            this.onAnimation,
+          ) as AnimationEvents[];
           for (const event of animationEvents) {
             const handler = this.onAnimation[event];
-            animationController.on(event, (controller: IAnimationController, props?: any) => {
-              handler!.call(this, controller, name, value, props);
-            });
+            animationController.on(
+              event,
+              (controller: IAnimationController, props?: any) => {
+                handler!.call(this, controller, name, value, props);
+              },
+            );
           }
         }
 
@@ -765,11 +819,18 @@ export class ElementNode extends Object {
     props: Partial<INodeAnimateProps<CoreShaderNode>>,
     animationSettings?: AnimationSettings,
   ): IAnimationController {
-    isDev && assertTruthy(this.rendered, 'Node must be rendered before animating');
-    return (this.lng as IRendererNode).animate(props, animationSettings || this.animationSettings || {});
+    isDev &&
+      assertTruthy(this.rendered, 'Node must be rendered before animating');
+    return (this.lng as IRendererNode).animate(
+      props,
+      animationSettings || this.animationSettings || {},
+    );
   }
 
-  chain(props: Partial<INodeAnimateProps<CoreShaderNode>>, animationSettings?: AnimationSettings) {
+  chain(
+    props: Partial<INodeAnimateProps<CoreShaderNode>>,
+    animationSettings?: AnimationSettings,
+  ) {
     if (this._animationRunning) {
       this._animationQueue = [];
       this._animationRunning = false;
@@ -778,7 +839,8 @@ export class ElementNode extends Object {
     if (animationSettings) {
       this._animationQueueSettings = animationSettings;
     } else if (!this._animationQueueSettings) {
-      this._animationQueueSettings = animationSettings || this.animationSettings;
+      this._animationQueueSettings =
+        animationSettings || this.animationSettings;
     }
     animationSettings = animationSettings || this._animationQueueSettings;
     this._animationQueue = this._animationQueue || [];
@@ -790,7 +852,9 @@ export class ElementNode extends Object {
     let animation = this._animationQueue!.shift();
     while (animation) {
       this._animationRunning = true;
-      await this.animate(animation.props, animation.animationSettings).start().waitUntilStopped();
+      await this.animate(animation.props, animation.animationSettings)
+        .start()
+        .waitUntilStopped();
       animation = this._animationQueue!.shift();
     }
     this._animationRunning = false;
@@ -822,7 +886,8 @@ export class ElementNode extends Object {
             return;
           }
         } else {
-          const focusedIndex = typeof this.forwardFocus === 'number' ? this.forwardFocus : null;
+          const focusedIndex =
+            typeof this.forwardFocus === 'number' ? this.forwardFocus : null;
           const nodes = this.children;
           if (focusedIndex !== null && focusedIndex < nodes.length) {
             const child = nodes[focusedIndex];
@@ -946,7 +1011,9 @@ export class ElementNode extends Object {
   }
 
   set states(states: NodeStates) {
-    this._states = this._states ? this._states.merge(states) : new States(this._stateChanged.bind(this), states);
+    this._states = this._states
+      ? this._states.merge(states)
+      : new States(this._stateChanged.bind(this), states);
     if (this.rendered) {
       this._stateChanged();
     }
@@ -1014,7 +1081,8 @@ export class ElementNode extends Object {
 
       const flexChanged = this.display === 'flex' && calculateFlex(this);
       layoutQueue.delete(this);
-      const onLayoutChanged = isFunc(this.onLayout) && this.onLayout.call(this, this);
+      const onLayoutChanged =
+        isFunc(this.onLayout) && this.onLayout.call(this, this);
 
       if ((flexChanged || onLayoutChanged) && this.parent) {
         addToLayoutQueue(this.parent);
@@ -1071,7 +1139,9 @@ export class ElementNode extends Object {
       let newStyles: Styles;
       if (numStates === 1) {
         newStyles = this[states[0] as keyof Styles] as Styles;
-        newStyles = stylesToUndo ? { ...stylesToUndo, ...newStyles } : newStyles;
+        newStyles = stylesToUndo
+          ? { ...stylesToUndo, ...newStyles }
+          : newStyles;
       } else {
         newStyles = states.reduce((acc, state) => {
           const styles = this[state];
@@ -1186,13 +1256,17 @@ export class ElementNode extends Object {
         }
 
         if (!textProps.maxWidth) {
-          textProps.maxWidth = parentWidth - textProps.x! - (textProps.marginRight || 0);
+          textProps.maxWidth =
+            parentWidth - textProps.x! - (textProps.marginRight || 0);
         }
 
         if (textProps.contain === 'both' && !textProps.maxHeight) {
-          textProps.maxHeight = parentHeight - textProps.y! - (textProps.marginBottom || 0);
+          textProps.maxHeight =
+            parentHeight - textProps.y! - (textProps.marginBottom || 0);
         } else if (textProps.maxLines === 1) {
-          textProps.maxHeight = (textProps.maxHeight || textProps.lineHeight || textProps.fontSize) as number;
+          textProps.maxHeight = (textProps.maxHeight ||
+            textProps.lineHeight ||
+            textProps.fontSize) as number;
         }
 
         textProps.w = textProps.h = undefined;
@@ -1204,7 +1278,9 @@ export class ElementNode extends Object {
       }
 
       isDev && log('Rendering: ', this, props);
-      node.lng = renderer.createTextNode(props as unknown as IRendererTextNodeProps);
+      node.lng = renderer.createTextNode(
+        props as unknown as IRendererTextNodeProps,
+      );
       if (parent.requiresLayout()) {
         if (!textProps.maxWidth || !textProps.maxHeight) {
           node._layoutOnLoad();
@@ -1334,7 +1410,9 @@ function createRawShaderAccessor<T>(key: keyof StyleEffects) {
   };
 }
 
-function shaderAccessor<T extends Record<string, any> | number>(key: 'border' | 'shadow' | 'rounded') {
+function shaderAccessor<T extends Record<string, any> | number>(
+  key: 'border' | 'shadow' | 'rounded',
+) {
   return {
     set(this: ElementNode, value: T) {
       let target = this.lng.shader || {};
@@ -1343,12 +1421,17 @@ function shaderAccessor<T extends Record<string, any> | number>(key: 'border' |
       if (this.lng.shader?.program) {
         target = this.lng.shader.props;
         const transitionKey = key === 'rounded' ? 'borderRadius' : key;
-        if (this.transition && (this.transition === true || this.transition[transitionKey])) {
+        if (
+          this.transition &&
+          (this.transition === true || this.transition[transitionKey])
+        ) {
           target = {};
           animationSettings =
             this.transition === true || this.transition[transitionKey] === true
               ? undefined
-              : (this.transition[transitionKey] as undefined | AnimationSettings);
+              : (this.transition[transitionKey] as
+                  | undefined
+                  | AnimationSettings);
         }
       }
 
@@ -1388,6 +1471,8 @@ Object.defineProperties(ElementNode.prototype, {
   rounded: shaderAccessor<BorderRadius>('rounded'),
   // Alias for rounded
   borderRadius: shaderAccessor<BorderRadius>('rounded'),
-  linearGradient: createRawShaderAccessor<LinearGradientProps>('linearGradient'),
-  radialGradient: createRawShaderAccessor<RadialGradientProps>('radialGradient'),
+  linearGradient:
+    createRawShaderAccessor<LinearGradientProps>('linearGradient'),
+  radialGradient:
+    createRawShaderAccessor<RadialGradientProps>('radialGradient'),
 });

package/src/core/intrinsicTypes.ts

@@ -9,7 +9,12 @@ import {
   ShaderRoundedProps,
   ShaderShadowProps,
 } from './shaders.js';
-import { EventHandlers, DefaultKeyMap, KeyHoldMap, FocusNode } from './focusKeyTypes.js';
+import {
+  EventHandlers,
+  DefaultKeyMap,
+  KeyHoldMap,
+  FocusNode,
+} from './focusKeyTypes.js';
 import type { JSXElement } from 'solid-js';
 
 export type AnimationSettings = Partial<lngr.AnimationSettings>;
@@ -47,7 +52,9 @@ export type RemoveUnderscoreProps<T> = {
   [K in keyof T as K extends `_${string}` ? never : K]: T[K];
 };
 
-type RendererText = AddColorString<Partial<Omit<lngr.ITextNodeProps, 'debug' | 'shader' | 'parent'>>>;
+type RendererText = AddColorString<
+  Partial<Omit<lngr.ITextNodeProps, 'debug' | 'shader' | 'parent'>>
+>;
 
 type CleanElementNode = NewOmit<
   RemoveUnderscoreProps<ElementNode>,
@@ -73,7 +80,10 @@ type CleanElementNode = NewOmit<
 >;
 /** Node text, children of a ElementNode of type TextNode */
 export interface ElementText
-  extends NewOmit<ElementNode, '_type' | 'parent' | 'children' | 'src' | 'scale' | 'fontFamily'>,
+  extends NewOmit<
+      ElementNode,
+      '_type' | 'parent' | 'children' | 'src' | 'scale' | 'fontFamily'
+    >,
     NewOmit<RendererText, 'x' | 'y' | 'w' | 'h'> {
   _type: 'textNode';
   parent?: ElementNode;
@@ -97,7 +107,14 @@ export interface NodeProps
     Partial<
       NewOmit<
         CleanElementNode,
-        'children' | 'text' | 'lng' | 'rendered' | 'renderer' | 'emit' | 'preFlexwidth' | 'preFlexHeight'
+        | 'children'
+        | 'text'
+        | 'lng'
+        | 'rendered'
+        | 'renderer'
+        | 'emit'
+        | 'preFlexwidth'
+        | 'preFlexHeight'
       >
     > {
   states?: NodeStates;
@@ -172,7 +189,10 @@ type EventPayloadMap = {
 
 type NodeEvents = keyof EventPayloadMap;
 
-type EventHandler<E extends NodeEvents> = (target: ElementNode, event?: EventPayloadMap[E]) => void;
+type EventHandler<E extends NodeEvents> = (
+  target: ElementNode,
+  event?: EventPayloadMap[E],
+) => void;
 
 export type OnEvent = Partial<{
   [K in NodeEvents]: EventHandler<K>;

package/src/index.ts

@@ -6,4 +6,13 @@ export * from './activeElement.js';
 export * from './utils.js';
 export * from './render.js';
 export * from './types.js';
-export { For, Show, Suspense, SuspenseList, Switch, Match, Index, ErrorBoundary } from 'solid-js';
+export {
+  For,
+  Show,
+  Suspense,
+  SuspenseList,
+  Switch,
+  Match,
+  Index,
+  ErrorBoundary,
+} from 'solid-js';

package/src/primitives/index.ts

@@ -24,7 +24,11 @@ export * from './VirtualGrid.jsx';
 export * from './Virtual.jsx';
 export * from './utils/withScrolling.js';
 export * from './createTag.jsx';
-export { type AnyFunction, chainFunctions, chainRefs } from './utils/chainFunctions.js';
+export {
+  type AnyFunction,
+  chainFunctions,
+  chainRefs,
+} from './utils/chainFunctions.js';
 export * from './utils/handleNavigation.js';
 export { createSpriteMap, type SpriteDef } from './utils/createSpriteMap.js';
 export { createBlurredImage } from './utils/createBlurredImage.js';

package/src/primitives/utils/handleNavigation.ts

@@ -6,7 +6,11 @@ function idxInArray(idx: number, arr: readonly any[]): boolean {
   return idx >= 0 && idx < arr.length;
 }
 
-function findFirstFocusableChildIdx(el: lngp.NavigableElement, from = 0, delta = 1): number {
+function findFirstFocusableChildIdx(
+  el: lngp.NavigableElement,
+  from = 0,
+  delta = 1,
+): number {
   for (let i = from; ; i += delta) {
     if (!idxInArray(i, el.children)) {
       if (el.wrap) {
@@ -42,7 +46,9 @@ function selectChild(el: lngp.NavigableElement, index: number): boolean {
 }
 
 /** @deprecated Use {@link navigableForwardFocus} instead */
-export function onGridFocus(_?: lngp.OnSelectedChanged): lng.ForwardFocusHandler {
+export function onGridFocus(
+  _?: lngp.OnSelectedChanged,
+): lng.ForwardFocusHandler {
   return function () {
     return navigableForwardFocus.call(this, this);
   };
@@ -83,9 +89,14 @@ export const navigableForwardFocus: lng.ForwardFocusHandler = function () {
   return selectChild(navigable, selected);
 };
 
-export function handleNavigation(direction: 'up' | 'right' | 'down' | 'left'): lng.KeyHandler {
+export function handleNavigation(
+  direction: 'up' | 'right' | 'down' | 'left',
+): lng.KeyHandler {
   return function () {
-    return moveSelection(this as lngp.NavigableElement, direction === 'up' || direction === 'left' ? -1 : 1);
+    return moveSelection(
+      this as lngp.NavigableElement,
+      direction === 'up' || direction === 'left' ? -1 : 1,
+    );
   };
 }
 
@@ -106,13 +117,19 @@ export function handleNavigation(direction: 'up' | 'right' | 'down' | 'left'): l
  * ```
  */
 export const navigableHandleNavigation: lng.KeyHandler = function (e) {
-  return moveSelection(this as lngp.NavigableElement, e.key === 'ArrowUp' || e.key === 'ArrowLeft' ? -1 : 1);
+  return moveSelection(
+    this as lngp.NavigableElement,
+    e.key === 'ArrowUp' || e.key === 'ArrowLeft' ? -1 : 1,
+  );
 };
 
 /**
  * Moves the selection within a {@link lngp.NavigableElement}.
  */
-export function moveSelection(el: lngp.NavigableElement, delta: number): boolean {
+export function moveSelection(
+  el: lngp.NavigableElement,
+  delta: number,
+): boolean {
   let selected = findFirstFocusableChildIdx(el, el.selected + delta, delta);
 
   if (selected === -1) {
@@ -135,7 +152,8 @@ export function moveSelection(el: lngp.NavigableElement, delta: number): boolean
     lng.assertTruthy(lastSelectedChild instanceof lng.ElementNode);
 
     const num = lastSelectedChild.selected || 0;
-    active.selected = num < active.children.length ? num : active.children.length - 1;
+    active.selected =
+      num < active.children.length ? num : active.children.length - 1;
   }
 
   return selectChild(el, selected);
@@ -147,7 +165,10 @@ function distanceBetweenRectCenters(a: lng.Rect, b: lng.Rect): number {
   return Math.sqrt(dx * dx + dy * dy);
 }
 
-function findClosestFocusableChildIdx(el: lng.ElementNode, prevEl: lng.ElementNode): number {
+function findClosestFocusableChildIdx(
+  el: lng.ElementNode,
+  prevEl: lng.ElementNode,
+): number {
   // select child closest to the previous active element
   const prevRect = lng.getElementScreenRect(prevEl);
   const elRect = lng.getElementScreenRect(el);
@@ -255,7 +276,11 @@ export const spatialHandleNavigation: lng.KeyHandler = function (e) {
 
   // Select next/prev child in the current column/row
   if (flexDelta !== 0) {
-    for (let i = selected + flexDelta; idxInArray(i, this.children); i += flexDelta) {
+    for (
+      let i = selected + flexDelta;
+      idxInArray(i, this.children);
+      i += flexDelta
+    ) {
       const child = this.children[i]!;
       if (child.skipFocus) continue;
 
@@ -270,7 +295,11 @@ export const spatialHandleNavigation: lng.KeyHandler = function (e) {
     let closestIdx = -1;
     let closestDist = Infinity;
 
-    for (let i = selected + crossDelta; idxInArray(i, this.children); i += crossDelta) {
+    for (
+      let i = selected + crossDelta;
+      idxInArray(i, this.children);
+      i += crossDelta
+    ) {
       const child = this.children[i]!;
       if (child.skipFocus) continue;