elf-sync-state-yomo 1.0.0

package/README.md

@@ -0,0 +1,93 @@
+# Sync State
+
+[![npm](https://img.shields.io/npm/v/elf-sync-state?logo=npm&style=flat-square)](https://www.npmjs.com/package/elf-sync-state) [![GitHub](https://img.shields.io/github/license/ricardojbarrios/elf-sync-state?style=flat-square)](https://github.com/RicardoJBarrios/elf-sync-state/blob/main/LICENSE.md) [![GitHub Repo stars](https://img.shields.io/github/stars/ricardojbarrios/elf-sync-state?logo=github&style=flat-square)](https://github.com/RicardoJBarrios/elf-sync-state)
+
+> Syncs elf store state across tabs
+
+The `syncState()` function gives you the ability to synchronize an [elf store](https://ngneat.github.io/elf/) state across multiple tabs, windows or iframes using the [Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API).
+
+First, you need to install the package via npm:
+
+```bash
+npm i elf-sync-state
+```
+
+To use it you should call the `syncState()` function passing the store:
+
+```ts
+import { createStore, withProps } from '@ngneat/elf';
+import { syncState } from 'elf-sync-state';
+
+interface AuthProps {
+  user: { id: string } | null;
+  token: string | null;
+}
+
+const authStore = createStore(
+  { name: 'auth' },
+  withProps<AuthProps>({ user: null, token: null })
+);
+
+syncState(authStore);
+```
+
+As the second parameter you can pass an optional `Options` object, which can be used to define the following:
+
+- `channel`: the name of the channel (by default - the store name plus a `@store` suffix).
+- `source`: a function that receives the store and return what to sync from it. The default is `(store) => store`.
+- `preUpdate`: a function to map the event message and get the data. The default is `(event) => event.data`.
+- `runGuard`: a function that returns whether the actual implementation should be run. The default is `() => typeof window !== 'undefined' && typeof window.BroadcastChannel !== 'undefined'`.
+
+```ts
+import { syncState } from 'elf-sync-state';
+import { authStore } from './auth.store';
+
+syncState(authStore, { channel: 'auth-channel' });
+```
+
+The sync state also returns the [`BroadcastChannel`](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel) object created or `undefined` if the `runGuard` function returns `false`.
+
+```ts
+import { syncState } from 'elf-sync-state';
+import { authStore } from './auth.store';
+
+const channel: BroadcastChannel | undefined = syncState(authStore);
+```
+
+## Sync a subset of the state
+
+The `includeKeys()` operator can be used to sync a subset of the state:
+
+```ts
+import { includeKeys, syncState } from 'elf-sync-state';
+import { authStore } from './auth.store';
+
+syncState(authStore, {
+  source: (store) => store.pipe(includeKeys(['user'])),
+});
+```
+
+## Pre Update interceptor
+
+The `preUpdate` option can be used to intercept the [`MessageEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent)
+and modify the data to be synchronized taking into account other properties of the event.
+
+```ts
+import { includeKeys, syncState } from 'elf-sync-state';
+import { authStore } from './auth.store';
+
+syncState(authStore, {
+  preUpdate: (event) => {
+    console.log(event);
+    return event.origin === '' ? undefined : event.data;
+  },
+});
+```
+
+## Integration with Elf :mage_woman:
+
+The use of this library has been tested together with other Elf libraries, such as [elf-entities](https://ngneat.github.io/elf/docs/features/entities/entities), [elf-persist-state](https://ngneat.github.io/elf/docs/features/persist-state) or [elf-state-history](https://ngneat.github.io/elf/docs/features/history). I have also tried to be consistent with their programming style and documentation to help with integration.
+
+[Here](https://stackblitz.com/edit/angular-elf-sync-state?devToolsHeight=33&file=src/app/todo.repository.ts) you can see an example of using all of these in an Angular application. Just open the result in two different tabs to see the library in action.
+
+> :warning: There may be a desync due to hot reload

package/index.cjs

@@ -0,0 +1,22 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('lodash-es'), require('@yomo/presencejs')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'rxjs', 'rxjs/operators', 'lodash-es', '@yomo/presencejs'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ElfSyncState = {}, global.Rx, global.Rx, global["lodash-es"], global.Presence));
+})(this, (function (exports, rxjs, operators, lodashEs, Presence) { 'use strict';
+
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+  var Presence__default = /*#__PURE__*/_interopDefaultLegacy(Presence);
+
+  function includeKeys(a){return rxjs.pipe(operators.map(b=>Object.keys(b).reduce((c,d)=>(a.includes(d)&&(c[d]=b[d]),c),{})))}
+
+  function syncState(a,b){const c={channel:`${a.name}@store`,source:a=>a.asObservable(),preUpdate:a=>a.data,runGuard:()=>"undefined"!=typeof window&&"undefined"!=typeof window.BroadcastChannel},d=Object.assign(Object.assign({},c),b);if(!d.runGuard())return;const e=new BroadcastChannel(d.channel);let f=!0;const g=new Presence__default["default"]("https://prsc.yomo.dev",{auth:{// Certification Type
+  type:"token",// Api for getting access token
+  endpoint:"https://ae59-159-146-14-53.ngrok.io/api/presence-auth"}});return g.on("connected",()=>{console.log("Connected to server: ",g.host);}),e.addEventListener("message",b=>{const c=d.preUpdate(b);f=!1,a.update(a=>Object.assign(Object.assign({},a),c));}),d.source(a).pipe(rxjs.skip(1),rxjs.distinctUntilChanged(lodashEs.isEqual),rxjs.tap(a=>{f?e.postMessage(a):f=!0;}),rxjs.finalize(()=>e.close())).subscribe(),e}
+
+  exports.includeKeys = includeKeys;
+  exports.syncState = syncState;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));

package/index.d.ts

@@ -0,0 +1,2 @@
+export { includeKeys } from './lib/include-keys';
+export { syncState } from './lib/sync-state';

package/index.js

@@ -0,0 +1,12 @@
+import { pipe, skip, distinctUntilChanged, tap, finalize } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { isEqual } from 'lodash-es';
+import Presence from '@yomo/presencejs';
+
+function includeKeys(a){return pipe(map(b=>Object.keys(b).reduce((c,d)=>(a.includes(d)&&(c[d]=b[d]),c),{})))}
+
+function syncState(a,b){const c={channel:`${a.name}@store`,source:a=>a.asObservable(),preUpdate:a=>a.data,runGuard:()=>"undefined"!=typeof window&&"undefined"!=typeof window.BroadcastChannel},d=Object.assign(Object.assign({},c),b);if(!d.runGuard())return;const e=new BroadcastChannel(d.channel);let f=!0;const g=new Presence("https://prsc.yomo.dev",{auth:{// Certification Type
+type:"token",// Api for getting access token
+endpoint:"https://ae59-159-146-14-53.ngrok.io/api/presence-auth"}});return g.on("connected",()=>{console.log("Connected to server: ",g.host);}),e.addEventListener("message",b=>{const c=d.preUpdate(b);f=!1,a.update(a=>Object.assign(Object.assign({},a),c));}),d.source(a).pipe(skip(1),distinctUntilChanged(isEqual),tap(a=>{f?e.postMessage(a):f=!0;}),finalize(()=>e.close())).subscribe(),e}
+
+export { includeKeys, syncState };

package/lib/include-keys.d.ts

@@ -0,0 +1,3 @@
+import { Store, StoreValue } from '@ngneat/elf';
+import { OperatorFunction } from 'rxjs';
+export declare function includeKeys<S extends Store, State extends StoreValue<S>>(keys: Array<keyof State>): OperatorFunction<State, Partial<State>>;

package/lib/sync-state.d.ts

@@ -0,0 +1,10 @@
+import { Store, StoreValue } from '@ngneat/elf';
+import { Observable } from 'rxjs';
+interface Options<S extends Store> {
+    channel?: string;
+    source?: (store: S) => Observable<Partial<StoreValue<S>>>;
+    preUpdate?: (event: MessageEvent<Partial<StoreValue<S>>>) => Partial<StoreValue<S>>;
+    runGuard?: () => boolean;
+}
+export declare function syncState<S extends Store>(store: S, options?: Options<S>): BroadcastChannel | undefined;
+export {};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "elf-sync-state-yomo",
+  "version": "1.0.0",
+  "description": "Syncs elf store state across tabs",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/RicardoJBarrios/elf-sync-state/issues"
+  },
+  "homepage": "https://github.com/RicardoJBarrios/elf-sync-state/blob/main/README.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/RicardoJBarrios/elf-sync-state"
+  },
+  "keywords": [
+    "javascript",
+    "state-management",
+    "elf",
+    "broadcastchannel",
+    "sync-state"
+  ],
+  "dependencies": {
+    "lodash-es": ">= 4.0.0"
+  },
+  "peerDependencies": {
+    "@ngneat/elf": ">= 1.3.0",
+    "rxjs": ">= 7.0.0",
+    "@yomo/presencejs": "^1.0.0-alpha.4"
+  },
+  "sideEffects": false,
+  "license": "MIT",
+  "module": "./index.js",
+  "main": "./index.cjs",
+  "type": "module",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.cjs"
+    }
+  }
+}