@ally-ui/solid - npm Package Compare versions

Comparing version 0.0.20 to 0.0.21

dist/cjs/main.js

@@ -5,5 +5,28 @@ 'use strict';
 
+var web = require('solid-js/web');
 var solidJs = require('solid-js');
-var web = require('solid-js/web');
 
+/**
+ * A helper component to render `SlottableProps`.
+ */
+function Slot(slotProps) {
+  // `asChild` is never updated dynamically, so an early return here is okay.
+  const [, restProps] = solidJs.splitProps(slotProps.props, ['asChild', 'children', 'ref']);
+
+  if (slotProps.props.asChild) {
+    return web.memo(() => slotProps.props.children(userProps => ({
+      ref: slotProps.ref,
+      ...mergeSolidProps(slotProps.attributes, restProps, userProps)
+    })));
+  }
+
+  const attributes = () => mergeSolidProps(slotProps.attributes, restProps);
+
+  return web.memo(() => slotProps.children({
+    ref: slotProps.ref,
+    attributes: attributes,
+    children: slotProps.props.children
+  }));
+}
+
 function combinedRef(...refs) {
@@ -88,61 +111,46 @@ return instance => refs.forEach(ref => ref?.(instance));
 
-/**
- * A helper component to render `SlottableProps`.
- */
-function Slot(slotProps) {
-  // `asChild` is never updated dynamically, so an early return here is okay.
-  if (slotProps.props.asChild) {
-    return web.memo(() => slotProps.props.children(userProps => ({
-      ref: slotProps.ref,
-      ...(userProps === undefined ? slotProps.attributes : mergeProps(slotProps.attributes, userProps))
-    })));
-  }
+function mergeSolidProps(parentProps, ...manyChildProps) {
+  let mergedProps = { ...parentProps
+  };
 
-  const [, restProps] = solidJs.splitProps(slotProps.props, ['asChild', 'children']);
+  for (const childProps of manyChildProps) {
+    if (childProps === undefined) continue; // All child props should override.
 
-  const attributes = () => ({ ...slotProps.attributes,
-    ...restProps
-  });
+    const overrideProps = { ...childProps
+    };
 
-  return web.memo(() => slotProps.children({
-    ref: slotProps.ref,
-    attributes: attributes,
-    children: slotProps.props.children
-  }));
-}
+    for (const propName in childProps) {
+      const mergedPropValue = mergedProps[propName];
+      const childPropValue = childProps[propName];
+      const isHandler = /^on[A-Z]/.test(propName); // If it's a handler, modify the override by composing the base handler.
 
-function mergeProps(slotProps, childProps) {
-  // All child props should override.
-  const overrideProps = { ...childProps
-  };
+      if (isHandler) {
+        overrideProps[propName] = ev => {
+          forwardEvent(ev, childPropValue);
+          forwardEvent(ev, mergedPropValue);
+        };
+      } else if (propName === 'style') {
+        overrideProps[propName] = { ...styleObject(mergedPropValue),
+          ...styleObject(childPropValue)
+        };
+      } else if (propName === 'class' || propName === 'className') {
+        overrideProps[propName] = [mergedPropValue, childPropValue].filter(Boolean).join(' ');
+      } else if (propName === 'classList') {
+        overrideProps[propName] = { ...mergedPropValue,
+          ...childPropValue
+        };
+      }
+    }
 
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    const isHandler = /^on[A-Z]/.test(propName); // If it's a handler, modify the override by composing the base handler.
-
-    if (isHandler) {
-      overrideProps[propName] = (...args) => {
-        childPropValue?.(...args);
-        slotPropValue?.(...args);
-      };
-    } // If it's `style`, we merge them.
-    else if (propName === 'style') {
-      overrideProps[propName] = { ...slotPropValue,
-        ...childPropValue
-      };
-    } else if (propName === 'class') {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');
-    } else if (propName === 'classList') {
-      overrideProps[propName] = { ...slotPropValue,
-        ...childPropValue
-      };
-    }
+    Object.assign(mergedProps, overrideProps);
   }
 
-  return { ...slotProps,
-    ...overrideProps
-  };
+  return mergedProps;
 }
 
+function styleObject(style) {
+  if (typeof style === 'object') return style;
+  return Object.fromEntries(style.split(';').filter(s => s !== '').map(kv => kv.split(':').map(t => t.trim())));
+}
+
 exports.Slot = Slot;
@@ -154,2 +162,4 @@ exports.combinedRef = combinedRef;
 exports.forwardEvent = forwardEvent;
+exports.mergeSolidProps = mergeSolidProps;
+exports.styleObject = styleObject;
 //# sourceMappingURL=main.js.map

dist/esm/main.js

@@ -1,4 +0,27 @@
-import { onCleanup, createEffect, untrack, splitProps } from 'solid-js';
 import { memo } from 'solid-js/web';
+import { splitProps, onCleanup, createEffect, untrack } from 'solid-js';
 
+/**
+ * A helper component to render `SlottableProps`.
+ */
+function Slot(slotProps) {
+  // `asChild` is never updated dynamically, so an early return here is okay.
+  const [, restProps] = splitProps(slotProps.props, ['asChild', 'children', 'ref']);
+
+  if (slotProps.props.asChild) {
+    return memo(() => slotProps.props.children(userProps => ({
+      ref: slotProps.ref,
+      ...mergeSolidProps(slotProps.attributes, restProps, userProps)
+    })));
+  }
+
+  const attributes = () => mergeSolidProps(slotProps.attributes, restProps);
+
+  return memo(() => slotProps.children({
+    ref: slotProps.ref,
+    attributes: attributes,
+    children: slotProps.props.children
+  }));
+}
+
 function combinedRef(...refs) {
@@ -83,62 +106,47 @@ return instance => refs.forEach(ref => ref?.(instance));
 
-/**
- * A helper component to render `SlottableProps`.
- */
-function Slot(slotProps) {
-  // `asChild` is never updated dynamically, so an early return here is okay.
-  if (slotProps.props.asChild) {
-    return memo(() => slotProps.props.children(userProps => ({
-      ref: slotProps.ref,
-      ...(userProps === undefined ? slotProps.attributes : mergeProps(slotProps.attributes, userProps))
-    })));
-  }
+function mergeSolidProps(parentProps, ...manyChildProps) {
+  let mergedProps = { ...parentProps
+  };
 
-  const [, restProps] = splitProps(slotProps.props, ['asChild', 'children']);
+  for (const childProps of manyChildProps) {
+    if (childProps === undefined) continue; // All child props should override.
 
-  const attributes = () => ({ ...slotProps.attributes,
-    ...restProps
-  });
+    const overrideProps = { ...childProps
+    };
 
-  return memo(() => slotProps.children({
-    ref: slotProps.ref,
-    attributes: attributes,
-    children: slotProps.props.children
-  }));
-}
+    for (const propName in childProps) {
+      const mergedPropValue = mergedProps[propName];
+      const childPropValue = childProps[propName];
+      const isHandler = /^on[A-Z]/.test(propName); // If it's a handler, modify the override by composing the base handler.
 
-function mergeProps(slotProps, childProps) {
-  // All child props should override.
-  const overrideProps = { ...childProps
-  };
+      if (isHandler) {
+        overrideProps[propName] = ev => {
+          forwardEvent(ev, childPropValue);
+          forwardEvent(ev, mergedPropValue);
+        };
+      } else if (propName === 'style') {
+        overrideProps[propName] = { ...styleObject(mergedPropValue),
+          ...styleObject(childPropValue)
+        };
+      } else if (propName === 'class' || propName === 'className') {
+        overrideProps[propName] = [mergedPropValue, childPropValue].filter(Boolean).join(' ');
+      } else if (propName === 'classList') {
+        overrideProps[propName] = { ...mergedPropValue,
+          ...childPropValue
+        };
+      }
+    }
 
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    const isHandler = /^on[A-Z]/.test(propName); // If it's a handler, modify the override by composing the base handler.
-
-    if (isHandler) {
-      overrideProps[propName] = (...args) => {
-        childPropValue?.(...args);
-        slotPropValue?.(...args);
-      };
-    } // If it's `style`, we merge them.
-    else if (propName === 'style') {
-      overrideProps[propName] = { ...slotPropValue,
-        ...childPropValue
-      };
-    } else if (propName === 'class') {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');
-    } else if (propName === 'classList') {
-      overrideProps[propName] = { ...slotPropValue,
-        ...childPropValue
-      };
-    }
+    Object.assign(mergedProps, overrideProps);
   }
 
-  return { ...slotProps,
-    ...overrideProps
-  };
+  return mergedProps;
 }
 
-export { Slot, combinedRef, createBindRef, createDelayedBindRef, createSyncedOption, forwardEvent };
+function styleObject(style) {
+  if (typeof style === 'object') return style;
+  return Object.fromEntries(style.split(';').filter(s => s !== '').map(kv => kv.split(':').map(t => t.trim())));
+}
+
+export { Slot, combinedRef, createBindRef, createDelayedBindRef, createSyncedOption, forwardEvent, mergeSolidProps, styleObject };
 //# sourceMappingURL=main.js.map

dist/source/main.jsx

@@ -0,1 +1,3 @@
+export * from './Slot.solid';
+export * from './Slot.solid';
 export * from './combinedRef.solid';
@@ -5,3 +7,4 @@ export * from './createBindRef.solid';
 export * from './forwardEvent.solid';
-export * from './Slot.solid';
+export * from './mergeSolidProps';
+export * from './styleObject';
 export * from './types';

dist/source/Slot.solid.jsx

 import { splitProps } from 'solid-js';
+import { mergeSolidProps } from './main';
 /**
@@ -7,2 +8,7 @@ * A helper component to render `SlottableProps`.
     // `asChild` is never updated dynamically, so an early return here is okay.
+    const [, restProps] = splitProps(slotProps.props, [
+        'asChild',
+        'children',
+        'ref',
+    ]);
     if (slotProps.props.asChild) {
@@ -12,10 +18,7 @@ return (<>
                 ref: slotProps.ref,
-                ...(userProps === undefined
-                    ? slotProps.attributes
-                    : mergeProps(slotProps.attributes, userProps)),
+                ...mergeSolidProps(slotProps.attributes, restProps, userProps),
             }))}
 			</>);
     }
-    const [, restProps] = splitProps(slotProps.props, ['asChild', 'children']);
-    const attributes = () => ({ ...slotProps.attributes, ...restProps });
+    const attributes = () => mergeSolidProps(slotProps.attributes, restProps);
     return (<>
@@ -29,30 +32,1 @@ {slotProps.children({
 }
-function mergeProps(slotProps, childProps) {
-    // All child props should override.
-    const overrideProps = { ...childProps };
-    for (const propName in childProps) {
-        const slotPropValue = slotProps[propName];
-        const childPropValue = childProps[propName];
-        const isHandler = /^on[A-Z]/.test(propName);
-        // If it's a handler, modify the override by composing the base handler.
-        if (isHandler) {
-            overrideProps[propName] = (...args) => {
-                childPropValue?.(...args);
-                slotPropValue?.(...args);
-            };
-        }
-        // If it's `style`, we merge them.
-        else if (propName === 'style') {
-            overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-        }
-        else if (propName === 'class') {
-            overrideProps[propName] = [slotPropValue, childPropValue]
-                .filter(Boolean)
-                .join(' ');
-        }
-        else if (propName === 'classList') {
-            overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-        }
-    }
-    return { ...slotProps, ...overrideProps };
-}

dist/types/main.d.ts

@@ -0,1 +1,3 @@
+export * from './Slot.solid';
+export * from './Slot.solid';
 export * from './combinedRef.solid';
@@ -5,3 +7,4 @@ export * from './createBindRef.solid';
 export * from './forwardEvent.solid';
-export * from './Slot.solid';
+export * from './mergeSolidProps';
+export * from './styleObject';
 export * from './types';

dist/types/Slot.solid.d.ts

 import { Accessor, JSX, ParentProps } from 'solid-js';
-import type { CallbackRef } from './types';
+import { type CallbackRef } from './main';
 declare type SlotRenderPropGetter<TAttributes extends object, TRegularProps extends object> = (userProps?: TRegularProps) => {
     ref: CallbackRef<HTMLElement>;
 } & TAttributes;
-declare type SlottablePropsAsChild<TAttributes extends object, TRegularProps extends object> = {
+declare type SlottablePropsAsChild<TAttributes extends object, TRegularProps extends object> = Omit<TRegularProps, 'children'> & {
     asChild: true;
-} & {
     ref?: CallbackRef<HTMLElement>;
-    children: (props: SlotRenderPropGetter<TAttributes, TRegularProps>) => JSX.Element;
+    children: (props: SlotRenderPropGetter<TAttributes, Omit<TRegularProps, 'children'>>) => JSX.Element;
 };
-declare type SlottablePropsAsRegular<TRegularProps extends ParentProps> = {
+declare type SlottablePropsAsRegular<TRegularProps extends ParentProps> = TRegularProps & {
     asChild?: undefined;
-} & {
     ref?: CallbackRef<HTMLElement>;
-} & TRegularProps;
+};
 /**
@@ -26,3 +24,3 @@ * Prop definitions for a component that either renders a regular template or
  */
-export declare type SlottableProps<TAttributes extends object, TRegularProps extends ParentProps> = SlottablePropsAsChild<TAttributes, Exclude<TRegularProps, 'children'>> | SlottablePropsAsRegular<TRegularProps>;
+export declare type SlottableProps<TAttributes extends object, TRegularProps extends ParentProps> = SlottablePropsAsChild<TAttributes, TRegularProps> | SlottablePropsAsRegular<TRegularProps>;
 interface RegularRenderProp<TAttributes extends object> {
@@ -29,0 +27,0 @@ ref: CallbackRef<HTMLElement>;

package.json

 {
 	"name": "@ally-ui/solid",
-	"version": "0.0.20",
+	"version": "0.0.21",
 	"scripts": {
 		"example": "vite",
 		"build": "rollup --config rollup.config.js",
-		"clean": "rimraf dist"
+		"clean": "rimraf dist",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"coverage": "vitest run --coverage"
 	},
@@ -39,3 +42,3 @@ "author": "Bryan Lee",
 	},
-	"gitHead": "7333c399ccb0f74f93baad914ccec56adcfa68f0"
+	"gitHead": "d24aa93b705d74e0ea57bbfcca46759528c20e8b"
 }

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

47457

increased by12.31%

Number of package files

24

increased by20%

Lines of code

531

increased by8.15%

No dependency changes