callstack / haul Goto Github PK

The purpose of this issue is to upload and keep track of all images used in various docs

We have our own debugger and its frontend. That gives us great opportunity to make it nice.

Ideas welcome.

I am myself in favor of Zeit-like branding with monotype font faces.

As discussed on Slack, the name might be acquireable via npm support.

@satya164 do you know what steps / procedures we should follow?

Note from self: I've contacted the owner via email, but he doesn't seem to answer.

Until we fix it, we can go with haul-cli

In this project, I tried to stop and start with:

yarn run haul start -- --platform ios

But My build still contains the old UI:

After rebuild looks the same:

not showing the new code

I closed the ios simulator and reran react-native run-ios

I can't access my source files to debug on my project build with haul

Haul Configuration (webpack.haul.js)

module.exports = ({ platform }) => ({
  entry: `./index.${platform}.js`,
});

Your Environment

MAC OSX

Current Behavior

On a fresh react-native init/haul init, without changing any settings, and using the iOS 9.2 Simulator, I get the following:

Expected Behavior

I expect that it should work as it does on iOS >= 10.

Haul Configuration (webpack.haul.js)

It's the default configuration. This is on first run.

Your Environment

Current Behavior

Any console.logs in webpack.haul.js are cleared immediately

Expected Behavior

Debugging the webpack config should be possible. At the moment there's no way to check if, say for example, you're extending the default config, the output object is actually what you want it to be.

Possibly a --no-clear option would be helpful, default to the clean console approach but allow override if necessary? I'd be happy to take care of this if you're looking for a PR

Your Environment

As suggested in one of recent pull requests, it would be great to have the ability to test the options we are passing with a validate function and be able to return an Error if such validation fails.

I'll work on that and also, extract cli.js to utils/makeCli.js as eventually I want it to leave in a separate module (I tend to reuse that infrastructure quite a bit)

Need custom plugin that will replace module requires and manually call AssetsRegistry. To be done today/tomorrow.

We should support bundle command just like packager, so it can be used with gradle and xcode to build assets.

Need to set up CircleCI to build all pull requests and master.

Currently we only print either Failed to compile or Compiled with warnings. We should write a proper printer of Webpack error messages. I am thinking we might do just what create-react-app is doing here.

This is an umbrella issue to figure out what we need to ship 1.0 out.

Ideally, it would be great if we could ship it next week. There's a couple of folks I wanted to invite for alpha testing.

Looking forward to what you think

with react-native packager i have a customer Transformer

https://github.com/scalajs-react-interface/mobile.g8/blob/master/src/main/g8/scalajsTransformer.js

and "scripts": { "start": "react-native start server --transformer scalajsTransformer" },

how can i achieve something similar using haul ?

Get HMR up & running. If supported by default, we should make a flag --hot on a CLI. I believe that switch from Dev Tools is rather useless. All in all, you don't want to change it during development.

Eventually we might want to change dev tools in Simulator as well (given that it's been recently allowed), but we will see.

Current Behavior

After running an existing RN project with haul, I get the error visible in screenshot below

Expected Behavior

I expected fetch to be accessible in global like when running with packager:
https://github.com/facebook/react-native/blob/master/packager/defaults.js#L41-L44
https://github.com/facebook/react-native/blob/master/Libraries/Core/InitializeCore.js#L176-L186

Haul Configuration (webpack.haul.js)

The generated haul config:
module.exports = ({ platform }) => ({ entry: ./index.${platform}.js, });

Your Environment

How does this project differs from : https://github.com/react-community/create-react-native-app

Other than using webpack ? (which is cool btw, not saying haul is useless!)
Using webpack and its ecosystem, opens up a whole world of possibilities.

Thanks :)!

From my experience, there seems to be something wrong with the built-in source maps generated by Webpack devtool (regardless of the choice).

There are numerous reports on Github that source maps are broken, so it has to be checked.

Currently it doesn't print anything, what we need is kinda:

1. Request for .... reached
2. Compiling
3. Served
4. Bundle done in: XXX ms kind of thing

I've already shared some ideas on Slack. Would be great to decide on the direction so that we have proper branding in place before setting up docs.

I was writing readme installation steps and started wondering which type of installation we should allow.

Currently haul can be installed either globally or locally (doesn't matter to it), which is quite convinient.

In the readme, I demonstrate global installation because it's annoying to write ./node_modules/.bin/haul all over again.

Shall we stick to that or introduce something else, like react-native-cli does by calling into node_moduels?

I am in favor of mimimal setup.

Current eslint config enforces patterns that are not complying with prettier. Can we somehow normalise them in a sense that running prettier doesn't trigger any warnings?

I believe we only need few eslint rules to enforce general design patterns as styling is covered already.

Current Behavior

I use React Native for Windows and would love if --platform windows was a thing I could use :)

Expected Behavior

--platform windows runs and compiles code in my .windows.tsx files

Your Environment

React Native supports Node >= 4, according to its package.json:

  "engines": {
    "node": ">=4"
  },

We are running latest Node which makes it possible to use ES2015+ features w/o transpiling first. We need a build step that will compile code to Node 4.x (there's preset somewhere I believe).

In dev mode, let's call CLI via cli/index.js which contains requireHook. Production builds should use cli/cli which doesn't have it.

This is done for speed (see how slow is current CLI)

Current Behavior

I get the error when running yarn run haul start -- --platform ios

events.js:163
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 127.0.0.1:8081
at Object.exports._errnoException (util.js:1034:11)
at exports._exceptionWithHostPort (util.js:1057:20)
at Server._listen2 (net.js:1265:14)
at listen (net.js:1301:10)
at doListening (net.js:1416:7)
at _combinedTickCallback (internal/process/next_tick.js:83:11)
at process._tickCallback (internal/process/next_tick.js:104:9)
at Module.runMain (module.js:607:11)
at run (bootstrap_node.js:423:7)
at startup (bootstrap_node.js:147:9)
error Command failed with exit code 1.

Expected Behavior

It should run w/o errors.

Haul Configuration (webpack.haul.js)

module.exports = ({ platform }) => ({
entry: ./index.${platform}.js,
});

Your Environment

I'm running on a macbook and trying to run this react-native + redux project.

Should replace React Native's packager CLI in gradle and xcode scripts with haul during init.

• iOS ~ @grabbou
• Android ~ @satya164

Should check if no start script exists or it is the default React Native one, then prompt to add/replace it during init.

Otherwise prompt and add a script called haul

https://github.com/callstack-io/haul/blob/master/docs/Configuring%20Your%20Project.md

Start with small introduction and explain Xcode part

Should generate webpack.haul.js by determining the entry file. If index.ios.js or index.android.js exist, it should generate config with platform, if only index.js exists, it should generate config without platform. Should prompt to select the entry file from a list of js files in the directory if neither found (maybe have a limit of 5 files and fallback to an input if more than 5 files)

We need to test the code where it makes sense. Add jest, plug it in into our existing pipeline and add few tests (just to demonstrate how it should be done).

Currently we create an array of configs, one for each platform. We used to pass that array to webpack compiler, but switched to passing a single one (current platform you are building) for performance reasons.

When Webpack compiler receives an array of configs, it enters multi-config mode and handles them all w/o restarting. That allows us to serve all platform bundles at the same time, just like packager.

Unfortunately, it has a couple of limitations:

• It builds all configs at once
• It recompiles all configs at once, even if one bundle didn't change
• It's sync - android gets build after ios
• Default devMiddleware waits for all builds to finish, even if you requested ios. That means you wait for 20 seconds even if iOS was ready after 5 seconds
• All bundles are built w/o waiting for a request (no lazy option)

All the above makes the development time significantly slower for a very specific use-case (having two simulators open at the same time). However, that use-case is important and we need to support it in a better way.

I'll chat with Webpack team to understand how it works currently, if we are correct and how to fix that. Generally speaking, we might need to write our own dev middleware that does these things.

A solution would be to add a feature to bundle lazily as soon as you request platform bundle. That means we wouldn't bundle android until you load Genymotion and request it. However, as I said above, currently turning on lazy option has two issues:

• It is lazy for all configs - if you request ios, android also gets built
• When lazy is turned on, watch doesn't work (recompile on file change)

Current solution requires passing --platform flag.

This is very important to sort out now as it's going to be an important workflow detail - whether to pass platform flags or not.

I have this project where I am importing a react-native component:

https://github.com/QuantumInformation/react-native-cron/blob/master/demo/index.ios.js#L10

This component tries to import from react-native but it fails:

React Native has more commands and eventually we want to write faster and better alternatives for each of them.

Until we have them all, users may automatically try to call haul run-ios when it's not implemented yet. We don't want to implicitly call into react-native as it's a different DX.

I think we can create an empty structure for every command that prints out We are working on supporting this command, call react-native ${command} instead for now kind of thing.

Should be good first task.

Instead of:

instruct users to check if they are having proper --platform flag.

There's a couple of features we have to implement before open sourcing this repository.

Here's the list:

• Add Contributing.md guide
• Specify issue template
• List all contributors in package.json
• Fix git urls in package.json
• Go over closed issues and make sure they are readable

I am not feeling comfortable with early commits that happened to this repository (development, fast iteration, short messages, small issues), but I want to keep list of contributions and history.

Currently it shows an error, will be nice to have it ask the platform to avoid extra step

Transpile only react-native, react-native-* (compatibility). Make it easy for user to specify a list (via webpack.config?)

We have paid Zeit plan, so potentially we can use now to serve the docs.

I tried running haul with v4.6.1 of node and it failed (ReferenceError: regeneratorRuntime is not defined), but with v6 it works. The readme should indicate the minimum required version.

How to separate js bundle into framework bundle and user code bundle?
and then ，When we publish a single file to user's cell phone ,We Just need combine a single file to the base bundle.

If no argument is given, default to start like how yarn does for yarn install. Combined with #84 and #85, yarn start is all that's needed to run the server

It has to be beautiful

Hi

I'm running three kinds of command to build bundle file.

haul bundle --platform ios --bundle-output build/index.bundle --assets-dest build/assets  --dev false

The file size is 6M.

haul bundle --platform ios --bundle-output build/index.bundle --assets-dest build/assets --minify true --dev false

The file size is 6.6M.

react-native bundle --entry-file index.ios.js --bundle-output ./build/index.rn.bundle --platform ios --dev false 

The file size is 576K.

I opened the haul's bundle file ,When I deleted the sourceMap code ,the file size reduced to 1.5M

Could you add any option which can split the sourceMap to another file?

As discussed on Slack, we should only clear() terminal for long-running commands - like server. There are few places where we shouldn't do it, like printing there was problem with passed option.

We have to remove those calls.

I apologize because I don't have a solid repro other than running my project, but I have narrowed it down to Haul because switching back to the react-native packager allows the app to function properly.

Current Behavior

When connecting to the remote debugger, the app crashes with a NetworkOnMainThreadException:

E/AndroidRuntime: FATAL EXCEPTION: main
                  Process: com.hubspot.android.debug, PID: 13213
                  android.view.WindowManager$BadTokenException: Unable to add window android.view.ViewRootImpl$W@bdb46cb -- permission denied for window type 2003
                      at android.view.ViewRootImpl.setView(ViewRootImpl.java:703)
                      at android.view.WindowManagerGlobal.addView(WindowManagerGlobal.java:342)
                      at android.view.WindowManagerImpl.addView(WindowManagerImpl.java:93)
                      at android.app.Dialog.show(Dialog.java:322)
                      at com.facebook.react.devsupport.DevSupportManagerImpl.showProgressDialog(DevSupportManagerImpl.java:808)
                      at com.facebook.react.devsupport.DevSupportManagerImpl.reloadJSFromServer(DevSupportManagerImpl.java:813)
                      at com.facebook.react.devsupport.DevSupportManagerImpl.handleReloadJS(DevSupportManagerImpl.java:648)
                      at com.facebook.react.ReactInstanceManager$3$1.run(ReactInstanceManager.java:420)
                      at android.os.Handler.handleCallback(Handler.java:751)
                      at android.os.Handler.dispatchMessage(Handler.java:95)
                      at android.os.Looper.loop(Looper.java:154)
                      at android.app.ActivityThread.main(ActivityThread.java:6119)
                      at java.lang.reflect.Method.invoke(Native Method)
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)

To compound this problem, because the debugger tries to auto-reconnect, the only way to get the app to work is to uninstall and reinstall, otherwise this will get triggered on every launch.

Expected Behavior

I should be able to open the chrome debugger

Haul Configuration (webpack.haul.js)

module.exports = ({ platform }, { resolve }) => ({
  entry: `./index.${platform}.js`,
  resolve: Object.assign(resolve, {
    alias: Object.assign({
      Immutable: 'immutable'
    }, resolve.alias || {}, myAliases)
  })
});

Your Environment