Merge pull request #90 from Neovici/feature/fix-create-element

fix(create-element): document.createElement breaks useContext

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);

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 = () => {

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', () => {

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));