kriasoft / kriasoft/hyperapp-render
renderToNode (or renderToElement)
- Dominant language
- JavaScript
- Stars
- 100
- Forks
- 13
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
**I'm submitting a ...**
* [ ] bug report
* [x] feature request
* [ ] other (Please do not submit support requests here (below))
Within hyperapp sometimes I need to make some preparations, to ensure everything is going fine with DOM/events/data. For example:
1. generate `` element, append some sources, and check which one browser wants to load;
2. create `` element and check if image is accessible and what size they have;
3. insert `svg` fragment into already loaded though `` tag `svg` dom.
It is really useful to have function, which renders `h('video', ...)` into new Element, which can be inserted into existing DOM or just loaded (like images or videos), because as of now my preparations looks like
```javascript
const el = document.createElement('video');
el.addEventListener('loadeddata', this.onVideoLoad.bind(this), false);
el.addEventListener('abort', this.onVideoAbort.bind(this), false);
el.addEventListener('waiting', this.onVideoWaiting.bind(this), false);
el.addEventListener('loadedmetadata', this.onVideoMeta.bind (this), false);
el.setAttribute('preload', 'metadata');
el.setAttribute('muted', 'true');
el.setAttribute('playsinline', 'true');
this.config.sources.forEach(source => {
var srcEl = document.createElement('source');
srcEl.src = patchLocalVideo(source.url);
srcEl.type = source.type;
el.appendChild(srcEl);
});
```
I can implement it myself and make a pull request if you're interested in this.
Contributor guide
Research direction
No file, test, or entry point is named. Start by reviewing the repository's existing rendering API and SSR/Node.js behavior, then determine how a DOM-rendering entry point should fit. Done means a caller can render h(...) into a new DOM element for the preparation and loading cases described.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, node.js
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100