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*

biome.json

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

docs/posts/endpoints.md

@@ -332,7 +332,7 @@ function deserializeComment(com: any): Comment {
 }
 
 const [schema, initialState] = createSchema({
-  cache: slice.table(),
+  cache: slice.cache(),
   loaders: slice.loaders(),
   token: slice.str(),
   articles: slice.table<Article>(),

docs/posts/schema.md

@@ -32,7 +32,7 @@ a place for `starfx` and third-party functionality to hold their state.
 import { createSchema, slice } from "starfx";
 
 const [schema, initialState] = createSchema({
-  cache: slice.table(),
+  cache: slice.cache(),
   loaders: slice.loaders(),
 });
 ```

docs/posts/store.md

@@ -56,7 +56,7 @@ interface User {
 
 // app-wide database for ui, api data, or anything that needs reactivity
 const [schema, initialState] = createSchema({
-  cache: slice.table(),
+  cache: slice.cache(),
   loaders: slice.loaders(),
   users: slice.table<User>(),
 });

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 };

examples/tests-rtl/src/app.tsx

@@ -1,7 +1,7 @@
-import { useDispatch, useSelector } from "starfx/react";
-import { fetchUsers, schema } from "./api";
+import { useDispatch } from "starfx/react";
+import { fetchUsers, schema, useSelector } from "./api";
 
-export function App({ id }) {
+export function App({ id }: { id: string }) {
   const dispatch = useDispatch();
   const user = useSelector((s) => schema.users.selectById(s, { id }));
   const userList = useSelector(schema.users.selectTableAsList);

examples/tests-rtl/src/store.ts

@@ -1,15 +1,12 @@
-import { api, initialState as schemaInitialState } from "./api";
+import { api, schema } from "./api";
 import { createStore } from "starfx";
 
-export function setupStore({ initialState = {} }) {
+export function setupStore({ initialState = {} } = {}) {
+  void initialState;
   const store = createStore({
-    initialState: {
-      ...schemaInitialState,
-      ...initialState,
-    },
+    schema,
+    tasks: [api.register],
   });
 
-  store.run(api.register);
-
   return store;
 }

examples/tests-rtl/tests/app.test.tsx

@@ -1,6 +1,4 @@
-import React from "react";
-import "@testing-library/jest-dom";
-import { expect, test } from "@jest/globals";
+import { expect, test } from "vitest";
 import { fireEvent, render, screen, waitFor } from "./utils";
 import { fetchUsers } from "../src/api";
 import { App } from "../src/app";

examples/tests-rtl/tests/setup.ts

@@ -1,5 +1,11 @@
-import "@testing-library/jest-dom";
+import "@testing-library/jest-dom/vitest";
+import { cleanup } from "@testing-library/react";
+import { afterEach } from "vitest";
 // jsdom doesn't have the fetch API which we need for Response()
 //  so polyfilling it here for every file
 // see https://github.com/jsdom/jsdom/issues/1724
 import "whatwg-fetch";
+
+afterEach(() => {
+	cleanup();
+});

examples/tests-rtl/tests/utils.tsx

@@ -1,16 +1,11 @@
 import React, { type ReactElement } from "react";
 import { render, type RenderOptions } from "@testing-library/react";
 import { Provider } from "starfx/react";
-import { schema } from "../src/api";
 import { setupStore } from "../src/store";
 
 const AllTheProviders = ({ children }: { children: React.ReactNode }) => {
   const store = setupStore({});
-  return (
-    <Provider schema={schema} store={store}>
-      {children}
-    </Provider>
-  );
+  return <Provider store={store}>{children}</Provider>;
 };
 
 const customRender = (

examples/tests-rtl/tsconfig.json

@@ -2,22 +2,26 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "compilerOptions": {
     "baseUrl": ".",
-    "types": ["vitest/globals"],
+    "forceConsistentCasingInFileNames": true,
+    "ignoreDeprecations": "5.0",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
-    "forceConsistentCasingInFileNames": true,
     "target": "esnext",
     "module": "esnext",
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "noUnusedLocals": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "starfx": ["../../src/index.ts"],
+      "starfx/react": ["../../src/react.ts"]
+    }
   },
   "include": ["./src"]
 }

examples/tests-rtl/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  resolve: {
+    dedupe: ["react", "react-dom", "react-redux"],
+  },
+  test: {
+    environment: "jsdom",
+    setupFiles: ["./tests/setup.ts"],
+  },
+});

examples/vite-react/src/App.tsx

@@ -1,12 +1,8 @@
 import {
-  TypedUseSelectorHook,
   useDispatch,
-  useSelector as useSel,
 } from "starfx/react";
 import "./App.css";
-import { AppState, fetchUsers, schema } from "./api.ts";
-
-const useSelector: TypedUseSelectorHook<AppState> = useSel;
+import { fetchUsers, schema, useSelector } from "./api.ts";
 
 function App({ id }: { id: string }) {
   const dispatch = useDispatch();

examples/vite-react/src/age-guess.ts

@@ -1,4 +1,5 @@
 import { type Operation, resource } from "effection";
+import { registerResource } from "starfx";
 
 export function guessAge(): Operation<{ guess: number; accumulated: number }> {
   console.log("started");
@@ -25,3 +26,5 @@ export function guessAge(): Operation<{ guess: number; accumulated: number }> {
     }
   });
 }
+
+export const GlobalGuesser = registerResource("global-guesser", guessAge());

examples/vite-react/src/api.ts

@@ -1,5 +1,6 @@
 import { createApi, createSchema, mdw, slice } from "starfx";
 import { guessAge } from "./age-guess";
+import { createTypedHooks } from "starfx/react";
 
 interface User {
   id: string;
@@ -8,12 +9,11 @@ interface User {
 }
 
 const emptyUser: User = { id: "", name: "", age: 0 };
-export const [schema, initialState] = createSchema({
+export const schema = createSchema({
   users: slice.table({ empty: emptyUser }),
   cache: slice.table(),
   loaders: slice.loaders(),
 });
-export type AppState = typeof initialState;
 
 export const api = createApi();
 api.use(mdw.api({ schema }));
@@ -49,3 +49,6 @@ export const fetchUsers = api.get<never, Omit<User, "age">[]>(
     yield* schema.update(schema.users.add(users));
   }
 );
+
+export const { useSelector } = createTypedHooks(schema);
+