Skip to content

Instantly share code, notes, and snippets.

@peerreynders

peerreynders/README.md

Last active September 15, 2022 01:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save peerreynders/a942a2b4dac89f2e5eda456693a720ea to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save peerreynders/a942a2b4dac89f2e5eda456693a720ea to your computer and use it in GitHub Desktop.
Download ZIP
Differences for conditional nested effects
Raw
README.md

Solid (solid.html 1.5.4)

Activating: red
Red is off
Red is on
Activating: green
Green is on
Green is off
Activating: blue
Blue is off
Blue is on
Activating: red
Red is on

@preact/signals (preactive.html 1.1.0)

Activating: red
Red is off
Red is on
Activating: green
Green is on
Green is off
Activating: blue
Blue is off
Blue is on
Activating: red
Red is on

µsignal (usignal.html 0.4.7)

Activating: red
Red is off
Red is on
Activating: green
Green is on
Green is off
Activating: blue
Blue is off
Blue is on
Activating: red
Red is on
Raw
preactive.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>@preact/signals version</title>
<style></style>
</head>
<body>
<script type="module">
import * as preactive from 'https://unpkg.com/@preact/signals-core?module';
const signal = (value) => {
const obj = preactive.signal(value);
return [
() => obj.value,
(newValue) => {
obj.value = newValue;
},
];
};
const effect = preactive.effect;
const RED = 0;
const GREEN = 1;
const BLUE = 2;
const colors = ['red', 'green', 'blue'];
function setup() {
const [color, setColor] = signal(RED);
const [red, setRed] = signal(false);
const [green, setGreen] = signal(false);
const [blue, setBlue] = signal(false);
let dispose;
effect(() => {
const active = color();
console.log(`Activating: ${colors[active]}`);
if (dispose) {
dispose();
dispose = undefined;
}
switch (active) {
case RED:
dispose = effect(() =>
console.log(`Red is ${red() ? 'on' : 'off'}`)
);
break;
case GREEN:
dispose = effect(() =>
console.log(`Green is ${green() ? 'on' : 'off'}`)
);
break;
case BLUE:
dispose = effect(() =>
console.log(`Blue is ${blue() ? 'on' : 'off'}`)
);
break;
}
});
return ([key, value]) => {
switch (key) {
case 'color':
setColor(value);
break;
case 'red':
setRed(value);
break;
case 'green':
setGreen(value);
break;
case 'blue':
setBlue(value);
break;
}
};
}
const args = [
['red', true],
['green', true],
['blue', true],
['color', GREEN],
['red', false],
['green', false],
['blue', false],
['color', BLUE],
['red', true],
['green', true],
['blue', true],
['color', RED],
];
let dispose;
function run(fn, index) {
if (typeof index === 'number' && index < args.length) {
fn(args[index]);
setTimeout(run, undefined, fn, index + 1);
return;
}
if (typeof dispose === 'undefined' && typeof fn === 'function') {
dispose = fn;
const update = setup();
setTimeout(run, undefined, update, 0);
return;
}
dispose();
dispose = undefined;
}
run(() => {});
</script>
</body>
</html>
Raw
solid.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SolidJS version</title>
<style></style>
</head>
<body>
<script type="module">
import * as solid from 'https://unpkg.com/solid-js/dist/solid.js?module';
const signal = solid.createSignal;
const effect = solid.createEffect;
const RED = 0;
const GREEN = 1;
const BLUE = 2;
const colors = ['red', 'green', 'blue'];
function setup() {
const [color, setColor] = signal(RED);
const [red, setRed] = signal(false);
const [green, setGreen] = signal(false);
const [blue, setBlue] = signal(false);
effect(() => {
const active = color();
console.log(`Activating: ${colors[active]}`);
switch (active) {
case RED:
effect(() => console.log(`Red is ${red() ? 'on' : 'off'}`));
break;
case GREEN:
effect(() => console.log(`Green is ${green() ? 'on' : 'off'}`));
break;
case BLUE:
effect(() => console.log(`Blue is ${blue() ? 'on' : 'off'}`));
break;
}
});
return ([key, value]) => {
switch (key) {
case 'color':
setColor(value);
break;
case 'red':
setRed(value);
break;
case 'green':
setGreen(value);
break;
case 'blue':
setBlue(value);
break;
}
};
}
const args = [
['red', true],
['green', true],
['blue', true],
['color', GREEN],
['red', false],
['green', false],
['blue', false],
['color', BLUE],
['red', true],
['green', true],
['blue', true],
['color', RED],
];
let dispose;
function run(fn, index) {
if (typeof index === 'number' && index < args.length) {
fn(args[index]);
setTimeout(run, undefined, fn, index + 1);
return;
}
if (typeof dispose === 'undefined' && typeof fn === 'function') {
dispose = fn;
const update = setup();
setTimeout(run, undefined, update, 0);
return;
}
dispose();
dispose = undefined;
}
solid.createRoot(run);
</script>
</body>
</html>
Raw
usignal.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>µsignal version</title>
<style></style>
</head>
<body>
<script type="module">
import * as usignal from 'https://unpkg.com/usignal?module';
const signal = (value) => {
const obj = usignal.signal(value);
return [
() => obj.value,
(newValue) => {
obj.value = newValue;
},
];
};
const effect = usignal.effect;
const RED = 0;
const GREEN = 1;
const BLUE = 2;
const colors = ['red', 'green', 'blue'];
function setup() {
const [color, setColor] = signal(RED);
const [red, setRed] = signal(false);
const [green, setGreen] = signal(false);
const [blue, setBlue] = signal(false);
let dispose;
effect(() => {
const active = color();
console.log(`Activating: ${colors[active]}`);
if (dispose) {
dispose();
dispose = undefined;
}
switch (active) {
case RED:
dispose = effect(() =>
console.log(`Red is ${red() ? 'on' : 'off'}`)
);
break;
case GREEN:
dispose = effect(() =>
console.log(`Green is ${green() ? 'on' : 'off'}`)
);
break;
case BLUE:
dispose = effect(() =>
console.log(`Blue is ${blue() ? 'on' : 'off'}`)
);
break;
}
});
return ([key, value]) => {
switch (key) {
case 'color':
setColor(value);
break;
case 'red':
setRed(value);
break;
case 'green':
setGreen(value);
break;
case 'blue':
setBlue(value);
break;
}
};
}
const args = [
['red', true],
['green', true],
['blue', true],
['color', GREEN],
['red', false],
['green', false],
['blue', false],
['color', BLUE],
['red', true],
['green', true],
['blue', true],
['color', RED],
];
let dispose;
function run(fn, index) {
if (typeof index === 'number' && index < args.length) {
fn(args[index]);
setTimeout(run, undefined, fn, index + 1);
return;
}
if (typeof dispose === 'undefined' && typeof fn === 'function') {
dispose = fn;
const update = setup();
setTimeout(run, undefined, update, 0);
return;
}
dispose();
dispose = undefined;
}
run(() => {});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment