0.0.300

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

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

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

apps/compare/src/content/2-templating/6-conditional/purify.js/TrafficLight.ts

@@ -1,13 +1,18 @@
-import { fragment, ref, tags } from "@purifyjs/core";
+import {
+	computed,
+	fragment,
+	ref,
+	tags,
+} from "@purifyjs/core";
 
 const { button, p, span } = tags;
 
 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}`,
 				);
 			}),
 		),

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

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

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

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 ? "😀" : "😥")),
 		),
 	);
 }

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

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

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

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

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,