Composition api

[porfirioribeiro]

This pull request is a implementation of the Vue Composition API in Preact.

This started as a proof of concept of implementing the API in Preact, but ended up being a full implementation. It adds bytes to Preact itself and can be used standalone just like hooks, so both Composition and Hooks can be used also together.

There are some differences from the Vue Api as Preact works differently internally.
I wriote a blog post to show the differences between Vue composition Api and React Hooks

There are still missing tests, docs, better typings, more examples and probably benchmark it to see the differences between this, hooks and classes.

If someone else find this concept interesting, i can work more on it and bring those missing parts.

Examples:

• 7guis
• async
• provider
• samples

[coveralls]

Coverage remained the same at 100.0% when pulling 717dcae on porfirioribeiro:composition-api into e38d066 on preactjs:master.

[marvinhagemeister]

Wow, that's really cool! It's good to know that the Preact code base remains approachable even with the new addon structure :)

This is an area where I've done a lot of prototypes and experiments myself. Back when the react team announced hooks (and even earlier) we've been toying with a similar idea in spirit like the one vue is pursuing. The gist of it was to have constructor functions for components, like you have in this PR, and to follow a more observable like approach.

I'd love for this to become a solid alternative to hooks. I wouldn't focus too much on remaining 1:1 API compatible with vue and would rather tackle it from the perspective of what's best for Preact 👍

Regarding computed: I've written several variations of that with different implementation ideas and it turns out that it's fairly easy to add automatic dependency tracking. The same can be reused for watch(). The tricky bit is making sure that no glitches happen in the system (if that's a desireable requirement).

Anyhow, gotta run. I really love where this is going and I'm very interested in this. Feel free to hit me up on slack.

[porfirioribeiro]

Thanks @marvinhagemeister
I think the API could be fine tuned to be a solid alternative to hooks.

Would be nice to collaborate in the API design and add the missing pieces to make the API production ready.
I'm on Preact slack too, maybe we can chat there about this

[developit]

This is ridiculously cool and I'm still digesting the syntax. It looks like observables!

[porfirioribeiro]

Wow, thanks for your feedback. I guess better docs and samples would help...
In fact i don't know much about observables 😰 so probably it looks like it

---

5 minutes demo https://codesandbox.io/s/preact-composition-github-demo-hfdsq

[porfirioribeiro]

This is looking really good already, made a first round of comments

Thanks @JoviDeCroock, i answered or solved your questions 👍

[cztomsik]

random idea: createComponent could be called reactiveComponent

export const Counter = reactiveComponent(() => ...)

I'm sure you were already thinking about that and maybe you have even better name :-)

---

BTW: I should probably calm down a bit but, this is EXACTLY what I was waiting for:

• lightweight, very simple to understand & follow
• types, TSX plays nicely with vscode (unlike with mithril which has similar approach)
• efficient
• clear separation of init & render
• fearless usage of hooks

What I mean by the last point is that your hooks can now be nontrivial, you can do things like:

const createComponent(() => {
  const initialData = { username: '', password: '' }
  const f = someNonExistingLib(initialData)

  return () => (
    <form onSubmit={f.handleSubmit}>
      <input {...f.username} />
      <input type="password" {...f.password} />
      ...
    </form>
  )
})

and it can do some introspection, etc. or whatever what would be normally a problem because of performance (with hooks you'd need to couple it with memos & dependencies everywhere which quickly gets nasty)

I can imagine using styles this way too, again, some nontrivial style generation, observe+watch to update and the current value is simply forwarded to the view.

[porfirioribeiro]

Thanks for the excitement @cztomsik ❗
That's exactly my view and why i created this!
I hope to work a more on it soon!

[fantasticsoul]

This pull request is a implementation of the Vue Composition API in Preact.

This started as a proof of concept of implementing the API in Preact, but ended up being a full implementation. It adds bytes to Preact itself and can be used standalone just like hooks, so both Composition and Hooks can be used also together.

There are some differences from the Vue Api as Preact works differently internally.
I wriote a blog post to show the differences between Vue composition Api and React Hooks

There are still missing tests, docs, better typings, more examples and probably benchmark it to see the differences between this, hooks and classes.

If someone else find this concept interesting, i can work more on it and bring those missing parts.

Examples:

• 7guis
• async
• provider
• samples

I've implement one for react already in Concent, see this demo:
https://codesandbox.io/s/concent-guide-xvcej

here is a article about setup feature:
https://dev.to/fantasticsoul/use-concent-release-react-hook-s-maximum-energy-2ldf

the most interesting thing about Concent's setup is that it can be reused in function component and class component both.

Welcome to understand and give me feedback

[porfirioribeiro]

This was a great experiment! Allowed me to understand much about how Preact works internally.
Also gave me the chance to know and interact with very nice people, from which I'm always learning a lot!!

It was too ambitious for me 😄 but I hope at least some ideas here were good. And I'm really happy to see reactivity coming in the form of preact/signals

Closed in favor of https://github.com/preactjs/signals