@lightningjs/solid - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

dist/esm/index.js

@@ -836,2 +836,5 @@ import { createSignal, createEffect, mergeProps as mergeProps$1, createRoot, createRenderEffect, createMemo, createComponent as createComponent$1, untrack } from 'solid-js';
       node.lng = renderer.createNode(props);
+      if (node.onFail) {
+        node.lng.once('txFailed', node.onFail);
+      }
       if (node.onLoad) {
@@ -838,0 +841,0 @@ node.lng.once('txLoaded', node.onLoad);

dist/source/core/node/index.js

@@ -426,2 +426,5 @@ /*
             node.lng = renderer.createNode(props);
+            if (node.onFail) {
+                node.lng.once('txFailed', node.onFail);
+            }
             if (node.onLoad) {
@@ -428,0 +431,0 @@ node.lng.once('txLoaded', node.onLoad);

dist/types/intrinsicTypes.d.ts

@@ -21,2 +21,3 @@ import { type Dimensions, type INode, type INodeWritableProps, type ITextNodeWritableProps } from '@lightningjs/renderer';
     onLoad?: (target: INode, dimensions: Dimensions) => void;
+    onFail?: (target: INode, error: Error) => void;
     onLayout?: (child: ElementNode, dimensions: Dimensions) => void;
@@ -23,0 +24,0 @@ autofocus?: boolean;

package.json

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

README.md

@@ -116,5 +116,5 @@ <p>
 
-### Color
+### Colors
 
-Can be HEX string ('#rrggbb') or ('#rrggbbaa') or RGBA number 0x00000000 or string 'RRGGBBAA'. By default, every node without a src attribute will have their color set to `0x00000000` making it transparent. If you have an element which sets it's src attribute after creation, you need to update color to `0xffffffff` so it's not transparent. I recommend installing [VS Code color picker](https://marketplace.visualstudio.com/items?itemName=AntiAntiSepticeye.vscode-color-picker) and using hex format to see the colors in VS Code.
+RGBA number 0xRRGGBBAA. If you want to use hex, `import { hexColor } from '@lightningjs/solid'` and do `hexColor('#c0ffee')` to convert colors to RGBA. Please know all hex colors are #RRGGBB so they are easy to convert to 0xRRGGBBAA and usually AA is ff for full alpha. By default, every node without a src attribute will have their color set to `0x00000000` making it transparent. If you have an element which sets it's src attribute after creation, you need to update color to `0xffffffff` so it's not transparent.
 
@@ -128,3 +128,3 @@ ### Border and borderRadius
   borderRadius: 30,
-  border: { width: 10, color: '#000000' }
+  border: { width: 10, color: 0x000000ff }
 }
@@ -135,4 +135,4 @@
 const style = {
-  borderLeft: { width: 10, color: '#000000' },
-  borderRight: { width: 10, color: '#000000' }
+  borderLeft: { width: 10, color: 0x000000ff },
+  borderRight: { width: 10, color: 0x000000ff }
 }
@@ -256,7 +256,7 @@
   height: 136,
-  color: '#546160',
+  color: 0x546160ff,
   alpha: 0.5,
   scale: 1,
   focus: {
-    color: '#58807d',
+    color: 0x58807dff,
     scale: [1.1, { duration: 500 }],
@@ -266,3 +266,3 @@ alpha: 1,
   disabled: {
-    color: '#333333',
+    color: 0x333333ff,
   },
@@ -316,7 +316,7 @@ };
     height: 136,
-    color: '#000000',
+    color: 0x000000ff,
     alpha: 0.3,
     scale: 1,
     focus: {
-      color: ['#58807d', { duration: 2000 }],
+      color: [0x58807dff, { duration: 2000 }],
       scale: 1.2,
@@ -333,7 +333,7 @@ alpha: [1, { duration: 1500, delay: 200, timing: 'easy-in' }],
     mountY: -0.35,
-    color: '#F6F6F9',
+    color: 0xf6f6f9ff,
     height: Button.height,
     width: Button.width,
     focus: {
-      color: '#FFFFFF',
+      color: 0xffffffff,
     },
@@ -372,2 +372,20 @@ };
 
+## use: (Directives) in Solid
+
+SolidJS has built in [Directives](https://www.solidjs.com/docs/latest/api#use___) support via `use:` property. These only work on root elements `node` and `text`. Meaning you can't use `View` or `Text` with directives so instead do:
+
+```
+<node
+  use:withPadding={[10, 15]}
+  {...props}
+  style={{
+    color: '#00000099',
+    borderRadius: 8,
+    border: { width: 2, color: '#ffffff' },
+  }}
+>
+```
+
+PS - there is currently a [bug](https://github.com/solidjs/solid/issues/1927) in SolidJS that you need to have the directive before spreading props.
+
 ## Config
@@ -374,0 +392,0 @@

src/core/node/index.ts

@@ -538,2 +538,6 @@ /*
 
+      if (node.onFail) {
+        node.lng.once('txFailed', node.onFail);
+      }
+
       if (node.onLoad) {
@@ -540,0 +544,0 @@ node.lng.once('txLoaded', node.onLoad);

src/intrinsicTypes.ts

@@ -52,2 +52,3 @@ /*
   onLoad?: (target: INode, dimensions: Dimensions) => void;
+  onFail?: (target: INode, error: Error) => void;
   onLayout?: (child: ElementNode, dimensions: Dimensions) => void;
@@ -54,0 +55,0 @@ autofocus?: boolean;

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

276017

increased by0.42%

Lines of code

4366

increased by0.25%

Number of lines in readme file

399

increased by4.72%

No dependency changes