@lightningjs/solid - npm Package Compare versions

Comparing version 0.15.6 to 0.15.7

dist/esm/index.js

@@ -94,3 +94,2 @@ import { createSignal, mergeProps as mergeProps$1, createRoot, createRenderEffect, createMemo, createComponent as createComponent$1, untrack, splitProps } from 'solid-js';
     node.parent = this._parent;
-    this._parent._isDirty = true;
   }
@@ -457,2 +456,4 @@ remove(node) {
 } = config;
+const layoutQueue = [];
+let queueLayout = true;
 function convertEffectsToShader(styleEffects) {
@@ -502,4 +503,2 @@ const effects = [];
 
-  // Public but uses _ prefix
-  // Public but uses _ prefix
   _animationQueue = [];
@@ -619,3 +618,3 @@ _animationRunning = false;
   }
-  _resizeOnTextLoad() {
+  _layoutOnTextLoad() {
     this.lng.on('loaded', (_node, loadedPayload) => {
@@ -670,7 +669,8 @@ if (loadedPayload.type === 'text') {
     // traverse all the childrens children
-    for (const child of this.children) {
-      if (child.id === id) {
-        return child;
-      }
+    for (let i = 0; i < this.children.length; i++) {
+      const child = this.children[i];
       if (child instanceof ElementNode) {
+        if (child.id === id) {
+          return child;
+        }
         const found = child.searchChildrenById(id);
@@ -752,2 +752,4 @@ if (found) {
   render() {
+    // Elements are rendered from the outside in, then `insert`ed from the inside out.
+
     // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -768,7 +770,12 @@ const node = this;
     }
-
-    // Parent is dirty whenever a node is inserted after initial render
-    if (parent._isDirty) {
-      parent.updateLayout();
-      parent._isDirty = false;
+    if (parent.display === 'flex' && layoutQueue.indexOf(parent) === -1) {
+      layoutQueue.push(parent);
+      if (queueLayout) {
+        queueMicrotask(() => {
+          layoutQueue.forEach(n => n.updateLayout());
+          layoutQueue.length = 0;
+          queueLayout = true;
+        });
+      }
+      queueLayout = false;
     }
@@ -799,7 +806,5 @@ if (this.states.length) {
           props.width = (parent.width || 0) - props.x - (props.marginRight || 0);
-          node._autosized = true;
         }
         if (props.contain === 'both' && !props.height && !props.maxLines) {
           props.height = (parent.height || 0) - props.y - (props.marginBottom || 0);
-          node._autosized = true;
         }
@@ -809,5 +814,4 @@ }
       node.lng = renderer.createTextNode(props);
-      if (!props.width || !props.height) {
-        node._autosized = true;
-        node._resizeOnTextLoad();
+      if ((parent.display === 'flex' || parent.onBeforeLayout) && (!props.width || !props.height)) {
+        node._layoutOnTextLoad();
       }
@@ -820,7 +824,5 @@ } else {
           props.width = (parent.width || 0) - props.x;
-          node._autosized = true;
         }
         if (isNaN(props.height)) {
           props.height = (parent.height || 0) - props.y;
-          node._autosized = true;
         }
@@ -1229,3 +1231,3 @@ if (!props.color && !props.src) {
  */
-var universalLightning = {
+var nodeOpts = {
   createElement(name) {
@@ -1311,7 +1313,7 @@ return new ElementNode(name);
 
-const solidRenderer = createRenderer(universalLightning);
+const solidRenderer = createRenderer(nodeOpts);
 const render = async function (code, node) {
   const renderer = startLightningRenderer(config.rendererOptions, node);
   await renderer.init();
-  const rootNode = new ElementNode('App');
+  const rootNode = nodeOpts.createElement('App');
   rootNode.lng = renderer.root;
@@ -1318,0 +1320,0 @@ // @ts-expect-error - code is jsx element and not SolidElement yet

dist/source/core/node/children.js

@@ -42,3 +42,2 @@ /*
         node.parent = this._parent;
-        this._parent._isDirty = true;
     }
@@ -45,0 +44,0 @@ remove(node) {

dist/source/core/node/index.js

@@ -26,2 +26,4 @@ /*
 const { animationSettings: defaultAnimationSettings } = config;
+const layoutQueue = [];
+let queueLayout = true;
 function convertEffectsToShader(styleEffects) {
@@ -135,4 +137,2 @@ const effects = [];
     _borderBottom;
-    _autosized; // Public but uses _ prefix
-    _isDirty; // Public but uses _ prefix
     _animationQueue = [];
@@ -262,3 +262,3 @@ _animationQueueSettings;
     }
-    _resizeOnTextLoad() {
+    _layoutOnTextLoad() {
         this.lng.on('loaded', (_node, loadedPayload) => {
@@ -312,7 +312,8 @@ if (loadedPayload.type === 'text') {
         // traverse all the childrens children
-        for (const child of this.children) {
-            if (child.id === id) {
-                return child;
-            }
+        for (let i = 0; i < this.children.length; i++) {
+            const child = this.children[i];
             if (child instanceof ElementNode) {
+                if (child.id === id) {
+                    return child;
+                }
                 const found = child.searchChildrenById(id);
@@ -393,2 +394,3 @@ if (found) {
     render() {
+        // Elements are rendered from the outside in, then `insert`ed from the inside out.
         // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -409,6 +411,12 @@ const node = this;
         }
-        // Parent is dirty whenever a node is inserted after initial render
-        if (parent._isDirty) {
-            parent.updateLayout();
-            parent._isDirty = false;
+        if (parent.display === 'flex' && layoutQueue.indexOf(parent) === -1) {
+            layoutQueue.push(parent);
+            if (queueLayout) {
+                queueMicrotask(() => {
+                    layoutQueue.forEach((n) => n.updateLayout());
+                    layoutQueue.length = 0;
+                    queueLayout = true;
+                });
+            }
+            queueLayout = false;
         }
@@ -440,3 +448,2 @@ if (this.states.length) {
                         (parent.width || 0) - props.x - (props.marginRight || 0);
-                    node._autosized = true;
                 }
@@ -446,3 +453,2 @@ if (props.contain === 'both' && !props.height && !props.maxLines) {
                         (parent.height || 0) - props.y - (props.marginBottom || 0);
-                    node._autosized = true;
                 }
@@ -452,5 +458,5 @@ }
             node.lng = renderer.createTextNode(props);
-            if (!props.width || !props.height) {
-                node._autosized = true;
-                node._resizeOnTextLoad();
+            if ((parent.display === 'flex' || parent.onBeforeLayout) &&
+                (!props.width || !props.height)) {
+                node._layoutOnTextLoad();
             }
@@ -464,7 +470,5 @@ }
                     props.width = (parent.width || 0) - props.x;
-                    node._autosized = true;
                 }
                 if (isNaN(props.height)) {
                     props.height = (parent.height || 0) - props.y;
-                    node._autosized = true;
                 }
@@ -471,0 +475,0 @@ if (!props.color && !props.src) {

dist/source/core/render.js

@@ -21,10 +21,9 @@ /* eslint-disable @typescript-eslint/unbound-method */
 import { startLightningRenderer } from './lightningInit.js';
-import universalLightning from './solidUniversal.js';
-import { ElementNode } from './node/index.js';
+import nodeOpts from './solidUniversal.js';
 import { splitProps, createMemo, untrack } from 'solid-js';
-const solidRenderer = createRenderer(universalLightning);
+const solidRenderer = createRenderer(nodeOpts);
 export const render = async function (code, node) {
     const renderer = startLightningRenderer(config.rendererOptions, node);
     await renderer.init();
-    const rootNode = new ElementNode('App');
+    const rootNode = nodeOpts.createElement('App');
     rootNode.lng = renderer.root;
@@ -31,0 +30,0 @@ // @ts-expect-error - code is jsx element and not SolidElement yet

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

@@ -58,4 +58,2 @@ import { createShader } from '../lightningInit.js';
     _borderBottom?: BorderStyleObject;
-    _autosized?: boolean;
-    _isDirty?: boolean;
     private _animationQueue;
@@ -79,3 +77,3 @@ private _animationQueueSettings;
     isTextNode(): boolean;
-    _resizeOnTextLoad(): void;
+    _layoutOnTextLoad(): void;
     getText(): string;
@@ -82,0 +80,0 @@ destroy(): void;

dist/types/core/render.d.ts

@@ -1,6 +0,6 @@
-import { ElementNode, type SolidNode } from './node/index.js';
+import { type SolidNode } from './node/index.js';
 import { type JSX } from 'solid-js';
 export declare const render: (code: () => JSX.Element, node?: string | HTMLElement | undefined) => Promise<{
     dispose: () => void;
-    rootNode: ElementNode;
+    rootNode: import("./node/index.js").ElementNode;
     renderer: RendererMain;
@@ -7,0 +7,0 @@ }>;

package.json

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

README.md

@@ -19,2 +19,3 @@ <p>
 
+Currently down - need to fix up the packaging to get this working again. On my backlog :-)
 [playground.solidjs.com](https://playground.solidjs.com/anonymous/667180a0-ac7c-4e54-96e8-1e8d66f41790)
@@ -36,11 +37,7 @@
 ```jsx
-import { render, Canvas, Text } from '@lightningjs/solid';
+import { render, Text } from '@lightningjs/solid';
 
-render(() => (
-  <Canvas>
-    <Text>Hello World</Text>
-  </Canvas>
-));
+render(() => <Text>Hello World</Text>);
 ```
 
 For a more detailed Hello World guide check out the [Hello World](HelloWorld.md) guide.

src/core/node/children.ts

@@ -49,3 +49,2 @@ /*
     node.parent = this._parent;
-    this._parent._isDirty = true;
   }
@@ -52,0 +51,0 @@

src/core/node/index.ts

@@ -53,2 +53,4 @@ /*
 const { animationSettings: defaultAnimationSettings } = config;
+const layoutQueue: ElementNode[] = [];
+let queueLayout = true;
 
@@ -210,4 +212,2 @@ function convertEffectsToShader(styleEffects: any) {
   public _borderBottom?: BorderStyleObject;
-  public _autosized?: boolean; // Public but uses _ prefix
-  public _isDirty?: boolean; // Public but uses _ prefix
   private _animationQueue: Array<{
@@ -362,3 +362,3 @@ props: Partial<INodeAnimatableProps>;
 
-  _resizeOnTextLoad() {
+  _layoutOnTextLoad() {
     this.lng!.on('loaded', (_node: INode, loadedPayload: NodeLoadedPayload) => {
@@ -421,7 +421,9 @@ if (loadedPayload.type === 'text') {
     // traverse all the childrens children
-    for (const child of this.children) {
-      if (child.id === id) {
-        return child;
-      }
+    for (let i = 0; i < this.children.length; i++) {
+      const child = this.children[i];
       if (child instanceof ElementNode) {
+        if (child.id === id) {
+          return child;
+        }
+
         const found = child.searchChildrenById(id);
@@ -522,2 +524,4 @@ if (found) {
   render() {
+    // Elements are rendered from the outside in, then `insert`ed from the inside out.
+
     // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -542,6 +546,12 @@ const node = this;
 
-    // Parent is dirty whenever a node is inserted after initial render
-    if (parent._isDirty) {
-      parent.updateLayout();
-      parent._isDirty = false;
+    if (parent.display === 'flex' && layoutQueue.indexOf(parent) === -1) {
+      layoutQueue.push(parent);
+      if (queueLayout) {
+        queueMicrotask(() => {
+          layoutQueue.forEach((n) => n.updateLayout());
+          layoutQueue.length = 0;
+          queueLayout = true;
+        });
+      }
+      queueLayout = false;
     }
@@ -579,3 +589,2 @@
             (parent.width || 0) - props.x - (props.marginRight || 0);
-          node._autosized = true;
         }
@@ -586,3 +595,2 @@
             (parent.height || 0) - props.y - (props.marginBottom || 0);
-          node._autosized = true;
         }
@@ -594,5 +602,7 @@ }
 
-      if (!props.width || !props.height) {
-        node._autosized = true;
-        node._resizeOnTextLoad();
+      if (
+        (parent.display === 'flex' || parent.onBeforeLayout) &&
+        (!props.width || !props.height)
+      ) {
+        node._layoutOnTextLoad();
       }
@@ -605,3 +615,2 @@ } else {
           props.width = (parent.width || 0) - props.x;
-          node._autosized = true;
         }
@@ -611,3 +620,2 @@
           props.height = (parent.height || 0) - props.y;
-          node._autosized = true;
         }
@@ -614,0 +622,0 @@

src/core/render.ts

@@ -22,7 +22,7 @@ /* eslint-disable @typescript-eslint/unbound-method */
 import { startLightningRenderer } from './lightningInit.js';
-import universalLightning from './solidUniversal.js';
-import { ElementNode, type SolidNode } from './node/index.js';
+import nodeOpts from './solidUniversal.js';
+import { type SolidNode } from './node/index.js';
 import { splitProps, createMemo, untrack, type JSX } from 'solid-js';
 
-const solidRenderer = createRenderer<SolidNode>(universalLightning);
+const solidRenderer = createRenderer<SolidNode>(nodeOpts);
 
@@ -35,3 +35,3 @@ export const render = async function (
   await renderer.init();
-  const rootNode = new ElementNode('App');
+  const rootNode = nodeOpts.createElement('App');
   rootNode.lng = renderer.root!;
@@ -38,0 +38,0 @@ // @ts-expect-error - code is jsx element and not SolidElement yet

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

270039

increased by0.3%

Lines of code

4445

increased by0.16%

Worsened metrics

Number of lines in readme file

42

decreased by-6.67%

No dependency changes