import { createContext } from "@atomico/store";

const MyStore = createContext({ counter: 0 });

customElements.define("my-store", MyStore);

import { c } from "atomico";
import { MyStore } from "./my-store";

export const MyApp = c(() => {
  return (
    <host>
      <MyStore state={{ counter: 0 }}>
        <slot />
      </MyStore>
    </host>
  );
});

import { c } from "atomico";
import { useStore } from "@atomico/store";
import { MyStore } from "./my-store";

export const MyApp = c(() => {
  const store = useStore(MyStore);
  return (
    <host>
      <button onclick={() => store.counter++}>
        Increment: {store.counter}
      </button>
    </host>
  );
});

interface State {
  api: string;
  loading: boolean;
  products: { id: number; title: string; price: number };
}

const initialState = (state: State) => ({
  api: "",
  loading: false,
  products: [],
});

async function* getProducts(state: State) {
  yield { ...state, loading: true };
  return {
    ...(yield),
    loading: false,
    products: await (await fetch(state.api)).json(),
  };
}

const store = new Store(initialState, {
  actions: { getProducts },
});

async function* getProducts(state: State) {
  yield { ...state, loading: true };
  return {
    ...(yield),
    loading: false,
    products: await (await fetch(state.api)).json(),
  };
}

await store.actions.orderyBy();
await store.actions.insert({ id: 1000 });
await store.actions.updateAll();