fix(engine): homogenous nodejs engine declaration

rochejul · Aug 14, 2024 · 682cdbc · 682cdbc
1 parent d0e68e1
commit 682cdbc
Show file tree

Hide file tree

Showing 14 changed files with 77 additions and 29 deletions.
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -5,27 +5,26 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
   pull_request:
-    branches: [ "main" ]
+    branches: ['main']
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [20.15.0]
+        node-version: [18.x, 20.x, 22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v4
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm ci
-    - run: npm run build --if-present
-    - run: npm test
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm test
diff --git a/.github/workflows/quality.yaml b/.github/workflows/quality.yaml
@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.15.0]
+        node-version: [18.x, 20.x, 22.x]
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}

diff --git a/demos/typescript/package.json b/demos/typescript/package.json
@@ -17,7 +17,7 @@
   },
   "license": "MIT",
   "engines": {
-    "node": "20.15.0"
+    "node": "^16.10.0 || ^18.12.0 || >=20.0.0"
   },
   "volta": {
     "node": "20.15.0",

diff --git a/demos/vanilla/package.json b/demos/vanilla/package.json
@@ -16,7 +16,7 @@
   },
   "license": "MIT",
   "engines": {
-    "node": "20.15.0"
+    "node": "^16.10.0 || ^18.12.0 || >=20.0.0"
   },
   "volta": {
     "node": "20.15.0",

diff --git a/packages/browser/build/bundle.amd.js b/packages/browser/build/bundle.amd.js
@@ -152,7 +152,7 @@ define((function () { 'use strict';
     }
 
     has(key) {
-      const hash = key?.toString() ?? key;
+      const hash = key.toString();
       return this.getKeys().find((entry) => entry.toString() === hash);
     }
 
@@ -553,9 +553,10 @@ define((function () { 'use strict';
   function enableClosedShadowRoot(context) {
     const attachShadow = context.HTMLElement.prototype.attachShadow;
     context.HTMLElement.prototype.attachShadow = function (option) {
+      // option is required and the property"mode" is required also
       const shadowRoot = attachShadow.call(this, option);
 
-      if (option?.mode === 'closed') {
+      if (option.mode === 'closed') {
         observeAttributes(shadowRoot);
       }
 

diff --git a/packages/browser/build/bundle.cjs b/packages/browser/build/bundle.cjs
@@ -152,7 +152,7 @@ class Registry {
   }
 
   has(key) {
-    const hash = key?.toString() ?? key;
+    const hash = key.toString();
     return this.getKeys().find((entry) => entry.toString() === hash);
   }
 
@@ -553,9 +553,10 @@ function observeAttributes(root = document.body) {
 function enableClosedShadowRoot(context) {
   const attachShadow = context.HTMLElement.prototype.attachShadow;
   context.HTMLElement.prototype.attachShadow = function (option) {
+    // option is required and the property"mode" is required also
     const shadowRoot = attachShadow.call(this, option);
 
-    if (option?.mode === 'closed') {
+    if (option.mode === 'closed') {
       observeAttributes(shadowRoot);
     }
 

diff --git a/packages/browser/build/bundle.iife.js b/packages/browser/build/bundle.iife.js
@@ -153,7 +153,7 @@
     }
 
     has(key) {
-      const hash = key?.toString() ?? key;
+      const hash = key.toString();
       return this.getKeys().find((entry) => entry.toString() === hash);
     }
 
@@ -554,9 +554,10 @@
   function enableClosedShadowRoot(context) {
     const attachShadow = context.HTMLElement.prototype.attachShadow;
     context.HTMLElement.prototype.attachShadow = function (option) {
+      // option is required and the property"mode" is required also
       const shadowRoot = attachShadow.call(this, option);
 
-      if (option?.mode === 'closed') {
+      if (option.mode === 'closed') {
         observeAttributes(shadowRoot);
       }
 

diff --git a/packages/browser/build/bundle.js b/packages/browser/build/bundle.js
@@ -150,7 +150,7 @@ class Registry {
   }
 
   has(key) {
-    const hash = key?.toString() ?? key;
+    const hash = key.toString();
     return this.getKeys().find((entry) => entry.toString() === hash);
   }
 
@@ -551,9 +551,10 @@ function observeAttributes(root = document.body) {
 function enableClosedShadowRoot(context) {
   const attachShadow = context.HTMLElement.prototype.attachShadow;
   context.HTMLElement.prototype.attachShadow = function (option) {
+    // option is required and the property"mode" is required also
     const shadowRoot = attachShadow.call(this, option);
 
-    if (option?.mode === 'closed') {
+    if (option.mode === 'closed') {
       observeAttributes(shadowRoot);
     }
 

diff --git a/packages/browser/build/bundle.umd.js b/packages/browser/build/bundle.umd.js
@@ -155,7 +155,7 @@
     }
 
     has(key) {
-      const hash = key?.toString() ?? key;
+      const hash = key.toString();
       return this.getKeys().find((entry) => entry.toString() === hash);
     }
 
@@ -556,9 +556,10 @@
   function enableClosedShadowRoot(context) {
     const attachShadow = context.HTMLElement.prototype.attachShadow;
     context.HTMLElement.prototype.attachShadow = function (option) {
+      // option is required and the property"mode" is required also
       const shadowRoot = attachShadow.call(this, option);
 
-      if (option?.mode === 'closed') {
+      if (option.mode === 'closed') {
         observeAttributes(shadowRoot);
       }
 

diff --git a/packages/browser/test/jest.setup.js b/packages/browser/test/jest.setup.js
@@ -1,7 +1,19 @@
 import { randomUUID } from 'node:crypto';
+import { beforeEach, afterEach, jest } from '@jest/globals';
+
+const attachShadow = HTMLElement.prototype.attachShadow;
 
 Object.defineProperty(globalThis, 'crypto', {
   value: {
     randomUUID: () => randomUUID(),
   },
 });
+
+beforeEach(() => {
+  jest.resetModules();
+  document.body.textContent = '';
+});
+
+afterEach(() => {
+  HTMLElement.prototype.attachShadow = attachShadow;
+});
diff --git a/packages/core/src/engine.js b/packages/core/src/engine.js
@@ -11,9 +11,10 @@ export { observeAttributes } from './engine/observe.js';
 export function enableClosedShadowRoot(context) {
   const attachShadow = context.HTMLElement.prototype.attachShadow;
   context.HTMLElement.prototype.attachShadow = function (option) {
+    // option is required and the property"mode" is required also
     const shadowRoot = attachShadow.call(this, option);
 
-    if (option?.mode === 'closed') {
+    if (option.mode === 'closed') {
       observeAttributes(shadowRoot);
     }
 

diff --git a/packages/core/src/utils/registry.js b/packages/core/src/utils/registry.js
@@ -14,7 +14,7 @@ export class Registry {
   }
 
   has(key) {
-    const hash = key?.toString() ?? key;
+    const hash = key.toString();
     return this.getKeys().find((entry) => entry.toString() === hash);
   }
 

diff --git a/packages/core/test/engine.test.js b/packages/core/test/engine.test.js
@@ -349,5 +349,35 @@ describe('core - engine', () => {
       expect(spyAttributeChangedCallback).toHaveBeenCalledTimes(1);
       expect(spyDisconnectedCallback).toHaveBeenCalledTimes(1);
     });
+
+    test('otherwise, we are in an open shadow and we then only returns the shadow root (no observation binding)', async () => {
+      // Arrange
+      enableClosedShadowRoot(globalThis);
+      defineAttribute('hx-post', MyOwnAttribute);
+
+      let root = document.createElement('section');
+      document.body.appendChild(root);
+
+      root.attachShadow({ mode: 'open' });
+      root = root.shadowRoot;
+
+      const element = document.createElement('div');
+      element.setAttribute('hx-post', 'old-value');
+
+      // Act
+      root.appendChild(element);
+      await digest();
+
+      element.setAttribute('hx-post', 'some-value');
+      await digest();
+
+      root.removeChild(element);
+      await digest();
+
+      // Assert
+      expect(spyConnectedCallback).toHaveBeenCalledTimes(0);
+      expect(spyAttributeChangedCallback).toHaveBeenCalledTimes(0);
+      expect(spyDisconnectedCallback).toHaveBeenCalledTimes(0);
+    });
   });
 });
diff --git a/packages/core/test/jest.setup.js b/packages/core/test/jest.setup.js
@@ -1,5 +1,5 @@
 import { randomUUID } from 'node:crypto';
-import { beforeEach, afterEach } from '@jest/globals';
+import { beforeEach, afterEach, jest } from '@jest/globals';
 
 import {
   getCustomAttributesRegistry,
@@ -17,6 +17,7 @@ Object.defineProperty(globalThis, 'crypto', {
 });
 
 beforeEach(() => {
+  jest.resetModules();
   document.body.textContent = '';
 
   customAttributesRegistry.clear();