Comments (6)
IMHO this should only be an extension or plugin (same with htm
). Hopefully the core can be kept minimal and pristine.
from crank.
Some addtional 2 cents of mine if you do not mind:
A couple of years ago I've really been a big fan of hyperscript as I was of the puristic opinion that JavaScript code should be written in pure JavaScript and JSX is obviously not JavaScript.
My opinion has changed completely since then: I do not believe any longer that using hyperscript in JavaScript is a good idea, as JSX is so much easier to use and tooling for JSX is quite sophisticated nowadays.
- If you use TypeScript => JSX is clearly the best choice then. Hyperscript has really no advantages here but only a lot of disadvantages
- If you use JavaScript in a project where you are using build tools => JSX is soooo much more fun to work with, for example syntax errors will be shown immediately, while invalid hyperscript expressions will only be detected at runtime. And everything is so much easier to read with JSX.
- If you use JavaScript in an environment where you DO NOT use build tools => Maybe here hyperscript will be a choice to consider, but when will it nowadays ever happen that your project has no build process?!?
Anyway, for all of you who still think that hyperscript is a great thing to use:
Find here a demo of a hyperscript function for Crank.js that has all the advanced features I was talking about in my comment above (it's a modified version of something I've implemented a couple of years ago). Be aware that this is highly experimental and really ugly and verbose code. For my defense, one reason for the code being so ugly is that the highest priority was performance and unfortunately syntactically nice features like destructing arrays with rest parameter do not perform very well (at least in 2017). So please do not blame me for that code ๐
You will really have to implement your hyperscript function from scratch (or use some other code base - the implementation will be a lot easier if you only implement the standard hyperscript features), but maybe at least this hyperscript implementation could help you someday on comparing performance (btw: This implementation is optimized for Firefox and Chrome and Chromium based Edge ... will not perform that well on IE or older Edge versions).
https://codesandbox.io/s/blissful-heyrovsky-h51y2?file=/src/index.js
[EDIT]: Here's a little parser for standard hyperscript expressions (supporting tagName, id and classes): https://jsbin.com/qerovuvelu/1/edit?js,output
[EDIT]: Maybe I prefer this implementation to the previous one: https://jsbin.com/fivulazuvo/1/edit?js,console
from crank.
For anyone wanting to take h() up, here are some test cases and the simplest initial code to get you started, public domain ๐ Handles only the class names and optional second argument, letting you skip the boring stuff and jump right away to the cool cases @mcjazzyfunky mentioned.
https://gist.github.com/nykula/0575494162a547100b5432938330ebe8
@brainkim Sure, aliasing the import on my side is what I do now, but having to type less in every project is quite a win (: There's just no benefit in a long name for the one function which is called hundreds times more often than any other export, unless cloning React API is on the roadmap. Same goes for renderer.render
vs a render
shortcut, though much less important.
from crank.
Just having createElement aliased to h, like Preact has, would be a big convenience improvement already.
from crank.
@mcjazzyfunky These seem like interesting design ideas but I think itโs more important to follow a spec if there is one.
@nykula If thatโs all hyperscript is then you can do this today ๐:
import { createElement as h } from "@bikeshaving/crank";
from crank.
Just my 2 cents:
-
If you need a pure ECMAScript solution then maybe first decide whether you really prefer hyperscipt over a template literal based solution:
return h('div.box', `Hello, my name is ${firstName} ${lastName}`)
vs.
return html` <div class="box"> Hello, my name ist ${firstName} ${lastName} </div> `
-
Consider to make the second (=>
props
) argument of your hyperscript function optional even in the case that there are additional (=> children) arguments.return h('p.some-class', 'Whatever')
-
Consider to allow some more advanced hyperscript syntax
h('.box > ul.link-list[data-flag][data-key=value]', h('li.primary > a.link', { href: 'https://www.facebook.com' }, 'Facebook'), h('li.secondary > a.link', { href: 'https://www.google.com' }, 'Google'))
-
Consider using an in-memory cache (=> JavaScript object) for the results of the RegExp parsing of the expressions provided by the first argument of your hyperscript function.
Will be much faster then ... though some guys may just call it "premature optimization" ;-) -
Heed @moos's wise counsel and don't add that hyperscript function to the core. Use an extra package for that.
from crank.
Related Issues (20)
- Precise DOM mutations HOT 1
- Allow async generator components to use `for... of` HOT 2
- `null` vs `undefined` as a way to indicate deleting props/attributes from host elements HOT 2
- Async unmounting/updating
- Better error messages for tagged template function Syntax Errors.
- Call `cleanup()` functions even if component is unmounted HOT 1
- Full-stack (meta?) framework / CLI HOT 2
- Adopt Reactโs element identity behavior
- Errors being swallowed in the second async component of a race. HOT 1
- Export `renderer` and `Renderer` based on environment from `@b9g/crank/standalone`
- The type="text" attribute on input elements is being removed HOT 6
- Use `key`, `ref` and `static` props instead of the variants HOT 5
- Attempting to set up with Vite HOT 7
- HTML in SVG (via foreignObject & `jsx` function) doesn't render HOT 5
- Can't express HTML entities in jsx template strings, e.g. or ​ HOT 9
- When does a render get mounted? HOT 4
- Adding a $key prevents component lifecycle `finally` clause HOT 4
- Keyed elements disappear HOT 4
- Make `ref` callbacks fire once per element, and only for host elements
- Landing page `Definition` component breaks if searched word is not found
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from crank.