@lit-labs/react - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

create-component.d.ts

@@ -7,16 +7,16 @@ /**
 /// <reference types="react" />
-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> = {
+declare type EventNames = Record<string, EventName | string>;
+declare type EventListeners<R extends EventNames> = {
     [K in keyof R]: R[K] extends EventName ? (e: R[K]['__event_type']) => void : (e: Event) => void;
 };
+declare type ReactProps<I, E> = Omit<React.HTMLAttributes<I>, keyof E>;
+declare type ElementWithoutPropsOrEventListeners<I, E> = Omit<I, keyof E | keyof ReactProps<I, E>>;
+declare type WebComponentProps<I extends HTMLElement, E extends EventNames = {}> = Partial<ReactProps<I, E> & ElementWithoutPropsOrEventListeners<I, E> & EventListeners<E>>;
+export declare type ReactWebComponent<I extends HTMLElement, E extends EventNames = {}> = React.ForwardRefExoticComponent<React.PropsWithoutRef<WebComponentProps<I, E>> & React.RefAttributes<I>>;
+declare type Constructor<T> = {
+    new (): T;
+};
 /**
@@ -43,4 +43,4 @@ * Creates a React component for a custom element. Properties are distinguished
  */
-export declare const createComponent: <I extends HTMLElement, E extends Events = {}>(React: typeof import("react"), tagName: string, elementClass: Constructor<I>, events?: E | undefined, displayName?: string) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Partial<Omit<import("react").HTMLAttributes<I>, keyof E> & Omit<I, keyof E | Exclude<"children", keyof E> | Exclude<"style", keyof E> | Exclude<"className", keyof E> | Exclude<"slot", keyof E> | Exclude<"title", keyof E> | Exclude<"defaultChecked", keyof E> | Exclude<"defaultValue", keyof E> | Exclude<"suppressContentEditableWarning", keyof E> | Exclude<"suppressHydrationWarning", keyof E> | Exclude<"accessKey", keyof E> | Exclude<"contentEditable", keyof E> | Exclude<"contextMenu", keyof E> | Exclude<"dir", keyof E> | Exclude<"draggable", keyof E> | Exclude<"hidden", keyof E> | Exclude<"id", keyof E> | Exclude<"lang", keyof E> | Exclude<"placeholder", keyof E> | Exclude<"spellCheck", keyof E> | Exclude<"tabIndex", keyof E> | Exclude<"translate", keyof E> | Exclude<"radioGroup", keyof E> | Exclude<"role", keyof E> | Exclude<"about", keyof E> | Exclude<"datatype", keyof E> | Exclude<"inlist", keyof E> | Exclude<"prefix", keyof E> | Exclude<"property", keyof E> | Exclude<"resource", keyof E> | Exclude<"typeof", keyof E> | Exclude<"vocab", keyof E> | Exclude<"autoCapitalize", keyof E> | Exclude<"autoCorrect", keyof E> | Exclude<"autoSave", keyof E> | Exclude<"color", keyof E> | Exclude<"itemProp", keyof E> | Exclude<"itemScope", keyof E> | Exclude<"itemType", keyof E> | Exclude<"itemID", keyof E> | Exclude<"itemRef", keyof E> | Exclude<"results", keyof E> | Exclude<"security", keyof E> | Exclude<"unselectable", keyof E> | Exclude<"inputMode", keyof E> | Exclude<"is", keyof E> | Exclude<"aria-activedescendant", keyof E> | Exclude<"aria-atomic", keyof E> | Exclude<"aria-autocomplete", keyof E> | Exclude<"aria-busy", keyof E> | Exclude<"aria-checked", keyof E> | Exclude<"aria-colcount", keyof E> | Exclude<"aria-colindex", keyof E> | Exclude<"aria-colspan", keyof E> | Exclude<"aria-controls", keyof E> | Exclude<"aria-current", keyof E> | Exclude<"aria-describedby", keyof E> | Exclude<"aria-details", keyof E> | Exclude<"aria-disabled", keyof E> | Exclude<"aria-dropeffect", keyof E> | Exclude<"aria-errormessage", keyof E> | Exclude<"aria-expanded", keyof E> | Exclude<"aria-flowto", keyof E> | Exclude<"aria-grabbed", keyof E> | Exclude<"aria-haspopup", keyof E> | Exclude<"aria-hidden", keyof E> | Exclude<"aria-invalid", keyof E> | Exclude<"aria-keyshortcuts", keyof E> | Exclude<"aria-label", keyof E> | Exclude<"aria-labelledby", keyof E> | Exclude<"aria-level", keyof E> | Exclude<"aria-live", keyof E> | Exclude<"aria-modal", keyof E> | Exclude<"aria-multiline", keyof E> | Exclude<"aria-multiselectable", keyof E> | Exclude<"aria-orientation", keyof E> | Exclude<"aria-owns", keyof E> | Exclude<"aria-placeholder", keyof E> | Exclude<"aria-posinset", keyof E> | Exclude<"aria-pressed", keyof E> | Exclude<"aria-readonly", keyof E> | Exclude<"aria-relevant", keyof E> | Exclude<"aria-required", keyof E> | Exclude<"aria-roledescription", keyof E> | Exclude<"aria-rowcount", keyof E> | Exclude<"aria-rowindex", keyof E> | Exclude<"aria-rowspan", keyof E> | Exclude<"aria-selected", keyof E> | Exclude<"aria-setsize", keyof E> | Exclude<"aria-sort", keyof E> | Exclude<"aria-valuemax", keyof E> | Exclude<"aria-valuemin", keyof E> | Exclude<"aria-valuenow", keyof E> | Exclude<"aria-valuetext", keyof E> | Exclude<"dangerouslySetInnerHTML", keyof E> | Exclude<"onCopy", keyof E> | Exclude<"onCopyCapture", keyof E> | Exclude<"onCut", keyof E> | Exclude<"onCutCapture", keyof E> | Exclude<"onPaste", keyof E> | Exclude<"onPasteCapture", keyof E> | Exclude<"onCompositionEnd", keyof E> | Exclude<"onCompositionEndCapture", keyof E> | Exclude<"onCompositionStart", keyof E> | Exclude<"onCompositionStartCapture", keyof E> | Exclude<"onCompositionUpdate", keyof E> | Exclude<"onCompositionUpdateCapture", keyof E> | Exclude<"onFocus", keyof E> | Exclude<"onFocusCapture", keyof E> | Exclude<"onBlur", keyof E> | Exclude<"onBlurCapture", keyof E> | Exclude<"onChange", keyof E> | Exclude<"onChangeCapture", keyof E> | Exclude<"onBeforeInput", keyof E> | Exclude<"onBeforeInputCapture", keyof E> | Exclude<"onInput", keyof E> | Exclude<"onInputCapture", keyof E> | Exclude<"onReset", keyof E> | Exclude<"onResetCapture", keyof E> | Exclude<"onSubmit", keyof E> | Exclude<"onSubmitCapture", keyof E> | Exclude<"onInvalid", keyof E> | Exclude<"onInvalidCapture", keyof E> | Exclude<"onLoad", keyof E> | Exclude<"onLoadCapture", keyof E> | Exclude<"onError", keyof E> | Exclude<"onErrorCapture", keyof E> | Exclude<"onKeyDown", keyof E> | Exclude<"onKeyDownCapture", keyof E> | Exclude<"onKeyPress", keyof E> | Exclude<"onKeyPressCapture", keyof E> | Exclude<"onKeyUp", keyof E> | Exclude<"onKeyUpCapture", keyof E> | Exclude<"onAbort", keyof E> | Exclude<"onAbortCapture", keyof E> | Exclude<"onCanPlay", keyof E> | Exclude<"onCanPlayCapture", keyof E> | Exclude<"onCanPlayThrough", keyof E> | Exclude<"onCanPlayThroughCapture", keyof E> | Exclude<"onDurationChange", keyof E> | Exclude<"onDurationChangeCapture", keyof E> | Exclude<"onEmptied", keyof E> | Exclude<"onEmptiedCapture", keyof E> | Exclude<"onEncrypted", keyof E> | Exclude<"onEncryptedCapture", keyof E> | Exclude<"onEnded", keyof E> | Exclude<"onEndedCapture", keyof E> | Exclude<"onLoadedData", keyof E> | Exclude<"onLoadedDataCapture", keyof E> | Exclude<"onLoadedMetadata", keyof E> | Exclude<"onLoadedMetadataCapture", keyof E> | Exclude<"onLoadStart", keyof E> | Exclude<"onLoadStartCapture", keyof E> | Exclude<"onPause", keyof E> | Exclude<"onPauseCapture", keyof E> | Exclude<"onPlay", keyof E> | Exclude<"onPlayCapture", keyof E> | Exclude<"onPlaying", keyof E> | Exclude<"onPlayingCapture", keyof E> | Exclude<"onProgress", keyof E> | Exclude<"onProgressCapture", keyof E> | Exclude<"onRateChange", keyof E> | Exclude<"onRateChangeCapture", keyof E> | Exclude<"onSeeked", keyof E> | Exclude<"onSeekedCapture", keyof E> | Exclude<"onSeeking", keyof E> | Exclude<"onSeekingCapture", keyof E> | Exclude<"onStalled", keyof E> | Exclude<"onStalledCapture", keyof E> | Exclude<"onSuspend", keyof E> | Exclude<"onSuspendCapture", keyof E> | Exclude<"onTimeUpdate", keyof E> | Exclude<"onTimeUpdateCapture", keyof E> | Exclude<"onVolumeChange", keyof E> | Exclude<"onVolumeChangeCapture", keyof E> | Exclude<"onWaiting", keyof E> | Exclude<"onWaitingCapture", keyof E> | Exclude<"onAuxClick", keyof E> | Exclude<"onAuxClickCapture", keyof E> | Exclude<"onClick", keyof E> | Exclude<"onClickCapture", keyof E> | Exclude<"onContextMenu", keyof E> | Exclude<"onContextMenuCapture", keyof E> | Exclude<"onDoubleClick", keyof E> | Exclude<"onDoubleClickCapture", keyof E> | Exclude<"onDrag", keyof E> | Exclude<"onDragCapture", keyof E> | Exclude<"onDragEnd", keyof E> | Exclude<"onDragEndCapture", keyof E> | Exclude<"onDragEnter", keyof E> | Exclude<"onDragEnterCapture", keyof E> | Exclude<"onDragExit", keyof E> | Exclude<"onDragExitCapture", keyof E> | Exclude<"onDragLeave", keyof E> | Exclude<"onDragLeaveCapture", keyof E> | Exclude<"onDragOver", keyof E> | Exclude<"onDragOverCapture", keyof E> | Exclude<"onDragStart", keyof E> | Exclude<"onDragStartCapture", keyof E> | Exclude<"onDrop", keyof E> | Exclude<"onDropCapture", keyof E> | Exclude<"onMouseDown", keyof E> | Exclude<"onMouseDownCapture", keyof E> | Exclude<"onMouseEnter", keyof E> | Exclude<"onMouseLeave", keyof E> | Exclude<"onMouseMove", keyof E> | Exclude<"onMouseMoveCapture", keyof E> | Exclude<"onMouseOut", keyof E> | Exclude<"onMouseOutCapture", keyof E> | Exclude<"onMouseOver", keyof E> | Exclude<"onMouseOverCapture", keyof E> | Exclude<"onMouseUp", keyof E> | Exclude<"onMouseUpCapture", keyof E> | Exclude<"onSelect", keyof E> | Exclude<"onSelectCapture", keyof E> | Exclude<"onTouchCancel", keyof E> | Exclude<"onTouchCancelCapture", keyof E> | Exclude<"onTouchEnd", keyof E> | Exclude<"onTouchEndCapture", keyof E> | Exclude<"onTouchMove", keyof E> | Exclude<"onTouchMoveCapture", keyof E> | Exclude<"onTouchStart", keyof E> | Exclude<"onTouchStartCapture", keyof E> | Exclude<"onPointerDown", keyof E> | Exclude<"onPointerDownCapture", keyof E> | Exclude<"onPointerMove", keyof E> | Exclude<"onPointerMoveCapture", keyof E> | Exclude<"onPointerUp", keyof E> | Exclude<"onPointerUpCapture", keyof E> | Exclude<"onPointerCancel", keyof E> | Exclude<"onPointerCancelCapture", keyof E> | Exclude<"onPointerEnter", keyof E> | Exclude<"onPointerEnterCapture", keyof E> | Exclude<"onPointerLeave", keyof E> | Exclude<"onPointerLeaveCapture", keyof E> | Exclude<"onPointerOver", keyof E> | Exclude<"onPointerOverCapture", keyof E> | Exclude<"onPointerOut", keyof E> | Exclude<"onPointerOutCapture", keyof E> | Exclude<"onGotPointerCapture", keyof E> | Exclude<"onGotPointerCaptureCapture", keyof E> | Exclude<"onLostPointerCapture", keyof E> | Exclude<"onLostPointerCaptureCapture", keyof E> | Exclude<"onScroll", keyof E> | Exclude<"onScrollCapture", keyof E> | Exclude<"onWheel", keyof E> | Exclude<"onWheelCapture", keyof E> | Exclude<"onAnimationStart", keyof E> | Exclude<"onAnimationStartCapture", keyof E> | Exclude<"onAnimationEnd", keyof E> | Exclude<"onAnimationEndCapture", keyof E> | Exclude<"onAnimationIteration", keyof E> | Exclude<"onAnimationIterationCapture", keyof E> | Exclude<"onTransitionEnd", keyof E> | Exclude<"onTransitionEndCapture", keyof E>> & EventProps<E>>> & import("react").RefAttributes<unknown>>;
+export declare const createComponent: <I extends HTMLElement, E extends EventNames = {}>(React: typeof import("react"), tagName: string, elementClass: Constructor<I>, events?: E | undefined, displayName?: string) => ReactWebComponent<I, E>;
 export {};
 //# sourceMappingURL=create-component.d.ts.map

create-component.d.ts.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"create-component.d.ts","sourceRoot":"","sources":["../src/create-component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAgFH,aAAK,WAAW,CAAC,CAAC,IAAI;IAAC,QAAQ,CAAC,CAAA;CAAC,CAAC;AAElC;;;GAGG;AACH,oBAAY,SAAS,CAAC,CAAC,SAAS,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG;IACxD,YAAY,EAAE,CAAC,CAAC;CACjB,CAAC;AAEF,aAAK,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;AAEjD,aAAK,UAAU,CAAC,CAAC,SAAS,MAAM,IAAI;KACjC,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,SAAS,GAClC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,IAAI,GACjC,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,yFAEjB,MAAM,sEAGD,MAAM,iqSAkIrB,CAAC"}
+{"version":3,"file":"create-component.d.ts","sourceRoot":"","sources":["../src/create-component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAIH,oBAAY,SAAS,CAAC,CAAC,SAAS,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG;IACxD,YAAY,EAAE,CAAC,CAAC;CACjB,CAAC;AAGF,aAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;AAGrD,aAAK,cAAc,CAAC,CAAC,SAAS,UAAU,IAAI;KACzC,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,SAAS,GAClC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,IAAI,GACjC,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI;CACvB,CAAC;AAEF,aAAK,UAAU,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AAC/D,aAAK,mCAAmC,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CACnD,CAAC,EACD,MAAM,CAAC,GAAG,MAAM,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,CACjC,CAAC;AAIF,aAAK,iBAAiB,CACpB,CAAC,SAAS,WAAW,EACrB,CAAC,SAAS,UAAU,GAAG,EAAE,IACvB,OAAO,CACT,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,GACd,mCAAmC,CAAC,CAAC,EAAE,CAAC,CAAC,GACzC,cAAc,CAAC,CAAC,CAAC,CACpB,CAAC;AAaF,oBAAY,iBAAiB,CAC3B,CAAC,SAAS,WAAW,EACrB,CAAC,SAAS,UAAU,GAAG,EAAE,IACvB,KAAK,CAAC,yBAAyB,CACjC,KAAK,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CACxE,CAAC;AAEF,aAAK,WAAW,CAAC,CAAC,IAAI;IAAC,QAAQ,CAAC,CAAA;CAAC,CAAC;AAgFlC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,6FAKjB,MAAM,sEAGD,MAAM,4BAsHrB,CAAC"}

create-component.js

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

create-component.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"create-component.js","sources":["src/create-component.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nconst reservedReactProperties = new Set([\n  'children',\n  'localName',\n  'ref',\n  'style',\n  'className',\n]);\n\nconst listenedEvents: WeakMap<\n  Element,\n  Map<string, EventListenerObject>\n> = new WeakMap();\n\n/**\n * Adds an event listener for the specified event to the given node. In the\n * React setup, there should only ever be one event listener. Thus, for\n * efficiency only one listener is added and the handler for that listener is\n * updated to point to the given listener function.\n */\nconst addOrUpdateEventListener = (\n  node: Element,\n  event: string,\n  listener: (event?: Event) => void\n) => {\n  let events = listenedEvents.get(node);\n  if (events === undefined) {\n    listenedEvents.set(node, (events = new Map()));\n  }\n  let handler = events.get(event);\n  if (listener !== undefined) {\n    // If necessary, add listener and track handler\n    if (handler === undefined) {\n      events.set(event, (handler = {handleEvent: listener}));\n      node.addEventListener(event, handler);\n      // Otherwise just update the listener with new value\n    } else {\n      handler.handleEvent = listener;\n    }\n    // Remove listener if one exists and value is undefined\n  } else if (handler !== undefined) {\n    events.delete(event);\n    node.removeEventListener(event, handler);\n  }\n};\n\n/**\n * Sets properties and events on custom elements. These properties and events\n * have been pre-filtered so we know they should apply to the custom element.\n */\nconst setProperty = <E extends Element>(\n  node: E,\n  name: string,\n  value: unknown,\n  old: unknown,\n  events?: Events\n) => {\n  const event = events?.[name];\n  if (event !== undefined) {\n    // Dirty check event value.\n    if (value !== old) {\n      addOrUpdateEventListener(node, event, value as (e?: Event) => void);\n    }\n  } else {\n    // But don't dirty check properties; elements are assumed to do this.\n    node[name as keyof E] = value as E[keyof E];\n  }\n};\n\n// Set a React ref. Note, there are 2 kinds of refs and there's no built in\n// React API to set a ref.\nconst setRef = (ref: React.Ref<unknown>, value: Element | null) => {\n  if (typeof ref === 'function') {\n    (ref as (e: Element | null) => void)(value);\n  } else {\n    (ref as {current: Element | null}).current = value;\n  }\n};\n\ntype Constructor<T> = {new (): T};\n\n/***\n * Typecast that curries an Event type through a string. The goal of the type\n * cast is to match a prop name to a typed event callback.\n */\nexport type EventName<T extends Event = Event> = string & {\n  __event_type: T;\n};\n\ntype Events = Record<string, EventName | string>;\n\ntype EventProps<R extends Events> = {\n  [K in keyof R]: R[K] extends EventName\n    ? (e: R[K]['__event_type']) => void\n    : (e: Event) => void;\n};\n\n/**\n * Creates a React component for a custom element. Properties are distinguished\n * from attributes automatically, and events can be configured so they are\n * added to the custom element as event listeners.\n *\n * @param React The React module, typically imported from the `react` npm\n * package.\n * @param tagName The custom element tag name registered via\n * `customElements.define`.\n * @param elementClass The custom element class registered via\n * `customElements.define`.\n * @param events An object listing events to which the component can listen. The\n * object keys are the event property names passed in via React props and the\n * object values are the names of the corresponding events generated by the\n * custom element. For example, given `{onactivate: 'activate'}` an event\n * function may be passed via the component's `onactivate` prop and will be\n * called when the custom element fires its `activate` event.\n * @param displayName A React component display name, used in debugging\n * messages. Default value is inferred from the name of custom element class\n * registered via `customElements.define`.\n */\nexport const createComponent = <I extends HTMLElement, E extends Events = {}>(\n  React: typeof window.React,\n  tagName: string,\n  elementClass: Constructor<I>,\n  events?: E,\n  displayName?: string\n) => {\n  const Component = React.Component;\n  const createElement = React.createElement;\n  const eventProps = new Set(Object.keys(events ?? {}));\n\n  // Props the user is allowed to use, includes standard attributes, children,\n  // ref, as well as special event and element properties.\n  type ReactProps = Omit<React.HTMLAttributes<I>, keyof E>;\n  type ElementWithoutPropsOrEvents = Omit<I, keyof E | keyof ReactProps>;\n  type UserProps = Partial<\n    ReactProps & ElementWithoutPropsOrEvents & EventProps<E>\n  >;\n\n  // Props used by this component wrapper. This is the UserProps and the\n  // special `__forwardedRef` property. Note, this ref is special because\n  // it's both needed in this component to get access to the rendered element\n  // and must fulfill any ref passed by the user.\n  type ComponentProps = UserProps & {\n    __forwardedRef?: React.Ref<unknown>;\n  };\n\n  class ReactComponent extends Component<ComponentProps> {\n    private _element: I | null = null;\n    private _elementProps!: {[index: string]: unknown};\n    private _userRef?: React.Ref<unknown>;\n    private _ref?: React.RefCallback<I>;\n\n    static displayName = displayName ?? elementClass.name;\n\n    private _updateElement(oldProps?: ComponentProps) {\n      if (this._element === null) {\n        return;\n      }\n      // Set element properties to the values in `this.props`\n      for (const prop in this._elementProps) {\n        setProperty(\n          this._element,\n          prop,\n          this.props[prop as keyof ComponentProps],\n          oldProps ? oldProps[prop as keyof ComponentProps] : undefined,\n          events\n        );\n      }\n      // Note, the spirit of React might be to \"unset\" any old values that\n      // are no longer included; however, there's no reasonable value to set\n      // them to so we just leave the previous state as is.\n    }\n\n    /**\n     * Updates element properties correctly setting properties\n     * on mount.\n     */\n    override componentDidMount() {\n      this._updateElement();\n    }\n\n    /**\n     * Updates element properties correctly setting properties\n     * on every update. Note, this does not include mount.\n     */\n    override componentDidUpdate(old: ComponentProps) {\n      this._updateElement(old);\n    }\n\n    /**\n     * Renders the custom element with a `ref` prop which allows this\n     * component to reference the custom element.\n     *\n     * Standard attributes are passed to React and element properties and events\n     * are updated in componentDidMount/componentDidUpdate.\n     *\n     */\n    override render() {\n      // Since refs only get fulfilled once, pass a new one if the user's\n      // ref changed. This allows refs to be fulfilled as expected, going from\n      // having a value to null.\n      const userRef = this.props.__forwardedRef as React.Ref<unknown>;\n      if (this._ref === undefined || this._userRef !== userRef) {\n        this._ref = (value: I | null) => {\n          if (this._element === null) {\n            this._element = value;\n          }\n          if (userRef !== null) {\n            setRef(userRef, value);\n          }\n          this._userRef = userRef;\n        };\n      }\n      // Filters class properties out and passes the remaining\n      // attributes to React. This allows attributes to use framework rules\n      // for setting attributes and render correctly under SSR.\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const props: any = {ref: this._ref};\n      // Note, save element props while iterating to avoid the need to\n      // iterate again when setting properties.\n      this._elementProps = {};\n      for (const [k, v] of Object.entries(this.props)) {\n        if (k === '__forwardedRef') continue;\n\n        if (\n          eventProps.has(k) ||\n          (!reservedReactProperties.has(k) &&\n            !(k in HTMLElement.prototype) &&\n            k in elementClass.prototype)\n        ) {\n          this._elementProps[k] = v;\n        } else {\n          // React does *not* handle `className` for custom elements so\n          // coerce it to `class` so it's handled correctly.\n          props[k === 'className' ? 'class' : k] = v;\n        }\n      }\n      return createElement(tagName, props);\n    }\n  }\n\n  const ForwardedComponent = React.forwardRef(\n    (props?: UserProps, ref?: React.Ref<unknown>) =>\n      createElement(\n        ReactComponent,\n        {...props, __forwardedRef: ref} as ComponentProps,\n        props?.children\n      )\n  );\n\n  // To ease debugging in the React Developer Tools\n  ForwardedComponent.displayName = ReactComponent.displayName;\n\n  return ForwardedComponent;\n};\n"],"names":["reservedReactProperties","Set","listenedEvents","WeakMap","setProperty","node","name","value","old","events","event","undefined","listener","get","set","Map","handler","handleEvent","addEventListener","delete","removeEventListener","addOrUpdateEventListener","createComponent","React","tagName","elementClass","displayName","Component","createElement","eventProps","Object","keys","ReactComponent","constructor","this","_element","_updateElement","oldProps","prop","_elementProps","props","componentDidMount","componentDidUpdate","render","userRef","__forwardedRef","_ref","_userRef","ref","current","setRef","k","v","entries","has","HTMLElement","prototype","ForwardedComponent","forwardRef","children"],"mappings":";;;;;AAMA,MAAMA,EAA0B,IAAIC,IAAI,CACtC,WACA,YACA,MACA,QACA,cAGIC,EAGF,IAAIC,QAsCFC,EAAc,CAClBC,EACAC,EACAC,EACAC,EACAC,KAEA,MAAMC,EAAQD,eAAAA,EAASH,QACTK,IAAVD,EAEEH,IAAUC,GAxCe,EAC/BH,EACAK,EACAE,KAEA,IAAIH,EAASP,EAAeW,IAAIR,QACjBM,IAAXF,GACFP,EAAeY,IAAIT,EAAOI,EAAS,IAAIM,KAEzC,IAAIC,EAAUP,EAAOI,IAAIH,QACRC,IAAbC,OAEcD,IAAZK,GACFP,EAAOK,IAAIJ,EAAQM,EAAU,CAACC,YAAaL,IAC3CP,EAAKa,iBAAiBR,EAAOM,IAG7BA,EAAQC,YAAcL,OAGHD,IAAZK,IACTP,EAAOU,OAAOT,GACdL,EAAKe,oBAAoBV,EAAOM,GACjC,EAkBGK,CAAyBhB,EAAMK,EAAOH,GAIxCF,EAAKC,GAAmBC,CACzB,EAoDUe,EAAkB,CAC7BC,EACAC,EACAC,EACAhB,EACAiB,KAEA,MAAMC,EAAYJ,EAAMI,UAClBC,EAAgBL,EAAMK,cACtBC,EAAa,IAAI5B,IAAI6B,OAAOC,KAAKtB,QAAAA,EAAU,CAAA,IAkBjD,MAAMuB,UAAuBL,EAA7BM,kCACUC,KAAQC,EAAa,IA4F9B,CArFSC,EAAeC,GACrB,GAAsB,OAAlBH,KAAKC,EAIT,IAAK,MAAMG,KAAQJ,KAAKK,EACtBnC,EACE8B,KAAKC,EACLG,EACAJ,KAAKM,MAAMF,GACXD,EAAWA,EAASC,QAAgC3B,EACpDF,EAML,CAMQgC,oBACPP,KAAKE,GACN,CAMQM,mBAAmBlC,GAC1B0B,KAAKE,EAAe5B,EACrB,CAUQmC,SAIP,MAAMC,EAAUV,KAAKM,MAAMK,UACTlC,IAAduB,KAAKY,GAAsBZ,KAAKa,IAAaH,IAC/CV,KAAKY,EAAQvC,IACW,OAAlB2B,KAAKC,IACPD,KAAKC,EAAW5B,GAEF,OAAZqC,GAvIC,EAACI,EAAyBzC,KACpB,mBAARyC,EACRA,EAAoCzC,GAEpCyC,EAAkCC,QAAU1C,CAC9C,EAmIS2C,CAAON,EAASrC,GAElB2B,KAAKa,EAAWH,CAAO,GAO3B,MAAMJ,EAAa,CAACQ,IAAKd,KAAKY,GAG9BZ,KAAKK,EAAgB,GACrB,IAAK,MAAOY,EAAGC,KAAMtB,OAAOuB,QAAQnB,KAAKM,OAC7B,mBAANW,IAGFtB,EAAWyB,IAAIH,KACbnD,EAAwBsD,IAAIH,MAC1BA,KAAKI,YAAYC,YACnBL,KAAK1B,EAAa+B,UAEpBtB,KAAKK,EAAcY,GAAKC,EAIxBZ,EAAY,cAANW,EAAoB,QAAUA,GAAKC,GAG7C,OAAOxB,EAAcJ,EAASgB,EAC/B,EAtFMR,EAAWN,YAAGA,QAAAA,EAAeD,EAAanB,KAyFnD,MAAMmD,EAAqBlC,EAAMmC,YAC/B,CAAClB,EAAmBQ,IAClBpB,EACEI,EACA,IAAIQ,EAAOK,KAAgBG,GAC3BR,eAAAA,EAAOmB,YAOb,OAFAF,EAAmB/B,YAAcM,EAAeN,YAEzC+B,CAAkB"}
+{"version":3,"file":"create-component.js","sources":["src/create-component.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n// Match a prop name to a typed event callback by\n// adding an Event type as an expected property on a string.\nexport type EventName<T extends Event = Event> = string & {\n  __event_type: T;\n};\n\n// A key value map matching React prop names to event names\ntype EventNames = Record<string, EventName | string>;\n\n// A map of expected event listener types based on EventNames\ntype EventListeners<R extends EventNames> = {\n  [K in keyof R]: R[K] extends EventName\n    ? (e: R[K]['__event_type']) => void\n    : (e: Event) => void;\n};\n\ntype ReactProps<I, E> = Omit<React.HTMLAttributes<I>, keyof E>;\ntype ElementWithoutPropsOrEventListeners<I, E> = Omit<\n  I,\n  keyof E | keyof ReactProps<I, E>\n>;\n\n// Props the user is allowed to use, includes standard attributes, children,\n// ref, as well as special event and element properties.\ntype WebComponentProps<\n  I extends HTMLElement,\n  E extends EventNames = {}\n> = Partial<\n  ReactProps<I, E> &\n    ElementWithoutPropsOrEventListeners<I, E> &\n    EventListeners<E>\n>;\n\n// Props used by this component wrapper. This is the WebComponentProps and the\n// special `__forwardedRef` property. Note, this ref is special because\n// it's both needed in this component to get access to the rendered element\n// and must fulfill any ref passed by the user.\ntype ReactComponentProps<\n  I extends HTMLElement,\n  E extends EventNames = {}\n> = WebComponentProps<I, E> & {\n  __forwardedRef?: React.Ref<I>;\n};\n\nexport type ReactWebComponent<\n  I extends HTMLElement,\n  E extends EventNames = {}\n> = React.ForwardRefExoticComponent<\n  React.PropsWithoutRef<WebComponentProps<I, E>> & React.RefAttributes<I>\n>;\n\ntype Constructor<T> = {new (): T};\n\nconst reservedReactProperties = new Set([\n  'children',\n  'localName',\n  'ref',\n  'style',\n  'className',\n]);\n\nconst listenedEvents: WeakMap<\n  Element,\n  Map<string, EventListenerObject>\n> = new WeakMap();\n\n/**\n * Adds an event listener for the specified event to the given node. In the\n * React setup, there should only ever be one event listener. Thus, for\n * efficiency only one listener is added and the handler for that listener is\n * updated to point to the given listener function.\n */\nconst addOrUpdateEventListener = (\n  node: Element,\n  event: string,\n  listener: (event?: Event) => void\n) => {\n  let events = listenedEvents.get(node);\n  if (events === undefined) {\n    listenedEvents.set(node, (events = new Map()));\n  }\n  let handler = events.get(event);\n  if (listener !== undefined) {\n    // If necessary, add listener and track handler\n    if (handler === undefined) {\n      events.set(event, (handler = {handleEvent: listener}));\n      node.addEventListener(event, handler);\n      // Otherwise just update the listener with new value\n    } else {\n      handler.handleEvent = listener;\n    }\n    // Remove listener if one exists and value is undefined\n  } else if (handler !== undefined) {\n    events.delete(event);\n    node.removeEventListener(event, handler);\n  }\n};\n\n/**\n * Sets properties and events on custom elements. These properties and events\n * have been pre-filtered so we know they should apply to the custom element.\n */\nconst setProperty = <E extends Element>(\n  node: E,\n  name: string,\n  value: unknown,\n  old: unknown,\n  events?: EventNames\n) => {\n  const event = events?.[name];\n  if (event !== undefined) {\n    // Dirty check event value.\n    if (value !== old) {\n      addOrUpdateEventListener(node, event, value as (e?: Event) => void);\n    }\n  } else {\n    // But don't dirty check properties; elements are assumed to do this.\n    node[name as keyof E] = value as E[keyof E];\n  }\n};\n\n// Set a React ref. Note, there are 2 kinds of refs and there's no built in\n// React API to set a ref.\nconst setRef = (ref: React.Ref<unknown>, value: Element | null) => {\n  if (typeof ref === 'function') {\n    (ref as (e: Element | null) => void)(value);\n  } else {\n    (ref as {current: Element | null}).current = value;\n  }\n};\n\n/**\n * Creates a React component for a custom element. Properties are distinguished\n * from attributes automatically, and events can be configured so they are\n * added to the custom element as event listeners.\n *\n * @param React The React module, typically imported from the `react` npm\n * package.\n * @param tagName The custom element tag name registered via\n * `customElements.define`.\n * @param elementClass The custom element class registered via\n * `customElements.define`.\n * @param events An object listing events to which the component can listen. The\n * object keys are the event property names passed in via React props and the\n * object values are the names of the corresponding events generated by the\n * custom element. For example, given `{onactivate: 'activate'}` an event\n * function may be passed via the component's `onactivate` prop and will be\n * called when the custom element fires its `activate` event.\n * @param displayName A React component display name, used in debugging\n * messages. Default value is inferred from the name of custom element class\n * registered via `customElements.define`.\n */\nexport const createComponent = <\n  I extends HTMLElement,\n  E extends EventNames = {}\n>(\n  React: typeof window.React,\n  tagName: string,\n  elementClass: Constructor<I>,\n  events?: E,\n  displayName?: string\n): ReactWebComponent<I, E> => {\n  const Component = React.Component;\n  const createElement = React.createElement;\n  const eventProps = new Set(Object.keys(events ?? {}));\n\n  type Props = ReactComponentProps<I, E>;\n\n  class ReactComponent extends Component<Props> {\n    private _element: I | null = null;\n    private _elementProps!: {[index: string]: unknown};\n    private _userRef?: React.Ref<I>;\n    private _ref?: React.RefCallback<I>;\n\n    static displayName = displayName ?? elementClass.name;\n\n    private _updateElement(oldProps?: Props) {\n      if (this._element === null) {\n        return;\n      }\n      // Set element properties to the values in `this.props`\n      for (const prop in this._elementProps) {\n        setProperty(\n          this._element,\n          prop,\n          this.props[prop],\n          oldProps ? oldProps[prop] : undefined,\n          events\n        );\n      }\n      // Note, the spirit of React might be to \"unset\" any old values that\n      // are no longer included; however, there's no reasonable value to set\n      // them to so we just leave the previous state as is.\n    }\n\n    /**\n     * Updates element properties correctly setting properties\n     * on mount.\n     */\n    override componentDidMount() {\n      this._updateElement();\n    }\n\n    /**\n     * Updates element properties correctly setting properties\n     * on every update. Note, this does not include mount.\n     */\n    override componentDidUpdate(old: Props) {\n      this._updateElement(old);\n    }\n\n    /**\n     * Renders the custom element with a `ref` prop which allows this\n     * component to reference the custom element.\n     *\n     * Standard attributes are passed to React and element properties and events\n     * are updated in componentDidMount/componentDidUpdate.\n     *\n     */\n    override render() {\n      // Since refs only get fulfilled once, pass a new one if the user's\n      // ref changed. This allows refs to be fulfilled as expected, going from\n      // having a value to null.\n      const userRef = this.props.__forwardedRef ?? null;\n      if (this._ref === undefined || this._userRef !== userRef) {\n        this._ref = (value: I | null) => {\n          if (this._element === null) {\n            this._element = value;\n          }\n          if (userRef !== null) {\n            setRef(userRef, value);\n          }\n          this._userRef = userRef;\n        };\n      }\n      // Filters class properties out and passes the remaining\n      // attributes to React. This allows attributes to use framework rules\n      // for setting attributes and render correctly under SSR.\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const props: any = {ref: this._ref};\n      // Note, save element props while iterating to avoid the need to\n      // iterate again when setting properties.\n      this._elementProps = {};\n      for (const [k, v] of Object.entries(this.props)) {\n        if (k === '__forwardedRef') continue;\n\n        if (\n          eventProps.has(k) ||\n          (!reservedReactProperties.has(k) &&\n            !(k in HTMLElement.prototype) &&\n            k in elementClass.prototype)\n        ) {\n          this._elementProps[k] = v;\n        } else {\n          // React does *not* handle `className` for custom elements so\n          // coerce it to `class` so it's handled correctly.\n          props[k === 'className' ? 'class' : k] = v;\n        }\n      }\n      return createElement<React.HTMLAttributes<I>, I>(tagName, props);\n    }\n  }\n\n  const ForwardedComponent: ReactWebComponent<I, E> = React.forwardRef<\n    I,\n    WebComponentProps<I, E>\n  >((props, ref) =>\n    createElement<Props, ReactComponent, typeof ReactComponent>(\n      ReactComponent,\n      {...props, __forwardedRef: ref},\n      props?.children\n    )\n  );\n\n  // To ease debugging in the React Developer Tools\n  ForwardedComponent.displayName = ReactComponent.displayName;\n\n  return ForwardedComponent;\n};\n"],"names":["reservedReactProperties","Set","listenedEvents","WeakMap","setProperty","node","name","value","old","events","event","undefined","listener","get","set","Map","handler","handleEvent","addEventListener","delete","removeEventListener","addOrUpdateEventListener","createComponent","React","tagName","elementClass","displayName","Component","createElement","eventProps","Object","keys","ReactComponent","constructor","this","_element","_updateElement","oldProps","prop","_elementProps","props","componentDidMount","componentDidUpdate","render","userRef","_a","__forwardedRef","_ref","_userRef","ref","current","setRef","k","v","entries","has","HTMLElement","prototype","ForwardedComponent","forwardRef","children"],"mappings":";;;;;AA2DA,MAAMA,EAA0B,IAAIC,IAAI,CACtC,WACA,YACA,MACA,QACA,cAGIC,EAGF,IAAIC,QAsCFC,EAAc,CAClBC,EACAC,EACAC,EACAC,EACAC,KAEA,MAAMC,EAAQD,eAAAA,EAASH,QACTK,IAAVD,EAEEH,IAAUC,GAxCe,EAC/BH,EACAK,EACAE,KAEA,IAAIH,EAASP,EAAeW,IAAIR,QACjBM,IAAXF,GACFP,EAAeY,IAAIT,EAAOI,EAAS,IAAIM,KAEzC,IAAIC,EAAUP,EAAOI,IAAIH,QACRC,IAAbC,OAEcD,IAAZK,GACFP,EAAOK,IAAIJ,EAAQM,EAAU,CAACC,YAAaL,IAC3CP,EAAKa,iBAAiBR,EAAOM,IAG7BA,EAAQC,YAAcL,OAGHD,IAAZK,IACTP,EAAOU,OAAOT,GACdL,EAAKe,oBAAoBV,EAAOM,GACjC,EAkBGK,CAAyBhB,EAAMK,EAAOH,GAIxCF,EAAKC,GAAmBC,CACzB,EAkCUe,EAAkB,CAI7BC,EACAC,EACAC,EACAhB,EACAiB,KAEA,MAAMC,EAAYJ,EAAMI,UAClBC,EAAgBL,EAAMK,cACtBC,EAAa,IAAI5B,IAAI6B,OAAOC,KAAKtB,QAAAA,EAAU,CAAA,IAIjD,MAAMuB,UAAuBL,EAA7BM,kCACUC,KAAQC,EAAa,IA4F9B,CArFSC,EAAeC,GACrB,GAAsB,OAAlBH,KAAKC,EAIT,IAAK,MAAMG,KAAQJ,KAAKK,EACtBnC,EACE8B,KAAKC,EACLG,EACAJ,KAAKM,MAAMF,GACXD,EAAWA,EAASC,QAAQ3B,EAC5BF,EAML,CAMQgC,oBACPP,KAAKE,GACN,CAMQM,mBAAmBlC,GAC1B0B,KAAKE,EAAe5B,EACrB,CAUQmC,eAIP,MAAMC,EAAuC,QAA7BC,EAAAX,KAAKM,MAAMM,YAAkB,IAAAD,EAAAA,EAAA,UAC3BlC,IAAduB,KAAKa,GAAsBb,KAAKc,IAAaJ,IAC/CV,KAAKa,EAAQxC,IACW,OAAlB2B,KAAKC,IACPD,KAAKC,EAAW5B,GAEF,OAAZqC,GA1GC,EAACK,EAAyB1C,KACpB,mBAAR0C,EACRA,EAAoC1C,GAEpC0C,EAAkCC,QAAU3C,CAC9C,EAsGS4C,CAAOP,EAASrC,GAElB2B,KAAKc,EAAWJ,CAAO,GAO3B,MAAMJ,EAAa,CAACS,IAAKf,KAAKa,GAG9Bb,KAAKK,EAAgB,GACrB,IAAK,MAAOa,EAAGC,KAAMvB,OAAOwB,QAAQpB,KAAKM,OAC7B,mBAANY,IAGFvB,EAAW0B,IAAIH,KACbpD,EAAwBuD,IAAIH,MAC1BA,KAAKI,YAAYC,YACnBL,KAAK3B,EAAagC,UAEpBvB,KAAKK,EAAca,GAAKC,EAIxBb,EAAY,cAANY,EAAoB,QAAUA,GAAKC,GAG7C,OAAOzB,EAA0CJ,EAASgB,EAC3D,EAtFMR,EAAWN,YAAGA,QAAAA,EAAeD,EAAanB,KAyFnD,MAAMoD,EAA8CnC,EAAMoC,YAGxD,CAACnB,EAAOS,IACRrB,EACEI,EACA,IAAIQ,EAAOM,KAAgBG,GAC3BT,eAAAA,EAAOoB,YAOX,OAFAF,EAAmBhC,YAAcM,EAAeN,YAEzCgC,CAAkB"}

development/create-component.d.ts

@@ -7,16 +7,16 @@ /**
 /// <reference types="react" />
-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> = {
+declare type EventNames = Record<string, EventName | string>;
+declare type EventListeners<R extends EventNames> = {
     [K in keyof R]: R[K] extends EventName ? (e: R[K]['__event_type']) => void : (e: Event) => void;
 };
+declare type ReactProps<I, E> = Omit<React.HTMLAttributes<I>, keyof E>;
+declare type ElementWithoutPropsOrEventListeners<I, E> = Omit<I, keyof E | keyof ReactProps<I, E>>;
+declare type WebComponentProps<I extends HTMLElement, E extends EventNames = {}> = Partial<ReactProps<I, E> & ElementWithoutPropsOrEventListeners<I, E> & EventListeners<E>>;
+export declare type ReactWebComponent<I extends HTMLElement, E extends EventNames = {}> = React.ForwardRefExoticComponent<React.PropsWithoutRef<WebComponentProps<I, E>> & React.RefAttributes<I>>;
+declare type Constructor<T> = {
+    new (): T;
+};
 /**
@@ -43,4 +43,4 @@ * Creates a React component for a custom element. Properties are distinguished
  */
-export declare const createComponent: <I extends HTMLElement, E extends Events = {}>(React: typeof import("react"), tagName: string, elementClass: Constructor<I>, events?: E | undefined, displayName?: string) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Partial<Omit<import("react").HTMLAttributes<I>, keyof E> & Omit<I, keyof E | Exclude<"children", keyof E> | Exclude<"style", keyof E> | Exclude<"className", keyof E> | Exclude<"slot", keyof E> | Exclude<"title", keyof E> | Exclude<"defaultChecked", keyof E> | Exclude<"defaultValue", keyof E> | Exclude<"suppressContentEditableWarning", keyof E> | Exclude<"suppressHydrationWarning", keyof E> | Exclude<"accessKey", keyof E> | Exclude<"contentEditable", keyof E> | Exclude<"contextMenu", keyof E> | Exclude<"dir", keyof E> | Exclude<"draggable", keyof E> | Exclude<"hidden", keyof E> | Exclude<"id", keyof E> | Exclude<"lang", keyof E> | Exclude<"placeholder", keyof E> | Exclude<"spellCheck", keyof E> | Exclude<"tabIndex", keyof E> | Exclude<"translate", keyof E> | Exclude<"radioGroup", keyof E> | Exclude<"role", keyof E> | Exclude<"about", keyof E> | Exclude<"datatype", keyof E> | Exclude<"inlist", keyof E> | Exclude<"prefix", keyof E> | Exclude<"property", keyof E> | Exclude<"resource", keyof E> | Exclude<"typeof", keyof E> | Exclude<"vocab", keyof E> | Exclude<"autoCapitalize", keyof E> | Exclude<"autoCorrect", keyof E> | Exclude<"autoSave", keyof E> | Exclude<"color", keyof E> | Exclude<"itemProp", keyof E> | Exclude<"itemScope", keyof E> | Exclude<"itemType", keyof E> | Exclude<"itemID", keyof E> | Exclude<"itemRef", keyof E> | Exclude<"results", keyof E> | Exclude<"security", keyof E> | Exclude<"unselectable", keyof E> | Exclude<"inputMode", keyof E> | Exclude<"is", keyof E> | Exclude<"aria-activedescendant", keyof E> | Exclude<"aria-atomic", keyof E> | Exclude<"aria-autocomplete", keyof E> | Exclude<"aria-busy", keyof E> | Exclude<"aria-checked", keyof E> | Exclude<"aria-colcount", keyof E> | Exclude<"aria-colindex", keyof E> | Exclude<"aria-colspan", keyof E> | Exclude<"aria-controls", keyof E> | Exclude<"aria-current", keyof E> | Exclude<"aria-describedby", keyof E> | Exclude<"aria-details", keyof E> | Exclude<"aria-disabled", keyof E> | Exclude<"aria-dropeffect", keyof E> | Exclude<"aria-errormessage", keyof E> | Exclude<"aria-expanded", keyof E> | Exclude<"aria-flowto", keyof E> | Exclude<"aria-grabbed", keyof E> | Exclude<"aria-haspopup", keyof E> | Exclude<"aria-hidden", keyof E> | Exclude<"aria-invalid", keyof E> | Exclude<"aria-keyshortcuts", keyof E> | Exclude<"aria-label", keyof E> | Exclude<"aria-labelledby", keyof E> | Exclude<"aria-level", keyof E> | Exclude<"aria-live", keyof E> | Exclude<"aria-modal", keyof E> | Exclude<"aria-multiline", keyof E> | Exclude<"aria-multiselectable", keyof E> | Exclude<"aria-orientation", keyof E> | Exclude<"aria-owns", keyof E> | Exclude<"aria-placeholder", keyof E> | Exclude<"aria-posinset", keyof E> | Exclude<"aria-pressed", keyof E> | Exclude<"aria-readonly", keyof E> | Exclude<"aria-relevant", keyof E> | Exclude<"aria-required", keyof E> | Exclude<"aria-roledescription", keyof E> | Exclude<"aria-rowcount", keyof E> | Exclude<"aria-rowindex", keyof E> | Exclude<"aria-rowspan", keyof E> | Exclude<"aria-selected", keyof E> | Exclude<"aria-setsize", keyof E> | Exclude<"aria-sort", keyof E> | Exclude<"aria-valuemax", keyof E> | Exclude<"aria-valuemin", keyof E> | Exclude<"aria-valuenow", keyof E> | Exclude<"aria-valuetext", keyof E> | Exclude<"dangerouslySetInnerHTML", keyof E> | Exclude<"onCopy", keyof E> | Exclude<"onCopyCapture", keyof E> | Exclude<"onCut", keyof E> | Exclude<"onCutCapture", keyof E> | Exclude<"onPaste", keyof E> | Exclude<"onPasteCapture", keyof E> | Exclude<"onCompositionEnd", keyof E> | Exclude<"onCompositionEndCapture", keyof E> | Exclude<"onCompositionStart", keyof E> | Exclude<"onCompositionStartCapture", keyof E> | Exclude<"onCompositionUpdate", keyof E> | Exclude<"onCompositionUpdateCapture", keyof E> | Exclude<"onFocus", keyof E> | Exclude<"onFocusCapture", keyof E> | Exclude<"onBlur", keyof E> | Exclude<"onBlurCapture", keyof E> | Exclude<"onChange", keyof E> | Exclude<"onChangeCapture", keyof E> | Exclude<"onBeforeInput", keyof E> | Exclude<"onBeforeInputCapture", keyof E> | Exclude<"onInput", keyof E> | Exclude<"onInputCapture", keyof E> | Exclude<"onReset", keyof E> | Exclude<"onResetCapture", keyof E> | Exclude<"onSubmit", keyof E> | Exclude<"onSubmitCapture", keyof E> | Exclude<"onInvalid", keyof E> | Exclude<"onInvalidCapture", keyof E> | Exclude<"onLoad", keyof E> | Exclude<"onLoadCapture", keyof E> | Exclude<"onError", keyof E> | Exclude<"onErrorCapture", keyof E> | Exclude<"onKeyDown", keyof E> | Exclude<"onKeyDownCapture", keyof E> | Exclude<"onKeyPress", keyof E> | Exclude<"onKeyPressCapture", keyof E> | Exclude<"onKeyUp", keyof E> | Exclude<"onKeyUpCapture", keyof E> | Exclude<"onAbort", keyof E> | Exclude<"onAbortCapture", keyof E> | Exclude<"onCanPlay", keyof E> | Exclude<"onCanPlayCapture", keyof E> | Exclude<"onCanPlayThrough", keyof E> | Exclude<"onCanPlayThroughCapture", keyof E> | Exclude<"onDurationChange", keyof E> | Exclude<"onDurationChangeCapture", keyof E> | Exclude<"onEmptied", keyof E> | Exclude<"onEmptiedCapture", keyof E> | Exclude<"onEncrypted", keyof E> | Exclude<"onEncryptedCapture", keyof E> | Exclude<"onEnded", keyof E> | Exclude<"onEndedCapture", keyof E> | Exclude<"onLoadedData", keyof E> | Exclude<"onLoadedDataCapture", keyof E> | Exclude<"onLoadedMetadata", keyof E> | Exclude<"onLoadedMetadataCapture", keyof E> | Exclude<"onLoadStart", keyof E> | Exclude<"onLoadStartCapture", keyof E> | Exclude<"onPause", keyof E> | Exclude<"onPauseCapture", keyof E> | Exclude<"onPlay", keyof E> | Exclude<"onPlayCapture", keyof E> | Exclude<"onPlaying", keyof E> | Exclude<"onPlayingCapture", keyof E> | Exclude<"onProgress", keyof E> | Exclude<"onProgressCapture", keyof E> | Exclude<"onRateChange", keyof E> | Exclude<"onRateChangeCapture", keyof E> | Exclude<"onSeeked", keyof E> | Exclude<"onSeekedCapture", keyof E> | Exclude<"onSeeking", keyof E> | Exclude<"onSeekingCapture", keyof E> | Exclude<"onStalled", keyof E> | Exclude<"onStalledCapture", keyof E> | Exclude<"onSuspend", keyof E> | Exclude<"onSuspendCapture", keyof E> | Exclude<"onTimeUpdate", keyof E> | Exclude<"onTimeUpdateCapture", keyof E> | Exclude<"onVolumeChange", keyof E> | Exclude<"onVolumeChangeCapture", keyof E> | Exclude<"onWaiting", keyof E> | Exclude<"onWaitingCapture", keyof E> | Exclude<"onAuxClick", keyof E> | Exclude<"onAuxClickCapture", keyof E> | Exclude<"onClick", keyof E> | Exclude<"onClickCapture", keyof E> | Exclude<"onContextMenu", keyof E> | Exclude<"onContextMenuCapture", keyof E> | Exclude<"onDoubleClick", keyof E> | Exclude<"onDoubleClickCapture", keyof E> | Exclude<"onDrag", keyof E> | Exclude<"onDragCapture", keyof E> | Exclude<"onDragEnd", keyof E> | Exclude<"onDragEndCapture", keyof E> | Exclude<"onDragEnter", keyof E> | Exclude<"onDragEnterCapture", keyof E> | Exclude<"onDragExit", keyof E> | Exclude<"onDragExitCapture", keyof E> | Exclude<"onDragLeave", keyof E> | Exclude<"onDragLeaveCapture", keyof E> | Exclude<"onDragOver", keyof E> | Exclude<"onDragOverCapture", keyof E> | Exclude<"onDragStart", keyof E> | Exclude<"onDragStartCapture", keyof E> | Exclude<"onDrop", keyof E> | Exclude<"onDropCapture", keyof E> | Exclude<"onMouseDown", keyof E> | Exclude<"onMouseDownCapture", keyof E> | Exclude<"onMouseEnter", keyof E> | Exclude<"onMouseLeave", keyof E> | Exclude<"onMouseMove", keyof E> | Exclude<"onMouseMoveCapture", keyof E> | Exclude<"onMouseOut", keyof E> | Exclude<"onMouseOutCapture", keyof E> | Exclude<"onMouseOver", keyof E> | Exclude<"onMouseOverCapture", keyof E> | Exclude<"onMouseUp", keyof E> | Exclude<"onMouseUpCapture", keyof E> | Exclude<"onSelect", keyof E> | Exclude<"onSelectCapture", keyof E> | Exclude<"onTouchCancel", keyof E> | Exclude<"onTouchCancelCapture", keyof E> | Exclude<"onTouchEnd", keyof E> | Exclude<"onTouchEndCapture", keyof E> | Exclude<"onTouchMove", keyof E> | Exclude<"onTouchMoveCapture", keyof E> | Exclude<"onTouchStart", keyof E> | Exclude<"onTouchStartCapture", keyof E> | Exclude<"onPointerDown", keyof E> | Exclude<"onPointerDownCapture", keyof E> | Exclude<"onPointerMove", keyof E> | Exclude<"onPointerMoveCapture", keyof E> | Exclude<"onPointerUp", keyof E> | Exclude<"onPointerUpCapture", keyof E> | Exclude<"onPointerCancel", keyof E> | Exclude<"onPointerCancelCapture", keyof E> | Exclude<"onPointerEnter", keyof E> | Exclude<"onPointerEnterCapture", keyof E> | Exclude<"onPointerLeave", keyof E> | Exclude<"onPointerLeaveCapture", keyof E> | Exclude<"onPointerOver", keyof E> | Exclude<"onPointerOverCapture", keyof E> | Exclude<"onPointerOut", keyof E> | Exclude<"onPointerOutCapture", keyof E> | Exclude<"onGotPointerCapture", keyof E> | Exclude<"onGotPointerCaptureCapture", keyof E> | Exclude<"onLostPointerCapture", keyof E> | Exclude<"onLostPointerCaptureCapture", keyof E> | Exclude<"onScroll", keyof E> | Exclude<"onScrollCapture", keyof E> | Exclude<"onWheel", keyof E> | Exclude<"onWheelCapture", keyof E> | Exclude<"onAnimationStart", keyof E> | Exclude<"onAnimationStartCapture", keyof E> | Exclude<"onAnimationEnd", keyof E> | Exclude<"onAnimationEndCapture", keyof E> | Exclude<"onAnimationIteration", keyof E> | Exclude<"onAnimationIterationCapture", keyof E> | Exclude<"onTransitionEnd", keyof E> | Exclude<"onTransitionEndCapture", keyof E>> & EventProps<E>>> & import("react").RefAttributes<unknown>>;
+export declare const createComponent: <I extends HTMLElement, E extends EventNames = {}>(React: typeof import("react"), tagName: string, elementClass: Constructor<I>, events?: E | undefined, displayName?: string) => ReactWebComponent<I, E>;
 export {};
 //# sourceMappingURL=create-component.d.ts.map

development/create-component.d.ts.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"create-component.d.ts","sourceRoot":"","sources":["../src/create-component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAgFH,aAAK,WAAW,CAAC,CAAC,IAAI;IAAC,QAAQ,CAAC,CAAA;CAAC,CAAC;AAElC;;;GAGG;AACH,oBAAY,SAAS,CAAC,CAAC,SAAS,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG;IACxD,YAAY,EAAE,CAAC,CAAC;CACjB,CAAC;AAEF,aAAK,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;AAEjD,aAAK,UAAU,CAAC,CAAC,SAAS,MAAM,IAAI;KACjC,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,SAAS,GAClC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,IAAI,GACjC,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,yFAEjB,MAAM,sEAGD,MAAM,iqSAkIrB,CAAC"}
+{"version":3,"file":"create-component.d.ts","sourceRoot":"","sources":["../src/create-component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAIH,oBAAY,SAAS,CAAC,CAAC,SAAS,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG;IACxD,YAAY,EAAE,CAAC,CAAC;CACjB,CAAC;AAGF,aAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;AAGrD,aAAK,cAAc,CAAC,CAAC,SAAS,UAAU,IAAI;KACzC,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,SAAS,GAClC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,IAAI,GACjC,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI;CACvB,CAAC;AAEF,aAAK,UAAU,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AAC/D,aAAK,mCAAmC,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CACnD,CAAC,EACD,MAAM,CAAC,GAAG,MAAM,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,CACjC,CAAC;AAIF,aAAK,iBAAiB,CACpB,CAAC,SAAS,WAAW,EACrB,CAAC,SAAS,UAAU,GAAG,EAAE,IACvB,OAAO,CACT,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,GACd,mCAAmC,CAAC,CAAC,EAAE,CAAC,CAAC,GACzC,cAAc,CAAC,CAAC,CAAC,CACpB,CAAC;AAaF,oBAAY,iBAAiB,CAC3B,CAAC,SAAS,WAAW,EACrB,CAAC,SAAS,UAAU,GAAG,EAAE,IACvB,KAAK,CAAC,yBAAyB,CACjC,KAAK,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CACxE,CAAC;AAEF,aAAK,WAAW,CAAC,CAAC,IAAI;IAAC,QAAQ,CAAC,CAAA;CAAC,CAAC;AAgFlC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,6FAKjB,MAAM,sEAGD,MAAM,4BAsHrB,CAAC"}

development/create-component.js

@@ -135,6 +135,7 @@ /**
         render() {
+            var _a;
             // Since refs only get fulfilled once, pass a new one if the user's
             // ref changed. This allows refs to be fulfilled as expected, going from
             // having a value to null.
-            const userRef = this.props.__forwardedRef;
+            const userRef = (_a = this.props.__forwardedRef) !== null && _a !== void 0 ? _a : null;
             if (this._ref === undefined || this._userRef !== userRef) {
@@ -141,0 +142,0 @@ this._ref = (value) => {

development/create-component.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"create-component.js","sourceRoot":"","sources":["../src/create-component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nconst reservedReactProperties = new Set([\n  'children',\n  'localName',\n  'ref',\n  'style',\n  'className',\n]);\n\nconst listenedEvents: WeakMap<\n  Element,\n  Map<string, EventListenerObject>\n> = new WeakMap();\n\n/**\n * Adds an event listener for the specified event to the given node. In the\n * React setup, there should only ever be one event listener. Thus, for\n * efficiency only one listener is added and the handler for that listener is\n * updated to point to the given listener function.\n */\nconst addOrUpdateEventListener = (\n  node: Element,\n  event: string,\n  listener: (event?: Event) => void\n) => {\n  let events = listenedEvents.get(node);\n  if (events === undefined) {\n    listenedEvents.set(node, (events = new Map()));\n  }\n  let handler = events.get(event);\n  if (listener !== undefined) {\n    // If necessary, add listener and track handler\n    if (handler === undefined) {\n      events.set(event, (handler = {handleEvent: listener}));\n      node.addEventListener(event, handler);\n      // Otherwise just update the listener with new value\n    } else {\n      handler.handleEvent = listener;\n    }\n    // Remove listener if one exists and value is undefined\n  } else if (handler !== undefined) {\n    events.delete(event);\n    node.removeEventListener(event, handler);\n  }\n};\n\n/**\n * Sets properties and events on custom elements. These properties and events\n * have been pre-filtered so we know they should apply to the custom element.\n */\nconst setProperty = <E extends Element>(\n  node: E,\n  name: string,\n  value: unknown,\n  old: unknown,\n  events?: Events\n) => {\n  const event = events?.[name];\n  if (event !== undefined) {\n    // Dirty check event value.\n    if (value !== old) {\n      addOrUpdateEventListener(node, event, value as (e?: Event) => void);\n    }\n  } else {\n    // But don't dirty check properties; elements are assumed to do this.\n    node[name as keyof E] = value as E[keyof E];\n  }\n};\n\n// Set a React ref. Note, there are 2 kinds of refs and there's no built in\n// React API to set a ref.\nconst setRef = (ref: React.Ref<unknown>, value: Element | null) => {\n  if (typeof ref === 'function') {\n    (ref as (e: Element | null) => void)(value);\n  } else {\n    (ref as {current: Element | null}).current = value;\n  }\n};\n\ntype Constructor<T> = {new (): T};\n\n/***\n * Typecast that curries an Event type through a string. The goal of the type\n * cast is to match a prop name to a typed event callback.\n */\nexport type EventName<T extends Event = Event> = string & {\n  __event_type: T;\n};\n\ntype Events = Record<string, EventName | string>;\n\ntype EventProps<R extends Events> = {\n  [K in keyof R]: R[K] extends EventName\n    ? (e: R[K]['__event_type']) => void\n    : (e: Event) => void;\n};\n\n/**\n * Creates a React component for a custom element. Properties are distinguished\n * from attributes automatically, and events can be configured so they are\n * added to the custom element as event listeners.\n *\n * @param React The React module, typically imported from the `react` npm\n * package.\n * @param tagName The custom element tag name registered via\n * `customElements.define`.\n * @param elementClass The custom element class registered via\n * `customElements.define`.\n * @param events An object listing events to which the component can listen. The\n * object keys are the event property names passed in via React props and the\n * object values are the names of the corresponding events generated by the\n * custom element. For example, given `{onactivate: 'activate'}` an event\n * function may be passed via the component's `onactivate` prop and will be\n * called when the custom element fires its `activate` event.\n * @param displayName A React component display name, used in debugging\n * messages. Default value is inferred from the name of custom element class\n * registered via `customElements.define`.\n */\nexport const createComponent = <I extends HTMLElement, E extends Events = {}>(\n  React: typeof window.React,\n  tagName: string,\n  elementClass: Constructor<I>,\n  events?: E,\n  displayName?: string\n) => {\n  const Component = React.Component;\n  const createElement = React.createElement;\n  const eventProps = new Set(Object.keys(events ?? {}));\n\n  // Props the user is allowed to use, includes standard attributes, children,\n  // ref, as well as special event and element properties.\n  type ReactProps = Omit<React.HTMLAttributes<I>, keyof E>;\n  type ElementWithoutPropsOrEvents = Omit<I, keyof E | keyof ReactProps>;\n  type UserProps = Partial<\n    ReactProps & ElementWithoutPropsOrEvents & EventProps<E>\n  >;\n\n  // Props used by this component wrapper. This is the UserProps and the\n  // special `__forwardedRef` property. Note, this ref is special because\n  // it's both needed in this component to get access to the rendered element\n  // and must fulfill any ref passed by the user.\n  type ComponentProps = UserProps & {\n    __forwardedRef?: React.Ref<unknown>;\n  };\n\n  class ReactComponent extends Component<ComponentProps> {\n    private _element: I | null = null;\n    private _elementProps!: {[index: string]: unknown};\n    private _userRef?: React.Ref<unknown>;\n    private _ref?: React.RefCallback<I>;\n\n    static displayName = displayName ?? elementClass.name;\n\n    private _updateElement(oldProps?: ComponentProps) {\n      if (this._element === null) {\n        return;\n      }\n      // Set element properties to the values in `this.props`\n      for (const prop in this._elementProps) {\n        setProperty(\n          this._element,\n          prop,\n          this.props[prop as keyof ComponentProps],\n          oldProps ? oldProps[prop as keyof ComponentProps] : undefined,\n          events\n        );\n      }\n      // Note, the spirit of React might be to \"unset\" any old values that\n      // are no longer included; however, there's no reasonable value to set\n      // them to so we just leave the previous state as is.\n    }\n\n    /**\n     * Updates element properties correctly setting properties\n     * on mount.\n     */\n    override componentDidMount() {\n      this._updateElement();\n    }\n\n    /**\n     * Updates element properties correctly setting properties\n     * on every update. Note, this does not include mount.\n     */\n    override componentDidUpdate(old: ComponentProps) {\n      this._updateElement(old);\n    }\n\n    /**\n     * Renders the custom element with a `ref` prop which allows this\n     * component to reference the custom element.\n     *\n     * Standard attributes are passed to React and element properties and events\n     * are updated in componentDidMount/componentDidUpdate.\n     *\n     */\n    override render() {\n      // Since refs only get fulfilled once, pass a new one if the user's\n      // ref changed. This allows refs to be fulfilled as expected, going from\n      // having a value to null.\n      const userRef = this.props.__forwardedRef as React.Ref<unknown>;\n      if (this._ref === undefined || this._userRef !== userRef) {\n        this._ref = (value: I | null) => {\n          if (this._element === null) {\n            this._element = value;\n          }\n          if (userRef !== null) {\n            setRef(userRef, value);\n          }\n          this._userRef = userRef;\n        };\n      }\n      // Filters class properties out and passes the remaining\n      // attributes to React. This allows attributes to use framework rules\n      // for setting attributes and render correctly under SSR.\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const props: any = {ref: this._ref};\n      // Note, save element props while iterating to avoid the need to\n      // iterate again when setting properties.\n      this._elementProps = {};\n      for (const [k, v] of Object.entries(this.props)) {\n        if (k === '__forwardedRef') continue;\n\n        if (\n          eventProps.has(k) ||\n          (!reservedReactProperties.has(k) &&\n            !(k in HTMLElement.prototype) &&\n            k in elementClass.prototype)\n        ) {\n          this._elementProps[k] = v;\n        } else {\n          // React does *not* handle `className` for custom elements so\n          // coerce it to `class` so it's handled correctly.\n          props[k === 'className' ? 'class' : k] = v;\n        }\n      }\n      return createElement(tagName, props);\n    }\n  }\n\n  const ForwardedComponent = React.forwardRef(\n    (props?: UserProps, ref?: React.Ref<unknown>) =>\n      createElement(\n        ReactComponent,\n        {...props, __forwardedRef: ref} as ComponentProps,\n        props?.children\n      )\n  );\n\n  // To ease debugging in the React Developer Tools\n  ForwardedComponent.displayName = ReactComponent.displayName;\n\n  return ForwardedComponent;\n};\n"]}
+{"version":3,"file":"create-component.js","sourceRoot":"","sources":["../src/create-component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n// Match a prop name to a typed event callback by\n// adding an Event type as an expected property on a string.\nexport type EventName<T extends Event = Event> = string & {\n  __event_type: T;\n};\n\n// A key value map matching React prop names to event names\ntype EventNames = Record<string, EventName | string>;\n\n// A map of expected event listener types based on EventNames\ntype EventListeners<R extends EventNames> = {\n  [K in keyof R]: R[K] extends EventName\n    ? (e: R[K]['__event_type']) => void\n    : (e: Event) => void;\n};\n\ntype ReactProps<I, E> = Omit<React.HTMLAttributes<I>, keyof E>;\ntype ElementWithoutPropsOrEventListeners<I, E> = Omit<\n  I,\n  keyof E | keyof ReactProps<I, E>\n>;\n\n// Props the user is allowed to use, includes standard attributes, children,\n// ref, as well as special event and element properties.\ntype WebComponentProps<\n  I extends HTMLElement,\n  E extends EventNames = {}\n> = Partial<\n  ReactProps<I, E> &\n    ElementWithoutPropsOrEventListeners<I, E> &\n    EventListeners<E>\n>;\n\n// Props used by this component wrapper. This is the WebComponentProps and the\n// special `__forwardedRef` property. Note, this ref is special because\n// it's both needed in this component to get access to the rendered element\n// and must fulfill any ref passed by the user.\ntype ReactComponentProps<\n  I extends HTMLElement,\n  E extends EventNames = {}\n> = WebComponentProps<I, E> & {\n  __forwardedRef?: React.Ref<I>;\n};\n\nexport type ReactWebComponent<\n  I extends HTMLElement,\n  E extends EventNames = {}\n> = React.ForwardRefExoticComponent<\n  React.PropsWithoutRef<WebComponentProps<I, E>> & React.RefAttributes<I>\n>;\n\ntype Constructor<T> = {new (): T};\n\nconst reservedReactProperties = new Set([\n  'children',\n  'localName',\n  'ref',\n  'style',\n  'className',\n]);\n\nconst listenedEvents: WeakMap<\n  Element,\n  Map<string, EventListenerObject>\n> = new WeakMap();\n\n/**\n * Adds an event listener for the specified event to the given node. In the\n * React setup, there should only ever be one event listener. Thus, for\n * efficiency only one listener is added and the handler for that listener is\n * updated to point to the given listener function.\n */\nconst addOrUpdateEventListener = (\n  node: Element,\n  event: string,\n  listener: (event?: Event) => void\n) => {\n  let events = listenedEvents.get(node);\n  if (events === undefined) {\n    listenedEvents.set(node, (events = new Map()));\n  }\n  let handler = events.get(event);\n  if (listener !== undefined) {\n    // If necessary, add listener and track handler\n    if (handler === undefined) {\n      events.set(event, (handler = {handleEvent: listener}));\n      node.addEventListener(event, handler);\n      // Otherwise just update the listener with new value\n    } else {\n      handler.handleEvent = listener;\n    }\n    // Remove listener if one exists and value is undefined\n  } else if (handler !== undefined) {\n    events.delete(event);\n    node.removeEventListener(event, handler);\n  }\n};\n\n/**\n * Sets properties and events on custom elements. These properties and events\n * have been pre-filtered so we know they should apply to the custom element.\n */\nconst setProperty = <E extends Element>(\n  node: E,\n  name: string,\n  value: unknown,\n  old: unknown,\n  events?: EventNames\n) => {\n  const event = events?.[name];\n  if (event !== undefined) {\n    // Dirty check event value.\n    if (value !== old) {\n      addOrUpdateEventListener(node, event, value as (e?: Event) => void);\n    }\n  } else {\n    // But don't dirty check properties; elements are assumed to do this.\n    node[name as keyof E] = value as E[keyof E];\n  }\n};\n\n// Set a React ref. Note, there are 2 kinds of refs and there's no built in\n// React API to set a ref.\nconst setRef = (ref: React.Ref<unknown>, value: Element | null) => {\n  if (typeof ref === 'function') {\n    (ref as (e: Element | null) => void)(value);\n  } else {\n    (ref as {current: Element | null}).current = value;\n  }\n};\n\n/**\n * Creates a React component for a custom element. Properties are distinguished\n * from attributes automatically, and events can be configured so they are\n * added to the custom element as event listeners.\n *\n * @param React The React module, typically imported from the `react` npm\n * package.\n * @param tagName The custom element tag name registered via\n * `customElements.define`.\n * @param elementClass The custom element class registered via\n * `customElements.define`.\n * @param events An object listing events to which the component can listen. The\n * object keys are the event property names passed in via React props and the\n * object values are the names of the corresponding events generated by the\n * custom element. For example, given `{onactivate: 'activate'}` an event\n * function may be passed via the component's `onactivate` prop and will be\n * called when the custom element fires its `activate` event.\n * @param displayName A React component display name, used in debugging\n * messages. Default value is inferred from the name of custom element class\n * registered via `customElements.define`.\n */\nexport const createComponent = <\n  I extends HTMLElement,\n  E extends EventNames = {}\n>(\n  React: typeof window.React,\n  tagName: string,\n  elementClass: Constructor<I>,\n  events?: E,\n  displayName?: string\n): ReactWebComponent<I, E> => {\n  const Component = React.Component;\n  const createElement = React.createElement;\n  const eventProps = new Set(Object.keys(events ?? {}));\n\n  type Props = ReactComponentProps<I, E>;\n\n  class ReactComponent extends Component<Props> {\n    private _element: I | null = null;\n    private _elementProps!: {[index: string]: unknown};\n    private _userRef?: React.Ref<I>;\n    private _ref?: React.RefCallback<I>;\n\n    static displayName = displayName ?? elementClass.name;\n\n    private _updateElement(oldProps?: Props) {\n      if (this._element === null) {\n        return;\n      }\n      // Set element properties to the values in `this.props`\n      for (const prop in this._elementProps) {\n        setProperty(\n          this._element,\n          prop,\n          this.props[prop],\n          oldProps ? oldProps[prop] : undefined,\n          events\n        );\n      }\n      // Note, the spirit of React might be to \"unset\" any old values that\n      // are no longer included; however, there's no reasonable value to set\n      // them to so we just leave the previous state as is.\n    }\n\n    /**\n     * Updates element properties correctly setting properties\n     * on mount.\n     */\n    override componentDidMount() {\n      this._updateElement();\n    }\n\n    /**\n     * Updates element properties correctly setting properties\n     * on every update. Note, this does not include mount.\n     */\n    override componentDidUpdate(old: Props) {\n      this._updateElement(old);\n    }\n\n    /**\n     * Renders the custom element with a `ref` prop which allows this\n     * component to reference the custom element.\n     *\n     * Standard attributes are passed to React and element properties and events\n     * are updated in componentDidMount/componentDidUpdate.\n     *\n     */\n    override render() {\n      // Since refs only get fulfilled once, pass a new one if the user's\n      // ref changed. This allows refs to be fulfilled as expected, going from\n      // having a value to null.\n      const userRef = this.props.__forwardedRef ?? null;\n      if (this._ref === undefined || this._userRef !== userRef) {\n        this._ref = (value: I | null) => {\n          if (this._element === null) {\n            this._element = value;\n          }\n          if (userRef !== null) {\n            setRef(userRef, value);\n          }\n          this._userRef = userRef;\n        };\n      }\n      // Filters class properties out and passes the remaining\n      // attributes to React. This allows attributes to use framework rules\n      // for setting attributes and render correctly under SSR.\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const props: any = {ref: this._ref};\n      // Note, save element props while iterating to avoid the need to\n      // iterate again when setting properties.\n      this._elementProps = {};\n      for (const [k, v] of Object.entries(this.props)) {\n        if (k === '__forwardedRef') continue;\n\n        if (\n          eventProps.has(k) ||\n          (!reservedReactProperties.has(k) &&\n            !(k in HTMLElement.prototype) &&\n            k in elementClass.prototype)\n        ) {\n          this._elementProps[k] = v;\n        } else {\n          // React does *not* handle `className` for custom elements so\n          // coerce it to `class` so it's handled correctly.\n          props[k === 'className' ? 'class' : k] = v;\n        }\n      }\n      return createElement<React.HTMLAttributes<I>, I>(tagName, props);\n    }\n  }\n\n  const ForwardedComponent: ReactWebComponent<I, E> = React.forwardRef<\n    I,\n    WebComponentProps<I, E>\n  >((props, ref) =>\n    createElement<Props, ReactComponent, typeof ReactComponent>(\n      ReactComponent,\n      {...props, __forwardedRef: ref},\n      props?.children\n    )\n  );\n\n  // To ease debugging in the React Developer Tools\n  ForwardedComponent.displayName = ReactComponent.displayName;\n\n  return ForwardedComponent;\n};\n"]}

package.json

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

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

83140

-15.61%

Lines of code

503

-11.44%

No dependency changes