From 3d3dbfee36404db2687649a31ba36214a2874d1a Mon Sep 17 00:00:00 2001
From: Meghea Iulian <iulian.meghea@gmail.com>
Date: Thu, 11 Jan 2024 10:02:23 +0200
Subject: [PATCH] feat: update to pion

BREAKING CHANGE: Update to pion and allow lit@3
---
 package-lock.json                   | 67 +++++---------------------
 package.json                        |  2 +-
 src/directives/consume.ts           |  4 +-
 src/directives/provide.ts           |  4 +-
 src/elements/cz-icon.ts             |  2 +-
 src/elements/cz-spinner.ts          |  2 +-
 src/haunted-polymer.ts              |  2 +-
 src/hooks/use-abort-signal.ts       |  2 +-
 src/hooks/use-debounce-raf.ts       |  2 +-
 src/hooks/use-drag-items.ts         |  2 +-
 src/hooks/use-dropped-files.ts      |  2 +-
 src/hooks/use-handle-drop.ts        |  2 +-
 src/hooks/use-host-bounds.ts        |  2 +-
 src/hooks/use-host.ts               |  2 +-
 src/hooks/use-imperative-api.ts     |  2 +-
 src/hooks/use-meta.ts               |  2 +-
 src/hooks/use-notify-property.ts    |  2 +-
 src/hooks/use-promise.js            | 75 ++++++++++++++---------------
 src/hooks/use-property.ts           |  2 +-
 src/tag.ts                          | 19 +++++---
 test/array.test.js                  |  5 +-
 test/consume.test.js                | 24 +++++----
 test/directive-lazy-until.test.js   |  2 +-
 test/directive-measure.test.js      |  2 +-
 test/directive-portal.test.js       | 55 +++++++++++----------
 test/directive-spread-props.test.js |  2 +-
 test/haunted-polymer.test.js        |  2 +-
 test/provide.test.js                | 21 ++++----
 test/tag.test.js                    |  2 +-
 test/use-abort-signal.test.js       |  2 +-
 test/use-debounce-raf.test.js       |  2 +-
 test/use-dropped-files.test.js      |  2 +-
 test/use-handle-drop.test.js        |  2 +-
 test/use-host-bounds.test.js        |  2 +-
 test/use-imperative-api.test.js     | 16 +++---
 test/use-meta.test.js               |  2 +-
 test/use-notify-property.test.js    |  2 +-
 test/use-promise.test.js            |  2 +-
 38 files changed, 152 insertions(+), 194 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 28d81f1..a50388e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
 			"version": "5.39.0",
 			"license": "Apache-2.0",
 			"dependencies": {
-				"haunted": "^5.0.0"
+				"@pionjs/pion": "^2.0.0"
 			},
 			"devDependencies": {
 				"@commitlint/cli": "^18.0.0",
@@ -1047,7 +1047,8 @@
 		"node_modules/@lit-labs/ssr-dom-shim": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz",
-			"integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g=="
+			"integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==",
+			"dev": true
 		},
 		"node_modules/@lit/reactive-element": {
 			"version": "2.0.3",
@@ -1321,6 +1322,14 @@
 				"lit-html": "^2.0.0 || ^3.0.0"
 			}
 		},
+		"node_modules/@pionjs/pion": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@pionjs/pion/-/pion-2.0.0.tgz",
+			"integrity": "sha512-Xznu1+e9Hfc64rqhNwlGPq6BsH2kd/Oc2besQ2dhosty+Uyl7sw+Sp9/12CyHmj/UYcxGsi1/+Iw0uwgx+kWGg==",
+			"dependencies": {
+				"lit-html": "^2.0.0 || ^3.0.0"
+			}
+		},
 		"node_modules/@playwright/test": {
 			"version": "1.40.1",
 			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.40.1.tgz",
@@ -6259,42 +6268,6 @@
 				"node": ">= 0.4"
 			}
 		},
-		"node_modules/haunted": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/haunted/-/haunted-5.0.0.tgz",
-			"integrity": "sha512-hyv9KIp4F6/oL5V6GQ6b85RQIcxdV/KTjfgLxkPozQOj+KmCVZ3pDuSzlAAXoZK0lOYLekumbDqZLfzloO2s3w==",
-			"dependencies": {
-				"lit": "^2.0.0"
-			}
-		},
-		"node_modules/haunted/node_modules/@lit/reactive-element": {
-			"version": "1.6.3",
-			"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
-			"integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
-			"dependencies": {
-				"@lit-labs/ssr-dom-shim": "^1.0.0"
-			}
-		},
-		"node_modules/haunted/node_modules/lit": {
-			"version": "2.8.0",
-			"resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
-			"integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
-			"dependencies": {
-				"@lit/reactive-element": "^1.6.0",
-				"lit-element": "^3.3.0",
-				"lit-html": "^2.8.0"
-			}
-		},
-		"node_modules/haunted/node_modules/lit-element": {
-			"version": "3.3.3",
-			"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
-			"integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
-			"dependencies": {
-				"@lit-labs/ssr-dom-shim": "^1.1.0",
-				"@lit/reactive-element": "^1.3.0",
-				"lit-html": "^2.8.0"
-			}
-		},
 		"node_modules/hook-std": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/hook-std/-/hook-std-3.0.0.tgz",
@@ -7400,28 +7373,10 @@
 				"lit-html": "^3.1.0"
 			}
 		},
-		"node_modules/lit-element/node_modules/lit-html": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.1.tgz",
-			"integrity": "sha512-x/EwfGk2D/f4odSFM40hcGumzqoKv0/SUh6fBO+1Ragez81APrcAMPo1jIrCDd9Sn+Z4CT867HWKViByvkDZUA==",
-			"dev": true,
-			"dependencies": {
-				"@types/trusted-types": "^2.0.2"
-			}
-		},
 		"node_modules/lit-html": {
-			"version": "2.8.0",
-			"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
-			"integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
-			"dependencies": {
-				"@types/trusted-types": "^2.0.2"
-			}
-		},
-		"node_modules/lit/node_modules/lit-html": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.1.tgz",
 			"integrity": "sha512-x/EwfGk2D/f4odSFM40hcGumzqoKv0/SUh6fBO+1Ragez81APrcAMPo1jIrCDd9Sn+Z4CT867HWKViByvkDZUA==",
-			"dev": true,
 			"dependencies": {
 				"@types/trusted-types": "^2.0.2"
 			}
diff --git a/package.json b/package.json
index 17bdc9a..96a67af 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
 		"./memoize": "./dist/memoize.js"
 	},
 	"dependencies": {
-		"haunted": "^5.0.0"
+		"@pionjs/pion": "^2.0.0"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^18.0.0",
diff --git a/src/directives/consume.ts b/src/directives/consume.ts
index 6917879..c864268 100644
--- a/src/directives/consume.ts
+++ b/src/directives/consume.ts
@@ -1,5 +1,5 @@
-import { Context, ContextDetail } from 'haunted/lib/create-context';
-import { contextEvent } from 'haunted/lib/symbols';
+import { Context, ContextDetail } from '@pionjs/pion/lib/create-context';
+import { contextEvent } from '@pionjs/pion/lib/symbols';
 import { AttributePart, noChange } from 'lit-html';
 import { AsyncDirective, directive } from 'lit-html/async-directive.js';
 import { ChildPart, DirectiveParameters } from 'lit-html/directive.js';
diff --git a/src/directives/provide.ts b/src/directives/provide.ts
index 192dbe9..10c12f5 100644
--- a/src/directives/provide.ts
+++ b/src/directives/provide.ts
@@ -1,5 +1,5 @@
-import { Context, ContextDetail } from 'haunted/lib/create-context';
-import { contextEvent } from 'haunted/lib/symbols';
+import { Context, ContextDetail } from '@pionjs/pion/lib/create-context';
+import { contextEvent } from '@pionjs/pion/lib/symbols';
 import { noChange, nothing } from 'lit-html';
 import { AsyncDirective, directive } from 'lit-html/async-directive.js';
 import { ChildPart } from 'lit-html/directive.js';
diff --git a/src/elements/cz-icon.ts b/src/elements/cz-icon.ts
index 82281f9..a517fc3 100644
--- a/src/elements/cz-icon.ts
+++ b/src/elements/cz-icon.ts
@@ -1,6 +1,6 @@
 import { html, svg } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 
 interface Ico {
 	icon?: ReturnType<typeof svg>;
diff --git a/src/elements/cz-spinner.ts b/src/elements/cz-spinner.ts
index c54335a..61e7eaa 100644
--- a/src/elements/cz-spinner.ts
+++ b/src/elements/cz-spinner.ts
@@ -1,4 +1,4 @@
-import { component, html } from 'haunted';
+import { component, html } from '@pionjs/pion';
 
 export const Spinner = () => html`<style>
 	@keyframes rotating {
diff --git a/src/haunted-polymer.ts b/src/haunted-polymer.ts
index eddac48..ae3a40e 100644
--- a/src/haunted-polymer.ts
+++ b/src/haunted-polymer.ts
@@ -3,7 +3,7 @@ import {
 	render,
 	GenericRenderer,
 	ComponentOrVirtualComponent,
-} from 'haunted';
+} from '@pionjs/pion';
 import { ChildPart } from 'lit-html';
 import { Rec } from './object';
 
diff --git a/src/hooks/use-abort-signal.ts b/src/hooks/use-abort-signal.ts
index 9b5dec0..c719315 100644
--- a/src/hooks/use-abort-signal.ts
+++ b/src/hooks/use-abort-signal.ts
@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'haunted';
+import { useEffect, useMemo } from '@pionjs/pion';
 
 export const useAbortSignal = () => {
 	const { controller, signal } = useMemo(() => {
diff --git a/src/hooks/use-debounce-raf.ts b/src/hooks/use-debounce-raf.ts
index 95f4f11..7ef8b57 100644
--- a/src/hooks/use-debounce-raf.ts
+++ b/src/hooks/use-debounce-raf.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'haunted';
+import { useState, useEffect } from '@pionjs/pion';
 
 /**
  * Debounces a value by updating it via a double requestAnimationFrame call.
diff --git a/src/hooks/use-drag-items.ts b/src/hooks/use-drag-items.ts
index f26b991..fd9caf8 100644
--- a/src/hooks/use-drag-items.ts
+++ b/src/hooks/use-drag-items.ts
@@ -1,4 +1,4 @@
-import { useCallback } from 'haunted';
+import { useCallback } from '@pionjs/pion';
 import { useMeta } from './use-meta';
 import { parse } from '../number';
 
diff --git a/src/hooks/use-dropped-files.ts b/src/hooks/use-dropped-files.ts
index 8e5198b..60fb4d9 100644
--- a/src/hooks/use-dropped-files.ts
+++ b/src/hooks/use-dropped-files.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'haunted';
+import { useState, useCallback } from '@pionjs/pion';
 import { useHandleDrop } from './use-handle-drop';
 
 export const useDroppedFiles = <T extends HTMLElement>(el: T) => {
diff --git a/src/hooks/use-handle-drop.ts b/src/hooks/use-handle-drop.ts
index c24c7b3..3ce6832 100644
--- a/src/hooks/use-handle-drop.ts
+++ b/src/hooks/use-handle-drop.ts
@@ -1,4 +1,4 @@
-import { useEffect } from 'haunted';
+import { useEffect } from '@pionjs/pion';
 
 export const useHandleDrop = <T extends HTMLElement>(
 	el: T,
diff --git a/src/hooks/use-host-bounds.ts b/src/hooks/use-host-bounds.ts
index 09e4a99..0f08372 100644
--- a/src/hooks/use-host-bounds.ts
+++ b/src/hooks/use-host-bounds.ts
@@ -1,4 +1,4 @@
-import { useLayoutEffect, useState } from 'haunted';
+import { useLayoutEffect, useState } from '@pionjs/pion';
 import { useHost } from './use-host';
 
 const useHostBounds = () => {
diff --git a/src/hooks/use-host.ts b/src/hooks/use-host.ts
index 4b24a65..5cdf2ab 100644
--- a/src/hooks/use-host.ts
+++ b/src/hooks/use-host.ts
@@ -1,4 +1,4 @@
-import { hook, Hook } from 'haunted';
+import { hook, Hook } from '@pionjs/pion';
 
 type UseHost  = <T extends HTMLElement>()=>T;
 
diff --git a/src/hooks/use-imperative-api.ts b/src/hooks/use-imperative-api.ts
index c70e781..26eccf8 100644
--- a/src/hooks/use-imperative-api.ts
+++ b/src/hooks/use-imperative-api.ts
@@ -1,4 +1,4 @@
-import { Hook, hook, State } from 'haunted';
+import { Hook, hook, State } from '@pionjs/pion';
 
 export const useImperativeApi = hook(
 	class<A, D = unknown> extends Hook<[A, D[]], void> {
diff --git a/src/hooks/use-meta.ts b/src/hooks/use-meta.ts
index 7f052ca..b346645 100644
--- a/src/hooks/use-meta.ts
+++ b/src/hooks/use-meta.ts
@@ -1,4 +1,4 @@
-import { useMemo } from 'haunted';
+import { useMemo } from '@pionjs/pion';
 import { Rec } from '../object';
 
 /**
diff --git a/src/hooks/use-notify-property.ts b/src/hooks/use-notify-property.ts
index c77a4a5..37aa9d6 100644
--- a/src/hooks/use-notify-property.ts
+++ b/src/hooks/use-notify-property.ts
@@ -1,4 +1,4 @@
-import { useEffect } from 'haunted';
+import { useEffect } from '@pionjs/pion';
 import { useHost } from './use-host';
 
 const UPPER = /([A-Z])/gu;
diff --git a/src/hooks/use-promise.js b/src/hooks/use-promise.js
index 47a1875..48ca07a 100644
--- a/src/hooks/use-promise.js
+++ b/src/hooks/use-promise.js
@@ -1,55 +1,50 @@
-import {
-	useReducer,
-	useEffect
-} from 'haunted';
-import {
-	reduce,
-	action
-} from '../reduce';
+import { useReducer, useEffect } from '@pionjs/pion';
+import { reduce, action } from '../reduce';
 
-const
-	states = {
+const states = {
 		pending: 'pending',
 		rejected: 'rejected',
-		resolved: 'resolved'
+		resolved: 'resolved',
 	},
 	initial = {
 		error: undefined,
 		result: undefined,
-		state: states.pending
+		state: states.pending,
 	},
 	pending = action(states.pending),
-	resolved = action(states.resolved, result => ({ result })),
-	rejected = action(states.rejected, error => ({ error })),
+	resolved = action(states.resolved, (result) => ({ result })),
+	rejected = action(states.rejected, (error) => ({ error })),
 	reducer = reduce(initial, [
-		[pending, () => ({
-			error: undefined,
-			result: undefined,
-			state: states.pending
-		})],
+		[
+			pending,
+			() => ({
+				error: undefined,
+				result: undefined,
+				state: states.pending,
+			}),
+		],
 
-		[resolved, (state, { result }) => ({
-			error: undefined,
-			result,
-			state: states.resolved
-		})],
+		[
+			resolved,
+			(state, { result }) => ({
+				error: undefined,
+				result,
+				state: states.resolved,
+			}),
+		],
 
-		[rejected, (state, { error }) => ({
-			error,
-			result: undefined,
-			state: states.rejected
-		})]
+		[
+			rejected,
+			(state, { error }) => ({
+				error,
+				result: undefined,
+				state: states.rejected,
+			}),
+		],
 	]);
 
-export const usePromise = promise => {
-	const [
-		{
-			error,
-			result,
-			state
-		},
-		dispatch
-	] = useReducer(reducer, initial);
+export const usePromise = (promise) => {
+	const [{ error, result, state }, dispatch] = useReducer(reducer, initial);
 
 	useEffect(() => {
 		if (!promise) {
@@ -61,8 +56,8 @@ export const usePromise = promise => {
 		dispatch(pending());
 
 		promise.then(
-			result => !canceled && dispatch(resolved(result)),
-			error => !canceled && dispatch(rejected(error))
+			(result) => !canceled && dispatch(resolved(result)),
+			(error) => !canceled && dispatch(rejected(error)),
 		);
 
 		return () => {
diff --git a/src/hooks/use-property.ts b/src/hooks/use-property.ts
index c1be9c6..db06590 100644
--- a/src/hooks/use-property.ts
+++ b/src/hooks/use-property.ts
@@ -1,4 +1,4 @@
-import { useEffect, useCallback } from 'haunted';
+import { useEffect, useCallback } from '@pionjs/pion';
 import { useMeta } from './use-meta';
 import { useHost } from './use-host';
 import { invoke } from '../function';
diff --git a/src/tag.ts b/src/tag.ts
index e127b91..8a4d5d1 100644
--- a/src/tag.ts
+++ b/src/tag.ts
@@ -1,13 +1,12 @@
-import { html as htm } from 'haunted';
+import { html as htm } from 'lit-html';
 
 const html: typeof htm = (arr, ...thru) =>
 	htm(
 		Object.assign(arr, { raw: true }) as unknown as TemplateStringsArray,
-		...thru
+		...thru,
 	);
 
-export const
-	/**
+export const /**
 	 * Dynamic component support for lit-html.
 	 *
 	 * Normally lit-html does not support interpolating the component tag, but we can trick it
@@ -28,7 +27,11 @@ export const
 	 *
 	 * @return  {TemplateResult}          The lit template result.
 	 */
-	tag = (strings: string[], component: string, ...values: unknown[]) => html([
-		strings[0] + component + strings[1],
-		...strings.slice(2)
-	] as unknown as  TemplateStringsArray, ...values);
+	tag = (strings: string[], component: string, ...values: unknown[]) =>
+		html(
+			[
+				strings[0] + component + strings[1],
+				...strings.slice(2),
+			] as unknown as TemplateStringsArray,
+			...values,
+		);
diff --git a/test/array.test.js b/test/array.test.js
index 038f02f..2648407 100644
--- a/test/array.test.js
+++ b/test/array.test.js
@@ -1,5 +1,4 @@
 import { assert } from '@open-wc/testing';
-
 import { array, without, chunk, intersect } from '../src/array';
 
 const empty = [],
@@ -24,9 +23,9 @@ suite('array', () => {
 		assert.lengthOf(
 			without(
 				[{ id: 1 }, { id: 2 }],
-				(o) => o.id
+				(o) => o.id,
 			)([{ id: 1 }, { id: 2 }, { id: 3 }]),
-			1
+			1,
 		);
 	});
 	test('chunk', () => {
diff --git a/test/consume.test.js b/test/consume.test.js
index 44825e4..f7a1d62 100644
--- a/test/consume.test.js
+++ b/test/consume.test.js
@@ -1,5 +1,5 @@
 import { assert, fixture, html } from '@open-wc/testing';
-import { createContext } from 'haunted';
+import { createContext } from '@pionjs/pion';
 import { consume } from '../src/directives/consume';
 
 const Theme = createContext('light');
@@ -11,7 +11,9 @@ customElements.define('app-state-provider', AppState.Provider);
 suite('consume directive', () => {
 	test('gives access to the current context value', async () => {
 		const el = await fixture(
-			html`<theme-provider .value=${'light'}>${consume(Theme)}</theme-provider>`
+			html`<theme-provider .value=${'light'}
+				>${consume(Theme)}</theme-provider
+			>`,
 		);
 		assert.equal(el.textContent, 'light');
 	});
@@ -23,7 +25,9 @@ suite('consume directive', () => {
 
 	test('re-renders when the context value is updated', async () => {
 		const el = await fixture(
-			html`<theme-provider .value=${'light'}>${consume(Theme)}</theme-provider>`
+			html`<theme-provider .value=${'light'}
+				>${consume(Theme)}</theme-provider
+			>`,
 		);
 		el.value = 'dark';
 		assert.equal(el.textContent, 'dark');
@@ -33,7 +37,7 @@ suite('consume directive', () => {
 		const el = await fixture(
 			html`<theme-provider .value=${'light'}
 				><h1 theme=${consume(Theme)}>Heading</h1></theme-provider
-			>`
+			>`,
 		);
 		assert.dom.equal(
 			el,
@@ -41,7 +45,7 @@ suite('consume directive', () => {
                 <h1 theme="light">
                     Heading
                 </h1>
-            </theme-provider>`
+            </theme-provider>`,
 		);
 
 		el.value = 'dark';
@@ -51,7 +55,7 @@ suite('consume directive', () => {
                 <h1 theme="dark">
                     Heading
                 </h1>
-            </theme-provider>`
+            </theme-provider>`,
 		);
 	});
 
@@ -59,19 +63,19 @@ suite('consume directive', () => {
 		const el = await fixture(
 			html`<app-state-provider .value=${{ loggedIn: false }}
 				><span>Logged in:</span> ${consume(AppState, ({ loggedIn }) =>
-					loggedIn ? 'Yes' : 'No'
+					loggedIn ? 'Yes' : 'No',
 				)}</app-state-provider
-			>`
+			>`,
 		);
 		assert.dom.equal(
 			el,
-			'<app-state-provider><span>Logged in:</span> No</app-state-provider>'
+			'<app-state-provider><span>Logged in:</span> No</app-state-provider>',
 		);
 
 		el.value = { loggedIn: true };
 		assert.dom.equal(
 			el,
-			'<app-state-provider><span>Logged in:</span> Yes</app-state-provider>'
+			'<app-state-provider><span>Logged in:</span> Yes</app-state-provider>',
 		);
 	});
 });
diff --git a/test/directive-lazy-until.test.js b/test/directive-lazy-until.test.js
index 6a0c18c..7376043 100644
--- a/test/directive-lazy-until.test.js
+++ b/test/directive-lazy-until.test.js
@@ -1,4 +1,4 @@
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 import {
 	assert,
 	html,
diff --git a/test/directive-measure.test.js b/test/directive-measure.test.js
index a599d21..f7291ba 100644
--- a/test/directive-measure.test.js
+++ b/test/directive-measure.test.js
@@ -1,4 +1,4 @@
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 import { assert, html, fixture, nextFrame } from '@open-wc/testing';
 import { measure } from '../src/directives/measure';
 import { spy, match } from 'sinon';
diff --git a/test/directive-portal.test.js b/test/directive-portal.test.js
index 7faf5a0..fb72242 100644
--- a/test/directive-portal.test.js
+++ b/test/directive-portal.test.js
@@ -1,38 +1,41 @@
-import { component } from 'haunted';
-import {
-	assert,
-	html,
-	fixture,
-	nextFrame
-} from '@open-wc/testing';
+import { component } from '@pionjs/pion';
+import { assert, html, fixture, nextFrame } from '@open-wc/testing';
 import { portal } from '../src/directives/portal';
 
 customElements.define(
 	'test-portal',
-	component(({
-		value,
-		target
-	}) => {
-		return html`${ portal(html`<span class="portal-outlet">${ value }</span>`, target) }`;
-	})
+	component(({ value, target }) => {
+		return html`${portal(
+			html`<span class="portal-outlet">${value}</span>`,
+			target,
+		)}`;
+	}),
 );
 
-
 suite('portal', () => {
 	test('renders in body', async () => {
-		const component = await fixture(html`<test-portal .value=${ 1 } />`);
+		const component = await fixture(html`<test-portal .value=${1} />`);
 
-		assert.equal(document.querySelector('body > .portal-outlet').textContent, 1);
+		assert.equal(
+			document.querySelector('body > .portal-outlet').textContent,
+			1,
+		);
 
 		component.value = 2;
 		await nextFrame(); // it takes one frame for the content to be updated
 
-		assert.equal(document.querySelector('body > .portal-outlet').textContent, 2);
+		assert.equal(
+			document.querySelector('body > .portal-outlet').textContent,
+			2,
+		);
 	});
 
 	test('cleans up when removed', async () => {
-		const component = await fixture(html`<test-portal .value=${ 1 } />`);
-		assert.equal(document.querySelector('body > .portal-outlet').textContent, 1);
+		const component = await fixture(html`<test-portal .value=${1} />`);
+		assert.equal(
+			document.querySelector('body > .portal-outlet').textContent,
+			1,
+		);
 
 		component.parentNode.removeChild(component);
 
@@ -40,9 +43,10 @@ suite('portal', () => {
 	});
 
 	test('renders in other element', async () => {
-		const
-			target = await fixture(html`<span></span>`),
-			component = await fixture(html`<test-portal .value=${ 1 } .target="${ target }"/>`);
+		const target = await fixture(html`<span></span>`),
+			component = await fixture(
+				html`<test-portal .value=${1} .target="${target}" />`,
+			);
 
 		assert.equal(target.querySelector('.portal-outlet').textContent, 1);
 
@@ -56,10 +60,11 @@ suite('portal', () => {
 	});
 
 	test('can switch outlet element', async () => {
-		const
-			target = await fixture(html`<span></span>`),
+		const target = await fixture(html`<span></span>`),
 			target2 = await fixture(html`<span></span>`),
-			component = await fixture(html`<test-portal .value=${ 1 } .target="${ target }"/>`);
+			component = await fixture(
+				html`<test-portal .value=${1} .target="${target}" />`,
+			);
 
 		assert.equal(target.querySelector('.portal-outlet').textContent, 1);
 		assert.isNull(target2.querySelector('.portal-outlet'));
diff --git a/test/directive-spread-props.test.js b/test/directive-spread-props.test.js
index b02a4fc..49654b5 100644
--- a/test/directive-spread-props.test.js
+++ b/test/directive-spread-props.test.js
@@ -1,4 +1,4 @@
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 import { assert, html, fixture, nextFrame } from '@open-wc/testing';
 import { spreadProps } from '../src/directives/spread-props';
 
diff --git a/test/haunted-polymer.test.js b/test/haunted-polymer.test.js
index 0f21812..ba508e5 100644
--- a/test/haunted-polymer.test.js
+++ b/test/haunted-polymer.test.js
@@ -1,7 +1,7 @@
 import { assert, fixture, html, nextFrame } from '@open-wc/testing';
 import { PolymerElement, html as polymerHtml } from '@polymer/polymer';
 import { hauntedPolymer } from '../src/haunted-polymer';
-import { useCallback, useMemo } from 'haunted';
+import { useCallback, useMemo } from '@pionjs/pion';
 import { spy } from 'sinon';
 
 suite('haunted polymer', () => {
diff --git a/test/provide.test.js b/test/provide.test.js
index f9fd2bd..19d67e3 100644
--- a/test/provide.test.js
+++ b/test/provide.test.js
@@ -1,33 +1,34 @@
 import { assert, fixture, html, nextFrame } from '@open-wc/testing';
-import { component, createContext } from 'haunted';
+import { component, createContext } from '@pionjs/pion';
 import { provide } from '../src/directives/provide';
 
 const Theme = createContext('light');
 customElements.define('theme-consumer', Theme.Consumer);
 
-const ProviderTest = ({ theme }) => html`<p>
-	${provide(Theme, theme)}
-	<theme-consumer .render=${(theme) => theme}></theme-consumer>
-</p>`;
+const ProviderTest = ({ theme }) =>
+	html`<p>
+		${provide(Theme, theme)}
+		<theme-consumer .render=${(theme) => theme}></theme-consumer>
+	</p>`;
 customElements.define(
 	'provider-test',
-	component(ProviderTest, { useShadowDOM: false })
+	component(ProviderTest, { useShadowDOM: false }),
 );
 
 suite('provide directive', () => {
 	test('provides a context value in the current node hierarchy', async () => {
 		const el = await fixture(
-			html`<provider-test .theme=${'dark'}></provider-test>`
+			html`<provider-test .theme=${'dark'}></provider-test>`,
 		);
-		assert.shadowDom.equal(el.querySelector('theme-consumer'), 'dark');
+		assert.lightDom.equal(el.querySelector('theme-consumer'), 'dark');
 	});
 
 	test('notifies of value changes', async () => {
 		const el = await fixture(
-			html`<provider-test .theme=${'dark'}></provider-test>`
+			html`<provider-test .theme=${'dark'}></provider-test>`,
 		);
 		el.theme = 'colorful';
 		await nextFrame();
-		assert.shadowDom.equal(el.querySelector('theme-consumer'), 'colorful');
+		assert.lightDom.equal(el.querySelector('theme-consumer'), 'colorful');
 	});
 });
diff --git a/test/tag.test.js b/test/tag.test.js
index 6e9e983..59916c5 100644
--- a/test/tag.test.js
+++ b/test/tag.test.js
@@ -1,5 +1,5 @@
 import { assert, fixture, nextFrame } from '@open-wc/testing';
-import { component, html, useState } from 'haunted';
+import { component, html, useState } from '@pionjs/pion';
 import { tag } from '../src/tag';
 
 suite('tag', () => {
diff --git a/test/use-abort-signal.test.js b/test/use-abort-signal.test.js
index a8d9d0b..e276075 100644
--- a/test/use-abort-signal.test.js
+++ b/test/use-abort-signal.test.js
@@ -1,5 +1,5 @@
 import { useAbortSignal } from '../src/hooks/use-abort-signal';
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 import { assert, html, fixture } from '@open-wc/testing';
 import { spy } from 'sinon';
 
diff --git a/test/use-debounce-raf.test.js b/test/use-debounce-raf.test.js
index 57f9b40..36d09a7 100644
--- a/test/use-debounce-raf.test.js
+++ b/test/use-debounce-raf.test.js
@@ -1,5 +1,5 @@
 import { useDebounceRaf } from '../src/hooks/use-debounce-raf';
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 import {
 	assert,
 	html,
diff --git a/test/use-dropped-files.test.js b/test/use-dropped-files.test.js
index 1fad033..71b39c8 100644
--- a/test/use-dropped-files.test.js
+++ b/test/use-dropped-files.test.js
@@ -1,5 +1,5 @@
 import { useDroppedFiles } from '../src/hooks/use-dropped-files';
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 import { assert, html, fixture, nextFrame } from '@open-wc/testing';
 
 customElements.define(
diff --git a/test/use-handle-drop.test.js b/test/use-handle-drop.test.js
index c9c1402..3a1147d 100644
--- a/test/use-handle-drop.test.js
+++ b/test/use-handle-drop.test.js
@@ -1,5 +1,5 @@
 import { useHandleDrop } from '../src/hooks/use-handle-drop';
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 import { assert, html, fixture } from '@open-wc/testing';
 import { spy } from 'sinon';
 
diff --git a/test/use-host-bounds.test.js b/test/use-host-bounds.test.js
index a9fec66..bcbb713 100644
--- a/test/use-host-bounds.test.js
+++ b/test/use-host-bounds.test.js
@@ -1,5 +1,5 @@
 import { useHostBounds } from '../src/hooks/use-host-bounds';
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 import { assert, html, fixtureSync, nextFrame } from '@open-wc/testing';
 
 customElements.define(
diff --git a/test/use-imperative-api.test.js b/test/use-imperative-api.test.js
index 45a0812..6d2b002 100644
--- a/test/use-imperative-api.test.js
+++ b/test/use-imperative-api.test.js
@@ -1,12 +1,6 @@
 import { useImperativeApi } from '../src/hooks/use-imperative-api';
-import {
-	component, useCallback
-} from 'haunted';
-import {
-	assert,
-	html,
-	fixture
-} from '@open-wc/testing';
+import { component, useCallback } from '@pionjs/pion';
+import { assert, html, fixture } from '@open-wc/testing';
 
 customElements.define(
 	'use-imperative-api-test',
@@ -14,12 +8,14 @@ customElements.define(
 		const method = useCallback(() => true, []);
 
 		useImperativeApi({ method }, [method]);
-	})
+	}),
 );
 
 suite('use-imperative-api', () => {
 	test('exposes an imperative api on the component', async () => {
-		const el = await fixture(html`<use-imperative-api-test></use-imperative-api-test>`);
+		const el = await fixture(
+			html`<use-imperative-api-test></use-imperative-api-test>`,
+		);
 		assert.isFunction(el.method);
 		assert.isTrue(el.method());
 	});
diff --git a/test/use-meta.test.js b/test/use-meta.test.js
index ab90736..58fe3ed 100644
--- a/test/use-meta.test.js
+++ b/test/use-meta.test.js
@@ -1,5 +1,5 @@
 import { useMeta } from '../src/hooks/use-meta';
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 import {
 	assert,
 	html,
diff --git a/test/use-notify-property.test.js b/test/use-notify-property.test.js
index 468c23a..3e8ee29 100644
--- a/test/use-notify-property.test.js
+++ b/test/use-notify-property.test.js
@@ -1,5 +1,5 @@
 import { useNotifyProperty } from '../src/hooks/use-notify-property';
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 import { assert, html, fixture, oneEvent } from '@open-wc/testing';
 
 customElements.define(
diff --git a/test/use-promise.test.js b/test/use-promise.test.js
index 9fb5e23..22bf016 100644
--- a/test/use-promise.test.js
+++ b/test/use-promise.test.js
@@ -1,5 +1,5 @@
 import { usePromise } from '../src/hooks/use-promise';
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 import {
 	assert,
 	html,