yuretz/hyperblur.html

## hyperblur.html
<!doctype html>
<html>
	<head>
		<title>
			Lighterhtml blur test
		</title>
		<script src="https://unpkg.com/lodash"></script>
		<script src="https://unpkg.com/lighterhtml"></script>
	</head>
	<body>
		<script>
			const {html, render} = lighterhtml;

			const blur = () => {
				console.log('blur');
				update();
			}

			const view = (state = false) => () => html`
				<div>
					Steps to reproduce:
					<ol>
						<li>Open console</li>
						<li>Click on the input below and type swomething there</li>
						<li>Without clicking anywhere else, click the browser address line and type <code>#foo</code> in the end of current address</li>
						<li>Hit &quot;Enter&quot;</li>
					</ol>
				</div>
				<div>
					${state ? html`<div><p>Mojn</p></div>` : html`<div><p>Test</p><input type="text" value=${state} onblur=${blur}></div>`}
				</div>
			`;

			const update = (state) => render(document.body, view(state));
			const lateUpdate = _.debounce(update);

			window.addEventListener('popstate', () => {
				console.log('popstate');
				lateUpdate(true);
			});

			update();
		</script>
	</body>

<html>
	<!doctype html>
	<html>
	<head>
	<title>
	Lighterhtml blur test
	</title>
	<script src="https://unpkg.com/lodash"></script>
	<script src="https://unpkg.com/lighterhtml"></script>
	</head>
	<body>
	<script>
	const {html, render} = lighterhtml;

	const blur = () => {
	console.log('blur');
	update();
	}

	const view = (state = false) => () => html`
	<div>
	Steps to reproduce:
	<ol>
	<li>Open console</li>
	<li>Click on the input below and type swomething there</li>
	<li>Without clicking anywhere else, click the browser address line and type <code>#foo</code> in the end of current address</li>
	<li>Hit "Enter"</li>
	</ol>
	</div>
	<div>
	${state ? html`<div><p>Mojn</p></div>` : html`<div><p>Test</p><input type="text" value=${state} onblur=${blur}></div>`}
	</div>
	`;

	const update = (state) => render(document.body, view(state));
	const lateUpdate = _.debounce(update);

	window.addEventListener('popstate', () => {
	console.log('popstate');
	lateUpdate(true);
	});

	update();
	</script>
	</body>

	<html>