@polymorphic-factory/solid - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/index.d.ts

@@ -1,5 +0,9 @@
-import { ComponentProps, ValidComponent, Component, JSX } from 'solid-js';
+import { ComponentProps, ValidComponent, JSX, Component } from 'solid-js';
 
 type DOMElements = keyof JSX.IntrinsicElements;
 type ElementType = DOMElements | Component<any>;
+type PropsOf<T extends ElementType> = ComponentProps<T> & {
+    as?: ElementType;
+};
+type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
 /**
@@ -11,22 +15,31 @@ * Assign property types from right to left.
  */
-type Assign<Target, Source> = Omit<Target, keyof Source> & Source;
+type Assign<A, B> = DistributiveOmit<A, keyof B> & B;
+type MergeWithAs<Default extends ValidComponent, Component extends ValidComponent, PermanentProps extends Record<never, never>, DefaultProps extends Record<never, never>, ComponentProps extends Record<never, never>> = 
 /**
- * Extract the props of a solid element or component
+ * The following code is copied from the library react-polymorphed by nasheomirro.
+ * Thank your for creating this TypeScript gold!
+ *
+ * doing this makes sure typescript infers events. Without the
+ * extends check typescript won't do an additional inference phase,
+ * but somehow we can trick typescript into doing so. Note that the check needs to be relating
+ * to the generic for this to work.
  */
-type PropsOf<T extends ElementType> = ComponentProps<T> & {
-    as?: ElementType;
+any extends Component ? Assign<DefaultProps, PermanentProps & {
+    as?: Default;
+}> | Assign<ComponentProps, PermanentProps & {
+    as?: Component;
+}> : never;
+type ComponentWithAs<Component extends ValidComponent, Props extends Record<never, never> = Record<never, never>> = {
+    <AsComponent extends ValidComponent = Component>(props: MergeWithAs<Component, AsComponent, Props, ComponentProps<Component>, ComponentProps<AsComponent>>): JSX.Element;
 };
-type ComponentWithAs<T extends ValidComponent, Props = Record<never, never>> = Component<Assign<Assign<ComponentProps<T>, Props>, {
-    as?: ElementType;
-}>>;
-type HTMLPolymorphicComponents<Props extends Record<string, unknown> = Record<never, never>> = {
+type HTMLPolymorphicComponents<Props extends Record<never, never> = Record<never, never>> = {
     [Tag in DOMElements]: ComponentWithAs<Tag, Props>;
 };
-type HTMLPolymorphicProps<T extends ElementType> = Omit<ComponentProps<T>, 'ref'> & {
-    as?: ElementType;
+type HTMLPolymorphicProps<T extends ValidComponent> = Omit<ComponentProps<T>, 'ref'> & {
+    as?: ValidComponent;
 };
-type PolymorphFactory<Props extends Record<string, unknown> = Record<never, never>, Options = never> = {
-    <T extends ElementType, P extends Record<string, unknown> = Props>(component: T, option?: Options): ComponentWithAs<T, P>;
+type PolymorphFactory<Props extends Record<never, never> = Record<never, never>, Options = never> = {
+    <T extends ValidComponent, P extends Record<never, never> = Props>(component: T, option?: Options): ComponentWithAs<T, P>;
 };
-interface PolyFactoryParam<Component extends ElementType, Props extends Record<string, unknown>, Options> {
+interface PolyFactoryParam<Component extends ValidComponent, Props extends Record<never, never>, Options> {
     styled?: (component: Component, options?: Options) => ComponentWithAs<Component, Props>;
@@ -43,4 +56,4 @@ }
  */
-declare function polymorphicFactory<Props extends Record<never, never>, Options = never, Component extends ElementType = ElementType>({ styled }?: PolyFactoryParam<Component, Props, Options>): PolymorphFactory<Props, Options> & HTMLPolymorphicComponents<Props>;
+declare function polymorphicFactory<Props extends Record<never, never>, Options = never, Component extends ValidComponent = ValidComponent>({ styled }?: PolyFactoryParam<Component, Props, Options>): PolymorphFactory<Props, Options> & HTMLPolymorphicComponents<Props>;
 
 export { Assign, ComponentWithAs, HTMLPolymorphicComponents, HTMLPolymorphicProps, PropsOf, polymorphicFactory };

dist/index.js

@@ -46,5 +46,14 @@ "use strict";
   return new Proxy(styled, {
+    /**
+     * @example
+     * const Div = poly("div")
+     * const WithPoly = poly(AnotherComponent)
+     */
     apply(target, thisArg, argArray) {
       return styled(...argArray);
     },
+    /**
+     * @example
+     * <poly.div />
+     */
     get(_, element) {
@@ -51,0 +60,0 @@ const asElement = element;

package.json

 {
   "name": "@polymorphic-factory/solid",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "",
@@ -36,18 +36,18 @@ "keywords": [
   "devDependencies": {
-    "@testing-library/dom": "8.20.0",
+    "@testing-library/dom": "9.2.0",
     "@testing-library/jest-dom": "5.16.5",
-    "@types/jsdom": "20.0.1",
+    "@types/jsdom": "21.1.1",
     "@types/testing-library__jest-dom": "5.14.5",
-    "@vitest/coverage-c8": "0.28.3",
+    "@vitest/coverage-c8": "0.29.8",
     "clean-package": "2.2.0",
-    "esbuild": "0.17.5",
+    "esbuild": "0.17.14",
     "esbuild-plugin-solid": "0.5.0",
-    "jsdom": "21.1.0",
-    "solid-js": "1.6.9",
-    "solid-testing-library": "0.5.0",
-    "tsup": "6.5.0",
-    "typescript": "4.9.4",
-    "vite": "4.0.4",
-    "vite-plugin-solid": "2.5.0",
-    "vitest": "0.28.3"
+    "jsdom": "21.1.1",
+    "solid-js": "1.7.0",
+    "solid-testing-library": "0.5.1",
+    "tsup": "6.7.0",
+    "typescript": "5.0.3",
+    "vite": "4.2.1",
+    "vite-plugin-solid": "2.6.1",
+    "vitest": "0.29.8"
   },
@@ -54,0 +54,0 @@ "peerDependencies": {

README.md

@@ -13,9 +13,6 @@ <h1 align="center">@polymorphic-factory/solid</h1>
 
-A polymorphic component is a component that can be rendered with a different element.
+A polymorphic component is a component that can be rendered with a different element. This is useful
+for component libraries that want to provide a consistent API for their users and want to allow them
+to customize the underlying element.
 
-> **Known drawbacks for the type definitions:**
->
-> Event handlers are not typed correctly when using the `as` prop.
->
-> This is a deliberate decision to keep the usage as simple as possible.
 
@@ -22,0 +19,0 @@ ## Installation

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

12352

increased by10.98%

Lines of code

166

increased by22.96%

Worsened metrics

Number of lines in readme file

130

decreased by-2.26%

No dependency changes