mobx + react-hot-loader basic boilerplate

---

get started

• clone repo
• git checkout boilerplate
  • this branch is the same as react-hot-loader/examples/mobx but upgraded for babel7

development notes

• react-cosmos is included to facilitate rapid component prototyping (I find it a lot leaner, faster, and simpler than storybook especially and also docz).

  • start it with yarn dev
  • create components, then use them in fixture files. react-cosmost will render them in isolation in the live hmr browser environment. to create fixtures:

    End fixture file names with .fixture.{js,jsx,ts,tsx} Put fixture files inside fixtures

  • cosmos.decorator.js files in the src allow you configure mock providers, themes, context etc for react-cosmos to pass to fixtures

  A decorator only applies to fixture files contained in the decorator's directory. Decorators can be composed, in the order of their position in the file system hierarchy (from outer to inner).

• webpack has been configured to resolve modules first anywhere in ./src and then in ./node_modules

  • this means you can use absolute paths relative to './src when you import modules
  • or you can stick with relative paths

  // in src/__fixtures__/CollectionViewer.fixture.js
  // you can use absolute paths like this
  import { CollectionViewer } from 'components/Collection'
  // instead of or in addition to relative paths like this
  import { CollectionViewer } from '../components/Collection'

  • thanks for the tip https://moduscreate.com/blog/es6-es2015-import-no-relative-path-webpack/

• to make changes to webpack's config, do so in both webpack.config.babel.js and in webpack.override.js. The latter is needed by cosmos-react becaause it uses its own webpack.

concerns:

• react-hot-loader is complicated and I don't understand it.
• configured webpack.resolve.module to resolve 'src/' so modules can be imported from absolute paths (relative src)
  • for some reason `import { xxx } from 'util' was causing errors
    • because there is a "special" 'util' package at node_modules/util.
    • changing the name of ./src/util -> /src/utila fixed it
      • but there is also a node_modules/utila
      • so not sure what's going on
  • vue-cli uses webpack alias to prefix src/** with '@'
    • so there won't be any chance for collision with node_modules/ of the same name
    • facebook/create-react-app#581 (comment)
  • implemented it in cosmos webpack
  • import { generateShortNanoId as nanoId } from '@/util'; works

documentation

TODO: need to overhaul / remove react-hot-loader, its less useful now that I'm using cosmos & increases surfaace area for errors

• perhaps port this? TODO take inspiration from https://github.com/coryhouse/react-slingshot/blob/master/webpack.config.dev.js

• react-hot-loader https://github.com/gaearon/react-hot-loader

• @hot-loader/react-dom: https://github.com/hot-loader/react-dom (sometimes called react-🔥-dom)

• getting started guide http://gaearon.github.io/react-hot-loader/getstarted/#step-2-of-3-using-hmr-to-replace-the-root-component

babel

• upgrading programmatically:
  • https://github.com/babel/babel-upgrade
  • npx babel-upgrade --write
• read this to avoid confusion! https://babeljs.io/docs/en/v7-migration
• caution: upgrading decorator plugin (order is important); https://babeljs.io/docs/en/babel-plugin-proposal-decorators
• https://babeljs.io/docs/en/next/babel-plugin-proposal-class-properties.html
• https://babeljs.io/docs/en/babel-preset-env
• https://babeljs.io/docs/en/babel-preset-react
• https://babeljs.io/docs/en/next/babel-preset-env.html
• https://babeljs.io/docs/en/next/babel-preset-react.html

clone boilerplate from react-hot-loader examples

svn checkout https://github.com/gaearon/react-hot-loader/trunk/examples/mobx boilerplate-mobx-react-hot-loader
cd boilerplate-mobx-react-hot-loader

note:* as of 2019-07-25 the mobx react-hot-loader example had outdated packages (mobx, react, react-dom, react-hot-loader). Upgrade them the work with react@^16.8.6. Then alias react-dom to ./node_modules/@hot-loader/react-dom' in webpack.conf`.