Deno + Statery example

. ̸island ̸StoreUsingComponent1.tsx

/** @jsx h */
import { h } from "preact";
import { incrementCount, state } from "../stores/whatever_store.ts";

export default function StoreUsingComponent1() {
  const { counter } = state();

  return (
    <p>
      <button onClick={incrementCount}>
        Increment number (clicked {counter} times)
      </button>
    </p>
  );
}

. ̸islands ̸StoreUsingComponent2.tsx

/** @jsx h */
import { h } from "preact";
import { state } from "../stores/whatever_store.ts";

export default function StoreUsingComponent1() {
  const { counter } = state();

  return <p>Current counter value: {counter}</p>;
}

. ̸routes ̸demo.tsx

/** @jsx h */
import { h } from "preact";
import StoreUsingComponent1 from "../islands/StoreUsingComponent1.tsx";
import StoreUsingComponent2 from "../islands/StoreUsingComponent2.tsx";

export default function Demo() {
  return (
    <div>
      <StoreUsingComponent1 />
      <StoreUsingComponent2 />
    </div>
  );
}

. ̸stores ̸whatever_store.ts

// ./stores/whatever_store.ts

import {
  makeStore,
  useStore,
} from "https://esm.sh/[email protected]?alias=react:preact/compat&[email protected]";

/* Make a store */
const store = makeStore({ counter: 0 });

/* Write some code that updates it */
export const incrementCount = () =>
  store.set((state) => ({
    counter: state.counter + 1,
  }));

/**
 * A wee bit of abstraction so my components don't need to import `useState`
 * from Statery
 */
export const state = () => useStore(store);