codemeasandwich/hyper-element

Combining the best of hyperHTML and Custom Elements!

hyper-element's Issues

Add support for event callbacks

someting like:

  setup(attachStore){
    const onStoreChange = attachStore() // No get state Fn
    onIncoming(onStoreChange)
  }

const cbs = []

// Called from outside
function messageIn(message){
  cbs.forEach(cbOnChange => cbOnChange(message))
}

function onIncoming(cbOnChange){
  cbs.push(cbOnChange)
}

ReadMe is missing: how in use with NPM version

How to install and use in a helloworld

Child element NOT re-drawing

Child element NOT re-drawing

class APerson extends hyperElement{
  
  onClick(){
    this.attrs.hi("Hello from "+this.attrs.name)
  } // note/helper : fucntion automatically have the element "this" bound
  
  render(Html){
    console.log("Re-draw?")
    Html`${this.attrs.name} <button onclick=${this.onClick}>Say hi! ${ this.attrs.x[0].path }</button>`
  } 
}

class UsersElem extends hyperElement{
  setup(onNext){

    const Interval = setInterval(onNext(()=> new Date()),1000)

    return () => clearInterval(Interval);
  }
  onHi(val){
    alert(val)
  }
  render(Html,time){
    console.log("Draw!")
    const yaml = [{path:"foo",data:{}}]
    Html`<a-person hi=${this.onHi} x=${yaml} name=${time+""}></a-person>`
  }
}
window.customElements.define("a-person", APerson)
window.customElements.define("users-elem", UsersElem)

customelements v2 incompatible

window.customElements.define("my-profile", class extends hyperElement {
    setup(attachStore) {
      autorun(attachStore(s));
    }// END setup

    render(Html, { names, timeString }) {
      Html`Profile: ${timeString}`
    }// END render
  }
)

results in Uncaught TypeError: Class constructor hyperElement cannot be invoked without 'new'. I don't think that the api has changed, but the registerElement is supposed to have been deprecated in march.

bug in passing complexe type - 2

In Example: Advanced attributes

This done NOT works !!

Html`<a-b></a-b><a-person  hi=${this.onHi} x=${{a:2}} name="Beckett"/>`

DOM out put -> <a-b></a-b><a-person hi="function () { [native code] }" name="Beckett" x="[object Object]">

example is erroring

https://codepen.io/codemeasandwich/pen/VOQWeN

Uncaught TypeError: document.registerElement is not a function

renders without dataset/attrs

Will render without dataset causing errors, screwing jquery for life.

bug in passing complexe type

In Example: Advanced attributes

This works

Html`<a-person hi=${this.onHi} name="Beckett"/>`

This works

Html`<a-person hi=${this.onHi} x=${{a:2}} name="Beckett"/>`

This done NOT works !!

Html`<a-person x=${{a:2}} name="Beckett"/>`

DOM out put -> <a-person name="Beckett" x="[object Object]">

more powerful templating?

Could the template system use something like handlebars?

style is not applied to custom child elemnts

Example. Text should be RED

class APerson extends hyperElement{
  
  onClick(){
    this.attrs.hi("Hello from "+this.attrs.name)
  } // note/helper : fucntion automatically have the element "this" bound
  
  render(Html){
    console.log("Re-draw?")
    Html`${this.attrs.name} <button onclick=${this.onClick}>Say hi! ${ this.attrs.x[0].path }</button>`
  } 
}

class UsersElem extends hyperElement{
  setup(onNext){

    const Interval = setInterval(onNext(()=> new Date()),1000)

    return () => clearInterval(Interval);
  }
  onHi(val){
    alert(val)
  }
  render(Html,time){
    console.log("Draw!")
    const yaml = [{path:"foo",data:{}}]
    Html``
    Html`<a-person hi=${this.onHi} x=${yaml} name=${time+""} style=${{color:"red"}}></a-person>`
  }
}
window.customElements.define("a-person", APerson)
window.customElements.define("users-elem", UsersElem)

cant use custom elements v1

In this example you include polyfill for v1, yet it refuses to work in my app, and breaks in the example:
https://jsfiddle.net/fwLbqmsj/

Isn't reusable

https://jsfiddle.net/fwLbqmsj/
Using your own example, i've appended another element and the second instance won't run.