Compile away hooks

Purely an idea, but something been thinking about a lot. One of the biggest missing DX features of Mitosis is custom hooks

Interestingly, some ppl have been exploring making hooks libraries across frameworks

If you think of someone building an app in Mitosis vs a framework like Qwik directly, you miss out on one of the main composability benefits, custom hooks. Such as a react-query like hook (called Resource in Qwik and Solids) etc. I can’t see people loving building with Qwik without this key feature nearly all modern frameworks have (react, vue, svelte, qwik, solid) that Mitosis doesn’t

I realized I think we can implement this for all hooks-oriented frameworks. We may even be able to implement it for frameworks without first class hooks support.

We could do it, for instance, with another convention just like we have .lite.tsx for components, and .context.tsx for context, we could make a .hook.tsx

// ./use-fetch.hook.tsx
import { useState, onMount } from '@builder.io/mitosis'

export default function useFetch(url: string) {
  const [value, setValue] = useState(null)
  const [error, setError] = useState(null)
  const [loading, setLoading] = useState(false)

  onMount(async () => {
     setLoading(true);
     try {
       const data = await fetch(url).then(res => res.json())
     }  catch (error) {
        setError(error)
     } finally { 
       setLoading(false)
     }
     setValue(data)
  })

  return { value, loading, error };
}

which would compile to other frameworks just like you see in mitosis components name

I think translating hooks like this is pretty straightforward to everywhere that supports hooks. the big question is what about frameworks, like Angular, that don’t. I have some crazy ideas for that but need to think on a little more

[leopiccionia]

Composition API is also Vue3 only I believe, so that’s another thing to keep in mind.

FYI Vue 2.x supports the Composition API natively since 2.7 (released weeks ago). For earlier releases, you need the @vue/composition-api plugin.

Vue 2.7 Composition API works like Vue 3 Composition API, except when otherwise noted.

[digoburigo]

Imagine VueUse working in all frameworks. That would be really nice.