[
{
"path": ".eslintrc.js",
"content": "module.exports = {\n env: {\n browser: true,\n es2020: true,\n },\n extends: [\n 'plugin:react/recommended',\n 'prettier',\n 'prettier/flowtype', // if you are using flow\n 'prettier/react',\n ],\n parser: 'babel-eslint',\n parserOptions: {\n ecmaFeatures: {\n jsx: true,\n },\n ecmaVersion: 11,\n sourceType: 'module',\n },\n plugins: ['flowtype', 'react', 'jsx-a11y', 'prettier'],\n rules: {\n 'prettier/prettier': ['error'],\n 'react/prop-types': 'off',\n },\n settings: {\n react: {\n version: 'detect',\n },\n },\n};\n"
},
{
"path": ".gitignore",
"content": "node_modules\npackage-lock.json\n.vscode\nsrc/extension/build/bundles\n.DS_Store\n\npackage/node_modules/"
},
{
"path": ".prettierrc",
"content": "{\n \"arrowParens\": \"avoid\",\n \"singleQuote\": true,\n \"trailingComma\": \"all\",\n \"bracketSpacing\": false,\n \"jsxBracketSameLine\": false,\n \"endOfLine\": \"auto\",\n \"overrides\": [\n {\n \"files\": [\"*.js\", \"*.jsx\"],\n \"options\": {\n \"parser\": \"flow\"\n }\n }\n ]\n}\n"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2020 OSLabs Beta\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": "\n\n
\nRecoilize is a Chrome Dev Tool meant for debugging applications built with the experimental Recoil.js state management library.\n\nThe tool records Recoil state and allows users to easily debug their applications with features such as: time travel to previous states, visualization of the component graph and display of the atom selector network.\n\n
Please note that Recoilize is in BETA. We will continue to make improvements and implement fixes but if you find any issues, please dont hesitate to report them in the issues tab or submit a PR and we'll happily take a look.
\n\n
\nInstallation\n
\n\n#### Install Recoilize Module\n\n```js\nnpm install recoilize\n```\n\n### ** IMPORTANT **\n\n#### Import RecoilizeDebugger from the Recoilize module\n\n```js\nimport RecoilizeDebugger from 'recoilize';\n```\n\n#### Integrate RecoilizeDebugger as a React component within the recoil root:\n\n```js\nimport RecoilizeDebugger from 'recoilize';\nimport RecoilRoot from 'recoil';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n#### Please note, Recoilize assumes that the HTML element used to inject your React application has an ID of 'root'. If it does not the HTML element must be passed in as an attribute called 'root' to the RecoilizeDebugger component\n\n#### Example:\n\n```js\nimport RecoilizeDebugger from 'recoilize';\nimport RecoilRoot from 'recoil';\n\n//If your app injects on an element with ID of 'app'\nconst app = document.getElementById('app');\n\nReactDOM.render(\n \n \n \n ,\n app,\n);\n```\n\n### In order to integrate Next.js applications with RecoilizeDebugger, follow the example below. \n\n```js\n//If your application uses Next.js modify the _app.js as follows\nimport dynamic from 'next/dynamic';\nimport { useEffect, useState } from 'react';\nimport { RecoilRoot } from 'recoil';\n\nfunction MyApp({ Component, pageProps }) {\n\n const [root, setRoot] = useState(null)\n const RecoilizeDebugger = dynamic(\n\t() => {\n\t return import('recoilize');\n\t},\n\t{ ssr: false}\n );\n\n useEffect(() => {\n\n if (typeof window.document !== 'undefined') {\n setRoot(document.getElementById('__next'));\n }\n }, [root]);\n \n return (\n <>\n \n \n \n \n \n );\n}\n\n\nexport default MyApp;\n\n```\n\n#### Open your application on the Chrome Browser and start debugging with Recoilize!\n\n##### (Only supported with React applications using Recoil as state management)\n\n
New Features for Version 3.0.0
\n
Support for Recoil 0.1.3
\n
Recoilize now supports the most recent update to the Recoil library and is backwards compatible with older versions of Recoil.
\n\n
Time Travel with ease
\n
If you had used Recoilize before, you would have noticed an annoying bug that sometimes breaks the app and won’t allow you to be productive. With the new version of Recoilize, that issue is forever gone. Users can now use the tool with confidence and worry-free.
\n\n
The main mission of Recoilize 3.0 is to make it more user-friendly, so you will enjoy our brand new time travel feature — the time travel slider! Why click and scroll through snapshots when you can do it with a slider and some buttons, right?
\n\n
\n\n
\n\n
Customizable Component Graph
\n
This is one of the coolest updates of Recoilize 3.0. We understand that different users have different ways of thinking and visualizing, and for that reason, the component tree now is fully customizable. You can expand or collapse the components, choose vertical or horizontal displays or adjust the spacing between elements.
\n\n
\n\n
\n\n
Better User Experience with Atom Network
\n
The atom network is one of the key features that differentiate Recoil.js from other alternative state management libraries. However, the atom network will grow bigger together with the app. At some points, it will be unmanageable and hard to keep track of all of the atoms. To make this easier and pain-free, the new Atom Network will allow you to freely move and arrange them anywhere you want.
\n\n
\n\n
\n\n
Snapshot Comparison
\n
We understand that developers always develop an app with an optimization philosophy in mind. Component rendering time can be difficult to measure for two reasons. First, your computer and your web browser are not the same as mine, so the run-time can be vastly different. Second, it’s really hard to keep track of a long series of snapshots. You definitely don’t want to waste all of your time calculating the rendering time by hand.
\n\n
With the new Recoilize, users can now save a series of state snapshots and use it later to analyze/compare with the current series.
\n\n
\n\n
\n\n
Features
\n
Support for Concurrent Mode
\n
If a Suspense component was used as a placeholder during component renderings, those suspense components will display with a red border in the expanded component graph. This indicates that a component was suspended during the render of the selected snapshot.
\n\n
\n\n
\n\n
Performance Metrics
\n
In 'Metrics' tab, two graphs display component render times.\n\nThe flame graph displays the time a component took to render itself, and all of its child components. The bar graph displays the individual render times of each component.
\n\n\n\n
Throttle
\n
In the settings tab, users are able to set throttle (in milliseconds) for large scale applications or any applications that changes state rapidly. The default is set at 70ms.
\n\n
State Persistence
\n
Recoilize allows the users to persist their application's state through a refresh or reload. At this time, the user is able to view the previous states in the dev tool, but cannot time travel to the states before refresh.
\n\n
Additional Features
\n
legend to see relationship between component graph and state
\n
toggle to view raw component graph
\n
filter atom/selector network relationship
\n
filter snapshots by atom/selector keys
\n\n
We will continue updating Recoilize alongside Recoil's updates!
\nRecoilize는 Recoil 상태관리 라이브러리를 사용하여 만들어진 애플리케이션을 디버깅 할수있는 Chrome Dev Tool입니다.\n\nRecoil 상태를 기록하여 유저들이 애플리케이션을 편하게 디버깅 할수 있도록 도와주는 기능들을 가지고 있습니다. 리액트 컴포넌트를 시각화 하여 그래프로 보여줌과 동시에 스냅샷을 이요하여 이전 상태로 시간이동을 가능하게 만들어줄수있는 도구입니다.\n\n
Recoilize는 현재 베타버젼 입니다. 툴을 계속 개선하고 새로운 이슈들을 수정해 나갈것이고, 혹시 다른 버그들이나 이슈들이 나타난다면 언제든지 이슈 탭에 글을 작성하시거나 PR을 해주시면 감사하겠습니다.
\n\n
\n설치 방법\n
\n\n#### Recoilize 모듈 설치\n\n```js\nnpm install recoilize\n```\n\n### ** 중요 **\n\n#### Recoilize모듈에서 RecoilizeDebugger를 import해줘야 합니다\n\n```js\nimport RecoilizeDebugger from 'recoilize';\n```\n\n#### RecoilizeDebugger를 recoil root 안에 리액트 컴포넌트로 넣어야 합니다\n\n```js\nimport RecoilizeDebugger from 'recoilize';\nimport RecoilRoot from 'recoil';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n#### Recoilize는 리액트 애플리케이션을 주입시키기 위해 쓴 HTML 엘리먼트의 아이디를 'root'으로 가정합니다.아닐경우 RecoilizeDebugger에 'root'속성을 만들고 HTML 엘리먼트를 패스하십시오.\n\n```js\nimport RecoilizeDebugger from 'recoilize';\nimport RecoilRoot from 'recoil';\n\n//If your app injects on an element with ID of 'app'\nconst app = document.getElementById('app');\n\nReactDOM.render(\n \n \n \n ,\n app,\n);\n```\n\n#### 애플리케이션을 크롬 브라우저에서 열고 Recoilize 디버깅툴을 실행하시면 됩니다.\n\n##### (현재 Recoil을 상태관리 라이브러리로 사용하는 리액트 애플리케이션만 지원합니다.)\n\n
새로운 기능
\n
Recoil 0.1.2를 지원합니다
\n
Recoilize는 최신 버전과 구버전의 Recoil과 호환이 됩니다
\n\n
스냅샷 클리어
\n
Previous와 Forward 버튼을 넣어 선택된 스냅샵의 전이나 후에 있는 스냅샷을 지울 수 있게 했습니다
\n\n
\n\n
\n\n
컴포넌트 그래프
\n
호버
\n
그래프의 노드를 호버했을 때 안의 텍스트가 보이는 형태를 개선하였습니다
\n
atom 범례
\n
범례의 텍스트가 클릭되면 드롭다운 형태의 atom이나 selector 리스트가 보이게 하였습니다
\n
드롭다운 리스트에 있는 각각의 atom이나 selector를 누를 경우 해당 atom이나 selector를 쓰는 컴포넌트가 하이라이트되도록 바꾸었습니다
\n\n
\n\n
\n\n
atom 네트워크
\n
atom 범례
\n
범례의 텍스트가 클릭되면 드롭다운 형태의 atom이나 selector 리스트가 보이게 하였습니다
\n
드롭다운 리스트에 있는 각각의 atom이나 selector를 누를 경우 관련 atom이나 selector 노드가 보이도록 했습니다
\n
그래프
\n
여러개의 그래프가 겹치지 않도록 조정하였습니다
\n
검색 창
\n
검색 창이 탐색 버튼과 겹치지 않도록 변경하였습니다
\n\n
\n\n
\n\n
Ranked 그래프
\n
애니메이션을 없애서 전과 후 상태비교가 쉽게 보이도록 바꾸었습니다
\n\n
\n\n
\n\n
기능
\n
Concurrent 모드 지원
\n
만약 컴포넌트를 보류시키기 위해 Suspense 컴포넌트가 사용됐을 경우, 해당 컴포넌트의 노드 주위에 빨간 테두리로 표시하여 컴포넌트가 나타나기까지 지연되었음을 알려줄 것입니다
\n\n
\n\n
\n\n
퍼포먼스 측정 그래프
\n
'Metrics' 탭에 있는 두가지 그래프는 렌더링 시간을 보여줍니다
\n
Flame 그래프는 각각의 컴포넌트와 자식 컴포넌트가 나타나기까지 걸린 합산된 시간을 보여주고 Ranked 그래프는 각각의 컴포넌트가 나오기까지 걸린 시간을 보여줍니다
\n\n
시간 이동
\n
Recoilize의 주요 기능 중 하나로, 이 도구는 사용자가 이전의 모든 스냅샷으로 이동할 수 있게 해줍니다. 각 스냅샷 옆에 있는 점프 버튼을 누르면 해당 스냅샷으로 상태를 설정하여 DOM이 변경됩니다.
\n\n
\n\n
\n\n
시각화
\n
사용자는 개별 스냅샷을 클릭하여 애플리케이션 상태에 대한 시각화된 그래프를 볼수있고, 컴포넌트 트리와 다른 그래프 뿐만 아니라 State tree를 JSON 형식으로 지원합니다
\n\n
쓰로틀링
\n
대규모 애플리케이션 또는 상태를 빠르게 변경하는 모든 애플리케이션에 대해 쓰로틀링(ms)을 설정할 수 있습니다. 기본값은 70ms로 설정되어 있습니다.
\n\n
상태 유지 (베타)
\n
Recoilize는 사용자가 새로 고침을 했을 경우에도 응용 프로그램의 상태를 유지할 수 있도록 해줍니다. 이때 사용자는 개발 도구에서는 이전 상태를 볼 수 있지만, 새로고침 전에 상태로의 시간 이동은 할 수 없습니다. 우리 팀은 여전히 이 기능을 완성하기 위해 노력하고 있습니다.
\n\n
부가 기능
\n
컴포넌트 그래프에 마우스를 올렸을때 관련있는 atom과 selector들이 나타납니다
\n
컴포넌트 그래프 안에 오른쪽 작은 창에서 관련된 상태들을 선택하여 볼 있습니다
\n
컴포넌트 그래프 안에 Expand 버튼을 누르면 확장된 컴포넌트 그래프를 볼 수 있습니다
\n
네트워크 그래프 안에 atom과 selector들을 볼수있고 필터링도 가능합니다.
\n
설정탭에서 atom과 selector key를 사용하여 관련된 스냅샷들을 필터링 할 수 있습니다
\nRecoilize is a Chrome Dev Tool meant for debugging applications built with the experimental Recoil.js state management library.\n\nThe tool records Recoil state and allows users to easily debug their applications with features such as time travel to previous states, visualization of the component graph and display of the atom selector network.\n\n
Please note that Recoilize is in BETA. We will continue to make improvements and implement fixes but if you find any issues, please dont hesitate to report them in the issues tab or submit a PR and we'll happily take a look.
\n\n
\nInstallation\n
\n\n#### Install Recoilize Module\n\n```js\nnpm install recoilize\n```\n\n### ** IMPORTANT **\n\n#### Import RecoilizeDebugger from the Recoilize module\n\n```js\nimport RecoilizeDebugger from 'recoilize';\n```\n\n#### Integrate RecoilizeDebugger as a React component within the recoil root:\n\n```js\nimport RecoilizeDebugger from 'recoilize';\nimport RecoilRoot from 'recoil';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n#### Please note, Recoilize assumes that the HTML element used to inject your React application has an ID of 'root'. If it does not the HTML element must be passed in as an attribute called 'root' to the RecoilizeDebugger component\n\n#### Example:\n\n```js\nimport RecoilizeDebugger from 'recoilize';\nimport RecoilRoot from 'recoil';\n\n//If your app injects on an element with ID of 'app'\nconst app = document.getElementById('app');\n\nReactDOM.render(\n \n \n \n ,\n app,\n);\n```\n\n### In order to integrate Next.js applications with RecoilizeDebugger, follow the example below. \n\n```js\n//If your application uses Next.js modify the _app.js as follows\nimport dynamic from 'next/dynamic';\nimport { useEffect, useState } from 'react';\nimport { RecoilRoot } from 'recoil';\n\nfunction MyApp({ Component, pageProps }) {\n\n const [root, setRoot] = useState(null)\n const RecoilizeDebugger = dynamic(\n\t() => {\n\t return import('recoilize');\n\t},\n\t{ ssr: false}\n );\n\n useEffect(() => {\n\n if (typeof window.document !== 'undefined') {\n setRoot(document.getElementById('__next'));\n }\n }, [root]);\n \n return (\n <>\n \n \n \n \n \n );\n}\n\n\nexport default MyApp;\n\n```\n\n#### Open your application on the Chrome Browser and start debugging with Recoilize!\n\n##### (Only supported with React applications using Recoil as state management)\n\n
New Features for Version 2.0.1
\n\n
Support for Recoil 0.1.3
\n
Recoilize now supports the most recent update to the Recoil library.
\n\n
Ease of Use
\n
Recoilize nolonger requires atoms and selectors or the root HTML element to be passed into the RecoilizeDebugger React component. Simply import RecoilizeDubugger and integrate it within your app's RecoilRoot component.
\n\n
Support for Concurrent Mode
\n
Additonal functionality has been added for apps that utilize React's Suspense component. If a Suspense component was used to suspend component renderings those components will display with a red border in the component graph. This indicates that a component was suspended during the render of the selected snapshot.
\n\n
Performance Metrics
\n
A new tab, 'Metrics', has been incorperated into the dev tool. In this tab the user will find two graphs which display component render times.\n\nThe flame graph displays the time a component took to render itself, and all of its child components. The bar graph displays the individual render times of each component.
\n\n
Features
\n
Time Travel
\n
As one of the key features of Recoilize, the tool enables users to jump to any previous snapshots. Pressing the jump button next to each of the snapshots will change the DOM by setting the state to that snapshot.
\n\n
Visualizations
\n
Users are able to view visualizations for their application's state by clicking individual snapshots. Recoilize provides component trees and graphs, as well as the state trees in JSON format.
\n\n
Throttle
\n
In the settings tab, users are able to set throttle (in milliseconds) for large scale applications or any applications that changes state rapidly. The default is set at 70ms.
\n\n
State Persistence
\n
Recoilize allows the users to persist their application's state through a refresh or reload. At this time, the user is able to view the previous states in the dev tool, but cannot time travel to the states before refresh.
\n\n
Additional Features
\n
component graph hover to view atoms and selectors
\n
legend to see relationship between component graph and state
\n
Toggle to view raw component graph
\n
filter atom/selector network relationship
\n
filter snapshots by atom/selector keys
\n\n
We will continue updating Recoilize alongside Recoil's updates!
"
},
{
"path": "package/formatFiberNodes.js",
"content": "// node parameter should be root of the fiber node tree, can be grapped with startNode from below\n// const startNode = document.getElementById('root')._reactRootContainer._internalRoot.current;\n\nconst formatFiberNodes = node => {\n const formattedNode = {\n // this function grabs a 'name' based on the tag of the node\n name: assignName(node),\n tag: node.tag,\n children: [],\n recoilNodes: createAtomsSelectorArray(node),\n actualDuration: node.actualDuration,\n treeBaseDuration: node.treeBaseDuration,\n wasSuspended: node.return && node.return.tag === 13 ? true : false,\n };\n\n // loop through and recursively call all nodes to format their 'sibling' and 'child' properties to our desired tree shape\n let currentNode = node.child;\n while (currentNode) {\n formattedNode.children.push(formatFiberNodes(currentNode));\n currentNode = currentNode.sibling;\n }\n\n return formattedNode;\n};\n\nconst createAtomsSelectorArray = node => {\n // initialize empty array for all atoms and selectors. Elements will be all atom and selector names, as strings\n const recoilNodes = [];\n\n //start the pointer at node.memoizedState. All nodes should have this key.\n let currentNode = node.memoizedState;\n\n // Traverse through the memoizedStates and look for the deps key which holds selectors or state.\n while (currentNode) {\n // if the memoizedState has a deps key, and that deps key is an array\n // then the first value of that array will be an atom or selector\n if (\n typeof(currentNode) === 'object' &&\n currentNode.hasOwnProperty('memoizedState') &&\n typeof currentNode.memoizedState === 'object' &&\n currentNode.memoizedState !== null &&\n !Array.isArray(currentNode.memoizedState) &&\n currentNode.memoizedState.hasOwnProperty('deps')\n ) {\n if (\n Array.isArray(currentNode.memoizedState.deps) &&\n typeof currentNode.memoizedState.deps[0] === 'object' &&\n currentNode.memoizedState.deps[0] !== null\n ) {\n // if recoilNodes (arr) includes the current atom or selector\n if (!recoilNodes.includes(currentNode.memoizedState.deps[0].key)) {\n // otherwise push atom/selector to recoilNodes\n recoilNodes.push(currentNode.memoizedState.deps[0].key);\n }\n }\n }\n // move onto next node\n currentNode = currentNode.next;\n }\n // return atom and selectors array\n return recoilNodes;\n};\n\n// keep an eye on this section as we test bigger and bigger applications SEAN\nconst assignName = node => {\n // Returns symbol key if $$typeof is defined. Some components, such as context providers, will have this value.\n if (node.type && node.type.$$typeof) return Symbol.keyFor(node.type.$$typeof);\n // Return suspense if tag is equal to 13, which is associated with Suspense components.\n if (node.tag === 13) return 'Suspense';\n // Find name of a class component\n if (node.type && node.type.name) return node.type.name;\n // Tag 5 === HostComponent\n if (node.tag === 5) return `${node.type}`;\n // Tag 3 === HostRoot\n if (node.tag === 3) return 'HR';\n // Tag 6 === HostText\n if (node.tag === 6) return node.memoizedProps;\n // Tag 7 === Fragment\n if (node.tag === 7) return 'Fragment';\n};\n\nmodule.exports = { formatFiberNodes };\n\n// if testing this function on the browser, use line below to log the formatted tree in the console\n//let formattedFiberNodes = formatFiberNodes(document.getElementById('root')._reactRootContainer._internalRoot.current)\n"
},
{
"path": "package/formatFiberNodes.ts",
"content": "// node parameter should be root of the fiber node tree, can be grapped with startNode from below\n// const startNode = document.getElementById('root')._reactRootContainer._internalRoot.current;\n\ntype node = {\n tag: number;\n key: any;\n elementType: string;\n child: any;\n sibling: any;\n actualDuration: number;\n treeBaseDuration: number;\n return: any;\n};\n\ntype formattedNode = {\n name: string;\n tag: number;\n children: any[];\n recoilNodes: any[];\n // adding in render time for fiber node\n actualDuration: number;\n treeBaseDuration: number;\n wasSuspended: boolean;\n};\n\nconst formatFiberNodes = (node: node) => {\n const formattedNode: formattedNode = {\n actualDuration: node.actualDuration,\n treeBaseDuration: node.treeBaseDuration,\n // this function grabs a 'name' based on the tag of the node\n name: assignName(node),\n tag: node.tag,\n children: [],\n recoilNodes: createAtomsSelectorArray(node),\n wasSuspended: node.return && node.return.tag === 13 ? true : false,\n };\n\n // loop through and recursively call all nodes to format their 'sibling' and 'child' properties to our desired tree shape\n let currentNode = node.child;\n while (currentNode) {\n formattedNode.children.push(formatFiberNodes(currentNode));\n currentNode = currentNode.sibling;\n }\n\n return formattedNode;\n};\n\nconst createAtomsSelectorArray = (node: any) => {\n // initialize empty array for all atoms and selectors. Elements will be all atom and selector names, as strings\n const recoilNodes = [];\n\n //start the pointer at node.memoizedState. All nodes should have this key.\n let currentNode = node.memoizedState;\n\n // Traverse through the memoizedStates and look for the deps key which holds selectors or state.\n\n while (currentNode) {\n // if the memoizedState has a deps key, and that deps key is an array of length 2 then the first value of that array will be an atom or selector\n if (\n currentNode.deps &&\n Array.isArray(currentNode.deps) &&\n currentNode.deps.length === 2\n ) {\n // if the atom/selector already exist in the recoilNodes array then break from this while loop. At this point you are traversing through previous atom/selector deps.\n if (recoilNodes.includes(currentNode.deps[0].key)) break;\n recoilNodes.push(currentNode.deps[0].key);\n\n // if an atom/selector was successfully pushed into the recoilNodes array then the pointer should now point to the next key, which will have its own deps key if there is another atom/selector\n currentNode = currentNode.next;\n } else {\n // This is the case where there is no atom/selector in the memoizedState. Look into the memoized state of the next key. If that doesn't exist then break from the while loop because there are no atoms/selectors at this point.\n if (!currentNode.next) break;\n if (!currentNode.next.memoizedState) break;\n currentNode = currentNode.next.memoizedState;\n }\n }\n return recoilNodes;\n};\n\n// keep an eye on this section as we test bigger and bigger applications\nconst assignName = (node: any) => {\n // Returns symbol key if $$typeof is defined. Some components, such as context providers, will have this value.\n if (node.type && node.type.$$typeof) return Symbol.keyFor(node.type.$$typeof);\n // Return suspense if tag is equal to 13, which is associated with Suspense components.\n if (node.tag === 13) return 'Suspense';\n // Find name of a class component\n if (node.type && node.type.name) return node.type.name;\n // Tag 5 === HostComponent\n if (node.tag === 5) return `${node.type}`;\n // Tag 3 === HostRoot\n if (node.tag === 3) return 'HR';\n // Tag 3 === HostText\n if (node.tag === 6) {\n return node.memoizedProps;\n }\n if (node.tag === 7) return 'Fragment';\n};\n\nexport default formatFiberNodes;\n\n// if testing this function on the browser, use line below to log the formatted tree in the console\n//let formattedFiberNodes = formatFiberNodes(document.getElementById('root')._reactRootContainer._internalRoot.current)\n"
},
{
"path": "package/index.js",
"content": "import React, {useState, useEffect} from 'react';\nimport {\n useRecoilTransactionObserver_UNSTABLE,\n useRecoilSnapshot,\n useGotoRecoilSnapshot,\n useRecoilState,\n useGetRecoilValueInfo_UNSTABLE\n} from 'recoil';\nimport {formatFiberNodes} from './formatFiberNodes';\n\n// grabs isPersistedState from sessionStorage\nlet isPersistedState = sessionStorage.getItem('isPersistedState');\n\n// isRestored state disables snapshots from being recorded\n// when we jump backwards\nlet isRestoredState = false;\n\n// set default throttle to 70, throttle timer changes with every snapshot\nlet throttleTimer = 0;\nlet throttleLimit = 70;\n\n// assign the value of selectorsObject in formatRecoilizeSelectors function\n// will contain the selectors from a user application\nlet selectorsObject;\n\nexport default function RecoilizeDebugger(props) {\n\n // We should ask for Array of atoms and selectors.\n // Captures all atoms that were defined to get the initial state\n\n // Define a recoilizeRoot variable which will be assigned based on whether a root is passed in as a prop\n let recoilizeRoot;\n\n // Check if a root was passed to props.\n if (props.root) {\n const {root} = props;\n recoilizeRoot = root;\n } else {\n recoilizeRoot = document.getElementById('root');\n }\n\n const snapshot = useRecoilSnapshot();\n\n // getNodes_UNSTABLE will return an iterable that contains atom and selector objects.\n const nodes = [...snapshot.getNodes_UNSTABLE()];\n // Local state of all previous snapshots to use for time traveling when requested by dev tools.\n const [snapshots, setSnapshots] = useState([snapshot]);\n // const [isRestoredState, setRestoredState] = useState(false);\n const gotoSnapshot = useGotoRecoilSnapshot();\n\n const filteredSnapshot = {};\n\n /*\n A nodeDeps object is constructed using getDeps_UNSTABLE. \n This object will then be used to construct a nodeSubscriptions object. \n After continuous testing, getSubscriptions_UNSTABLE was deemed too unreliable. \n */\n\n const nodeDeps = {};\n const nodeSubscriptions = {};\n\n nodes.forEach(node => {\n const getDeps = [...snapshot.getInfo_UNSTABLE(node).deps];\n nodeDeps[node.key] = getDeps.map(dep => dep.key);\n });\n\n for (let key in nodeDeps) {\n nodeDeps[key].forEach(node => {\n if (nodeSubscriptions[node]) {\n nodeSubscriptions[node].push(key);\n } else {\n nodeSubscriptions[node] = [key];\n }\n });\n }\n\n // Traverse all atoms and selector state nodes and get value\n nodes.forEach((node, index) => {\n const type = node.__proto__.constructor.name;\n const contents = snapshot.getLoadable(node).contents;\n // Construct node data structure for dev tool to consume\n filteredSnapshot[node.key] = {\n type,\n contents,\n nodeDeps: nodeDeps[node.key],\n nodeToNodeSubscriptions: nodeSubscriptions[node.key]\n ? nodeSubscriptions[node.key]\n : [],\n };\n });\n \n // React lifecycle hook on re-render\n useEffect(() => {\n // Window listener for messages from dev tool UI & background.js\n window.addEventListener('message', onMessageReceived);\n\n if (!isRestoredState) {\n const devToolData = createDevToolDataObject(filteredSnapshot);\n // Post message to content script on every re-render of the developers application only if content script has started\n sendWindowMessage('recordSnapshot', devToolData);\n } else {\n isRestoredState = false;\n }\n\n // Clears the window event listener.\n return () => window.removeEventListener('message', onMessageReceived);\n });\n\n // Listener callback for messages sent to windowf\n const onMessageReceived = msg => {\n // Add other actions from dev tool here\n switch (msg.data.action) {\n // Checks to see if content script has started before sending initial snapshot\n case 'contentScriptStarted':\n if (isPersistedState === 'false' || isPersistedState === null) {\n const initialFilteredSnapshot = formatAtomSelectorRelationship(\n filteredSnapshot,\n );\n // once application renders, grab the array of atoms and array of selectors\n const appsKnownAtomsArray = [...snapshot._store.getState().knownAtoms]\n // console.log('Store State.getState: Atoms', appsKnownAtomsArray);\n const appsKnownSelectorsArray = [...snapshot._store.getState().knownSelectors]\n // console.log('Store State.getState: Selectors', appsKnownSelectorsArray);\n \n const atomsAndSelectorsMsg = {\n atoms: appsKnownAtomsArray,\n selectors: appsKnownSelectorsArray,\n $selectors: selectorsObject // the selectors object that contain key and set / get methods as strings\n }\n\n //creating a indexDiff variable\n //only created on initial creation of devToolData\n //determines difference in length of backend snapshots array and frontend snapshotHistoryLength to avoid off by one error\n const indexDiff = snapshots.length - 1;\n\n const devToolData = createDevToolDataObject(\n initialFilteredSnapshot,\n indexDiff,\n atomsAndSelectorsMsg,\n );\n sendWindowMessage('moduleInitialized', devToolData);\n } else {\n setProperIndexForPersistedState();\n sendWindowMessage('persistSnapshots', null);\n }\n \n break;\n // Listens for a request from dev tool to time travel to previous state of the app.\n case 'snapshotTimeTravel':\n timeTravelToSnapshot(msg);\n break;\n case 'persistState':\n switchPersistMode();\n break;\n // Implementing the throttle change\n case 'throttleEdit':\n throttleLimit = parseInt(msg.data.payload.value);\n break;\n default:\n break;\n }\n };\n\n // assigns or switches isPersistedState in sessionStorage\n const switchPersistMode = () => {\n if (isPersistedState === 'false' || isPersistedState === null) {\n // switch isPersistedState in sessionStorage to true\n sessionStorage.setItem('isPersistedState', true);\n\n // stores the length of current list of snapshots in sessionStorage\n sessionStorage.setItem('persistedSnapshots', snapshots.length);\n } else {\n // switch isPersistedState in sessionStorage to false\n sessionStorage.setItem('isPersistedState', false);\n }\n };\n\n // function retreives length and fills snapshot array\n const setProperIndexForPersistedState = () => {\n const retreived = sessionStorage.getItem('persistedSnapshots');\n const snapshotsArray = new Array(Number(retreived) + 1).fill({});\n setSnapshots(snapshotsArray);\n };\n\n // Sends window an action and payload message.\n const sendWindowMessage = (action, payload) => {\n window.postMessage(\n JSON.parse(JSON.stringify({\n action,\n payload,\n })),\n '*',\n );\n };\n\n const createDevToolDataObject = (filteredSnapshot, diff, atomsAndSelectors) => {\n if (diff === undefined) {\n return {\n filteredSnapshot: filteredSnapshot,\n componentAtomTree: formatFiberNodes(\n recoilizeRoot._reactRootContainer._internalRoot.current,\n ),\n atomsAndSelectors,\n };\n } else {\n return {\n filteredSnapshot: filteredSnapshot,\n componentAtomTree: formatFiberNodes(\n recoilizeRoot._reactRootContainer._internalRoot.current,\n ),\n indexDiff: diff,\n atomsAndSelectors,\n };\n }\n };\n\n const formatAtomSelectorRelationship = filteredSnapshot => {\n if (\n window.$recoilDebugStates &&\n Array.isArray(window.$recoilDebugStates) &&\n window.$recoilDebugStates.length\n ) {\n let snapObj =\n window.$recoilDebugStates[window.$recoilDebugStates.length - 1];\n if (snapObj.hasOwnProperty('nodeDeps')) {\n for (let [key, value] of snapObj.nodeDeps) {\n filteredSnapshot[key].nodeDeps = Array.from(value);\n }\n }\n if (snapObj.hasOwnProperty('nodeToNodeSubscriptions')) {\n for (let [key, value] of snapObj.nodeToNodeSubscriptions) {\n filteredSnapshot[key].nodeToNodeSubscriptions = Array.from(value);\n }\n }\n }\n return filteredSnapshot;\n };\n\n // Will add hover effect over highlighted component\n // Takes an argument of msg.data which contains name and payload\n const activateHover = payload => {\n let name = payload.name;\n };\n\n // FOR TIME TRAVEL: time travels to a given snapshot, re renders application.\n const timeTravelToSnapshot = async msg => {\n\n isRestoredState = true;\n await gotoSnapshot(snapshots[msg.data.payload.snapshotIndex]);\n };\n\n // FOR TIME TRAVEL: Recoil hook to fire a callback on every atom/selector change -- research Throttle\n useRecoilTransactionObserver_UNSTABLE(({snapshot}) => {\n const now = new Date().getTime();\n if (now - throttleTimer < throttleLimit) {\n isRestoredState = true;\n } else {\n throttleTimer = now;\n }\n\n if (!isRestoredState) {\n setSnapshots([...snapshots, snapshot]);\n }\n });\n\n return null;\n}\n\n// function that receives objects to be passed into selector constructor function to post a message to the window\n// cannot send an object with a property that contains a function to the window - need to stringify the set and get methods\nexport function formatRecoilizeSelectors(...selectors){\n // create object to be sent via window message from target recoil application\n selectorsObject = {};\n // iterate through our array of objects\n selectors.forEach(selector => {\n // check if the current selector object contains a set method, if so, reassign it to a stringified version\n if (selector.hasOwnProperty('set')){\n selector.set = selector.set.toString();\n }\n // check if the current selector object contains a get method, if so, reassign it to a stringified version\n if (selector.hasOwnProperty('get')){\n selector.get = selector.get.toString();\n }\n // store the selector in the payload object - providing its property name as the 'key' property of the current selector object\n // providing the object the property name of selector key will give easy searchability in GUI application for selector dropdown\n selectorsObject[selector.key] = selector;\n });\n\n}\n\n\n"
},
{
"path": "package/index.ts",
"content": "import {useState, useEffect} from 'react';\nimport {\n useRecoilTransactionObserver_UNSTABLE,\n useRecoilSnapshot,\n useGotoRecoilSnapshot,\n} from 'recoil';\nimport formatFiberNodes from './formatFiberNodes';\n\n// isRestored state disables snapshots from being recorded\nlet isRestoredState = false;\n\nexport default function RecoilizeDebugger(props: any) {\n // We should ask for Array of atoms and selectors.\n // Captures all atoms that were defined to get the initial state\n let nodes = null;\n\n if (typeof props.nodes === 'object' && !Array.isArray(props.nodes)) {\n nodes = Object.values(props.nodes);\n } else if (Array.isArray(props.nodes)) {\n nodes = props.nodes;\n }\n\n const {root} = props;\n\n const snapshot: any = useRecoilSnapshot();\n\n // Local state of all previous snapshots to use for time traveling when requested by dev tools.\n const [snapshots, setSnapshots] = useState([snapshot]);\n // const [isRestoredState, setRestoredState] = useState(false);\n const gotoSnapshot = useGotoRecoilSnapshot();\n\n const filteredSnapshot: any = {};\n const currentTree = snapshot._store.getState().currentTree;\n\n // Traverse all atoms and selector state nodes and get value\n nodes.forEach((node: any) => {\n const type = node.__proto__.constructor.name;\n const contents = snapshot.getLoadable(node).contents;\n const nodeDeps = currentTree.nodeDeps.get(node.key);\n const nodeToNodeSubscriptions = currentTree.nodeToNodeSubscriptions.get(\n node.key,\n );\n\n // Construct node data structure for dev tool to consume\n filteredSnapshot[node.key] = {\n type,\n contents,\n nodeDeps: nodeDeps ? Array.from(nodeDeps) : [],\n nodeToNodeSubscriptions: nodeToNodeSubscriptions\n ? Array.from(nodeToNodeSubscriptions)\n : [],\n };\n });\n\n // React lifecycle hook on re-render\n useEffect(() => {\n if (!isRestoredState) {\n setTimeout(() => {\n const devToolData = createDevToolDataObject(filteredSnapshot);\n\n // Post message to content script on every re-render of the developers application only if content script has started\n sendWindowMessage('recordSnapshot', devToolData);\n }, 0);\n } else {\n isRestoredState = false;\n }\n\n // Window listener for messages from dev tool UI & background.js\n window.addEventListener('message', onMessageReceived);\n\n // Clears the window event listener.\n return () => window.removeEventListener('message', onMessageReceived);\n });\n\n // Listener callback for messages sent to window\n const onMessageReceived = (msg: any) => {\n // Add other actions from dev tool here\n switch (msg.data.action) {\n // Checks to see if content script has started before sending initial snapshot\n case 'contentScriptStarted':\n const initialFilteredSnapshot = formatAtomSelectorRelationship(\n filteredSnapshot,\n );\n const devToolData = createDevToolDataObject(initialFilteredSnapshot);\n sendWindowMessage('moduleInitialized', devToolData);\n break;\n // Listens for a request from dev tool to time travel to previous state of the app.\n case 'snapshotTimeTravel':\n timeTravelToSnapshot(msg);\n break;\n default:\n break;\n }\n };\n\n // Sends window an action and payload message.\n const sendWindowMessage = (action: any, payload: any) => {\n window.postMessage(\n {\n action,\n payload,\n },\n '*',\n );\n };\n\n const createDevToolDataObject = (filteredSnapshot: any) => {\n return {\n filteredSnapshot: filteredSnapshot,\n componentAtomTree: formatFiberNodes(\n root._reactRootContainer._internalRoot.current,\n ),\n };\n };\n\n const formatAtomSelectorRelationship = (filteredSnapshot: any) => {\n const windowAny: any = window;\n\n if (\n windowAny.$recoilDebugStates &&\n Array.isArray(windowAny.$recoilDebugStates) &&\n windowAny.$recoilDebugStates.length\n ) {\n let snapObj =\n windowAny.$recoilDebugStates[windowAny.$recoilDebugStates.length - 1];\n if (snapObj.hasOwnProperty('nodeDeps')) {\n for (let [key, value] of snapObj.nodeDeps) {\n filteredSnapshot[key].nodeDeps = Array.from(value);\n }\n }\n if (snapObj.hasOwnProperty('nodeToNodeSubscriptions')) {\n for (let [key, value] of snapObj.nodeToNodeSubscriptions) {\n filteredSnapshot[key].nodeToNodeSubscriptions = Array.from(value);\n }\n }\n }\n return filteredSnapshot;\n };\n\n // FOR TIME TRAVEL: time travels to a given snapshot, re renders application.\n const timeTravelToSnapshot = async (msg: any) => {\n isRestoredState = true;\n await gotoSnapshot(snapshots[msg.data.payload.snapshotIndex]);\n };\n\n // FOR TIME TRAVEL: Recoil hook to fire a callback on every snapshot change\n useRecoilTransactionObserver_UNSTABLE(({snapshot}) => {\n if (!isRestoredState) {\n setSnapshots([...snapshots, snapshot]);\n }\n });\n\n return null;\n}\n"
},
{
"path": "package/package.json",
"content": "{\n \"name\": \"recoilize\",\n \"version\": \"1.0.0\",\n \"description\": \"Recoil Dev Tool\",\n \"main\": \"index.js\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/open-source-labs/Recoilize\"\n },\n \"peerDependencies\": {\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"recoil\": \"^0.1.2\"\n },\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"author\": \"Bren Yamaguchi, Saejin Kang, Jonathan Escamilla, Sean Smith, Justin Choo, Anthony Lin, Spenser Schwartz, Steven Nguyen, Henry Taing, Seungho Baek, Taven Shumaker, Aaron Yang, Jesus Vargas, Davide Molino, Janis Hernandez, Jaime Baik, Anthony Magallanes, Edward Shei, Leonard Lew, Joey Ma, Harvey Nguyen, Victor Wang\",\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"typescript\": \"^3.9.6\"\n }\n}\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"recoilize\",\n \"jest\": {\n \"setupFiles\": [\n \"jest-webextension-mock\"\n ]\n },\n \"version\": \"3.0.0\",\n \"description\": \"A Chrome extension that helps debug Recoil applications by memorizing the state of components with every render.\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"build\": \"webpack --mode production\",\n \"dev\": \"webpack --mode development --watch\",\n \"test\": \"jest --verbose\",\n \"lint\": \"eslint '**/*.tsx' '**/*.ts' '**/*.js' --ignore-path .gitignore\"\n },\n \"author\": \"Bren Yamaguchi, Saejin Kang, Jonathan Escamilla, Sean Smith, Justin Choo, Anthony Lin, Spenser Schwartz, Steven Nguyen, Henry Taing, Seungho Baek, Taven Shumaker, Aaron Yang, Jesus Vargas, Davide Molino, Janis Hernandez, Jaime Baik, Anthony Magallanes, Edward Shei, Leonard Lew, Joey Ma, Harvey Nguyen, Victor Wang\",\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"@babel/core\": \"^7.10.3\",\n \"@babel/polyfill\": \"^7.10.4\",\n \"@babel/preset-env\": \"^7.10.3\",\n \"@babel/preset-react\": \"^7.10.1\",\n \"@babel/preset-typescript\": \"^7.10.4\",\n \"@testing-library/jest-dom\": \"^5.11.0\",\n \"@testing-library/react\": \"^10.4.6\",\n \"@types/react\": \"^16.9.41\",\n \"@types/react-dom\": \"^16.9.8\",\n \"babel-eslint\": \"^10.1.0\",\n \"babel-loader\": \"^8.1.0\",\n \"css-loader\": \"^3.6.0\",\n \"enzyme\": \"^3.11.0\",\n \"enzyme-adapter-react-16\": \"^1.15.2\",\n \"eslint\": \"^7.4.0\",\n \"eslint-config-fbjs\": \"^3.1.1\",\n \"eslint-config-prettier\": \"^6.11.0\",\n \"eslint-plugin-babel\": \"^5.3.1\",\n \"eslint-plugin-flowtype\": \"^5.2.0\",\n \"eslint-plugin-jsx-a11y\": \"^6.3.1\",\n \"eslint-plugin-prettier\": \"^3.1.4\",\n \"eslint-plugin-react\": \"^7.20.3\",\n \"jest\": \"^26.1.0\",\n \"jest-webextension-mock\": \"^3.6.1\",\n \"prettier\": \"^2.0.5\",\n \"recoil\": \"^0.7.2\",\n \"style-loader\": \"^2.0.0\",\n \"ts-loader\": \"^7.0.5\",\n \"typescript\": \"^3.9.6\",\n \"webpack\": \"^4.43.0\",\n \"webpack-chrome-extension-reloader\": \"^1.3.0\",\n \"webpack-cli\": \"^3.3.12\"\n },\n \"dependencies\": {\n \"@angular/cli\": \"^10.0.5\",\n \"@angular/core\": \"^10.0.8\",\n \"@popperjs/core\": \"^2.4.4\",\n \"@reduxjs/toolkit\": \"^1.5.0\",\n \"@testing-library/react-hooks\": \"^3.4.1\",\n \"@types/chrome\": \"0.0.117\",\n \"@types/react-html-parser\": \"^2.0.1\",\n \"@types/react-json-tree\": \"^0.6.11\",\n \"@types/react-redux\": \"^7.1.16\",\n \"@vx/group\": \"0.0.196\",\n \"@vx/hierarchy\": \"0.0.196\",\n \"@vx/responsive\": \"0.0.196\",\n \"babel-eslint\": \"^10.1.0\",\n \"codemirror\": \"^5.65.2\",\n \"d3\": \"^5.16.0\",\n \"d3-hierarchy\": \"1.1.9\",\n \"d3-interpolate\": \"1.4.0\",\n \"d3-scale\": \"3.2.1\",\n \"d3-scale-chromatic\": \"1.5.0\",\n \"d3-shape\": \"1.3.7\",\n \"jest-webextension-mock\": \"^3.6.1\",\n \"jsondiffpatch\": \"^0.4.1\",\n \"multiselect-react-dropdown\": \"^1.5.7\",\n \"prop-types\": \"^15.7.2\",\n \"rc-slider\": \"^9.7.5\",\n \"rc-tooltip\": \"^5.1.1\",\n \"react\": \"^16.13.1\",\n \"react-codemirror2\": \"^7.2.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-html-parser\": \"^2.0.2\",\n \"react-json-tree\": \"^0.11.2\",\n \"react-multi-select-component\": \"^3.0.1\",\n \"react-redux\": \"^7.2.3\",\n \"react-router-dom\": \"^5.2.0\",\n \"react-spring\": \"^8.0.27\",\n \"react-testing-library\": \"^8.0.1\",\n \"redux-persist\": \"^6.0.0\",\n \"rxjs\": \"^6.6.2\",\n \"semantic-ui-react\": \"^1.1.1\",\n \"style-loader\": \"^2.0.0\"\n },\n \"engines\": {\n \"node\": \"^10.12.0 || >=12.0.0\"\n }\n}\n"
},
{
"path": "src/README.md",
"content": "# Developer README\n\n## Brief\nThough Recoil.js is still in the experimental state, it has proved its ability and catched a tremendous amount of attentions from experience developers for the past three years. We created Recoilize with one great mission in mind - providing a helpful tool so the developers can make an easy transition to Recoil.js and making the debugging process more effective. Recoilize is an open source product that is maintained and iterated constantly, and we're always welcome developers who are interested in it. Getting on board and understanding the codebase are never easy, so here are some useful tips and information that will help you get started quickly.\n\n## File Structure\nThe scr folder contains Recoilize's source code - frontend and chrome extension.\n\n```\nsrc/\n├── app/ # Frontend code\n│ ├── components/ # React components\n│ ├── Containers/ # More React components\n│ ├── state-management/ # Redux Toolkit Slices\n│ ├── utils/ # Helper Functions \n│ └── index.tsx # Starting point for root App component \n│\n├── types/ \n│ └── index.d.ts #\n│\n├── extension/ # Chrome Extension code\n│ ├── build/ # Destination for bundles and manifest.json (Chrome config file)\n│ │ #\n│ ├── background.js # Chrome Background Script\n│ └── contentScript.ts # Chrome Content Script\n└──\n```\nHere is an in-depth view of the app's components:\n\n\n\n## Diagramming\nIf there's an update in the file structure, we suggest using [excalidraw](https://excalidraw.com/)\n\n## Future Features and Possible Improvements\n- Optimizing Time Travel Algorithm. The Time Travel Algorithm is working perfectly. However, we believe that it can be better by implementing a better algorithm (or different approaches). Please note that there's no right or wrong approaches, and everyone is welcome to try new ideas.\n- UI/UX improvement. The UI/UX aspect definitely has room for improvement. Please feel free to play around with the app to get some ideas. For example, look at the component graph, atom network, graphs (flame, ranked, comparison).\n- Testing is an important aspect, and we believe in TDD (Test Driven Development). However, due to time constraint and the limitation of resources, Recoilize is missing the testing part. Since testing has so much potential to improve, we strongly recommend developers who love testing get started as soon as you get onboard.\n- Documentations - Documentations often get neglected since developers usually focus on writing code to improve features. However, at Recoilize, we believe that documenting is one of the most important tasks. Why? Because it's helpful not only for you, your teammates but it can also be valuable for future developers who interested in Recoilize. So if you love Recoilize, take good care of it by writing good documentations.\n- Containerization - Have you ever wondered why the app that you made ran perfectly on your computer but it couldn't run on other's computers. That is a common problem that software engineers often encounter. We can solve this by containerize our app, and `Docker` is a good candidate for this task.\n"
},
{
"path": "src/app/Containers/ButtonsContainer.tsx",
"content": "import React from 'react';\n\nconst ButtonsContainer = () => {\n const howToUseHandler = () => {\n window.open('https://github.com/open-source-labs/Recoilize', '_blank');\n };\n return (\n
\n {\n howToUseHandler();\n }}>\n How To Use\n \n
\n );\n};\n\nexport default ButtonsContainer;\n"
},
{
"path": "src/app/Containers/MainContainer.tsx",
"content": "import React from 'react';\nimport SnapshotsContainer from './SnapshotContainer';\nimport VisualContainer from './VisualContainer';\nimport TravelContainer from './TravelContainer';\n\nconst MainContainer: React.FC = () => {\n return (\n
\n \n \n \n
\n );\n};\n\nexport default MainContainer;\n"
},
{
"path": "src/app/Containers/SnapshotContainer.tsx",
"content": "import React, {useEffect, useState, useRef} from 'react';\nimport {selectFilterState} from '../state-management/slices/FilterSlice';\nimport {useAppSelector, useAppDispatch} from '../state-management/hooks';\nimport {setRenderIndex} from '../state-management/slices/SnapshotSlice';\n\nconst SnapshotsContainer: React.FC = () => {\n const dispatch = useAppDispatch();\n\n const snapshotHistory = useAppSelector(\n state => state.snapshot.snapshotHistory,\n );\n const selected = useAppSelector(state => state.selected.selectedData);\n\n const renderIndex = useAppSelector(state => state.snapshot.renderIndex);\n const filterData = useAppSelector(selectFilterState);\n const snapshotEndRef = useRef(null);\n\n let snapshotHistoryLength = snapshotHistory.length;\n\n // useEffect to scroll bottom whenever snapshot history changes\n useEffect(() => {\n scrollToBottom();\n }, [snapshotHistoryLength]);\n\n // using scrollInToView makes a smoother scroll\n const scrollToBottom = (): void => {\n snapshotEndRef.current.scrollIntoView({behavior: 'smooth'});\n };\n\n const snapshotDivs: JSX.Element[] = [];\n // iterate the same length of our snapshotHistory\n for (let i = 0; i < snapshotHistoryLength; i++) {\n // filterFunc will return false if there is no change to state\n const filterFunc = (): boolean => {\n // don't use the counter for this, not reliable\n if (i === 0) {\n return true;\n }\n // checks if the filteredSnapshot object at index i has a key (atom or selector) found in the selected array. This would indicate that there was a change to that state/selector because filter is an array of objects containing differences between snapshots.\n if (filterData[i]) {\n for (let key in filterData[i].filteredSnapshot) {\n for (let j = 0; j < selected.length; j++) {\n if (key === selected[j].name) {\n return true;\n }\n }\n }\n }\n return false;\n };\n const x: boolean = filterFunc();\n\n if (x === false) {\n continue;\n }\n\n // renderTime is set equal to the actualDuration. If i is zero then we are obtaining actualDuration from the very first snapshot in snapshotHistory. This is to avoid having undefined filter elements since there will be no difference between snapshot at the first instance.\n let renderTime: number =\n snapshotHistory[i].componentAtomTree.treeBaseDuration;\n // if (i === 0) {\n // renderTime = snapshotHistory[0].componentAtomTree.treeBaseDuration;\n // }\n // //Checks to see if the actualDuration within filter is an array. If it is an array then the 2nd value in the array is the new actualDuration.\n // else if (Array.isArray(filterData[i].componentAtomTree.actualDuration)) {\n // renderTime = filterData[i].componentAtomTree.treeBaseDuration[1];\n // } else {\n // renderTime = filterData[i].componentAtomTree.treeBaseDuration;\n // }\n\n // Push a div container to snapshotDivs array only if there was a change to state.\n // The div container will contain renderTimes evaluated above.\n snapshotDivs.push(\n {\n dispatch(setRenderIndex(i));\n }}>\n {/*
{i}
*/}\n
{`${Math.round(renderTime * 100) / 100}ms`}
\n {\n timeTravelFunc(i);\n }}>\n Jump\n \n ,\n );\n }\n\n //indexDiff is used to ensure the index of filter matches the index of the snapshots array in the backend\n let indexDiff: number = 0;\n if (filterData[0] && filterData[0].indexDiff) {\n indexDiff = filterData[0].indexDiff;\n }\n\n // functionality to postMessage the selected snapshot index to background.js\n const timeTravelFunc = (index: number) => {\n // variable to store/reference connection\n const backgroundConnection = chrome.runtime.connect();\n //const test = chrome.extension.getBackgroundPage();\n // post the message with index in payload to the connection\n backgroundConnection.postMessage({\n action: 'snapshotTimeTravel',\n tabId: chrome.devtools.inspectedWindow.tabId,\n payload: {\n snapshotIndex: index + indexDiff,\n },\n });\n };\n\n function prevClr() {\n const snapshotListArr = document.querySelectorAll('.individualSnapshot');\n for (let i = 0; i < snapshotListArr.length; i++) {\n let index = parseInt(snapshotListArr[i].id.match(/\\d+/g)[0]);\n\n if (index < renderIndex) {\n snapshotListArr[i].parentNode.removeChild(snapshotListArr[i]);\n } else break;\n }\n }\n\n function fwrdClr() {\n const snapshotListArr = document.querySelectorAll('.individualSnapshot');\n\n for (let i = snapshotListArr.length - 1; i >= 0; i--) {\n let index = parseInt(snapshotListArr[i].id.match(/\\d+/g)[0]);\n\n if (index > renderIndex) {\n snapshotListArr[i].parentNode.removeChild(snapshotListArr[i]);\n } else break;\n }\n }\n\n // create a function to store current data to local storage\n const toLocalStorage = (data: any) => {\n for (let i = 0; i < data.length; i++) {\n console.log('trigger toLocalStorage');\n const jsonData = JSON.stringify(data[i]);\n localStorage.setItem(`${i}`, jsonData);\n }\n };\n\n return (\n
\n
Clear Snapshots
\n
\n \n \n
\n \n Snapshots\n \n {\n toLocalStorage(snapshotHistory);\n }}>\n Save Series\n \n
\n
{snapshotDivs}
\n \n
\n
\n );\n};\n\nexport default SnapshotsContainer;\n"
},
{
"path": "src/app/Containers/TravelContainer.tsx",
"content": "import React from 'react';\nimport MainSlider from '../components/Slider/MainSlider';\nimport ButtonsContainer from './ButtonsContainer';\n\nconst TravelContainer: React.FC = () => {\n return (\n
\n \n \n
\n );\n};\n\nexport default TravelContainer;\n"
},
{
"path": "src/app/Containers/VisualContainer.tsx",
"content": "import React, {useState} from 'react';\nimport {RecoilRoot} from 'recoil';\nimport Diff from '../components/StateDiff/Diff';\nimport NavBar from '../components/NavBar/NavBar';\nimport Metrics from '../components/Metrics/MetricsContainer';\nimport Tree from '../components/StateTree/Tree';\nimport Network from '../components/AtomNetwork/AtomNetwork';\nimport AtomComponentVisualContainer from '../components/ComponentGraph/AtomComponentContainer';\nimport Settings from '../components/Settings/SettingsContainer';\nimport Testing from '../components/Testing/TestingContainer';\n\ntype navTypes = {\n [tabName: string]: JSX.Element;\n};\n\n// Renders Navbar and conditionally renders Diff, Visualizer, and Tree\nconst VisualContainer: React.FC = () => {\n // object containing all conditional renders based on navBar\n const nav: navTypes = {\n // compare the diff of filteredPrevSnap and filteredCurSnap\n 'State Diff': ,\n // render JSON tree of snapshot\n 'State Tree': ,\n // tree visualizer of components showing atom/selector relationships\n 'Component Graph': ,\n\n // atom and selector subscription relationship\n 'Atom Network': ,\n\n // quotes not needed where name = component variable\n // individual snapshot visualizer\n Metrics: ,\n\n // settings tab\n Settings: ,\n // add a testing tab\n Testing: (\n \n \n \n ),\n };\n // array of all nav obj keys\n const tabsList: string[] = Object.keys(nav);\n // useState hook to update which component to render in the VisualContainer\n const [tab, setTab] = useState('State Diff');\n // conditionally render based on value of nav[tab]\n return (\n
\n \n {nav[tab]}\n
\n );\n};\n\nexport default VisualContainer;\n"
},
{
"path": "src/app/Containers/__tests__/MainContainer.unit.test.js",
"content": "import React, {useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport {getQueriesForElement, getByText} from '@testing-library/dom';\n\nimport {render, fireEvent} from '@testing-library/react';\n\nimport MainContainer from '../MainContainer';\n\nit('Main Container Renders', () => {\n window.HTMLElement.prototype.scrollIntoView = jest.fn();\n const {getByPlaceholderText, debug} = render(\n ,\n );\n});\n"
},
{
"path": "src/app/Containers/__tests__/SnapshotContainer.unit.test.js",
"content": "import React, {useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport {getQueriesForElement, getByText} from '@testing-library/dom';\n\nimport {render, fireEvent} from '@testing-library/react';\n\nimport SnapshotContainer from '../SnapshotContainer';\n\nit('Snapshot Container Renders', () => {\n window.HTMLElement.prototype.scrollIntoView = jest.fn();\n const {getByPlaceholderText, debug} = render(\n ,\n );\n});\n"
},
{
"path": "src/app/Containers/__tests__/VisualContainer.unit.test.js",
"content": "import React, {useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport {getQueriesForElement, getByText} from '@testing-library/dom';\n\nimport {render, fireEvent} from '@testing-library/react';\n\nimport VisualContainer from '../VisualContainer';\n\nit('Visual Container Renders', () => {\n window.HTMLElement.prototype.scrollIntoView = jest.fn();\n const {getByPlaceholderText, debug} = render(\n ,\n );\n});\n"
},
{
"path": "src/app/components/App.tsx",
"content": "import React, {useEffect} from 'react';\nimport MainContainer from '../Containers/MainContainer';\nimport {selectedTypes} from '../../types';\n// importing the diff to find difference\nimport {diff} from 'jsondiffpatch';\nimport {useAppSelector, useAppDispatch} from '../state-management/hooks';\nimport {\n setSnapshotHistory,\n setRenderIndex,\n setCleanComponentAtomTree,\n} from '../state-management/slices/SnapshotSlice';\nimport {\n addSelected,\n setSelected,\n} from '../state-management/slices/SelectedSlice';\nimport {\n updateFilter,\n selectFilterState,\n} from '../state-management/slices/FilterSlice';\nimport {setAtomsAndSelectors} from '../state-management/slices/AtomsAndSelectorsSlice';\n\nconst LOGO_URL = './assets/Recoilize-v2.png';\nconst App: React.FC = () => {\n const dispatch = useAppDispatch();\n\n // useState hook to update the snapshotHistory array\n // array of snapshots\n const snapshotHistory = useAppSelector(\n state => state.snapshot.snapshotHistory,\n );\n const renderIndex = useAppSelector(state => state.snapshot.renderIndex);\n const selected = useAppSelector(state => state.selected.selectedData);\n // selected will be an array with objects containing filteredSnapshot key names (the atoms and selectors)\n // ex: [{name: 'Atom1'}, {name: 'Atom2'}, {name: 'Selector1'}, ...]\n // const [selected, setSelected] = useState([]);\n\n // todo: Create algo that will clean up the big setSnapshothistory object, now and before\n // ! Setting up the selected\n const filterData = useAppSelector(selectFilterState);\n\n // Whenever snapshotHistory changes, useEffect will run, and selected will be updated\n useEffect(() => {\n // whenever snapshotHistory changes, update renderIndex\n dispatch(setRenderIndex(snapshotHistory.length - 1));\n\n let last;\n if (snapshotHistory[renderIndex]) {\n last = snapshotHistory[renderIndex].filteredSnapshot;\n }\n // we must compare with the original\n for (let key in last) {\n if (!snapshotHistory[0].filteredSnapshot[key]) {\n // only push if the name doesn't already exist\n const check = () => {\n for (let i = 0; i < selected.length; i++) {\n // break if it exists\n if (selected[i].name === key) {\n return true;\n }\n }\n // does not exist\n return false;\n };\n if (!check()) {\n // console.log('after Check');\n dispatch(addSelected({name: key}));\n }\n }\n }\n }, [snapshotHistory]); // Only re-run the effect if snapshot history changes -- react hooks\n\n //Update cleanComponentAtomTree as Render Index changes\n\n useEffect(() => {\n if (snapshotHistory.length === 0) return;\n dispatch(\n setCleanComponentAtomTree(snapshotHistory[renderIndex].componentAtomTree),\n );\n }, [renderIndex]);\n\n // useEffect for snapshotHistory\n useEffect(() => {\n // SETUP connection to bg script\n const backgroundConnection = chrome.runtime.connect();\n // INITIALIZE connection to bg script\n backgroundConnection.postMessage({\n action: 'devToolInitialized',\n tabId: chrome.devtools.inspectedWindow.tabId,\n });\n // console.log(\n // 'here is the background connection post message IN APP',\n // backgroundConnection,\n // );\n // LISTEN for messages FROM bg script\n backgroundConnection.onMessage.addListener(msg => {\n if (msg.action === 'recordSnapshot') {\n // ! sets the initial selected\n //console.log('should have our atoms and selectors: ', msg.payload);\n if (!msg.payload[1]) {\n // ensures we only set initially\n const arr: selectedTypes[] = [];\n for (let key in msg.payload[0].filteredSnapshot) {\n arr.push({name: key});\n }\n // setSelected(arr);\n //console.log('arr in App.tsx send to setSelected', arr)\n dispatch(setSelected(arr));\n }\n // console.log(\n // 'this is snapshotHistory',\n // msg.payload[msg.payload.length - 1],\n // );\n dispatch(setSnapshotHistory(msg.payload[msg.payload.length - 1]));\n\n // update state with the atoms and selectors!!!\n dispatch(setAtomsAndSelectors(msg.payload[0].atomsAndSelectors));\n \n //console.log('Payload: IS IT HERE??, ', msg.payload);\n\n // ! Setting the FILTER Array\n if (!msg.payload[1] && filterData.length === 0) {\n // todo: currently the filter does not work if recoilize is not open, we must change msg.payload to incorporate delta function in the backend\n dispatch(updateFilter(msg.payload));\n } else {\n // push the difference between the objects\n const delta = diff(\n msg.payload[msg.payload.length - 2],\n msg.payload[msg.payload.length - 1],\n );\n // only push if the snapshot length is chill\n if (filterData.length < msg.payload.length) {\n dispatch(updateFilter([delta]));\n }\n }\n }\n });\n }, []);\n\n // Render main container if we have detected a recoil app with the recoilize module passing data\n const renderMainContainer: JSX.Element = ;\n\n // Render module not found message if snapHistory is null, this means we have not detected a recoil app with recoilize module installed properly\n const renderModuleNotFoundContainer: JSX.Element = (\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n