docs: better demos

src/browser.ts

@@ -1,31 +1,82 @@
 import './style.css';
-import {makeDerivedStore, makeStore} from './lib';
+import {makeDerivedStore, makeReactiveRoot, makeStore} from './lib';
 
 const appDiv = document.getElementById('app') as HTMLDivElement;
 
-const random1$ = makeStore(0);
-const random2$ = makeStore(0);
-const sum$ = makeDerivedStore({r1: random1$, r2: random2$}, ({r1, r2}) => r1 + r2);
+// Using just stores
+{
+	const titleH2 = document.createElement('h2');
+	titleH2.textContent = 'Using just stores';
+	appDiv.appendChild(titleH2);
 
-const span1 = document.createElement('span');
-appDiv.appendChild(span1);
-const span2 = document.createElement('span');
-appDiv.appendChild(span2);
-const spanSum = document.createElement('span');
-appDiv.appendChild(spanSum);
+	const random1$ = makeStore(0);
+	const random2$ = makeStore(0);
+	const sum$ = makeDerivedStore({r1: random1$, r2: random2$}, ({r1, r2}) => r1 + r2);
 
-random1$.subscribe((r1) => (span1.innerText = String(r1) + ' + '));
-random2$.subscribe((r2) => (span2.innerText = String(r2) + ' = '));
-sum$.subscribe((sum) => (spanSum.innerText = String(sum)));
+	const span1 = document.createElement('span');
+	appDiv.appendChild(span1);
+	const span2 = document.createElement('span');
+	appDiv.appendChild(span2);
+	const spanSum = document.createElement('span');
+	appDiv.appendChild(spanSum);
 
-appDiv.appendChild(document.createElement('br'));
+	random1$.subscribe((r1) => (span1.textContent = `${r1} + `));
+	random2$.subscribe((r2) => (span2.textContent = `${r2} = `));
+	sum$.subscribe((sum) => (spanSum.textContent = `${sum}`));
 
-const button1 = document.createElement('button');
-button1.innerText = 'random1';
-button1.addEventListener('click', () => random1$.set(Math.floor(10 * Math.random())));
-appDiv.appendChild(button1);
+	appDiv.appendChild(document.createElement('br'));
 
-const button2 = document.createElement('button');
-button2.innerText = 'random2';
-button2.addEventListener('click', () => random2$.set(Math.floor(10 * Math.random())));
-appDiv.appendChild(button2);
+	const button1 = document.createElement('button');
+	button1.textContent = 'random1';
+	button1.addEventListener('click', () => random1$.set(Math.floor(100 * Math.random())));
+	appDiv.appendChild(button1);
+
+	const button2 = document.createElement('button');
+	button2.textContent = 'random2';
+	button2.addEventListener('click', () => random2$.set(Math.floor(100 * Math.random())));
+	appDiv.appendChild(button2);
+
+	appDiv.appendChild(document.createElement('br'));
+	appDiv.appendChild(document.createElement('br'));
+	appDiv.appendChild(document.createElement('br'));
+	appDiv.appendChild(document.createElement('br'));
+}
+// Using the effect system
+{
+	const titleH2 = document.createElement('h2');
+	titleH2.textContent = 'Using the effect system';
+	appDiv.appendChild(titleH2);
+
+	const random1$ = makeStore(0);
+	const random2$ = makeStore(0);
+	const sum = () => random1$.watch() + random2$.watch();
+
+	const span1 = document.createElement('span');
+	appDiv.appendChild(span1);
+	const span2 = document.createElement('span');
+	appDiv.appendChild(span2);
+	const spanSum = document.createElement('span');
+	appDiv.appendChild(spanSum);
+
+	const {makeEffect} = makeReactiveRoot();
+	makeEffect(() => {
+		span1.textContent = `${random1$.watch()} + `;
+		span2.textContent = `${random2$.watch()} = `;
+	});
+	// showcase a derived-like behavior
+	makeEffect(() => {
+		spanSum.textContent = `${sum()}`;
+	});
+
+	appDiv.appendChild(document.createElement('br'));
+
+	const button1 = document.createElement('button');
+	button1.textContent = 'random1';
+	button1.addEventListener('click', () => random1$.set(Math.floor(100 * Math.random())));
+	appDiv.appendChild(button1);
+
+	const button2 = document.createElement('button');
+	button2.textContent = 'random2';
+	button2.addEventListener('click', () => random2$.set(Math.floor(100 * Math.random())));
+	appDiv.appendChild(button2);
+}

src/node.ts

@@ -1,8 +1,10 @@
-import {makeStore} from './lib';
+import {makeReactiveRoot, makeStore} from './lib';
 
 const random$ = makeStore(0);
 
-random$.subscribe(console.log);
+random$.subscribe((r) => console.log('random value from subscription: ', r));
+const {makeEffect} = makeReactiveRoot();
+makeEffect(() => console.log('random value from effect: ', random$.watch()));
 
 const interval = setInterval(() => {
 	random$.set(Math.random());