https://github.com/dvtng/cosmos
https://github.com/dvtng/cosmos
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/dvtng/cosmos
- Owner: dvtng
- Created: 2024-06-19T23:22:01.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-09T18:06:40.000Z (over 1 year ago)
- Last Synced: 2025-04-10T23:03:49.106Z (about 1 year ago)
- Language: TypeScript
- Size: 165 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
Awesome Lists containing this project
README
# cosmos
Proof of concept for a flexible data-fetching framework for React.
## Core concepts
Data sources are described using models:
```ts
const Weather = model({
type: "Weather",
refresh: { minutes: 5 },
get({ latitude, longitude }) {
return fetch(`https://weather.example.com/${latitude}/${latitude}`).then(
(resp) => resp.json()
);
},
});
```
Models can then be queried inside components:
```tsx
function WeatherIcon({ latitude, longitude }) {
const [weather] = useModel(Weather({ latitude, longitude }));
return 
;
}
```
We can use suspense if preferred using `waitFor`:
```tsx
function WeatherIcon({ latitude, longitude }) {
const [weather] = waitFor(useModel(Weather({ latitude, longitude })));
return 
;
}
```
Models can also represent data sources that continuously emit data, such as
websockets or event listeners:
```ts
const MyLocation = model({
type: "MyLocation",
emitter(emit) {
const id = navigator.geolocation.watchPosition((position) => {
emit(position.coords);
});
// Stop watching when this model is no longer used
return () => {
clearWatch(id);
};
},
});
```
If we frequently need to get the weather at the current location, we can combine
these two models into one:
```ts
const MyWeather = model({
type: "MyWeather",
derive(getModel) {
const [coords] = waitFor(getModel(MyLocation()));
return getModel(Weather(coords));
},
});
function MyWeatherIcon() {
const [myWeather] = waitFor(useModel(MyWeather()));
return 
;
}
```
Cosmos automatically tracks the dependencies of MyWeather so that it updates
whenever either MyLocation or Weather updates.
It also tracks usages of each model so that they are initialized once when used
by a component, and then cleaned up when no longer needed.