Can we use hyperhtml without bundler or any other tooling

[fernandocanizo]

Context: I've been trying hyperHTML so far by using the CDN import, however today I found a "Too many request" error after an attempt to reload the page I was working on, so I decided to give a second try to the npm install hyperhtml technique. The first time I tried it gave me problems too, but I was too eager to try the library I didn't care and just went for the thing that worked.

So, so far I've been using:

• 0. CDN from index.html with <script src=...> or index.js like here This doesn't give errors in general, but I stumped with a "Too many request" error. So I'd like to load hyperHTML from my saved npm package. import hyperHTML from 'https://unpkg.com/hyperhtml?module';
• 1. try documented ways to import first import hyperHTML from 'hyperhtml';

Uncaught TypeError: Failed to resolve module specifier "hyperhtml". Relative references must start with either "/", "./", or "../".

• 2. another one from documentation import hyperHTML from 'hyperhtml/esm';

     Uncaught TypeError: Failed to resolve module specifier "hyperhtml/esm". Relative references must start with either "/", "./", or "../".

• 3. this won't work, but just try it to objectively discard it import { hyperHTML } from '../../../node_modules/hyperhtml/esm/index.js';

     net::ERR_ABORTED 404 (Not Found)

Of course, I'm serving app/front/ as root path so node_modules, which exists at app/ level, it's unseen

• 4. So let's try the previous approach with an symbolic link cd app/front/js/vendor/ ln -s ../../../../node_modules/hyperhtml/esm/index.js ./hyperhtml.js import { hyperHTML } from './vendor/hyperhtml.js';

     Uncaught TypeError: Failed to resolve module specifier "@ungap/weakmap". Relative references must start with either "/", "./", or "../".

That last error made me suspect maybe I'm trying to achieve something hyperHTML is not designed for: to use it without any tooling at all.

I've been reading docs and related issues, in particular #75 which is the most related one, but it seems the tooling is implied in all solutions provided either on the docs, since all examples don't put a path in the import and it seems a required thing if one is using imports without bundler.

[WebReflection]

Closing as this has nothing to do with hyperHTML, you need a bundler or simply use the CDN version without passing ?module to the URL, it's already pre bundled for you 👋

[WebReflection]

Apologies for my previous quick answers from my mobile, the thing is that you can simply

<script src="https://unpkg.com/hyperhtml"></script>

on top of your page, to have a global hyperHTML instance to use, or you need a bundler, such as rollup, webpack, or you name it, like it is for the entirety of the libraries published in npm to date, unless these have zero dependencies, which is not the case for hyperHTML, and likely never will.

[fernandocanizo]

Apology accepted :) Anyway I'll reply your question: Do I know how to use modules? I'm realizing not quite right. So, I offer my apologies for making issues of naive questions. Maybe this was a good case for a Stack Overflow question? (Instead of an issue). However I feel issues are more response time streamlined.

To offer more context: I was trying to build a thing without a bundler. I'm trying to escape the tool-izization of the web development: transpilation, minification, uglyfication and bundling. Now I see it's not possible to escape everything.

[WebReflection]

@fernandocanizo I use import {bind, wire} from https://unpkg.com/hyperhtml?module all the time, that doesn't require any tool, but it also doesn't work offline, 'cause if you need that, it means you need a bundler.

the ECMAScript module world is still floating between Web and NodeJS, and while it's getting there, it's not 100% there yet, and it'll take another year, imho, but meanwhile everyone else used bundlers, for both NodeJS or Web whatsoever, and these all work great 👋