@lightningjs/solid-primitives - npm Package Compare versions

Comparing version 0.4.2 to 0.4.3

dist/packages/Column.d.ts

 import { type IntrinsicNodeProps } from "@lightningjs/solid";
-export declare function Column(props: Partial<IntrinsicNodeProps>): import("solid-js").JSX.Element;
+export declare function Column(props: Partial<IntrinsicNodeProps>): import("solid-js/jsx-runtime").JSX.Element;

dist/packages/Row.d.ts

 import { type IntrinsicNodeProps } from '@lightningjs/solid';
-export declare function Row(props: Partial<IntrinsicNodeProps>): import("solid-js").JSX.Element;
+export declare function Row(props: Partial<IntrinsicNodeProps>): import("solid-js/jsx-runtime").JSX.Element;

dist/packages/withPadding.d.ts

@@ -1,2 +0,11 @@
-import { ElementNode } from "@lightningjs/solid";
-export declare function withPadding(el: ElementNode, padding: () => number[]): void;
+import { ElementNode } from '@lightningjs/solid';
+type withPaddingInput = number | [number, number] | [number, number, number] | [number, number, number, number];
+declare module 'solid-js/jsx-runtime' {
+    namespace JSX {
+        interface Directives {
+            withPadding: withPaddingInput;
+        }
+    }
+}
+export declare function withPadding(el: ElementNode, padding: () => withPaddingInput): void;
+export {};

dist/packages/withPadding.js

@@ -17,3 +17,4 @@ /*
  */
-import { ElementNode } from "@lightningjs/solid";
+import { ElementNode } from '@lightningjs/solid';
+// To use with TS import withPadding and then put withPadding; on the next line to prevent tree shaking
 export function withPadding(el, padding) {
@@ -40,9 +41,24 @@ const pad = padding();
     }
-    el.onLayout = (node, size) => {
+    el.onBeforeLayout = (node, size) => {
         if (size) {
-            el.width = size.width + left + right;
-            el.height = size.height + top + bottom;
-            node.x = left;
-            node.y = top;
-            el.parent.updateLayout(el, { width: el.width, height: el.height });
+            el.width =
+                el.children.reduce((acc, c) => {
+                    return acc + (c.width || 0);
+                }, 0) +
+                    left +
+                    right;
+            const firstChild = el.children[0];
+            if (firstChild) {
+                // set padding or marginLeft for flex
+                firstChild.x = left;
+                firstChild.marginLeft = left;
+            }
+            el.height =
+                el.children.reduce((acc, c) => {
+                    c.y = (c.y || 0) + top;
+                    c.marginTop = top;
+                    return acc + (c.height || 0);
+                }, 0) +
+                    top +
+                    bottom;
         }
@@ -49,0 +65,0 @@ };

package.json

 {
   "name": "@lightningjs/solid-primitives",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Lightning Primitives for Solid Lightning",
@@ -15,2 +15,17 @@ "type": "module",
   "sideEffects": false,
+  "scripts": {
+    "start": "npm run dev",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "npm run lint:prettier && npm run lint:eslint",
+    "lint:fix": "npm run lint:fix:prettier && npm run lint:fix:eslint",
+    "lint:prettier": "prettier --check \"**/*.{ts,js,cjs,md}\"",
+    "lint:fix:prettier": "prettier --write \"**/*.{ts,js,cjs,md}\"",
+    "lint:eslint": "eslint .",
+    "lint:fix:eslint": "eslint --fix .",
+    "build": "tsc",
+    "watch": "tsc -w",
+    "dev": "concurrently -c \"auto\" \"npm:watch\" \"npm:vite\"",
+    "vite": "vite --open \"/test/index.html\" --host",
+    "prepack": "npm run build"
+  },
   "keywords": [
@@ -26,4 +41,4 @@ "lightning",
   "devDependencies": {
-    "@lightningjs/renderer": "^0.3.6",
-    "@lightningjs/solid": "^0.7.0",
+    "@lightningjs/renderer": "^0.4.1",
+    "@lightningjs/solid": "^0.7.2",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
@@ -53,2 +68,3 @@ "@typescript-eslint/parser": "^6.3.0",
   "peerDependencies": {
+    "@lightningjs/renderer": "*",
     "@lightningjs/solid": "*",
@@ -64,17 +80,3 @@ "solid-js": "*"
     "README.md"
-  ],
-  "scripts": {
-    "start": "npm run dev",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "npm run lint:prettier && npm run lint:eslint",
-    "lint:fix": "npm run lint:fix:prettier && npm run lint:fix:eslint",
-    "lint:prettier": "prettier --check \"**/*.{ts,js,cjs,md}\"",
-    "lint:fix:prettier": "prettier --write \"**/*.{ts,js,cjs,md}\"",
-    "lint:eslint": "eslint .",
-    "lint:fix:eslint": "eslint --fix .",
-    "build": "tsc",
-    "watch": "tsc -w",
-    "dev": "concurrently -c \"auto\" \"npm:watch\" \"npm:vite\"",
-    "vite": "vite --open \"/test/index.html\" --host"
-  }
-}
+  ]
+}

packages/withPadding.ts

@@ -18,5 +18,20 @@ /*
 
-import { ElementNode } from "@lightningjs/solid";
+import { ElementNode } from '@lightningjs/solid';
 
-export function withPadding(el: ElementNode, padding: () => number[]) {
+type withPaddingInput =
+  | number
+  | [number, number]
+  | [number, number, number]
+  | [number, number, number, number];
+
+declare module 'solid-js/jsx-runtime' {
+  namespace JSX {
+    interface Directives {
+      withPadding: withPaddingInput;
+    }
+  }
+}
+
+// To use with TS import withPadding and then put withPadding; on the next line to prevent tree shaking
+export function withPadding(el: ElementNode, padding: () => withPaddingInput) {
   const pad = padding();
@@ -35,3 +50,3 @@ let top: number, left: number, right: number, bottom: number;
     } else {
-      [top, right, bottom, left] = pad as [number, number, number, number];
+      [top, right, bottom, left] = pad;
     }
@@ -42,13 +57,27 @@ } else {
 
-  el.onLayout = (node, size) => {
+  el.onBeforeLayout = (node, size) => {
     if (size) {
-      el.width = size.width + left + right;
-      el.height = size.height + top + bottom;
+      el.width =
+        el.children.reduce((acc, c) => {
+          return acc + (c.width || 0);
+        }, 0) +
+        left +
+        right;
+      const firstChild = el.children[0];
+      if (firstChild) {
+        // set padding or marginLeft for flex
+        firstChild.x = left;
+        firstChild.marginLeft = left;
+      }
 
-      node.x = left;
-      node.y = top;
-
-      el.parent!.updateLayout(el, { width: el.width, height: el.height });
+      el.height =
+        el.children.reduce((acc, c) => {
+          c.y = (c.y || 0) + top;
+          c.marginTop = top;
+          return acc + (c.height || 0);
+        }, 0) +
+        top +
+        bottom;
     }
   };
 }

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Lines of code

1701

increased by3.22%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

137210

decreased by-8.93%

Dependency count

5

increased by25%

No dependency changes