Support nodes whose tag is a function.

[jorgebucaran]

HyperApp's architecture is largely based in Flux/Redux and/or the Elm Architecture. There's a single state shared by all the views. Another way to put that, views can't have a local state.

But what about components? The answer is stateless components.

<MyComponent props=...></MyComponent>

Related

• What are the disadvantages of storing all your state in a single immutable atom? reduxjs/redux#1385
• multiple app()s / component approach / return dom #2
• Example with child (custom JSX) components? 🍼 #8

[codecov]

Codecov Report

Merging #77 into master will decrease coverage by -0.32%.

@@            Coverage Diff             @@
##           master      #77      +/-   ##
==========================================
- Coverage   72.72%   72.41%   -0.32%     
==========================================
  Files           3        3              
  Lines         143      145       +2     
==========================================
+ Hits          104      105       +1     
- Misses         39       40       +1

Impacted Files	Coverage Δ
src/h.js	94.11% <66.66%> (-5.89%)	❌

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f29647b...7bc45ec. Read the comment docs.

[danigb]

That's a really nice addition 👏👏

[tunnckoCore]

Cool!

But i believe it would be better to pass data directly and append the children, it is how is done in React and etc? I played with this and mich-h stuff and kinda don't liked to add children "special property" to the props.

	if (typeof tag === "function") {
		tree = tree || []
		data.children = tree
		return tag(data, tree)
	}

So

const Foo = (props) =>
  <div id={props.id} className={props.cls}>{props.children}</div>

const Foo2 = (props, children) =>
  <div id={props.id} className={props.cls}>{children}</div>

const foo = <Foo cls="baz qux" id="hi">
  <strong>hello</strong>
</Foo>

Because what you proposed is a bit nested/more typing, i believe it would be something like

const Foo2 = (ctx) =>
  <div id={ctx.props.id} className={ctx.props.cls}>{ctx.children}</div>

[tunnckoCore]

Hm... No, no, nevermind. Kinda like more your approach when rethink it. It is more clean and explicit.

const Foo2 = ({ props, children }) =>
  <div id={props.id} className={props.cls}>{children}</div>

It won't be react compatible directly, but who cares, it is more clean :))

[tunnckoCore]

Don't know, I like them either way. Current, no-react-compatible is more cleaner.