diff --git a/.circleci/config.yml b/.circleci/config.yml new file mode 100644 index 0000000..6f98693 --- /dev/null +++ b/.circleci/config.yml @@ -0,0 +1,13 @@ +# Use the latest 2.1 version of CircleCI pipeline process engine. See: https://circleci.com/docs/2.0/configuration-reference +version: 2.1 +# Use a package of configuration called an orb. +orbs: + # Declare a dependency on the welcome-orb + welcome: circleci/welcome-orb@0.4.1 +# Orchestrate or schedule a set of jobs +workflows: + # Name the workflow "welcome" + welcome: + # Run the welcome/run job in its own container + jobs: + - welcome/run diff --git a/.github/workflows/ios.yml b/.github/workflows/ios.yml new file mode 100644 index 0000000..aaa8cc0 --- /dev/null +++ b/.github/workflows/ios.yml @@ -0,0 +1,42 @@ +name: iOS starter workflow + +on: + push: + branches: [ master ] + pull_request: + branches: [ master ] + +jobs: + build: + name: Build and Test default scheme using any available iPhone simulator + runs-on: macos-latest + + steps: + - name: Checkout + uses: actions/checkout@v2 + - name: Set Default Scheme + run: | + scheme_list=$(xcodebuild -list -json | tr -d "\n") + default=$(echo $scheme_list | ruby -e "require 'json'; puts JSON.parse(STDIN.gets)['project']['targets'][0]") + echo $default | cat >default + echo Using default scheme: $default + - name: Build + env: + scheme: ${{ 'default' }} + platform: ${{ 'iOS Simulator' }} + run: | + device=`instruments -s -devices | grep -oE 'iPhone.*?[^\(]+' | head -1 | awk '{$1=$1;print}'` + if [ $scheme = default ]; then scheme=$(cat default); fi + if [ "`ls -A | grep -i \\.xcworkspace\$`" ]; then filetype_parameter="workspace" && file_to_build="`ls -A | grep -i \\.xcworkspace\$`"; else filetype_parameter="project" && file_to_build="`ls -A | grep -i \\.xcodeproj\$`"; fi + file_to_build=`echo $file_to_build | awk '{$1=$1;print}'` + xcodebuild build-for-testing -scheme "$scheme" -"$filetype_parameter" "$file_to_build" -destination "platform=$platform,name=$device" + - name: Test + env: + scheme: ${{ 'default' }} + platform: ${{ 'iOS Simulator' }} + run: | + device=`instruments -s -devices | grep -oE 'iPhone.*?[^\(]+' | head -1 | awk '{$1=$1;print}'` + if [ $scheme = default ]; then scheme=$(cat default); fi + if [ "`ls -A | grep -i \\.xcworkspace\$`" ]; then filetype_parameter="workspace" && file_to_build="`ls -A | grep -i \\.xcworkspace\$`"; else filetype_parameter="project" && file_to_build="`ls -A | grep -i \\.xcodeproj\$`"; fi + file_to_build=`echo $file_to_build | awk '{$1=$1;print}'` + xcodebuild test-without-building -scheme "$scheme" -"$filetype_parameter" "$file_to_build" -destination "platform=$platform,name=$device" diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml new file mode 100644 index 0000000..861e372 --- /dev/null +++ b/.github/workflows/npm-publish.yml @@ -0,0 +1,47 @@ +# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created +# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages + +name: Node.js Package + +on: + release: + types: [created] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: 12 + - run: npm ci + - run: npm test + + publish-npm: + needs: build + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: 12 + registry-url: https://registry.npmjs.org/ + - run: npm ci + - run: npm publish + env: + NODE_AUTH_TOKEN: ${{secrets.npm_token}} + + publish-gpr: + needs: build + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: 12 + registry-url: https://npm.pkg.github.com/ + - run: npm ci + - run: npm publish + env: + NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} diff --git a/extension/core/background.js b/extension/core/background.js index be9e8aa..ebc36a0 100644 --- a/extension/core/background.js +++ b/extension/core/background.js @@ -36,7 +36,7 @@ chrome.runtime.onConnect.addListener((port) => { port.onMessage.addListener(panelListener); - port.onDisconnect.addListener(function () { + port.onDisconnect.addListener(function() { port.onMessage.removeListener(panelListener); // remove connection object @@ -134,7 +134,10 @@ const sendData = (to, tabId) => { } } -const saveCatchData = (request, { id: tabId, title }, subType) => { +const saveCatchData = (request, { + id: tabId, + title +}, subType) => { let { data, @@ -220,4 +223,4 @@ const setAppPopup = (isActive, tabId) => { tabId, popup: "popup/popup.html", }); -}; +}; \ No newline at end of file diff --git a/package.json b/package.json index 38063ca..2c23ee8 100644 --- a/package.json +++ b/package.json @@ -36,13 +36,13 @@ "homepage": "https://github.com/deeppatel234/react-context-devtool#readme", "dependencies": { "classnames": "2.2.6", - "codemirror": "5.55.0", + "codemirror": "5.58.2", "error-stack-parser": "2.0.6", "jsondiffpatch": "0.4.1", - "jsonlint-mod": "1.7.5", + "jsonlint-mod": "1.7.6", "object-assign": "4.1.1", - "react": "16.13.1", - "react-dom": "16.13.1", + "react": "16.14.0", + "react-dom": "16.14.0", "react-json-view": "1.19.1" }, "devDependencies": { diff --git a/src/components/635374ed-f3bf-4419-88be-22e176eb5c9e.html b/src/components/635374ed-f3bf-4419-88be-22e176eb5c9e.html new file mode 100644 index 0000000..63f9a5a --- /dev/null +++ b/src/components/635374ed-f3bf-4419-88be-22e176eb5c9e.html @@ -0,0 +1,14 @@ + + + +2020-11-16-1-54-9.html + + + + +

[info] Playing test case katalon Recorder Cypress Canvas / Untitled Test Case

[info] Time: Mon Nov 16 2020 01:53:33 GMT-0800 (Pacific Standard Time) Timestamp: 1605520413029

[info] OS: Windows Version: 10

[info] Browser: Chrome Version: 86.0

[info] If the test cannot start, please refresh the active browser tab

[info] Executing: | open | https://www.bing.com/search?q=canvas+cypress+college&form=ANNTH1&refig=b6c042ee7856458faea0699db653742b&sp=-1&ghc=1&pq=canvas+cypress+colle&sc=6-20&qs=n&sk=&cvid=b6c042ee7856458faea0699db653742b | |

[info] Executing: | click | link=Cypress College | |

[info] Executing: | click | link=Canvas | |

[info] Executing: | selectWindow | win_ser_1 | |

[info] Expand variable 'win_ser_1' into 'win_ser_1'

[info] Executing: | type | id=username | 01218066 |

[info] Executing: | type | id=password | Lift2019! |

[info] Executing: | click | name=submit | |

[info] Executing: | click | //div[@id='announcementWrapper']/div/div[2]/div/div[2]/a/i | |

[info] Wait until the element is found

[info] Stop executing

\ No newline at end of file diff --git a/src/components/canvastest-3.html b/src/components/canvastest-3.html new file mode 100644 index 0000000..0cde2d0 --- /dev/null +++ b/src/components/canvastest-3.html @@ -0,0 +1,42 @@ + + + + + + katalon Recorder Cypress Canvas + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Untitled Test Case
openhttps://www.bing.com/search?q=canvas+cypress+college&form=ANNTH1&refig=b6c042ee7856458faea0699db653742b&sp=-1&ghc=1&pq=canvas+cypress+colle&sc=6-20&qs=n&sk=&cvid=b6c042ee7856458faea0699db653742b
clicklink=Cypress College
clicklink=Canvas
selectWindowwin_ser_1
typeid=username01218066
typeid=passwordLift2019!
clickname=submit
click//div[@id='announcementWrapper']/div/div[2]/div/div[2]/a/i
clickxpath=(//button[@type='button'])[2]
click//div[@id='DashboardCard_Container']/div/div[3]/div/a/div/h3/span
clickxpath=(//a[contains(text(),'CIS 132 Excel Exam #2 Selitrennikoff (70 mins, 37 Tasks, 3 Tries, No Hints)')])[2]
clicklink=Modules
clickxpath=(//a[contains(text(),'CIS 132 Excel Practice Exam #2 Selitrennikoff (37 Tasks, 3 Tries, With Hints)')])[2]
+ + \ No newline at end of file diff --git a/src/components/katalon Recorder Cypress Canvas.html b/src/components/katalon Recorder Cypress Canvas.html new file mode 100644 index 0000000..46d66d8 --- /dev/null +++ b/src/components/katalon Recorder Cypress Canvas.html @@ -0,0 +1,44 @@ + + + + + + Untitled Test Suite + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Untitled Test Case
openhttps://www.bing.com/search?q=canvas+cypress+college&form=ANNTH1&refig=b6c042ee7856458faea0699db653742b&sp=-1&ghc=1&pq=canvas+cypress+colle&sc=6-20&qs=n&sk=&cvid=b6c042ee7856458faea0699db653742b
clicklink=Cypress College
clicklink=Canvas
selectWindowwin_ser_1
typeid=username01218066
typeid=passwordLift2019!
clickid=username
clickname=submit
click//div[@id='announcementWrapper']/div/div[2]/div/div[2]/a/i
clickxpath=(//button[@type='button'])[2]
click//div[@id='DashboardCard_Container']/div/div[3]/div/a/div/h3/span
clickxpath=(//a[contains(text(),'CIS 132 Excel Exam #2 Selitrennikoff (70 mins, 37 Tasks, 3 Tries, No Hints)')])[2]
clicklink=Modules
clickxpath=(//a[contains(text(),'CIS 132 Excel Practice Exam #2 Selitrennikoff (37 Tasks, 3 Tries, With Hints)')])[2]
+ + \ No newline at end of file diff --git a/src/components/react-context-devtool-master.zip b/src/components/react-context-devtool-master.zip new file mode 100644 index 0000000..f179c3f Binary files /dev/null and b/src/components/react-context-devtool-master.zip differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/.github/ISSUE_TEMPLATE/bug_report.md b/src/components/react-context-devtool-master/react-context-devtool-master/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 0000000..65fda1d --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,32 @@ +--- +name: Bug report +about: Create a report to help us improve +title: '' +labels: '' +assignees: '' + +--- + +**Describe the bug** +A clear and concise description of what the bug is. + +**To Reproduce** +Steps to reproduce the behavior: +1. Go to '...' +2. Click on '....' +3. Scroll down to '....' +4. See error + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**Screenshots** +If applicable, add screenshots to help explain your problem. + +**Desktop (please complete the following information):** + - OS: [e.g. windows] + - Browser [e.g. chrome, safari] + - Version [e.g. 22] + +**Additional context** +Add any other context about the problem here. diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/.github/ISSUE_TEMPLATE/feature_request.md b/src/components/react-context-devtool-master/react-context-devtool-master/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 0000000..bbcbbe7 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,20 @@ +--- +name: Feature request +about: Suggest an idea for this project +title: '' +labels: '' +assignees: '' + +--- + +**Is your feature request related to a problem? Please describe.** +A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] + +**Describe the solution you'd like** +A clear and concise description of what you want to happen. + +**Describe alternatives you've considered** +A clear and concise description of any alternative solutions or features you've considered. + +**Additional context** +Add any other context or screenshots about the feature request here. diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/.gitignore b/src/components/react-context-devtool-master/react-context-devtool-master/.gitignore new file mode 100644 index 0000000..87807d9 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/.gitignore @@ -0,0 +1,3 @@ +node_modules +package-lock.json +dist diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/CODE_OF_CONDUCT.md b/src/components/react-context-devtool-master/react-context-devtool-master/CODE_OF_CONDUCT.md new file mode 100644 index 0000000..1f03d86 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/CODE_OF_CONDUCT.md @@ -0,0 +1,76 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to making participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, sex characteristics, gender identity and expression, +level of experience, education, socio-economic status, nationality, personal +appearance, race, religion, or sexual identity and orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +* The use of sexualized language or imagery and unwelcome sexual attention or + advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic + address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviors that they deem inappropriate, +threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces +when an individual is representing the project or its community. Examples of +representing a project or community include using an official project e-mail +address, posting via an official social media account, or acting as an appointed +representative at an online or offline event. Representation of a project may be +further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team at deeppatel234@gmail.com. All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality with regard to the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, +available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html + +[homepage]: https://www.contributor-covenant.org + +For answers to common questions about this code of conduct, see +https://www.contributor-covenant.org/faq diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/CONFIGURE.md b/src/components/react-context-devtool-master/react-context-devtool-master/CONFIGURE.md new file mode 100644 index 0000000..715f442 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/CONFIGURE.md @@ -0,0 +1 @@ +doc on how to setup extension in browser \ No newline at end of file diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/LICENSE b/src/components/react-context-devtool-master/react-context-devtool-master/LICENSE new file mode 100644 index 0000000..be462cd --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020 Deep Patel + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/PRIVACY_POLICY.md b/src/components/react-context-devtool-master/react-context-devtool-master/PRIVACY_POLICY.md new file mode 100644 index 0000000..6ab0ca7 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/PRIVACY_POLICY.md @@ -0,0 +1,8 @@ +# Privacy Policy + +## Personal data +react-context-devtool had never collected and will never collect any personal data, browsing history etc. react-context-devtool traverse react fiber tree to get context and useReducer nodes for debugging data if the user has attached handler in the code. it does not send any data to any server. it processes data on-device. +In future, react-context-devtool may collect browser version, platform name. This information is needed for a decision on implementing new features, removing unused features. + +## Third party services +react-context-devtool uses Chrome (Chromium) and browser's Web Storage API (localStorage) for storing user's settings. diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/README.md b/src/components/react-context-devtool-master/react-context-devtool-master/README.md new file mode 100644 index 0000000..33c2212 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/README.md @@ -0,0 +1,130 @@ +

+ +

+ +

Devtool for React Context and useReducer Hook

+ +[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![NPM Download](https://img.shields.io/npm/dt/react-context-devtool.svg)](https://www.npmjs.com/package/react-context-devtool) [![NPM](https://img.shields.io/npm/v/react-context-devtool.svg)](https://www.npmjs.com/package/react-context-devtool) + +

+ +

+

+ + + +

+ +## Installation + +- Download extension from + - [Chrome Web Store](https://chrome.google.com/webstore/detail/oddhnidmicpefilikhgeagedibnefkcf) + - [Firefox Addons Store](https://addons.mozilla.org/en-US/firefox/addon/react-context-devtool/) + - [Microsoft Edge Addons Store](https://microsoftedge.microsoft.com/addons/detail/react-context-devtool/bnclaomncapgohhafjepfklgbjdjlfcd) + +### Auto Mode +- Download and install npm package + +```sh +npm install react-context-devtool +``` + +- Attach root container in debugContextDevtool method + +```js +import React from "react"; +import ReactDOM from "react-dom"; +import { debugContextDevtool } from 'react-context-devtool'; + +import App from "./App"; + +const container = document.getElementById("root"); + +ReactDOM.render(, container); + +// Attach root container +debugContextDevtool(container, options); + +``` + +| Name | Type | Default | Description | +| ------ | ------ | ------ | ------ | +| `debugReducer` | boolean | `true` | enable/disable useReducer debug | +| `debugContext` | boolean | `true` | enable/disable context debug | +| `disable` | boolean | `false` | disable react-context-devtool including manual mode | +| `disableAutoMode` | boolean | `false` | disable auto mode only | + + +### Manual Mode + +- if you want to debug only selected context so you can use manual mode + +- Add ContextDevTool component inside your Provider. + +```js + +import { ContextDevTool } from 'react-context-devtool'; + + + // Add this in your context provider + + + +``` +2. Add _REACT_CONTEXT_DEVTOOL method in your Consumer. + +```js + + + { + values => { + if (window._REACT_CONTEXT_DEVTOOL) { + window._REACT_CONTEXT_DEVTOOL({ id: 'uniqContextId', displayName: 'Context Display Name', values }); + } + return null; + } + } + + +``` + +## Set Display name in Auto Mode + +### Set Display name for Context API + +- set `dispayName` props in `Provider` + +```js + + + +``` + +or + +- assign display name in Context + +```js + MyContext.displayName = "Context Display Name"; +``` + +### Set Display name for useReducer + +- reducer function name is use as displayName in debug + + +## Disable in production mode + +```js + +debugContextDevtool(container, { + disable: process.env.NODE_ENV === "production" +}); + +``` + + + +## License + +MIT diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/babel.config.js b/src/components/react-context-devtool-master/react-context-devtool-master/babel.config.js new file mode 100644 index 0000000..d72a866 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/babel.config.js @@ -0,0 +1,24 @@ +module.exports = { + plugins: [ + '@babel/plugin-syntax-dynamic-import', + [ + '@babel/plugin-transform-runtime', + { + regenerator: true, + }, + ], + ], + presets: [ + [ + '@babel/preset-env', + { + loose: true, + modules: process.env.BABEL_ENV === 'cjs' ? 'commonjs' : false, + targets: { + node: 10, + }, + }, + ], + '@babel/preset-react', + ], +}; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/browser/chrome/build.js b/src/components/react-context-devtool-master/react-context-devtool-master/browser/chrome/build.js new file mode 100644 index 0000000..0c9be72 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/browser/chrome/build.js @@ -0,0 +1,18 @@ +const chalk = require("chalk"); +const build = require("../../build/build"); + +const startBuild = async () => { + + console.log(chalk.white.bgBlue("\nThe Chrome extension build started")); + + try { + await build("chrome"); + + console.log(chalk.white.bgBlue("\nThe Chrome extension build successfully\n")); + } catch (err) { + console.error(err); + console.log(chalk.red("\nThe Chrome extension build failed\n")); + } +}; + +startBuild(); diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/browser/chrome/manifest.json b/src/components/react-context-devtool-master/react-context-devtool-master/browser/chrome/manifest.json new file mode 100644 index 0000000..d920877 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/browser/chrome/manifest.json @@ -0,0 +1,39 @@ +{ + "name": "React Context DevTool", + "version": "2.1", + "description": "Devtool for React Context", + "manifest_version": 2, + "icons": { + "16": "assets/icons/icon16.png", + "32": "assets/icons/icon32.png", + "48": "assets/icons/icon48.png", + "128": "assets/icons/icon128.png" + }, + "browser_action": { + "default_icon": { + "16": "assets/icons/icon16-disabled.png", + "32": "assets/icons/icon32-disabled.png", + "48": "assets/icons/icon48-disabled.png", + "128": "assets/icons/icon128-disabled.png" + }, + "default_popup": "popup/disabled.html" + }, + "background": { + "scripts": ["background.js"], + "persistent": false + }, + "devtools_page": "devtool/devtool.html", + "permissions": ["storage", "file:///*", "http://*/*", "https://*/*"], + "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;", + "content_scripts": [ + { + "matches": [""], + "js": ["injectGlobalHook.js"], + "run_at": "document_start", + "all_frames": true + } + ], + "web_accessible_resources": [ + "react-context-devtool-helper.js" + ] +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/browser/firefox/build.js b/src/components/react-context-devtool-master/react-context-devtool-master/browser/firefox/build.js new file mode 100644 index 0000000..183809a --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/browser/firefox/build.js @@ -0,0 +1,18 @@ +const chalk = require("chalk"); +const build = require("../../build/build"); + +const startBuild = async () => { + + console.log(chalk.white.bgBlue("\nThe Firefox extension build started")); + + try { + await build("firefox"); + + console.log(chalk.white.bgBlue("\nThe Firefox extension build successfully\n")); + } catch (err) { + console.error(err); + console.log(chalk.red("\nThe Firefox extension build failed\n")); + } +}; + +startBuild(); diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/browser/firefox/manifest.json b/src/components/react-context-devtool-master/react-context-devtool-master/browser/firefox/manifest.json new file mode 100644 index 0000000..2276add --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/browser/firefox/manifest.json @@ -0,0 +1,38 @@ +{ + "name": "React Context DevTool", + "version": "2.1", + "description": "Devtool for React Context", + "manifest_version": 2, + "icons": { + "16": "assets/icons/icon16.png", + "32": "assets/icons/icon32.png", + "48": "assets/icons/icon48.png", + "128": "assets/icons/icon128.png" + }, + "browser_action": { + "default_icon": { + "16": "assets/icons/icon16-disabled.png", + "32": "assets/icons/icon32-disabled.png", + "48": "assets/icons/icon48-disabled.png", + "128": "assets/icons/icon128-disabled.png" + }, + "default_popup": "popup/disabled.html" + }, + "background": { + "scripts": ["background.js"] + }, + "devtools_page": "devtool/devtool.html", + "permissions": ["storage", "file:///*", "http://*/*", "https://*/*"], + "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;", + "content_scripts": [ + { + "matches": [""], + "js": ["injectGlobalHook.js"], + "run_at": "document_start", + "all_frames": true + } + ], + "web_accessible_resources": [ + "react-context-devtool-helper.js" + ] +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/build/build.js b/src/components/react-context-devtool-master/react-context-devtool-master/build/build.js new file mode 100644 index 0000000..fe7dfe4 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/build/build.js @@ -0,0 +1,111 @@ +const archiver = require("archiver"); +const webpack = require("webpack"); +const chalk = require("chalk"); +const replace = require('replace-in-file'); + +const { createWriteStream } = require("fs"); +const { copy, ensureDir, move, remove } = require("fs-extra"); +const path = require("path"); + +const { + BROWSER_DIR, + DIST_DIR, + EXTENSION_DIR, +} = require('./paths'); + +const webpackConfig = require('./webpack.config'); + +const EXTENSTION_FILES = ["assets", "devtool", "popup"]; +const EXTENSION_CORE_FILES = ["background.js"]; +const BUILD_ID_REPLACE = ["popup/popup.html", "devtool/devpanel.html"]; + +const env = process.env.NODE_ENV || 'development'; + +const preBuild = async ({ distPath, tmpPath }) => { + console.log(chalk.green('\nclean dist directory')); + await remove(distPath); + await ensureDir(distPath); + await ensureDir(tmpPath); +}; + +const buildProject = async ({ buildId, distPath, browserPath, tmpPath }) => { + + await copy(browserPath, tmpPath); + await remove(path.resolve(tmpPath, 'build.js')); + + console.log(chalk.green('\ncopy extension files successfully')); + + await Promise.all( + EXTENSTION_FILES.map(file => copy(path.join(EXTENSION_DIR, file), path.join(tmpPath, file))) + ); + + await Promise.all( + EXTENSION_CORE_FILES.map(file => copy(path.join(EXTENSION_DIR, 'core', file), path.join(tmpPath, file))) + ); + + await replace({ + files: BUILD_ID_REPLACE.map(file => path.join(tmpPath, file)), + from: /__BUILD_ID__/g, + to: buildId, + }); + + console.log('\nwebpack build started'); + + const compailer = webpack(webpackConfig({ + mode: env, + distPath: tmpPath, + })); + + await new Promise((resove, reject) => { + compailer.run((err, stats) => { + if (err) { + console.log(chalk.red("\nwebpack build failed", err)); + reject(); + } else { + resove(); + } + }); + }); + + console.log(chalk.green('\nwebpack build successfully')); + + const archive = archiver("zip", { zlib: { level: 9 } }); + const zipStream = createWriteStream(path.join(distPath, `ReactContextDevtool_${buildId}.zip`)); + + await new Promise((resolve, reject) => { + archive + .directory(tmpPath, false) + .on("error", (err) => reject(err)) + .pipe(zipStream); + archive.finalize(); + zipStream.on("close", () => resolve()); + }); + + console.log(chalk.green('\nzip created successfully')); +}; + +const postBuild = async ({ distPath, tmpPath }) => { + const unpackedDistPath = path.join(distPath, "unpacked"); + + await move(tmpPath, unpackedDistPath); +}; + +const startBuild = async (buildId) => { + + const distPath = path.join(DIST_DIR, buildId); + const tmpPath = path.join(distPath, 'tmp'); + const browserPath = path.join(BROWSER_DIR, buildId); + + try { + await preBuild({ distPath, tmpPath }); + + await buildProject({ buildId, distPath, browserPath, tmpPath }); + + await postBuild({ distPath, tmpPath }); + + } catch (err) { + console.log(chalk.red("build failed", err)); + } +}; + +module.exports = startBuild; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/build/paths.js b/src/components/react-context-devtool-master/react-context-devtool-master/build/paths.js new file mode 100644 index 0000000..fc6281d --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/build/paths.js @@ -0,0 +1,27 @@ +const path = require('path'); + + +// extension path +const EXTENSION_DIR = path.resolve(__dirname, '../extension'); + +// browser path +const BROWSER_DIR = path.resolve(__dirname, '../browser'); + +// dist path +const DIST_DIR = path.resolve(__dirname, '../dist'); + +// src paths +const SRC_DIR = path.resolve(__dirname, '../src'); +const COMPONENTS = path.resolve(SRC_DIR, 'components'); +const CONTAINERS = path.resolve(SRC_DIR, 'containers'); +const UTILS = path.resolve(SRC_DIR, 'utils'); + +module.exports = { + EXTENSION_DIR, + DIST_DIR, + SRC_DIR, + COMPONENTS, + UTILS, + CONTAINERS, + BROWSER_DIR, +}; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/build/webpack.config.js b/src/components/react-context-devtool-master/react-context-devtool-master/build/webpack.config.js new file mode 100644 index 0000000..01937f7 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/build/webpack.config.js @@ -0,0 +1,92 @@ +const path = require("path"); + +const webpack = require("webpack"); +const PATHS = require("./paths"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); + +const pkg = require("../package.json"); + +module.exports = ({ mode, distPath } = {}) => { + if (!distPath && process.env.DEV_FOR) { + distPath = path.resolve(PATHS.DIST_DIR, process.env.DEV_FOR, "unpacked"); + } + + const isDevelopment = mode === "development"; + + return { + mode, + devtool: isDevelopment ? "cheap-module-source-map" : false, + entry: { + injectGlobalHook: `${PATHS.EXTENSION_DIR}/core/injectGlobalHook.js`, + "react-context-devtool-helper": `${PATHS.EXTENSION_DIR}/core/helper.js`, + "devtool/devpanel": `${PATHS.SRC_DIR}/devpanel.index.js`, + "popup/popup": `${PATHS.SRC_DIR}/popup.index.js`, + }, + output: { + path: distPath, + filename: "[name].js", + publicPath: "/", + }, + module: { + rules: [ + { + test: /\.js$/, + include: PATHS.SRC_DIR, + exclude: /node_modules/, + loader: "babel-loader", + }, + { + test: /\.svg$/, + loader: "svg-inline-loader", + }, + { + test: /\.(sa|sc|c)ss$/, + use: [ + { + loader: MiniCssExtractPlugin.loader, + options: { + hmr: isDevelopment, + }, + }, + { + loader: 'css-loader', + options: { url: false } + }, + // { + // loader: "postcss-loader", + // options: { + // ident: "postcss", + // plugins: () => [ + // require("postcss-flexbugs-fixes"), + // require("postcss-preset-env")({ + // stage: 3, + // }), + // require("postcss-normalize"), + // ], + // }, + // }, + "sass-loader", + ], + }, + ], + }, + resolve: { + extensions: [".js"], + alias: { + Components: PATHS.COMPONENTS, + Utils: PATHS.UTILS, + Src: PATHS.SRC_DIR, + Containers: PATHS.CONTAINERS, + }, + }, + plugins: [ + new webpack.DefinePlugin({ + NODE_ENV: JSON.stringify(process.env.NODE_ENV), + PACKAGE_VERSION: JSON.stringify(pkg.version), + }), + new MiniCssExtractPlugin({ + filename: "[name].css", + }), + ], + }; +}; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/babel.config.js b/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/babel.config.js new file mode 100644 index 0000000..c059abf --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/babel.config.js @@ -0,0 +1,22 @@ +module.exports = { + plugins: [ + '@babel/plugin-syntax-dynamic-import', + [ + '@babel/plugin-transform-runtime', + { + regenerator: true, + }, + ], + ], + presets: [ + [ + '@babel/preset-env', + { + targets: { + node: 'current', + }, + }, + ], + '@babel/preset-react', + ], +}; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/package.json b/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/package.json new file mode 100644 index 0000000..bc5607c --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/package.json @@ -0,0 +1,35 @@ +{ + "name": "example", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "webpack-dev-server --mode development", + "build": "webpack --mode production" + }, + "author": "", + "license": "ISC", + "devDependencies": { + "@babel/core": "^7.8.4", + "@babel/plugin-syntax-dynamic-import": "^7.8.3", + "@babel/plugin-transform-runtime": "^7.8.3", + "@babel/preset-env": "^7.8.4", + "@babel/preset-react": "^7.8.3", + "babel-core": "^6.26.3", + "babel-loader": "^8.0.6", + "clean-webpack-plugin": "^3.0.0", + "css-loader": "^3.4.2", + "html-webpack-plugin": "^3.2.0", + "mini-css-extract-plugin": "^0.9.0", + "style-loader": "^1.1.3", + "webpack": "^4.41.6", + "webpack-cli": "^3.3.11", + "webpack-dev-middleware": "^3.7.2", + "webpack-dev-server": "^3.10.3" + }, + "dependencies": { + "react": "^16.12.0", + "react-context-devtool": "^1.0.1", + "react-dom": "^16.12.0" + } +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/public/index.html b/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/public/index.html new file mode 100644 index 0000000..3c5e92d --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/public/index.html @@ -0,0 +1,13 @@ + + + + + Webpack Report + + + +
+ + + + diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/src/App.js b/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/src/App.js new file mode 100644 index 0000000..08ead25 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/src/App.js @@ -0,0 +1,192 @@ +import React, { useEffect, useReducer, useState, useContext } from "react"; +import ContextDevTool from "react-context-devtool"; + +const MyContext1 = React.createContext({}); +const MyContext2 = React.createContext({}); + +MyContext1.displayName = "MyContext1"; +MyContext2.displayName = "MyContext2"; + +const demo = { + id: "0001", + type: "demo", + name: "Context Demo", +}; + +const Test = () => { + const [counter3, setCounter3] = React.useState(0); + const [counter4, setCounter4] = React.useState(0); + + return ( +
+ {/* */} + {/* */} + + {/* */} + + +
+ ); +}; + +class Test2 extends React.Component { + constructor(props) { + super(props); + + this.state = { + counter5: 0, + }; + } + + render() { + const { counter5 } = this.state; + const { id } = this.props; + // const { id } = this.context; + + return ( + + + + ); + } +} + +Test2.contextType = MyContext1; + +// function App() { +// const [counter1, setCounter1] = React.useState(0); +// const [counter2, setCounter2] = React.useState(0); + +// const updateCounter1 = () => { +// setCounter1(counter1 + 1); +// }; + +// const updateCounter2 = () => { +// setCounter2(counter2 + 1); +// }; + +// // useEffect(() => { +// // setInterval(() => { +// // setCounter2(counter2 + 1); +// // }, 200); +// // }, []) + +// return ( +// +// +// +// {/* +// { +// val => ( +// +// ) +// } +// */} +// +// +// +// +// +// +// +// ); +// } + +const initialState = {count: 0}; + +// let counter = 0; + +function myReducer(state, action) { + // counter++; + // console.log(counter); + switch (action.type) { + case 'increment': + return {count: state.count + 1}; + case 'decrement': + return {count: state.count - 1}; + default: + // throw new Error(); + } + + return state; +} + +function Counter() { + const [state, dispatch] = useReducer(myReducer, initialState); + // const dd = useContext(MyContext1); + // const [state2, dispatch3] = useReducer(reducer, initialState); + // const [abcd, setabcd] = useState(2); + + + return ( + <> + {/* Count: {dd.id} */} + Count: {state.count} + + + + ); +} + +const d = "a".repeat(1 * 1024 * 1024); + +class App extends React.Component { + constructor(props) { + super(props); + + this.state = { + counter1: 1, + }; + } + + render() { + const { counter1 } = this.state; + return ( + <> + {/* { + new Array(6000).fill().map((d, ind) =>
{ind}
) + } */} + {/* */} + {/* <> */} + {/* */} + {/* */} + + {/*
ssss
*/} + { + counter1 < 4 && + } + {/* { + counter1 < 5 && + } */} + + {/* */} + {/* */} + {/* */} + + ); + } +} + +export default App; \ No newline at end of file diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/src/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/src/index.js new file mode 100644 index 0000000..8349933 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/src/index.js @@ -0,0 +1,9 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; + +ReactDOM.render(, document.getElementById("root")); + +window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.helpers.loadHookHelper().then(() => { + window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.debugFiber(document.getElementById('root')) +}); diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/webpack.config.js b/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/webpack.config.js new file mode 100644 index 0000000..337c19b --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/example/csr/webpack.config.js @@ -0,0 +1,52 @@ +const path = require('path'); + +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const { CleanWebpackPlugin } = require('clean-webpack-plugin'); + +const PUBLIC_DIR = path.resolve(__dirname, './public'); +const DIST_DIR = path.resolve(__dirname, './dist'); +const CLIENT_DIR = path.resolve(__dirname, './src'); + +const PORT = 8091; + +module.exports = { + mode: 'development', + devtool: 'cheap-module-source-map', + entry: { + app: `${CLIENT_DIR}/index.js`, + }, + output: { + path: DIST_DIR, + filename: 'bundles/[name].[hash:8].js', + publicPath: '/', + }, + module: { + rules: [ + { + test: /\.js$/, + include: CLIENT_DIR, + exclude: /node_modules/, + loader: 'babel-loader', + }, + { + test: /\.(css)$/, + use: [MiniCssExtractPlugin.loader, 'css-loader'], + }, + ], + }, + resolve: { + extensions: ['.js'], + }, + devServer: { + port: PORT, + }, + plugins: [ + new CleanWebpackPlugin(), + new HtmlWebpackPlugin({ + filename: `${DIST_DIR}/index.html`, + template: `${PUBLIC_DIR}/index.html`, + }), + new MiniCssExtractPlugin(), + ], +}; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Black.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Black.ttf new file mode 100644 index 0000000..437b115 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Black.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-BlackItalic.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-BlackItalic.ttf new file mode 100644 index 0000000..5234835 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-BlackItalic.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Bold.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Bold.ttf new file mode 100644 index 0000000..221819b Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Bold.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-BoldItalic.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-BoldItalic.ttf new file mode 100644 index 0000000..9ae2bd2 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-BoldItalic.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-ExtraBold.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-ExtraBold.ttf new file mode 100644 index 0000000..80ea806 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-ExtraBold.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-ExtraBoldItalic.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-ExtraBoldItalic.ttf new file mode 100644 index 0000000..6c961e1 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-ExtraBoldItalic.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-ExtraLight.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-ExtraLight.ttf new file mode 100644 index 0000000..ca0bbb6 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-ExtraLight.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-ExtraLightItalic.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-ExtraLightItalic.ttf new file mode 100644 index 0000000..f3c1559 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-ExtraLightItalic.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Italic.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Italic.ttf new file mode 100644 index 0000000..eb4232a Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Italic.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Light.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Light.ttf new file mode 100644 index 0000000..990857d Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Light.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-LightItalic.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-LightItalic.ttf new file mode 100644 index 0000000..2096040 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-LightItalic.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Medium.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Medium.ttf new file mode 100644 index 0000000..6e079f6 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Medium.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-MediumItalic.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-MediumItalic.ttf new file mode 100644 index 0000000..0dc3ac9 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-MediumItalic.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Regular.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Regular.ttf new file mode 100644 index 0000000..8d443d5 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Regular.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-SemiBold.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-SemiBold.ttf new file mode 100644 index 0000000..f8a43f2 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-SemiBold.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-SemiBoldItalic.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-SemiBoldItalic.ttf new file mode 100644 index 0000000..336c56e Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-SemiBoldItalic.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Thin.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Thin.ttf new file mode 100644 index 0000000..b985875 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-Thin.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-ThinItalic.ttf b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-ThinItalic.ttf new file mode 100644 index 0000000..e488998 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/fonts/Montserrat-ThinItalic.ttf differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon128-disabled.png b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon128-disabled.png new file mode 100644 index 0000000..ad7ca17 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon128-disabled.png differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon128.png b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon128.png new file mode 100644 index 0000000..a8e3e6e Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon128.png differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon16-disabled.png b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon16-disabled.png new file mode 100644 index 0000000..7d9e36c Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon16-disabled.png differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon16.png b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon16.png new file mode 100644 index 0000000..ede82ff Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon16.png differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon32-disabled.png b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon32-disabled.png new file mode 100644 index 0000000..78e061d Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon32-disabled.png differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon32.png b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon32.png new file mode 100644 index 0000000..b473ff0 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon32.png differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon48-disabled.png b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon48-disabled.png new file mode 100644 index 0000000..1dd17b5 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon48-disabled.png differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon48.png b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon48.png new file mode 100644 index 0000000..3e62677 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/extension/assets/icons/icon48.png differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/core/background.js b/src/components/react-context-devtool-master/react-context-devtool-master/extension/core/background.js new file mode 100644 index 0000000..be9e8aa --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/extension/core/background.js @@ -0,0 +1,223 @@ +/* global chrome */ + +const DATA_EVENT = "__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK_DATA_EVENT"; +const ACTIVATE_EXTENSTION = "ACTIVATE_EXTENSTION"; +const APP_DATA_EVENT = "APP_DATA"; +const ADD_APP_DATA_EVENT = "ADD_APP_DATA"; +const INIT_DEVPANEL_EVENT = "INIT_DEVPANEL"; +const DEVPANEL_DATA_EVENT = "DEVPANEL_DATA"; +const INIT_POPUP_EVENT = "INIT_POPUP"; +const POPUP_DATA_EVENT = "POPUP_DATA"; +const DISPATCH_EVENT = "DISPATCH_EVENT"; + +const MAX_DATA_SIZE = 5 * 1024 * 1024; // 50MB + +const connections = {}; +const catchData = {}; +const chunkData = {}; + +chrome.runtime.onConnect.addListener((port) => { + const panelListener = event => { + if ( + event.type === DATA_EVENT && + event.subType === INIT_DEVPANEL_EVENT + ) { + connections[event.tabId] = port; + sendData("DEVTOOL", event.tabId); + } + + if ( + event.type === DATA_EVENT && + event.subType === DISPATCH_EVENT + ) { + sendDataToContent(event); + } + }; + + port.onMessage.addListener(panelListener); + + port.onDisconnect.addListener(function () { + port.onMessage.removeListener(panelListener); + + // remove connection object + const tabs = Object.keys(connections); + for (let i = 0, len = tabs.length; i < len; i++) { + if (connections[tabs[i]] == port) { + delete connections[tabs[i]]; + break; + } + } + }); +}); + +chrome.tabs.onRemoved.addListener((tabId) => { + if (catchData[tabId]) { + delete catchData[tabId]; + } +}); + +chrome.runtime.onMessage.addListener((request, sender) => { + if (request.type === DATA_EVENT && request.subType) { + if (request.subType === ACTIVATE_EXTENSTION) { + setAppPopup(true, sender.tab.id); + } else if ( + request.subType === APP_DATA_EVENT || + request.subType === ADD_APP_DATA_EVENT + ) { + saveCatchData(request, sender.tab, request.subType); + sendData("DEVTOOL", sender.tab.id); + sendData("POPUP", sender.tab.id); + } else if (request.subType === INIT_POPUP_EVENT) { + sendData("POPUP", request.tabId); + } else if (request.subType === DISPATCH_EVENT) { + sendDataToContent(request); + } + } +}); + +const sendDataToContent = (event) => { + chrome.tabs.sendMessage(event.tabId, event); +}; + +const transferTo = (to, tabId, params) => { + if (to === "DEVTOOL") { + if (tabId in connections) { + connections[tabId].postMessage({ + type: DATA_EVENT, + subType: DEVPANEL_DATA_EVENT, + ...params + }); + } + } else if (to === "POPUP") { + chrome.runtime.sendMessage({ + type: DATA_EVENT, + subType: POPUP_DATA_EVENT, + tabId, + ...params + }); + } +} + +const sendData = (to, tabId) => { + const dataToSend = JSON.stringify(catchData[tabId] || {}); + + try { + const params = { + data: dataToSend, + }; + transferTo(to, tabId, params); + } catch (err) { + if ( + err.message.includes( + "Message length exceeded maximum allowed length" + ) + ) { + + const chunkCount = Math.ceil(dataToSend.length / MAX_DATA_SIZE); + + for (let i = 0; i < chunkCount; i++) { + const params = { + split: "chunk", + chunk: i, + data: dataToSend.slice(i * MAX_DATA_SIZE, (i + 1) * MAX_DATA_SIZE), + }; + transferTo(to, tabId, params); + } + + transferTo(to, tabId, { + split: "end", + }); + + } else { + console.error(err); + } + } +} + +const saveCatchData = (request, { id: tabId, title }, subType) => { + + let { + data, + split, + } = request; + + if (!catchData[tabId]) { + catchData[tabId] = { + tab: { + id: tabId, + }, + useReducer: {}, + context: {}, + }; + chunkData[tabId] = []; + } + + if (split === "chunk") { + chunkData[tabId].push(data); + return; + } + + if (split === "end") { + data = chunkData[tabId].join('') || "{}"; + chunkData[tabId] = []; + } + + catchData[tabId].tab.title = title; + const parsedData = JSON.parse(data); + + if (parsedData.context) { + const cacheContext = catchData[tabId].context; + Object.keys(parsedData.context).forEach(key => { + if (parsedData.context[key].valueChanged) { + if (!cacheContext[key]) { + cacheContext[key] = { + oldValue: {}, + newValue: {}, + } + } + + cacheContext[key].oldValue = cacheContext[key].newValue; + cacheContext[key].newValue = parsedData.context[key]; + } + }); + + if (subType !== ADD_APP_DATA_EVENT) { + Object.keys(cacheContext).forEach(key => { + if (!parsedData.context[key] && cacheContext[key].newValue.remove) { + delete cacheContext[key]; + } + }); + } + } + + if (parsedData.useReducer) { + const cacheUseReducer = catchData[tabId].useReducer; + Object.keys(parsedData.useReducer).forEach(key => { + if (parsedData.useReducer[key].valueChanged) { + cacheUseReducer[key] = parsedData.useReducer[key]; + } + }); + + Object.keys(cacheUseReducer).forEach(key => { + if (!parsedData.useReducer[key]) { + delete cacheUseReducer[key]; + } + }); + } +}; + +const setAppPopup = (isActive, tabId) => { + chrome.browserAction.setIcon({ + tabId, + path: { + "16": `assets/icons/icon16${isActive ? "" : "-disabled"}.png`, + "32": `assets/icons/icon32${isActive ? "" : "-disabled"}.png`, + "48": `assets/icons/icon48${isActive ? "" : "-disabled"}.png`, + "128": `assets/icons/icon128${isActive ? "" : "-disabled"}.png`, + }, + }); + chrome.browserAction.setPopup({ + tabId, + popup: "popup/popup.html", + }); +}; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/core/helper.js b/src/components/react-context-devtool-master/react-context-devtool-master/extension/core/helper.js new file mode 100644 index 0000000..9a9b926 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/extension/core/helper.js @@ -0,0 +1,9 @@ +import reactDebugTool from "./reactDebugTool"; + +const { inspectHooksOfFiber } = reactDebugTool; + +window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.hookHelperLoaded = true; + +window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.helpers.inspectHooksOfFiber = inspectHooksOfFiber; + +window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.onHookHelperLoad(); diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/core/hook.js b/src/components/react-context-devtool-master/react-context-devtool-master/extension/core/hook.js new file mode 100644 index 0000000..ea5f845 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/extension/core/hook.js @@ -0,0 +1,384 @@ +export function installHook(target) { + const DATA_EVENT = "__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK_DATA_EVENT"; + const DISPATCH_EVENT = "DISPATCH_EVENT"; + + const fiberNodeToDebug = { + useReducer: {}, + context: {}, + }; + + let debugOptions = { + debugReducer: true, + debugContext: true, + disable: false, + disableAutoMode: false, + }; + + const dispatchAction = (event) => { + if(event.type === "useReducer" && fiberNodeToDebug.useReducer[event.debugId]) { + fiberNodeToDebug.useReducer[event.debugId].hook.queue.dispatch(event.data); + } + }; + + window.addEventListener('message', event => { + if (event.data.type === DATA_EVENT && event.data.subType === DISPATCH_EVENT) { + dispatchAction(event.data.data); + } + }); + + // copy object is used to detect compoment is removed + const fiberNodeToDebugCopy = { + useReducer: {}, + context: {}, + }; + + const uniqId = (prefix) => { + let counter = 0; + + return () => { + counter += 1; + return `${prefix}_${counter}`; + }; + }; + + const getUniqId = uniqId("debugId"); + + const sendDataToDevtool = () => { + const helpers = window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.helpers; + + const dataToSend = {}; + + dataToSend.context = Object.keys(fiberNodeToDebug.context).reduce((memo, key) => { + if (fiberNodeToDebug.context[key].valueChanged) { + memo[key] = { + value: fiberNodeToDebug.context[key].value, + displayName: fiberNodeToDebug.context[key].displayName, + valueChanged: fiberNodeToDebug.context[key].valueChanged, + remove: true, + }; + } else { + memo[key] = { + valueChanged: fiberNodeToDebug.context[key].valueChanged, + remove: true, + }; + } + return memo; + }, {}); + + dataToSend.useReducer = Object.keys(fiberNodeToDebug.useReducer).reduce((memo, key) => { + if (fiberNodeToDebug.useReducer[key].valueChanged) { + memo[key] = { + actions: fiberNodeToDebug.useReducer[key].actions, + state: fiberNodeToDebug.useReducer[key].state, + valueChanged: fiberNodeToDebug.useReducer[key].valueChanged, + displayName: fiberNodeToDebug.useReducer[key].displayName, + }; + } else { + memo[key] = { + valueChanged: fiberNodeToDebug.useReducer[key].valueChanged, + }; + } + return memo; + }, {}); + + window.postMessage({ + type: "__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK_EVENT", + subType: "APP_DATA", + data: helpers.parseData(dataToSend), + }, "*"); + }; + + let renderer = null; + + /** + * Debug for React useReducer API + * + * @param {object} hook + */ + const doWorkWithHooks = (hook) => { + if (hook.__reactContextDevtoolHookType == "useReducer") { + let debugId = hook.queue.__reactContextDevtoolDebugId; + + if (!debugId) { + const displayName = hook.queue.lastRenderedReducer.name; + const currentReducer = hook.queue.lastRenderedReducer.bind(hook.queue); + hook.queue.lastRenderedReducer = (state, action, ...rest) => { + const debugObj = fiberNodeToDebug.useReducer[hook.queue.__reactContextDevtoolDebugId]; + if (debugObj && !debugObj.useDispatch) { + debugObj.actions.push(action); + } + currentReducer(state, action, ...rest); + }; + + const currentDispatch = hook.queue.dispatch.bind(hook.queue); + hook.queue.dispatch = (action, ...rest) => { + const debugObj = fiberNodeToDebug.useReducer[hook.queue.__reactContextDevtoolDebugId]; + if (debugObj) { + debugObj.actions.push(action); + debugObj.useDispatch = true; + } + currentDispatch(action, ...rest); + }; + + debugId = getUniqId(); + hook.queue.__reactContextDevtoolDebugId = debugId; + + fiberNodeToDebugCopy.useReducer[debugId] = { + actions: [{ initialState: true }], + hook, + state: [], + displayName, + valueChanged: true, + }; + } + + const debugObj = fiberNodeToDebug.useReducer[debugId] || fiberNodeToDebugCopy.useReducer[debugId]; + + fiberNodeToDebugCopy.useReducer[debugId] = debugObj; + + debugObj.hook = hook; + + if (debugObj.state.length) { + const valueChanged = debugObj.state[debugObj.state.length - 1] !== hook.queue.lastRenderedState; + debugObj.valueChanged = valueChanged; + if (!valueChanged) { + // action dispatched but return same state or wrong state handling + const diff = debugObj.actions.length - debugObj.state.length; + if (diff > 0) { + for (let i = 0; i < diff; i++) { + debugObj.state.push(debugObj.state[debugObj.state.length - 1]); + } + debugObj.valueChanged = true; + } + return; + } + } + + debugObj.state.push(hook.queue.lastRenderedState); + } + }; + + /** + * Debug for React Context API + * + * @param {object} node + */ + const doWorkWithContextProvider = (node) => { + if (!node.type._context.__reactContextDevtoolDebugId) { + node.type._context.__reactContextDevtoolDebugId = getUniqId(); + } + + const debugId = node.type._context.__reactContextDevtoolDebugId; + + const valueChanged = !( + fiberNodeToDebug.context[debugId] && + node.pendingProps.value === fiberNodeToDebug.context[debugId].value + ); + + fiberNodeToDebugCopy.context[debugId] = { + valueChanged, + value: node.pendingProps.value, + displayName: + node.pendingProps.displayName || + node.type._context.displayName || + debugId, + }; + }; + + /** + * Find supported element and attach devtool + * + * @param {object} fiberNode + */ + const doWorkWithFiberNode = (fiberNode) => { + if (!fiberNode) { + return; + } + + const { memoizedState, tag } = fiberNode; + + if ( + debugOptions.debugReducer && + renderer && + window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.hookHelperLoaded && + memoizedState && + Object.hasOwnProperty.call(memoizedState, "baseState") + ) { + window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.helpers.inspectHooksOfFiber( + fiberNode, + renderer + ); + + let temp = memoizedState; + while (temp && temp.queue) { + doWorkWithHooks(temp); + temp = temp.next; + } + } + + /** + * https://github.com/facebook/react/tree/master/packages/react-reconciler/src/ReactWorkTags.js + * + */ + if (debugOptions.debugContext && tag === 10) { + doWorkWithContextProvider(fiberNode); + } + }; + + /** + * Traverse each fiber node and attach devtool + * + * https://github.com/facebook/react/issues/7942 + * + * TODO: remove recurstion and implement this. + * currenly find issues with fiber tree traversal algorithm + * + * @param {fiberNode} node + */ + // function traverseFiberTree(fiberRoot) { + // let root = fiberRoot.current; + // let node = fiberRoot.current; + + // while (true) { + // doWorkWithFiberNode(node); + + // if (node.child) { + // node = node.child; + // continue; + // } + // if (node === root) { + // return; + // } + // while (!node.sibling) { + // if (!node.return || node.return === root) { + // return; + // } + // node = node.return; + // } + // node = node.sibling; + // } + // }; + + const onCommitFiberRoot = (fiberRoot) => { + try { + function traverseFiberTree(node) { + if (!node) { + return null; + } + doWorkWithFiberNode(node); + + traverseFiberTree(node.sibling); + traverseFiberTree(node.child); + } + + fiberNodeToDebugCopy.useReducer = {}; + fiberNodeToDebugCopy.context = {}; + + traverseFiberTree(fiberRoot.current); + + fiberNodeToDebug.useReducer = fiberNodeToDebugCopy.useReducer; + fiberNodeToDebug.context = fiberNodeToDebugCopy.context; + + sendDataToDevtool(); + } catch(err) { + if (err.message !== "Maximum call stack size exceeded") { + console.error(err); + } + } + }; + + const debugFiber = (container, options) => { + debugOptions = { ...debugOptions, ...options }; + + if ( + debugOptions.disable || + debugOptions.disableAutoMode || + typeof window === 'undefined' || + (!debugOptions.debugReducer && !debugOptions.debugContext) + ) { + return false; + } + + /** + * Find fiber tree from dom element + * + */ + let fiberRoot = null; + if (container._internalRoot) { + fiberRoot = container._internalRoot; + } else if (container._reactRootContainer) { + const { + _reactRootContainer: { _internalRoot }, + } = container; + fiberRoot = _internalRoot; + } + + if (!fiberRoot) { + const rootKey = Object.keys(container).find((k) => + k.startsWith("__reactContainer") + ); + if (rootKey) { + fiberRoot = container[rootKey]; + fiberRoot = fiberRoot.stateNode; + } + } + + if (!fiberRoot) { + console.error( + "Fiber tree is not found in dom element. please use valid dom element that used in ReactDom.render method" + ); + return; + } + + if (debugOptions.debugReducer && !window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.hookHelperLoaded) { + console.log( + "useReducer hook is not working due to some internal issue. please report bug or create issue." + ); + } + + const reactDebtoolGlobalhook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__; + + if (!reactDebtoolGlobalhook) { + console.log("Please install React Developer Tools extenstion."); + return; + } + + /** + * set react renderer + */ + if (reactDebtoolGlobalhook.renderers) { + const firstRendererKey = reactDebtoolGlobalhook.renderers.keys().next().value; + renderer = reactDebtoolGlobalhook.renderers.get(firstRendererKey).currentDispatcherRef; + } + + if (debugOptions.debugReducer && !renderer) { + console.error( + "useReducer hook debugger is not working due to some internal issue. please report an issue" + ); + } + + onCommitFiberRoot(fiberRoot); + + /** + * Register react dom commit fiber callback + * + */ + if ( + reactDebtoolGlobalhook && + typeof reactDebtoolGlobalhook.onCommitFiberRoot === "function" + ) { + reactDebtoolGlobalhook.onCommitFiberRoot = ((debugFunction) => ( + rendererID, + root, + ...args + ) => { + onCommitFiberRoot(root); + return debugFunction(rendererID, root, ...args); + })(reactDebtoolGlobalhook.onCommitFiberRoot); + } else { + console.error("onCommitFiberRoot is not available in ReactDOM library"); + } + }; + + target.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.debugFiber = debugFiber; +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/core/injectGlobalHook.js b/src/components/react-context-devtool-master/react-context-devtool-master/extension/core/injectGlobalHook.js new file mode 100644 index 0000000..d7fe187 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/extension/core/injectGlobalHook.js @@ -0,0 +1,241 @@ +import { installHook } from "./hook"; + +/** + * Chrome limit sendMessage size to 64MB + */ +const MAX_DATA_SIZE = 5 * 1024 * 1024; // 50MB +const HOOK_EVENT = "__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK_EVENT"; +const DATA_EVENT = "__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK_DATA_EVENT"; +const ADD_APP_DATA_EVENT = "ADD_APP_DATA"; +const APP_DATA_EVENT = "APP_DATA"; +const LOAD_HOOK_HELPER_EVENT = "LOAD_HOOK_HELPER"; + +let isExtensionActive = false; + +/** + * This script runs before the element is created, + * so we add the script to instead. + * + * @param {string} code + */ +const injectCode = (code) => { + const script = document.createElement("script"); + script.textContent = code; + + document.documentElement.appendChild(script); + script.parentNode.removeChild(script); +}; + +const loadHelpers = () => { + const helperUrl = chrome.runtime.getURL("react-context-devtool-helper.js"); + + return fetch(helperUrl) + .then((res) => res.text()) + .then((text) => { + injectCode(text); + }); +}; + +/** + * Depricated event REACT_CONTEXT_DEVTOOL_EXTENSION. + * + * removed in future release + */ +function lagecyScriptToInject() { + window._REACT_CONTEXT_DEVTOOL = (data) => { + const helpers = window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.helpers; + window.postMessage( + { + type: "__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK_EVENT", + subType: "ADD_APP_DATA", + data: helpers.parseData({ + context: { + [data.id]: { + displayName: data.displayName, + value: data.values, + valueChanged: true, + remove: false, + }, + }, + }), + }, + "*" + ); + }; +} + +function injectHelpers(target) { + const isHTMLElement = function (el) { + if ("HTMLElement" in window) { + return el instanceof HTMLElement; + } else { + return ( + typeof el === "object" && + el.nodeType === 1 && + typeof el.nodeName === "string" + ); + } + }; + + const parseData = (data) => { + return JSON.stringify(data, function (k, v) { + if (typeof v === "function") { + return "function () {}"; + } + if (isHTMLElement(v)) { + return `<${v.tagName}> HTMLElemet`; + } + return v; + }); + }; + + const loadHookHelper = () => { + target.postMessage( + { + type: "__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK_EVENT", + subType: "LOAD_HOOK_HELPER", + }, + "*" + ); + + return new Promise((resolve, reject) => { + target.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.onHookHelperLoad = () => { + if (target.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.hookHelperLoaded) { + resolve(); + } else { + reject(); + } + }; + }); + }; + + target.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.helpers = { + parseData, + loadHookHelper, + }; +} + +/** + * use react devtool internals for debug + * + * 1. user installed react-devtool then we return + * 2. user not installed react-devtool then we inject devtool + * global hook becasue we used renderers and onCommitFiberRoot + * to debug. + * + * - When react-context-devtool is loaded first then? + * - react devtool is override hook so react devtool is not break. + * + * @param {window} target + */ +/** + * Issue with loading order in react developer tool and + * react-context-devtool so currenly not using this feature + * ;(${injectReactDevtoolHook.toString()}(window)) + * + */ +function injectReactDevtoolHook(target) { + if (target.__REACT_DEVTOOLS_GLOBAL_HOOK__) { + return; + } + + const renderers = new Map(); + let uidCounter = 0; + + const inject = (renderer) => { + const id = ++uidCounter; + renderers.set(id, renderer); + }; + + target.__REACT_DEVTOOLS_GLOBAL_HOOK__ = { + isDisabled: false, + supportsFiber: true, + renderers, + inject, + onCommitFiberRoot: function () {}, + onCommitFiberUnmount: function () {}, + }; +} + +const initHook = ` + window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK = { + hookHelperLoaded: false, + onHookHelperLoad: () => {}, + }; +`; + +injectCode(` + ${initHook} + ;(${injectHelpers.toString()}(window)) + ;(${lagecyScriptToInject.toString()}(window)) + ;(${installHook.toString()}(window)) +`); + +window.addEventListener( + "message", + function (event) { + if (event.source != window) return; + + if (event.data.type === HOOK_EVENT) { + if (!isExtensionActive) { + chrome.runtime.sendMessage({ + type: DATA_EVENT, + subType: "ACTIVATE_EXTENSTION", + }); + isExtensionActive = true; + } + + if (event.data.subType === LOAD_HOOK_HELPER_EVENT) { + loadHelpers(); + return; + } + + if ( + event.data.subType === APP_DATA_EVENT || + event.data.subType === ADD_APP_DATA_EVENT + ) { + try { + chrome.runtime.sendMessage({ + type: DATA_EVENT, + subType: event.data.subType, + data: event.data.data, + }); + } catch (err) { + if ( + err.message.includes( + "Message length exceeded maximum allowed length" + ) + ) { + const { data } = event.data; + const chunkCount = Math.ceil(data.length / MAX_DATA_SIZE); + + for (let i = 0; i < chunkCount; i++) { + chrome.runtime.sendMessage({ + type: DATA_EVENT, + subType: event.data.subType, + split: "chunk", + chunk: i, + data: data.slice(i * MAX_DATA_SIZE, (i + 1) * MAX_DATA_SIZE), + }); + } + + chrome.runtime.sendMessage({ + type: DATA_EVENT, + subType: event.data.subType, + split: "end", + }); + } else { + console.error(err); + } + } + } + } + }, + false +); + +chrome.runtime.onMessage.addListener(function ( + request +) { + window.postMessage(request); +}); diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/core/reactDebugTool.js b/src/components/react-context-devtool-master/react-context-devtool-master/extension/core/reactDebugTool.js new file mode 100644 index 0000000..6b68680 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/extension/core/reactDebugTool.js @@ -0,0 +1,792 @@ +/** @license React v16.13.1 + * react-debug-tools.development.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +"use strict"; + +(function () { + "use strict"; + + var ErrorStackParser = require("error-stack-parser"); + + var NoMode = 0; + + // ATTENTION + // When adding new symbols to this file, + // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols' + // The Symbol used to tag the ReactElement-like types. If there is no native Symbol + // nor polyfill, then a plain number is used for performance. + var REACT_ELEMENT_TYPE = 0xeac7; + var REACT_PORTAL_TYPE = 0xeaca; + var REACT_FRAGMENT_TYPE = 0xeacb; + var REACT_STRICT_MODE_TYPE = 0xeacc; + var REACT_PROFILER_TYPE = 0xead2; + var REACT_PROVIDER_TYPE = 0xeacd; + var REACT_CONTEXT_TYPE = 0xeace; + var REACT_FORWARD_REF_TYPE = 0xead0; + var REACT_SUSPENSE_TYPE = 0xead1; + var REACT_SUSPENSE_LIST_TYPE = 0xead8; + var REACT_MEMO_TYPE = 0xead3; + var REACT_LAZY_TYPE = 0xead4; + var REACT_BLOCK_TYPE = 0xead9; + var REACT_SERVER_BLOCK_TYPE = 0xeada; + var REACT_FUNDAMENTAL_TYPE = 0xead5; + var REACT_RESPONDER_TYPE = 0xead6; + var REACT_SCOPE_TYPE = 0xead7; + var REACT_OPAQUE_ID_TYPE = 0xeae0; + var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1; + var REACT_OFFSCREEN_TYPE = 0xeae2; + var REACT_LEGACY_HIDDEN_TYPE = 0xeae3; + + if (typeof Symbol === "function" && Symbol.for) { + var symbolFor = Symbol.for; + REACT_ELEMENT_TYPE = symbolFor("react.element"); + REACT_PORTAL_TYPE = symbolFor("react.portal"); + REACT_FRAGMENT_TYPE = symbolFor("react.fragment"); + REACT_STRICT_MODE_TYPE = symbolFor("react.strict_mode"); + REACT_PROFILER_TYPE = symbolFor("react.profiler"); + REACT_PROVIDER_TYPE = symbolFor("react.provider"); + REACT_CONTEXT_TYPE = symbolFor("react.context"); + REACT_FORWARD_REF_TYPE = symbolFor("react.forward_ref"); + REACT_SUSPENSE_TYPE = symbolFor("react.suspense"); + REACT_SUSPENSE_LIST_TYPE = symbolFor("react.suspense_list"); + REACT_MEMO_TYPE = symbolFor("react.memo"); + REACT_LAZY_TYPE = symbolFor("react.lazy"); + REACT_BLOCK_TYPE = symbolFor("react.block"); + REACT_SERVER_BLOCK_TYPE = symbolFor("react.server.block"); + REACT_FUNDAMENTAL_TYPE = symbolFor("react.fundamental"); + REACT_RESPONDER_TYPE = symbolFor("react.responder"); + REACT_SCOPE_TYPE = symbolFor("react.scope"); + REACT_OPAQUE_ID_TYPE = symbolFor("react.opaque.id"); + REACT_DEBUG_TRACING_MODE_TYPE = symbolFor("react.debug_trace_mode"); + REACT_OFFSCREEN_TYPE = symbolFor("react.offscreen"); + REACT_LEGACY_HIDDEN_TYPE = symbolFor("react.legacy_hidden"); + } + + var FunctionComponent = 0; + var ContextProvider = 10; + var ForwardRef = 11; + var SimpleMemoComponent = 15; + var Block = 22; + + var hookLog = []; // Primitives + + var primitiveStackCache = null; + var currentFiber = null; + + function getPrimitiveStackCache() { + // This initializes a cache of all primitive hooks so that the top + // most stack frames added by calling the primitive hook can be removed. + if (primitiveStackCache === null) { + var cache = new Map(); + var readHookLog; + + try { + // Use all hooks here to add them to the hook log. + Dispatcher.useContext({ + _currentValue: null, + }); + Dispatcher.useState(null); + Dispatcher.useReducer(function (s, a) { + return s; + }, null); + Dispatcher.useRef(null); + Dispatcher.useLayoutEffect(function () {}); + Dispatcher.useEffect(function () {}); + Dispatcher.useImperativeHandle(undefined, function () { + return null; + }); + Dispatcher.useDebugValue(null); + Dispatcher.useCallback(function () {}); + Dispatcher.useMemo(function () { + return null; + }); + Dispatcher.useMutableSource( + { + _source: {}, + _getVersion: function () { + return 1; + }, + _workInProgressVersionPrimary: null, + _workInProgressVersionSecondary: null, + }, + function () { + return null; + }, + function () { + return function () {}; + } + ); + } finally { + readHookLog = hookLog; + hookLog = []; + } + + for (var i = 0; i < readHookLog.length; i++) { + var hook = readHookLog[i]; + cache.set(hook.primitive, ErrorStackParser.parse(hook.stackError)); + } + + primitiveStackCache = cache; + } + + return primitiveStackCache; + } + + var currentHook = null; + + function nextHook() { + var hook = currentHook; + + if (hook !== null) { + currentHook = hook.next; + } + + return hook; + } + + function readContext(context, observedBits) { + // For now we don't expose readContext usage in the hooks debugging info. + return context._currentValue; + } + + function useContext(context, observedBits) { + hookLog.push({ + primitive: "Context", + stackError: new Error(), + value: context._currentValue, + }); + return context._currentValue; + } + + function useState(initialState) { + var hook = nextHook(); + var state = + hook !== null + ? hook.memoizedState + : typeof initialState === "function" // $FlowFixMe: Flow doesn't like mixed types + ? initialState() + : initialState; + name; + hookLog.push({ + primitive: "State", + stackError: new Error(), + value: state, + }); + return [state, function (action) {}]; + } + + function useReducer(reducer, initialArg, init) { + var hook = nextHook(); + var state; + + if (hook !== null) { + state = hook.memoizedState; + } else { + state = init !== undefined ? init(initialArg) : initialArg; + } + + if (hook) { + hook.__reactContextDevtoolHookType = "useReducer"; + } + + hookLog.push({ + primitive: "Reducer", + stackError: new Error(), + value: state, + }); + return [state, function (action) {}]; + } + + function useRef(initialValue) { + var hook = nextHook(); + var ref = + hook !== null + ? hook.memoizedState + : { + current: initialValue, + }; + hookLog.push({ + primitive: "Ref", + stackError: new Error(), + value: ref.current, + }); + return ref; + } + + function useLayoutEffect(create, inputs) { + nextHook(); + hookLog.push({ + primitive: "LayoutEffect", + stackError: new Error(), + value: create, + }); + } + + function useEffect(create, inputs) { + nextHook(); + hookLog.push({ + primitive: "Effect", + stackError: new Error(), + value: create, + }); + } + + function useImperativeHandle(ref, create, inputs) { + nextHook(); // We don't actually store the instance anywhere if there is no ref callback + // and if there is a ref callback it might not store it but if it does we + // have no way of knowing where. So let's only enable introspection of the + // ref itself if it is using the object form. + + var instance = undefined; + + if (ref !== null && typeof ref === "object") { + instance = ref.current; + } + + hookLog.push({ + primitive: "ImperativeHandle", + stackError: new Error(), + value: instance, + }); + } + + function useDebugValue(value, formatterFn) { + hookLog.push({ + primitive: "DebugValue", + stackError: new Error(), + value: typeof formatterFn === "function" ? formatterFn(value) : value, + }); + } + + function useCallback(callback, inputs) { + var hook = nextHook(); + hookLog.push({ + primitive: "Callback", + stackError: new Error(), + value: hook !== null ? hook.memoizedState[0] : callback, + }); + return callback; + } + + function useMemo(nextCreate, inputs) { + var hook = nextHook(); + var value = hook !== null ? hook.memoizedState[0] : nextCreate(); + hookLog.push({ + primitive: "Memo", + stackError: new Error(), + value: value, + }); + return value; + } + + function useMutableSource(source, getSnapshot, subscribe) { + // useMutableSource() composes multiple hooks internally. + // Advance the current hook index the same number of times + // so that subsequent hooks have the right memoized state. + nextHook(); // MutableSource + + nextHook(); // State + + nextHook(); // Effect + + nextHook(); // Effect + + var value = getSnapshot(source._source); + hookLog.push({ + primitive: "MutableSource", + stackError: new Error(), + value: value, + }); + return value; + } + + function useResponder(responder, listenerProps) { + // Don't put the actual event responder object in, just its displayName + var value = { + responder: responder.displayName || "EventResponder", + props: listenerProps, + }; + hookLog.push({ + primitive: "Responder", + stackError: new Error(), + value: value, + }); + return { + responder: responder, + props: listenerProps, + }; + } + + function useTransition(config) { + // useTransition() composes multiple hooks internally. + // Advance the current hook index the same number of times + // so that subsequent hooks have the right memoized state. + nextHook(); // State + + nextHook(); // Callback + + hookLog.push({ + primitive: "Transition", + stackError: new Error(), + value: config, + }); + return [function (callback) {}, false]; + } + + function useDeferredValue(value, config) { + // useDeferredValue() composes multiple hooks internally. + // Advance the current hook index the same number of times + // so that subsequent hooks have the right memoized state. + nextHook(); // State + + nextHook(); // Effect + + hookLog.push({ + primitive: "DeferredValue", + stackError: new Error(), + value: value, + }); + return value; + } + + function useOpaqueIdentifier() { + var hook = nextHook(); // State + + if (currentFiber && currentFiber.mode === NoMode) { + nextHook(); // Effect + } + + var value = hook === null ? undefined : hook.memoizedState; + + if (value && value.$$typeof === REACT_OPAQUE_ID_TYPE) { + value = undefined; + } + + hookLog.push({ + primitive: "OpaqueIdentifier", + stackError: new Error(), + value: value, + }); + return value; + } + + var Dispatcher = { + readContext: readContext, + useCallback: useCallback, + useContext: useContext, + useEffect: useEffect, + useImperativeHandle: useImperativeHandle, + useDebugValue: useDebugValue, + useLayoutEffect: useLayoutEffect, + useMemo: useMemo, + useReducer: useReducer, + useRef: useRef, + useState: useState, + useResponder: useResponder, + useTransition: useTransition, + useMutableSource: useMutableSource, + useDeferredValue: useDeferredValue, + useOpaqueIdentifier: useOpaqueIdentifier, + }; // Inspect + + // Don't assume + // + // We can't assume that stack frames are nth steps away from anything. + // E.g. we can't assume that the root call shares all frames with the stack + // of a hook call. A simple way to demonstrate this is wrapping `new Error()` + // in a wrapper constructor like a polyfill. That'll add an extra frame. + // Similar things can happen with the call to the dispatcher. The top frame + // may not be the primitive. Likewise the primitive can have fewer stack frames + // such as when a call to useState got inlined to use dispatcher.useState. + // + // We also can't assume that the last frame of the root call is the same + // frame as the last frame of the hook call because long stack traces can be + // truncated to a stack trace limit. + var mostLikelyAncestorIndex = 0; + + function findSharedIndex(hookStack, rootStack, rootIndex) { + var source = rootStack[rootIndex].source; + + hookSearch: for (var i = 0; i < hookStack.length; i++) { + if (hookStack[i].source === source) { + // This looks like a match. Validate that the rest of both stack match up. + for ( + var a = rootIndex + 1, b = i + 1; + a < rootStack.length && b < hookStack.length; + a++, b++ + ) { + if (hookStack[b].source !== rootStack[a].source) { + // If not, give up and try a different match. + continue hookSearch; + } + } + + return i; + } + } + + return -1; + } + + function findCommonAncestorIndex(rootStack, hookStack) { + var rootIndex = findSharedIndex( + hookStack, + rootStack, + mostLikelyAncestorIndex + ); + + if (rootIndex !== -1) { + return rootIndex; + } // If the most likely one wasn't a hit, try any other frame to see if it is shared. + // If that takes more than 5 frames, something probably went wrong. + + for (var i = 0; i < rootStack.length && i < 5; i++) { + rootIndex = findSharedIndex(hookStack, rootStack, i); + + if (rootIndex !== -1) { + mostLikelyAncestorIndex = i; + return rootIndex; + } + } + + return -1; + } + + function isReactWrapper(functionName, primitiveName) { + if (!functionName) { + return false; + } + + var expectedPrimitiveName = "use" + primitiveName; + + if (functionName.length < expectedPrimitiveName.length) { + return false; + } + + return ( + functionName.lastIndexOf(expectedPrimitiveName) === + functionName.length - expectedPrimitiveName.length + ); + } + + function findPrimitiveIndex(hookStack, hook) { + var stackCache = getPrimitiveStackCache(); + var primitiveStack = stackCache.get(hook.primitive); + + if (primitiveStack === undefined) { + return -1; + } + + for (var i = 0; i < primitiveStack.length && i < hookStack.length; i++) { + if (primitiveStack[i].source !== hookStack[i].source) { + // If the next two frames are functions called `useX` then we assume that they're part of the + // wrappers that the React packager or other packages adds around the dispatcher. + if ( + i < hookStack.length - 1 && + isReactWrapper(hookStack[i].functionName, hook.primitive) + ) { + i++; + } + + if ( + i < hookStack.length - 1 && + isReactWrapper(hookStack[i].functionName, hook.primitive) + ) { + i++; + } + + return i; + } + } + + return -1; + } + + function parseTrimmedStack(rootStack, hook) { + // Get the stack trace between the primitive hook function and + // the root function call. I.e. the stack frames of custom hooks. + var hookStack = ErrorStackParser.parse(hook.stackError); + var rootIndex = findCommonAncestorIndex(rootStack, hookStack); + var primitiveIndex = findPrimitiveIndex(hookStack, hook); + + if ( + rootIndex === -1 || + primitiveIndex === -1 || + rootIndex - primitiveIndex < 2 + ) { + // Something went wrong. Give up. + return null; + } + + return hookStack.slice(primitiveIndex, rootIndex - 1); + } + + function parseCustomHookName(functionName) { + if (!functionName) { + return ""; + } + + var startIndex = functionName.lastIndexOf("."); + + if (startIndex === -1) { + startIndex = 0; + } + + if (functionName.substr(startIndex, 3) === "use") { + startIndex += 3; + } + + return functionName.substr(startIndex); + } + + function buildTree(rootStack, readHookLog) { + var rootChildren = []; + var prevStack = null; + var levelChildren = rootChildren; + var nativeHookID = 0; + var stackOfChildren = []; + + for (var i = 0; i < readHookLog.length; i++) { + var hook = readHookLog[i]; + var stack = parseTrimmedStack(rootStack, hook); + + if (stack !== null) { + // Note: The indices 0 <= n < length-1 will contain the names. + // The indices 1 <= n < length will contain the source locations. + // That's why we get the name from n - 1 and don't check the source + // of index 0. + var commonSteps = 0; + + if (prevStack !== null) { + // Compare the current level's stack to the new stack. + while (commonSteps < stack.length && commonSteps < prevStack.length) { + var stackSource = stack[stack.length - commonSteps - 1].source; + var prevSource = + prevStack[prevStack.length - commonSteps - 1].source; + + if (stackSource !== prevSource) { + break; + } + + commonSteps++; + } // Pop back the stack as many steps as were not common. + + for (var j = prevStack.length - 1; j > commonSteps; j--) { + levelChildren = stackOfChildren.pop(); + } + } // The remaining part of the new stack are custom hooks. Push them + // to the tree. + + for (var _j = stack.length - commonSteps - 1; _j >= 1; _j--) { + var children = []; + levelChildren.push({ + id: null, + isStateEditable: false, + name: parseCustomHookName(stack[_j - 1].functionName), + value: undefined, + subHooks: children, + }); + stackOfChildren.push(levelChildren); + levelChildren = children; + } + + prevStack = stack; + } + + var primitive = hook.primitive; // For now, the "id" of stateful hooks is just the stateful hook index. + // Custom hooks have no ids, nor do non-stateful native hooks (e.g. Context, DebugValue). + + var id = + primitive === "Context" || primitive === "DebugValue" + ? null + : nativeHookID++; // For the time being, only State and Reducer hooks support runtime overrides. + + var isStateEditable = primitive === "Reducer" || primitive === "State"; + levelChildren.push({ + id: id, + isStateEditable: isStateEditable, + name: primitive, + value: hook.value, + subHooks: [], + }); + } // Associate custom hook values (useDebugValue() hook entries) with the correct hooks. + + processDebugValues(rootChildren, null); + return rootChildren; + } // Custom hooks support user-configurable labels (via the special useDebugValue() hook). + // That hook adds user-provided values to the hooks tree, + // but these values aren't intended to appear alongside of the other hooks. + // Instead they should be attributed to their parent custom hook. + // This method walks the tree and assigns debug values to their custom hook owners. + + function processDebugValues(hooksTree, parentHooksNode) { + var debugValueHooksNodes = []; + + for (var i = 0; i < hooksTree.length; i++) { + var hooksNode = hooksTree[i]; + + if (hooksNode.name === "DebugValue" && hooksNode.subHooks.length === 0) { + hooksTree.splice(i, 1); + i--; + debugValueHooksNodes.push(hooksNode); + } else { + processDebugValues(hooksNode.subHooks, hooksNode); + } + } // Bubble debug value labels to their custom hook owner. + // If there is no parent hook, just ignore them for now. + // (We may warn about this in the future.) + + if (parentHooksNode !== null) { + if (debugValueHooksNodes.length === 1) { + parentHooksNode.value = debugValueHooksNodes[0].value; + } else if (debugValueHooksNodes.length > 1) { + parentHooksNode.value = debugValueHooksNodes.map(function (_ref) { + var value = _ref.value; + return value; + }); + } + } + } + + function inspectHooks(renderFunction, props, currentDispatcher) { + var previousDispatcher = currentDispatcher.current; + var readHookLog; + currentDispatcher.current = Dispatcher; + var ancestorStackError; + + try { + ancestorStackError = new Error(); + renderFunction(props); + } finally { + readHookLog = hookLog; + hookLog = []; + currentDispatcher.current = previousDispatcher; + } + + var rootStack = ErrorStackParser.parse(ancestorStackError); + return buildTree(rootStack, readHookLog); + } + + function setupContexts(contextMap, fiber) { + var current = fiber; + + while (current) { + if (current.tag === ContextProvider) { + var providerType = current.type; + var context = providerType._context; + + if (!contextMap.has(context)) { + // Store the current value that we're going to restore later. + contextMap.set(context, context._currentValue); // Set the inner most provider value on the context. + + context._currentValue = current.memoizedProps.value; + } + } + + current = current.return; + } + } + + function restoreContexts(contextMap) { + contextMap.forEach(function (value, context) { + return (context._currentValue = value); + }); + } + + function inspectHooksOfForwardRef( + renderFunction, + props, + ref, + currentDispatcher + ) { + var previousDispatcher = currentDispatcher.current; + var readHookLog; + currentDispatcher.current = Dispatcher; + var ancestorStackError; + + try { + ancestorStackError = new Error(); + renderFunction(props, ref); + } finally { + readHookLog = hookLog; + hookLog = []; + currentDispatcher.current = previousDispatcher; + } + + var rootStack = ErrorStackParser.parse(ancestorStackError); + return buildTree(rootStack, readHookLog); + } + + function resolveDefaultProps(Component, baseProps) { + if (Component && Component.defaultProps) { + // Resolve default props. Taken from ReactElement + var props = Object.assign({}, baseProps); + + var defaultProps = Component.defaultProps; + + for (var propName in defaultProps) { + if (props[propName] === undefined) { + props[propName] = defaultProps[propName]; + } + } + + return props; + } + + return baseProps; + } + + function inspectHooksOfFiber(fiber, currentDispatcher) { + currentFiber = fiber; + + if ( + fiber.tag !== FunctionComponent && + fiber.tag !== SimpleMemoComponent && + fiber.tag !== ForwardRef && + fiber.tag !== Block + ) { + throw new Error( + "Unknown Fiber. Needs to be a function component to inspect hooks." + ); + } // Warm up the cache so that it doesn't consume the currentHook. + + getPrimitiveStackCache(); + var type = fiber.type; + var props = fiber.memoizedProps; + + if (type !== fiber.elementType) { + props = resolveDefaultProps(type, props); + } // Set up the current hook so that we can step through and read the + // current state from them. + + currentHook = fiber.memoizedState; + var contextMap = new Map(); + + try { + setupContexts(contextMap, fiber); + + if (fiber.tag === ForwardRef) { + return inspectHooksOfForwardRef( + type.render, + props, + fiber.ref, + currentDispatcher + ); + } + + return inspectHooks(type, props, currentDispatcher); + } finally { + currentHook = null; + restoreContexts(contextMap); + } + } + + exports.inspectHooks = inspectHooks; + exports.inspectHooksOfFiber = inspectHooksOfFiber; +})(); diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/devtool/devpanel.html b/src/components/react-context-devtool-master/react-context-devtool-master/extension/devtool/devpanel.html new file mode 100644 index 0000000..95cf002 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/extension/devtool/devpanel.html @@ -0,0 +1,13 @@ + + + + + + + + + +
+ + + diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/devtool/devtool.html b/src/components/react-context-devtool-master/react-context-devtool-master/extension/devtool/devtool.html new file mode 100644 index 0000000..4f43051 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/extension/devtool/devtool.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/devtool/devtool.js b/src/components/react-context-devtool-master/react-context-devtool-master/extension/devtool/devtool.js new file mode 100644 index 0000000..8762957 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/extension/devtool/devtool.js @@ -0,0 +1,6 @@ +chrome.devtools.panels.create( + "React Context", + "", + "/devtool/devpanel.html", + function() {} +); diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/popup/disabled.html b/src/components/react-context-devtool-master/react-context-devtool-master/extension/popup/disabled.html new file mode 100644 index 0000000..2b8a86c --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/extension/popup/disabled.html @@ -0,0 +1,63 @@ + + + + + + + + +
+

+ + react-context-devtool + + is not configured for this site +

+

+ + click here + + for configure +

+
+ + diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/extension/popup/popup.html b/src/components/react-context-devtool-master/react-context-devtool-master/extension/popup/popup.html new file mode 100644 index 0000000..523c00d --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/extension/popup/popup.html @@ -0,0 +1,13 @@ + + + + + + + + + +
+ + + diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/jsconfig.json b/src/components/react-context-devtool-master/react-context-devtool-master/jsconfig.json new file mode 100644 index 0000000..3615997 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/jsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "target": "es6", + "baseUrl": "./", + "paths": { + "Src/*": ["src/*"], + "Components/*": ["src/components/*"], + "Containers/*": ["src/containers/*"], + "Utils/*": ["src/utils/*"] + } + }, + "exclude": ["node_modules", "dist"] +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/module/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/module/index.js new file mode 100644 index 0000000..5cea9a9 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/module/index.js @@ -0,0 +1,48 @@ +import React from "react"; + +let debugOptions = { + debugReducer: true, + debugContext: true, + disable: false, + disableAutoMode: false, +}; + +export const ContextDevTool = ({ id, context: Context, displayName }) => { + if (debugOptions.disable) { + return null; + } + + return ( + + {values => { + if (typeof window !== 'undefined' && window._REACT_CONTEXT_DEVTOOL) { + window._REACT_CONTEXT_DEVTOOL({ id, displayName, values }); + } + return null; + }} + + ); +} + +export const debugContextDevtool = (container, options) => { + debugOptions = { ...debugOptions, ...options }; + + if ( + debugOptions.disable || + debugOptions.disableAutoMode || + typeof window === 'undefined' || + (!debugOptions.debugReducer && !debugOptions.debugContext) + ) { + return false; + } + + const hook = window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK; + + if (debugOptions.debugReducer) { + hook.helpers.loadHookHelper().then(() => { + hook.debugFiber(container, options); + }); + } else { + hook.debugFiber(container, options); + } +}; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/package.json b/src/components/react-context-devtool-master/react-context-devtool-master/package.json new file mode 100644 index 0000000..38063ca --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/package.json @@ -0,0 +1,74 @@ +{ + "name": "react-context-devtool", + "version": "2.0.0", + "description": "Devtool for React Context and useReducer hook", + "main": "dist/module/cjs/index.js", + "module": "dist/module/esm/index.js", + "files": [ + "dist/module" + ], + "scripts": { + "compile:module": "babel module/index.js --config-file ./babel.config.js --extensions '.js'", + "clean:module": "rimraf dist/module", + "build:module:esm": "BABEL_ENV=esm npm run compile:module -- --out-dir dist/module/esm", + "build:module:cjs": "BABEL_ENV=cjs npm run compile:module -- --out-dir dist/module/cjs", + "build:module": "npm run clean:module && npm run build:module:esm && npm run build:module:cjs", + "prepublishOnly": "npm run build:module", + "build:chrome": "cross-env NODE_ENV=production node ./browser/chrome/build", + "build:chrome:dev": "cross-env NODE_ENV=development node ./browser/chrome/build", + "build:firefox": "cross-env NODE_ENV=production node ./browser/firefox/build", + "build:firefox:dev": "cross-env NODE_ENV=development node ./browser/firefox/build", + "build:extension": "npm run build:chrome && npm run build:firefox", + "build:extension:dev": "npm run build:chrome:dev && npm run build:firefox:dev", + "start:dev": "cross-env NODE_ENV=development webpack --config build/webpack.config.js --mode development --watch", + "start:dev:chrome": "npm run build:chrome:dev && cross-env DEV_FOR=chrome npm run start:dev", + "start:dev:firefox": "npm run build:firefox:dev && cross-env DEV_FOR=firefox npm run start:dev" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/deeppatel234/react-context-devtool.git" + }, + "author": "Deep Patel ", + "license": "MIT", + "bugs": { + "url": "https://github.com/deeppatel234/react-context-devtool/issues" + }, + "homepage": "https://github.com/deeppatel234/react-context-devtool#readme", + "dependencies": { + "classnames": "2.2.6", + "codemirror": "5.55.0", + "error-stack-parser": "2.0.6", + "jsondiffpatch": "0.4.1", + "jsonlint-mod": "1.7.5", + "object-assign": "4.1.1", + "react": "16.13.1", + "react-dom": "16.13.1", + "react-json-view": "1.19.1" + }, + "devDependencies": { + "@babel/cli": "7.10.3", + "@babel/core": "7.10.3", + "@babel/plugin-syntax-dynamic-import": "7.8.3", + "@babel/plugin-transform-runtime": "7.10.3", + "@babel/preset-env": "7.10.3", + "@babel/preset-react": "7.10.1", + "archiver": "4.0.1", + "babel-loader": "8.1.0", + "chalk": "4.1.0", + "cross-env": "7.0.2", + "css-loader": "3.6.0", + "fs-extra": "9.0.1", + "mini-css-extract-plugin": "0.9.0", + "postcss-flexbugs-fixes": "4.2.1", + "postcss-loader": "3.0.0", + "postcss-normalize": "9.0.0", + "postcss-preset-env": "6.7.0", + "replace-in-file": "6.1.0", + "rimraf": "3.0.2", + "sass": "1.26.9", + "sass-loader": "8.0.2", + "style-loader": "1.2.1", + "webpack": "4.43.0", + "webpack-cli": "3.3.12" + } +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/prettier.config.js b/src/components/react-context-devtool-master/react-context-devtool-master/prettier.config.js new file mode 100644 index 0000000..3e650e7 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/prettier.config.js @@ -0,0 +1,3 @@ +module.exports = { + tabWidth: 2, +}; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Badge/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Badge/index.js new file mode 100644 index 0000000..b3e917f --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Badge/index.js @@ -0,0 +1,26 @@ +import React from "react"; +import classnames from "classnames"; + +import "./index.scss"; + +const Badge = ({ children, outline, onClick, className, ...props }) => { + return ( + + {children} + + ); +}; + +Badge.defaultProps = { + outline: false, +}; + +export default Badge; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Badge/index.scss b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Badge/index.scss new file mode 100644 index 0000000..52703d9 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Badge/index.scss @@ -0,0 +1,19 @@ +.badge { + display: inline-block; + padding: 0.2rem 0.8rem; + border-radius: 10px; + font-size: 0.8rem; + margin: 0 0.2rem; + border: 2px solid; + background-color: var(--primary-color); + border-color: var(--primary-color); + transition: background-color 0.3s ease; + + &.outline { + background-color: transparent; + } + + &.pointer { + cursor: pointer; + } +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Button/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Button/index.js new file mode 100644 index 0000000..219d338 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Button/index.js @@ -0,0 +1,27 @@ +import React from "react"; +import classnames from "classnames"; + +import "./index.scss"; + +const Button = ({ children, outline, className, ...props }) => { + return ( + + ); +}; + +Button.defaultProps = { + outline: false, +}; + +export default Button; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Button/index.scss b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Button/index.scss new file mode 100644 index 0000000..f019fdb --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Button/index.scss @@ -0,0 +1,32 @@ +.button { + display: inline-flex; + align-items: center; + background: var(--primary-color); + border: 1px solid var(--primary-color); + color: #fff; + padding: 0.5rem 0.7rem; + font-size: 0.8rem; + letter-spacing: 2px; + transition: background-color 0.3s ease; + outline: none; + cursor: pointer; + + &.outline { + background-color: transparent; + } + + svg.button-icon { + font-size: 1.2rem; + margin-right: 0.3rem; + } +} + +.button-group { + .button { + border-right: none; + + &:last-child { + border-right: 1px solid var(--primary-color); + } + } +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/components/ButtonGroup/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/ButtonGroup/index.js new file mode 100644 index 0000000..9b1a88f --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/ButtonGroup/index.js @@ -0,0 +1,21 @@ +import React from "react"; +import classnames from "classnames"; + +import Button from "Components/Button"; + +const ButtonGroup = ({ buttons, selected, onChange, ...props }) => { + return ( +
+ {buttons.map(({ text, icon, value }) => ( + + ))} +
+ ); +}; + +ButtonGroup.defaultProps = {}; + +export default ButtonGroup; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/components/DiffView/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/DiffView/index.js new file mode 100644 index 0000000..984bc9b --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/DiffView/index.js @@ -0,0 +1,18 @@ +import React, { memo } from "react"; +import { formatters, diff } from "jsondiffpatch"; + +import "jsondiffpatch/dist/formatters-styles/html.css" + +import "./index.scss"; + +const DiffView = memo(({ data, oldData }) => { + const delta = diff(oldData, data); + + return ( +
+
+
+ ); +}); + +export default DiffView; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/components/DiffView/index.scss b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/DiffView/index.scss new file mode 100644 index 0000000..918c462 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/DiffView/index.scss @@ -0,0 +1,27 @@ +.diff-view { + height: 100%; + background-color: var(--view-bg-color) !important; + padding: 1rem 0.3rem; + + .jsondiffpatch-delta { + font-size: 1rem; + + pre { + font-size: 1rem; + } + } + + .jsondiffpatch-deleted .jsondiffpatch-property-name, + .jsondiffpatch-deleted pre, + .jsondiffpatch-modified .jsondiffpatch-left-value pre, + .jsondiffpatch-textdiff-deleted { + background: #dc3545; + } + + .jsondiffpatch-added .jsondiffpatch-property-name, + .jsondiffpatch-added .jsondiffpatch-value pre, + .jsondiffpatch-modified .jsondiffpatch-right-value pre, + .jsondiffpatch-textdiff-added { + background: #28a745; + } +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/components/JsonEditor/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/JsonEditor/index.js new file mode 100644 index 0000000..ece818d --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/JsonEditor/index.js @@ -0,0 +1,67 @@ +import React, { useEffect, useRef, memo } from "react"; +import CodeMirror from "codemirror"; +import jsonlint from "jsonlint-mod"; + +window.jsonlint = jsonlint; + +import "codemirror/mode/javascript/javascript"; +import "codemirror/lib/codemirror.css"; +import "codemirror/addon/edit/closebrackets"; +import "codemirror/addon/edit/matchbrackets"; +import "codemirror/addon/lint/lint"; +import "codemirror/addon/lint/json-lint"; +import "codemirror/theme/material-ocean.css"; +import "codemirror/addon/lint/lint.css"; + +import "./index.scss"; + +const JsonEditor = memo(({ data, editable, onChange, setEditorRef, lint }) => { + const editorRef = useRef(null); + const editor = useRef(); + + useEffect(() => { + const options = { + matchBrackets: true, + autoCloseBrackets: true, + mode: "application/json", + lineWrapping: true, + lineNumbers: true, + theme: "material-ocean", + readOnly: !editable, + }; + + if (lint) { + options.lint = true; + options.gutters = ["CodeMirror-lint-markers"]; + options.styleActiveLine = true; + } + + editor.current = CodeMirror(editorRef.current, options); + + if (onChange) { + editor.current.on("change", () => { + onChange(editor.current.getValue()); + }); + } + + if (setEditorRef) { + setEditorRef.current = editor.current; + } + }, []); + + useEffect(() => { + if (!onChange) { + editor.current.setValue(JSON.stringify(data, null, 4)); + } + }, [data]); + + return
; +}); + +JsonEditor.defaultProps = { + editable: false, + data: {}, + lint: false, +}; + +export default JsonEditor; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/components/JsonEditor/index.scss b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/JsonEditor/index.scss new file mode 100644 index 0000000..59117a8 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/JsonEditor/index.scss @@ -0,0 +1,21 @@ +.json-editor { + flex: 1; + overflow: auto; + font-size: 1rem; + height: 100%; + + .CodeMirror { + background: var(--view-bg-color) !important; + height: 100%; + line-height: 1.5; + } + + .CodeMirror-gutters { + background: var(--view-sub-bg-color) !important; + border-right: var(--border-color) !important; + } + + .CodeMirror-linenumber { + color: var(--light-color) !important; + } +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/components/JsonTree/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/JsonTree/index.js new file mode 100644 index 0000000..080d6f4 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/JsonTree/index.js @@ -0,0 +1,23 @@ +import React from "react"; +import ReactJson from "react-json-view"; + +import { isObject } from "Utils"; + +import "./index.scss"; + +const TreeView = ({ data }) => { + return ( +
+ +
+ ); +}; + +export default TreeView; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/components/JsonTree/index.scss b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/JsonTree/index.scss new file mode 100644 index 0000000..a25288c --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/JsonTree/index.scss @@ -0,0 +1,17 @@ +.tree-view { + height: 100%; + + .react-json-view { + height: 100%; + overflow: auto; + background-color: var(--view-bg-color) !important; + padding: 1rem; + font-size: 1rem; + + .copy-icon { + svg { + font-size: 1rem !important; + } + } + } +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Tabs/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Tabs/index.js new file mode 100644 index 0000000..7a5066b --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Tabs/index.js @@ -0,0 +1,27 @@ +import React from "react"; +import classnames from "classnames"; + +import "./index.scss"; + +const Tabs = ({ items, selected, onChange, ...props }) => { + return ( +
+ {items.map(({ text, value }) => ( +
onChange(value)} + > + {text} +
+ ))} +
+ ); +}; + +Tabs.defaultProps = {}; + +export default Tabs; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Tabs/index.scss b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Tabs/index.scss new file mode 100644 index 0000000..1a1f4b7 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/components/Tabs/index.scss @@ -0,0 +1,21 @@ +.tabs { + .tab { + position: relative; + display: inline-flex; + align-items: center; + border: 1px solid var(--border-color); + color: #fff; + padding: 0.5rem 1rem; + font-size: 0.8rem; + letter-spacing: 2px; + transition: background-color 0.3s ease; + cursor: pointer; + border-bottom: none; + + &.selected { + background: var(--header-bg-color); + border: 1px solid var(--primary-color); + border-bottom: none; + } + } +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/App.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/App.js new file mode 100644 index 0000000..846ed10 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/App.js @@ -0,0 +1,34 @@ +import React, { useState } from "react"; + +import AppContext from "Containers/AppContext"; +import Header from "Containers/Header"; +import Content from "Containers/Content"; +import NotFoundMessage from "Containers/NotFoundMessage"; + +import "./app.scss"; + +const App = ({ appData, onDispatchAction }) => { + const [selectedDebug, setDebug] = useState({}); + + if (!appData || !appData.tab) { + return + } + + return ( + +
+
+ +
+ + ); +}; + +export default App; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/AppContext.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/AppContext.js new file mode 100644 index 0000000..aaa6db7 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/AppContext.js @@ -0,0 +1,5 @@ +import React from "react"; + +const AppContext = React.createContext({}); + +export default AppContext; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/Content/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/Content/index.js new file mode 100644 index 0000000..e4ba6fd --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/Content/index.js @@ -0,0 +1,29 @@ +import React, { useContext } from "react"; + +import Sidebar from "Containers/Sidebar"; +import ContextView from "Containers/ContextView"; +import UseReducerView from "Containers/UseReducerView"; + +import AppContext from "Containers/AppContext"; + +const Content = () => { + const { appData, selectedDebug } = useContext(AppContext); + + const debugData = appData[selectedDebug.type]?.[selectedDebug.id]; + + return ( +
+ +
+ {selectedDebug.type === "context" && ( + + )} + {selectedDebug.type === "useReducer" && ( + + )} +
+
+ ); +}; + +export default Content; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/ContextView/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/ContextView/index.js new file mode 100644 index 0000000..46263a5 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/ContextView/index.js @@ -0,0 +1,88 @@ +import React, { useState } from "react"; + +import ButtonGroup from "Components/ButtonGroup"; +import Tabs from "Components/Tabs"; +import JsonTree from "Components/JsonTree"; +import JsonEditor from "Components/JsonEditor"; +import DiffView from "Components/DiffView"; + +import "./index.scss"; + +const Views = [ + { + text: "State", + value: "state", + }, + { + text: "Diff", + value: "diff", + }, +]; + +const SubViews = { + state: [ + { + text: "Tree", + value: "tree", + }, + { + text: "Raw", + value: "raw", + }, + ], + diff: [ + { + text: "Raw", + value: "raw", + } + ] +}; + +const DataViews = { + state: { + tree: JsonTree, + raw: JsonEditor, + }, + diff: { + raw: DiffView, + } +}; + +const ContextView = ({ debugData }) => { + const [selectedView, setView] = useState("state"); + const [selectedSubview, setSubView] = useState("tree"); + + const View = DataViews[selectedView][selectedSubview]; + + const onChangeView = view => { + if (view === "diff") { + setSubView("raw"); + } else { + setSubView("tree"); + } + setView(view); + } + + return ( +
+
+ + +
+
+ +
+
+ ); +}; + +export default ContextView; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/ContextView/index.scss b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/ContextView/index.scss new file mode 100644 index 0000000..7ec2557 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/ContextView/index.scss @@ -0,0 +1,25 @@ +.context-view { + display: flex; + flex-direction: column; + height: 100%; + min-width: 330px; + + .view-header { + position: relative; + display: flex; + align-items: center; + padding: 2rem 1rem 0 1rem; + justify-content: space-between; + border-bottom: 1px solid var(--border-color); + + .view-selector { + position: absolute; + right: 1rem; + bottom: 0.8rem; + } + } + + .data-view { + flex: 1; + } +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/Header/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/Header/index.js new file mode 100644 index 0000000..f226588 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/Header/index.js @@ -0,0 +1,13 @@ +import React, { useContext } from "react"; + +import AppContext from "Containers/AppContext"; + +import "./index.scss"; + +const Header = () => { + const { appData: { tab } } = useContext(AppContext); + + return
{tab.title || "React Context Devtool"}
; +}; + +export default Header; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/Header/index.scss b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/Header/index.scss new file mode 100644 index 0000000..f40be23 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/Header/index.scss @@ -0,0 +1,8 @@ +header { + align-items: center; + background-color: var(--header-bg-color); + border-bottom: 1px solid var(--border-color); + display: flex; + font-size: 1rem; + padding: 1rem; +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/NotFoundMessage/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/NotFoundMessage/index.js new file mode 100644 index 0000000..b665fcc --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/NotFoundMessage/index.js @@ -0,0 +1,30 @@ +import React from "react"; + +import "./index.scss"; + +const NotFoundMessage = () => { + return ( +
+

+ + react-context-devtool + {" "} + is not configured for this site +

+

+ + click here + {" "} + for configure +

+
+ ); +}; + +export default NotFoundMessage; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/NotFoundMessage/index.scss b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/NotFoundMessage/index.scss new file mode 100644 index 0000000..b48b74e --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/NotFoundMessage/index.scss @@ -0,0 +1,19 @@ +.not-found-message { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: var(--main-bg-color); + color: var(--font-color); + height: 100%; + font-size: 1rem; + + p { + margin: 0; + padding: 1rem; + } + + a, a:visited { + color: var(--primary-color); + } +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/Sidebar/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/Sidebar/index.js new file mode 100644 index 0000000..2fef5c3 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/Sidebar/index.js @@ -0,0 +1,98 @@ +import React, { useContext, useState, useEffect } from "react"; +import classnames from "classnames"; + +import Badge from "Components/Badge"; + +import AppContext from "Containers/AppContext"; + +import "./index.scss"; + +const FILTERS = ["context", "useReducer"]; + +const Sidebar = () => { + const { appData, selectedDebug, setDebug } = useContext(AppContext); + const [selectedFilters, setFilters] = useState([...FILTERS]); + + const contextList = Object.keys(appData.context).map((key) => { + return { + value: key, + text: appData.context[key].newValue.displayName || key, + type: "context", + }; + }); + + const useReducerList = Object.keys(appData.useReducer).map((key) => { + return { + value: key, + text: appData.useReducer[key].displayName || key, + type: "useReducer", + }; + }); + + useEffect(() => { + if (contextList.length) { + setDebug({ id: contextList[0].value, type: contextList[0].type }) + } else if (useReducerList.length) { + setDebug({ id: useReducerList[0].value, type: useReducerList[0].type }) + } + }, []); + + const onSelectFilter = (filter) => { + if (selectedFilters.includes(filter)) { + setFilters(selectedFilters.filter((f) => f !== filter)); + } else { + setFilters([...selectedFilters, filter]); + } + }; + + const filteredList = [...contextList, ...useReducerList].filter(({ type }) => + selectedFilters.includes(type) + ); + + return ( + + ); +}; + +export default Sidebar; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/Sidebar/index.scss b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/Sidebar/index.scss new file mode 100644 index 0000000..3ed49d1 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/Sidebar/index.scss @@ -0,0 +1,51 @@ +aside { + display: flex; + flex-direction: column; + background-color: var(--sidebar-bg-color); + border-right: 1px solid var(--border-color); + width: 250px; + + .filters { + align-items: center; + border-bottom: 1px solid var(--border-color); + display: flex; + padding: 1.5rem 0.7rem; + + .funnel { + color: var(--disabled-font-color); + display: flex; + font-size: 1.2rem; + margin-right: 0.6rem; + } + } + + ul.debuglist { + overflow: auto; + flex: 1; + list-style: none; + margin: 0; + padding: 0; + + li { + border-bottom: 1px solid var(--border-color); + cursor: pointer; + font-size: 0.9rem; + padding: 1rem 1rem 1.5rem; + position: relative; + word-break: break-all; + + &:hover, + &.selected { + background-color: var(--hover-color); + } + + span { + bottom: 0; + color: var(--primary-color); + padding: 0.2rem 0.5rem; + position: absolute; + right: 0; + } + } + } +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/UseReducerView/Dispatcher/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/UseReducerView/Dispatcher/index.js new file mode 100644 index 0000000..6cea36e --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/UseReducerView/Dispatcher/index.js @@ -0,0 +1,46 @@ +import React, { useState, useRef, useEffect } from "react"; +import classnames from "classnames"; + +import JsonEditor from "Components/JsonEditor"; +import Button from "Components/Button"; + +import "./style.scss"; + +const Dispatcher = ({ onDispatch }) => { + const [show, setShow] = useState(false); + const [action, setAction] = useState(""); + const editor = useRef(); + + const onClickDispatch = () => { + try { + const actionTodistpatch = JSON.parse(action); + onDispatch(actionTodistpatch); + editor.current.setValue(""); + setAction(""); + } catch (err) {} + }; + + const onClickBeautify = () => { + try { + editor.current.setValue(JSON.stringify(JSON.parse(action), null, 4)); + } catch (err) {} + }; + + return ( +
+
setShow(!show)}> + Dispatch Action +
+ +
+
Beautify
+ +
+
+ ); +}; + +export default Dispatcher; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/UseReducerView/Dispatcher/style.scss b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/UseReducerView/Dispatcher/style.scss new file mode 100644 index 0000000..863a86f --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/UseReducerView/Dispatcher/style.scss @@ -0,0 +1,43 @@ +.dispatcher-view { + position: relative; + display: flex; + align-items: center; + height: 0; + border-top: 1px solid var(--border-color); + transition: height 0.3s ease; + + &.show { + height: 30%; + + .actions { + display: flex; + } + } + + .dispatcher-button { + font-size: 0.9rem; + position: absolute; + bottom: 100%; + right: 20px; + background: var(--primary-color); + padding: 0.4rem 1rem; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + cursor: pointer; + } + + .actions { + display: none; + flex-direction: column; + justify-content: space-between; + align-items: center; + height: 100%; + padding: 1rem; + } + + .beautify { + cursor: pointer; + font-size: 1rem; + color: var(--primary-color); + } +} \ No newline at end of file diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/UseReducerView/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/UseReducerView/index.js new file mode 100644 index 0000000..dfbeaf0 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/UseReducerView/index.js @@ -0,0 +1,172 @@ +import React, { useState, useEffect, useContext } from "react"; +import classnames from "classnames"; + +import AppContext from "Containers/AppContext"; + +import JsonTree from "Components/JsonTree"; +import JsonEditor from "Components/JsonEditor"; +import DiffView from "Components/DiffView"; + +import ButtonGroup from "Components/ButtonGroup"; +import Tabs from "Components/Tabs"; +import Dispatcher from "Containers/UseReducerView/Dispatcher"; + +import "./index.scss"; + +const Views = [ + { + text: "State", + value: "state", + }, + { + text: "Action", + value: "action", + }, + { + text: "Diff", + value: "diff", + }, +]; + +const SubViews = { + state: [ + { + text: "Tree", + value: "tree", + }, + { + text: "Raw", + value: "raw", + }, + ], + diff: [ + { + text: "Raw", + value: "raw", + }, + ], + action: [ + { + text: "Tree", + value: "tree", + }, + { + text: "Raw", + value: "raw", + }, + ], +}; + +const DataViews = { + state: { + tree: JsonTree, + raw: JsonEditor, + }, + diff: { + raw: DiffView, + }, + action: { + tree: JsonTree, + raw: JsonEditor, + }, +}; + +const UseReducerView = ({ id, debugData }) => { + const { onDispatchAction } = useContext(AppContext); + const [selectedIndex, setSelectedIndex] = useState(0); + const [selectedView, setView] = useState("state"); + const [selectedSubview, setSubView] = useState("tree"); + + useEffect(() => { + setSelectedIndex(0); + }, [id]); + + useEffect(() => { + setSelectedIndex(debugData.actions.length - 1); + }, [debugData?.actions?.length]); + + const onChangeView = (view) => { + if (view === "diff") { + setSubView("raw"); + } else { + setSubView("tree"); + } + setView(view); + }; + + const onDispatch = (action) => { + onDispatchAction({ + type: "useReducer", + debugId: id, + data: action + }); + }; + + const onClickDispatchButton = (event, action) => { + event.stopPropagation(); + onDispatch(action); + }; + + const View = DataViews[selectedView][selectedSubview]; + + return ( +
+
+
+

Actions

+
    + {debugData.actions.map((action, index) => { + return ( +
  • setSelectedIndex(index)} + > + {action.initialState + ? "Initial State" + : ( + <> + {JSON.stringify(action)} +
    onClickDispatchButton(e, action)} className="dispatch">dispatch
    + + ) + } +
    • + ); + })} +
+
+
+
+ + +
+
+ {selectedView === "action" ? ( + + ) : ( + + )} +
+
+
+ +
+ ); +}; + +export default UseReducerView; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/UseReducerView/index.scss b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/UseReducerView/index.scss new file mode 100644 index 0000000..64c64a2 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/UseReducerView/index.scss @@ -0,0 +1,101 @@ +#popupRoot { + .use-reducer-view { + .action-view { + min-width: 180px; + max-width: 180px; + } + + .state-view { + min-width: 310px; + } + } +} + +.use-reducer-view-wrapper { + display: flex; + flex-direction: column; + height: 100%; +} + +.use-reducer-view { + display: flex; + height: 100%; + overflow-x: auto; + flex: 1; + + .action-view { + display: flex; + flex-direction: column; + min-width: 225px; + max-width: 225px; + border-right: 1px solid var(--border-color); + + .title { + font-size: 1.45rem; + border-bottom: 1px solid var(--border-color); + margin: 0; + padding: 1.2rem 1rem; + } + + ul { + flex: 1; + overflow: auto; + list-style: none; + padding: 0; + margin: 0; + font-size: 0.9rem; + + li { + position: relative; + padding: 1rem 1rem 2rem 1rem; + border-bottom: 1px solid var(--border-color); + cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + .dispatch { + position: absolute; + right: 6px; + bottom: 5px; + border: 1px solid var(--border-color); + padding: 0.1rem 0.5rem; + font-size: 0.7rem; + border-radius: 3px; + } + + &:hover, + &.selected { + background-color: var(--hover-color); + } + } + } + } + + .state-view { + flex: 1; + display: flex; + flex-direction: column; + height: 100%; + min-width: 400px; + + .view-header { + position: relative; + display: flex; + align-items: center; + padding: 2rem 1rem 0 1rem; + justify-content: space-between; + border-bottom: 1px solid var(--border-color); + + .view-selector { + position: absolute; + right: 1rem; + bottom: 0.8rem; + } + } + + .data-view { + flex: 1; + } + } +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/app.scss b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/app.scss new file mode 100644 index 0000000..4eb870d --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/containers/app.scss @@ -0,0 +1,225 @@ + +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 100; + src: url('/assets/fonts/Montserrat-ThinItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 200; + src: url('/assets/fonts/Montserrat-ExtraLightItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 300; + src: url('/assets/fonts/Montserrat-LightItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 400; + src: url('/assets/fonts/Montserrat-Italic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 500; + src: url('/assets/fonts/Montserrat-MediumItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 600; + src: url('/assets/fonts/Montserrat-SemiBoldItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 700; + src: url('/assets/fonts/Montserrat-BoldItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 800; + src: url('/assets/fonts/Montserrat-ExtraBoldItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 800; + src: url('/assets/fonts/Montserrat-BlackItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 100; + src: url('/assets/fonts/Montserrat-Thin.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 200; + src: url('/assets/fonts/Montserrat-ExtraLight.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 300; + src: url('/assets/fonts/Montserrat-Light.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + src: url('/assets/fonts/Montserrat-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 500; + src: url('/assets/fonts/Montserrat-Medium.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 600; + src: url('/assets/fonts/Montserrat-SemiBold.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 700; + src: url('/assets/fonts/Montserrat-Bold.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 800; + src: url('/assets/fonts/Montserrat-ExtraBold.ttf') format('truetype'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 800; + src: url('/assets/fonts/Montserrat-Black.ttf') format('truetype'); +} + +*, +::after, +::before { + box-sizing: border-box; +} + +:root { + --main-bg-color: #222831; + --header-bg-color: #393e46; + --sidebar-bg-color: rgba(0, 0, 0, 0.2); + --view-bg-color: rgba(0, 0, 0, 0.4); + --view-sub-bg-color: rgba(0,0,0,0.2); + --border-color: rgba(255, 255, 255, 0.1); + --dark-color: #000; + --light-color: #fff; + --font-color: #fff; + --disabled-font-color: rgba(255, 255, 255, 0.3); + --primary-color: #00adb5; + --hover-color: rgba(255, 255, 255, 0.1); + --scroll-bg-color: rgba(255,255,255, 0.2); + --scroll-thumb-color: rgba(255,255,255, 0.3); + + font-size: 16px; +} + +#firefox.devpanelHtml { + font-size: 12px; +} + +#firefox.popupHtml { + font-size: 12px; +} + +#chrome.popupHtml { + font-size: 12px; +} + +#chrome.devpanelHtml { + font-size: 16px; +} + +html, +body, +#devPanelRoot, +#popupRoot, +#main-app { + height: 100%; + margin: 0; +} + +.devpanelHtml, +.popupHtml, +#devPanelRoot, +#popupRoot { + overflow: hidden; +} + +.popupHtml, .popupHtml body { + width: 750px; + height: 400px; + + aside { + width: 190px; + } +} + +#main-app { + background-color: var(--main-bg-color); + color: var(--font-color); + display: flex; + display: flex; + flex-direction: column; + font-family: 'Montserrat', sans-serif; + + #content { + display: flex; + flex: 1; + height: 100%; + min-height: 0; + + section { + flex: 1; + min-width: 0; + overflow-x: auto; + } + } +} + +*::-webkit-scrollbar { + width: 8px; + height: 8px; + background-color: var(--scroll-bg-color); +} + +*::-webkit-scrollbar-thumb { + border-radius: 8px; + background-color: var(--scroll-thumb-color); +} diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/devpanel.index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/devpanel.index.js new file mode 100644 index 0000000..1d50f36 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/devpanel.index.js @@ -0,0 +1,77 @@ +/* global chrome */ + +import React, { useState, useEffect, useRef } from "react"; +import ReactDOM from "react-dom"; +import App from "Containers/App"; + +const DATA_EVENT = "__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK_DATA_EVENT"; +const INIT_DEVPANEL_EVENT = "INIT_DEVPANEL"; +const DEVPANEL_DATA_EVENT = "DEVPANEL_DATA"; +const DISPATCH_EVENT = "DISPATCH_EVENT"; + +let chunks = []; + +const registerTab = (onMessage, eventRef) => { + const tabId = chrome.devtools.inspectedWindow.tabId; + const backgroundPageConnection = chrome.runtime.connect({ + name: tabId ? tabId.toString() : undefined + }); + + backgroundPageConnection.onMessage.addListener(event => { + if ( + event.type === DATA_EVENT && + event.subType === DEVPANEL_DATA_EVENT + ) { + let { data, split } = event; + + if (split === "chunk") { + chunks.push(data); + return; + } + + if (split === "end") { + data = chunks.join('') || "{}"; + chunks = []; + } + + onMessage(JSON.parse(data)); + } + }); + + backgroundPageConnection.postMessage({ + tabId, + type: DATA_EVENT, + subType: INIT_DEVPANEL_EVENT, + }); + + eventRef.current.postMessage = (action) => { + backgroundPageConnection.postMessage({ + tabId, + type: DATA_EVENT, + subType: DISPATCH_EVENT, + data: action + }); + }; +}; + +const DevPanel = () => { + const [appData, setAppData] = useState(null); + const eventRef = useRef(); + + useEffect(() => { + eventRef.current = {}; + registerTab(onMessage, eventRef); + }, []); + + const onMessage = data => { + setAppData(data); + }; + + const onDispatchAction = action => { + eventRef.current.postMessage(action); + }; + + return ; +}; + +ReactDOM.render(, document.getElementById("devPanelRoot")); diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/popup.index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/popup.index.js new file mode 100644 index 0000000..bf0b581 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/popup.index.js @@ -0,0 +1,80 @@ +/* global chrome */ + +import React, { useState, useEffect, useRef } from "react"; +import ReactDOM from "react-dom"; +import App from "Containers/App"; + +const DATA_EVENT = "__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK_DATA_EVENT"; +const INIT_POPUP_EVENT = "INIT_POPUP"; +const POPUP_DATA_EVENT = "POPUP_DATA"; +const DISPATCH_EVENT = "DISPATCH_EVENT"; + +const registerTab = (onMessage, eventRef) => { + let tabId = null; + + chrome.runtime.onMessage.addListener(event => { + if ( + event.type === DATA_EVENT && + event.subType === POPUP_DATA_EVENT && + tabId && + tabId === event.tabId + ) { + let { data, split } = event; + + if (split === "chunk") { + chunks.push(data); + return; + } + + if (split === "end") { + data = chunks.join('') || "{}"; + chunks = []; + } + + onMessage(JSON.parse(data)); + } + }); + + chrome.tabs.query({ active: true, currentWindow: true }, tab => { + tabId = tab[0].id; + chrome.runtime.sendMessage({ + type: DATA_EVENT, + subType: INIT_POPUP_EVENT, + tabId + }); + }); + + eventRef.current.postMessage = (action) => { + chrome.tabs.query({ active: true, currentWindow: true }, tab => { + tabId = tab[0].id; + chrome.runtime.sendMessage({ + tabId, + type: DATA_EVENT, + subType: DISPATCH_EVENT, + data: action + }); + }); + }; +}; + +const DevPanel = () => { + const [appData, setAppData] = useState(null); + const eventRef = useRef(); + + useEffect(() => { + eventRef.current = {}; + registerTab(onMessage, eventRef); + }, []); + + const onMessage = data => { + setAppData(data); + }; + + const onDispatchAction = action => { + eventRef.current.postMessage(action); + }; + + return ; +}; + +ReactDOM.render(, document.getElementById("popupRoot")); diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/src/utils/index.js b/src/components/react-context-devtool-master/react-context-devtool-master/src/utils/index.js new file mode 100644 index 0000000..ec17997 --- /dev/null +++ b/src/components/react-context-devtool-master/react-context-devtool-master/src/utils/index.js @@ -0,0 +1,3 @@ +export const isObject = (obj) => { + return obj === Object(obj); +}; diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/cover.png b/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/cover.png new file mode 100644 index 0000000..548c4bd Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/cover.png differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/context-diff-view.png b/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/context-diff-view.png new file mode 100644 index 0000000..113e0ba Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/context-diff-view.png differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/context-raw-view.png b/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/context-raw-view.png new file mode 100644 index 0000000..1043fcc Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/context-raw-view.png differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/context-tree-view.png b/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/context-tree-view.png new file mode 100644 index 0000000..f2fd8ff Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/context-tree-view.png differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/reducer-action-view.png b/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/reducer-action-view.png new file mode 100644 index 0000000..9048dfc Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/reducer-action-view.png differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/reducer-diff-view.png b/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/reducer-diff-view.png new file mode 100644 index 0000000..48d35a6 Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/reducer-diff-view.png differ diff --git a/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/reducer-tree-view.png b/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/reducer-tree-view.png new file mode 100644 index 0000000..67a158f Binary files /dev/null and b/src/components/react-context-devtool-master/react-context-devtool-master/store-assets/screenshots/reducer-tree-view.png differ