@lit-labs/react - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

development/use-controller.js

@@ -16,2 +16,4 @@ /**
         this._updatePending = true;
+        /* @internal */
+        this._isConnected = false;
         this._kickCount = kickCount;
@@ -44,2 +46,3 @@ this._kick = kick;
     _connected() {
+        this._isConnected = true;
         this._controllers.forEach((c) => { var _a; return (_a = c.hostConnected) === null || _a === void 0 ? void 0 : _a.call(c); });
@@ -49,2 +52,3 @@ }
     _disconnected() {
+        this._isConnected = false;
         this._controllers.forEach((c) => { var _a; return (_a = c.hostDisconnected) === null || _a === void 0 ? void 0 : _a.call(c); });
@@ -94,2 +98,3 @@ }
     // We can address this when React's concurrent mode is closer to shipping.
+    let shouldDisconnect = false;
     const [host] = useState(() => {
@@ -99,13 +104,46 @@ const host = new ReactControllerHost(kickCount, kick);
         host._primaryController = controller;
+        // Note, calls to `useState` are expected to produce no side effects and in
+        // StrictMode this is enforced by not running effects for the first render.
+        //
+        // This happens in StrictMode:
+        // 1. Throw away render: component function runs but does not call effects
+        // 2. Real render: component function runs and *does* call effects,
+        // 2.a. if first render, run effects and
+        // 2.a.1 mount,
+        // 2.a.2 unmount,
+        // 2.a.3 remount
+        // 2b. if not first render, just run effects
+        //
+        // To preserve update lifecycle ordering and run it before this hook
+        // returns, run connected here but schedule and async disconnect (handles
+        // lifecycle balance for `(1) Throw away render`).
+        // The disconnect is cancelled if the effects actually run (handles
+        // `(2.a.1) Real render, mount`).
         host._connected();
+        shouldDisconnect = true;
+        microtask.then(() => {
+            if (shouldDisconnect) {
+                host._disconnected();
+            }
+        });
         return host;
     });
     host._updatePending = true;
+    // This effect runs only on mount/unmount of the component (via the empty
+    // deps array). If the controller has just been created, it's scheduled
+    // a disconnect so that it behaves correctly in StrictMode (see above).
+    // The returned callback here disconnects the host when the component is
+    // unmounted (handles `(2.a.2) Real render, unmount` above).
+    // And finally, if the component is disconnected when the effect runs, we
+    // connect it (handles `(2.a.3) Real render, remount`).
+    useLayoutEffect(() => {
+        shouldDisconnect = false;
+        if (!host._isConnected) {
+            host._connected();
+        }
+        return () => host._disconnected();
+    }, []);
     // We use useLayoutEffect because we need updated() called synchronously
     // after rendering.
     useLayoutEffect(() => host._updated());
-    // Returning a cleanup function simulates hostDisconnected timing. An empty
-    // deps array tells React to only call this once: on mount with the cleanup
-    // called on unmount.
-    useLayoutEffect(() => () => host._disconnected(), []);
     // TODO (justinfagnani): don't call in SSR
@@ -112,0 +150,0 @@ host._update();

package.json

 {
   "name": "@lit-labs/react",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A React component wrapper for web components.",
@@ -23,2 +23,6 @@ "license": "BSD-3-Clause",
       "default": "./index.js"
+    },
+    "./use-controller.js": {
+      "development": "./development/use-controller.js",
+      "default": "./use-controller.js"
     }
@@ -34,15 +38,101 @@ },
   "scripts": {
-    "build": "npm run clean && npm run build:ts --build && rollup -c",
-    "build:watch": "rollup -c --watch",
-    "build:ts": "tsc --build && treemirror development . '**/*.d.ts{,.map}'",
-    "build:ts:watch": "tsc --build --watch",
-    "clean": "rm -rf {index,create-component,use-controller}.{js,js.map,d.ts} development/ test/ *.tsbuildinfo",
-    "dev": "scripts/dev.sh",
-    "test": "npm run test:dev && npm run test:prod",
-    "test:dev": "cd ../../tests && npx wtr '../labs/react/development/**/*_test.js'",
-    "test:prod": "TEST_PROD_BUILD=true npm run test:dev",
-    "test:watch": "npm run test:dev -- --watch",
-    "checksize": "rollup -c --environment=CHECKSIZE",
-    "regen-package-lock": "rm -rf node_modules package-lock.json; npm install"
+    "build": "wireit",
+    "build:ts": "wireit",
+    "build:ts:types": "wireit",
+    "build:rollup": "wireit",
+    "test": "wireit",
+    "test:dev": "wireit",
+    "test:prod": "wireit",
+    "checksize": "wireit"
   },
+  "wireit": {
+    "build": {
+      "dependencies": [
+        "build:rollup",
+        "build:ts",
+        "build:ts:types"
+      ]
+    },
+    "build:ts": {
+      "command": "tsc --build --pretty",
+      "dependencies": [
+        "../../reactive-element:build:ts:types"
+      ],
+      "clean": "if-file-deleted",
+      "files": [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "tsconfig.json"
+      ],
+      "output": [
+        "development",
+        "tsconfig.tsbuildinfo"
+      ]
+    },
+    "build:ts:types": {
+      "command": "treemirror development . \"**/*.d.ts{,.map}\"",
+      "dependencies": [
+        "../../internal-scripts:build",
+        "build:ts"
+      ],
+      "files": [],
+      "output": [
+        "*.d.ts{,.map}",
+        "test/**/*.d.ts{,.map}"
+      ]
+    },
+    "build:rollup": {
+      "command": "rollup -c",
+      "dependencies": [
+        "build:ts"
+      ],
+      "files": [
+        "rollup.config.js",
+        "../../../rollup-common.js"
+      ],
+      "output": [
+        "create-component.js{,.map}",
+        "index.js{,.map}",
+        "use-controller.js{,.map}",
+        "test/**/*.js{,.map}"
+      ]
+    },
+    "checksize": {
+      "command": "rollup -c --environment=CHECKSIZE",
+      "dependencies": [
+        "build:ts"
+      ],
+      "files": [
+        "rollup.config.js",
+        "../../../rollup-common.js"
+      ],
+      "output": []
+    },
+    "test": {
+      "dependencies": [
+        "test:dev",
+        "test:prod"
+      ]
+    },
+    "test:dev": {
+      "command": "MODE=dev node ../../tests/run-web-tests.js \"development/**/*_test.js\" --config ../../tests/web-test-runner.config.js",
+      "dependencies": [
+        "build:ts",
+        "../../reactive-element:build",
+        "../../tests:build"
+      ],
+      "files": [],
+      "output": []
+    },
+    "test:prod": {
+      "command": "MODE=prod node ../../tests/run-web-tests.js \"development/**/*_test.js\" --config ../../tests/web-test-runner.config.js",
+      "dependencies": [
+        "build:ts",
+        "build:rollup",
+        "../../tests:build"
+      ],
+      "files": [],
+      "output": []
+    }
+  },
   "author": "Google LLC",
@@ -60,7 +150,7 @@ "devDependencies": {
     "concurrently": "^6.2.1",
-    "internal-scripts": "^1.0.0",
+    "@lit-internal/scripts": "^1.0.0",
     "mocha": "^9.1.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "rollup": "^2.28.2",
+    "rollup": "^2.70.2",
     "typescript": "^4.3.5"
@@ -67,0 +157,0 @@ },

use-controller.js

@@ -6,3 +6,3 @@ /**
  */
-const t=Promise.resolve();class s{constructor(t,s){this.t=[],this.i=!0,this.o=t,this.h=s,this.u=new Promise(((t,s)=>{this.l=t}))}addController(t){this.t.push(t)}removeController(t){var s;null===(s=this.t)||void 0===s||s.splice(this.t.indexOf(t)>>>0,1)}requestUpdate(){this.i||(this.i=!0,t.then((()=>this.h(++this.o))))}get updateComplete(){return this.u}v(){this.t.forEach((t=>{var s;return null===(s=t.hostConnected)||void 0===s?void 0:s.call(t)}))}p(){this.t.forEach((t=>{var s;return null===(s=t.hostDisconnected)||void 0===s?void 0:s.call(t)}))}m(){this.t.forEach((t=>{var s;return null===(s=t.hostUpdate)||void 0===s?void 0:s.call(t)}))}_(){this.i=!1;const t=this.l;this.u=new Promise(((t,s)=>{this.l=t})),this.t.forEach((t=>{var s;return null===(s=t.hostUpdated)||void 0===s?void 0:s.call(t)})),t(this.i)}}const i=(t,i)=>{const{useState:e,useLayoutEffect:r}=t,[o,n]=e(0),[h]=e((()=>{const t=new s(o,n),e=i(t);return t.C=e,t.v(),t}));return h.i=!0,r((()=>h._())),r((()=>()=>h.p()),[]),h.m(),h.C};export{i as useController};
+const t=Promise.resolve();class s{constructor(t,s){this.t=[],this.i=!0,this.o=!1,this.h=t,this.u=s,this.l=new Promise(((t,s)=>{this.v=t}))}addController(t){this.t.push(t)}removeController(t){var s;null===(s=this.t)||void 0===s||s.splice(this.t.indexOf(t)>>>0,1)}requestUpdate(){this.i||(this.i=!0,t.then((()=>this.u(++this.h))))}get updateComplete(){return this.l}p(){this.o=!0,this.t.forEach((t=>{var s;return null===(s=t.hostConnected)||void 0===s?void 0:s.call(t)}))}m(){this.o=!1,this.t.forEach((t=>{var s;return null===(s=t.hostDisconnected)||void 0===s?void 0:s.call(t)}))}_(){this.t.forEach((t=>{var s;return null===(s=t.hostUpdate)||void 0===s?void 0:s.call(t)}))}C(){this.i=!1;const t=this.v;this.l=new Promise(((t,s)=>{this.v=t})),this.t.forEach((t=>{var s;return null===(s=t.hostUpdated)||void 0===s?void 0:s.call(t)})),t(this.i)}}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.p(),u=!0,t.then((()=>{u&&i.m()})),i}));return d.i=!0,o((()=>(u=!1,d.o||d.p(),()=>d.m())),[]),o((()=>d.C())),d._(),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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84129

increased by10.13%

Lines of code

525

increased by8.02%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes