Allowed any Node type in the builder. So it can be used for anything,…

… fragments, shadowRoot, and more.

README.md

@@ -16,21 +16,22 @@
 </p>
 
 # Features
-- Keeps you close to the DOM.
-- HTMLElement builder allows you to differentiate between attributes and properties.
-- Converts existing HTMLElement methods to builder pattern with `Proxy`.
-- Uses signals for reactivity.
-- Makes using signals easier with things like `.pipe()`, `.derive()` and more.
-- Allows direct DOM manipulation.
-- No special file extensions.
-- Only deal with `.ts` files, so use it with any existing formatting, linting and other tools.
-- No extra LSP and IDE extension/plugin. So fast IDE resposes, autocompleting and more.
-- No weird refactoring errors and issues, caused by framework specific LSPs.
-- No weird "can't find auto import" issues.
-- No LSP hacks.
-- No compiler hacks.
-- No type generation.
-- All verifiable TypeScript code.
+
+-   Keeps you close to the DOM.
+-   HTMLElement builder allows you to differentiate between attributes and properties.
+-   Converts existing HTMLElement methods to builder pattern with `Proxy`.
+-   Uses signals for reactivity.
+-   Makes using signals easier with things like `.pipe()`, `.derive()` and more.
+-   Allows direct DOM manipulation.
+-   No special file extensions.
+-   Only deal with `.ts` files, so use it with any existing formatting, linting and other tools.
+-   No extra LSP and IDE extension/plugin. So fast IDE resposes, autocompleting and more.
+-   No weird refactoring errors and issues, caused by framework specific LSPs.
+-   No weird "can't find auto import" issues.
+-   No LSP hacks.
+-   No compiler hacks.
+-   No type generation.
+-   All verifiable TypeScript code.
 
 ## Compare
 
@@ -113,13 +114,13 @@ function useBindNumber(
     }
 }
 
-document.body.append(App().element)
+document.body.append(App().node)
 ```
 
 ### ShadowRoot
 
 ```ts
-import { fragment, ref, tags } from "@purifyjs/core"
+import { Builder, ref, tags } from "@purifyjs/core"
 
 const { div, button } = tags
 
@@ -129,22 +130,58 @@ function App() {
 
 function Counter() {
     const host = div()
-    const shadow = host.element.attachShadow({ mode: "open" })
+    const shadow = new Builder(host.node.attachShadow({ mode: "open" }))
 
     const count = ref(0)
 
-    shadow.append(
-        fragment(
+    shadow.children(
+        button()
+            .title("Click me!")
+            .onclick(() => count.val++)
+            .children("Count:", count)
+    )
+    return host
+}
+
+document.body.append(App().node)
+```
+
+### Web Components
+
+```ts
+import { Builder, ref, tags, WithLifecycle } from "@purifyjs/core"
+
+const { div, button } = tags
+
+function App() {
+    return div().id("app").children(new CounterElement())
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "x-counter": CounterElement
+    }
+}
+
+class CounterElement extends WithLifecycle(HTMLElement) {
+    static _ = customElements.define("x-counter", CounterElement)
+
+    #count = ref(0)
+
+    constructor() {
+        super()
+        const self = new Builder<CounterElement>(this)
+
+        self.children(
             button()
                 .title("Click me!")
-                .onclick(() => count.val++)
-                .children("Count:", count)
+                .onclick(() => this.#count.val++)
+                .children("Count:", this.#count)
         )
-    )
-    return host
+    }
 }
 
-document.body.append(App().element)
+document.body.append(App().node)
 ```
 
 ## Guide 🥡

apps/compare/src/content/2-templating/2-styling/purify.js/CssShdowDom.ts

@@ -5,7 +5,7 @@ const { div, h1, button } = tags;
 
 export function CssStyle() {
 	const host = div();
-	const shadow = host.element.attachShadow({
+	const shadow = host.node.attachShadow({
 		mode: "open",
 	});
 	shadow.adoptedStyleSheets.push(CssStyleSheet);

apps/compare/src/content/4-component-composition/4-slot-fallback/purify.js/FunnyButton.ts

@@ -17,7 +17,7 @@ export function FunnyButton() {
 			"outline: 0",
 		].join(";"),
 	});
-	const shadow = host.element.attachShadow({
+	const shadow = host.node.attachShadow({
 		mode: "open",
 	});
 	shadow.append(

apps/compare/src/content/7-webapp-features/1-render-app/purify.js/app.ts

@@ -6,4 +6,4 @@ export function App() {
 	return div().id("app").children(h1().children("Hello World"));
 }
 
-document.body.append(App().element);
+document.body.append(App().node);

apps/vite/src/examples/.prettierrc

@@ -6,7 +6,7 @@
 				"tabWidth": 4,
 				"useTabs": true,
 				"bracketSameLine": true,
-				"printWidth": 70,
+				"printWidth": 80,
 				"arrowParens": "always",
 				"bracketSpacing": true,
 				"experimentalTernaries": true

apps/vite/src/examples/counter-example.ts

@@ -1,10 +1,4 @@
-import {
-	computed,
-	Lifecycle,
-	ref,
-	Signal,
-	tags,
-} from "@purifyjs/core";
+import { computed, Lifecycle, ref, Signal, tags } from "@purifyjs/core";
 
 const { div, section, button, ul, li, input } = tags;
 
@@ -25,10 +19,7 @@ function Counter() {
 					.title("Decrement by 1")
 					.onclick(() => count.val--)
 					.textContent("-"),
-				input()
-					.type("number")
-					.effect(useBindNumber(count))
-					.step("1"),
+				input().type("number").effect(useBindNumber(count)).step("1"),
 				button()
 					.title("Increment by 1")
 					.onclick(() => count.val++)
@@ -63,4 +54,4 @@ function useBindNumber(
 	};
 }
 
-document.body.append(App().element);
+document.body.append(App().node);

apps/vite/src/examples/shadowroot-example.ts

@@ -0,0 +1,24 @@
+import { Builder, ref, tags } from "@purifyjs/core";
+
+const { div, button } = tags;
+
+function App() {
+	return div().id("app").children(Counter());
+}
+
+function Counter() {
+	const host = div();
+	const shadow = new Builder(host.node.attachShadow({ mode: "open" }));
+
+	const count = ref(0);
+
+	shadow.children(
+		button()
+			.title("Click me!")
+			.onclick(() => count.val++)
+			.children("Count:", count),
+	);
+	return host;
+}
+
+document.body.append(App().node);

apps/vite/src/examples/web-component-example.ts

@@ -0,0 +1,33 @@
+import { Builder, ref, tags, WithLifecycle } from "@purifyjs/core";
+
+const { div, button } = tags;
+
+function App() {
+	return div().id("app").children(new CounterElement());
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"x-counter": CounterElement;
+	}
+}
+
+class CounterElement extends WithLifecycle(HTMLElement) {
+	static _ = customElements.define("x-counter", CounterElement);
+
+	#count = ref(0);
+
+	constructor() {
+		super();
+		const self = new Builder<CounterElement>(this);
+
+		self.children(
+			button()
+				.title("Click me!")
+				.onclick(() => this.#count.val++)
+				.children("Count:", this.#count),
+		);
+	}
+}
+
+document.body.append(App().node);

lib/tags.test.ts

@@ -8,8 +8,8 @@ function _(fn: () => void) {}
 
 _(() => {
     // Elements should still satisfy the native types
-    tags.a().element satisfies HTMLAnchorElement
-    tags.form().element satisfies HTMLFormElement
+    tags.a().node satisfies HTMLAnchorElement
+    tags.form().node satisfies HTMLFormElement
 })
 
 declare function foo(x: Builder<HTMLElement>): void