-
-
Save o0101/0a18a10c0dc1d98162d092fe759910f3 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Z = self.Z = { | |
keyed: {} | |
} | |
function def({ | |
name: name = 'Widget', | |
render: render = () => `<h1>Hello World</h1>`, | |
innerStyle: innerStyle = () => `h1 { font-family: monospace; color: dodgerblue; }`, | |
outerStyle: outerStyle = () => ({height:'10rem', width:'100%', display:'block'}), | |
keyed: keyed = false | |
} = {}) { | |
Object.assign(component, {[Symbol.toStringTag]: name}); | |
if ( keyed ) { | |
Z.keyed[name] = component; | |
component.els = {}; | |
} else { | |
Z[name] = component; | |
component.el = null; | |
} | |
return component; | |
function component(state, key) { | |
// render and replace in place | |
let markup; | |
if ( keyed ) { | |
if ( ! component.els[key] ) { | |
component.els[key] = document.createElement('iframe'); | |
component.els[key].frameBorder = 0; | |
} | |
markup = `<style>${innerStyle(state, key)}</style>` + render(state, key); | |
component.els[key].srcdoc = markup; | |
Object.assign(component.els[key].style, outerStyle(state)); | |
} else { | |
if ( ! component.el ) { | |
component.el = document.createElement('iframe'); | |
component.el.frameBorder = 0; | |
} | |
markup = `<style>${innerStyle(state)}</style>` + render(state); | |
component.el.srcdoc = markup; | |
Object.assign(component.el.style, outerStyle(state)); | |
} | |
if ( keyed ) { | |
if ( ! Z[key] ) { | |
Z[key] = {}; | |
} | |
// then we can call Z[key][name](state) to render in place. | |
Z[key][name] = (state) => component(state, key); | |
} | |
return { | |
toString() { | |
if ( keyed ) { | |
return component.els[key].outerHTML; | |
} else { | |
return component.el.outerHTML; | |
} | |
}, | |
valueOf() { | |
return this.toString(); | |
}, | |
to(location = 'beforeEnd', elemOrSelector = 'body') { | |
let elem = elemOrSelector; | |
if ( typeof elemOrSelector == "string" ) { | |
elem = document.querySelector(elemOrSelector); | |
} | |
elem.insertAdjacentElement(location, keyed ? component.els[key] : component.el); | |
} | |
}; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
In terms of messages emitted by components. There will be:
act({type:'add',data:{value:5}})
, as well asnotify({event:'filterUpdated', data:{newFilter:{...}}})
Basically, it's concievable there are views that exist as: