Hello, Maverick JS -> Observables! / Andrew Wooldridge

📜JavaScript developer. 🐲RPG fan. 📚Storyteller and 🕹game developer. 👨Father and Husband.

Published

Edited

Jun 26, 2022

Hello, Smart Shape!Hello, messagepipe!Hello, Atomico!Hello, Markdown-Tag !Hello, js-sdl!Hello Trivia API!Hello auto-animate!Hello, papa parse!Hello, lazy.js!Hello, mout!Hello, sugar js!Hello, lil-gui!Hello, owoify-js!

Hello, Maverick JS -> Observables!

Hello, Canvas Confetti!Hello, OWL!Hello, Bunny Fonts!Hello Color JS!Hello, Kute.js !Hello Color Legend Element!Hello, is-online!Hello, pretty-ms!Hello, Liveblocks!Convex Chat Hello, filesize.js!Hello, SVG.js Hello, Counter-element!Hello, Ramda!Hello, Block Protocol!Hello, Reef!Hello, Croquet!Hello, Markdoc!Hello, Multiavatar!Hello, Tableful!Hello, kdl-js Hello, Wild Wild Path!Hello, Lexical!Hello, Statery!Hello, pdfme!Shuffle an Array Hello, Pikaso Hello, Miniplex!Hello, CandyGraph!Hello, Supabase!Hello, Embla Carousel!Hello, core-js!Hello, tinybase Hello, umbrellajs Hello, pintora Skypack Pixijs Hello, sortablejs Hello, JS-YAML Testing bitECS for Tempest Hello jService!Hello, iro.js Hello, Splide Hello, Cosmic JS Hello, singui Kaboom JS Template Hello, JSPDF Hello, Awesome Dev Jokes Random DAD Joke Hello, model-viewer The Oracle Tarot Utilities Hello, lokiJS Hello, cash ( cash-dom )Hello, Dice Roller Hello, Slide-Element Hello, tsParticles Kaboom - dynamic values Hello Lit.dev Hello, Melon JS Hello Kontra

Also listed in…

Tips and Utilities

mjs = import("@maverick-js/observables")

{

// Create - all types supported (string, array, object, etc.)

const $m = mjs.$observable(1);

const $x = mjs.$observable(1);

const $b = mjs.$observable(0);

// Compute - only re-computed when `$m`, `$x`, or `$b` changes.

const $y = mjs.$computed(() => $m() * $x() + $b());

// Effect - this will run whenever `$y` is updated.

const stop = mjs.$effect(() => {

console.log('effect:', $y());

viewof textarea.value = `${viewof textarea.value}

${$y()}

});

$m.set(10); // logs `10` inside effect

// Wait a tick so update is applied and effect is run.

await mjs.$tick();

$b.update((prev) => prev + 5); // logs `15` inside effect

// Wait a tick so effect runs last update.

await mjs.$tick();

// Nothing has changed - no re-compute.

$y();

// Stop running effect.

stop();

}

viewof textarea = Inputs.textarea({

label: "Output",

rows: 60,

cols: 120,

value: "waiting"

})

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more