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 { getContext } from '@astrojs/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 */
export function PreactCounter({ children, id }) {
const counter = getContext('counter');
const counter = getContext<Writable<CounterState>>('counter');
const state = useStore(counter);
const onDecrement = () => decrement(counter);
const onIncrement = () => increment(counter);
return (
<>
<div id={id} class="counter">
<button class="decrement" onClick={counter.decrement}>-</button>
<button class="decrement" onClick={onDecrement}>-</button>
<pre>{state.count}</pre>
<button class="increment" onClick={counter.increment}>+</button>
<button class="increment" onClick={onIncrement}>+</button>
</div>
<div class="counter-message">{children}</div>
</>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,26 +1,8 @@
import { Readable, writable, store } from '@astrojs/store';
import { Writable } from '@astrojs/store';
export interface CounterState {
count: number;
}
export interface CounterStore extends Readable<CounterState> {
increment(): void;
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 })
}
}
export const decrement = (store: Writable<CounterState>) => store.update(({ count }) => ({ count: count - 1 }));
export const increment = (store: Writable<CounterState>) => store.update(({ count }) => ({ count: count + 1 }));