How to install and import #75
Comments
var hyperHTML = require('hyperhtml');??? |
|
Alternatively <!doctype html>
<script src="https://unpkg.com/hyperhtml@latest/min.js"></script> |
|
What about |
|
in which environment would that work? it's not a native ES module, it misses 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 |
|
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. |
|
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. |
in the future you will be able to do that.
that's Web unfriendly. I do use CDN to bring in libraries, it's useful for CodePen examples and everything else. That You want the native module, I understand, but you are using tools and these are smart enough to import modules from TL;DR this ain't going to happen now because modules on npm are still published using npm language which is CommonJS |
|
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; |
|
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 Writing this in latest/coolest ES syntax will:
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 Easy peasy, but not today 😉 |
|
So many things not quite right there ...
1. 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?
2. 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.
3. 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 ***@***.***> 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) {
this[e.target.dataset.call](e)
}
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
<#75 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAFO9RRJw0sDeuJKmTt1DwDscS4m98o4ks5sbpWlgaJpZM4OrvcL>
.
|
|
@WebReflection I do not use HyperHTMLElement class because its document says that it requires IE 11 above. |
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, |
|
Well, in this case I would use function instead, and no custom element. |
|
You have examples here: 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. |
|
neither require nor import for "hyperhtml" works, even if npm home says otherwise. |
|
@janat08 you are off topic and also wrong. Change tooling or address proper files/default |
|
I've got all the tooling that supports up to es7, and default doesn't do it. |
|
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 |
|
I tried getting into node modules for the default in esm and my meteor app begun crashing. |
|
although what I suppose you mean in import "hyperhtml/esm" or require "hyperhtml/cjs"? |
|
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. |
|
Would you consider providing an es5 build (or an UMD-wrapped version of |
|
@pmowrer sounds like a reasonable request, please file an issue about it so I can address it. thanks. |
|
@pmowrer never mind, it's here: https://unpkg.com/hyperhtml@latest/umd.js you can also |
|
@WebReflection That works great! Thanks for the quick turnaround! |
The official documentation should provide the content of this comment (especially the ESM part); it took me a while to find this. |
|
It's there at the bottom |
|
Here's the link straight to this section in the README: https://github.com/WebReflection/hyperHTML#installation |
I was looking for it here: |
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!
The text was updated successfully, but these errors were encountered: