@lit-labs/react - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

create-component.js

@@ -6,3 +6,3 @@ /**
  */
-const t=new Set(["children","localName","ref","style","className"]),e=new WeakMap,n=(t,n,s,i,l)=>{const o=null==l?void 0:l[n];void 0===o||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 l=i.get(n);void 0!==s?void 0===l?(i.set(n,l={handleEvent:s}),t.addEventListener(n,l)):l.handleEvent=s:void 0!==l&&(i.delete(n),t.removeEventListener(n,l))})(t,o,s)};function s(e=window.React,s,i,l,o){let d,c,a;if(void 0===s){const t=e;({tagName:c,elementClass:a,events:l,displayName:o}=t),d=t.react}else d=e,a=i,c=s;const h=d.Component,r=d.createElement,u=new Set(Object.keys(null!=l?l:{}));class f 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(){var e;const n=null!==(e=this.props._$Gl)&&void 0!==e?e:null;void 0!==this.h&&this.u===n||(this.h=t=>{null===this.o&&(this.o=t),null!==n&&((t,e)=>{"function"==typeof t?t(e):t.current=e})(n,t),this.u=n});const s={ref:this.h};this.i={};for(const[e,n]of Object.entries(this.props))"__forwardedRef"!==e&&(t.has(e)?s["className"===e?"class":e]=n:u.has(e)||e in a.prototype?this.i[e]=n:s[e]=n);return r(c,s)}}f.displayName=null!=o?o:a.name;const v=d.forwardRef(((t,e)=>r(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=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};
 //# sourceMappingURL=create-component.js.map

development/create-component.js

@@ -6,2 +6,3 @@ /**
  */
+const DEV_MODE = true;
 const reservedReactProperties = new Set([
@@ -94,2 +95,17 @@ 'children',
     }
+    // Warn users when web components use reserved React properties
+    if (DEV_MODE) {
+        for (const p of reservedReactProperties) {
+            if (p in element.prototype && !(p in HTMLElement.prototype)) {
+                // Note, this effectively warns only for `ref` since the other
+                // reserved props are on HTMLElement.prototype. To address this
+                // would require crawling down the prototype, which doesn't feel worth
+                // it since implementing these properties on an element is extremely
+                // rare.
+                console.warn(`${tagName} contains property ${p} which is a React
+reserved property. It will be used by React and not set on
+the element.`);
+            }
+        }
+    }
     const Component = React.Component;
@@ -138,29 +154,24 @@ const createElement = React.createElement;
         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
+            // Extract and remove __forwardedRef from userProps in a rename-safe way
+            const { __forwardedRef, ...userProps } = this.props;
+            // 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 = (_a = this.props.__forwardedRef) !== null && _a !== void 0 ? _a : null;
-            if (this._ref === undefined || this._userRef !== userRef) {
+            if (this._forwardedRef !== __forwardedRef) {
                 this._ref = (value) => {
-                    if (this._element === null) {
-                        this._element = value;
+                    if (__forwardedRef !== null) {
+                        setRef(__forwardedRef, value);
                     }
-                    if (userRef !== null) {
-                        setRef(userRef, value);
-                    }
-                    this._userRef = userRef;
+                    this._element = value;
+                    this._forwardedRef = __forwardedRef;
                 };
             }
-            // Filters class properties out and passes the remaining
-            // attributes to React. This allows attributes to use framework rules
-            // for setting attributes and render correctly under SSR.
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            // Save element props while iterating to avoid the need to iterate again
+            // when setting properties.
+            this._elementProps = {};
             const props = { ref: this._ref };
-            // Note, save element props while iterating to avoid the need to
-            // iterate again when setting properties.
-            this._elementProps = {};
-            for (const [k, v] of Object.entries(this.props)) {
-                if (k === '__forwardedRef')
-                    continue;
+            // Filters class properties and event properties out and passes the
+            // remaining attributes to React. This allows attributes to use framework
+            // rules for setting attributes and render correctly under SSR.
+            for (const [k, v] of Object.entries(userProps)) {
                 if (reservedReactProperties.has(k)) {
@@ -182,3 +193,3 @@ // React does *not* handle `className` for custom elements so
     ReactComponent.displayName = displayName !== null && displayName !== void 0 ? displayName : element.name;
-    const ForwardedComponent = React.forwardRef((props, ref) => createElement(ReactComponent, { ...props, __forwardedRef: ref }, props === null || props === void 0 ? void 0 : props.children));
+    const ForwardedComponent = React.forwardRef((props, __forwardedRef) => createElement(ReactComponent, { ...props, __forwardedRef }, props === null || props === void 0 ? void 0 : props.children));
     // To ease debugging in the React Developer Tools
@@ -185,0 +196,0 @@ ForwardedComponent.displayName = ReactComponent.displayName;

package.json

 {
   "name": "@lit-labs/react",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A React component wrapper for web components.",
@@ -140,3 +140,3 @@ "license": "BSD-3-Clause",
   "devDependencies": {
-    "@lit/reactive-element": "^1.4.0",
+    "@lit/reactive-element": "^1.5.0",
     "@types/react": "^17.0.0",
@@ -143,0 +143,0 @@ "@types/react-dom": "^17.0.0",

use-controller.js

@@ -6,3 +6,3 @@ /**
  */
-const t=Promise.resolve();class s{constructor(t,s){this.v=[],this._=!0,this.p=!1,this.m=t,this.C=s,this.j=new Promise(((t,s)=>{this.N=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._||(this._=!0,t.then((()=>this.C(++this.m))))}get updateComplete(){return this.j}O(){this.p=!0,this.v.forEach((t=>{var s;return null===(s=t.hostConnected)||void 0===s?void 0:s.call(t)}))}M(){this.p=!1,this.v.forEach((t=>{var s;return null===(s=t.hostDisconnected)||void 0===s?void 0:s.call(t)}))}P(){this.v.forEach((t=>{var s;return null===(s=t.hostUpdate)||void 0===s?void 0:s.call(t)}))}S(){this._=!1;const t=this.N;this.j=new Promise(((t,s)=>{this.N=t})),this.v.forEach((t=>{var s;return null===(s=t.hostUpdated)||void 0===s?void 0:s.call(t)})),t(this._)}}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.g=r,i.O(),u=!0,t.then((()=>{u&&i.M()})),i}));return d._=!0,o((()=>(u=!1,d.p||d.O(),()=>d.M())),[]),o((()=>d.S())),d.P(),d.g};export{i as useController};
+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};
 //# 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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

96579

increased by2.04%

Lines of code

584

increased by1.92%

No dependency changes