Haul: Improvements to documentation

[satya164]

Here are some thoughts on things we need to cover in the docs

• [x] Recipes for various setups, e.g. typescript
• [ ] Setting up babel-plugin-module-resolver as an alternative to https://blog.callstack.io/a-cure-for-relative-requires-in-react-native-2b263cecf0f6
• [ ] Transpiling modules under node_modules
• [ ] More detailed docs regarding how it differs from React Native packager
• [ ] Manually configuring XCode or Gradle to use Haul instead of RN packager

If you have more ideas, please comment below/edit this post if you have access.

[migueloller]

Hey @satya164, just wanted to chime in and say that it's also possible to avoid long relative requires by using Webpack. Here's a Haul config I've been using that allows .jsx in React Native and allows to require anything inside src (e.g., require('components/MyButton')).

const path = require('path')

module.exports = ({ platform }, defaults) => ({
  entry: `./index.${platform}.js`,
  module: {
    ...defaults.module,
    rules: [
      ...defaults.module.rules,
      // Support .jsx
      {
        test: /\.jsx$/,
        use: {
          loader: require.resolve('happypack/loader'),
          query: { id: 'babel' },
        },
        include: path.resolve(__dirname, 'src'),
      },
    ],
  },
  resolve: {
    ...defaults.resolve,
    // Support .jsx
    extensions: [...defaults.resolve.extensions, '.jsx'],
    // Avoid extremely long relative imports
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
})

More fine-grained control like babel-plugin-module-resolver can also be achieved using the resolve.alias option in Webpack but just using resolve.modules worked for my use case.

I'm also planning on adding react-hot-loader to support HMR for functional stateless components in React Native (currently unsupported). I wouldn't mind contributing to the docs adding a couple of recipes.

[GeeWee]

I'd be willing to create a PR with a typescript recipe if there's interest.

[skellock]

@GeeWee I'm very interested!

[pyros2097]

Me too. I'm using reactxp and it needs to compile the .tsx files to a dist folder and I want that removed. Plus reactxp already has a webpack config I can just reuse that for haul.

[ericketts]

@satya164 I would also say that some documentation on migrating from Haul back to the vanilla RN packager would be useful (since the process of integrating Haul is automated but there is no option or documented process for accomplishing the inverse).

[satya164]

@ericketts if you use got for version control, git revert commit-hash will do the job!

[ericketts]

@satya164 for sure and that's the current plan if I want to undo the integration, just nice to have it documented is all 🙂 (also any manual integration docs, which you have as step 5 in root comment, serve the purpose just as well)