diff --git a/README.md b/README.md
index 02f3c69..a2fa961 100644
--- a/README.md
+++ b/README.md
@@ -33,24 +33,24 @@
 
 ### Syntax
 
-[Compare Syntax](https://bafybeici7qujgoz3bvlyyu6oxngtmsgriywwuh7zi2fgtzasnpi3vh4mte.ipfs.dweb.link)
+[Compare Syntax](https://bafybeigez3hth3c4ryra4g4itnertz5mdyhqegv6tzfntnchhtocayx2l4.ipfs.dweb.link)
 
 ## Installation 🍙
 
 To install **purify.js**, follow the
-[installation instructions](https://github.com/DeepDoge/purify.js/releases).
+[jsr.io/@purifyjs/core](https://jsr.io/@purifyjs/core).
 
 ## Examples
 
 ### purify.js + ShadowRoot 🍤
 
 ```ts
-import { css, fragment, ref, tags } from "@purifyjs/core"
+import { fragment, ref, tags } from "@purifyjs/core"
 
 const { div, button } = tags
 
 function App() {
-    return div({ id: "app" }).children(Counter())
+    return div().id("app").children(Counter())
 }
 
 function Counter() {
diff --git a/TODO.md b/TODO.md
index 22ca728..6be9b3a 100644
--- a/TODO.md
+++ b/TODO.md
@@ -57,7 +57,7 @@ here some starting point for the new signals:
 abstract class Signal<T> {
     public abstract follow(
         follower: Signal.Follower<T>,
-        immediate?: boolean,
+        immediate?: boolean
     ): Signal.Unfollower
 
     get val() {
diff --git a/apps/compare/src/content/1-reactivity/3-computed-state/purify.js/DoubleCount.ts b/apps/compare/src/content/1-reactivity/3-computed-state/purify.js/DoubleCount.ts
index 8ba8760..cabe071 100644
--- a/apps/compare/src/content/1-reactivity/3-computed-state/purify.js/DoubleCount.ts
+++ b/apps/compare/src/content/1-reactivity/3-computed-state/purify.js/DoubleCount.ts
@@ -1,10 +1,10 @@
-import { ref, tags } from "@purifyjs/core";
+import { computed, ref, tags } from "@purifyjs/core";
 
 const { div } = tags;
 
 export function DoubleCount() {
 	const count = ref(10);
-	const doubleCount = count.derive((count) => count * 2);
+	const doubleCount = computed(() => count.val * 2);
 
 	return div().children(doubleCount);
 }
diff --git a/apps/compare/src/content/1-reactivity/3-computed-state/purify.js/DoubleCountAlternative.ts b/apps/compare/src/content/1-reactivity/3-computed-state/purify.js/DoubleCountAlternative.ts
deleted file mode 100644
index aab4137..0000000
--- a/apps/compare/src/content/1-reactivity/3-computed-state/purify.js/DoubleCountAlternative.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { computed, ref, tags } from "@purifyjs/core";
-
-const { div } = tags;
-
-export function DoubleCountAlternative() {
-	const count = ref(10);
-	const doubleCount = computed(
-		(add) => add(count).val * 2,
-	);
-
-	return div().children(doubleCount);
-}
diff --git a/apps/compare/src/content/2-templating/6-conditional/purify.js/TrafficLight.ts b/apps/compare/src/content/2-templating/6-conditional/purify.js/TrafficLight.ts
index 2a7a7e7..45d840a 100644
--- a/apps/compare/src/content/2-templating/6-conditional/purify.js/TrafficLight.ts
+++ b/apps/compare/src/content/2-templating/6-conditional/purify.js/TrafficLight.ts
@@ -1,4 +1,9 @@
-import { fragment, ref, tags } from "@purifyjs/core";
+import {
+	computed,
+	fragment,
+	ref,
+	tags,
+} from "@purifyjs/core";
 
 const { button, p, span } = tags;
 
@@ -6,8 +11,8 @@ const TRAFFIC_LIGHTS = ["red", "orange", "green"] as const;
 export function TrafficsLight() {
 	const lightIndex = ref(0);
 
-	const light = lightIndex.derive(
-		(lightIndex) => TRAFFIC_LIGHTS[lightIndex],
+	const light = computed(
+		() => TRAFFIC_LIGHTS[lightIndex.val],
 	);
 
 	function nextLight() {
@@ -22,17 +27,17 @@ export function TrafficsLight() {
 		p().children("Light is: ", light),
 		p().children(
 			"You must",
-			light.derive((light) => {
-				if (light === "red") {
+			computed(() => {
+				if (light.val === "red") {
 					return span().textContent("STOP");
-				} else if (light === "orange") {
+				} else if (light.val === "orange") {
 					return span().textContent("SLOW DOWN");
-				} else if (light === "green") {
+				} else if (light.val === "green") {
 					return span().textContent("GO");
 				}
-				light satisfies never;
+				light.val satisfies never;
 				throw new Error(
-					`Unhandled light: ${light}`,
+					`Unhandled light: ${light.val}`,
 				);
 			}),
 		),
diff --git a/apps/compare/src/content/3-lifecycle/2-on-unmount/purify.js/Time.ts b/apps/compare/src/content/3-lifecycle/2-on-unmount/purify.js/Time.ts
index c81dafc..2c39514 100644
--- a/apps/compare/src/content/3-lifecycle/2-on-unmount/purify.js/Time.ts
+++ b/apps/compare/src/content/3-lifecycle/2-on-unmount/purify.js/Time.ts
@@ -3,15 +3,14 @@ import { ref, tags } from "@purifyjs/core";
 const { p } = tags;
 
 export function Time() {
-	const host = p();
-
 	const time = ref(new Date().toLocaleTimeString());
-	host.element.onConnect(() => {
-		const interval = setInterval(() => {
-			time.val = new Date().toLocaleTimeString();
-		}, 1000);
-		return () => clearInterval(interval);
-	});
 
-	return host.children("Current time: ", time);
+	return p()
+		.use(() => {
+			const interval = setInterval(() => {
+				time.val = new Date().toLocaleTimeString();
+			}, 1000);
+			return () => clearInterval(interval);
+		})
+		.children("Current time: ", time);
 }
diff --git a/apps/compare/src/content/3-lifecycle/2-on-unmount/purify.js/TimeAlternative.ts b/apps/compare/src/content/3-lifecycle/2-on-unmount/purify.js/TimeAlternative.ts
deleted file mode 100644
index 02ad565..0000000
--- a/apps/compare/src/content/3-lifecycle/2-on-unmount/purify.js/TimeAlternative.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { fragment, ref, tags } from "@purifyjs/core";
-
-const { p } = tags;
-
-export function TimeAlternative() {
-	const host = p();
-	const shadow = host.element.attachShadow({
-		mode: "open",
-	});
-	shadow.append(fragment("Current time: ", time));
-
-	return host;
-}
-
-const time = ref("", (set) => {
-	const interval = setInterval(() => {
-		set(new Date().toLocaleTimeString());
-	}, 1000);
-
-	set(new Date().toLocaleTimeString());
-	return () => clearInterval(interval);
-});
diff --git a/apps/compare/src/content/4-component-composition/1-props/purify.js/App.ts b/apps/compare/src/content/4-component-composition/1-props/purify.js/App.ts
index 82fb806..afba090 100644
--- a/apps/compare/src/content/4-component-composition/1-props/purify.js/App.ts
+++ b/apps/compare/src/content/4-component-composition/1-props/purify.js/App.ts
@@ -1,24 +1,17 @@
-import { fragment, tags } from "@purifyjs/core";
+import { tags } from "@purifyjs/core";
 import { UserProfile } from "./UserProfile";
 
 const { div } = tags;
 
 export function App() {
-	const host = div().id("app");
-	const shadow = host.element.attachShadow({
-		mode: "open",
-	});
-
-	shadow.append(
-		fragment(
+	return div()
+		.id("app")
+		.children(
 			UserProfile({
 				name: "John",
 				age: 30,
 				favouriteColors: ["red", "green", "blue"],
 				isAvailable: true,
 			}),
-		),
-	);
-
-	return host;
+		);
 }
diff --git a/apps/compare/src/content/4-component-composition/1-props/purify.js/UserProfile.ts b/apps/compare/src/content/4-component-composition/1-props/purify.js/UserProfile.ts
index b1c4d15..a2ad6e1 100644
--- a/apps/compare/src/content/4-component-composition/1-props/purify.js/UserProfile.ts
+++ b/apps/compare/src/content/4-component-composition/1-props/purify.js/UserProfile.ts
@@ -1,4 +1,4 @@
-import { fragment, tags } from "@purifyjs/core";
+import { tags } from "@purifyjs/core";
 
 const { div, p } = tags;
 
@@ -8,25 +8,16 @@ export function UserProfile({
 	favouriteColors = [] as string[],
 	isAvailable = false,
 }) {
-	const host = div();
-	const shadow = host.element.attachShadow({
-		mode: "open",
-	});
-
-	shadow.append(
-		fragment(
-			p().children("My name is ", name),
-			p().children("My age is ", age),
-			p().children(
-				"My favourite colors are ",
-				favouriteColors.join(", "),
-			),
-			p().children(
-				"I am ",
-				isAvailable ? "available" : "not available",
-			),
+	return div().children(
+		p().children("My name is ", name),
+		p().children("My age is ", age),
+		p().children(
+			"My favourite colors are ",
+			favouriteColors.join(", "),
+		),
+		p().children(
+			"I am ",
+			isAvailable ? "available" : "not available",
 		),
 	);
-
-	return host;
 }
diff --git a/apps/compare/src/content/4-component-composition/2-emit-to-parent/purify.js/App.ts b/apps/compare/src/content/4-component-composition/2-emit-to-parent/purify.js/App.ts
index 35e803c..4e0488b 100644
--- a/apps/compare/src/content/4-component-composition/2-emit-to-parent/purify.js/App.ts
+++ b/apps/compare/src/content/4-component-composition/2-emit-to-parent/purify.js/App.ts
@@ -1,4 +1,9 @@
-import { fragment, ref, tags } from "@purifyjs/core";
+import {
+	computed,
+	fragment,
+	ref,
+	tags,
+} from "@purifyjs/core";
 import { AnswerButton } from "./AnswerButton";
 
 const { p } = tags;
@@ -21,9 +26,7 @@ export function App() {
 			onNo: onAnswerNo,
 		}),
 		p({ style: "font-size: 5em" }).children(
-			isHappy.derive((isHappy) =>
-				isHappy ? "😀" : "😥",
-			),
+			computed(() => (isHappy.val ? "😀" : "😥")),
 		),
 	);
 }
diff --git a/apps/compare/src/content/6-form-input/1-input-text/purify.js/util-bind.ts b/apps/compare/src/content/6-form-input/1-input-text/purify.js/util-bind.ts
index ac54897..a1c35ac 100644
--- a/apps/compare/src/content/6-form-input/1-input-text/purify.js/util-bind.ts
+++ b/apps/compare/src/content/6-form-input/1-input-text/purify.js/util-bind.ts
@@ -1,4 +1,4 @@
-import { Enhanced, Signal } from "@purifyjs/core";
+import { Lifecycle, Signal } from "@purifyjs/core";
 
 export function bind<
 	T,
@@ -7,7 +7,7 @@ export function bind<
 	signal: Signal.State<T>,
 	propertyName: P,
 	eventName: keyof HTMLElementEventMap | (string & {}),
-): Enhanced.OnConnected<HTMLElement & { [_ in P]: T }> {
+): Lifecycle.OnConnected<HTMLElement & { [_ in P]: T }> {
 	return (element) => {
 		const handler = () =>
 			(signal.val = element[propertyName]);
diff --git a/apps/compare/src/content/6-form-input/3-radio/purify.js/PickPill.ts b/apps/compare/src/content/6-form-input/3-radio/purify.js/PickPill.ts
index 4a46f48..af7f573 100644
--- a/apps/compare/src/content/6-form-input/3-radio/purify.js/PickPill.ts
+++ b/apps/compare/src/content/6-form-input/3-radio/purify.js/PickPill.ts
@@ -1,4 +1,9 @@
-import { fragment, ref, tags } from "@purifyjs/core";
+import {
+	computed,
+	fragment,
+	ref,
+	tags,
+} from "@purifyjs/core";
 
 const { div, input, label } = tags;
 
@@ -10,19 +15,13 @@ export function PickPill() {
 		input()
 			.id("blue-pill")
 			.type("radio")
-			.checked(
-				picked.derive(
-					(picked) => picked === "blue",
-				),
-			)
+			.checked(computed(() => picked.val === "blue"))
 			.onchange(() => (picked.val = "blue")),
 		label({ for: "blue-pill" }).children("Blue pill"),
 		input()
 			.id("red-pill")
 			.type("radio")
-			.checked(
-				picked.derive((picked) => picked === "red"),
-			)
+			.checked(computed(() => picked.val === "red"))
 			.onchange(() => (picked.val = "red")),
 		label({ for: "red-pill" }).children("Red pill"),
 	);
diff --git a/apps/compare/src/content/6-form-input/4-select/purify.js/ColorSelect.ts b/apps/compare/src/content/6-form-input/4-select/purify.js/ColorSelect.ts
index 69f4daf..e596a6f 100644
--- a/apps/compare/src/content/6-form-input/4-select/purify.js/ColorSelect.ts
+++ b/apps/compare/src/content/6-form-input/4-select/purify.js/ColorSelect.ts
@@ -1,4 +1,9 @@
-import { fragment, ref, tags } from "@purifyjs/core";
+import {
+	computed,
+	fragment,
+	ref,
+	tags,
+} from "@purifyjs/core";
 
 const { select, option } = tags;
 
@@ -15,9 +20,7 @@ export function PickPill() {
 	return fragment(
 		select()
 			.value(
-				selectedColorId.derive((selectedColorId) =>
-					String(selectedColorId),
-				),
+				computed(() => String(selectedColorId.val)),
 			)
 			.onchange(
 				(event) =>
diff --git a/apps/compare/src/content/7-webapp-features/1-render-app/purify.js/app.ts b/apps/compare/src/content/7-webapp-features/1-render-app/purify.js/app.ts
index 5cc845c..c6d1dd1 100644
--- a/apps/compare/src/content/7-webapp-features/1-render-app/purify.js/app.ts
+++ b/apps/compare/src/content/7-webapp-features/1-render-app/purify.js/app.ts
@@ -1,15 +1,11 @@
-import { fragment, tags } from "@purifyjs/core";
+import { tags } from "@purifyjs/core";
 
 const { div, h1 } = tags;
 
 export function App() {
-	const host = div().id("app");
-	const shadow = host.element.attachShadow({
-		mode: "open",
-	});
-	shadow.append(fragment(h1().children("Hello World")));
-
-	return host;
+	return div()
+		.id("app")
+		.children(h1().children("Hello World"));
 }
 
 document.body.append(App().element);
diff --git a/apps/compare/src/content/7-webapp-features/2-fetch-data/purify.js/App.ts b/apps/compare/src/content/7-webapp-features/2-fetch-data/purify.js/App.ts
index 42edd0f..a989562 100644
--- a/apps/compare/src/content/7-webapp-features/2-fetch-data/purify.js/App.ts
+++ b/apps/compare/src/content/7-webapp-features/2-fetch-data/purify.js/App.ts
@@ -1,4 +1,9 @@
-import { awaited, fragment, tags } from "@purifyjs/core";
+import {
+	awaited,
+	computed,
+	fragment,
+	tags,
+} from "@purifyjs/core";
 import { fetchUsers } from "./fetchUsers";
 
 const { p, ul, li, img } = tags;
@@ -14,16 +19,16 @@ export function App() {
 	);
 
 	return fragment(
-		response.derive((response) => {
-			if (!response) {
+		computed(() => {
+			if (!response.val) {
 				return p().children("Fetching users...");
-			} else if (response instanceof Error) {
+			} else if (response.val instanceof Error) {
 				return p().children(
 					"An error occurred while fetching users",
 				);
 			} else {
 				return ul().children(
-					response.map((user) =>
+					response.val.map((user) =>
 						li().children(
 							img().src(
 								user.picture.thumbnail,
diff --git a/apps/compare/src/frameworks.ts b/apps/compare/src/frameworks.ts
index 6e2a14e..4899acb 100644
--- a/apps/compare/src/frameworks.ts
+++ b/apps/compare/src/frameworks.ts
@@ -1,10 +1,10 @@
 const contentImports = import.meta.glob("./content/**/*", {
     query: "?raw",
-    import: "default",
+    import: "default"
 })
 const iconImports = import.meta.glob("./icons/**/*", {
     query: "?url",
-    import: "default",
+    import: "default"
 })
 
 export type Framework = {
@@ -61,19 +61,19 @@ export async function getFrameworks() {
         frameworks[framework] ??= {
             label: `${framework[0].toUpperCase()}${framework.slice(1)}`,
             iconSrc,
-            groups: {},
+            groups: {}
         }
         frameworks[framework].groups[group] ??= {
             label: toLabel(group),
-            examples: {},
+            examples: {}
         }
         frameworks[framework].groups[group].examples[example] ??= {
             label: toLabel(example),
-            files: [],
+            files: []
         }
         frameworks[framework].groups[group].examples[example].files.push({
             name: file,
-            content,
+            content
         })
     }
     return frameworks
diff --git a/apps/compare/vite.config.ts b/apps/compare/vite.config.ts
index a821051..da64ed6 100644
--- a/apps/compare/vite.config.ts
+++ b/apps/compare/vite.config.ts
@@ -6,6 +6,6 @@ export default defineConfig({
     appType: "spa",
     build: {
         target: "esnext",
-        emptyOutDir: true,
-    },
+        emptyOutDir: true
+    }
 })
diff --git a/apps/vite/vite.config.ts b/apps/vite/vite.config.ts
index 6038655..aec4755 100644
--- a/apps/vite/vite.config.ts
+++ b/apps/vite/vite.config.ts
@@ -4,7 +4,7 @@ export default defineConfig({
     build: {
         target: "esnext",
         modulePreload: {
-            polyfill: false,
-        },
-    },
+            polyfill: false
+        }
+    }
 })
diff --git a/jsr.json b/jsr.json
index a440b2c..9f6425d 100644
--- a/jsr.json
+++ b/jsr.json
@@ -1,6 +1,6 @@
 {
     "name": "@purifyjs/core",
-    "version": "0.0.229",
+    "version": "0.0.300",
     "exports": "./lib/all.ts",
     "publish": {
         "include": ["lib", "LICENSE", "README.md"]