feat(core): React hook

package.json

@@ -4,7 +4,9 @@
   "license": "MIT",
   "scripts": {},
   "private": true,
-  "dependencies": {},
+  "dependencies": {
+    "react": "^19.0.0"
+  },
   "devDependencies": {
     "@eslint/js": "^9.8.0",
     "@nx/eslint": "20.3.0",
@@ -16,6 +18,7 @@
     "@swc/core": "~1.5.7",
     "@swc/helpers": "~0.5.11",
     "@types/node": "18.16.9",
+    "@types/react": "^19.0.2",
     "@vitest/coverage-v8": "^1.0.4",
     "@vitest/ui": "^1.3.1",
     "eslint": "^9.8.0",

packages/react-connect/README.md

@@ -0,0 +1,11 @@
+# react-connect
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build react-connect` to build the library.
+
+## Running unit tests
+
+Run `nx test react-connect` to execute the unit tests via [Vitest](https://vitest.dev/).

packages/react-connect/eslint.config.cjs

@@ -0,0 +1,22 @@
+const baseConfig = require('../../eslint.config.cjs');
+
+module.exports = [
+  ...baseConfig,
+  {
+    files: ['**/*.json'],
+    rules: {
+      '@nx/dependency-checks': [
+        'error',
+        {
+          ignoredFiles: [
+            '{projectRoot}/eslint.config.{js,cjs,mjs}',
+            '{projectRoot}/vite.config.{js,ts,mjs,mts}',
+          ],
+        },
+      ],
+    },
+    languageOptions: {
+      parser: require('jsonc-eslint-parser'),
+    },
+  },
+];

packages/react-connect/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@focus/react-connect",
+  "version": "0.0.1",
+  "dependencies": {
+    "react": "^19.0.0",
+    "tslib": "^2.3.0",
+    "@focus/core": "0.0.1",
+    "@focus/store": "0.0.1"
+  },
+  "type": "commonjs",
+  "main": "./dist/index.js",
+  "typings": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "nx": {
+    "sourceRoot": "packages/react-connect/src",
+    "projectType": "library",
+    "name": "react-connect",
+    "targets": {
+      "test": {
+        "executor": "@nx/vite:test",
+        "outputs": [
+          "{options.reportsDirectory}"
+        ],
+        "options": {
+          "reportsDirectory": "../../coverage/packages/react-connect"
+        }
+      }
+    }
+  }
+}

packages/react-connect/src/index.ts

@@ -0,0 +1 @@
+export * from './lib';

packages/react-connect/src/lib/index.spec.ts

@@ -0,0 +1,5 @@
+describe('Test to be added soon', () => {
+  test('Test to be added soon', () => {
+    expect(true).toEqual(true);
+  });
+});

packages/react-connect/src/lib/index.ts

@@ -0,0 +1,38 @@
+// https://react.dev/reference/react/useSyncExternalStore
+
+import { useSyncExternalStore } from 'react';
+import { Lens, noop } from '@focus/core';
+import { createStore, Logger } from '@focus/store';
+
+export const connect = <State>(initialState: State, logger: Logger = noop) => {
+  const store = createStore(initialState, logger);
+
+  const useGlobalState = () => {
+    const { getState, select, updateState, batchUpdates, subscribe } = store;
+
+    const state = useSyncExternalStore(subscribe, getState);
+
+    return {
+      state,
+      getSynchronousState: getState,
+      select,
+      updateState,
+      batchUpdates,
+      focus: <Focus>(lens: Lens<State, Focus>) => {
+        const focusedStore = store.focus(lens);
+
+        const { getState, select, updateState, batchUpdates } = focusedStore;
+
+        return {
+          state: lens.get(state),
+          getSynchronousState: getState,
+          select,
+          updateState,
+          batchUpdates,
+        };
+      },
+    };
+  };
+
+  return useGlobalState;
+};

packages/react-connect/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "../store"
+    },
+    {
+      "path": "../core"
+    },
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

packages/react-connect/tsconfig.lib.json

@@ -0,0 +1,34 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "src",
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
+    "emitDeclarationOnly": false,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "references": [
+    {
+      "path": "../store/tsconfig.lib.json"
+    },
+    {
+      "path": "../core/tsconfig.lib.json"
+    }
+  ],
+  "exclude": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ]
+}

packages/react-connect/tsconfig.spec.json

@@ -0,0 +1,33 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

packages/react-connect/vite.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/react-connect',
+  plugins: [],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'node',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8',
+    },
+  },
+});

tsconfig.json

@@ -8,6 +8,9 @@
     },
     {
       "path": "./packages/store"
+    },
+    {
+      "path": "./packages/react-connect"
     }
   ]
 }