Custom Store Updater

.github/workflows/examples.yml

@@ -17,9 +17,11 @@ jobs:
       fail-fast: false
       matrix:
         example:
+          - ./examples/basic
           - ./examples/vite-react
           - ./examples/parcel-react
           - ./examples/tests-rtl
+          - ./examples/yjs
 
     steps:
       - name: checkout

.gitignore

@@ -9,3 +9,4 @@ docs/public/*
 !docs/public/.gitkeep
 dist/
 src/package.json
+.playwright*

README.md

@@ -21,8 +21,7 @@ Features:
 import { createApi, createSchema, createStore, mdw, timer } from "starfx";
 import { Provider, useCache } from "starfx/react";
 
-const [schema, initialState] = createSchema();
-const store = createStore({ initialState });
+const schema = createSchema();
 
 const api = createApi();
 // mdw = middleware
@@ -36,7 +35,7 @@ const fetchRepo = api.get(
   api.cache()
 );
 
-store.run(api.register);
+const store = createStore({ schema, tasks: [api.register] });
 
 function App() {
   return (

biome.json

@@ -13,8 +13,8 @@
     "rules": {
       "recommended": true,
       "suspicious": {
-        "noExplicitAny": "off",
-        "noImplicitAnyLet": "off",
+        "noExplicitAny": "warn",
+        "noImplicitAnyLet": "warn",
         "noConfusingVoidType": "off"
       },
       "correctness": {

docs/posts/dispatch.md

@@ -16,12 +16,10 @@ The type signature of `dispatch`:
 type Dispatch = (a: Action | Action[]) => any;
 ```
 
-Within `starfx`, the `dispatch` function lives on the store.
-
 ```ts
 const { createSchema, createStore } from "starfx";
-const [schema, initialState] = createSchema();
-const store = createStore({ initialState });
+const schema = createSchema();
+const store = createStore({ schema });
 
 store.dispatch({ type: "action", payload: {} });
 ```

docs/posts/endpoints.md

@@ -3,13 +3,13 @@ title: Endpoints
 description: endpoints are tasks for managing HTTP requests
 ---
 
-An endpoint is just a specialized thunk designed to manage http requests. It has
+An endpoint is a specialized thunk designed to manage http requests. It has
 a supervisor, it has a middleware stack, and it hijacks the unique id for our
 thunks and turns it into a router.
 
 ```ts
 import { createApi, createStore, mdw } from "starfx";
-import { initialState, schema } from "./schema";
+import { schema } from "./schema";
 
 const api = createApi();
 // composition of handy middleware for createApi to function
@@ -32,8 +32,7 @@ export const updateUser = api.post<{ id: string; name: string }>(
   },
 );
 
-const store = createStore(initialState);
-store.run(api.register);
+const store = createStore({ schema, tasks: [api.register] });
 
 store.dispatch(fetchUsers());
 // now accessible with useCache(fetchUsers)
@@ -331,15 +330,15 @@ function deserializeComment(com: any): Comment {
   };
 }
 
-const [schema, initialState] = createSchema({
-  cache: slice.table(),
+const schema = createSchema({
+  cache: slice.cache(),
   loaders: slice.loaders(),
   token: slice.str(),
   articles: slice.table<Article>(),
   people: slice.table<Person>(),
   comments: slice.table<Comment>(),
 });
-type WebState = typeof initialState;
+type WebState = typeof schema.initialState;
 
 const api = createApi();
 api.use(mdw.api({ schema }));

docs/posts/getting-started.md

@@ -86,8 +86,7 @@ every **5 minutes**, mimicking the basic features of `react-query`.
 import { createApi, createSchema, createStore, mdw, timer } from "starfx";
 import { Provider, useCache } from "starfx/react";
 
-const [schema, initialState] = createSchema();
-const store = createStore({ initialState });
+const schema = createSchema();
 
 const api = createApi();
 // mdw = middleware
@@ -102,7 +101,7 @@ const fetchRepo = api.get(
   api.cache(),
 );
 
-store.run(api.register);
+const store = createStore({ schema, tasks: [api.register] });
 
 function App() {
   return (

docs/posts/loaders.md

@@ -35,7 +35,7 @@ For thunks you can use `mdw.loader()` which will track the status of a thunk.
 ```ts
 import { createThunks, mdw } from "starfx";
 // imaginary schema
-import { initialState, schema } from "./schema";
+import { schema } from "./schema";
 
 const thunks = createThunks();
 thunks.use(mdw.loader(schema));
@@ -45,7 +45,7 @@ const go = thunks.create("go", function* (ctx, next) {
   throw new Error("boom!");
 });
 
-const store = createStore({ initialState });
+const store = createStore({ schema });
 store.dispatch(go());
 schema.loaders.selectById(store.getState(), { id: `${go}` });
 // status = "error"; message = "boom!"

docs/posts/schema.md

@@ -31,8 +31,8 @@ a place for `starfx` and third-party functionality to hold their state.
 ```ts
 import { createSchema, slice } from "starfx";
 
-const [schema, initialState] = createSchema({
-  cache: slice.table(),
+const schema = createSchema({
+  cache: slice.cache(),
   loaders: slice.loaders(),
 });
 ```
@@ -249,10 +249,10 @@ export function counter(initialState?: number) {
   return (name: string) => createCounter<AnyState>({ name, initialState });
 }
 
-const [schema, initialState] = createSchema({
+const schema = createSchema({
   counter: counter(100),
 });
-const store = createStore(initialState);
+const store = createStore({ schema });
 
 store.run(function* () {
   yield* schema.update([

docs/posts/store.md

@@ -55,12 +55,12 @@ interface User {
 }
 
 // app-wide database for ui, api data, or anything that needs reactivity
-const [schema, initialState] = createSchema({
-  cache: slice.table(),
+const schema = createSchema({
+  cache: slice.cache(),
   loaders: slice.loaders(),
   users: slice.table<User>(),
 });
-type WebState = typeof initialState;
+type WebState = typeof schema.initialState;
 
 // just a normal endpoint
 const fetchUsers = api.get<never, User[]>(
@@ -93,15 +93,14 @@ const fetchUsers = api.get<never, User[]>(
   },
 );
 
-const store = createStore(schema);
-store.run(api.register);
+const store = createStore({ schema, tasks: [api.register] });
 store.dispatch(fetchUsers());
 ```
 
 # How to update state
 
-There are **three** ways to update state, each with varying degrees of type
-safety:
+There are **two** common ways to update state, each with varying degrees of
+type safety:
 
 ```ts
 import { updateStore } from "starfx";
@@ -112,16 +111,12 @@ function*() {
   // no types
   yield* updateStore([/* ... */]);
 }
-
-store.run(function*() {
-  // no types
-  yield* store.update([/* ... */]);
-});
 ```
 
 `schema.update` has the highest type safety because it knows your state shape.
-The other methods are more generic and the user will have to provide types to
-them manually.
+`updateStore` is more generic and the user will have to provide types to it
+manually. For lower-level integration, the store also exposes `setState([...])`
+directly.
 
 # Updater function
 

examples/basic/src/main.tsx

@@ -1,11 +1,21 @@
 import ReactDOM from "react-dom/client";
-import { createApi, createSchema, createStore, mdw, timer } from "starfx";
+import {
+  createApi,
+  createSchema,
+  createStore,
+  mdw,
+  slice,
+  timer,
+} from "starfx";
 import { Provider, useCache } from "starfx/react";
 
-const [schema, initialState] = createSchema();
-const store = createStore({ initialState });
-
 const api = createApi();
+const schema = createSchema({
+  cache: slice.table(),
+  loaders: slice.loaders(),
+});
+const store = createStore({ schema, tasks: [api.register] });
+
 // mdw = middleware
 api.use(mdw.api({ schema }));
 api.use(api.routes());
@@ -14,17 +24,11 @@ api.use(mdw.fetch({ baseUrl: "https://api.github.com" }));
 const fetchRepo = api.get(
   "/repos/neurosnap/starfx",
   { supervisor: timer() },
-  api.cache(),
+  api.cache()
 );
 
-store.run(api.register);
-
 function App() {
-  return (
-    <Provider schema={schema} store={store}>
-      <Example />
-    </Provider>
-  );
+  return <Example />;
 }
 
 function Example() {
@@ -47,7 +51,7 @@ function Example() {
 
 const root = document.getElementById("root") as HTMLElement;
 ReactDOM.createRoot(root).render(
-  <Provider schema={schema} store={store}>
+  <Provider store={store}>
     <App />
-  </Provider>,
+  </Provider>
 );

examples/basic/tsconfig.json

@@ -1,5 +1,8 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "forceConsistentCasingInFileNames": true,
+    "ignoreDeprecations": "5.0",
     "target": "ESNext",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "module": "ESNext",
@@ -12,6 +15,10 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
+    "paths": {
+      "starfx": ["../../src/index.ts"],
+      "starfx/react": ["../../src/react.ts"]
+    },
 
     /* Linting */
     "strict": true,

examples/tests-rtl/package.json

@@ -1,23 +1,21 @@
 {
   "name": "tests-rtl",
   "scripts": {
-    "test": "jest"
+    "test": "vitest run"
   },
   "dependencies": {
     "starfx": "file:../.."
   },
   "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "babel-jest": "^30.0.4",
-    "jest": "^30.0.4",
-    "jest-environment-jsdom": "^30.0.4",
+    "jsdom": "^26.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-redux": "^9.1.2",
+    "vitest": "^4.0.7",
     "whatwg-fetch": "^3.6.20"
   }
 }

examples/tests-rtl/src/api.ts

@@ -1,7 +1,9 @@
 import { createApi, createSchema, mdw, slice } from "starfx";
+import { createTypedHooks } from "starfx/react";
 
 const emptyUser = { id: "", name: "" };
-export const [schema, initialState] = createSchema({
+type User = typeof emptyUser;
+export const schema = createSchema({
   users: slice.table({ empty: emptyUser }),
   cache: slice.table(),
   loaders: slice.loaders(),
@@ -12,20 +14,22 @@ api.use(mdw.api({ schema }));
 api.use(api.routes());
 api.use(mdw.fetch({ baseUrl: "https://jsonplaceholder.typicode.com" }));
 
-export const fetchUsers = api.get(
-  "/users",
-  function* (ctx, next) {
-    yield* next();
+export const fetchUsers = api.get("/users", function* (ctx, next) {
+  yield* next();
 
-    if (!ctx.json.ok) {
-      return;
-    }
+  if (!ctx.json.ok) {
+    return;
+  }
 
-    const users = ctx.json.value.reduce((acc, user) => {
+  const users = (ctx.json.value as User[]).reduce<Record<string, User>>(
+    (acc, user) => {
       acc[user.id] = user;
       return acc;
-    }, {});
+    },
+    {},
+  );
 
-    yield* schema.update(schema.users.add(users));
-  },
-);
+  yield* schema.update(schema.users.add(users));
+});
+const { useSelector } = createTypedHooks(schema);
+export { useSelector };