HMR with Redux (redux store currently on keydown)

[faceyspacey]

First off, excellent stuff. I think I've written this to you in like 4 places now.

I'm going to create a sandbox for Redux-First Router. There's just one problem, and I'm sure you know it: the store resets again when you type anything.

I'd be interested to know how you built "instant preview." It's fantastic. Let's figure out how to make it support more use-cases. Do we need a module.hot api?

[faceyspacey]

well, i figured it out lol:

window.store = window.store || createStore(
  counter,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);

const rootEl = document.getElementById('root');

const render = () => {
  ReactDOM.render(
    <Counter
      value={window.store.getState()}
      onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
      onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
    />,
    rootEl,
  );
};

[faceyspacey]

very very VERY nice.

[CompuIves]

Wow! This is great!!

[CompuIves]

A module.hot api sounds really great too, I haven't thought of this before. I'll put some more thought to it 😄.

[faceyspacey]

bro i'm in love. i dont even know what to say. ...can u give me a summary of how instant preview works. and link to me the relevant source files.

[CompuIves]

The speed of the instant preview could be attributed to the fact that we cache all files that have been executed, because of this you only have to evaluate 1-3 (propagates up) files when you make a change.

[faceyspacey]

just makes me wonder why webpack doesn't work that fast..

[CompuIves]

Code can be found here. Not the most beautiful code, but readable 😅 .

[faceyspacey]

all good. thanks.

[faceyspacey]

one thing we/u should do sooner than later: get a React Native Web demo up on the homepage. ...this could be a great way to build RN apps since it's so fast. I'm literally scheming right now how I'll mock React Navigation to be a crappy web version so i can just build it here, and then just run the code in the simulator later.

Not sure if u have experience with React Navigation but basically it has great universal reducers u can use on web. right. So u could easily make a crappy good enough navigator for web (perhaps that doesnt even have a full NavBar), and just start prototyping. At the end of the day, u just need it to switch pages based on an array of routes. The drawer and tab bar, dont even matter. U could have a different SandBox per tab, just while u churn stuff out.

[faceyspacey]

is there something im doing wrong with the css:

https://codesandbox.io/embed/nZNlvYLLY?module=5WRAA

bug: the regular link doesnt deep-link by the way: https://codesandbox.io/s/nZNlvYLLY?module=5WRAA

u got css modules support right?

[CompuIves]

one thing we/u should do sooner than later: get a React Native Web demo up on the homepage. ...this could be a great way to build RN apps since it's so fast. I'm literally scheming right now how I'll mock React Navigation to be a crappy web version so i can just build it here, and then just run the code in the simulator later.

Interesting! Are you interested in building something like that? 😄

u got css modules support right?

No, we did support it in earlier iterations, but I'm trying to have full compatability with create-react-app, so I dropped the feature.

bug: the regular link doesnt deep-link by the way: codesandbox.io/s/nZNlvYLLY?module=5WRAA

Do you mean to the module?

[faceyspacey]

yea. the main link doesnt deep link.

...i'll probably do the RFR demo first. but later RN is on my radar for this, should everything go smoothly :)

...i dont use CRA--they dont have css modules? ...i think it's a must. most people still use them, and for serious apps i wont use true css-in-js. i only recommend cacheable stylesheets and never to use solutions that do work in your render functions that you can do statically once. css modules is css in js--it's just css

bottom line: u want people building beautiful demos. u dont want to force them to use glamorous. u want them bringing pre-existing css, etc. beautiful demos === promotion for your product.

[faceyspacey]

here's what i'll be bringing ur way soon:

https://github.com/faceyspacey/redux-first-router-demo

give that a git clone and a yarn start if u get a chance. ...let me know what u recommend to port the css.

[CompuIves]

I agree, I also use css-modules for my majority of React dev. My main reason to support create-react-app compatibility is to make it easier for users to recognize the project. The advantage of this is that you don't have to think about what build system is used, since this is universal over all create-react-app projects. You can completely focus on the code itself.

I do agree that there should be a way to eject, just like in cra. I'm working out right now on how to handle this in a user friendly way.

CodeSandbox does support css, only the classnames are not mangled though. So I would suggest using vanilla css and vanilla css classnames.

I can check your example later today, need to finish some study project first 😄 .

[faceyspacey]

didnt know CRA doesnt support them

...the class names appeared...oh i get it. i gotta embed the stylesheet manually. tho i dont know how to do that. hmm..

[faceyspacey]

...figured it out, after learning a bit about CRA:

...just had to use the class name as a string (e.g. className='foo'), rather than a key on the imported css module (className={styles.foo}). That actually de-prioritizes the concern quite a bit.

However, I found a PR from a month ago for css modules support within CRA:

facebook/create-react-app#2278

maybe that makes your life easier if u do want css modules and dont want to stick to exactly what CRA does.

Here are the initial issues/discussions about them u might have seen:
facebook/create-react-app#90
facebook/create-react-app#78

...My concept for better css in js is this: u can write ur css in javascript, but only statically, and it's then removed and converted to stylesheets for optimum performance. That would solve the problems discussed there where they dont want to support custom webpack stuff. Basically, unless u inject and use a special plugin or loader that converts the js to stylesheets, it will run fine in CRA as javascript that functions like a static version of Glamor. That way when u wan to go "pro" you can remove the render/runtime overhead and create cacheable stylesheets.

If we had that, this point would be moot. Perhaps i'll just start doing true js-in-css, and work on such a tool for the future. It's basically a tool that could be applied to Glamorous, Aphrodite or others.

[CompuIves]

This is really interesting. I think libraries like emotion do something similar with a babel plugin. But I think not like you mentioned, with static css.

I hope that PR will land, since it does allow you to optionally use css-modules.

[faceyspacey]

That pr won't land. They don't want CSS modules support. Or at least in the past in issue 90 they didn't. They may want to replace webpack one day and don't want to break people's apps.

[faceyspacey]

solved long ago too.