Compile away hooks
- Dominant language
- TypeScript
- Stars
- 14.4k
- Forks
- 671
- PR merge metrics
- No merged PRs in 30d
Description
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](https://tanstack.com/)
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
Contributor guide
Research direction
No files, tests, or entry points are named. Start by locating the existing `.lite.tsx` and `.context.tsx` conventions and the compiler paths that handle them. The issue does not define supported hook semantics, framework outputs, or a completion test, so those need to be established before implementation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, react, typescript
- Domain
- compilers, developer-experience
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100