Hyperhtml: Webpack compatible bundle in browser field

[ansarizafar]

hyperhtml points broswer field in package.json to a bundle that can't be used with webpack, and webpack actually resolves main file in this order: browser ＞ module ＞ main by default

Please update browser field in package.json with a webpack conpatible bundle.

[WebReflection]

Webpack should simply invert such order because it clashes with unpkg.com that serves the browser by default so that I can write https://unpkg.com/hyperhtml and have latest version in.

This is not going to happen specially because every other bundler got this right (e.g. rollup).

Please read here how to require hyperHTML:
https://github.com/WebReflection/hyperHTML#installation

[WebReflection]

P.S. that field in _package.json_ is called browser, not _bundle_, because it should be reserved for browsers 🤷‍♂️

[ansarizafar]

I am using hyperhtml with poi https://poi.js.org/#/ I have also opened an issue on poi repo and here is the reply from the poi maintainer https://github.com/egoist/poi/issues/375#issuecomment-362153144

Here is how I am requiring hyperhtml now
```
const { hyper, Component } = require("hyperhtml/umd");
````

[WebReflection]

if you can do that, you can also be explicit and do this instead ?

const { hyper, Component } = require("hyperhtml/cjs");

[ansarizafar]

If I make your suggested change then I get this error when using poi build

endor.490ee112.js from UglifyJs
Invalid assignment [./node_modules/hyperhtml/cjs/shared/easy-dom.js:3,0][vendor.490ee112.js:64,28]

 FAIL  Compiled with errors!

Cjs module size 5.5 gzip is bigger than umd size 4.9 gzib. Here is my complete code
````
import router from "roadtrip";
const { hyper, Component } = require("hyperhtml/cjs");

class Welcome extends Component {
constructor(router) {
super();
this.router = router;
}

click(e) {
e.preventDefault();
this.router.goto("/settings");
}

render() {
return this.html <h1>Welcome</h1> <a href="/settings" onclick=${this.click.bind(this)}>settings</a> ;
}
}

class Settings extends Component {
constructor(router) {
super();
this.router = router;
}

click(e) {
e.preventDefault();
this.router.goto("/");
}

render() {
return this.html <h1>Settings</h1> <a href="/" onclick=${this.click.bind(this)}>home page</a>;
}
}

router
.add("/", {
enter: function(route, previousRoute) {
hyper(document.body)${new Welcome(router)};
window.scrollTo(route.scrollX, route.scrollY);
}
})
.add("/settings", {
enter: function(route, previousRoute) {
hyper(document.body)${new Settings(router)};
window.scrollTo(route.scrollX, route.scrollY);
}
})
.start({
fallback: "/" // if the current URL matches no route, use this one
});

````

[WebReflection]

right ... then I should probably specify this in the README, thanks !

[albertosantini]

@ansarizafar I created a snippet p.js locally containing the code you provided, loading hyperHTML with import { hyper, Component } from "hyperhtml/esm";

I created a poi config file poi.config.js, disabling uglifying step:

module.exports = {
    minimize: false
}

Then I executed the build command:

$ poi build --rawErrors --no-clear p.js                                               
> Running in production mode                                                          
> Using external Poi config file                                                      
> location: "C:\My\Dev\snippets\000\poi.config.js"                                    
> Bundling with Webpack 3.10.0                                                        
> Creating an optimized production build:                                             

 95% emitting                   Asset       Size  Chunks             Chunk Names      
      vendor.0d89b65e.js      82 kB       0  [emitted]  vendor                        
      client.5069523b.js    5.08 kB       1  [emitted]  client                        
    manifest.ac2412b3.js    5.92 kB       2  [emitted]  manifest                      
  vendor.0d89b65e.js.map    79.1 kB       0  [emitted]  vendor                        
  client.5069523b.js.map    2.77 kB       1  [emitted]  client                        
manifest.ac2412b3.js.map    6.04 kB       2  [emitted]  manifest                      
              index.html  662 bytes          [emitted]                                

 DONE  Build e0f419 finished in 1510 ms!                                                                                                                                    

The error you get is due to UglifyJS does not yet support ES6.
Your issue is very similar to https://github.com/egoist/poi/issues/272

[ansarizafar]

@albertosantini Thanks for investigating this issue.