christianalfoni

@codesandbox/context

A more powerful createContext API for React

Install

npm install @codesandbox/context

christianalfoni

Maintainer needed

I have gotten to a point now where I realize my open source work is not sustainable in combination with family. I have spent a ton of time over the years developing ideas, learning, sharing and engaging with the open source community. It has been a lot of fun, but also exhausting. There is a dark side to doing open source, at least for me. Even though it is a recipe for learning I have also been spending most of my time lost in thought. Thinking about ideas, issues and craving recognition for the stuff that I share. It is not a healthy way to live your life. The cost/benefit was okay for a long time as the only people who were affected by it was my partner and myself, but now with 2 kids I have to stop... I should have stopped when we had our first kid. Sitting for 30 min next to our 4 year old daughter and not even noticing it, because I am working out this new idea in my head. Being impatient and annoyed at our 10 month year old son, because I am amped up by some bug I can not stop thin

christianalfoni

#!/usr/bin/env node

const cors = require('cors')
const chalk = require('chalk')
const figures = require('figures')
const express = require('express')
const bodyParser = require('body-parser')
const { resolve, relative } = require('path')
const jscodeshift = require('jscodeshift/dist/Runner')
const argv = require('yargs-parser')(process.argv.slice(2))

christianalfoni

What is the difference between Cerebral and Redux?

Cerebral and Redux were built to solve different problems

Redux was developed to achieve hot reloading global state and state changing logic. To achieve that it was necessary for state changes to be run with pure functions and the state has to be immutable. Now you can change the logic inside your reducer and when the application reloads Redux will put it in its initial state and rerun all the actions again, now running with the new state changing logic.

Cerebral had no intention of achieving hot reloading. Cerebral was initially developed to give you insight into how your application changes its state, using a debugger. In the Redux debugger you see what actions are triggered and how your state looks after the action was handled. In Cerebral you see all actions fired as part of a signal. You see asynchronous behaviour, paths taken based on decisions made in your state changing flow. You see all inputs and outputs produced during the flow and you even

christianalfoni

// Create an effect to persist data. For native envs, using something similar
// to localStorage
const persistedState = {
  set(state) {
    localStorage.setItem('state', JSON.stringify(state))
  },
  get() {
    return JSON.parse(localStorage.getItem('state') || '{}')
  }
}

christianalfoni

Migration

The next version of the docs can be found here: https://overmindjs.org/v/v28

Overmind typing

The implicit typing has been completely removed, meaning you have to explicitly type your application. That said, the explicit typing is way simpler then in the previous version. This is all of it:

import { IContext } from 'overmind'

christianalfoni

Updated packages

package	from version	to version
betsy	1.0.2	1.0.2-1624519707403
overmind	27.0.0	28.0.0-1624519707403
overmind-devtools	28.0.0	29.0.0-1624519707403
overmind-devtools-client	10.0.0	11.0.0-1624519707403
overmind-devtools-vscode	9.0.0	10.0.0-1624519707403
overmind-graphql	7.0.0	8.0.0-1624519707403

christianalfoni

const reducer = (context, event) => {
  switch (event.type) {
    case 'FETCH':
      return {
        ...context,
        state: 'fetching',
      };
    case 'RESOLVE':
      return {
        state: 'fulfilled',

christianalfoni

type ProviderPitcherRequest<T extends Provider> = T["onRequest"] extends (
  request: infer Req,
  dispatcher: Dispatcher<any, any>,
  client: Client
) => void
  ? Req
  : never;

type ProviderPitcherResult<T extends Provider> = T["onRequest"] extends (
  request: any,

christianalfoni

const tree = {
  auth: {
    user: {}
  },
  issues: {
    list: []
  },
  projects: {
    list: [],
    filter: 'completed'