@lit-labs/react - npm Package Compare versions

Comparing version 1.1.2-pre.0 to 1.2.0

create-component.d.ts

@@ -7,13 +7,13 @@ /**
 /// <reference types="react" />
-export type EventName<T extends Event = Event> = string & {
+export declare type EventName<T extends Event = Event> = string & {
     __event_type: T;
 };
-type EventNames = Record<string, EventName | string>;
-type EventListeners<R extends EventNames> = {
+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;
 };
-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>>;
+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>>;
 interface Options<I extends HTMLElement, E extends EventNames = {}> {
@@ -26,3 +26,3 @@ tagName: string;
 }
-type Constructor<T> = {
+declare 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=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};
+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)},s=(t,e)=>{"function"==typeof t?t(e):t.current=e};function i(e=window.React,i,o,l,d){let a,c,r;if(void 0===i){const t=e;({tagName:c,elementClass:r,events:l,displayName:d}=t),a=t.react}else a=e,r=o,c=i;const h=a.Component,u=a.createElement,f=new Set(Object.keys(null!=l?l:{}));class v 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(){var t;this.t(),null===(t=this.o)||void 0===t||t.removeAttribute("defer-hydration")}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:f.has(e)||e in r.prototype?this.i[e]=s:i[e]=s;return i.suppressHydrationWarning=!0,u(c,i)}}v.displayName=null!=d?d:r.name;const m=a.forwardRef(((t,e)=>u(v,{...t,_$Gl:e},null==t?void 0:t.children)));return m.displayName=v.displayName,m}export{i as createComponent};
 //# sourceMappingURL=create-component.js.map

development/create-component.d.ts

@@ -7,13 +7,13 @@ /**
 /// <reference types="react" />
-export type EventName<T extends Event = Event> = string & {
+export declare type EventName<T extends Event = Event> = string & {
     __event_type: T;
 };
-type EventNames = Record<string, EventName | string>;
-type EventListeners<R extends EventNames> = {
+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;
 };
-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>>;
+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>>;
 interface Options<I extends HTMLElement, E extends EventNames = {}> {
@@ -26,3 +26,3 @@ tagName: string;
 }
-type Constructor<T> = {
+declare type Constructor<T> = {
     new (): T;
@@ -29,0 +29,0 @@ };

development/create-component.js

@@ -6,2 +6,3 @@ /**
  */
+const NODE_MODE = false;
 const DEV_MODE = true;
@@ -50,3 +51,3 @@ const reservedReactProperties = new Set([
 const setProperty = (node, name, value, old, events) => {
-    const event = events?.[name];
+    const event = events === null || events === void 0 ? void 0 : events[name];
     if (event !== undefined && value !== old) {
@@ -113,3 +114,3 @@ // Dirty check event value.
     const createElement = React.createElement;
-    const eventProps = new Set(Object.keys(events ?? {}));
+    const eventProps = new Set(Object.keys(events !== null && events !== void 0 ? events : {}));
     class ReactComponent extends Component {
@@ -137,3 +138,5 @@ constructor() {
         componentDidMount() {
+            var _a;
             this._updateElement();
+            (_a = this._element) === null || _a === void 0 ? void 0 : _a.removeAttribute('defer-hydration');
         }
@@ -190,7 +193,20 @@ /**
             }
+            // If component is to be server rendered with `@lit-labs/ssr-react` pass
+            // element properties in a special bag to be set by the server-side
+            // element renderer.
+            if (NODE_MODE &&
+                createElement.name === 'litPatchedCreateElement' &&
+                Object.keys(this._elementProps).length) {
+                // This property needs to remain unminified.
+                props['_$litProps$'] = this._elementProps;
+                return createElement(tag, props);
+            }
+            // Suppress hydration warning for server-rendered attributes, including
+            // "defer-hydration"
+            props['suppressHydrationWarning'] = true;
             return createElement(tag, props);
         }
     }
-    ReactComponent.displayName = displayName ?? element.name;
-    const ForwardedComponent = React.forwardRef((props, __forwardedRef) => createElement(ReactComponent, { ...props, __forwardedRef }, props?.children));
+    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));
     // To ease debugging in the React Developer Tools
@@ -197,0 +213,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 type ControllerConstructor<C extends ReactiveController> = {
+export declare type ControllerConstructor<C extends ReactiveController> = {
     new (...args: Array<any>): C;
@@ -11,0 +11,0 @@ };

development/use-controller.js

@@ -28,5 +28,6 @@ /**
     removeController(controller) {
+        var _a;
         // Note, if the indexOf is -1, the >>> will flip the sign which makes the
         // splice do nothing.
-        this._controllers?.splice(this._controllers.indexOf(controller) >>> 0, 1);
+        (_a = this._controllers) === null || _a === void 0 ? void 0 : _a.splice(this._controllers.indexOf(controller) >>> 0, 1);
     }
@@ -46,3 +47,3 @@ requestUpdate() {
         this._isConnected = true;
-        this._controllers.forEach((c) => c.hostConnected?.());
+        this._controllers.forEach((c) => { var _a; return (_a = c.hostConnected) === null || _a === void 0 ? void 0 : _a.call(c); });
     }
@@ -52,7 +53,7 @@ /* @internal */
         this._isConnected = false;
-        this._controllers.forEach((c) => c.hostDisconnected?.());
+        this._controllers.forEach((c) => { var _a; return (_a = c.hostDisconnected) === null || _a === void 0 ? void 0 : _a.call(c); });
     }
     /* @internal */
     _update() {
-        this._controllers.forEach((c) => c.hostUpdate?.());
+        this._controllers.forEach((c) => { var _a; return (_a = c.hostUpdate) === null || _a === void 0 ? void 0 : _a.call(c); });
     }
@@ -68,3 +69,3 @@ /* @internal */
         });
-        this._controllers.forEach((c) => c.hostUpdated?.());
+        this._controllers.forEach((c) => { var _a; return (_a = c.hostUpdated) === null || _a === void 0 ? void 0 : _a.call(c); });
         resolve(this._updatePending);
@@ -71,0 +72,0 @@ }

package.json

 {
   "name": "@lit-labs/react",
-  "version": "1.1.2-pre.0",
+  "version": "1.2.0",
   "description": "A React component wrapper for web components.",
@@ -22,2 +22,6 @@ "license": "BSD-3-Clause",
       "types": "./development/index.d.ts",
+      "node": {
+        "development": "./node/development/index.js",
+        "default": "./node/index.js"
+      },
       "development": "./development/index.js",
@@ -28,2 +32,6 @@ "default": "./index.js"
       "types": "./development/use-controller.d.ts",
+      "node": {
+        "development": "./node/development/use-controller.js",
+        "default": "./node/use-controller.js"
+      },
       "development": "./development/use-controller.js",
@@ -36,2 +44,3 @@ "default": "./use-controller.js"
     "!/development/test/",
+    "/node/",
     "/index.{d.ts,d.ts.map,js,js.map}",
@@ -49,2 +58,3 @@ "/create-component.{d.ts,d.ts.map,js,js.map}",
     "test:prod": "wireit",
+    "test:node": "wireit",
     "checksize": "wireit"
@@ -101,3 +111,4 @@ },
         "use-controller.js{,.map}",
-        "test/**/*.js{,.map}"
+        "test/**/*.js{,.map}",
+        "node/**/*.js{,.map}"
       ]
@@ -119,7 +130,8 @@ },
         "test:dev",
-        "test:prod"
+        "test:prod",
+        "test:node"
       ]
     },
     "test:dev": {
-      "command": "MODE=dev node ../../tests/run-web-tests.js \"development/**/*_test.js\" --config ../../tests/web-test-runner.config.js",
+      "command": "node ../../tests/run-web-tests.js \"development/**/*_test.js\" --config ../../tests/web-test-runner.config.js",
       "dependencies": [
@@ -133,3 +145,4 @@ "build:ts",
           "external": true
-        }
+        },
+        "MODE": "dev"
       },
@@ -140,6 +153,7 @@ "files": [],
     "test:prod": {
-      "command": "MODE=prod node ../../tests/run-web-tests.js \"development/**/*_test.js\" --config ../../tests/web-test-runner.config.js",
+      "command": "node ../../tests/run-web-tests.js \"development/**/*_test.js\" --config ../../tests/web-test-runner.config.js",
       "dependencies": [
         "build:ts",
         "build:rollup",
+        "../../reactive-element:build",
         "../../tests:build"
@@ -150,6 +164,17 @@ ],
           "external": true
-        }
+        },
+        "MODE": "prod"
       },
       "files": [],
       "output": []
+    },
+    "test:node": {
+      "command": "node development/test/node-render.js",
+      "dependencies": [
+        "build:ts",
+        "build:rollup",
+        "../../reactive-element:build"
+      ],
+      "files": [],
+      "output": []
     }
@@ -159,7 +184,7 @@ },
   "devDependencies": {
-    "@lit/reactive-element": "^2.0.0-pre.0",
+    "@lit/reactive-element": "^1.5.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/trusted-types": "^2.0.2",
-    "@lit-internal/scripts": "^1.0.1-pre.0",
+    "@lit-internal/scripts": "^1.0.0",
     "react": "^17.0.1",
@@ -166,0 +191,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 type ControllerConstructor<C extends ReactiveController> = {
+export declare 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.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};
+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.O=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}M(){this._=!0,this.v.forEach((t=>{var s;return null===(s=t.hostConnected)||void 0===s?void 0:s.call(t)}))}N(){this._=!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)}))}R(){this.p=!1;const t=this.O;this.j=new Promise(((t,s)=>{this.O=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.L=r,i.M(),u=!0,t.then((()=>{u&&i.N()})),i}));return d.p=!0,o((()=>(u=!1,d._||d.M(),()=>d.N())),[]),o((()=>d.R())),d.P(),d.L};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

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

Improved metrics

Total package byte prevSize

173028

increased by80.96%

Number of package files

39

increased by44.44%

Lines of code

985

increased by69.24%

Number of low quality alerts

0

decreased by-100%

No dependency changes