Web as a target

[satya164]

Since Haul uses Webpack, it'll finally be possible to use a single bundler for both web and native when you're building an universal application.

Probably not a short-term target. But I hope this will be true in the long term.

[grabbou]

It is probably worth to investigate packages like react-primitives and react-native-web for potential use-cases and how Haul could fit in here.

We will be starting a new project internally to test it out, so might be a nice battlefield.

[ericwooley]

This seems like it would be pretty easy actually. React-native-web just uses an alias in webpack to resolve react-native to react-native-web

I think it would be pretty easy to add web as a platform to the cli, and add it to the default config.

From https://github.com/callstack-io/haul/blob/master/docs/Configuration.md

// completely untested.
module.exports = ({ platform }, defaults) => ({
  entry: `./index.${platform}.js`,
  module: {
    ...defaults.module,
    rules: [
      ...defaults.module.rules,
      {
        test: /\.js$/,
        use: 'custom-loader',
      }
    ],
  },
  resolve: {
    ...defaults.resolve,
    alias: platform === 'web'  // if the platform is web, alias react-native to react-native-web
        ? {
            ...defaults.resolve.alias,
             'react-native': 'react-native-web',
        }
        : defaults.resolve.alias,
    plugins: [...defaults.resolve.plugins, new CustomPlugin()],
    modules: ['src'],
  },
});

[satya164]

Not really. There are several things we need to take care of,

• Add a way of adding polyfills according to the platform. We don't want to include RN's polyfills on web
• We need to rework asset loader for web or switch it for different loaders
• ?

[ericwooley]

Well, here is their demo webpack loader config for the react-native-webpack-starter
https://github.com/grabcode/react-native-web-starter/blob/master/web/webpack.config.dev.js

module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: [
          'react-hot',
          'babel-loader?cacheDirectory=true'
        ]
      },
      {
        // Most react-native libraries include uncompiled ES6 JS.
        test: /\.js$/,
        include: /node_modules\/react-native-/,
        loader: 'babel-loader',
        query: { cacheDirectory: true }
      },
      {
        test: /\.(gif|jpe?g|png|svg)$/,
        loader: 'url-loader',
        query: { name: '[name].[hash:16].[ext]' }
      }
    ]
  },

Add a way of adding polyfills according to the platform. We don't want to include RN's polyfills on web

Which ones are you talking about? I'm trying to find them in the src of haul.

I am currently reworking my boilerplate https://github.com/ericwooley/react-nativeish and switching to haul. It would be pretty awesome to remove a lot of the webpack stuff from the boilerplate and offload it onto the cli. Would you be open to a PR for this?

[necolas]

I'm interested in helping those of you looking to get Haul and RNW play nice together, and it would be good if the webpack asset loader could eventually be published separately (for people integrating RNW into existing apps or not using Haul).

Reaching into RN internals is a bit of a problem when it comes to supporting platforms beyond ios and android; perhaps it suggests that React Native should be exporting AssetRegistry or hanging it off a static on Image.