@synnaxlabs/drift 0.5.0

package/LICENSE

@@ -0,0 +1,4 @@
+Source code in this repository is licensed under the Business Source License 1.1 (BSL).
+A copy of the license can be found in the licenses/BSL.txt file. Source code in a given
+file is licensed under the BSL and the copyright belongs to Synnax Labs, Inc. unless
+otherwise noted at the beginning of the file.

package/README.md

@@ -0,0 +1,162 @@
+# Drift - Redux State Synchronization and Declarative Window Management
+
+# Summary
+
+Building multi-window applications with Tauri and Electron raises the challenge of
+synchronizing state between windows. Communicating over IPC is unintuitive when used in
+combination with stateful UI frameworks like React.
+
+Drift is a simple Redux extension that tightly synchronizes state between windows.
+It also allows you to create, delete, and alter windows by dispatching actions.
+
+What's more, Drift can prerender windows in the background, allowing new windows to be
+ready to display in a fraction of the typical time.
+
+Drift was inspired by the now
+unmaintained [Electron Redux](https://github.com/klarna/electron-redux),
+and exposes a much simpler, more powerful API.
+
+# Supported Runtimes
+
+| Runtime  | Supported                                                                 | Import                                                   |
+|----------|---------------------------------------------------------------------------|----------------------------------------------------------|
+| Tauri    | Yes                                                                       | `import { TauriRuntime } from "@synnaxlabs/drift/tauri"` |
+| Electron | No. We're looking for someone to add Electron support! Please contribute. | TBA                                                      |
+
+# Installation
+
+With NPM:
+
+```bash
+npm install @synnaxlabs/drift
+```
+
+With Yarn:
+
+```bash
+yarn add @synnaxlabs/drift
+```
+
+With PNPM:
+
+```bash
+pnpm add @synnaxlabs/drift
+```
+
+# Usage
+
+## Configuration
+
+The first step is to reconfigure your store to support Drift. Drift exposes a custom
+`configureStore` function returns a **promise** that resolves to a Redux store. This
+allows Drift to asynchronously fetch the initial state from the main process. In order
+to add declarative window management, you also need to add Drift's custom `reducer`
+to your store.
+
+```ts
+// store configuration file
+
+import {
+    reducer as driftReducer,
+    configureStore,
+    DRIFT_SLICE_NAME,
+    TauriRuntime,
+} from "@synnaxlabs/drift"
+
+import {combineReducers} from "@reduxjs/toolkit"
+
+const reducer = combineReducers({
+    [DRIFT_SLICE_NAME]: driftReducer,
+    // ... your other reducers
+})
+
+export const storePromise = configureStore({
+    runtime: new TauriRuntime(),
+    reducer,
+    enablePrerender: true,
+})
+```
+
+Next, we've created a custom `Provider` that automatically resolves the store promise
+and works exactly like the standard Redux `Provider`.
+
+```tsx
+// in your main application file
+
+import {Provider} from "@synnaxlabs/drift/react"
+import {storePromise} from "./store"
+
+return (
+    <Provider store={storePromise}>
+        {/* Your stateful application code*/}
+    </Provider>
+)
+```
+
+State should now be synchronized between all of your Windows!
+
+## Managing Windows
+
+Creating a Window is as easy as dispatching a `createWindow` action.
+
+```ts
+import {useDispatch} from "react-redux";
+import {createWindow} from "@synnaxlabs/drift"
+import {useEffect} from "react";
+
+export const MyReactComponent = () => {
+    const dispatch = useDispatch()
+
+    useEffect(() => {
+        dispatch(createWindow({
+            key: "exampleWindow",
+            title: "Example Window",
+            width: 800,
+            height: 600,
+        }))
+    }, [dispatch])
+}
+
+
+
+```
+
+The `key` property is used to uniquely identify the window. If a window with the same
+key already exists, Drift will focus that window instead of creating a new one.
+
+You can also dispatch a `closeWindow` action to close a window.
+
+```tsx
+import {useDispatch} from "react-redux";
+import {closeWindow} from "@synnaxlabs/drift"
+import {useEffect} from "react";
+
+export const MyReactComponent = () => {
+    const dispatch = useDispatch()
+
+    useEffect(() => {
+        dispatch(closeWindow({key: "exampleWindow"}))
+    }, [dispatch])
+
+
+}
+```
+
+## Accessing Window State
+
+Drift also provides selectors for accessing Window state in React.
+
+```tsx
+import {useEffect} from "react;
+import {useSelectWindow} from "@synnaxlabs/drift";
+
+export const MyReactComponent = () => {
+    // Providing a key is optional. If no key is provided, the current window is selected.
+    const window = useSelectWindow()
+
+    useEffect(() => {
+        console.log(window)
+    }, [window])
+}
+```
+

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@synnaxlabs/drift",
+  "private": false,
+  "version": "0.5.0",
+  "description": "State synchronization and Redux state synchronization for Tauri Apps",
+  "repository": "https://github.com/synnaxlabs/synnax/tree/main/drift",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "synnax",
+    "tauri",
+    "redux",
+    "react",
+    "electron",
+    "application level state"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@synnaxlabs/x": "0.10.0"
+  },
+  "peerDependencies": {
+    "@reduxjs/toolkit": "^2.2.0",
+    "@tauri-apps/api": "^1.5.3",
+    "proxy-memoize": "1.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^9.1.0"
+  },
+  "devDependencies": {
+    "@reduxjs/toolkit": "^2.2.0",
+    "@tauri-apps/api": "^1.5.3",
+    "@types/react": "^18.2.48",
+    "@vitest/coverage-v8": "^1.2.2",
+    "proxy-memoize": "1.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^9.1.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.2",
+    "vite-plugin-lib": "^2.0.6",
+    "vitest": "^1.2.1",
+    "eslint-config-synnaxlabs": "0.0.1",
+    "@synnaxlabs/vite-plugin": "0.0.1",
+    "@synnaxlabs/tsconfig": "0.0.2"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/drift.cjs.js",
+  "module": "./dist/drift.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react.js",
+      "require": "./dist/react.cjs",
+      "types": "./dist/react/index.d.ts"
+    },
+    "./tauri": {
+      "import": "./dist/tauri.js",
+      "require": "./dist/tauri.cjs",
+      "types": "./dist/tauri/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc --noEmit && vite build",
+    "watch": "tsc --noEmit && vite build --watch",
+    "test": "vitest",
+    "cov": "vitest --coverage",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "fix": "eslint \"src/**/*.ts*\" --fix"
+  }
+}