How to install and import

lastmjs commented 7 years ago

Hi there, I'm excited to get going with hyperHTML. I think it would be nice for the readme to show exactly how to install and import hyperHTML, I'm not seeing that anywhere and I'm having to figure it out on my own. Thanks!

WebReflection commented 7 years ago

var hyperHTML = require('hyperhtml');

???

WebReflection commented 7 years ago

Alternatively

<!doctype html>
<script src="https://unpkg.com/hyperhtml@latest/min.js"></script>

lastmjs commented 7 years ago

What about import {hyperHTML} from './node_modules/hyperhtml/min';? Why doesn't that work?

WebReflection commented 7 years ago

in which environment would that work?

it's not a native ES module, it misses .js

it's not a Webpack or Rollup import

so why do you think that should work at all?

The minified version is to include it like any other Web script.

<!doctype html>
<script src="https://unpkg.com/hyperhtml@latest/min.js"></script>

If you need the module, you need to npm install hyperhtml and then require it using whatever toolchain/wrapper/bundler you like, which should be compatible with regular npm modules.

lastmjs commented 7 years ago

I'm working with ES modules, I would love to expect to import my project like ES modules will allow in the future, and it is possible now. I'm pretty sure webpack and rollup allow it. I'm using Zwitterion.

lastmjs commented 7 years ago

I think it should be written as a native ES module, and then Webpack, Rollup, Zwitterion, etc, and eventually the native module loader will be able to load it.

WebReflection commented 7 years ago

I would love to expect to import my project like ES modules will allow in the future

in the future you will be able to do that.

I think it should be written as a native ES module

that's Web unfriendly. I do use CDN to bring in libraries, it's useful for CodePen examples and everything else.

That .min file is not what you want to import anyway, it's after bundlers and minification.

You want the native module, I understand, but you are using tools and these are smart enough to import modules from npm which has 70% of modules written in CommonJS, if not more.

TL;DR this ain't going to happen now because modules on npm are still published using npm language which is CommonJS

lastmjs commented 7 years ago

Okay, thank you for considering it, I understand. I hacked my way around it, in case you're interested:

import * as hyperHTMLRaw from './node_modules/hyperhtml/hyperhtml';
const hyperHTML = hyperHTMLRaw.default;

WebReflection commented 7 years ago

Last, but not least: in case you haven't noticed, this whole module is written in a JS compatible with every browser on this planet and it's small in size because of that.

Transpilers have the bad habit to blow code and these are annoying specially for little stand alone software like hyperHTML.

Writing this in latest/coolest ES syntax will:

drop compatibility with browser not supported by transpilers
increase 30% of the size for no reason whatsoever
decrease performance due wrapped functionalities that didn't really need to be wrapped
make bug report, test, maintenance a nightmare because I am aiming to 100% code coverage and having unreachable patterns due transpilers isn't exactly developer friendly

So, as you can see, the gain, compared with all the loss, isn't that worth it, isn't it?

However, the day npm modules will be compatible with ES2015 import exports I'll create in my build step a file that will just include export default hyperHTML; at the end of a copy and paste from the library.

Easy peasy, but not today :wink:

WebReflection commented 7 years ago

So many things not quite right there ...

you wrote $this instead of this ... I've no idea what else you'd expect if not an error. $this doesn't exist in the scope, it's not a reference, it's nothing. Maybe that's a left-over from vue template?
if you use handleEvent pattern, either you really know what you are doing or I suggest you avoid it and extend HyperHTMLElement instead. https://github.com/WebReflection/hyperHTML-Element

You have a single handleEvent which will fail 2 out of 3 times because only one input target has a data-call attribute. Other two elements don't.

There is no magic in handleEvent, it's a standard behavior, not something introduced by hyperHTML. You need to make it smarter or, like I've said, you just use the HyperHTMLElement class.

why an email instead of a GitHub comment so that everyone else could've read this answer?

Best Regards

On Fri, Aug 25, 2017 at 10:36 AM, zwz notifications@github.com wrote:

I use vue-cli to generate the build config files (webpack, babel...). After removing vue-related stuff, I can use import hyperHTML from 'hyperhtml'.

The only problem is that when I run the Login demo, the console says: Uncaught ReferenceError: $this is not defined at HTMLInputElement.oninput (:2:2)

This is the components/Login.js:

import hyperHTML from 'hyperhtml' export default class Login { constructor() { return this.render() } oninput(e) { this[e.target.name] = e.target.value } handleEvent(e) { thise.target.dataset.call } login(e) { e.preventDefault() if (this.email && this.pw) { console.log('ok') } else console.log('no no') }

render() { return hyperHTML.wire(this)<form method="post"> <input type=email name=email oninput={$this}><br> <input name=pw type=password oninput={$this}><br> <button type=submit data-call=login onclick={$this} value='登录'></form> } }

And this is the main.js:

import hyperHTML from 'hyperhtml' import Login from './components/Login' window.onload = function() { hyperHTML.bind(document.body)${new Login()} }

I have not addressed the problem yet.

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/WebReflection/hyperHTML/issues/75#issuecomment-324870649, or mute the thread https://github.com/notifications/unsubscribe-auth/AAFO9RRJw0sDeuJKmTt1DwDscS4m98o4ks5sbpWlgaJpZM4OrvcL .

zwz commented 7 years ago

@WebReflection I found the silly mistakes in my code just after I posted it. So I deleted it. It is my fault. Sorry for the interuption.

I do not use HyperHTMLElement class because its document says that it requires IE 11 above. But I have to support IE 9 at least, since they are still quite popular in my country.

WebReflection commented 7 years ago

I do not use HyperHTMLElement class because its document says that it requires IE 11 above. But I have to support IE 9 at least,

This is a bit of a non-sense.

If you use classses and Custom Elements V1, you can forget IE9 because transpiled code will break there.

It's a long-standing, well documented and known, Babel bug.

My code works thanks to my Babel fix that inevitably needs IE11 or above so, if (classes) IE11+; else functions;

zwz commented 7 years ago

Well, in this case I would use function instead, and no custom element.

WebReflection commented 7 years ago

You have examples here: https://viperhtml.js.org/hyperhtml/examples/#!fw=React&example=Combined%20Components

The tricky bit is try to wire objects, recycling nodes.

But for all the one-off cases, I'd say you're good to go without classes.

janat08 commented 6 years ago

neither require nor import for "hyperhtml" works, even if npm home says otherwise.

WebReflection commented 6 years ago

@janat08 you are off topic and also wrong. Change tooling or address proper files/default

janat08 commented 6 years ago

I've got all the tooling that supports up to es7, and default doesn't do it.

WebReflection commented 6 years ago

You can require hyperhtml/cjs or import hyperhtml/esm

I’ve tons of online demo that just work via ESM so please try a bit harder, thanks

janat08 commented 6 years ago

I tried getting into node modules for the default in esm and my meteor app begun crashing.

janat08 commented 6 years ago

although what I suppose you mean in import "hyperhtml/esm" or require "hyperhtml/cjs"?

WebReflection commented 6 years ago

ESM

import hyperHTML from 'hyperhtml/esm';
// or
import {hyper, wire, bind, Component} from 'hyperhtml/esm';
// or
import hyperHTML from 'https://unpkg.com/hyperhtml?module';

CJS

const hyperHTML = require('hyperhtml/cjs').default;
// or
const {hyper, wire, bind, Component} = require('hyperhtml/cjs');

if none of these work for you I suggest you describe the tools you are using and the code you are writing.

pmowrer commented 6 years ago

Would you consider providing an es5 build (or an UMD-wrapped version of min)? For those of us targeting browsers that don't understand es6, and don't yet transpile code in node_modules (including this library) during bundling (typical webpack build).

WebReflection commented 6 years ago

@pmowrer sounds like a reasonable request, please file an issue about it so I can address it. thanks.

WebReflection commented 6 years ago

@pmowrer never mind, it's here: https://unpkg.com/hyperhtml@latest/umd.js

you can also require("hyperhtml/umd") if you prefer

pmowrer commented 6 years ago

@WebReflection That works great! Thanks for the quick turnaround!

Lonniebiz commented 5 years ago

ESM

import hyperHTML from 'hyperhtml/esm';
// or
import {hyper, wire, bind, Component} from 'hyperhtml/esm';
// or
import hyperHTML from 'https://unpkg.com/hyperhtml?module';

CJS

const hyperHTML = require('hyperhtml/cjs').default;
// or
const {hyper, wire, bind, Component} = require('hyperhtml/cjs');

if none of these work for you I suggest you describe the tools you are using and the code you are writing.

The official documentation should provide the content of this comment (especially the ESM part); it took me a while to find this.

janat08 commented 5 years ago

It's there at the bottom

jordanaustin commented 5 years ago

Here's the link straight to this section in the README: https://github.com/WebReflection/hyperHTML#installation

Lonniebiz commented 5 years ago

Here's the link straight to this section in the README: https://github.com/WebReflection/hyperHTML#installation

I was looking for it here: https://viperhtml.js.org/hyperhtml/documentation/#essentials-0

WebReflection / hyperHTML

How to install and import #75