@lightningjs/solid - npm Package Compare versions

Comparing version 0.7.5 to 0.7.6

dist/esm/index.js

@@ -340,3 +340,3 @@ import { createSignal, createEffect, mergeProps as mergeProps$1, createRoot, createRenderEffect, createMemo, createComponent as createComponent$1, untrack } from 'solid-js';
 class States extends Array {
-  constructor(node, initialState = []) {
+  constructor(callback, initialState = []) {
     if (isArray(initialState)) {
@@ -349,3 +349,3 @@ super(...initialState);
     }
-    this._node = node;
+    this.onChange = callback;
     return this;
@@ -361,3 +361,3 @@ }
     this.push(state);
-    this._node._stateChanged();
+    this.onChange();
   }
@@ -375,3 +375,3 @@ toggle(state) {
       this.splice(stateIndexToRemove, 1);
-      this._node._stateChanged();
+      this.onChange();
     }
@@ -721,3 +721,3 @@ }
   set states(v) {
-    this._states = new States(this, v);
+    this._states = new States(this._stateChanged.bind(this), v);
     if (this.rendered) {
@@ -728,3 +728,3 @@ this._stateChanged();
   get states() {
-    this._states = this._states || new States(this);
+    this._states = this._states || new States(this._stateChanged.bind(this));
     return this._states;
@@ -759,7 +759,7 @@ }
       log('Layout: ', this);
-      isFunc(this.onBeforeLayout) && this.onBeforeLayout(child, dimensions);
+      isFunc(this.onBeforeLayout) && this.onBeforeLayout.call(this, child, dimensions);
       if (this.display === 'flex') {
         calculateFlex(this);
       }
-      isFunc(this.onLayout) && this.onLayout(child, dimensions);
+      isFunc(this.onLayout) && this.onLayout.call(this, child, dimensions);
     }
@@ -774,3 +774,4 @@ }
     }
-    if (this._undoStates || this.style && keyExists(this.style, this.states)) {
+    const states = config.stateMapperHook?.(this, this.states) || this.states;
+    if (this._undoStates || this.style && keyExists(this.style, states)) {
       this._undoStates = this._undoStates || {};
@@ -780,3 +781,3 @@ let stylesToUndo = {};
         // if state is no longer in the states undo it
-        if (!this.states.includes(state)) {
+        if (!states.includes(state)) {
           stylesToUndo = {
@@ -788,3 +789,3 @@ ...stylesToUndo,
       }
-      const newStyles = this.states.reduce((acc, state) => {
+      const newStyles = states.reduce((acc, state) => {
         const styles = this.style[state];
@@ -808,2 +809,4 @@ if (styles) {
       }, {});
+
+      // Apply the styles
       Object.assign(this, {
@@ -810,0 +813,0 @@ ...stylesToUndo,

dist/source/core/node/index.js

@@ -289,3 +289,3 @@ /*
     set states(v) {
-        this._states = new States(this, v);
+        this._states = new States(this._stateChanged.bind(this), v);
         if (this.rendered) {
@@ -296,3 +296,3 @@ this._stateChanged();
     get states() {
-        this._states = this._states || new States(this);
+        this._states = this._states || new States(this._stateChanged.bind(this));
         return this._states;
@@ -327,7 +327,8 @@ }
             log('Layout: ', this);
-            isFunc(this.onBeforeLayout) && this.onBeforeLayout(child, dimensions);
+            isFunc(this.onBeforeLayout) &&
+                this.onBeforeLayout.call(this, child, dimensions);
             if (this.display === 'flex') {
                 calculateFlex(this);
             }
-            isFunc(this.onLayout) && this.onLayout(child, dimensions);
+            isFunc(this.onLayout) && this.onLayout.call(this, child, dimensions);
         }
@@ -342,4 +343,4 @@ }
         }
-        if (this._undoStates ||
-            (this.style && keyExists(this.style, this.states))) {
+        const states = config.stateMapperHook?.(this, this.states) || this.states;
+        if (this._undoStates || (this.style && keyExists(this.style, states))) {
             this._undoStates = this._undoStates || {};
@@ -349,3 +350,3 @@ let stylesToUndo = {};
                 // if state is no longer in the states undo it
-                if (!this.states.includes(state)) {
+                if (!states.includes(state)) {
                     stylesToUndo = {
@@ -357,3 +358,3 @@ ...stylesToUndo,
             }
-            const newStyles = this.states.reduce((acc, state) => {
+            const newStyles = states.reduce((acc, state) => {
                 const styles = this.style[state];
@@ -376,2 +377,3 @@ if (styles) {
             }, {});
+            // Apply the styles
             Object.assign(this, { ...stylesToUndo, ...newStyles });
@@ -378,0 +380,0 @@ }

dist/source/core/node/states.js

@@ -19,4 +19,4 @@ /*
 export default class States extends Array {
-    _node;
-    constructor(node, initialState = []) {
+    onChange;
+    constructor(callback, initialState = []) {
         if (isArray(initialState)) {
@@ -33,3 +33,3 @@ super(...initialState);
         }
-        this._node = node;
+        this.onChange = callback;
         return this;
@@ -45,3 +45,3 @@ }
         this.push(state);
-        this._node._stateChanged();
+        this.onChange();
     }
@@ -60,5 +60,5 @@ toggle(state) {
             this.splice(stateIndexToRemove, 1);
-            this._node._stateChanged();
+            this.onChange();
         }
     }
 }

dist/types/config.d.ts

 import type { AnimationSettings } from '@lightningjs/renderer';
 import type { IntrinsicTextNodeStyleProps } from './intrinsicTypes.js';
+import { type ElementNode } from './core/node/index.js';
 interface Config {
@@ -7,4 +8,5 @@ debug: boolean;
     fontSettings: Partial<IntrinsicTextNodeStyleProps>;
+    stateMapperHook?: (node: ElementNode, states: Array<string>) => Array<string>;
 }
 export declare const config: Config;
 export {};

dist/types/core/node/states.d.ts

@@ -1,5 +0,4 @@
-import type { ElementNode } from './index.js';
-export default class States extends Array {
-    private _node;
-    constructor(node: ElementNode, initialState?: string[] | string | Record<string, unknown>);
+export default class States extends Array<string> {
+    private onChange;
+    constructor(callback: () => void, initialState?: string[] | string | Record<string, boolean>);
     has(state: string): boolean;
@@ -6,0 +5,0 @@ is(state: string): boolean;

dist/types/intrinsicTypes.d.ts

@@ -1,3 +0,4 @@
-import { type Dimensions, type INode, type INodeWritableProps, type ITextNodeWritableProps } from '@lightningjs/renderer';
+import { type AnimationSettings, type Dimensions, type INode, type INodeWritableProps, type ITextNodeWritableProps } from '@lightningjs/renderer';
 import { type ElementNode } from './core/node/index.js';
+import type States from './core/node/states.js';
 export interface BorderStyleObject {
@@ -9,28 +10,30 @@ width: number;
 export interface IntrinsicCommonProps {
-    ref?: any;
+    alignItems?: 'flexStart' | 'flexEnd' | 'center';
+    animate?: boolean;
+    animationSettings?: AnimationSettings;
+    autofocus?: boolean;
+    border?: BorderStyle;
+    borderBottom?: BorderStyle;
+    borderLeft?: BorderStyle;
+    borderRadius?: number;
+    borderRight?: BorderStyle;
+    borderTop?: BorderStyle;
     children?: any;
-    animate?: boolean;
+    display?: 'flex';
+    flexDirection?: 'row' | 'column';
+    forwardStates?: boolean;
     gap?: number;
+    id?: string;
     justifyContent?: 'flexStart' | 'flexEnd' | 'center' | 'spaceBetween' | 'spaceEvenly';
-    alignItems?: 'flexStart' | 'flexEnd' | 'center';
+    marginBottom?: number;
     marginLeft?: number;
     marginRight?: number;
     marginTop?: number;
-    marginBottom?: number;
-    display?: 'flex';
-    forwardStates?: boolean;
-    onLoad?: (target: INode, dimensions: Dimensions) => void;
+    onBeforeLayout?: (child: ElementNode, dimensions: Dimensions) => void;
     onFail?: (target: INode, error: Error) => void;
-    onBeforeLayout?: (child: ElementNode, dimensions: Dimensions) => void;
     onLayout?: (child: ElementNode, dimensions: Dimensions) => void;
-    autofocus?: boolean;
-    id?: string;
-    flexDirection?: 'row' | 'column';
+    onLoad?: (target: INode, dimensions: Dimensions) => void;
+    ref?: any;
     selected?: number | null;
-    borderRadius?: number;
-    border?: BorderStyle;
-    borderLeft?: BorderStyle;
-    borderRight?: BorderStyle;
-    borderTop?: BorderStyle;
-    borderBottom?: BorderStyle;
+    states?: States;
 }
@@ -37,0 +40,0 @@ export interface IntrinsicNodeStyleProps extends Partial<Omit<INodeWritableProps, 'parent' | 'shader'>>, IntrinsicCommonProps {

package.json

 {
   "name": "@lightningjs/solid",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "description": "Lightning renderer for solid universal",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -158,8 +158,7 @@ <p>
 
-When a child element changes size onLayout will be called. You'll be notified with
-`(node, { width, height})` of the element. You can use this callback to resize the parent node. If you do, call `parent.updateLayout`.
+When a child element changes size updateLayout method on the node will be called. You can use `onBeforeLayout` and `onLayout` hooks to update the element with the following signature `(node, { width, height})`. You can use this callback to resize the parent node before flex is calculated using `onBeforeLayout` and after flex with `onLayout`. If you do, call `parent.updateLayout` for it to also resize.
 
 ### Flex
 
-At the moment there is a very barebone flex implementation (`display: flex`) made for one level of children. It only supports `flexDirection`, `justifyContent` and `gap` at the moment. But very useful for laying out rows and columns.
+At the moment there is a very barebone flex implementation (`display: flex`). It only supports `flexDirection`, `justifyContent`, `alignItems` and `gap` at the moment. But very useful for laying out rows and columns.
 
@@ -200,2 +199,4 @@ ```jsx
 
+`alignItems` supports `flexStart`, `flexEnd`, and `center` but requires it's container to have a height / width set.
+
 ## Animations
@@ -400,2 +401,7 @@
 Config.fontSettings.fontSize = 100;
+
+Config.stateMapperHook = (node, states) => {
+  const tone = node.tone || '';
+  states.map((state) => state + tone);
+};
 ```

src/config.ts

@@ -22,2 +22,3 @@ /*
 import type { IntrinsicTextNodeStyleProps } from './intrinsicTypes.js';
+import { type ElementNode } from './core/node/index.js';
 
@@ -28,2 +29,3 @@ interface Config {
   fontSettings: Partial<IntrinsicTextNodeStyleProps>;
+  stateMapperHook?: (node: ElementNode, states: Array<string>) => Array<string>;
 }
@@ -30,0 +32,0 @@

src/core/node/index.ts

@@ -371,3 +371,3 @@ /*
   set states(v) {
-    this._states = new States(this, v);
+    this._states = new States(this._stateChanged.bind(this), v);
     if (this.rendered) {
@@ -379,3 +379,3 @@ this._stateChanged();
   get states() {
-    this._states = this._states || new States(this);
+    this._states = this._states || new States(this._stateChanged.bind(this));
     return this._states;
@@ -417,3 +417,4 @@ }
       log('Layout: ', this);
-      isFunc(this.onBeforeLayout) && this.onBeforeLayout(child, dimensions);
+      isFunc(this.onBeforeLayout) &&
+        this.onBeforeLayout.call(this, child, dimensions);
 
@@ -424,3 +425,3 @@ if (this.display === 'flex') {
 
-      isFunc(this.onLayout) && this.onLayout(child, dimensions);
+      isFunc(this.onLayout) && this.onLayout.call(this, child, dimensions);
     }
@@ -438,6 +439,5 @@ }
 
-    if (
-      this._undoStates ||
-      (this.style && keyExists(this.style, this.states))
-    ) {
+    const states = config.stateMapperHook?.(this, this.states) || this.states;
+
+    if (this._undoStates || (this.style && keyExists(this.style, states))) {
       this._undoStates = this._undoStates || {};
@@ -448,3 +448,3 @@ let stylesToUndo = {};
         // if state is no longer in the states undo it
-        if (!this.states.includes(state)) {
+        if (!states.includes(state)) {
           stylesToUndo = {
@@ -457,3 +457,3 @@ ...stylesToUndo,
 
-      const newStyles = this.states.reduce((acc, state) => {
+      const newStyles = states.reduce((acc, state) => {
         const styles = this.style[state];
@@ -478,2 +478,3 @@ if (styles) {
 
+      // Apply the styles
       Object.assign(this, { ...stylesToUndo, ...newStyles });
@@ -480,0 +481,0 @@ }

src/core/node/states.ts

@@ -19,23 +19,22 @@ /*
 import { isArray, isString } from '../utils.js';
-import type { ElementNode } from './index.js';
-export default class States extends Array {
-  private _node: ElementNode;
+export default class States extends Array<string> {
+  private onChange: () => void;
 
   constructor(
-    node: ElementNode,
-    initialState: string[] | string | Record<string, unknown> = [],
+    callback: () => void,
+    initialState: string[] | string | Record<string, boolean> = [],
   ) {
     if (isArray(initialState)) {
-      super(...(initialState as any));
+      super(...initialState);
     } else if (isString(initialState)) {
-      super(initialState as any);
+      super(initialState);
     } else {
       super(
-        ...(Object.entries(initialState)
+        ...Object.entries(initialState)
           .filter(([_key, value]) => value)
-          .map(([key]) => key) as any),
+          .map(([key]) => key),
       );
     }
 
-    this._node = node;
+    this.onChange = callback;
     return this;
@@ -54,3 +53,3 @@ }
     this.push(state);
-    this._node._stateChanged();
+    this.onChange();
   }
@@ -70,5 +69,5 @@
       this.splice(stateIndexToRemove, 1);
-      this._node._stateChanged();
+      this.onChange();
     }
   }
 }

src/intrinsicTypes.ts

@@ -26,2 +26,3 @@ /*
 import { type ElementNode, type TextNode } from './core/node/index.js';
+import type States from './core/node/states.js';
 
@@ -36,6 +37,18 @@ export interface BorderStyleObject {
 export interface IntrinsicCommonProps {
-  ref?: any;
+  alignItems?: 'flexStart' | 'flexEnd' | 'center';
+  animate?: boolean;
+  animationSettings?: AnimationSettings;
+  autofocus?: boolean;
+  border?: BorderStyle;
+  borderBottom?: BorderStyle;
+  borderLeft?: BorderStyle;
+  borderRadius?: number;
+  borderRight?: BorderStyle;
+  borderTop?: BorderStyle;
   children?: any;
-  animate?: boolean;
+  display?: 'flex';
+  flexDirection?: 'row' | 'column';
+  forwardStates?: boolean;
   gap?: number;
+  id?: string;
   justifyContent?:
@@ -47,23 +60,13 @@ | 'flexStart'
     | 'spaceEvenly';
-  alignItems?: 'flexStart' | 'flexEnd' | 'center';
+  marginBottom?: number;
   marginLeft?: number;
   marginRight?: number;
   marginTop?: number;
-  marginBottom?: number;
-  display?: 'flex';
-  forwardStates?: boolean;
-  onLoad?: (target: INode, dimensions: Dimensions) => void;
+  onBeforeLayout?: (child: ElementNode, dimensions: Dimensions) => void;
   onFail?: (target: INode, error: Error) => void;
-  onBeforeLayout?: (child: ElementNode, dimensions: Dimensions) => void;
   onLayout?: (child: ElementNode, dimensions: Dimensions) => void;
-  autofocus?: boolean;
-  id?: string;
-  flexDirection?: 'row' | 'column';
+  onLoad?: (target: INode, dimensions: Dimensions) => void;
+  ref?: any;
   selected?: number | null;
-  borderRadius?: number;
-  border?: BorderStyle;
-  borderLeft?: BorderStyle;
-  borderRight?: BorderStyle;
-  borderTop?: BorderStyle;
-  borderBottom?: BorderStyle;
+  states?: States;
 }
@@ -70,0 +73,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

284248

increased by0.61%

Lines of code

4466

increased by0.27%

Number of lines in readme file

405

increased by1.5%

No dependency changes