Recipes.md

id	title
recipes	Recipes

Typescript

You will need to install ts-loader for Haul to work with TypeScript.

yarn add --dev ts-loader

This is a webpack.haul.js that works with TypeScript.

module.exports = ({ platform }, { module, resolve }) => ({
  entry: `./src/index.${platform}.tsx`,
  module: {
    ...module,
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader'
      },
      ...module.rules
    ]
  },
  resolve: {
    ...resolve,
    extensions: [
      '.ts',
      '.tsx',
      `.${platform}.ts`,
      '.native.ts',
      `.${platform}.tsx`,
      '.native.tsx',
      ...resolve.extensions
    ]
  }
});

And a corresponding (example) tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "target": "es2015",
    "moduleResolution": "node",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

However, if you want to use synthetic defaults imports, aka things like import React from 'react' instead of import * as React from 'react' you will need a little more. Your .tsconfig.json must have "allowSyntheticDefaultImports": true, and you will need to pass the code through babel. You will need babel-loader for this.

yarn add --dev babel-loader

Revised webpack.haul.js

module.exports = ({ platform }, { module, resolve }) => ({
  entry: `./src/index.${platform}.tsx`,
  module: {
    ...module,
    rules: [
      {
        test: /\.tsx?$/,
        exclude: '/node_modules/',
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: 'ts-loader'
          },
        ],
      },
      ...module.rules
    ]
  },
  resolve: {
    ...resolve,
    extensions: [
      '.ts',
      '.tsx',
      `.${platform}.ts`,
      '.native.ts',
      `.${platform}.tsx`,
      '.native.tsx',
      ...resolve.extensions],
  },
});

Mock files when running detox tests

Detox is a "grey box" e2e framework developed by wix. It provides the ability to mock files during tests using react-native-repackager

react-native-repackager is built for the standard react-native packager, so your mocks won't work with haul out-of-the-box. Luckily, it's easy to congiure haul (webpack, actually) to resolve the mocked files instead of the original ones during tests:

// webpack.haul.js

resolve: {
    ...defaults.resolve,
    extensions: process.env.APP_ENV === 'detox_tests'
            ? ['.mock.behaviour.js', ...defaults.resolve.extensions]
            : defaults.resolve.extensions
  },

Set the environment variable APP_ENV to detox_tests when running Haul:

APP_ENV=detox_tests yarn haul