deka-dom-el/docs_src/components/examples/introducing/helloWorld.js

import { el } from "deka-dom-el";
import { S } from "deka-dom-el/signals";
const clicks= S(0); // A
document.body.append(
	el().append(
		el("p", S(()=>
			"Hello World "+"🎉".repeat(clicks()) // B
		)),
		el("button", {
			type: "button",
			onclick: ()=> clicks(clicks()+1), // C
			textContent: "Fire",
		})
	)
);
:pencil2: docs (:hammer: examples, :construction: events) 2023-11-18 14:23:18 +01:00			`import { el } from "deka-dom-el";`
:zap: Replace “observable” term with “signal” (#19) * :zap: refact docs to make editing (now renaming observables to signal) easier * :zap: :zap: use signal(s) term isntead of observable(s) * :zap: :abc: version + typo * :bug: customElement example (0→S) * :tv: version in package-lock.json 2024-05-22 21:43:49 +02:00			`import { S } from "deka-dom-el/signals";`
:abc: 3PS 2024-06-03 16:20:42 +02:00			`const clicks= S(0); // A`
:sparkles: Add docs page 2023-09-26 16:02:10 +02:00			`document.body.append(`
:sparkles: Create DocumentFragment also with el() 2023-11-06 14:04:27 +01:00			`el().append(`
:zap: Replace “observable” term with “signal” (#19) * :zap: refact docs to make editing (now renaming observables to signal) easier * :zap: :zap: use signal(s) term isntead of observable(s) * :zap: :abc: version + typo * :bug: customElement example (0→S) * :tv: version in package-lock.json 2024-05-22 21:43:49 +02:00			`el("p", S(()=>`
:abc: 3PS 2024-06-03 16:20:42 +02:00			`"Hello World "+"🎉".repeat(clicks()) // B`
:sparkles: Add docs page 2023-09-26 16:02:10 +02:00			`)),`
			`el("button", {`
			`type: "button",`
:abc: 3PS 2024-06-03 16:20:42 +02:00			`onclick: ()=> clicks(clicks()+1), // C`
			`textContent: "Fire",`
:sparkles: Add docs page 2023-09-26 16:02:10 +02:00			`})`
			`)`
			`);`