BuilderIO / BuilderIO/mitosis

Compile away hooks

Open
#548 7 comments 16 reactions 0 assignees View on GitHub
core enhancement
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.