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.