@solid-primitives/props - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

dist/index.d.ts

@@ -121,3 +121,3 @@ import { Accessor, Setter, Component, JSX } from 'solid-js';
 } & {
-    [K in keyof Omit<U, Exclude<keyof T, RequiredKeys<U>>>]: K extends `on${infer R}` ? R extends Capitalize<R> ? K extends keyof T ? T[K] extends AnyFunction ? (...args: U[K] extends AnyFunction ? Parameters<T[K]> & Parameters<U[K]> : Parameters<T[K]>) => void : OverrideProp<T, U, K> : OverrideProp<T, U, K> : UnboxLazy<OverrideProp<T, U, K>> : UnboxLazy<OverrideProp<T, U, K>>;
+    [K in keyof Omit<U, Exclude<keyof T, RequiredKeys<U>>>]: K extends `on${string}` ? K extends keyof T ? undefined extends U[K] ? undefined : Extract<Exclude<T[K], undefined> | U[K], AnyFunction | any[]> : UnboxLazy<OverrideProp<T, U, K>> : UnboxLazy<OverrideProp<T, U, K>>;
 };
@@ -124,0 +124,0 @@ declare type MergeProps<T extends unknown[], Curr = {}> = T extends [infer Next, ...infer Rest] ? MergeProps<Rest, Next extends object ? (Next extends Function ? Curr : Override<Curr, UnboxLazy<Next>>) : Curr> : Simplify<Curr>;

dist/index.js

@@ -177,3 +177,4 @@ var __defProp = Object.defineProperty;
 import { mergeProps } from "solid-js";
-var extractCSSregex = /([^:; ]*):\s*([^;\n]*)/g;
+var extractCSSregex = /([^:; ]*):\s*([^;]*)/g;
+var isEventListenerKey = (key) => key[0] === "o" && key[1] === "n" && key.length > 2 && key[2] !== ":" && !key.startsWith("oncapture:");
 function stringStyleToObject(style) {
@@ -213,2 +214,28 @@ const object = {};
   };
+  const listeners = {};
+  for (const props of sources) {
+    for (const key in props) {
+      if (!isEventListenerKey(key))
+        continue;
+      const v = props[key];
+      const name = key.toLowerCase();
+      let callback;
+      if (typeof v === "function")
+        callback = v;
+      else if (Array.isArray(v)) {
+        if (v.length === 1)
+          callback = v[0];
+        else
+          callback = v[0].bind(void 0, v[1]);
+      } else {
+        delete listeners[name];
+        continue;
+      }
+      const callbacks = listeners[name];
+      if (!callbacks)
+        listeners[name] = [callback];
+      else
+        callbacks.push(callback);
+    }
+  }
   return new Proxy(merge, {
@@ -220,3 +247,3 @@ get(target, key) {
         return reduce("style", combineStyle);
-      if (key === "ref" || key[0] === "o" && key[1] === "n" && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90) {
+      if (key === "ref") {
         const callbacks = [];
@@ -230,2 +257,6 @@ for (const props of sources) {
       }
+      if (isEventListenerKey(key)) {
+        const callbacks = listeners[key.toLowerCase()];
+        return Array.isArray(callbacks) ? chain(...callbacks) : Reflect.get(target, key);
+      }
       if (key === "class" || key === "className")
@@ -232,0 +263,0 @@ return reduce(key, (a, b) => `${a} ${b}`);

package.json

 {
   "name": "@solid-primitives/props",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Library of primitives focused around component props.",
@@ -47,3 +47,3 @@ "author": "Alex Lohr <[e-mail]>",
   "dependencies": {
-    "@solid-primitives/utils": "^1.5.1"
+    "@solid-primitives/utils": "^1.5.2"
   },
@@ -50,0 +50,0 @@ "devDependencies": {

README.md

@@ -27,5 +27,5 @@ <p>
 
-A helper that reactively merges multiple props objects together while smartly combining some of Solid's JSX/DOM attributes.
+A helper that reactively merges multiple props objects together while smartly combining some of Solid's JSX/HTML attributes.
 
-Event handlers _(onClick, onMouseMove)_, **(every function property with name mathing `on[A-Z].\*` get's chained – lowercase like "onclick" will NOT)** and refs _(props.ref)_ are chained.
+Event handlers _(onClick, onclick, onMouseMove, onSomething)_, and refs _(props.ref)_ are chained.
 
@@ -55,2 +55,25 @@ `class`, `className`, `classList` and `style` are combined.
 
+#### Chaining of event listeners
+
+Every [function/tuple](https://www.solidjs.com/docs/latest/api#on___) property with `on___` name get's chained. That could potentially include properties that are not actually event-listeners – such as `only` or `once`. Hence you should remove them from the props (with [splitProps](https://www.solidjs.com/docs/latest/api#splitprops)).
+
+Chained functions will always return `void`. If you want to get the returned value from a callback, you have to split those props and handle them yourself.
+
+**Warning:** The types for event-listeners often won't correctly represent the values. Chaining is meant only for DOM Events spreading to an element.
+
+```ts
+const combined = combineProps(
+  {
+    onClick: e => {},
+    onclick: e => {}
+  },
+  {
+    onClick: [(n, e) => {}, 123]
+  }
+);
+// combined.onClick() will call all 3 of the functions above
+```
+
+##### For better reference of how exactly `combineProps` works, see the [TESTS](https://github.com/solidjs-community/solid-primitives/blob/main/packages/props/test/combineProps.test.ts)
+
 ### Additional helpers
@@ -163,2 +186,6 @@
 
+2.1.0
+
+Add support for tuple event handlers and de-dupeing to `combineProps`.
+
 </details>

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

35733

increased by8.4%

Lines of code

720

increased by9.26%

Number of lines in readme file

189

increased by16.67%

Dependency changes

• Updated@solid-primitives/utils@^1.5.2