[
{
"path": ".gitignore",
"content": "build\nnode_modules\n.DS_Store\n"
},
{
"path": "README.md",
"content": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n\n \n\n
\n A tool for Recoil developers\n Download Chrome Extension» View Demo App (Recoil Application) \n \n
\n\n\n\n\n\n## Table of Contents\n\n* [About the Project](#about-the-project)\n * [Built With](#built-with)\n* [Getting Started](#getting-started)\n * [Prerequisites](#prerequisites)\n * [Installation](#installation)\n* [Usage](#usage)\n* [License](#license)\n* [Authors](#authors)\n* [Acknowledgements](#acknowledgements)\n\n\n\n\n## About The Project\n\nTotal RecoilJS is a tool created to help developers visualize and track their Recoil state via a Chrome extension.\n\n\n### Built With\n\n* [React](https://reactjs.org/)\n* [D3](https://d3js.org/)\n* [TypeScript](https://www.typescriptlang.org/)\n* [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools)\n\n\n\n\n\n## Getting Started\n\nTo get a local copy up and running, follow these simple steps.\n\n### Prerequisites\n\nInstall React DevTools\n```sh\nhttps://chrome.google.com/webstore/detail/react-developer-tools/\n```\n\n### Installation\n \n1. Clone the TotalRecoilJS github\n```sh\ngit clone https://github.com/oslabs-beta/TotalRecoilJS.git\n```\n2. Install NPM packages\n```sh\nnpm install\n```\n3. Start development server\n```sh\nnpm run dev\n```\n4. Unpack to Google Chrome Extensions \n\n5. Navigate to Extensions -> Load Unpacked -> Select Total-Recoil/build/extension\n\n\n\n\n\n\n## Usage\n\n\nVisualize your component tree and see which components are subscribed to which atoms. When you click on an atom’s name, all components that are subscribed to that piece of state will light up.\n\nTroubleshoot by seeing the current state held in each atom. \n\n\n\n\n\nView list of previous states to track changes. \nOn the history tab, you can see up to 10 previous state snapshots.\n\n\n\n\n\n View all selector-atom subscriptions using our interactive sunburst and click on any selector to see all subscribed atoms.\n\n\n \n \n\n\n\n\n\n## Contributing\n\nContributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\n\n\n\n## License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n\n\n\n## Authors\n\nAnthony Lee - [@linkedIn](https://www.linkedin.com/in/anthony-lee27/) - [@GitHub](https://github.com/anthonylee2797)\n\nKhizar Rehman - [@linkedIn](https://www.linkedin.com/in/khizar-rehman-a125711b4/) - [@GitHub](https://github.com/keyz-man)\n\nSilvia Miranda - [@linkedIn](https://www.linkedin.com/in/silviakempmiranda/) - [@GitHub](https://github.com/silvia-miranda)\n\nZi Hao He - [@linkedIn](https://www.linkedin.com/in/zi-hao-he/) - [@GitHub](https://github.com/exquizzle)\n\nKevin Ruan - [@linkedIn](https://www.linkedin.com/in/kevin-ruan-7799711b1/) - [@GitHub](https://github.com/kevinr108)\n\n\n\n\n## Acknowledgements\n\nDenys Dekhtiarenko - [@linkedIn](https://www.linkedin.com/in/denysdekhtiarenko/) - [@GitHub](https://github.com/denskarlet)\n\n\n\n\n\n\n\n\n\n[contributors-shield]: https://github.com/oslabs-beta/TotalRecoilJS/graphs/contributors\n[contributors-url]: https://github.com/oslabs-beta/TotalRecoilJS/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=flat-square\n[forks-url]: https://github.com/othneildrew/Best-README-Template/network/members\n[stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=flat-square\n[stars-url]: https://github.com/oslabs-beta/TotalRecoilJS/stargazers\n[issues-shield]: https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=flat-square\n\n[license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square&logo=linkedin&colorB=555\n[linkedin-url]: https://linkedin.com/in/othneildrew\n[product-screenshot]: images/screenshot.png\n"
},
{
"path": "__test__/__snapshots__/demo.test.js.snap",
"content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`renders & matches snapshot - componetAtomTree props 1`] = `\n\n \n \n Component Tree\n \n \n Change View\n \n \n \n \n \n \n test App\n \n \n \n \n test Recoil Root\n \n \n \n \n Body\n \n \n \n \n List\n \n \n \n`;\n\nexports[`renders & matches snapshot - no props 1`] = `\n\n \n \n Component Tree\n \n \n Change View\n \n \n`;\n"
},
{
"path": "__test__/demo.test.js",
"content": "import React from 'react';\nimport GraphPanel from '../extension/frontend/view/Components/GraphPanel';\nimport { tree } from '../mock/snapshot.js';\nimport {\n render,\n cleanup,\n} from '@testing-library/react';\nimport '@testing-library/jest-dom/extend-expect';\nimport '@babel/polyfill';\n\nafterEach(cleanup);\n\nit('renders & matches snapshot - no props', () => {\n const {asFragment} = render() {\n if (!node.type || !node.type.name) {\n // if this is an HTML tag just keep recursing without saving the name\n if (node.child) getComponentData(node.child, arr);\n if (node.sibling) getComponentData(node.sibling, arr);\n return -1;\n } else {\n component.name = node.type.name;\n }\n}\n\n//this functions gets all the data related to state in React fiber (and the data stored here is used later in other functions)\nfunction getState(node: any, component: any) {\n //checking for 3 conditions (if state exists, if its a linkedlist with state, if its not a linkedlist with state)\n //check if state exists in the node, if not just return and exit out of the function\n if (!node.memoizedState) return;\n // check if the state is stored as a linkedlist\n if (node.memoizedState.memoizedState !== undefined) {\n //check if you're at the end of the linked list chain (.next = null)\n if (node.memoizedState.next === null) {\n component.state = cleanState(node.memoizedState.memoizedState)\n return;\n }\n // initialize array because state is a linkedlist so you can store multiple states in the array\n component.state = [];\n linkedListRecurse(node.memoizedState, component.state);\n return;\n }\n // if the state is not stored as a linkedlist, then run the clean state function\n component.state = cleanState(node.memoizedState)\n function linkedListRecurse(node: any, treeArr: any[]) {\n treeArr.push(cleanState(node.memoizedState))\n if (node.next && node.memoizedState !== node.next.memoizedState) {\n linkedListRecurse(node.next, treeArr)\n }\n }\n}\n\n//this function traverses through component.state property collected in the function getState and stores atom names\nfunction getAtom(component: Component) {\n // if component has no state there is not atom for it so just exit from the function;\n if (!component.state) {\n return;\n }\n // Make a new empty Set\n const atomArr = new Set();\n\n // this will loop through component.state to get the atom data\n for (let i = 0; i < component.state.length; i++) {\n if (component.state[i]['current'] instanceof Set || component.state[i]['current'] instanceof Map) {\n \n // this code will give us the value from the existing set/map in component.state to add to our newly created set\n const it = component.state[i]['current'].values();\n let first = it.next();\n atomArr.add(first.value);\n\n }\n\n //below code will convert the data in the create set to an array in component.atoms property, take out any duplicates, and delete the propert if no atoms exists for the component\n component.atoms = Array.from(atomArr);\n if (component.atoms.length === 0) {\n delete component.atoms;\n } else {\n for (const el of component.atoms) {\n if (typeof el !== 'string') {\n let index = component.atoms.indexOf(el);\n component.atoms.splice(index, 1);\n }\n }\n }\n }\n}\n\n//this is will get all the children and sibling components linked to the current component node and then run the recursive function getComponentData again on each child/sibling node\nfunction getChildren(node: any, component: Component, arr: any[]) {\n const children: any[] = [];\n //check if the node has a child, if so then run the getComponentData on that child node(s)\n if (node.child) {\n getComponentData(node.child, children);\n }\n // check if the node has a sibling, if so then run the getComponentData on that sibling node(s)\n if (node.sibling) getComponentData(node.sibling, arr);\n //if no more child or sibling nodes then return the children array\n if (children.length > 0) component.children = children;\n}\n\n//this function populates atom values in the second position of the array that is sent to the front end\nfunction getAtomValues(obj: object, prop: string) {\n const arr: any = [];\n \n //this function populates the array with the data as map object that is found in tree\n function recursivelyFindProp(o: any, keyToBeFound: string) {\n if (typeof o !== 'object' || !o) {\n return;\n }\n Object.keys(o).forEach(function (key) {\n if (key === keyToBeFound) {\n arr.push(o[key])\n } else {\n if (typeof o[key] === 'object') {\n recursivelyFindProp(o[key], keyToBeFound);\n }\n }\n });\n }\n\n //it recurses throught nested objects and arary to find the key 'atomValues' where the atom value data is stored (the atom values are in a map object)\n recursivelyFindProp(obj, prop);\n\n //the skeleton structure of how the data object will look stored in the array to send to the frontend\n interface Result {\n atomVal: any\n }\n\n const result: Result = {\n atomVal: {}\n }\n \n //converting map objects where the atom value is found into the result object with a key value pair\n for (let i = 0; i < arr.length; i++) {\n let mapData = arr[i]\n if (mapData) {\n for (let [key, value] of mapData) {\n result.atomVal[key] = value.contents;\n }\n }\n }\n\n return result;\n}\n\n//this function creates and stores the data for the selector/atom tree and stores in the 3rd position in the array sent to the frontend\nfunction getSelectorAtomLink(obj: any, prop: string) {\n let arr: any[] = [];\n function recursivelyFindProp(o: any, keyToBeFound: string) {\n if (typeof o !== 'object' || !o) {\n return;\n }\n Object.keys(o).forEach(function (key) {\n if (key === keyToBeFound) {\n arr.push(o[key])\n } else {\n if (typeof o[key] === 'object') {\n recursivelyFindProp(o[key], keyToBeFound);\n }\n }\n });\n }\n\n //this function recursively finds the key 'nodeToNodeSubscriptions' which has the data for atom to selector connections\n recursivelyFindProp(obj, prop);\n\n //skeleton structure of how the data will be stored in the array\n interface SelectorTree {\n name: string;\n children: any[];\n }\n\n const result: SelectorTree = {\n name: 'Selector Tree',\n children: []\n }\n\n interface NonSelectorAtoms {\n name: string;\n children: any[];\n }\n\n const tempObj: NonSelectorAtoms = {name: 'nonSelectorAtoms', children: []}\n result.children.push(tempObj)\n\n //converting map data into object data to be stored\n const newArr = arr.filter((item, index) => arr.indexOf(item) === index)\n for (let i = 0; i < newArr.length; i++) {\n let mapData = newArr[i]\n if (mapData) {\n for (let [key, value] of mapData) {\n let tempArr = [...value]\n for (let el of tempArr) {\n\n let tempObj: SelectorTree = {\n name: '',\n children: []\n }\n tempObj.name = el;\n\n interface TreeValObj {\n name: string;\n value: number;\n }\n \n const treeValObj = {\n name: key,\n value: 100\n }\n\n tempObj.children.push(treeValObj);\n result.children.push(tempObj);\n }\n }\n }\n }\n\n let atomsAndSelectors: any = [];\n //finds all the atoms with selector connetions and compares if there are any atom names that exist in the component tree that do not show up in the 'nodeToComponentSubscriptions' because those are the atoms with no selectors\n function getNonSelectorAtoms(result: any, obj: any) {\n //below function finds the atom/selector data found in 'nodeToComponentSubscriptions' key\n findNested(obj, 'nodeToComponentSubscriptions')\n if(atomsAndSelectors.length > 0) {\n let atomsAndSelectorsArr = Array.from(atomsAndSelectors[0].keys());\n for (const el of atomsAndSelectorsArr) {\n\n if (!doesNestedValueExist(result, el)) {\n result.children[0].children.push({name: el, value: 100});\n } \n\n }\n }\n }\n\n //checks if a value exits in a nested object\n function doesNestedValueExist(obj: any, text: any): boolean {\n let exists = false;\n let keys = Object.keys(obj);\n for(let i = 0; i < keys.length; i++) {\n let key = keys[i];\n let type = typeof obj[key];\n if(type === 'object') {\n exists = doesNestedValueExist(obj[key], text);\n } \n else if(type === 'string') {\n exists = obj[key].indexOf(text) > -1;\n }\n if(exists) {\n break;\n }\n }\n return exists;\n };\n\n //returns the data that exists for the key value that is in keyToBeFound input in a nested object\n function findNested(o: any, keyToBeFound: string) {\n if (typeof o !== 'object' || !o) {\n return;\n }\n Object.keys(o).forEach(function (key) {\n if (key === keyToBeFound) {\n atomsAndSelectors.push(o[key]);\n } else {\n if (typeof o[key] === 'object') {\n findNested(o[key], keyToBeFound);\n }\n }\n });\n }\n //this function recursively finds atoms that have no selectors\n getNonSelectorAtoms(result, obj)\n return result;\n}\n\n//this function cleans the state data for component.state property (this function is run inside getState function)\nfunction cleanState(stateNode: any, depth = 0) {\n let result: any;\n if (depth > 10) return \"Max recursion depth reached!\"\n //checking if the stateNode is not an object or function, if it is not either return the stateNode\n if (typeof stateNode !== 'object' && typeof stateNode !== 'function') return stateNode;\n\n if (stateNode === null) {\n return null;\n }\n if (typeof stateNode === 'object') {\n //when using useRecoilValue atoms are saved as set - checking for atom data\n if (stateNode instanceof Set) {\n return stateNode;\n }\n if (stateNode instanceof Map) {\n return stateNode;\n }\n if (stateNode.$$typeof && typeof stateNode.$$typeof === 'symbol') {\n return stateNode.type && typeof stateNode.type !== 'string' ? `<${stateNode.type.name} />` : 'React component';\n }\n if (Array.isArray(stateNode)) {\n result = [];\n stateNode.forEach((el, index) => {\n if (el !== null) {\n result[index] = cleanState(el, depth + 1)\n } else {\n result[index] = el;\n }\n })\n } else {\n result = {};\n Object.keys(stateNode).forEach((key) => {\n result[key] = cleanState(stateNode[key], depth + 1)\n });\n }\n return result;\n }\n if (typeof stateNode === 'function') {\n return `function: ${stateNode.name}()`;\n }\n}\n\n//the function that sends the array with the necessary tree data to the frontend\nfunction sendToContentScript(obj: any) {\n const tree = JSON.parse(JSON.stringify(obj));\n window.postMessage({ tree }, '*');\n}\n\n//the patcher function is invoked one time when the app first runs to modify the onCommitFiberRoot function in React devTools to extract React Fiber\npatcher();"
},
{
"path": "extension/frontend/create-panel.js",
"content": "/* eslint-disable no-use-before-define */\n// This creates the dev tools panel using the panel.html file as the template\n\nchrome.devtools.panels.create(\n 'Recoil', // title\n '', // icon\n './view.html' // content\n );"
},
{
"path": "extension/frontend/devtools-root.html",
"content": "\n\n\n\n Test Title \n\n\n \n \n \n MAKE ME THE HTML \n \n\n"
},
{
"path": "extension/frontend/view/Components/left-view/GraphPanel.js",
"content": "import React, { useEffect, useState } from 'react';\nimport {\n BrowserRouter as Router,\n Switch,\n Route,\n Link,\n Redirect\n} from \"react-router-dom\";\n\nimport SelectorTree from './SelectorTree'\nimport TreeView from './treeView';\n\n\nconst GraphPanel = (props) => {\n const [view, setView] = useState(true);\n const [viewName, setviewName] = useState('COMPONENT TREE')\n\n const changeView = () => {\n setView(!view);\n\n\n if (viewName === 'COMPONENT TREE') {\n setviewName('SELECTOR TREE')\n } else {\n setviewName('COMPONENT TREE')\n }\n }\n\n return (\n \n
{viewName} \n Change View \n {view ? \n
\n {atomhover[0] ?
Atoms: {JSON.stringify(atomhover[0])} : }\n {atomhover[1] ? Name: {atomhover[1]} : \n
\n\n
History {hist.count}:
{data}\n \n \n);\n\nexport default Navbar;"
},
{
"path": "extension/frontend/view/Components/right-view/atomView.js",
"content": "import React from 'react';\nimport * as d3 from '../../../../libraries/d3.js';\nimport JSONPretty from 'react-json-pretty';\n\n\n\nexport const AtomView = ({ tree }) => {\n const atomSelectors = []\n let originalColor;\n\n let t = d3.transition()\n .duration(1000)\n .ease(d3.easeLinear);\n\n\n // traverses through D3 tree and if a node includes the h3 inner html tag, that node will light up\n function lightup(e) {\n let atom = e.target.innerHTML\n d3.selectAll('.componentTreeNode').style('fill', originalColor).attr('r', 5)\n d3.select('#canvas').selectAll('.node').each(function (e) {\n if (!e.data.atoms) { }\n else if (e.data.atoms.includes(atom)) {\n d3.select(this).select('.componentTreeNode').transition(t).style('fill', 'rgb(240, 219, 79)').attr('r', 10.5)\n }\n })\n atomValLightup(e);\n }\n\n function atomValLightup(e) {\n Array.from(document.querySelectorAll('.h3-display-inline')).forEach(el => {\n el.style.color = '#f4f4f4';\n })\n let atom = e.target\n console.log('firing function: ', atom)\n atom.style.color = '#F0DB4F';\n }\n\n // will iterate through atoms object and render it on screen \n // each prop render should have its unique key\n if (tree) {\n const atoms = tree[1].atomVal\n for (let prop in atoms) {\n const data = \n
{prop} \n
\n
\n State \n {data}
\n \n
\n
\n
\n )\n}\n\nexport default Container"
},
{
"path": "extension/frontend/view/style.css",
"content": "\n\n* {\n margin: 0px;\n padding: 0px;\n background-color: rgb(53, 59, 70);\n font-size: 18px;\n overflow-y: hidden;\n overflow-x: hidden;\n font-family: 'Roboto', sans-serif;\n color: #f4f4f4;\n}\n\n.a-right {\n text-decoration: none;\n color: black;\n width: 100%;\n border: black solid 2px;\n}\n\nsvg {\n background-color: rgb(53, 59, 70);\n width:100%;\n height:500px;\n margin-top: 10%;\n margin-left: 5%;\n}\n\n@media (max-height: 800px){\n svg {\n height: 40%;\n font-size: 100px;\n margin-top: 2%;\n }\n\n .component-svg {\n height: 100%;\n }\n \n}\n\n@media (max-width: 1300px){\n .atoms {\n width: 98% !important;\n }\n}\n \n.component-svg {\n background-color: rgb(53, 59, 70);\n border-right: solid black 1px;\n width:100%;\n height:100%;\n margin: 0;\n}\n\ncircle {\n fill: #fff;\n /* fill: none; */\n stroke: #444857;\n stroke-width: 1px;\n pointer-events: all;\n}\n\n\n\n/* inside main container: canvas and navbar*\n *now its graphDisplays and navbar\n basically, the navbar is the info display panel\n*/\n\n/* CONTAINER.JS */\n#main-container {\n display: flex;\n}\n\n/* CANVAS */\n\n#canvas {\n margin: 0;\n width: 100%;\n height: 100%;\n \n}\n\n#canvas:hover {\n cursor: move;\n}\n\n/* LEFT VIEW GRAPHPANEL */\n\n.graph-button-1 {\n position: absolute;\n top: 2%;\n right: 36%;\n padding: 2px;\n background: none;\n background-color: #444857;\n font-family: inherit;\n font-size: 14px;\n border: 2px solid rgb(0, 0, 0);\n border-radius: 8px;\n color: #f4f4f4;\n cursor: pointer;\n display: inline-block;\n margin: 5px 15px;\n text-transform: uppercase;\n letter-spacing: 1px;\n font-weight: 500;\n width: 15%;\n -webkit-transition: all 0.3s;\n -moz-transition: all 0.3s;\n transition: all 0.3s;\n box-shadow: 1px 1px black;\n}\n\n.graph-button-1:focus {\n outline:none;\n}\n\nbutton:hover {\n color: #F0DB4F;\n }\n \n\n\n.graph-container {\n width: 65%;\n margin: 0;\n}\n\n\n.h1-absolute {\n position: absolute;\n left: 1%;\n top: 2%;\n\n}\n\n/* RIGHT VIEW NAVBAR */\n\n.a-right {\n margin: 10px 5px 0px 5px;\n text-decoration: none;\n color: white;\n width: 100%;\n border:black solid 2px;\n border-radius: 10px;\n padding: 4px;\n font-size: 25px;\n background-color: #444857;\n box-shadow: 1px 1px black;\n}\n\n.a-right:hover {\n color: #F0DB4F;\n transition: all .3s;\n}\n\n\n.a-right-active {\n color: #F0DB4F;\n}\n\n.navbar {\n margin: 0;\n width: 35%;\n border: 2px solid #333642;\n border-left: 2px solid black;\n}\n \n.navbaritem {\n width: 100%;\n font-size: 26px;\n background-color: rgb(53, 59, 70);\n}\n\n.navbaritem:hover {\n color: #f4f4f4;\n}\n\n.navbaritem:active {\n color: black;\n}\n\n\n#link-container {\n display: flex;\n width: 100%;\n text-align: center;\n font-size: 20px;\n margin: auto;\n padding-right: 15px;\n justify-content: space-around;\n padding-bottom: 10px;\n /* border-bottom: 2px solid black; */\n}\n\n\n/* RIGHT VIEW ATOM.JS */\n.atom-values-tab {\n height: 105vh;\n margin: auto;\n max-height: 87vh;\n overflow-y: scroll;\n border-top: 2px solid black;\n background-color: #444857;\n}\n\n.atom-container {\n box-shadow: 1px 1px black;\n border: 2px black solid;\n border-radius: 10px;\n padding: 10px;\n margin-top: 10px;\n}\n\n.atom-div {\n max-height: 50vh;\n padding: 8px;\n display: flex;\n}\n\n.atoms {\n width: 80%;\n text-align: left;\n margin-top: 5px;\n margin: auto;\n padding-left: 5px;\n padding-right: 5px;\n background-color: #444857;\n}\n\n#atom-hover {\n position: absolute;\n left: 1%;\n top: 8%;\n}\n\n.h3-display-inline{\n display: inline-block;\n}\n\n.h3-display-inline:hover {\n cursor: pointer;\n color: #F0DB4F;\n transition: all .3s;\n}\n\n.h3-display-inline:active {\n color: #F0DB4F;\n}\n\n.s-margin {\n width: 100%;\n overflow-y: auto;\n}\n\n\n/* RIGHT VIEW HISTORY.JS*/\n\n#history-info {\n overflow-x: hidden;\n overflow-y: scroll;\n height: 80%;\n}\n\n#history-tab {\n height: 105vh;\n margin-top: 10px;\n margin-left: 10px;\n}\n\n.__json-pretty__ {\n font-size: 12px;\n}\n\n.__json-key__ {\n font-size: 12px;\n}\n\n.__json-string__ {\n font-size: 12px;\n}\n\n.__json-value__ {\n font-size: 12px;\n}\n.__json-boolean__ {\n font-size: 12px;\n}\n.__json-error__ {\n font-size: 12px;\n}\n.__json-main__ {\n font-size: 12px;\n}\n\n.__json-pretty-error__ {\n font-size: 12px;\n}\n\n/* SCROLL BAR STYLING */\n::-webkit-scrollbar {\n width: 12px; /* for vertical scrollbars */\n height: 12px; /* for horizontal scrollbars */\n}\n\n::-webkit-scrollbar-track {\n background: #f4f4f4;\n}\n\n::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.5);\n}\n\n\nsummary {\n list-style-image: url(right-arrow.svg);\n outline: none;\n}\n\nsummary:hover {\n cursor: pointer;\n}\n\n\n\n\n\n/* selector tree css vvv */\n\n.patharc {\n /* fill: #7289DA; */\n /* opacity: 0.3; */\n stroke: #f4f4f4;\n stroke-width: 3px;\n}\n\n.arclabels {\n fill: white;\n}\n\n.selectorTreeHomeBtn {\n fill: none;\n stroke: #f4f4f4;\n stroke-width: 5px;\n}\n\n/* font-size does not work in arclabels */\ntspan {\n font-size: 1.25em;\n}\n\n\n/* selector tree css ^^^ */\n\n\n.blue {\n color: #F0DB4F;\n}\n\n.legend {\n position: absolute;\n left: 1%;\n top: 10%;\n}\n\n.box {\n width: 15px;\n height: 15px;\n border: 1px solid black;\n}\n\n"
},
{
"path": "extension/frontend/view/view.html",
"content": "\n\n\n\n TotalRecoilJS \n\n\n\n\n
\n \n\n\n"
},
{
"path": "extension/frontend/view/view.js",
"content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Container from './Container'\n\n\nconst App = () => {\n return (\n \n
\n )\n}\nReactDOM.render(\"\n ],\n \n \"background\": {\n \"scripts\": [\"background.js\"]\n },\n\n \"icons\": {\n \"128\": \"icon.png\"\n },\n\n \n \"web_accessible_resources\": [\"hook.js\"],\n \n \"devtools_page\": \"devtools-root.html\"\n }"
},
{
"path": "mock/snapshot.js",
"content": "export const tree = [\n {\n children: [{\n name: 'test Recoil Root',\n children: [\n {name: 'Body'},\n {name: 'List', atoms: ['atom1', 'atom2']}\n ] \n }], \n name: 'test App'\n },\n {\n atomVal: {atom1: 'testing123', atom2: 'testing098'}\n },\n {\n name: 'Selector tree test',\n children: [\n {\n name: 'selector1', children: [{name: 'atom1', value: 100}]\n }, \n {\n name: 'selector2', children: [{name: 'atom2', value: 100}]\n }\n ]\n }\n]"
},
{
"path": "package.json",
"content": "{\n \"name\": \"recoil\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"jest --verbose\",\n \"build\": \"webpack\",\n \"dev\": \"webpack --mode=development --watch\"\n },\n \"author\": \"AKKZS\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"@babel/polyfill\": \"^7.10.4\",\n \"@babel/preset-env\": \"^7.10.2\",\n \"@babel/preset-react\": \"^7.10.1\",\n \"babel-jest\": \"^26.2.2\",\n \"copy-webpack-plugin\": \"^6.0.1\",\n \"css-loader\": \"^3.5.3\",\n \"jest\": \"^26.2.2\",\n \"sass\": \"^1.26.7\",\n \"sass-loader\": \"^8.0.2\",\n \"ts-loader\": \"^7.0.5\",\n \"typescript\": \"^3.9.7\",\n \"webpack\": \"^4.43.0\",\n \"webpack-cli\": \"^3.3.11\",\n \"webpack-dev-server\": \"^3.11.0\",\n \"webpack-extension-reloader\": \"^1.1.4\"\n },\n \"dependencies\": {\n \"@babel/core\": \"^7.11.0\",\n \"@babel/preset-typescript\": \"^7.10.4\",\n \"@testing-library/jest-dom\": \"^5.11.2\",\n \"@testing-library/react\": \"^10.4.7\",\n \"babel-core\": \"^7.0.0-bridge.0\",\n \"babel-loader\": \"^8.1.0\",\n \"d3\": \"^5.16.0\",\n \"lodash.throttle\": \"^4.1.1\",\n \"pretty-print-json\": \"^0.2.1\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-json-pretty\": \"^2.2.0\",\n \"react-router-dom\": \"^5.2.0\",\n \"react-test-renderer\": \"^16.13.1\"\n }\n}\n"
},
{
"path": "tsconfig.json",
"content": "{\n \"compilerOptions\": {\n /* Visit https://aka.ms/tsconfig.json to read more about this file */\n\n /* Basic Options */\n // \"incremental\": true, /* Enable incremental compilation */\n \"target\": \"ES2015\", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */\n \"module\": \"commonjs\", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */\n // \"lib\": [], /* Specify library files to be included in the compilation. */\n // \"allowJs\": true, /* Allow javascript files to be compiled. */\n // \"checkJs\": true, /* Report errors in .js files. */\n // \"jsx\": \"preserve\", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */\n // \"declaration\": true, /* Generates corresponding '.d.ts' file. */\n // \"declarationMap\": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */\n // \"sourceMap\": true, /* Generates corresponding '.map' file. */\n // \"outFile\": \"./\", /* Concatenate and emit output to single file. */\n // \"outDir\": \"./\", /* Redirect output structure to the directory. */\n // \"rootDir\": \"./\", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */\n // \"composite\": true, /* Enable project compilation */\n // \"tsBuildInfoFile\": \"./\", /* Specify file to store incremental compilation information */\n // \"removeComments\": true, /* Do not emit comments to output. */\n // \"noEmit\": true, /* Do not emit outputs. */\n // \"importHelpers\": true, /* Import emit helpers from 'tslib'. */\n // \"downlevelIteration\": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */\n // \"isolatedModules\": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */\n\n /* Strict Type-Checking Options */\n \"strict\": true, /* Enable all strict type-checking options. */\n // \"noImplicitAny\": true, /* Raise error on expressions and declarations with an implied 'any' type. */\n // \"strictNullChecks\": true, /* Enable strict null checks. */\n // \"strictFunctionTypes\": true, /* Enable strict checking of function types. */\n // \"strictBindCallApply\": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */\n // \"strictPropertyInitialization\": true, /* Enable strict checking of property initialization in classes. */\n // \"noImplicitThis\": true, /* Raise error on 'this' expressions with an implied 'any' type. */\n // \"alwaysStrict\": true, /* Parse in strict mode and emit \"use strict\" for each source file. */\n\n /* Additional Checks */\n // \"noUnusedLocals\": true, /* Report errors on unused locals. */\n // \"noUnusedParameters\": true, /* Report errors on unused parameters. */\n // \"noImplicitReturns\": true, /* Report error when not all code paths in function return a value. */\n // \"noFallthroughCasesInSwitch\": true, /* Report errors for fallthrough cases in switch statement. */\n\n /* Module Resolution Options */\n // \"moduleResolution\": \"node\", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */\n // \"baseUrl\": \"./\", /* Base directory to resolve non-absolute module names. */\n // \"paths\": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */\n // \"rootDirs\": [], /* List of root folders whose combined content represents the structure of the project at runtime. */\n // \"typeRoots\": [], /* List of folders to include type definitions from. */\n // \"types\": [], /* Type declaration files to be included in compilation. */\n // \"allowSyntheticDefaultImports\": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */\n \"esModuleInterop\": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */\n // \"preserveSymlinks\": true, /* Do not resolve the real path of symlinks. */\n // \"allowUmdGlobalAccess\": true, /* Allow accessing UMD globals from modules. */\n\n /* Source Map Options */\n // \"sourceRoot\": \"\", /* Specify the location where debugger should locate TypeScript files instead of source locations. */\n // \"mapRoot\": \"\", /* Specify the location where debugger should locate map files instead of generated locations. */\n // \"inlineSourceMap\": true, /* Emit a single file with source maps instead of having a separate file. */\n // \"inlineSources\": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */\n\n /* Experimental Options */\n // \"experimentalDecorators\": true, /* Enables experimental support for ES7 decorators. */\n // \"emitDecoratorMetadata\": true, /* Enables experimental support for emitting type metadata for decorators. */\n\n /* Advanced Options */\n \"skipLibCheck\": true, /* Skip type checking of declaration files. */\n \"forceConsistentCasingInFileNames\": true /* Disallow inconsistently-cased references to the same file. */\n }\n}\n"
},
{
"path": "webpack.config.js",
"content": "const path = require('path');\nconst CopyPlugin = require('copy-webpack-plugin');\nconst ExtensionReloader = require('webpack-extension-reloader');\n\nmodule.exports = {\n // Files to bundle\n entry: {\n bundle: './extension/frontend/view/view.js',\n // \"create-panel\": './extension/devtools/create-panel.js'\n background: './extension/backend/background.js',\n hook: './extension/backend/hook.ts',\n },\n // Location to bundle them to\n output: {\n filename: '[name].js',\n path: path.resolve(__dirname, 'build/extension'),\n },\n // Modules to load non-jacvascript files\n module: {\n rules: [\n // CSS Loader\n {\n test: /\\.css$/i,\n use: ['style-loader', 'css-loader'],\n },\n // SASS Loader\n {\n test: /\\.s[ac]ss$/i,\n use: [\n // Creates `style` nodes from JS strings\n 'style-loader',\n // Translates CSS into CommonJS\n 'css-loader',\n // Compiles Sass to CSS\n 'sass-loader',\n ],\n },\n {\n rules: [\n {\n test: /\\.tsx?$/,\n use: 'ts-loader',\n exclude: /node_modules/,\n },\n ],\n },\n {\n test: /\\.jsx?/,\n exclude: /(node_modules)/,\n resolve: {\n extensions: ['.js', '.jsx'],\n },\n use: {\n loader: 'babel-loader',\n options: {\n presets: ['@babel/preset-env', '@babel/preset-react'],\n },\n },\n },\n ],\n },\n\n plugins: [\n // Copies files to 'build' folder without bundling them\n new CopyPlugin({\n patterns: [\n { from: 'extension/manifest.json', to: '../extension/manifest.json' },\n {\n from: 'extension/backend/background.js',\n to: '../extension/background.js',\n },\n {\n from: 'extension/frontend/devtools-root.html',\n to: '../extension/devtools-root.html',\n },\n {\n from: 'extension/frontend/create-panel.js',\n to: '../extension/create-panel.js',\n },\n {\n from: 'extension/frontend/view/view.html',\n to: '../extension/view.html',\n },\n {\n from: 'extension/frontend/view/style.css',\n to: '../extension/style.css',\n },\n // { from: 'extension/backend/hook.js', to: '../extension/hook.js' },\n {\n from: 'extension/backend/content_script.js',\n to: '../extension/content_script.js',\n },\n {\n from: 'extension/icon.png',\n to: '../extension/icon.png',\n }\n ],\n }),\n // Enables hot reloading - use npm run dev command\n new ExtensionReloader({\n manifest: path.resolve(__dirname, './extension/manifest.json'),\n entries: {\n bundle: 'bundle',\n background: '`background',\n },\n }),\n ],\n\n optimization: {\n minimize: false,\n },\n\n devtool: 'cheap-module-source-map', // Needed as to stop Chrome eval errors when using dev server\n};\n"
}
] ![\"Logo\"](\"src/icons/Recoil-PNG-Gray.png\"){kind=icon}
\n \n\n \n\n