diff --git a/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/PreactCounter.tsx b/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/PreactCounter.tsx
index e85acf3883..dc5ed0ad72 100644
--- a/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/PreactCounter.tsx
+++ b/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/PreactCounter.tsx
@@ -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>
 		</>
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/ReactCounter.jsx b/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/ReactCounter.jsx
index 41f0772e9d..4ac59c2a4c 100644
--- a/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/ReactCounter.jsx
+++ b/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/ReactCounter.jsx
@@ -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>
 		</>
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/SolidCounter.tsx b/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/SolidCounter.tsx
index 9174d96f7b..a62f3fcf2e 100644
--- a/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/SolidCounter.tsx
+++ b/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/SolidCounter.tsx
@@ -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>
 		</>
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/SvelteCounter.svelte b/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/SvelteCounter.svelte
index 7d21a72033..f6ca7ee612 100644
--- a/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/SvelteCounter.svelte
+++ b/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/SvelteCounter.svelte
@@ -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 />
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/VueCounter.vue b/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/VueCounter.vue
index 7f58f896df..128f1c8d06 100644
--- a/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/VueCounter.vue
+++ b/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/components/VueCounter.vue
@@ -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),
 		};
 	},
 };
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/pages/index.astro b/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/pages/index.astro
index e2df3bcf19..e20dd43776 100644
--- a/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/pages/index.astro
@@ -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" />
-		<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
-			});
+			};
 			
-			setContext('counter', counter);
+			setContext('counter', store(state));
 		</script>
 	</head>
 	<body>
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/stores/counter.ts b/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/stores/counter.ts
index 0a9d44b102..233ace56c4 100644
--- a/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/stores/counter.ts
+++ b/packages/astro/e2e/fixtures/multiple-frameworks-stores/src/stores/counter.ts
@@ -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 }));