0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00

removing use of custom stores

This commit is contained in:
Tony Sullivan 2022-06-06 10:17:32 -05:00
parent 73825e7244
commit 67830c4b09
7 changed files with 45 additions and 43 deletions

View file

@ -1,18 +1,24 @@
import { h } from 'preact'; import { h } from 'preact';
import { getContext } from '@astrojs/store'; import { getContext } from '@astrojs/store';
import { useStore } from '@astrojs/preact/store'; import { useStore } from '@astrojs/preact/store';
import { decrement, increment } from '../stores/counter';
import type { Writable } from '@astrojs/store';
import type { CounterState } from '../stores/counter';
/** a counter written in Preact */ /** a counter written in Preact */
export function PreactCounter({ children, id }) { export function PreactCounter({ children, id }) {
const counter = getContext('counter'); const counter = getContext<Writable<CounterState>>('counter');
const state = useStore(counter); const state = useStore(counter);
const onDecrement = () => decrement(counter);
const onIncrement = () => increment(counter);
return ( return (
<> <>
<div id={id} class="counter"> <div id={id} class="counter">
<button class="decrement" onClick={counter.decrement}>-</button> <button class="decrement" onClick={onDecrement}>-</button>
<pre>{state.count}</pre> <pre>{state.count}</pre>
<button class="increment" onClick={counter.increment}>+</button> <button class="increment" onClick={onIncrement}>+</button>
</div> </div>
<div class="counter-message">{children}</div> <div class="counter-message">{children}</div>
</> </>

View file

@ -1,18 +1,22 @@
import { React } from 'react'; import { React } from 'react';
import { getContext } from '@astrojs/store'; import { getContext } from '@astrojs/store';
import { useStore } from '@astrojs/react/store'; import { useStore } from '@astrojs/react/store';
import { decrement, increment } from '../stores/counter';
/** a counter written in React */ /** a counter written in React */
export function Counter({ children, id }) { export function Counter({ children, id }) {
const counter = getContext('counter'); const counter = getContext('counter');
const state = useStore(counter); const state = useStore(counter);
const onDecrement = () => decrement(counter);
const onIncrement = () => increment(counter);
return ( return (
<> <>
<div id={id} className="counter"> <div id={id} className="counter">
<button className="decrement" onClick={counter.decrement}>-</button> <button className="decrement" onClick={onDecrement}>-</button>
<pre>{state.count}</pre> <pre>{state.count}</pre>
<button className="increment" onClick={counter.increment}>+</button> <button className="increment" onClick={onIncrement}>+</button>
</div> </div>
<div className="counter-message">{children}</div> <div className="counter-message">{children}</div>
</> </>

View file

@ -1,21 +1,27 @@
import { createSignal } from 'solid-js'; import { createSignal } from 'solid-js';
import { getContext } from '@astrojs/store'; import { getContext } from '@astrojs/store';
import { useStore } from '@astrojs/solid-js/store'; import { useStore } from '@astrojs/solid-js/store';
import { decrement, increment } from '../stores/counter';
import type { Writable } from '@astrojs/store';
import type { CounterState } from '../stores/counter';
/** a counter written with Solid */ /** a counter written with Solid */
export default function SolidCounter({ children, id }) { export default function SolidCounter({ children, id }) {
// TODO: Astro can't resolve the renderer without this? // TODO: Astro can't resolve the renderer without this?
const test = createSignal(0); const test = createSignal(0);
const counter = getContext('counter'); const counter = getContext<Writable<CounterState>>('counter');
const state = useStore(counter); const state = useStore(counter);
const onDecrement = () => decrement(counter);
const onIncrement = () => increment(counter);
return ( return (
<> <>
<div id={id} class="counter"> <div id={id} class="counter">
<button class="decrement" onClick={counter.decrement}>-</button> <button class="decrement" onClick={onDecrement}>-</button>
<pre>{state().count}</pre> <pre>{state().count}</pre>
<button class="increment" onClick={counter.increment}>+</button> <button class="increment" onClick={onIncrement}>+</button>
</div> </div>
<div class="counter-message">{children}</div> <div class="counter-message">{children}</div>
</> </>

View file

@ -2,17 +2,21 @@
<script> <script>
import { useStore } from '@astrojs/svelte/store'; import { useStore } from '@astrojs/svelte/store';
import { getContext } from '@astrojs/store'; import { getContext } from '@astrojs/store';
import { decrement, increment } from '../stores/counter';
export let id; export let id;
const counter = getContext('counter'); const counter = getContext('counter');
const state = useStore(counter); const state = useStore(counter);
const onDecrement = () => decrement(counter);
const onIncrement = () => increment(counter);
</script> </script>
<div {id} class="counter"> <div {id} class="counter">
<button class="decrement" on:click={counter.decrement}>-</button> <button class="decrement" on:click={onDecrement}>-</button>
<pre>{ $state.count }</pre> <pre>{ $state.count }</pre>
<button class="increment" on:click={counter.increment}>+</button> <button class="increment" on:click={onIncrement}>+</button>
</div> </div>
<div class="counter-message"> <div class="counter-message">
<slot /> <slot />

View file

@ -12,6 +12,7 @@
<script> <script>
import { useStore } from '@astrojs/vue/store'; import { useStore } from '@astrojs/vue/store';
import { getContext } from '@astrojs/store'; import { getContext } from '@astrojs/store';
import { decrement, increment } from '../stores/counter';
export default { export default {
props: { props: {
id: { id: {
@ -26,8 +27,8 @@ export default {
return { return {
id: props.id, id: props.id,
state, state,
increment: counter.increment, increment: () => increment(counter),
decrement: counter.decrement, decrement: () => decrement(counter),
}; };
}, },
}; };

View file

@ -8,15 +8,13 @@ import { PreactCounter } from '../components/PreactCounter.tsx';
import SolidCounter from '../components/SolidCounter.tsx'; import SolidCounter from '../components/SolidCounter.tsx';
import VueCounter from '../components/VueCounter.vue'; import VueCounter from '../components/VueCounter.vue';
import SvelteCounter from '../components/SvelteCounter.svelte'; import SvelteCounter from '../components/SvelteCounter.svelte';
import createCounter from '../stores/counter'; import { setContext, store } from '@astrojs/store';
import { setContext } from '@astrojs/store';
const state = { const state = {
count: 0 count: 0
}; };
const counter = createCounter(state); setContext("counter", store(state));
setContext("counter", counter);
// Full Astro Component Syntax: // Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/ // https://docs.astro.build/core-concepts/astro-components/
@ -27,15 +25,16 @@ setContext("counter", counter);
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<script>
import createCounter from '../stores/counter';
import { setContext } from '@astrojs/store';
const counter = createCounter({ <!-- TODO: Astro would inject this script at build time -->
<script>
import { setContext, store } from '@astrojs/store';
const state = {
count: 0 count: 0
}); };
setContext('counter', counter); setContext('counter', store(state));
</script> </script>
</head> </head>
<body> <body>

View file

@ -1,26 +1,8 @@
import { Readable, writable, store } from '@astrojs/store'; import { Writable } from '@astrojs/store';
export interface CounterState { export interface CounterState {
count: number; count: number;
} }
export interface CounterStore extends Readable<CounterState> { export const decrement = (store: Writable<CounterState>) => store.update(({ count }) => ({ count: count - 1 }));
increment(): void; export const increment = (store: Writable<CounterState>) => store.update(({ count }) => ({ count: count + 1 }));
decrement(): void;
reset(): void;
}
export default function createCounter(initial: CounterState = { count: 0 }): CounterStore {
const { subscribe, set, update } = store<CounterState>(initial);
return {
subscribe,
increment: () => update(({ count }) => ({
count: count + 1
})),
decrement: () => update(({ count }) => ({
count: count - 1
})),
reset: () => set({ count: 0 })
}
}