The Future: React Easy Stack

[solkimicreb]

Just a little heads-up on my future plans 🙂

This lib is part of my private React stack, which I plan to open-source eventually. Easy State and Easy Params are already open sourced and Easy Router will be the next.

With the release of the router this repo will turn into a monorepo. The npm packages will still be available separately (react-easy-state, react-easy-params and react-easy-router) and also as a complete React framework (react-easy-stack). They will continue to be developed separately, but the source code will get a new home - the react-easy-stack repo - with a unified documentation.

[solkimicreb]

The npm packages will still be available separately (react-easy-state, react-easy-params and react-easy-router) and also as a complete React framework (react-easy-stack).

Would it be a big issue for you if I dropped react-easy-state and react-easy-params in favor of react-easy-stack and let tree shaking do its job? I don't see much value in releasing 4 different libs instead of a single one with the current state of modern bundlers. The migration would be replacing 'react-easy-state' with 'react-easy-stack' globally in your projects, which can be done in seconds with any decent editor. Feedback would be awesome 🙂

Otherwise the code is ready and I am really satisfied with the result. You will be able to use the exact same API in the browser, React Native and Node. I am currently testing, documenting and creating examples, which will take around 2 weeks more (hopefully).

I am doing weekly live streams about developing apps with (the current state of) react-easy-stack, in case you are interested.

[dsozzi]

Since the project is fairly new and not (yet) incredibly used (don't take it wrong) I would agree with you and make a single library which is also easier to maintain and include new features.

[vladshcherbin]

@solkimicreb I'd prefer a monorepo with separate packages.

Bundlers are not always good with tree shaking, I wouldn't rely on them. Plus, some devs are already trying to use es6 modules without bundlers, just by importing a module directly in browser (when they don't need old browsers support).

[danawoodman]

One note would be to make it very clear that they can be used in isolation. Having multiple packages helps with that but I can see why you'd want to consolidate. Do what you think is best would be my recommendation 🍻

[joshuaquek]

It would be much better if the packages are separated.

Because on my side, I'm using NextJS with React-Easy-State, and it's been awesome so far. Please let these packages remain as separate ones 🙏🏼🙏🏼🙏🏼

[solkimicreb]

@joshuaquek don't worry I will not break it for anyone, but it will likely be merged into a single package with multiple builds. Something like:

react-easy-stack: the full package for DOM react-easy-stack/node: platform independent version for SSR and jest testing react-easy-stack/native: react native version react-easy-stack/state: just the state management part (with NO breaking changes between this and the current react-easy-state)

Would you be okay with this?

[joshuaquek]

Hey @solkimicreb , thanks for the swift reply!

Actually the reason on why I suggested keeping the package name as it is is because it easier for me to introduce more people to your package. Example: redux vs facebook-stack/state-management. When there is a unique name to the package, its easier to introduce other people/developers to it.

However, this project belongs to you and you should do what you think is best! (:

[ctrlplusb]

I agree with @joshuaquek and also kindly request that you consider keeping them as separate packages. Personally, I find that Yarn's workspaces feature combined with Lerna makes this a very manageable exercise.

Keeping them as separate packages allows you to use an independent versioning system which avoids unnecessary updates for those consuming only one of your packages.

And another personal opinion - I feel like it's easier for me to sell an individual package (to clients/colleagues) if it comes as such. Completely subjective this, but I just feel the idea of having to install a stack and only use part of it would put some people off.

[ctrlplusb]

P.S. I love you and THIS is the state library that I have been waiting for.

[solkimicreb]

Thanks @ctrlplusb 😄

Small update for everyone: the react-easy-state package will continue to be available as a separate package (with the exact same name and continued versioning).

I already use (codename) react-easy-stack for several small and a large-scale project internally and I am more or less satisfied with the result. I am waiting for React 16.6 with the release since Suspense might affect the package (it also has async data resolution in the router part) and I don't want to refactor the API right after release.

🍻

EDIT: the release will be an early alpha and the project will probably stay in an alpha phase for a long time (1 - 2 months).

EDIT2: Thanks for the feedback everyone! They really made the decision about easy state's future clear and simple.

[solkimicreb]

A new update. I continue to use easy-stack for internal project, but wait even more with the release. (Sorry everyone). Now it is 100% clear that concurrent React will affect it in breaking ways, I just don't know exactly how until the scheduler and react-cache packages are out.

[joshuaquek]

Hey @solkimicreb , so far no breakages on my side. I'm running on React 16.6.1.

It has been working great (I personally feel that react-easy-state is even easier to use than React Hooks, in my opinion 😂)

[myarete]

Agree with separate packages! 💯

Side note for @joshuaquek... Can you share some examples on how you're using this with NextJS? I also sent you an email :)

[joshuaquek]

Hi @altruisticsoftware , here is a simple example of a single page in NextJs:

import { view, store } from 'react-easy-state'
import './style.css'

const state = store({
  myMessage: 'Hello World'
})

Element.defaultProps = {
  myValue: 1
}

function changeMessage(){
  state.myMessage = 'Goodbye for now!'
}

function Element ({ myValue }) {
  return (
    <div>
      <h1>{state.myMessage}</h1>
      <button onClick={changeMessage()}>Click me to change the message.</button>
    </div>
  )
}

export default view(Element)

...or another example if you want one which uses React.Component in NextJs:

import { view, store } from 'react-easy-state'
import { Component } from 'react'
import './style.css'

let outsideState = store({
  middleName: ''
})

class Element extends Component {
  constructor (props) {
      super(props)
      this.myState = store({
        myMessage: 'Hello World, my name is'
      })
    }

  componentDidMount () {
    // Logic to run just before component renders
  }

  changeMessage() {
    this.myState.myMessage = 'Goodbye I'm leaving now, but by the way, my name is'
  }

  addMiddleName(){
    outsideState.middleName = 'David'
  }

  render () {
    const { firstNameFromProps = 'John', lastNameFromProps = 'Doe' } = this.props // Set default props
    return (
      <div>
        <h1>{`${this.myState.myMessage} ${firstNameFromProps} ${outsideState.middleName} ${lastNameFromProps}`}</h1>
        <button onClick={this.changeMessage()}>Click me to change the message.</button><br>
        <button onClick={addMiddleName()}>Click me to add a middle name.</button>
      </div>
    )
  }

}

export default view(Element)

Note that in the second example, its slightly more complex, and showcase how you can use a state within a component or a persistent state outside of the React component (that can be easily shared between different React components).