Reactive state that scales

// shared.ts — this file is the same for all frameworks
import { atom } from "valdres"

export const countAtom = atom(0)

import { useAtom } from "valdres-react"
import { countAtom } from "./shared"

export function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <span>{count}span>
      <button onClick={() => setCount(c => c + 1)}>+button>
    div>
  )
}

<script setup>
import { useAtom } from "valdres-vue"
import { countAtom } from "./shared"

const count = useAtom(countAtom)
script>

<template>
  <div>
    <span>{{ count }}span>
    <button @click="count++">+button>
  div>
template>

<script>
  import { watch } from "valdres-svelte"
  import { countAtom } from "./shared"

  const count = watch(countAtom)
script>

<div>
  <span>{count.value}span>
  <button onclick={() => count.set(c => c + 1)}>+button>
div>

import { createAtom } from "valdres-solid"
import { countAtom } from "./shared"

export function Counter() {
  const [count, setCount] = createAtom(countAtom)

  return (
    <div>
      <span>{count()}span>
      <button onClick={() => setCount(c => c + 1)}>+button>
    div>
  )
}

import { Component } from "@angular/core"
import { injectAtom } from "valdres-angular"
import { countAtom } from "./shared"

@Component({
  template: `
    <span>{{ count() }}span>
    <button (click)="count.update(c => c + 1)">+button>
  `
})
export class Counter {
  count = injectAtom(countAtom)
}