4 ms·

(Disclaimer: I'm author of mithril.js, another minimalist JS framework) I'm curious why you decided to export multiple tag names as opposed to using hyperscrip

by lhorie 6y ago

(Disclaimer: I'm author of mithril.js, another minimalist JS framework) I'm curious why you decided to export multiple tag names as opposed to using hyperscript. Something that helped mithril.js gain more traction was that while it is idiomatically meant to be used as plain JS, it's also compatible with JSX tooling for the folks that want that. Also, some things are a bit awkward to express in terms of tag-names-as-functions (most notably, custom components require a hyphen in their names, and SVG tags need to be created with a different DOM API, and some have name collisions with HTML tags, e.g. `title`)

SahAssar 6y ago
Skruv's html lib evolved from how I used hyperapp v0 and v1 a couple of years ago. It seems from what I can tell that hyperscript, hyperapps `h` function and skruv's `h` function follow similar ideas and signatures and I got my inspiration from hyperapp which I guess got at least some inspiration from mithril. One thing I like about exporting multiple tag names is that it (to me at least) makes it more readable. When I switched over my last team from JSX to JS (that was in hyperapp v1) they did not like writing `h('div')` but were fine with `div()` so I put that together and over time it grew on me. I also kinda like being able to see what elements are used based on the import at the top of the file, but that's secondary. Skruv still exposes a `h` function that is used for web-components, like `h('my-component')` and you can use it for all HTML elements or for JSX. The rest are just for readability and convinience (and are really just curried versions of `h`). As for SVG I mostly do that by tracking if a parent was a SVG element and if so I assume all children are SVG namespaced (again, inspiration taken from hyperapp) until I hit a foreginObject element which means to switch out of the SVG namespace. If you have better ideas or feedback on that I'd be happy to listen. Thank you for taking a look and I'd love to hear any other thoughts you have!
- lhorie 6y ago
  I believe jorgebucaran (hyperapp author) was aware of mithril.js' existence and may possibly have been inspired by it, but I don't take credit for hyperscript itself (it was already a concept used by various other systems - the word "hyperscript" itself comes from the name of a project[0], and there were already other similar frameworks like mercury[1] at the time). For mithril.js specifically, the hyperscript variation offers an extra feature that AFAIK not many other libs do: the ability to write emmett-like CSS expressions as the tag name (e.g. `m('input.required[type=password]')`). Totally understandable if you think that's too much sugar for your lib, but I've found it handy for usage with CSS frameworks like bootstrap. Mithril.js users also appreciate it and some interesting unexpected patterns came out of that (e.g. `const Foo = '.some.tailwind.thing'; <Foo />`) BTW, funny story: mithril.js partially took inspiration from an ancient library called dōmo[2] which - as it turns out - uses the tags-as-functions pattern. [0] https://github.com/hyperhype/hyperscript https://github.com/hyperhype/hyperscript [1] https://github.com/Raynos/mercury https://github.com/Raynos/mercury [2] https://jed.github.io/domo/ https://jed.github.io/domo/

by lhorie 6y ago

SahAssar 6y ago

Skruv's html lib evolved from how I used hyperapp v0 and v1 a couple of years ago. It seems from what I can tell that hyperscript, hyperapps `h` function and skruv's `h` function follow similar ideas and signatures and I got my inspiration from hyperapp which I guess got at least some inspiration from mithril. One thing I like about exporting multiple tag names is that it (to me at least) makes it more readable. When I switched over my last team from JSX to JS (that was in hyperapp v1) they did not like writing `h('div')` but were fine with `div()` so I put that together and over time it grew on me. I also kinda like being able to see what elements are used based on the import at the top of the file, but that's secondary. Skruv still exposes a `h` function that is used for web-components, like `h('my-component')` and you can use it for all HTML elements or for JSX. The rest are just for readability and convinience (and are really just curried versions of `h`). As for SVG I mostly do that by tracking if a parent was a SVG element and if so I assume all children are SVG namespaced (again, inspiration taken from hyperapp) until I hit a foreginObject element which means to switch out of the SVG namespace. If you have better ideas or feedback on that I'd be happy to listen. Thank you for taking a look and I'd love to hear any other thoughts you have!

lhorie 6y ago
I believe jorgebucaran (hyperapp author) was aware of mithril.js' existence and may possibly have been inspired by it, but I don't take credit for hyperscript itself (it was already a concept used by various other systems - the word "hyperscript" itself comes from the name of a project[0], and there were already other similar frameworks like mercury[1] at the time). For mithril.js specifically, the hyperscript variation offers an extra feature that AFAIK not many other libs do: the ability to write emmett-like CSS expressions as the tag name (e.g. `m('input.required[type=password]')`). Totally understandable if you think that's too much sugar for your lib, but I've found it handy for usage with CSS frameworks like bootstrap. Mithril.js users also appreciate it and some interesting unexpected patterns came out of that (e.g. `const Foo = '.some.tailwind.thing'; <Foo />`) BTW, funny story: mithril.js partially took inspiration from an ancient library called dōmo[2] which - as it turns out - uses the tags-as-functions pattern. [0] https://github.com/hyperhype/hyperscript https://github.com/hyperhype/hyperscript [1] https://github.com/Raynos/mercury https://github.com/Raynos/mercury [2] https://jed.github.io/domo/ https://jed.github.io/domo/