نظارت بر تغییرات

import { observer, useObserver } from 'rosma';

observer.subscribe('time', listener);

function listener(time) {
  alert('The time is ' + time);
}

export function Component() {
  const { time, setTime } = useObserver();

  return (
    <div>
      <p>{time}</p>
      <button onClick={() => setTime(new Date().toLocaleTimeString())}>
        Click to update
      </button>
    </div>
  );
}

import { observer, useObserver } from 'rosma';

type State = {
  time: string;
};

observer.subscribe<State>('time', listener);

function listener(time: State['time']) {
  alert('The time is ' + time);
}

export function Component() {
  const { time, setTime } = useObserver<State>();

  return (
    <div>
      <p>{time}</p>
      <button onClick={() => setTime(new Date().toLocaleTimeString())}>
        Click to update
      </button>
    </div>
  );
}

import { useEffect } from 'react';
import { observer, useObserver } from 'rosma';

export function Component2() {
  const { time, setTime } = useObserver();

  useEffect(() => {
    const unsubscribe = observer.subscribe('time', listener);

    function listener(time) {
      alert('The time is ' + time);
    }

    return () => unsubscribe();
  }, []);

  return (
    <div>
      <p>{time}</p>
      <button onClick={() => setTime(new Date().toLocaleTimeString())}>
        Click to update
      </button>
    </div>
  );
}

import { useEffect } from 'react';
import { observer, useObserver } from 'rosma';

type State = {
  time: string;
};

export function Component2() {
  const { time, setTime } = useObserver<State>();

  useEffect(() => {
    const unsubscribe = observer.subscribe<State>('time', listener);

    function listener(time: State['time']) {
      alert('The time is ' + time);
    }

    return () => unsubscribe();
  }, []);

  return (
    <div>
      <p>{time}</p>
      <button onClick={() => setTime(new Date().toLocaleTimeString())}>
        Click to update
      </button>
    </div>
  );
}

import { observer, useObserver } from 'rosma';

observer.subscribe(['random1', 'random2'], listener);

function listener({ random1, random2 }) {
  alert(`Random1: ${random1},\nRandom2: ${random2}`);
}

function Component1() {
  const { random1, setRandom1 } = useObserver();

  return (
    <button onClick={() => setRandom1(Math.random())}>
      {random1 || 'Random1'}
    </button>
  );
}

function Component2() {
  const { random2, setRandom2 } = useObserver();

  return (
    <button onClick={() => setRandom2(Math.random())}>
      {random2 || 'Random2'}
    </button>
  );
}

export function App() {
  return (
    <>
      <Component1 />
      <Component2 />
    </>
  );
}

import { observer, useObserver } from 'rosma';

type State = {
  random1: number;
  random2: number;
};

observer.subscribe<State>(['random1', 'random2'], listener);

function listener({ random1, random2 }: State) {
  alert(`Random1: ${random1},\nRandom2: ${random2}`);
}

function Component1() {
  const { random1, setRandom1 } = useObserver<State>();

  return (
    <button onClick={() => setRandom1(Math.random())}>
      {random1 || 'Random1'}
    </button>
  );
}

function Component2() {
  const { random2, setRandom2 } = useObserver<State>();

  return (
    <button onClick={() => setRandom2(Math.random())}>
      {random2 || 'Random2'}
    </button>
  );
}

export function App() {
  return (
    <>
      <Component1 />
      <Component2 />
    </>
  );
}

import { observer, useObserver } from 'rosma';

observer.subscribe('*', listener);

function listener({ random1, random2 }) {
  if ((random1 || random2) === undefined) return;

  alert(`Random1: ${random1},\nRandom2: ${random2}`);
}

function Component1() {
  const { random1, setRandom1 } = useObserver();

  return (
    <button onClick={() => setRandom1(Math.random())}>
      {random1 || 'random1'}
    </button>
  );
}

function Component2() {
  const { random2, setRandom2 } = useObserver();

  return (
    <button onClick={() => setRandom2(Math.random())}>
      {random2 || 'Random2'}
    </button>
  );
}

export function App() {
  return (
    <>
      <Component1 />
      <Component2 />
    </>
  );
}

import { observer, useObserver } from 'rosma';

type State = {
  random1: number;
  random2: number;
};

observer.subscribe('*', listener);

function listener({ random1, random2 }: State) {
  if ((random1 || random2) === undefined) return;

  alert(`Random1: ${random1},\nRandom2: ${random2}`);
}

function Component1() {
  const { random1, setRandom1 } = useObserver<State>();

  return (
    <button onClick={() => setRandom1(Math.random())}>
      {random1 || 'random1'}
    </button>
  );
}

function Component2() {
  const { random2, setRandom2 } = useObserver<State>();

  return (
    <button onClick={() => setRandom2(Math.random())}>
      {random2 || 'Random2'}
    </button>
  );
}

export function App() {
  return (
    <>
      <Component1 />
      <Component2 />
    </>
  );
}