@lit-labs/react - npm Package Compare versions

Comparing version 1.0.2 to 1.0.4

create-component.d.ts

@@ -7,11 +7,16 @@ /**
 import * as ReactModule from 'react';
-declare type Events<S> = {
-    [P in keyof S]?: (e: Event) => unknown;
-};
-declare type StringValued<T> = {
-    [P in keyof T]: string;
-};
 declare type Constructor<T> = {
     new (): T;
 };
+/***
+ * Typecast that curries an Event type through a string. The goal of the type
+ * cast is to match a prop name to a typed event callback.
+ */
+export declare type EventName<T extends Event = Event> = string & {
+    __event_type: T;
+};
+declare type Events = Record<string, EventName | string>;
+declare type EventProps<R extends Events> = {
+    [K in keyof R]: R[K] extends EventName ? (e: R[K]['__event_type']) => void : (e: Event) => void;
+};
 /**
@@ -38,3 +43,3 @@ * Creates a React component for a custom element. Properties are distinguished
  */
-export declare const createComponent: <I extends HTMLElement, E>(React: typeof ReactModule, tagName: string, elementClass: Constructor<I>, events?: StringValued<E> | undefined, displayName?: string | undefined) => ReactModule.ForwardRefExoticComponent<ReactModule.PropsWithRef<Partial<Omit<I, "children">> & Events<E> & ReactModule.HTMLAttributes<HTMLElement>> & {
+export declare const createComponent: <I extends HTMLElement, E extends Events>(React: typeof ReactModule, tagName: string, elementClass: Constructor<I>, events?: E | undefined, displayName?: string | undefined) => ReactModule.ForwardRefExoticComponent<ReactModule.PropsWithRef<Partial<Omit<I, "children">> & Partial<EventProps<E>> & Omit<ReactModule.HTMLAttributes<HTMLElement>, keyof E>> & {
     children?: ReactModule.ReactNode;
@@ -41,0 +46,0 @@ } & ReactModule.RefAttributes<unknown>>;

create-component.js

@@ -6,3 +6,3 @@ /**
  */
-const t=new Set(["children","localName","ref","style","className"]),e=new WeakMap,n=(t,n,s,o,i)=>{const l=null==i?void 0:i[n];void 0!==l?s!==o&&((t,n,s)=>{let o=e.get(t);void 0===o&&e.set(t,o=new Map);let i=o.get(n);void 0!==s?void 0===i?(o.set(n,i={handleEvent:s}),t.addEventListener(n,i)):i.handleEvent=s:void 0!==i&&(o.delete(n),t.removeEventListener(n,i))})(t,l,s):t[n]=s},s=(e,s,o,i,l)=>{const c=e.Component,r=e.createElement,h=new Set(Object.keys(null!=i?i:{}));for(const e in o.prototype)e in HTMLElement.prototype||(t.has(e)?console.warn(`${s} contains property ${e} which is a React reserved property. It will be used by React and not set on the element.`):h.add(e));class d extends c{constructor(){super(...arguments),this.t=null}o(t){if(null!==this.t)for(const e in this.i)n(this.t,e,this.props[e],t?t[e]:void 0,i)}componentDidMount(){this.o()}componentDidUpdate(t){this.o(t)}render(){const t=this.props.l;void 0!==this.h&&this.u===t||(this.h=e=>{null===this.t&&(this.t=e),null!==t&&((t,e)=>{"function"==typeof t?t(e):t.current=e})(t,e),this.u=t});const e={ref:this.h};this.i={};for(const[t,n]of Object.entries(this.props))h.has(t)?this.i[t]=n:e["className"===t?"class":t]=n;return r(s,e)}}d.displayName=null!=l?l:o.name;const a=e.forwardRef(((t,e)=>r(d,{...t,l:e},null==t?void 0:t.children)));return a.displayName=d.displayName,a};export{s as createComponent};
+const t=new Set(["children","localName","ref","style","className"]),e=new WeakMap,n=(t,n,s,o,i)=>{const l=null==i?void 0:i[n];void 0!==l?s!==o&&((t,n,s)=>{let o=e.get(t);void 0===o&&e.set(t,o=new Map);let i=o.get(n);void 0!==s?void 0===i?(o.set(n,i={handleEvent:s}),t.addEventListener(n,i)):i.handleEvent=s:void 0!==i&&(o.delete(n),t.removeEventListener(n,i))})(t,l,s):t[n]=s},s=(e,s,o,i,l)=>{const c=e.Component,r=e.createElement,d=new Set(Object.keys(null!=i?i:{}));for(const e in o.prototype)e in HTMLElement.prototype||(t.has(e)?console.warn(`${s} contains property ${e} which is a React reserved property. It will be used by React and not set on the element.`):d.add(e));class h extends c{constructor(){super(...arguments),this.t=null}o(t){if(null!==this.t)for(const e in this.i)n(this.t,e,this.props[e],t?t[e]:void 0,i)}componentDidMount(){this.o()}componentDidUpdate(t){this.o(t)}render(){const t=this.props.l;void 0!==this.h&&this.u===t||(this.h=e=>{null===this.t&&(this.t=e),null!==t&&((t,e)=>{"function"==typeof t?t(e):t.current=e})(t,e),this.u=t});const e={ref:this.h};this.i={};for(const[t,n]of Object.entries(this.props))"__forwardedRef"!==t&&(d.has(t)?this.i[t]=n:e["className"===t?"class":t]=n);return r(s,e)}}h.displayName=null!=l?l:o.name;const a=e.forwardRef(((t,e)=>r(h,{...t,l:e},null==t?void 0:t.children)));return a.displayName=h.displayName,a};export{s as createComponent};
 //# sourceMappingURL=create-component.js.map

development/create-component.d.ts

@@ -7,11 +7,16 @@ /**
 import * as ReactModule from 'react';
-declare type Events<S> = {
-    [P in keyof S]?: (e: Event) => unknown;
-};
-declare type StringValued<T> = {
-    [P in keyof T]: string;
-};
 declare type Constructor<T> = {
     new (): T;
 };
+/***
+ * Typecast that curries an Event type through a string. The goal of the type
+ * cast is to match a prop name to a typed event callback.
+ */
+export declare type EventName<T extends Event = Event> = string & {
+    __event_type: T;
+};
+declare type Events = Record<string, EventName | string>;
+declare type EventProps<R extends Events> = {
+    [K in keyof R]: R[K] extends EventName ? (e: R[K]['__event_type']) => void : (e: Event) => void;
+};
 /**
@@ -38,3 +43,3 @@ * Creates a React component for a custom element. Properties are distinguished
  */
-export declare const createComponent: <I extends HTMLElement, E>(React: typeof ReactModule, tagName: string, elementClass: Constructor<I>, events?: StringValued<E> | undefined, displayName?: string | undefined) => ReactModule.ForwardRefExoticComponent<ReactModule.PropsWithRef<Partial<Omit<I, "children">> & Events<E> & ReactModule.HTMLAttributes<HTMLElement>> & {
+export declare const createComponent: <I extends HTMLElement, E extends Events>(React: typeof ReactModule, tagName: string, elementClass: Constructor<I>, events?: E | undefined, displayName?: string | undefined) => ReactModule.ForwardRefExoticComponent<ReactModule.PropsWithRef<Partial<Omit<I, "children">> & Partial<EventProps<E>> & Omit<ReactModule.HTMLAttributes<HTMLElement>, keyof E>> & {
     children?: ReactModule.ReactNode;
@@ -41,0 +46,0 @@ } & ReactModule.RefAttributes<unknown>>;

development/create-component.js

@@ -178,2 +178,4 @@ /**
             for (const [k, v] of Object.entries(this.props)) {
+                if (k === '__forwardedRef')
+                    continue;
                 if (elementClassProps.has(k)) {
@@ -180,0 +182,0 @@ this._elementProps[k] = v;

package.json

 {
   "name": "@lit-labs/react",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "A React component wrapper for web components.",
@@ -5,0 +5,0 @@ "license": "BSD-3-Clause",

README.md

@@ -58,2 +58,47 @@ # @lit-labs/react
 
+#### Typescript
+
+Event callback types can be refined by type casting with `EventName`. The
+type cast helps `createComponent` correlate typed callbacks to property names in
+the event property map.
+
+Non-casted event names will fallback to an event type of `Event`.
+
+```ts
+import type {EventName} from '@lit-labs/react';
+
+import * as React from 'react';
+import {createComponent} from '@lit-labs/react';
+import {MyElement} from './my-element.js';
+
+export const MyElementComponent = createComponent(
+  React,
+  'my-element',
+  MyElement,
+  {
+    onClick: 'pointerdown' as EventName<PointerEvent>,
+    onChange: 'input',
+  }
+);
+```
+
+Event callbacks will match their type cast. In the example below, a
+`PointerEvent` is expected in the `onClick` callback.
+
+```tsx
+<MyElementComponent
+  onClick={(e: PointerEvent) => {
+    console.log('DOM PointerEvent called!');
+  }}
+  onChange={(e: Event) => {
+    console.log(e);
+  }}
+/>
+```
+
+NOTE: This type casting is not associated to any component property. Be
+careful to use the corresponding type dispatched or bubbled from the
+webcomponent. Incorrect types might result in additional properties, missing
+properties, or properties of the wrong type.
+
 ## `useController`
@@ -60,0 +105,0 @@

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

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

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

Lines of code

486

increased by2.53%

Number of lines in readme file

169

increased by36.29%

Worsened metrics

Total package byte prevSize

76388

decreased by-0.2%

Number of package files

27

decreased by-3.57%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes