Created
June 30, 2017 09:57
-
-
Save zaceno/83286dfd2a18ebbd3b4f1d7cb5810a0c to your computer and use it in GitHub Desktop.
Proposal for "component" concept in Hyperapp
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
A "component": (state, actions, components, props, children) -> vnode | |
Where: | |
- state: the state of the app a component belongs to | |
- actions: the actions-collection of the app the component belongs to | |
- components: the components-collection of the app the component belongs to (will contain the component itself) | |
- props: {...} | |
- children: [vnodes] | |
Instantiate app with: | |
app({ | |
state: ..., | |
actions: {...}, | |
events: {...}, | |
mixins: [...] | |
components: {...}, | |
view: (state, actions, components) -> vnode | |
}) | |
Where the "components" in the view signature is the component collection of the app. | |
The component collection is defined in the "components" property of the app-options, and is an object containing named component-functions (defined above). | |
A mixin can also contain the "components" property, and components defined there should be merged with the app's main component-collection, the same way actions and events are merged. | |
Example here: https://codepen.io/zaceno/pen/gRvWPx | |
Comments: | |
This proposal is essentially syntactic sugar so you don't have to pass {state, actions} along to every reusable view | |
function down the tree that might need it. That's nice, but it's not a huge deal. I'm mostly submitting this proposal as | |
a counterpoint to the other proposals, that want to do more magical things with state & actions. I feel that is best left | |
as a separate, optional utility/feature. | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment