# shipt/osmosis architecture

> Architecture diagram of the GitHub repository shipt/osmosis, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/shipt/osmosis
- Repository: https://github.com/shipt/osmosis

## Overview

Osmosis is a lightweight React state-management library. An application supplies a custom hook to setupStore, then wraps components with the generated provider and reads the store through its context hook; StoreProvider can compose multiple providers. Separately, usePersistedState loads and saves values through configured storage methods, with optional transformers. The graph reflects the sampled runtime source; storage implementations and consumer applications are supplied externally.

Main entry points: [`osmosis/src/setupStore.js`](https://github.com/shipt/osmosis/blob/development/osmosis/src/setupStore.js) (Store setup), [`osmosis/src/storeProvider.js`](https://github.com/shipt/osmosis/blob/development/osmosis/src/storeProvider.js) (Provider composer), [`osmosis/src/usePersistedState.js`](https://github.com/shipt/osmosis/blob/development/osmosis/src/usePersistedState.js) (Persisted state hook), [`osmosis/src/index.js`](https://github.com/shipt/osmosis/blob/development/osmosis/src/index.js) (Library exports)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_app(("React application"))
node_api["Library exports<br/>[index.js]"]
node_setup["Store setup<br/>[setupStore.js]"]
node_custom_hook["Custom store hook"]
node_store_provider["Provider composer<br/>[storeProvider.js]"]
node_component["Wrapped components"]
node_store_context["Store context<br/>[setupStore.js]"]
node_persisted_state["Persisted state hook"]
node_storage[("Storage adapter")]
node_transformers["Value transformers"]

node_app -->|"imports"| node_api
node_app -->|"configures"| node_setup
node_setup -->|"invokes"| node_custom_hook
node_app -->|"composes"| node_store_provider
node_store_provider -->|"wraps"| node_component
node_store_provider -->|"dispatches providers"| node_setup
node_component -->|"reads context"| node_store_context
node_setup -->|"provides store"| node_store_context
node_app -->|"configures storage"| node_persisted_state
node_persisted_state -->|"loads and saves"| node_storage
node_persisted_state -.->|"transforms values"| node_transformers

click node_api "https://github.com/shipt/osmosis/blob/development/osmosis/src/index.js"
click node_setup "https://github.com/shipt/osmosis/blob/development/osmosis/src/setupStore.js"
click node_store_provider "https://github.com/shipt/osmosis/blob/development/osmosis/src/storeProvider.js"
click node_store_context "https://github.com/shipt/osmosis/blob/development/osmosis/src/setupStore.js"
click node_persisted_state "https://github.com/shipt/osmosis/blob/development/osmosis/src/usePersistedState.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_custom_hook,node_store_provider,node_component,node_transformers toneIndigo
class node_api,node_setup,node_store_context,node_persisted_state toneTeal
class node_storage toneAmber
```

## Components

### Other components

- **React application**
- [Library exports](https://github.com/shipt/osmosis/blob/development/osmosis/src/index.js): `osmosis/src/index.js`
- [Store setup](https://github.com/shipt/osmosis/blob/development/osmosis/src/setupStore.js): `osmosis/src/setupStore.js`
- **Custom store hook**
- [Provider composer](https://github.com/shipt/osmosis/blob/development/osmosis/src/storeProvider.js): `osmosis/src/storeProvider.js`
- **Wrapped components**
- [Store context](https://github.com/shipt/osmosis/blob/development/osmosis/src/setupStore.js): `osmosis/src/setupStore.js`
- [Persisted state hook](https://github.com/shipt/osmosis/blob/development/osmosis/src/usePersistedState.js): `osmosis/src/usePersistedState.js`
- **Storage adapter**
- **Value transformers**

## Connections

- React application → Library exports: imports
- React application → Store setup: configures
- Store setup → Custom store hook: invokes
- React application → Provider composer: composes
- Provider composer → Wrapped components: wraps
- Provider composer → Store setup: dispatches providers
- Wrapped components → Store context: reads context
- Store setup → Store context: provides store
- React application → Persisted state hook: configures storage
- Persisted state hook → Storage adapter: loads and saves
- Persisted state hook → Value transformers: transforms values