[
  {
    "path": ".eslintrc.js",
    "content": "module.exports = {\n  env: {\n    browser: true,\n    es6: true,\n  },\n  extends: [\"airbnb-typescript\", \"prettier/@typescript-eslint\"],\n  globals: {\n    Atomics: \"readonly\",\n    SharedArrayBuffer: \"readonly\",\n  },\n  parser: \"@typescript-eslint/parser\",\n  parserOptions: {\n    ecmaVersion: 2018,\n    sourceType: \"module\",\n  },\n  plugins: [\"@typescript-eslint\"],\n  rules: {},\n};\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\n/lib\n.DS_Store"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"trailingComma\": \"all\",\n  \"singleQuote\": true\n}\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2022 Gan Jun Kai & Wai Pai Lee\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Redux Flipper\n\n![screenshot of the plugin](https://i.imgur.com/blqn8oT.png)\n\nRedux middleware for [Flipper](https://fbflipper.com/). It can log redux actions and show inside Flipper using [flipper-plugin-redux-debugger](https://github.com/jk-gan/flipper-plugin-redux-debugger).\n\n### Support\n\n- React Native\n  - For `react-native` >= 0.62, flipper support is enabled by default\n  - For `react-native` < 0.62, follow [these steps](https://fbflipper.com/docs/getting-started/react-native.html#manual-setup) to setup your app\n- Redux or Redux-Toolkit\n\n## Get Started\n\n1. Install [redux-flipper](https://github.com/jk-gan/redux-flipper) middleware and `react-native-flipper` in your React Native app:\n\n```bash\nyarn add redux-flipper react-native-flipper\n# for iOS\ncd ios && pod install\n```\n\n2. Add the middleware into your redux store:\n\n```javascript\nimport { createStore, applyMiddleware } from 'redux';\n\nconst middlewares = [\n  /* other middlewares */\n];\n\nif (__DEV__) {\n  const createDebugger = require('redux-flipper').default;\n  middlewares.push(createDebugger());\n}\n\nconst store = createStore(RootReducer, applyMiddleware(...middlewares));\n```\n\nRedux Toolkit\n\n```javascript\nconst middlewares = [\n  /* other middlewares */\n];\n\nif (__DEV__) {\n  const createDebugger = require('redux-flipper').default;\n  middlewares.push(createDebugger());\n}\n\nconst store = configureStore({\n  reducer: {},\n  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(middleware),\n});\n```\n\n3. Install [flipper-plugin-redux-debugger](https://github.com/jk-gan/flipper-plugin-redux-debugger) in Flipper desktop client:\n\n```\nManage Plugins > Install Plugins > search \"redux-debugger\" > Install\n```\n\n4. Start your app, then you should be able to see Redux Debugger on your Flipper app\n\n## Optional Configuration\n\n### State whitelisting\n\nMany times you are only interested in certain part of the Redux state when debugging. You can pass array of string which have to match to the root key of the Redux state.\n\nFor example if Redux schema is something like this and you are only interested in user then you can whitelist only that part of the state\n\n```typescript\ntype ReduxState = {\n  todos: string[];\n  notifications: string[];\n  user: {\n    name: string;\n  };\n};\n```\n\n```javascript\nlet reduxDebugger = createDebugger({ stateWhitelist: ['user'] });\n```\n\nIf you app has very big state tree it is also good idea to whitelist certain keys from Redux state otherwise Flipper can be very slow.\n\n### Resolve cyclic reference\n\nRedux Debugger does not support cyclic reference objects by default as resolving it makes application slow. This feature can be enabled by passing `{ resolveCyclic: true }` into `createDebugger`.\n\nThis is just a temporary solution if debugging is urgent. It is advisable to restructure your redux state structure.\n\nFor more information about cyclic reference, visit [MDN Cyclic Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value).\n\n```javascript\nlet reduxDebugger = createDebugger({ resolveCyclic: true });\n```\n\n### Actions Blacklist\n\nYou may specify an actions blacklist the same way as with React Native Debugger, by providing an\narray of strings to match against the action.type field.\nThis feature can be enabled by passing `{ actionsBlacklist }` into `createDebugger`,\nwhere `actionsBlacklist` is an array of strings.\n\nFor example:\n\n```javascript\nconst actionsBlacklist = ['EVENTS/', 'LOCAL/setClock'];\nconst reduxDebugger = createDebugger({ actionsBlacklist });\n```\n\nThis will exclude any actions that contain the substrings in the blacklist. So an action with type\n`EVENTS/foo` will not be sent to the redux debugger flipper plugin, but an action with type\n`LOCAL/anotherAction` will.\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"redux-flipper\",\n  \"version\": \"2.0.3\",\n  \"description\": \"Redux middleware for flipper\",\n  \"main\": \"lib/index.js\",\n  \"types\": \"lib/index.d.ts\",\n  \"author\": \"jk-gan <junkai@hey.com> (https://github.com/jk-gan)\",\n  \"contributors\": [\n    {\n      \"name\": \"Wai Pai Lee\",\n      \"email\": \"pailee.wai@gmail.com\",\n      \"url\": \"https://plwai.com/\"\n    }\n  ],\n  \"homepage\": \"https://github.com/jk-gan/redux-flipper\",\n  \"bugs\": \"https://github.com/jk-gan/redux-flipper/issues\",\n  \"repository\": {\n    \"url\": \"https://github.com/jk-gan/redux-flipper\",\n    \"type\": \"git\"\n  },\n  \"files\": [\n    \"lib/**/*\"\n  ],\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"build\": \"tsc\",\n    \"dev\": \"tsc -w\"\n  },\n  \"peerDependencies\": {\n    \"react-native\": \">=0.63.0\",\n    \"react-native-flipper\": \">=0.100.0\",\n    \"redux\": \">=4\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"^16.4.8\",\n    \"@typescript-eslint/eslint-plugin\": \"^4.28.5\",\n    \"@typescript-eslint/parser\": \"^4.28.5\",\n    \"eslint\": \"^7.32.0\",\n    \"eslint-config-airbnb-typescript\": \"^12.3.1\",\n    \"eslint-config-prettier\": \"^8.3.0\",\n    \"eslint-plugin-import\": \"^2.20.2\",\n    \"prettier\": \"^2.0.4\",\n    \"typescript\": \"^4.3.5\"\n  },\n  \"dependencies\": {\n    \"cycle\": \"^1.0.3\",\n    \"dayjs\": \"^1.8.29\"\n  }\n}\n"
  },
  {
    "path": "src/index.ts",
    "content": "import { addPlugin, Flipper } from 'react-native-flipper';\nimport * as dayjs from 'dayjs';\n\nexport type Configuration = {\n  resolveCyclic?: boolean;\n  actionsBlacklist?: Array<string>;\n  stateWhitelist?: string[];\n};\n\nconst defaultConfig: Configuration = {\n  resolveCyclic: false,\n  actionsBlacklist: [],\n};\n\nlet currentConnection: Flipper.FlipperConnection | null = null;\n\nconst error = {\n  NO_STORE: 'NO_STORE',\n};\n\nconst createStateForAction = (state: any, config: Configuration) => {\n  return config.stateWhitelist\n    ? config.stateWhitelist.reduce(\n        (acc, stateWhitelistedKey) => ({\n          ...acc,\n          [stateWhitelistedKey]: state[stateWhitelistedKey],\n        }),\n        {},\n      )\n    : state;\n};\n\n// To initiate initial state tree\nconst createInitialAction = (store: any, config: Configuration) => {\n  const startTime = Date.now();\n  let initState = store.getState();\n\n  if (config.resolveCyclic) {\n    const cycle = require('cycle');\n\n    initState = cycle.decycle(initState);\n  }\n\n  let state = {\n    id: startTime,\n    time: dayjs(startTime).format('HH:mm:ss.SSS'),\n    took: `-`,\n    action: { type: '@@INIT' },\n    before: createStateForAction({}, config),\n    after: createStateForAction(initState, config),\n  };\n\n  currentConnection.send('actionInit', state);\n};\n\nconst createDebugger =\n  (config = defaultConfig) =>\n  (store: any) => {\n    if (currentConnection == null) {\n      addPlugin({\n        getId() {\n          return 'flipper-plugin-redux-debugger';\n        },\n        onConnect(connection: any) {\n          currentConnection = connection;\n\n          currentConnection.receive(\n            'dispatchAction',\n            (data: any, responder: any) => {\n              console.log('flipper redux dispatch action data', data);\n              // respond with some data\n              if (store) {\n                store.dispatch({ type: data.type, ...data.payload });\n\n                responder.success({\n                  ack: true,\n                });\n              } else {\n                responder.success({\n                  error: error.NO_STORE,\n                  message: 'store is not setup in flipper plugin',\n                });\n              }\n            },\n          );\n\n          createInitialAction(store, config);\n        },\n        onDisconnect() {\n          currentConnection = null;\n        },\n        runInBackground() {\n          return true;\n        },\n      });\n    } else {\n      createInitialAction(store, config);\n    }\n\n    return (next: any) => (action: { type: string }) => {\n      let startTime = Date.now();\n      let before = store.getState();\n      let result = next(action);\n      if (currentConnection) {\n        let after = store.getState();\n        let now = Date.now();\n        let decycledAction = null;\n\n        if (config.resolveCyclic) {\n          const cycle = require('cycle');\n\n          before = cycle.decycle(before);\n          after = cycle.decycle(after);\n          decycledAction = cycle.decycle(action);\n        }\n\n        let state = {\n          id: startTime,\n          time: dayjs(startTime).format('HH:mm:ss.SSS'),\n          took: `${now - startTime} ms`,\n          action: decycledAction || action,\n          before: createStateForAction(before, config),\n          after: createStateForAction(after, config),\n        };\n\n        const blackListed = !!config.actionsBlacklist?.some(\n          (blacklistedActionType) =>\n            action.type?.includes(blacklistedActionType),\n        );\n        if (!blackListed) {\n          currentConnection.send('actionDispatched', state);\n        }\n      }\n\n      return result;\n    };\n  };\n\nexport default createDebugger;\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"lib\": [\"es2015\", \"es2016\"],\n  \"compilerOptions\": {\n    \"target\": \"es2015\",\n    \"module\": \"commonjs\",\n    \"declaration\": true,\n    \"outDir\": \"./lib\",\n    \"strict\": true,\n    \"allowJs\": true\n  },\n  \"rules\": {\n    \"ordered-imports\": [false],\n    \"object-literal-sort-keys\": [false]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"**/__tests__/*\"]\n}\n"
  }
]