کلاس مشاهده گر

import { observer } from 'rosma';

const foo = observer.get('foo');

console.log(foo); // bar

import { observer } from 'rosma';

const foo: string = observer.get('foo');

console.log(foo); // bar

import { observer } from 'rosma';

const values = observer.get(['foo', 'baz']);

console.log(values); // { foo: 'bar', baz: 'qux' }

import { observer } from 'rosma';

type State = {
  foo: string;
  baz: string;
};

const values = observer.get<State>(['foo', 'baz']);

console.log(values); // { foo: 'bar', baz: 'qux' }

import { observer } from 'rosma';

const { foo, baz } = observer.get(['foo', 'baz']);

console.log(foo, baz); // 'bar', 'qux'

import { observer } from 'rosma';

type State = {
  foo: string;
  baz: string;
};

const { foo, baz } = observer.get<State>(['foo', 'baz']);

console.log(foo, baz); // 'bar', 'qux'

import { observer, useObserver } from 'rosma';

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

  return (
    <div>
      <p>Time is: {time}</p>
      <Button onClick={() => setTime(getTime())}>
        Update time with setter method
      </Button>
      <Button onClick={() => observer.set({ time: getTime() })}>
        Update time with observer.set
      </Button>
      <Button
        onClick={() => observer.set({ time: getTime() }, { silent: true })}
      >
        Update time silently
      </Button>
    </div>
  );
}

function getTime() {
  return new Date().toLocaleTimeString();
}

function Button(props) {
  return <button {...props} style={{ display: 'block' }} />;
}

import { observer, useObserver } from 'rosma';

type State = {
  time: string;
};

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

  return (
    <div>
      <p>Time is: {time}</p>
      <Button onClick={() => setTime(getTime())}>
        Update time with setter method
      </Button>
      <Button onClick={() => observer.set<State>({ time: getTime() })}>
        Update time with observer.set
      </Button>
      <Button
        onClick={() =>
          observer.set<State>({ time: getTime() }, { silent: true })
        }
      >
        Update time silently
      </Button>
    </div>
  );
}

function getTime() {
  return new Date().toLocaleTimeString();
}

function Button(props) {
  return <button {...props} style={{ display: 'block' }} />;
}

export type Modal = {
  title: string;
  body: string;
  id?: number;
};

export type State = {
  modals: Modal[];
};

import Modals from './modals';
import { newModal } from './actions';

export function App() {
  return (
    <>
      <button
        onClick={() => newModal({ title: 'Modal title', body: 'Modal body' })}
      >
        Open Modal
      </button>
      <Modals />
    </>
  );
}

import Modals from './modals';
import { newModal } from './actions';

export function App() {
  return (
    <>
      <button
        onClick={() => newModal({ title: 'Modal title', body: 'Modal body' })}
      >
        Open Modal
      </button>
      <Modals />
    </>
  );
}

import { useObserver } from 'rosma';
import { closeModal } from './actions';

export default function Modals() {
  const { modals } = useObserver([]);

  return modals.map((modal, index) => <Modal key={index} {...modal} />);
}

function Modal({ title, body, id }) {
  return (
    <div
      style={{
        backgroundColor: 'white',
        boxShadow: '0 0 5px #ccc',
        minWidth: '300px',
        position: 'fixed',
        left: '50%',
        top: '50%',
        transform: 'translate(-50%, -50%)',
        borderRadius: '7px',
      }}
    >
      <div
        style={{
          display: 'flex',
          padding: '10px',
          borderBottom: '1px solid #ccc',
          gap: '5px',
        }}
      >
        <span>{title}</span>
        <span>#{id}</span>
        <div style={{ flex: 1 }} />
        <button onClick={() => closeModal(id)}>x</button>
      </div>
      <div style={{ padding: '10px' }}>{body}</div>
    </div>
  );
}

import { useObserver } from 'rosma';
import { closeModal } from './actions';
import { Modal, State } from './types';

export default function Modals() {
  const { modals } = useObserver<State>([]);

  return (
    <>
      {modals.map((modal, index) => (
        <Modal key={index} {...modal} />
      ))}
    </>
  );
}

function Modal({ title, body, id }: Modal) {
  return (
    <div
      style={{
        backgroundColor: 'white',
        boxShadow: '0 0 5px #ccc',
        minWidth: '300px',
        position: 'fixed',
        left: '50%',
        top: '50%',
        transform: 'translate(-50%, -50%)',
        borderRadius: '7px',
      }}
    >
      <div
        style={{
          display: 'flex',
          padding: '10px',
          borderBottom: '1px solid #ccc',
          gap: '5px',
        }}
      >
        <span>{title}</span>
        <span>#{id}</span>
        <div style={{ flex: 1 }} />
        <button onClick={() => closeModal(id)}>x</button>
      </div>
      <div style={{ padding: '10px' }}>{body}</div>
    </div>
  );
}

import { observer } from 'rosma';

export function newModal({ title, body }) {
  const modals = observer.get('modals') || [];

  const modal = {
    id: modals.length + 1,
    title,
    body,
  };

  modals.push(modal);

  observer.set({ modals });
}

export function closeModal(id) {
  const modals = observer.get('modals') || [];

  observer.set({ modals: modals.filter((modal) => modal.id !== id) });
}

import { observer } from 'rosma';
import { Modal, State } from './types';

export function newModal({ title, body }: Modal) {
  const modals: Modal[] = observer.get('modals') || [];

  const modal: Modal = {
    id: modals.length + 1,
    title,
    body,
  };

  modals.push(modal);

  observer.set<State>({ modals });
}

export function closeModal(id: number) {
  const modals: Modal[] = observer.get('modals') || [];

  observer.set<State>({ modals: modals.filter((modal) => modal.id !== id) });
}

import { observer } from 'rosma';

observer.set({ foo: 'bar' });

console.log(observer.state.foo); // "bar"

import { observer } from 'rosma';

observer.set({ foo: 'bar' });

console.log(observer.state.foo); // "bar"

import { observe } from 'rosma';

observer.isValid('myVariable'); // false

observer.set({ myVariable: 'something' });

observer.isValid('myVariable'); // true

import { observe } from 'rosma';

observer.isValid('myVariable'); // false

observer.set({ myVariable: 'something' });

observer.isValid('myVariable'); // true

import { observer, useObserver } from 'rosma';

const unsubscribe = observer.subscribe('myVar', listener);

function listener(myVar) {
  alert('myVar changed! ' + myVar);
}

export function ObserverTest() {
  const { setMyVar } = useObserver();

  return (
    <>
      <button onClick={() => setMyVar(new Date())}>Click me</button>
      <button onClick={unsubscribe}>Unsubscribe</button>
    </>
  );
}

import { observer, useObserver } from 'rosma';

type State = {
  myVar: Date;
};

const unsubscribe = observer.subscribe<State>('myVar', listener);

function listener(myVar: State['myVar']) {
  alert('myVar changed! ' + myVar);
}

export function ObserverTest() {
  const { setMyVar } = useObserver<State>();

  return (
    <>
      <button onClick={() => setMyVar(new Date())}>Click me</button>
      <button onClick={unsubscribe}>Unsubscribe</button>
    </>
  );
}