Skip to content

Latest commit

 

History

History
76 lines (62 loc) · 4.29 KB

File metadata and controls

76 lines (62 loc) · 4.29 KB

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'
  • 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 '@'
    • 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

babel

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`.