Slank

Slank is a dead-simple reactive signal system for JavaScript — no tooling, no build steps, no opinions.

It gives you just four primitives:

• explicit() – create manually updated reactive values
• implicit() – create derived values that automatically update
• fx() – create reactive effects that re-run when dependencies change
• tick() – schedule a function to run after the DOM is painted

⚡ Tiny. Tool-free. Trivially composable. Reactive state that stays out of your way.

---

🚀 Installation

npm install slank

Or load it from a CDN:

import { explicit, implicit, fx, tick } from 'https://esm.sh/slank'

---

🧠 Core API

explicit(initialValue)

Creates a reactive value that can be read and written.

const count = explicit(0)

count.value++       // update
console.log(count.value)  // read

---

implicit(fn)

Creates a derived value that updates automatically when dependencies change.

const double = implicit(() => count.value * 2)

console.log(double.value) // 0 → 2 → 4 as count changes

---

fx(fn)

Runs a function and re-runs it whenever any signals it reads change.

fx(() => {
  console.log(`Count is ${count.value}, double is ${double.value}`)
})

---

tick(fn)

Runs a function after the DOM is painted. Useful when working with dynamically injected HTML or doing layout measurements.

tick(() => {
  const height = document.querySelector('.box')?.offsetHeight
  console.log('Box height:', height)
})

---

🧩 Example

const count = explicit(0)
const double = implicit(() => count.value * 2)

fx(() => {
  document.body.textContent = `Double is: ${double.value}`
})

setInterval(() => count.value++, 1000)

---

✨ Why Slank?

• Minimal: Fits in your head
• Declarative: You write what depends on what — Slank handles the rest
• Zero-config: No compiler, no JSX, no weird syntax
• Just works in vanilla JS, small projects, or anywhere else

---

🛠 Use Cases

• Quick UIs without a framework
• Micro-interactions with state
• State + derived logic in web components
• Building your own reactive framework

---

🙏 Acknowledgements

The core design of Slank was inspired by Joy of Code — an excellent resource for learning reactive programming concepts in JavaScript.

---

📄 License

MIT