Merge pull request #1 from JAForbes/clean-dom-structures

Remove DOM hooks from document

lib/index.ts

@@ -1,7 +1,7 @@
 import * as Parser from './parser'
 import { pretty } from './pretty'
 
-import type { Static, FactoryComponent, Vnode, VnodeDOM } from 'mithril'
+import type { Static, Component, FactoryComponent, Vnode, VnodeDOM } from 'mithril'
 
 function isTemplateString(strings: any): strings is TemplateStringsArray {
 	// deliberately a lie to make it easier to make utils in userland with
@@ -47,7 +47,7 @@ const reorderArgs = (args: any[]) => {
 	// if attrs isn't the first arg
 	let i = 1;
 	for( let a of args.slice(1) as any[] ) {
-		
+
 		if (Parser.nested.has(a)) {
 			args.splice(i, 1)
 			args.push(a)
@@ -100,40 +100,34 @@ export { pretty }
 export default function Setup(m: Static, options?: Options) {
 	let styleEl: [HTMLStyleElement] | [] = []
 
-	const base = pretty(`
-		css-node {
-			display: none;
-		}
-	`)
-
 	if (!options?.server) {
 		styleEl = [document.createElement('style')]
 
 		for (let el of styleEl) {
 			el.type = 'text/css'
 			document.head.appendChild(el)
 
-			el.textContent += '\n' + base
+			el.textContent += '\n'
 		}
-	} else {
-		sheets.set('', base)
 	}
 
-	const h: Static = 
-		
+	const h: Static =
+
 		Object.assign((...args: Parameters<Static>) => {
 			// has to happen before the native mithril hyperscript
 			// because it does the key check there, and it will fail
 			// if attrs isn't the first arg
 			hyperscriptPlugin.before(args, options)
-			
+
 			const vnode = m(...args)
 
 			hyperscriptPlugin.after(vnode, options)
 
 			return vnode
 		}, m)
 
+	const Empty: Component = {view: () => ''}
+
 	const Component: FactoryComponent<{
 		strings: TemplateStringsArray
 		values: any[]
@@ -142,7 +136,7 @@ export default function Setup(m: Static, options?: Options) {
 		return {
 			view: ({ attrs: { strings, values } }) => {
 				const parsed = Parser.cachedParser(strings, ...values)
-				return m('css-node', {
+				return m(Empty, {
 					key: parsed.hash,
 					onremove() {
 						while (onremoves.length) {
@@ -161,11 +155,13 @@ export default function Setup(m: Static, options?: Options) {
 						// rest happens in hyperscript plugin
 					},
 					oncreate(vnode) {
+						const parent = vnode.dom.parentNode as HTMLElement;
+
 						if (options?.server) {
 							return
 						}
 
-						(vnode.dom as any).parentNode.classList.add(parsed.hash)
+						parent.classList.add(parsed.hash)
 
 						if (!sheets.has(parsed.hash)) {
 							for (let el of styleEl) {
@@ -177,7 +173,7 @@ export default function Setup(m: Static, options?: Options) {
 							if (isStream(v.value)) {
 								onremoves.push(
 									v.value.observe((latest) => {
-										;(vnode.dom.parentNode as HTMLElement).style.setProperty(
+										parent.style.setProperty(
 											v.varName(),
 											latest,
 										)

test/browser.ts

@@ -57,9 +57,6 @@ test('browser', async () => {
 	assert.equal(
 		pretty(document.head.children[0].innerHTML),
 		pretty(`
-			css-node {
-				display: none;
-			}
 		  .${className} {
 			color: var(--${className}-1);
 			@media(min-width: 1000px) {

test/server.ts

@@ -48,9 +48,6 @@ test('server', async () => {
 	assertStringEq(
 		pretty([...sheets.values()].join('')),
 		pretty(`
-			css-node {
-				display: none;
-			}
 			.css-3wjkw3 {
 				color: var(--css-3wjkw3-1);
 				@media(min-width: 1000px) {