peerreynders/README.md

## README.md

      
    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

  
## 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>

## 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>

## 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>
	<!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>