feat: UNT-T31323: Init redux saga dev tool for expo

Author: Krunal-K-SimformSolutions

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -0,0 +1,2 @@
+// @generated by expo-module-scripts
+module.exports = require('expo-module-scripts/eslintrc.base.js');

.github/workflows/publish.yml

@@ -0,0 +1,23 @@
+name: '🚀 Publish'
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  release:
+    name: 🚀 Publish
+    runs-on: macos-13
+    steps:
+      - name: 📚 checkout
+        uses: actions/[email protected]
+      - name: 🟢 node
+        uses: actions/[email protected]
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org
+      - name: 🚀 Build & Publish
+        run: yarn install && cd webui && yarn install && yarn run export && cd .. && yarn build && yarn publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}

.gitignore

@@ -0,0 +1,45 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# Dependency directories
+node_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variable files
+.env
+
+# Build files
+build/
+dist/
+.expo/
+
+*.DS_Store

LICENCE

@@ -0,0 +1,7 @@
+Copyright 2024 Matthew Oakes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,30 @@
+# redux-saga-devtools-expo-dev-plugin
+
+A React Native Redux Saga DevTool that can run in an Expo App
+
+# Installation
+
+### Add the package to your project
+
+```
+npx expo install redux-saga-devtools-expo-dev-plugin
+```
+
+### Integrate redux saga with the DevTool hook
+
+```jsx
+import createSagaMiddleware from 'redux-saga';
+
+let sagaMiddleware = createSagaMiddleware();
+if (__DEV__) {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const { createSagaMonitor } = require('redux-saga-devtools-expo-dev-plugin');
+  sagaMiddleware = createSagaMiddleware({ sagaMonitor: createSagaMonitor() });
+}
+
+const store = configureStore({
+  reducer: rootReducer,
+  devTools: false,
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(sagaMiddleware),
+});
+```

babel.config.js

@@ -0,0 +1,2 @@
+// @generated by expo-module-scripts
+module.exports = require('expo-module-scripts/babel.config.base');

expo-module.config.json

@@ -0,0 +1,6 @@
+{
+    "platforms": ["devtools"],
+    "devtools": {
+      "webpageRoot": "dist"
+    }
+  }

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "redux-saga-devtools-expo-dev-plugin",
+  "version": "1.0.0",
+  "description": "Expo DevTools Plugin for Redux Saga",
+  "homepage": "https://github.com/Krunal-K-SimformSolutions/redux-saga-devtools-expo-dev-plugin",
+  "license": "MIT",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "expo-module build",
+    "test:types": "expo-module tsc --noEmit",
+    "test:lint": "expo-module lint",
+    "test": "npm run test:types && npm run test:lint",
+    "clean": "expo-module clean",
+    "prepare": "expo-module prepare && npm run web:install",
+    "prepublishOnly": "expo-module prepublishOnly && npm run web:export",
+    "web:install": "cd webui && npm install",
+    "web:dev": "cd webui && npm start",
+    "web:export": "cd webui && npm run export"
+  },
+  "keywords": [
+    "expo",
+    "devtools",
+    "redux",
+    "saga",
+    "redux-saga",
+    "plugin"
+  ],
+  "files": [
+    "build",
+    "dist",
+    "expo-module.config.json"
+  ],
+  "author": "Simform Solutions",
+  "dependencies": {
+    "@redux-saga/is": "^1.0.1",
+    "@redux-saga/core": "^1.3.0"
+  },
+  "devDependencies": {
+    "expo": "~52.0.4",
+    "expo-module-scripts": "^4.0.2",
+    "typescript": "^5.6.3",
+    "redux": "^4.0.1",
+    "redux-saga": "^1.0.1"
+  },
+  "peerDependencies": {
+    "expo": ">=52",
+    "redux": "*",
+    "redux-saga": "*"
+  }
+}

src/EffectManager.ts

@@ -0,0 +1,75 @@
+import { Effect } from "@redux-saga/types";
+import { Saga } from "redux-saga";
+
+export interface MonitoredEffect {
+  effectId: number;
+  parentEffectId?: number;
+  name?: string;
+  description?: string;
+  saga?: Saga;
+  root?: boolean;
+  args?: any[];
+  status: string;
+  start?: number;
+  end?: number;
+  duration?: number;
+  error?: any;
+  label?: string;
+  winner?: boolean;
+  result?: any;
+
+  effect?: Effect;
+}
+
+export default class EffectManager {
+  rootIds: number[];
+  map: { [id: number]: MonitoredEffect };
+  childIdsMap: { [id: number]: number[] };
+  alreadyExecutedEffects: Array<any> = [];
+
+  constructor() {
+    this.rootIds = [];
+    this.map = {};
+    this.childIdsMap = {};
+  }
+
+  get(effectId: number): MonitoredEffect {
+    return this.map[effectId];
+  }
+
+  set(effectId: number, desc: MonitoredEffect): void {
+    this.map[effectId] = desc;
+
+    if (desc.parentEffectId && !this.childIdsMap[desc.parentEffectId]) {
+      this.childIdsMap[desc.parentEffectId] = [];
+    }
+    if (desc.parentEffectId) {
+      this.childIdsMap[desc.parentEffectId]?.push(effectId);
+    }
+  }
+
+  setRootEffect(effectId: number, desc: MonitoredEffect): void {
+    this.rootIds?.push(effectId);
+    this.set(effectId, { ...desc, root: true });
+  }
+
+  getRootIds(): number[] {
+    return this.rootIds;
+  }
+
+  getChildIds(parentEffectId: number): number[] {
+    return this.childIdsMap[parentEffectId] || [];
+  }
+
+  setAlreadyExecutedEffects(params: any) {
+    this.alreadyExecutedEffects.push(params);
+  }
+
+  get allAlreadyExecutedEffects(): Array<any> {
+    return this.alreadyExecutedEffects;
+  }
+
+  clearAlreadyExecutedEffects() { 
+    this.alreadyExecutedEffects = [];
+  }
+}

src/constants.ts

@@ -0,0 +1,54 @@
+import { effectTypes } from "redux-saga/effects";
+
+const {
+  TAKE,
+  PUT,
+  ALL,
+  RACE,
+  CALL,
+  CPS,
+  FORK,
+  JOIN,
+  CANCEL,
+  SELECT,
+  ACTION_CHANNEL,
+  CANCELLED,
+  FLUSH,
+  GET_CONTEXT,
+  SET_CONTEXT,
+} = effectTypes;
+
+const PARALLEL = "PARALLEL";
+const ITERATOR = "ITERATOR";
+const PROMISE = "PROMISE"; // not from redux-saga
+const UNKNOWN = "UNKNOWN"; // not from redux-saga
+
+// monitoring statuses
+const PENDING = "PENDING";
+const RESOLVED = "RESOLVED";
+const REJECTED = "REJECTED";
+
+export {
+  TAKE,
+  PUT,
+  ALL,
+  RACE,
+  CALL,
+  CPS,
+  FORK,
+  JOIN,
+  CANCEL,
+  SELECT,
+  ACTION_CHANNEL,
+  CANCELLED,
+  FLUSH,
+  GET_CONTEXT,
+  SET_CONTEXT,
+  PARALLEL,
+  ITERATOR,
+  PROMISE,
+  UNKNOWN,
+  PENDING,
+  RESOLVED,
+  REJECTED,
+};

src/helpers/getEffectDescription.ts

@@ -0,0 +1,70 @@
+import * as is from "@redux-saga/is";
+import { Effect } from "@redux-saga/types";
+
+import * as effectTypes from "../constants";
+
+const getEffectDescription = (
+  effect: Effect | any[] | IterableIterator<any> | Promise<any>,
+): any => {
+  if (!effect) return effectTypes.UNKNOWN;
+
+  if ((effect as any)?.root) return (effect as any)?.saga?.name; // TODO: Better typing
+  if (is.iterator(effect)) {
+    return (effect as any)?.name || effectTypes.UNKNOWN;
+  }
+  if (is.array(effect)) return null;
+  if (is.promise(effect)) {
+    let display: string;
+    if ((effect as any)?.name) {
+      // a promise object with a manually set name prop for display reasons
+      display = `${effectTypes.PROMISE}(${(effect as any)?.name})`;
+    } else if (effect?.constructor instanceof Promise.constructor) {
+      // an anonymous promise
+      display = effectTypes.PROMISE;
+    } else {
+      // class which extends Promise, so output the name of the class to precise
+      display = `${effectTypes.PROMISE}(${effect?.constructor?.name})`;
+    }
+    return display;
+  }
+  if (is.effect(effect)) {
+    const { type, payload: data } = (effect || {}) as Effect;
+    if (type === effectTypes.TAKE) {
+      return data?.pattern || "channel";
+    } else if (type === effectTypes.PUT) {
+      return data?.channel ? data?.action : data?.action?.type;
+    } else if (type === effectTypes.ALL) {
+      return null;
+    } else if (type === effectTypes.RACE) {
+      return null;
+    } else if (type === effectTypes.CALL) {
+      return !data?.fn?.name || data?.fn?.name?.trim() === ""
+        ? "(anonymous)"
+        : data?.fn?.name;
+    } else if (type === effectTypes.CPS) {
+      return data?.fn?.name;
+    } else if (type === effectTypes.FORK) {
+      return data?.fn?.name;
+    } else if (type === effectTypes.JOIN) {
+      return data?.name;
+    } else if (type === effectTypes.CANCEL) {
+      return data?.name;
+    } else if (type === effectTypes.SELECT) {
+      return data?.selector?.name;
+    } else if (type === effectTypes.ACTION_CHANNEL) {
+      return data?.buffer == null ? data?.pattern : data;
+    } else if (type === effectTypes.CANCELLED) {
+      return null;
+    } else if (type === effectTypes.FLUSH) {
+      return data;
+    } else if (type === effectTypes.GET_CONTEXT) {
+      return data;
+    } else if (type === effectTypes.SET_CONTEXT) {
+      return data;
+    }
+  }
+
+  return effectTypes.UNKNOWN;
+};
+
+export default getEffectDescription;