feat: update to pion

package.json

@@ -56,19 +56,18 @@
 		"./use-hash-param": "./dist/use-hash-param.js"
 	},
 	"dependencies": {
-		"haunted": "^5.0.0",
-		"lit-html": "^2.0.0"
+		"@pionjs/pion": "^2.0.0"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^18.0.0",
 		"@commitlint/config-conventional": "^18.0.0",
 		"@neovici/cfg": "^1.15.0",
-		"@open-wc/testing": "^3.1.0",
+		"@open-wc/testing": "^4.0.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
 		"@types/mocha": "^10.0.3",
 		"@web/dev-server": "^0.4.0",
-		"@web/dev-server-storybook": "^1.0.0",
+		"@web/dev-server-storybook": "^2.0.0",
 		"@web/test-runner": "^0.18.0",
 		"husky": "^8.0.0",
 		"semantic-release": "^22.0.0",

src/load.ts

@@ -1,4 +1,4 @@
-import { html as htm } from 'haunted';
+import { html as htm } from '@pionjs/pion';
 import { RuleRet, BaseRoute } from './match';
 
 const html: typeof htm = (arr, ...thru) =>

src/router.ts

@@ -1,7 +1,7 @@
 import { nothing } from 'lit-html';
 import { guard } from 'lit-html/directives/guard.js';
 import { until } from 'lit-html/directives/until.js';
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 
 import { useRouter, Route } from './use-router';
 import { useRouteEvents } from './use-route-events';

src/use-hash-param.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useRef } from 'haunted';
+import { useState, useEffect, useMemo, useRef } from '@pionjs/pion';
 
 const hashUrl = () =>
 		new URL(

src/use-route-events.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'haunted';
+import { useEffect } from '@pionjs/pion';
 import type { BaseRoute } from './match';
 
 const dispatch = (el: HTMLElement, type: string, opts?: object) =>

src/use-router.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'haunted';
+import { useMemo } from '@pionjs/pion';
 
 import { useRoutes } from './use-routes';
 import type { BaseRoute } from './match';

src/use-routes.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'haunted';
+import { useState, useEffect, useMemo } from '@pionjs/pion';
 import { match, BaseRoute } from './match';
 
 export const documentUrl = () =>

stories/cosmoz-router.stories.js

@@ -1,4 +1,4 @@
-import { html, component } from 'haunted';
+import { html, component } from '@pionjs/pion';
 import { hashbang, createElement } from '../src/index.ts';
 
 export default {

stories/views/home.js

@@ -1,4 +1,4 @@
-import { html, component } from 'haunted';
+import { html, component } from '@pionjs/pion';
 
 customElements.define(
 	'demo-home',

stories/views/param-reading-view.js

@@ -1,4 +1,4 @@
-import { html, component } from 'haunted';
+import { html, component } from '@pionjs/pion';
 
 customElements.define(
 	'param-reading-view',

stories/views/view-1.js

@@ -1,4 +1,4 @@
-import { html, component, useState, useEffect } from 'haunted';
+import { html, component, useState, useEffect } from '@pionjs/pion';
 
 customElements.define(
 	'view-1',

stories/views/view-2.js

@@ -1,4 +1,4 @@
-import { html, component, useState, useEffect } from 'haunted';
+import { html, component, useState, useEffect } from '@pionjs/pion';
 
 customElements.define(
 	'view-2',

stories/views/view-3.js

@@ -1,4 +1,4 @@
-import { html, component, useState, useEffect } from 'haunted';
+import { html, component, useState, useEffect } from '@pionjs/pion';
 
 customElements.define(
 	'view-3',

test/basic.test.ts

@@ -53,51 +53,51 @@ suite('cosmoz-router', () => {
 	test('renders home', async () => {
 		navigate('/');
 		const router = fixtureSync(html`<cosmoz-router .routes=${routes} />`);
-		await oneEvent(router, 'route-loaded');
+		await oneEvent(router, 'route-loaded', false);
 		await nextFrame();
 		assert.shadowDom.equal(router, '<demo-home></demo-home>');
 	});
 
 	test('renders view-1', async () => {
 		navigate('#!/view-1');
 		const router = fixtureSync(html`<cosmoz-router .routes=${routes} />`);
-		await oneEvent(router, 'route-loaded');
+		await oneEvent(router, 'route-loaded', false);
 		await nextFrame();
 		assert.shadowDom.equal(router, '<view-1></view-1>');
 	});
 
 	test('renders not-found', async () => {
 		navigate('#/not-found');
 		const router = fixtureSync(html`<cosmoz-router .routes=${routes} />`);
-		await oneEvent(router, 'route-not-found');
+		await oneEvent(router, 'route-not-found', false);
 		await nextFrame();
 		assert.shadowDom.equal(router, '');
 	});
 
 	test('renders home, then view-1', async () => {
 		navigate('/');
 		const router = fixtureSync(html`<cosmoz-router .routes=${routes} />`);
-		await oneEvent(router, 'route-loaded');
+		await oneEvent(router, 'route-loaded', false);
 		await nextFrame();
 		assert.shadowDom.equal(router, '<demo-home></demo-home>');
 
 		navigate('#!/view-1');
-		await oneEvent(router, 'route-loaded');
+		await oneEvent(router, 'route-loaded', false);
 		await nextFrame();
 		assert.shadowDom.equal(router, '<view-1></view-1>');
 	});
 
 	test('error', async () => {
 		navigate('#!/error');
 		const router = fixtureSync(html`<cosmoz-router .routes=${routes} />`),
-			{ detail } = await oneEvent(router, 'route-error');
+			{ detail } = await oneEvent(router, 'route-error', false);
 		assert.equal(detail.error.message, 'testing');
 	});
 
 	test('params', async () => {
 		navigate('#!/param-reading-view?p1=1&p2=2');
 		const router = fixtureSync(html`<cosmoz-router .routes=${routes} />`);
-		await oneEvent(router, 'route-loaded');
+		await oneEvent(router, 'route-loaded', false);
 		await nextFrame();
 		assert.shadowDom.equal(
 			router.shadowRoot?.querySelector('param-reading-view'),