Hyperapp boilerplate using Fly and Rollup ✈️+🌯 about hyperapp HOT 11 CLOSED

Up to this point I've only been dabbling with Hyperx, so likely that. I have been deeply rooted in Ember for the past 5 years so I'm not as up-to-date on competing technologies.

But, yes, any help or interest would be greatly appreciated!

from hyperapp.

For the past 5 years I've only developed rich front-ends with Ember, so I am learning some of the other tooling and libraries. I was drawn to the simplicity of Hyperapp as well as the positive attitude of the maintainer @jbucaran - so I am trying to learn from others here.

And I am not using browserify. I attempted to use it just so I could handle the hyperxify transform as a pre-processing step. It wasn't worth the hassle.

from hyperapp.

@tzellman I can help out with the migration to HyperApp 0.0.12.

Are you planning to use JSX or Hyperx or both?

from hyperapp.

I made the changes to update to hyperapp 0.0.12. Let me know if there is a more preferred way.

from hyperapp.

LGTM:)

from hyperapp.

@tzellman This is great! 🎉

from hyperapp.

@tzellman I was able to come up with a rollup+hyperx+hyperxify build setup that works, perhaps you can update your boilerplate? 👋

• rollup+hyperx: https://gist.github.com/jbucaran/fac2c3de24e5171596fb189f9c1feb8e

This setup also uses hyperxify to transform hyperx (as well as to remove the entire module from the end bundle) into native h calls, which is a must have for a real project.

The only downside is, despite using rollup, we can't do treeshaking on hyperapp because in order to use hyperx, I also has to use require/commonjs.

tl;dr, if anyone wants to use rollup to build hyperapp apps, the ideal combo would hyperapp + jsx. For hyperx the best will always be browserify (although webpack is also okay).

• webpack+hyperx: https://gist.github.com/jbucaran/c6a6bdb5383a985cec6b0ae4ebe5a4b1
• browserify+hyperx: https://gist.github.com/jbucaran/48c1edb4fb0ea1aa5415b6686cc7fb45

from hyperapp.

Cool, I will look into doing that! I have no allegiance to hyperx, so I may just update to use JSX. Hopefully will have some time later... ⏳

from hyperapp.

So, dumb question - how does one use hyperxify (with the browserify rollup plugin) when the main (entry js) file uses ES6 import statements instead of require?

My assumption is that I would first need to transpile (using buble or babel), however I still am getting an error during the browserify/hyperxify step.

Your gist uses require. I pulled down the zip and modified it to use ES6 imports, and am having the same problem. Maybe you can lend me some insight?

from hyperapp.

@tzellman Exactly! I also wanted to do this, so rollup could do tree-shaking (e.g. get rid of the router when not using it), but hyperx is commonjs and needs to be used in the same file where you import hyperapp.

I also tried mixing import and require in the same file unsuccessfully.

Bottom line: I found rollup+hyperx's combination not desirable.

• For JSX: browserify, webpack or rollup is okay.
• For Hyperx: webpack or browserify are best. rollup is possible, as shown by the gist, but not as flexible.

from hyperapp.

Yeah, so converting to JSX seemed to be the most sane solution; also created a much smaller final payload.

I was able to keep all of my existing tooling: fly driving rollup with buble.

Thanks for all of the useful info!

from hyperapp.