From a650ebfa5bcad481058ee94f7e004b5597a269d0 Mon Sep 17 00:00:00 2001
From: Cristian Necula <virusz@gmail.com>
Date: Wed, 13 May 2020 16:48:30 +0300
Subject: [PATCH 1/3] test: suiteSetup fails intermittently

---
 test/location.test.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/test/location.test.js b/test/location.test.js
index 345a7cd..bf18e82 100644
--- a/test/location.test.js
+++ b/test/location.test.js
@@ -3,6 +3,7 @@ import {
 } from '@open-wc/testing';
 
 import { microTask } from '@polymer/polymer/lib/utils/async';
+import '../cosmoz-page-location';
 
 /* eslint-disable max-lines-per-function */
 suite('cosmoz-page-location', () => {
@@ -54,10 +55,6 @@ suite('cosmoz-page-location', () => {
 		}
 	};
 
-	suiteSetup(async () => {
-		await import('../cosmoz-page-location.js');
-	});
-
 	setup(async () => {
 		location = await fixture(html`<cosmoz-page-location />`);
 		await new Promise(resolve => microTask.run(resolve));

From 06514aa430448b50dc485dfc8e96d152ccb5c7f7 Mon Sep 17 00:00:00 2001
From: Cristian Necula <virusz@gmail.com>
Date: Wed, 13 May 2020 16:49:40 +0300
Subject: [PATCH 2/3] test: view that reads route params

---
 demo/views/param-reading-view.js | 11 +++++++++++
 test/basic.test.js               | 12 ++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 demo/views/param-reading-view.js

diff --git a/demo/views/param-reading-view.js b/demo/views/param-reading-view.js
new file mode 100644
index 0000000..b2d9522
--- /dev/null
+++ b/demo/views/param-reading-view.js
@@ -0,0 +1,11 @@
+import {
+	PolymerElement, html
+} from '@polymer/polymer/polymer-element';
+
+class ParamReadingView extends PolymerElement {
+	static get template() {
+		return html`p1: [[ p1 ]]; p2: [[ p2 ]]`;
+	}
+}
+
+customElements.define('param-reading-view', ParamReadingView);
diff --git a/test/basic.test.js b/test/basic.test.js
index f7e1589..e01c53e 100644
--- a/test/basic.test.js
+++ b/test/basic.test.js
@@ -19,6 +19,10 @@ suite('cosmoz-page-router', () => {
 			rule: hashbang(/^\/view-1/u),
 			handle: () => import('../demo/views/view-1.js').then(() => createElement('view-1'))
 		},
+		{
+			rule: hashbang(/^\/param-reading-view/u),
+			handle: result => import('../demo/views/param-reading-view.js').then(() => createElement('param-reading-view', Object.fromEntries(result.match.url.searchParams.entries())))
+		},
 		{
 			rule: hashbang(/^\/error/u),
 			handle: () => Promise.reject(new Error('testing'))
@@ -75,6 +79,14 @@ suite('cosmoz-page-router', () => {
 			{ detail } = await oneEvent(router, 'route-error');
 		assert.equal(detail.error.message, 'testing');
 	});
+
+	test('params', async () => {
+		navigate('#!/param-reading-view?p1=1&p2=2');
+		const router = fixtureSync(html`<cosmoz-page-router .routes=${routes} />`);
+		await oneEvent(router, 'route-loaded');
+		await nextFrame();
+		assert.shadowDom.equal(router.shadowRoot.querySelector('param-reading-view'), 'p1: 1; p2: 2');
+	});
 });
 
 suite('use-routes', () => {

From 2b947d8c5ea8fa9dfa3cbaaea328b500c620103e Mon Sep 17 00:00:00 2001
From: Cristian Necula <virusz@gmail.com>
Date: Thu, 14 May 2020 09:22:53 +0300
Subject: [PATCH 3/3] fix(create-element): document.createElement breaks
 useContext

document.createElement breaks some expectations that lit-haunted makes:
the fresh element is not attached to the DOM, causing the useContext registration mechanism to fail

Using a lit TemplateResult makes sure the element is connected when created lit-html does not have support for dynamic tags, but we can create a TemplateResult by calling the template tag function with the appropriate parameters:
`html(strings[], ...values)`
---
 lib/use-routes.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/lib/use-routes.js b/lib/use-routes.js
index aaa5f0c..bc5f8de 100644
--- a/lib/use-routes.js
+++ b/lib/use-routes.js
@@ -1,5 +1,5 @@
 import {
-	useState, useEffect, useMemo
+	useState, useEffect, useMemo, html
 } from 'haunted';
 import { match } from './match';
 
@@ -10,7 +10,24 @@ export const
 		if (!customElements.get(tag)) {
 			throw new Error(`Element ${tag} is not defined`);
 		}
-		return Object.assign(document.createElement(tag), props);
+
+		// NOTE: previously this code used document.createElement, but it breaks some
+		// expectations that lit-haunted makes: the fresh element is not attached to the DOM,
+		// causing the useContext registration mechanism to fail
+
+		// using a lit TemplateResult makes sure the element is connected when created
+		// lit-html does not have support for dynamic tags, but we can create a TemplateResult
+		// by calling the template tag function with the appropriate parameters
+		// `html(strings[], ...values)`
+		if (Object.keys(props).length > 0) {
+			const strings = Object.keys(props).map(prop => ` .${prop}=`);
+			return html(
+				[`<${tag}${strings[0]}`, ...strings.slice(1), '>'],
+				...Object.values(props)
+			);
+		}
+
+		return html([`<${tag}>`]);
 	},
 
 	useUrl = () => {