https://github.com/amoreaulemay/fresh-store
Simple store for Deno Fresh, to pass state between islands
https://github.com/amoreaulemay/fresh-store
deno fresh state-management typescript
Last synced: 11 months ago
JSON representation
Simple store for Deno Fresh, to pass state between islands
- Host: GitHub
- URL: https://github.com/amoreaulemay/fresh-store
- Owner: amoreaulemay
- License: mit
- Created: 2022-08-02T17:12:25.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-08-25T00:39:18.000Z (almost 4 years ago)
- Last Synced: 2025-07-14T19:01:56.884Z (11 months ago)
- Topics: deno, fresh, state-management, typescript
- Language: TypeScript
- Homepage: https://deno.land/x/fresh_store@v1.0.1/mod.ts
- Size: 50.8 KB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Fresh Store
 [](https://codecov.io/gh/amoreaulemay/fresh-store) 
A minimal store for Fresh, to allow communication between islands. It attach stores to the `window` component. It uses "pointers" or "keys" to associate stores. A pointer can either be provided, or auto-generated.
## Usage
Creating a store.
```typescript
const ptr = useStore("Initial Value", { onChange: (state) => console.log(state) });
console.log(Stores.get(ptr)?.state);
Stores.get(ptr)?.set("Modified Value");
```
```
Output:
Initial Value
Modified Value
```
Creating a store and providing a pointer.
```typescript
const pointer = Store.newPointer();
useStore(
"Initial Value",
{
pointer: pointer,
onChange: (newState) => console.log(`New value: ${newState}`)
},
);
console.log(Stores.get(ptr)?.state);
Stores.get(ptr)?.set("Modified Value");
```
```
Output:
Initial Value
New value: Modified Value
```
## Creating a new Observer
```typescript
const storePtr = useStore("New Store");
class ConcreteObserver implements Observer {
public update(subject: Store): void {
console.log("The store was updated, new state: ", subject.state);
}
}
Stores.get(storePtr)?.attach(new ConcreteObserver());
```
## Example usage in components
```tsx
// ./islands/componentA.tsx
/** @jsx h */
import { h } from "preact";
import { Stores, useStore, type Pointer } from "@store";
interface CompAProps {
storePtr: Pointer;
}
export default function ComponentA(props: CompAProps) {
useStore(0, { pointer: props.storePtr });
const increment = () =>
Stores
.get(props.storePtr)
?.set((state) => state + 1);
const decrement = () =>
Stores
.get(props.storePtr)
?.set((state) => state - 1);
return (
-1
+1
);
}
```
```tsx
// ./islands/componentB.tsx
/** @jsx h */
import { h } from "preact";
import { useState } from "preact/hooks";
import { useStore, type Pointer } from "@store";
interface CompBProps {
storePtr: Pointer;
}
export default function ComponentB(props: CompBProps) {
const [counter, setCounter] = useState(0);
useStore(counter, {
pointer: props.storePtr,
onChange: (newState) => setCounter(newState),
});
return
Counter: {counter}
;
}
```
```tsx
// ./routes/index.tsx
/** @jsx h */
import { h } from "preact";
import { Store } from "@store";
import ComponentA from "@islands/componentA.tsx";
import ComponentB from "@islands/componentB.tsx";
export default function Index() {
const storePtr = Store.newPointer();
return (
);
}
```