redux-connected-devtools 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/.env +1 -1
  2. package/package.json +26 -12
  3. package/src/components/DevInspector/DevInspector.style.tsx +0 -1
  4. package/src/components/DevList/DevList.tsx +5 -2
  5. package/src/components/DevMenu/DevMenu.style.tsx +9 -6
  6. package/src/components/DevMenu/DevMenu.tsx +2 -1
  7. package/src/components/DevPanel/DevPanel.style.tsx +9 -0
  8. package/src/components/DevPanel/DevPanel.tsx +12 -5
  9. package/src/components/DevtoolsApp/DevtoolsApp.scss +2 -0
  10. package/src/components/DevtoolsApp/DevtoolsApp.style.tsx +12 -0
  11. package/src/components/DevtoolsApp/DevtoolsApp.tsx +45 -0
  12. package/src/components/Icon/AllIcons.tsx +66 -0
  13. package/src/components/Icon/Icon.scss +2 -0
  14. package/src/components/Icon/Icon.style.tsx +11 -0
  15. package/src/components/Icon/Icon.tsx +28 -0
  16. package/src/components/JourneyRow/JourneyRow.style.tsx +2 -2
  17. package/src/components/JourneyRow/JourneyRow.tsx +2 -0
  18. package/src/components/JsonViewer/JsonViewer.tsx +0 -1
  19. package/src/components/Lifecycle/Lifecycle.tsx +6 -1
  20. package/src/components/RequestDetails/RequestDetails.style.tsx +1 -1
  21. package/src/components/RequestJourney/RequestJourney.style.tsx +21 -0
  22. package/src/components/RequestRow/RequestRow.style.tsx +1 -0
  23. package/src/components/RequestRow/RequestRow.tsx +3 -3
  24. package/src/components/Size/Size.scss +2 -0
  25. package/src/components/Size/Size.style.tsx +6 -0
  26. package/src/components/Size/Size.tsx +21 -0
  27. package/src/components/StateViewer/StateViewer.scss +2 -0
  28. package/src/components/StateViewer/StateViewer.style.tsx +5 -0
  29. package/src/components/StateViewer/StateViewer.tsx +17 -0
  30. package/src/components/Time/Time.style.tsx +1 -1
  31. package/src/containers/DevPanelContainer.tsx +5 -3
  32. package/src/containers/DevtoolsAppContainer.tsx +42 -0
  33. package/src/containers/JsonViewerContainer.tsx +8 -0
  34. package/src/containers/LifecycleContainer.tsx +12 -0
  35. package/src/containers/LifecycleFailedContainer.tsx +11 -0
  36. package/src/containers/LogsViewerContainer.tsx +8 -0
  37. package/src/containers/StateViewerContainer.tsx +8 -0
  38. package/src/data/devComponents.tsx +2 -0
  39. package/src/data/devRouter.ts +107 -0
  40. package/src/data/devRoutes.ts +20 -13
  41. package/src/hooks/useStoreSize.ts +27 -0
  42. package/src/index.ts +1 -1
  43. package/src/store/selectors.ts +49 -34
  44. package/src/types.ts +1 -1
  45. package/src/utils/date.ts +9 -1
  46. package/src/utils/download.ts +17 -0
  47. package/tsconfig.json +13 -19
  48. package/vite.config.ts +21 -39
  49. package/.vscode/settings.json +0 -12
  50. package/.vscode/tasks.json +0 -33
  51. package/public/devtools.html +0 -8
  52. package/public/icon.png +0 -0
  53. package/public/manifest.json +0 -29
  54. package/public/options.html +0 -12
  55. package/public/panel.html +0 -39
  56. package/public/popup.html +0 -12
  57. package/src/background.ts +0 -49
  58. package/src/content_script.ts +0 -19
  59. package/src/devtools.tsx +0 -29
  60. package/src/injected_script.ts +0 -9
  61. package/src/options.tsx +0 -77
  62. package/src/panel.tsx +0 -30
  63. package/src/popup.tsx +0 -63
  64. package/src/sum.ts +0 -3
  65. package/webpack/webpack.common.js +0 -46
  66. package/webpack/webpack.dev.js +0 -7
  67. package/webpack/webpack.prod.js +0 -6
package/public/devtools.html DELETED
@@ -1,8 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Injects the devtools panel</title>
5
- <script src="js/devtools.js"></script>
6
- </head>
7
- <body></body>
8
- </html>
package/public/icon.png DELETED
Binary file
package/public/manifest.json DELETED
@@ -1,29 +0,0 @@
1
- {
2
- "manifest_version": 3,
3
- "name": "redux-connected devtools",
4
- "description": "Inspect the lifecycle of a redux-connected request",
5
- "version": "1.0",
6
- "options_ui": {
7
- "page": "options.html"
8
- },
9
- "action": {
10
- "default_icon": "icon.png",
11
- "default_popup": "popup.html"
12
- },
13
- "background": {
14
- "service_worker": "js/background.js"
15
- },
16
- "content_scripts": [
17
- {
18
- "matches": ["<all_urls>"],
19
- "js": [
20
- "js/vendor.js",
21
- "js/content_script.js",
22
- "js/injected_script.js"
23
- ]
24
- }
25
- ],
26
- "devtools_page": "devtools.html",
27
- "permissions": ["storage"],
28
- "host_permissions": ["<all_urls>"]
29
- }
package/public/options.html DELETED
@@ -1,12 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Extension options</title>
5
- <script src="js/vendor.js"></script>
6
- </head>
7
-
8
- <body>
9
- <div id="root"></div>
10
- <script src="js/options.js"></script>
11
- </body>
12
- </html>
package/public/panel.html DELETED
@@ -1,39 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Redux-connected devtools</title>
5
- <script src="js/vendor.js"></script>
6
- <link
7
- href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
8
- rel="stylesheet"
9
- />
10
- <style>
11
- body {
12
- padding: 0;
13
- margin: 0;
14
- min-height: 100vh;
15
- }
16
-
17
- body,
18
- #root {
19
- display: flex;
20
- flex: 1;
21
- font-family: 'Inter', sans-serif;
22
- }
23
-
24
- input,
25
- h1,
26
- h2,
27
- h3,
28
- select,
29
- textarea {
30
- font-family: 'Inter', sans-serif;
31
- }
32
- </style>
33
- </head>
34
-
35
- <body>
36
- <div id="root"></div>
37
- <script src="js/panel.js"></script>
38
- </body>
39
- </html>
package/public/popup.html DELETED
@@ -1,12 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8" />
5
- <title>Popup</title>
6
- <script src="js/vendor.js"></script>
7
- </head>
8
- <body>
9
- <div id="root"></div>
10
- <script src="js/popup.js"></script>
11
- </body>
12
- </html>
package/src/background.ts DELETED
@@ -1,49 +0,0 @@
1
- // background.js
2
-
3
- let connections: Record<number | string, chrome.runtime.Port> = {};
4
-
5
- chrome.runtime.onConnect.addListener(function (port) {
6
- var extensionListener = function (message: any) {
7
- // The original connection event doesn't include the tab ID of the
8
- // DevTools page, so we need to send it explicitly.
9
- if (message.name == 'init') {
10
- connections[message.tabId] = port;
11
- return;
12
- }
13
-
14
- // other message handling
15
- };
16
-
17
- // Listen to messages sent from the DevTools page
18
- port.onMessage.addListener(extensionListener);
19
-
20
- port.onDisconnect.addListener(function (port) {
21
- port.onMessage.removeListener(extensionListener);
22
-
23
- const tabs = Object.keys(connections);
24
- for (var i = 0, len = tabs.length; i < len; i++) {
25
- if (connections[tabs[i]] == port) {
26
- delete connections[tabs[i]];
27
- break;
28
- }
29
- }
30
- });
31
- });
32
-
33
- // Receive message from content script and relay to the devTools page for the
34
- // current tab
35
- chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
36
- // Messages from content scripts should have sender.tab set
37
- if (sender.tab) {
38
- var tabId = sender.tab.id;
39
-
40
- if (tabId && connections[tabId]) {
41
- connections[tabId].postMessage(request);
42
- } else {
43
- console.log('Tab not found in connection list.');
44
- }
45
- } else {
46
- console.log('sender.tab not defined.');
47
- }
48
- return true;
49
- });
package/src/content_script.ts DELETED
@@ -1,19 +0,0 @@
1
- window.addEventListener('message', function (event) {
2
- // Only accept messages from the same frame
3
- if (event.source !== window) {
4
- return;
5
- }
6
-
7
- const message = event.data as any;
8
-
9
- // Only accept messages that we know are ours
10
- if (
11
- typeof message !== 'object' ||
12
- message === null ||
13
- message.source !== 'devtools-page'
14
- ) {
15
- return;
16
- }
17
-
18
- chrome.runtime.sendMessage(message);
19
- });
package/src/devtools.tsx DELETED
@@ -1,29 +0,0 @@
1
- // devtools.js
2
- const backgroundPageConnection = chrome.runtime.connect({
3
- name: 'devtools-page',
4
- });
5
-
6
- let panel: any;
7
-
8
- chrome.devtools.panels.create(
9
- 'Redux connected',
10
- '',
11
- 'panel.html',
12
- function (_panel) {
13
- panel = _panel;
14
-
15
- backgroundPageConnection.postMessage({
16
- name: 'init',
17
- tabId: chrome.devtools.inspectedWindow.tabId,
18
- });
19
-
20
- backgroundPageConnection.postMessage({
21
- tabId: chrome.devtools.inspectedWindow.tabId,
22
- scriptToInject: 'injected_script.js',
23
- });
24
-
25
- backgroundPageConnection.onMessage.addListener(function (message: any) {
26
- // Handle responses from the background page, if any
27
- });
28
- }
29
- );
package/src/injected_script.ts DELETED
@@ -1,9 +0,0 @@
1
- // injected-script.js
2
-
3
- window.postMessage(
4
- {
5
- greeting: 'hello there!',
6
- source: 'devtools-page',
7
- },
8
- '*'
9
- );
package/src/options.tsx DELETED
@@ -1,77 +0,0 @@
1
- import React, { useEffect, useState } from 'react';
2
- import ReactDOM from 'react-dom';
3
-
4
- const Options = () => {
5
- const [color, setColor] = useState<string>('');
6
- const [status, setStatus] = useState<string>('');
7
- const [like, setLike] = useState<boolean>(false);
8
-
9
- useEffect(() => {
10
- // Restores select box and checkbox state using the preferences
11
- // stored in chrome.storage.
12
- chrome.storage.sync.get(
13
- {
14
- favoriteColor: 'red',
15
- likesColor: true,
16
- },
17
- (items) => {
18
- setColor(items.favoriteColor);
19
- setLike(items.likesColor);
20
- }
21
- );
22
- }, []);
23
-
24
- const saveOptions = () => {
25
- // Saves options to chrome.storage.sync.
26
- chrome.storage.sync.set(
27
- {
28
- favoriteColor: color,
29
- likesColor: like,
30
- },
31
- () => {
32
- // Update status to let user know options were saved.
33
- setStatus('Options saved.');
34
- const id = setTimeout(() => {
35
- setStatus('');
36
- }, 1000);
37
- return () => clearTimeout(id);
38
- }
39
- );
40
- };
41
-
42
- return (
43
- <>
44
- <div>
45
- Favorite color:{' '}
46
- <select
47
- value={color}
48
- onChange={(event) => setColor(event.target.value)}
49
- >
50
- <option value='red'>red</option>
51
- <option value='green'>green</option>
52
- <option value='blue'>blue</option>
53
- <option value='yellow'>yellow</option>
54
- </select>
55
- </div>
56
- <div>
57
- <label>
58
- <input
59
- type='checkbox'
60
- checked={like}
61
- onChange={(event) => setLike(event.target.checked)}
62
- />
63
- I like colors.
64
- </label>
65
- </div>
66
- <div>{status}</div>
67
- <button onClick={saveOptions}>Save</button>
68
- </>
69
- );
70
- };
71
-
72
- ReactDOM.render(
73
- <React.StrictMode>
74
- <Options />
75
- </React.StrictMode>,
76
- document.getElementById('root')
77
- );
package/src/panel.tsx DELETED
@@ -1,30 +0,0 @@
1
- import DevPanel from './containers/DevPanelContainer';
2
- import React from 'react';
3
- import ReactDOM from 'react-dom';
4
- import { Provider } from 'react-redux';
5
- import { store } from './store/initialState';
6
-
7
- ReactDOM.render(
8
- <React.StrictMode>
9
- <Provider store={store}>
10
- <DevPanel />
11
- </Provider>
12
- </React.StrictMode>,
13
- document.getElementById('root')
14
- );
15
-
16
- chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
17
- if (sender.origin?.indexOf('http://localhost') === 0) {
18
- const store = (window as any).store;
19
-
20
- switch (request.type) {
21
- case 'CONNECTED_STATE':
22
- break;
23
- case 'CONNECTED_ACTION':
24
- const { payload } = request;
25
- const { action } = payload;
26
- store.dispatch(action);
27
- break;
28
- }
29
- }
30
- });
package/src/popup.tsx DELETED
@@ -1,63 +0,0 @@
1
- import React, { useEffect, useState } from 'react';
2
- import ReactDOM from 'react-dom';
3
-
4
- const Popup = () => {
5
- const [count, setCount] = useState(0);
6
- const [currentURL, setCurrentURL] = useState<string>();
7
-
8
- useEffect(() => {
9
- chrome.action.setBadgeText({ text: count.toString() });
10
- }, [count]);
11
-
12
- useEffect(() => {
13
- chrome.tabs.query(
14
- { active: true, currentWindow: true },
15
- function (tabs) {
16
- setCurrentURL(tabs[0].url);
17
- }
18
- );
19
- }, []);
20
-
21
- const changeBackground = () => {
22
- chrome.tabs.query(
23
- { active: true, currentWindow: true },
24
- function (tabs) {
25
- const tab = tabs[0];
26
- if (tab.id) {
27
- chrome.tabs.sendMessage(
28
- tab.id,
29
- {
30
- color: '#555555',
31
- },
32
- (msg) => {
33
- console.log('result message:', msg);
34
- }
35
- );
36
- }
37
- }
38
- );
39
- };
40
-
41
- return (
42
- <>
43
- <ul style={{ minWidth: '700px' }}>
44
- <li>Current URL: {currentURL}</li>
45
- <li>Current Time: {new Date().toLocaleTimeString()}</li>
46
- </ul>
47
- <button
48
- onClick={() => setCount(count + 1)}
49
- style={{ marginRight: '5px' }}
50
- >
51
- count up
52
- </button>
53
- <button onClick={changeBackground}>change background</button>
54
- </>
55
- );
56
- };
57
-
58
- ReactDOM.render(
59
- <React.StrictMode>
60
- <Popup />
61
- </React.StrictMode>,
62
- document.getElementById('root')
63
- );
package/src/sum.ts DELETED
@@ -1,3 +0,0 @@
1
- export function sum(x: number, y: number) {
2
- return x + y;
3
- }
package/webpack/webpack.common.js DELETED
@@ -1,46 +0,0 @@
1
- const webpack = require('webpack');
2
- const path = require('path');
3
- const CopyPlugin = require('copy-webpack-plugin');
4
- const srcDir = path.join(__dirname, '..', 'src');
5
-
6
- module.exports = {
7
- entry: {
8
- popup: path.join(srcDir, 'popup.tsx'),
9
- options: path.join(srcDir, 'options.tsx'),
10
- devtools: path.join(srcDir, 'devtools.tsx'),
11
- panel: path.join(srcDir, 'panel.tsx'),
12
- background: path.join(srcDir, 'background.ts'),
13
- content_script: path.join(srcDir, 'content_script.ts'),
14
- injected_script: path.join(srcDir, 'injected_script.ts'),
15
- },
16
- output: {
17
- path: path.join(__dirname, '../dist/js'),
18
- filename: '[name].js',
19
- },
20
- optimization: {
21
- splitChunks: {
22
- name: 'vendor',
23
- chunks(chunk) {
24
- return chunk.name !== 'background';
25
- },
26
- },
27
- },
28
- module: {
29
- rules: [
30
- {
31
- test: /\.tsx?$/,
32
- use: 'ts-loader',
33
- exclude: /node_modules/,
34
- },
35
- ],
36
- },
37
- resolve: {
38
- extensions: ['.ts', '.tsx', '.js'],
39
- },
40
- plugins: [
41
- new CopyPlugin({
42
- patterns: [{ from: '.', to: '../', context: 'public' }],
43
- options: {},
44
- }),
45
- ],
46
- };
package/webpack/webpack.dev.js DELETED
@@ -1,7 +0,0 @@
1
- const { merge } = require('webpack-merge');
2
- const common = require('./webpack.common.js');
3
-
4
- module.exports = merge(common, {
5
- devtool: 'inline-source-map',
6
- mode: 'development'
7
- });
package/webpack/webpack.prod.js DELETED
@@ -1,6 +0,0 @@
1
- const { merge } = require('webpack-merge');
2
- const common = require('./webpack.common.js');
3
-
4
- module.exports = merge(common, {
5
- mode: 'production',
6
- });