@lit-labs/react - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2-pre.0

create-component.d.ts

@@ -7,13 +7,13 @@ /**
 /// <reference types="react" />
-export declare type EventName<T extends Event = Event> = string & {
+export type EventName<T extends Event = Event> = string & {
     __event_type: T;
 };
-declare type EventNames = Record<string, EventName | string>;
-declare type EventListeners<R extends EventNames> = {
+type EventNames = Record<string, EventName | string>;
+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>>;
-export 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>>;
+type ReactProps<I, E> = Omit<React.HTMLAttributes<I>, keyof E>;
+type ElementWithoutPropsOrEventListeners<I, E> = Omit<I, keyof E | keyof ReactProps<I, E>>;
+export type WebComponentProps<I extends HTMLElement, E extends EventNames = {}> = Partial<ReactProps<I, E> & ElementWithoutPropsOrEventListeners<I, E> & EventListeners<E>>;
+export type ReactWebComponent<I extends HTMLElement, E extends EventNames = {}> = React.ForwardRefExoticComponent<React.PropsWithoutRef<WebComponentProps<I, E>> & React.RefAttributes<I>>;
 interface Options<I extends HTMLElement, E extends EventNames = {}> {
@@ -26,3 +26,3 @@ tagName: string;
 }
-declare type Constructor<T> = {
+type Constructor<T> = {
     new (): T;
@@ -29,0 +29,0 @@ };

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?null==s&&n in HTMLElement.prototype?t.removeAttribute(n):t[n]=s:((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)};function s(e=window.React,s,i,o,l){let d,c,a;if(void 0===s){const t=e;({tagName:c,elementClass:a,events:o,displayName:l}=t),d=t.react}else d=e,a=i,c=s;const r=d.Component,h=d.createElement,u=new Set(Object.keys(null!=o?o:{}));class f extends r{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{_$Gl:e,...n}=this.props;this.h!==e&&(this.u=t=>{null!==e&&((t,e)=>{"function"==typeof t?t(e):t.current=e})(e,t),this.o=t,this.h=e}),this.i={};const s={ref:this.u};for(const[e,i]of Object.entries(n))t.has(e)?s["className"===e?"class":e]=i:u.has(e)||e in a.prototype?this.i[e]=i:s[e]=i;return h(c,s)}}f.displayName=null!=l?l:a.name;const v=d.forwardRef(((t,e)=>h(f,{...t,_$Gl:e},null==t?void 0:t.children)));return v.displayName=f.displayName,v}export{s as createComponent};
+const t=new Set(["children","localName","ref","style","className"]),e=new WeakMap,n=(t,n,s,i,o)=>{const l=o?.[n];void 0===l||s===i?null==s&&n in HTMLElement.prototype?t.removeAttribute(n):t[n]=s:((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)},s=(t,e)=>{"function"==typeof t?t(e):t.current=e};function i(e=window.React,i,o,l,c){let d,a,r;if(void 0===i){const t=e;({tagName:a,elementClass:r,events:l,displayName:c}=t),d=t.react}else d=e,r=o,a=i;const h=d.Component,f=d.createElement,u=new Set(Object.keys(l??{}));class m extends h{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,l)}componentDidMount(){this.t()}componentDidUpdate(t){this.t(t)}render(){const{_$Gl:e,...n}=this.props;this.h!==e&&(this.u=t=>{null!==e&&s(e,t),this.o=t,this.h=e}),this.i={};const i={ref:this.u};for(const[e,s]of Object.entries(n))t.has(e)?i["className"===e?"class":e]=s:u.has(e)||e in r.prototype?this.i[e]=s:i[e]=s;return f(a,i)}}m.displayName=c??r.name;const p=d.forwardRef(((t,e)=>f(m,{...t,_$Gl:e},t?.children)));return p.displayName=m.displayName,p}export{i as createComponent};
 //# sourceMappingURL=create-component.js.map

development/create-component.d.ts

@@ -7,13 +7,13 @@ /**
 /// <reference types="react" />
-export declare type EventName<T extends Event = Event> = string & {
+export type EventName<T extends Event = Event> = string & {
     __event_type: T;
 };
-declare type EventNames = Record<string, EventName | string>;
-declare type EventListeners<R extends EventNames> = {
+type EventNames = Record<string, EventName | string>;
+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>>;
-export 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>>;
+type ReactProps<I, E> = Omit<React.HTMLAttributes<I>, keyof E>;
+type ElementWithoutPropsOrEventListeners<I, E> = Omit<I, keyof E | keyof ReactProps<I, E>>;
+export type WebComponentProps<I extends HTMLElement, E extends EventNames = {}> = Partial<ReactProps<I, E> & ElementWithoutPropsOrEventListeners<I, E> & EventListeners<E>>;
+export type ReactWebComponent<I extends HTMLElement, E extends EventNames = {}> = React.ForwardRefExoticComponent<React.PropsWithoutRef<WebComponentProps<I, E>> & React.RefAttributes<I>>;
 interface Options<I extends HTMLElement, E extends EventNames = {}> {
@@ -26,3 +26,3 @@ tagName: string;
 }
-declare type Constructor<T> = {
+type Constructor<T> = {
     new (): T;
@@ -29,0 +29,0 @@ };

development/create-component.js

@@ -49,3 +49,3 @@ /**
 const setProperty = (node, name, value, old, events) => {
-    const event = events === null || events === void 0 ? void 0 : events[name];
+    const event = events?.[name];
     if (event !== undefined && value !== old) {
@@ -112,3 +112,3 @@ // Dirty check event value.
     const createElement = React.createElement;
-    const eventProps = new Set(Object.keys(events !== null && events !== void 0 ? events : {}));
+    const eventProps = new Set(Object.keys(events ?? {}));
     class ReactComponent extends Component {
@@ -191,4 +191,4 @@ constructor() {
     }
-    ReactComponent.displayName = displayName !== null && displayName !== void 0 ? displayName : element.name;
-    const ForwardedComponent = React.forwardRef((props, __forwardedRef) => createElement(ReactComponent, { ...props, __forwardedRef }, props === null || props === void 0 ? void 0 : props.children));
+    ReactComponent.displayName = displayName ?? element.name;
+    const ForwardedComponent = React.forwardRef((props, __forwardedRef) => createElement(ReactComponent, { ...props, __forwardedRef }, props?.children));
     // To ease debugging in the React Developer Tools
@@ -195,0 +195,0 @@ ForwardedComponent.displayName = ReactComponent.displayName;

development/use-controller.d.ts

@@ -8,3 +8,3 @@ /**
 import { ReactiveController, ReactiveControllerHost } from '@lit/reactive-element/reactive-controller.js';
-export declare type ControllerConstructor<C extends ReactiveController> = {
+export type ControllerConstructor<C extends ReactiveController> = {
     new (...args: Array<any>): C;
@@ -11,0 +11,0 @@ };

development/use-controller.js

@@ -28,6 +28,5 @@ /**
     removeController(controller) {
-        var _a;
         // Note, if the indexOf is -1, the >>> will flip the sign which makes the
         // splice do nothing.
-        (_a = this._controllers) === null || _a === void 0 ? void 0 : _a.splice(this._controllers.indexOf(controller) >>> 0, 1);
+        this._controllers?.splice(this._controllers.indexOf(controller) >>> 0, 1);
     }
@@ -47,3 +46,3 @@ requestUpdate() {
         this._isConnected = true;
-        this._controllers.forEach((c) => { var _a; return (_a = c.hostConnected) === null || _a === void 0 ? void 0 : _a.call(c); });
+        this._controllers.forEach((c) => c.hostConnected?.());
     }
@@ -53,7 +52,7 @@ /* @internal */
         this._isConnected = false;
-        this._controllers.forEach((c) => { var _a; return (_a = c.hostDisconnected) === null || _a === void 0 ? void 0 : _a.call(c); });
+        this._controllers.forEach((c) => c.hostDisconnected?.());
     }
     /* @internal */
     _update() {
-        this._controllers.forEach((c) => { var _a; return (_a = c.hostUpdate) === null || _a === void 0 ? void 0 : _a.call(c); });
+        this._controllers.forEach((c) => c.hostUpdate?.());
     }
@@ -69,3 +68,3 @@ /* @internal */
         });
-        this._controllers.forEach((c) => { var _a; return (_a = c.hostUpdated) === null || _a === void 0 ? void 0 : _a.call(c); });
+        this._controllers.forEach((c) => c.hostUpdated?.());
         resolve(this._updatePending);
@@ -95,3 +94,3 @@ }
     // issues such as "shearing" with React concurrent mode. The solution there
-    // will likely be to shapshot the controller state with something like
+    // will likely be to snapshot the controller state with something like
     // `useMutableSource`:
@@ -98,0 +97,0 @@ // https://github.com/reactjs/rfcs/blob/master/text/0147-use-mutable-source.md

package.json

 {
   "name": "@lit-labs/react",
-  "version": "1.1.1",
+  "version": "1.1.2-pre.0",
   "description": "A React component wrapper for web components.",
@@ -124,2 +124,7 @@ "license": "BSD-3-Clause",
       ],
+      "env": {
+        "BROWSERS": {
+          "external": true
+        }
+      },
       "files": [],
@@ -135,2 +140,7 @@ "output": []
       ],
+      "env": {
+        "BROWSERS": {
+          "external": true
+        }
+      },
       "files": [],
@@ -142,7 +152,7 @@ "output": []
   "devDependencies": {
-    "@lit/reactive-element": "^1.5.0",
+    "@lit/reactive-element": "^2.0.0-pre.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/trusted-types": "^2.0.2",
-    "@lit-internal/scripts": "^1.0.0",
+    "@lit-internal/scripts": "^1.0.1-pre.0",
     "react": "^17.0.1",
@@ -149,0 +159,0 @@ "react-dom": "^17.0.1"

use-controller.d.ts

@@ -8,3 +8,3 @@ /**
 import { ReactiveController, ReactiveControllerHost } from '@lit/reactive-element/reactive-controller.js';
-export declare type ControllerConstructor<C extends ReactiveController> = {
+export type ControllerConstructor<C extends ReactiveController> = {
     new (...args: Array<any>): C;
@@ -11,0 +11,0 @@ };

use-controller.js

@@ -6,3 +6,3 @@ /**
  */
-const t=Promise.resolve();class s{constructor(t,s){this.v=[],this.p=!0,this._=!1,this.m=t,this.C=s,this.j=new Promise(((t,s)=>{this.M=t}))}addController(t){this.v.push(t)}removeController(t){var s;null===(s=this.v)||void 0===s||s.splice(this.v.indexOf(t)>>>0,1)}requestUpdate(){this.p||(this.p=!0,t.then((()=>this.C(++this.m))))}get updateComplete(){return this.j}N(){this._=!0,this.v.forEach((t=>{var s;return null===(s=t.hostConnected)||void 0===s?void 0:s.call(t)}))}O(){this._=!1,this.v.forEach((t=>{var s;return null===(s=t.hostDisconnected)||void 0===s?void 0:s.call(t)}))}R(){this.v.forEach((t=>{var s;return null===(s=t.hostUpdate)||void 0===s?void 0:s.call(t)}))}L(){this.p=!1;const t=this.M;this.j=new Promise(((t,s)=>{this.M=t})),this.v.forEach((t=>{var s;return null===(s=t.hostUpdated)||void 0===s?void 0:s.call(t)})),t(this.p)}}const i=(i,e)=>{const{useState:r,useLayoutEffect:o}=i,[n,h]=r(0);let u=!1;const[d]=r((()=>{const i=new s(n,h),r=e(i);return i.P=r,i.N(),u=!0,t.then((()=>{u&&i.O()})),i}));return d.p=!0,o((()=>(u=!1,d._||d.N(),()=>d.O())),[]),o((()=>d.L())),d.R(),d.P};export{i as useController};
+const t=Promise.resolve();class s{constructor(t,s){this.p=[],this._=!0,this.m=!1,this.v=t,this.C=s,this.j=new Promise(((t,s)=>{this.M=t}))}addController(t){this.p.push(t)}removeController(t){this.p?.splice(this.p.indexOf(t)>>>0,1)}requestUpdate(){this._||(this._=!0,t.then((()=>this.C(++this.v))))}get updateComplete(){return this.j}N(){this.m=!0,this.p.forEach((t=>t.hostConnected?.()))}O(){this.m=!1,this.p.forEach((t=>t.hostDisconnected?.()))}R(){this.p.forEach((t=>t.hostUpdate?.()))}L(){this._=!1;const t=this.M;this.j=new Promise(((t,s)=>{this.M=t})),this.p.forEach((t=>t.hostUpdated?.())),t(this._)}}const e=(e,i)=>{const{useState:h,useLayoutEffect:o}=e,[n,r]=h(0);let c=!1;const[u]=h((()=>{const e=new s(n,r),h=i(e);return e.P=h,e.N(),c=!0,t.then((()=>{c&&e.O()})),e}));return u._=!0,o((()=>(c=!1,u.m||u.N(),()=>u.O())),[]),o((()=>u.L())),u.R(),u.P};export{e as useController};
 //# sourceMappingURL=use-controller.js.map

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Worsened metrics

Total package byte prevSize

95616

decreased by-1%

Lines of code

582

decreased by-0.34%

Number of low quality alerts

1

increased byInfinity%

No dependency changes