basically I am an idiot

The context api is useless for current way and makes it different from other possible integrations

(Currently ignored like class, can copy how immer did it https://github.com/immerjs/immer/blob/master/src/plugins/mapset.ts)

Hey, I am getting the current error in 0.2.0 when building for production.

Worked fine in 0.1.*

Prefer Jest

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

	<State
		initial={{age: 10, name: 'baptiste'}}
		actions={{onChange: s => e => ({[e.target.name]: e.target.value})}
	>
		<Partial filter="name">
		{(value, {onChange}) => (
			<input name="name" value={value} onChange={onChange}/>
		)}
        </Partial>
	</State>

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

immutable system should be chosen by user, maybe make it an instance option?

Monorepo readme

• Description
• Badges
  • Bundle size
  • Test passing
  • Test coverage?
  • Version
  • Download count
• Vanilla
• React

Core readme

• Description
• Badges

React readme

• Description
• Badges

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

• https://github.com/pmndrs/valtio: The original snapshot idea
• https://github.com/tomasklaen/statin: Use function call to get/set atom value
• https://github.com/RisingStack/react-easy-state: Original implementation for useAtom

Is your feature request related to a problem? Please describe.
Currently reim only provides actions which, preferably, does not have side-effects

Describe the solution you'd like
https://github.com/zerobias/effector#effect

Describe alternatives you've considered
reim-task, but a reim-task is not reusable

Additional context
Add any other context or screenshots about the feature request here.

Rename state to store, and add useStore hook

Primary use is status handlers for async side-effects e.g. processing, resolved, rejected

basically decorate a function and create a store to store the state

Currently "value" is hard-coded everywhere, maybe add a primitive() instead that creates atom({ value: 11 }).

atom() will be a simple proxy

How about effect() and computed() though..?

Is your feature request related to a problem? Please describe.

Reim is a library that should only need 1 min to read the docs and then use. Gitbook is really painful to edit and honestly we don't need that many words to explain.

Describe the solution you'd like

Use README.md to explain everything

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug and Reproduce

Setting state.a like this directly, rerenders the component which uses only state.b:

const loc = reim({ a: 1, b: 1 })

const AA = () => {
	const [b] = useReim(loc, state => state.b)
	console.log('b', b)

	return (
		<button
			type="button"
			onClick={() => {
				loc.setState(state => {
					state.a++
				})
				console.log('loc.state.a', loc.state.a)
			}}>
			click
		</button>
	)
}

Output:

loc.state.a 3
14:12:33.244 Form.js:23 b 1
14:12:33.960 Form.js:32 loc.state.a 4
14:12:33.961 Form.js:23 b 1
14:12:36.910 Form.js:32 loc.state.a 5
14:12:36.912 Form.js:23 b 1

Expected behavior

Changing state.b will not cause component, which uses state.a to rerender

Describe the bug
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

To Reproduce
Steps to reproduce the behavior:

1. Copy paste example code from https://github.com/IniZio/reim#redux-like
2. Run (tested with CRA 1.14)

Expected behavior
A component

Additional context
...

e.g.

<Atom atom={form.value.username}>
  {control => <input onChange={e => control.v = e.target.value} value={control.v} />} 
</Atom>

Currently it if a dep is initially ignored through ref(), it will always ignore the dep even if a non-ref is assigned afterwards

Is your feature request related to a problem? Please describe.
For example we have a form that creates / edit an item. If it is null we treat as create. But it takes time for the item to load so:

<State initial={item}></State>

will have problem because even if item is changed from null to the actual info, the store in State will not change accordingly, so we have to not mount it til loaded like this:

{(id === 'create' || item) && <State initial={item}></State>}

Describe the solution you'd like
Add a prop that makes State reset the store again on prop change?

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

• Add form control
• Add form group
• Add form array
  • Use template instead of layout
• Trigger validation
• Add test cases
• Enable getting form value
• Focus first error on submit
• Criteria mode to only get first error

function Demo() {
  const loginForm = useForm({
    email: field('', [Validators.required]),
    username: field('', [Validators.required, AsyncUsernameUniquenessValidator]),
    password: field('', [PasswordStringValidator]),
    contacts: array<Contact>((_, index) => 
      group({ name: field(`Contact #${index}`, []), phone: field('', [Validators.phone]) }),
      [Validators.minLength(1)]
    )
  );
  const onLogin = useCallback((values) => {
    console.log("=== form values", values);
  })

  return (
    <form onSubmit={loginForm.handleSubmit(onLogin)}>
      <Field field={loginForm.controls.email}>
        {({ handlers, touched, errors }) => (
          <div className="form-group">
            <input {...handlers('text')} />
            <span>
              {touched && errors.required && 'Email is required'}
            </span>
          </div>
        )}
      </Field>
      <Field field={loginForm.controls.username}>
        {({ handlers, pending, touched, errors }) => (
          <div className="form-group">
            <input {...handlers('text')} />
            {pending && <Loading />}
            <span>
              {touched && errors.required && 'Email is required'}
            </span>
          </div>
        )}
      </Field>
      <button 
        disabled={
          !loginForm.touched
          || loginForm.pending 
          || loginForm.invalid 
          || loginForm.submitting
        }
        type="submit"
      >Register</button>
    </form>
  )
}

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

e.g.

const atom = atom({
    documentBody: ref(document.body)
})

Is your feature request related to a problem? Please describe.
Currently effect is not beneficial to side effects.

Describe the solution you'd like
https://gist.github.com/IniZio/2967f82bd8ef8473b30a697dbcf88366

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

For reporting mutations to external api

Maybe need to make a hook in setState for knowing the mutation name?

Currently setState provides snapshot but not patch

Next.js

Describe the bug
Currently Partial does receive filtered value, but the wrapping rerenders even when children is not a render function...

To Reproduce

<State initial={{values: {}}}>
	<Partial filter={s => s.values.name}>
		{name => ()}
	</Partial>
	<Partial filter={s => s.values.age}>
		{age => ()}
	</Partial>
</State>

Expected behavior
When I change age, Partial with name should not rerender

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
Currently setter and getter feels really clumsy.

Describe the solution you'd like
Instead of current

{
  setter: ({set}) => {
    setName: name => set({name})
  }
}

use

{
  setter: {
    setName: name => state => ({name}),
    setAge: age => void state => state.age = age
  }
}

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

What reim should aim to be

Reliably handles all state outside API interactions

GraphQL clients have evolved rapidly and in my own projects I pretty much use them for all interactions except for primitive components and some parts of the feature that data should prioritize local more than API

I noticed that there have been increased number of headless ui libraries, but quite some of them do not handle logics at all. See if this library can solve this

Ideas

Remove immer from dependency

Immer is nice, but not a necessary dependency for this library to fulfill its goal

Can store state machine alongside data

State machine is useful in UI specific logics since same action should do different stuff under different context. An example would be triggering a "type something" action in edit mode vs readonly mode. Note that a single state is often not that useful since you can be in a stage of edit mode or maybe syncing in collaboration mode in parallel. Tried xstate before but it's pretty painful

Tasks

• Handle Atom in atom and non-atom in useAtom
• Fix dispose effect for react (Currenly use workaround by forcererender on dispose)
• rename effect to watch and add usewatch Keep effect and use useSideEffect instead
• Support wrapping atom and useAtom over-and-over again
• Add batch update
  • Should error if batch level goes too high, because it's probably due to infinite loop
• Fix currentObserver must use settimeout when unassign in react effect (Actually this kind of make sense since need a render cycle to collect the dependencies?)

  Might be that the effect in useatom is not actually wrapping the scope of atom effect?

• eslint
• Extract marker logic from useAtom
• Ci/cd
• setup tests
• #135
  e.g.

   <Atom atom={form.value.username}>
     {control => <input onChange={e => control.v = e.target.value} value={control.v} />}
   </Atom

• #136
• #137
• #138

Literally can compose atom in atom now, not atom at all...

Proposal for v2 🤔

Progress

• Move reim and react-reim at least to typescript
• Support actions option
• Allow primitives as state
• Replace getter/setter with filter/actions in <State/>
• <Partial/> / partial()
• Support in-component and cross-component store in useReim

Goals:

1. Typescript

Well flow is screwed so...

2. Make action fixed

Yes set is flexible but it also makes things messy quickly.
Also e => increment(e.target.value) looks better than e => set(s => {s.count += e.target.value})

Since state mutation belongs to 1 store only, maybe do it like

const state = {
  count: 10
}

const actions = {
  increment: state => amount => ({count: state + amount})
}

const store = reim(state, {actions})

store.increment(10)

3. Allow primitives as state

Basically stuff like

const state = 10

const actions = {
  increment: state => amount => state + amount
}

reim(state, actions)

Note: Object state will still use immer

4. React

1. getter/setter ➡️ filter/actions

Note that actions is only available for initial rather than store

<State
  initial={{firstname: '', lastname: ''}}
  filter={{
	fullname: s => s.firstname + s.lastname
  }}
  actions={{
	increment: state => amount => {state.count += amount}
  }}
>
  {({fullname}, {increment}) => /*blablabla*/}
</State>

2. <Partial/>

Uses React.createContext, will also make connect() like Formik to make things easier

<Partial filter={'firstname'}>
{(firstname) => /*blablabla*/}
</Partial>

3. Hook

// 1. In-component store
const [{name}, {slugify}] = useReim(
  {name: ''},
  {actions: {
    slugify: s => () => ({name: lib_slugify(s.name)})
  }}
)

// 2. Cross-component store
const store = reim(
  {name: ''},
  {actions: {
    slugify: s => () => ({name: lib_slugify(s.name)})
  }}
)

function App() {
  const [{fullname}, {slugify}] = useReim(
	store,
	{filter:{fullname: s => s.first + s.last}}
  )
  // blablabla
}

toStream to make reim an observable?

currently atom is an instance that holds a reactive value. Can allow user to create a definition that adds meaning to atom?

Is your feature request related to a problem? Please describe.
#37

Describe the solution you'd like
This plugin will reset state to JSON.parse(window.REIM_STORES[name]) if exists.

will need additional wrappers to store the state to window.REIM_STORES[name] on server side, similar to https://github.com/kirill-konshin/next-redux-wrapper

Is your feature request related to a problem? Please describe.
It would be nice to have support for typescript definitions.

Describe the solution you'd like
N/A

Describe alternatives you've considered
N/A

Additional context
N/A

From #37

Is your feature request related to a problem? Please describe.
Currently useReim only updates on its state, if getter uses React props or state, it will fail to update correct on prop or state change.

Describe the solution you'd like
Have useReim update on concerned prop or state change, by passing concerned variables in 3rd parameter:

const [state, setState] = React.useState(5)
const [finalCount] = useReim(store, ({count}) => count + state, [state])

This will be difficult to smooth out DX, just see if possible without breaking stuff 🤔

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A store that makes validation easy

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.