re-js / remini Goto Github PK

const $user = box({ name: 'Joe', email: '[email protected]' });

modify($user).name = 'John Doe'

const User = () => {
  $state = box(initialState);

  const login = () => {
    update($state, state => { ...state, loggedIn: true });
  }

  const logout = () => {
    update($state, state => { ...state, loggedIn: false });
  }

  return Object.assign($state, {
    login,
    logout
  });
}

const User = () => {
  $name = box('Amelia');
  $loggedIn = box(false);

  const login = () => {
    put($loggedIn, true);
  }

  const logout = () => {
    put($loggedIn, false);
  }

  return {
    get name() {
      return val($name);
    },
    get logginIn() {
      return val($logginIn);
    },

    login,
    logout
  });
}

const title = box(0);
title._ += 10;

expr(() => title._ + 10).to((val) => console.log(val));

title.to((p) => console.log(p));
title.map(v => v + 10);

const ev = event();
ev.to(k => console.log(k));
ev.filter().map().to();
ev.fire();

const evFire = ev.fire; 
evFire(); // I'm not sure, it looks like an unnecessary complication at the start. Maybe later.

const onDragFinish = event();
onDragFinish.fire();

onDragFinidsh.to(() => console.log('drag finished'));

const custom = expr(() => title._ + 10, (k) => title._ += k);
custom.to(onDragFinish);

custom._ += 10;
custom.write(20);
custom.read();
custom.update(v => v + 1)

custom.readonly()
ev.readonly()
//

useBox(title, /* [title] */); // deps unnecessary
useExpr(() => ({
    title: title._,
    custom: custom._,
    valu
}), [valu]);

// support only one argument in `to`, break support prev value.
// also should be removed unused API (sync, once, cycle)

const activeRoute = box<Route | void>();

on(() => shallow(read($b)), listener)
sync(() => shallow({ a: read($a).k.m, b: read($b).e.f }), $v); 
wrap
map($a, (a) => shallow(a))

// or

box.shallow
wrap.shallow
on.shallow
on.once.shallow
sync.shallow

useBox.shallow
useBoxes.shallow

const $user = box({
  name: 'Joe',
  email: '[email protected]',
  settings: {},
  avatar: 'https://avatar.com/1.jpg'
})

const $avatar = map($user, user => user.avatar)
// new version
const $avatar = select($user, user => user.avatar)

const b = box(0);
const n = wrap(() => get(b) + 1);

on(n, v => console.log('next', v);

// All of it should be lazy

on(() => get(n), v => console.log('next', v)) // deny, no possible to make lazy subscription

isolate(async () => {
  await runApp();
});

import { useBox } from '@remini/react';

import { useBox } from '@remini/preact';

const
  { sel, expr, box, untrack: _re_untrack, batch: _re_batch } = require('reactive-box'),

// ./custom.store.ts

import { wrap, box, val } from "remini";

export const CustomStore = () => {
  const initialState = {
    address: {},
    user: {}
  };
  const $store = box(initialState);

  // example of performance optimization if store has a lot of often changes outside of "user" object
  const $user =  wrap(() => val($store).user);

  return Object.assign($store, {
    get user() {
      return val($user);
    },

    // this will be enought for most cases
    get address() {
      return val($store).address;
    },

    // ... some methods where
  })
}

// ./Custom.tsx

import { provide } from "provi";
import { useBox } from "remini/react";

const Custom = () => {
  const custom = useBox(provide(CustomStore));
  return (
    <>
      <b>{custom.user}</b>
      <address>{custom.address}</address>
    </>
  )
}

// ./Custom.tsx

import { provide } from "provi";
import { component } from "remini";

const Custom = component(() => {
  const $custom = provide(Custom);
  return (
    <>
      <b>{$custom.user}</b>
      <address>{$custom.address}</address>
    </>
  )
})

    when(
      () => this.isDataCanBeLoaded,
      () => {
        this.load(this.rootStore.user.language);
      }
    );

    on(
      () => this.isDataCanBeLoaded,
      (val) => {
        val && this.load(this.rootStore.user.language);
      }
    );

const b = box(0)
when(b, console.log)

b(1) // output: 1
b(2) // nothing
b(3) // nothing
b(0) // nothing

b(2) // output: 2

import { box, event, val } from "remini";

export const LocaleConfig = () => {
  const $code = box('ru');

  const setLocaleTrigger = trigger();

  return {
    get code() {
      return val($code);
    }
  };
};

export const useCustom = hook((arg: any) => {
  const a = read($a);
  const b = read($b);

  return { a, b }
})

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
  }
}

const b = box(0);
const A = component(() => <i>{b}</i>)

box.shallow()
on.shallow()
once.shallow()
sync.shallow()
wrap.shallow()
promiseNext.shallow()

useBoxShallow()
useSelector()
useSelectorShallow()

const Comp = () => {
  const active = useSelector(homeRoute, state => state.active, [...deps])
}

const useStateBox = (fn)

const $user = useStateBox(() => {
  return {
    a, b, c
  }
}, [a, b, c]);

const logic = useLocal(() => new Logic(a,b, $user), [a, b, $user])

const $loaded = box(false);

const waitFor = async () => {
  await when(() => read($loaded));
};