cerebral / overmind-website

The Overmind website

Cerebral

A declarative state and side effects management solution for popular JavaScript frameworks

Maintainer needed

https://gist.github.com/christianalfoni/f1c4bfe320dcb24c403635d9bca3fa40

Documentation

• Current Cerebral (2.x and up)
• Previous Cerebral (1.x)

Contribute

The entire Cerebral codebase has been rewritten to encourage contributions. The code is cleaned up, commented and all code is in a "monorepo". That means you can run tests across projects and general management of the code is simplified a lot.

1. Clone the monorepo: git clone https://github.com/cerebral/cerebral.git
2. In root: npm install

The packages are located under packages folder and there is no need to run npm install for each package.

Using monorepo for your own apps

If you want to use Cerebral 2 directly from your cloned repo, you can create a symlinks for following directories into the node_modules directory of your app:

• packages/node_modules/cerebral
• packages/node_modules/function-tree
• packages/node_modules/@cerebral

If your app and the cerebral monorepo are in the same folder you can do from inside your app directory:

$ ln -s ../../cerebral/packages/node_modules/cerebral/ node_modules/
# ...

Just remember to unlink the package before installing it from npm:

$ unlink node_modules/cerebral
# ...

Running demos

Go to the respective packages/demos/some-demo-folder and run npm start

Testing

You can run all tests in all packages from root:

npm test

Or you can run tests for specific packages by going to package root and do the same:

npm test

Changing the code

When you make a code change you should create a branch first. When the code is changed and backed up by a test you can commit it from the root using:

npm run commit

This will give you a guide to creating a commit message. Then you just push and create a pull request as normal on Github.

Release process

• Review and merge PRs into next branch. It is safe to use "Update branch", the commit created by Github will not be part of next history
• If changes to repo-cooker, clean Travis NPM cache
• From command line:

$ git checkout next
$ git pull
$ npm install # make sure any new dependencies are installed
$ npm install --no-save repo-cooker # needed to test release, make sure you have latest
$ npm run release # and check release notes
$ git checkout master
$ git pull
$ git merge --ff-only next
$ git push

overmind-website's Issues

www.overmindjs.org is broken

Whatever www.overmindjs.org is pointing to is broken. overmindjs.org without the www works fine.

$ nslookup www.overmindjs.org
Server:		2601:646:c400:a810:22c9:d0ff:fe99:5cc4
Address:	2601:646:c400:a810:22c9:d0ff:fe99:5cc4#53

Non-authoritative answer:
www.overmindjs.org	canonical name = 0rjvu8x6.easyredirengine.com.
Name:	0rjvu8x6.easyredirengine.com
Address: 34.213.106.51
Name:	0rjvu8x6.easyredirengine.com
Address: 54.68.182.72

vs.

$ nslookup overmindjs.org
Server:		2601:646:c400:a810:22c9:d0ff:fe99:5cc4
Address:	2601:646:c400:a810:22c9:d0ff:fe99:5cc4#53

Non-authoritative answer:
overmindjs.org	canonical name = hosting.gitbook.com.
hosting.gitbook.com	canonical name = fasthosting.gitbook.com.
Name:	fasthosting.gitbook.com
Address: 104.236.176.100

Svelte is missing in Quickstart

Svelte is missing in Quickstart page: https://overmindjs.org/quickstart.

Questions about TypeScript page

Personally, I think the configuration section on the TypeScript page, is a little confusing and assumes knowledge of a TypeScript feature that is not widely understood. (By me, up to now, anyway!)

1. Under Explicit Typing section the note says the 'The Overmind documentation is written for implicit typing'.
   Is implicit typing the Declare module approach?

2. At first, I did not understand what typeof was doing here:

// Due to circular typing we have to define an
// explicit typing of state, actions and effects since
// TS 3.9
export interface Config extends IConfig<{
  state: typeof config.state,
  actions: typeof config.actions,
  effects: typeof config.effects
}> {}

I only understood the code (I hope!) after reading this article.

I think the documentation may benefit from the following blurb, or similar.

// Note: The typeof keyword is being used here by TypeScript to type query
// the configuration.
// (It is NOT being used by JavaScript to return the type of the operand 
// as a string.)
// See https://mariusschulz.com/blog/type-queries-and-typeof-in-typescript for
// an explanation of the differences between typeof in TypeScript and JavaScript.

I am happy to submit a pull request for the above, but I thought I would get some feedback first, and ascertain whether I have properly understood the concepts.

Typo in TypeScript for getter. Missing colon `:`

I found some typos on https://overmindjs.org/core/typescript

For exammple, the following code:

import { derived } from 'overmind'

type State = {
  foo: string
  shoutedFoo string
}

export const state: State = {
  foo: 'bar',
  shoutedFoo: derived<State, string>(state => state.foo + '!!!')
}

I think shoutedFoo string should be shoutedFoo: string. There is a missing colon. There are bunch of other code blocks where there is a missing colon :)

which vscode theme is shown on the website doc? 🙂

which vscode theme is shown on the website doc? 🙂

thanks.

Svelte Reactions example doubt

In Svelte Reactions example here: https://overmindjs.org/views/svelte#reactions, where the store comes from?

<script>
  import { state, actions, reactions } from './overmind.js'

  $: count = $state.count
  let doubled = undefined
  store.reaction(
    (state) => state.count,
    (value) => {
        doubled = value * 2
    },
    {
        immediate: true
    }
  )
</script>

<p>Count: {count}</p>
<p>Doubled: {doubled}</p>
<button id="increase" on:click={() => store.actions.increase()}>Increase</button>
<button id="decrease" on:click={() => store.actions.decrease()}>Increase</button>

Question

hello, everyone, I have a problem, I have used overmind js lately and I have a problem, if I have an overmind js effect that fetches API data and stores it in the overmind state, how can i access this data and put some of this data in react state hook inside the component