feat!: Upgrade @cfware/shadow-element

.eslintrc.json

@@ -1,5 +1,8 @@
 {
 	"env": {
 		"browser": true
+	},
+	"rules": {
+		"unicorn/consistent-destructuring": 0
 	}
 }

.github/workflows/test.yml

@@ -12,7 +12,7 @@ jobs:
     - name: Setup Node.js
       uses: actions/setup-node@v1
       with:
-        node-version: 14
+        node-version: 16
     - run: npm install
     - name: Lint
       run: npm run -s pretest

package.json

@@ -11,7 +11,7 @@
 		"posttest": "nyc report --check-coverage"
 	},
 	"engines": {
-		"node": ">=14.0.0"
+		"node": ">=16.12.0"
 	},
 	"author": "Corey Farrell",
 	"license": "MIT",
@@ -26,15 +26,15 @@
 	"homepage": "https://github.com/cfware/panel-splitter#readme",
 	"dependencies": {
 		"@cfware/callback-array-once": "^1.0.4",
-		"@cfware/shadow-element": "^0.16.1"
+		"@cfware/shadow-element": "^0.17.0"
 	},
 	"devDependencies": {
-		"@cfware/fastify-test-helper": "^0.7.0",
-		"@cfware/lint": "^2.0.4",
-		"@cfware/nyc": "^0.7.0",
-		"@cfware/tap-selenium-manager": "^1.1.0",
-		"libtap": "^0.3.0",
+		"@cfware/fastify-test-helper": "^0.8.0",
+		"@cfware/lint": "^3.0.4",
+		"@cfware/nyc": "^0.7.1",
+		"@cfware/tap-selenium-manager": "^2.0.0",
+		"libtap": "^1.4.0",
 		"nyc": "^15.1.0",
-		"tap-yaml-summary": "^0.1.0"
+		"tap-yaml-summary": "^0.2.0"
 	}
 }

panel-splitter.js

@@ -1,5 +1,5 @@
 import runCallbacks from '@cfware/callback-array-once';
-import ShadowElement, {html, template, createBoundEventListeners, define, reflectStringProperties, reflectBooleanProperties, reflectNumericProperties} from '@cfware/shadow-element';
+import ShadowElement, {html, template, css, adoptedStyleSheets, createBoundEventListeners, define, reflectStringProperties, reflectBooleanProperties, reflectNumericProperties} from '@cfware/shadow-element';
 
 import calculateSize from './calculate-size.js';
 
@@ -23,8 +23,8 @@ class PanelSplitter extends ShadowElement {
 			}
 
 			const {previousElementSibling, nextElementSibling, vertical} = this;
-			const [clientSize, eventVar, styleVar] = getVariableNames(vertical);
-			const originalPosition = mouseDownEvent[eventVar];
+			const [clientSize, eventVariable, styleVariable] = getVariableNames(vertical);
+			const originalPosition = mouseDownEvent[eventVariable];
 			const originalNextSize = nextElementSibling[clientSize];
 			const totalSize = previousElementSibling[clientSize] + originalNextSize;
 			const cleanupFns = [
@@ -33,7 +33,7 @@ class PanelSplitter extends ShadowElement {
 
 			const handlers = {
 				mousemove: event => {
-					const requestNext = originalPosition + originalNextSize - event[eventVar];
+					const requestNext = originalPosition + originalNextSize - event[eventVariable];
 					let calcNext = calculateSize(requestNext, this.minNext, this.maxNext, this.snapNext);
 					const requestPrevious = totalSize - calcNext;
 					const calcPrevious = calculateSize(requestPrevious, this.minPrev, this.maxPrev, this.snapPrev);
@@ -43,18 +43,18 @@ class PanelSplitter extends ShadowElement {
 					}
 
 					if (this.adjust !== 'after') {
-						previousElementSibling.style[styleVar] = `${calcPrevious}px`;
+						previousElementSibling.style[styleVariable] = `${calcPrevious}px`;
 					}
 
 					if (this.adjust !== 'before') {
-						nextElementSibling.style[styleVar] = `${calcNext}px`;
+						nextElementSibling.style[styleVariable] = `${calcNext}px`;
 					}
 				}
 			};
 
-			['blur', 'mouseup', 'mouseleave'].forEach(type => {
+			for (const type of ['blur', 'mouseup', 'mouseleave']) {
 				handlers[type] = () => runCallbacks(cleanupFns);
-			});
+			}
 
 			selectionchange();
 			cleanupFns.push(
@@ -64,21 +64,23 @@ class PanelSplitter extends ShadowElement {
 		});
 	}
 
-	get [template]() {
-		return html`
-			<style>
-				:host {
-					cursor: col-resize;
-					user-select: none;
-					min-width: 4px;
-					min-height: 4px;
-				}
+	static [adoptedStyleSheets] = [
+		css`
+			:host {
+				cursor: col-resize;
+				user-select: none;
+				min-width: 4px;
+				min-height: 4px;
+			}
 
-				:host([vertical]) {
-					cursor: row-resize;
-				}
-			</style>
-		`;
+			:host([vertical]) {
+				cursor: row-resize;
+			}
+		`
+	];
+
+	get [template]() {
+		return html``;
 	}
 }
 

test.js

@@ -1,6 +1,6 @@
-import path from 'path';
-import {promises as fs} from 'fs';
-import {fileURLToPath} from 'url';
+import path from 'node:path';
+import {writeFile} from 'node:fs/promises';
+import {fileURLToPath} from 'node:url';
 
 import t from 'libtap';
 import {grabImage, testBrowser} from '@cfware/tap-selenium-manager';
@@ -19,7 +19,7 @@ const imageFile = fullname => path.join(
 async function processImage(t, element, imageID) {
 	const image64 = await grabImage(element);
 	t.matchSnapshot(image64, imageID);
-	await fs.writeFile(imageFile(`${t.fullname}-${imageID}.png`), image64);
+	await writeFile(imageFile(`${t.fullname}-${imageID}.png`), image64);
 }
 
 function executeDrag(selenium, button, from, to) {
@@ -129,13 +129,13 @@ testCalculatedSize('above max', [75, 0, 50, 0], 50);
 testCalculatedSize('above snap', [75, 0, 0, 50], 75);
 
 t.test('50-100% of snap', async t => {
-	for (let i = 25; i <= 50; i++) {
-		checkCalculatedSize(t, [i, 0, 0, 50], 50);
+	for (let size = 25; size <= 50; size++) {
+		checkCalculatedSize(t, [size, 0, 0, 50], 50);
 	}
 });
 
 t.test('below snap', async t => {
-	for (let i = 0; i <= 24; i++) {
-		checkCalculatedSize(t, [i, 0, 0, 50], 0);
+	for (let size = 0; size <= 24; size++) {
+		checkCalculatedSize(t, [size, 0, 0, 50], 0);
 	}
 });