redux-connected-devtools 1.0.2 → 1.0.4

package/dist/store/selectors.js

@@ -0,0 +1,143 @@
+import { createSelector } from 'reselect';
+import { connectedSelectors, LifecycleStatus } from 'redux-connected';
+export const $requests = createSelector(connectedSelectors.$requests, (requests) => {
+    return requests
+        .map((request) => {
+        const { items } = request;
+        const lastPoint = items[items.length - 1] ?? {};
+        const journeyWithDelta = items.map((point, index) => {
+            const nextPoint = items[index + 1] ?? point;
+            const delta = nextPoint.timestamp - point.timestamp;
+            return {
+                ...point,
+                delta,
+            };
+        });
+        return {
+            ...request,
+            items: journeyWithDelta,
+            lastPointTimestamp: lastPoint.timestamp,
+            lastPointStatus: lastPoint.status,
+        };
+    })
+        .sort((a, b) => {
+        if (a.lastPointTimestamp === b.lastPointTimestamp) {
+            return 0;
+        }
+        return a.lastPointTimestamp > b.lastPointTimestamp ? -1 : 1;
+    });
+});
+// 1
+export const $requestsReceived = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        const lastPoint = items[items.length - 1];
+        return lastPoint && lastPoint.status === LifecycleStatus.RECEIVED;
+    });
+});
+export const $requestsReceivedPast = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        return items.find((point) => point.status === LifecycleStatus.RECEIVED);
+    });
+});
+// 2
+export const $requestsInQueue = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        const lastPoint = items[items.length - 1];
+        return lastPoint && lastPoint.status === LifecycleStatus.IN_QUEUE;
+    });
+});
+export const $requestsInQueuePast = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        return items.find((point) => point.status === LifecycleStatus.IN_QUEUE);
+    });
+});
+// 3
+export const $requestsPendingApi = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        const lastPoint = items[items.length - 1];
+        return (lastPoint &&
+            lastPoint.status === LifecycleStatus.PENDING_API_RESPONSE);
+    });
+});
+export const $requestsPendingApiPast = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        return items.find((point) => point.status === LifecycleStatus.PENDING_API_RESPONSE);
+    });
+});
+// 4
+export const $requestsPostAction = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        const lastPoint = items[items.length - 1];
+        return lastPoint && lastPoint.status === LifecycleStatus.POST_ACTION;
+    });
+});
+export const $requestsPostActionPast = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        return items.find((point) => point.status === LifecycleStatus.POST_ACTION);
+    });
+});
+// e1
+export const $requestsGeneralError = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        const lastPoint = items[items.length - 1];
+        return lastPoint && lastPoint.status === LifecycleStatus.GENERAL_ERROR;
+    });
+});
+export const $requestsGeneralErrorPast = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        return items.find((point) => point.status === LifecycleStatus.GENERAL_ERROR);
+    });
+});
+// e2
+export const $requestsApiError = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        const lastPoint = items[items.length - 1];
+        return lastPoint && lastPoint.status === LifecycleStatus.API_ERROR;
+    });
+});
+// e3
+export const $requestsFailed = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        return items.find((point) => point.status === LifecycleStatus.FAILED);
+    });
+});
+export const $requestsApiErrorPast = createSelector($requests, (requests) => {
+    return requests.filter((request) => {
+        const { items } = request;
+        return items.find((point) => point.status === LifecycleStatus.API_ERROR);
+    });
+});
+export const $menuBadges = createSelector($requestsReceived, $requestsInQueue, $requestsGeneralError, $requestsPendingApi, $requestsApiError, $requestsFailed, $requestsPostAction, (requestsReceived, requestsInQueue, requestsGeneralError, requestsPendingApi, requestsApiError, requestsFailed, requestsPostAction) => {
+    return {
+        lifecycleReceived: requestsReceived.length,
+        lifecycleInQueue: requestsInQueue.length,
+        lifecycleGeneralError: requestsGeneralError.length,
+        lifecyclePendingApi: requestsPendingApi.length,
+        lifecycleApiError: requestsApiError.length,
+        lifecycleFailed: requestsFailed.length,
+        lifecyclePostAction: requestsPostAction.length,
+    };
+});
+export const $menuBadgesTotal = createSelector($requestsReceivedPast, $requestsInQueuePast, $requestsGeneralErrorPast, $requestsPendingApiPast, $requestsApiErrorPast, $requestsFailed, $requestsPostActionPast, (requestsReceived, requestsInQueue, requestsGeneralError, requestsPendingApi, requestsApiError, requestsFailed, requestsPostAction) => {
+    return {
+        lifecycleReceived: requestsReceived.length,
+        lifecycleInQueue: requestsInQueue.length,
+        lifecycleGeneralError: requestsGeneralError.length,
+        lifecyclePendingApi: requestsPendingApi.length,
+        lifecycleApiError: requestsApiError.length,
+        lifecycleFailed: requestsFailed.length,
+        lifecyclePostAction: requestsPostAction.length,
+    };
+});

package/dist/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/utils/date.js

@@ -0,0 +1,8 @@
+export const timestamp = () => new Date().getTime();
+export let startOfTime = timestamp();
+export const resetStartOfTime = () => {
+    startOfTime = timestamp();
+};
+export const getMinutes = () => {
+    return new Date().getMinutes();
+};

package/dist/utils/download.js

@@ -0,0 +1,17 @@
+export const download = (filename, json) => {
+    const data = JSON.stringify(json, null, 4);
+    const blob = new Blob([data], { type: 'text/csv' });
+    // @ts-ignore
+    if (window.navigator.msSaveOrOpenBlob) {
+        // @ts-ignore
+        window.navigator.msSaveBlob(blob, filename);
+    }
+    else {
+        const elem = window.document.createElement('a');
+        elem.href = window.URL.createObjectURL(blob);
+        elem.download = filename;
+        document.body.appendChild(elem);
+        elem.click();
+        document.body.removeChild(elem);
+    }
+};

package/package.json

@@ -1,13 +1,11 @@
 {
     "name": "redux-connected-devtools",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "description": "redux-connected-devtools",
-    "main": "src/index.ts",
     "scripts": {
         "dev": "vite",
         "watch": "webpack --config webpack/webpack.dev.js --watch",
-        "build": "webpack --config webpack/webpack.prod.js",
-        "clean": "rimraf dist",
+        "build": "tsc & vite build",
         "test": "npx jest",
         "style": "prettier --write \"src/**/*.{ts,tsx}\""
     },
@@ -17,42 +15,60 @@
         "type": "git",
         "url": "https://github.com/dht/redux-connected-devtools.git"
     },
+    "files": [
+        "dist"
+    ],
     "dependencies": {
         "@redux-devtools/extension": "^3.2.2",
         "bytes": "^3.1.2",
+        "classnames": "^2.3.2",
         "dotenv-flow": "^3.2.0",
-        "react": "^17.0.1",
-        "react-dom": "^17.0.2",
         "react-redux": "^7.2.6",
-        "react-window": "^1.8.6",
-        "redux-connected": "^0.0.90",
-        "redux-store-generator": "^0.9.74",
+        "react-window": "^1.8.8",
+        "redux-connected": "^0.0.103",
+        "redux-store-generator": "^0.9.89",
         "reselect": "^4.1.5",
+        "rollup-plugin-analyzer": "^4.0.0",
+        "shared-base": "^0.0.27",
         "styled-components": "^5.3.3",
         "tslib": "^2.3.1"
     },
+    "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
     "devDependencies": {
-        "@types/bytes": "^3.1.1",
         "@types/chrome": "0.0.158",
         "@types/jest": "^27.0.2",
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
-        "@types/react-window": "^1.8.5",
         "@types/styled-components": "^5.1.24",
         "@vitejs/plugin-react": "^1.2.0",
         "copy-webpack-plugin": "^9.0.1",
         "glob": "^7.1.6",
         "jest": "^27.2.1",
         "prettier": "^2.2.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "rimraf": "^3.0.2 ",
         "ts-jest": "^27.0.5",
         "ts-loader": "^8.0.0",
-        "typescript": "^4.4.3 ",
+        "typescript": "^4.5.5",
         "vite": "^2.6.4",
-        "vite-plugin-react-svg": "^0.2.0",
+        "vite-plugin-dts": "^1.7.1",
+        "vite-plugin-react-svg": "^0.1.0",
         "vite-tsconfig-paths": "^3.3.13",
         "webpack": "^5.0.0",
         "webpack-cli": "^4.0.0",
         "webpack-merge": "^5.0.0"
+    },
+    "main": "./dist/redux-connected-devtools.umd.js",
+    "module": "./dist/redux-connected-devtools.es.js",
+    "types": "./dist/dts/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/redux-connected-devtools.es.js",
+            "require": "./dist/redux-connected-devtools.umd.js"
+        }
     }
 }

package/.env

@@ -1,2 +0,0 @@
-VITE_SERVER_DOMAIN=http://localhost
-VITE_BASE_PORT_PAYEM=3100

package/.prettierrc.js

@@ -1,10 +0,0 @@
-module.exports = {
-    trailingComma: 'es5',
-    tabWidth: 4,
-    semi: true,
-    singleQuote: true,
-    jsxSingleQuote: true,
-    endOfLine: 'auto',
-    // printWidth: 120,
-    useTabs: false,
-};

package/.vscode/settings.json

@@ -1,12 +0,0 @@
-{
-    "typescript.tsdk": "./node_modules/typescript/lib",
-    "files.eol": "\n",
-    "json.schemas": [
-        {
-            "fileMatch": [
-                "/manifest.json"
-            ],
-            "url": "http://json.schemastore.org/chrome-manifest"
-        }
-    ]
-}

package/.vscode/tasks.json

@@ -1,33 +0,0 @@
-{
-    // See https://go.microsoft.com/fwlink/?LinkId=733558
-    // for the documentation about the tasks.json format
-    "version": "2.0.0",
-    "command": "npm",
-    "tasks": [
-        {
-            "label": "install",
-            "type": "shell",
-            "command": "npm",
-            "args": ["install"]
-        },
-        {
-            "label": "update",
-            "type": "shell",
-            "command": "npm",
-            "args": ["update"]
-        },
-        {
-            "label": "test",
-            "type": "shell",
-            "command": "npm",
-            "args": ["run", "test"]
-        },
-        {
-            "label": "build",
-            "type": "shell",
-            "group": "build",
-            "command": "npm",
-            "args": ["run", "watch"]
-        }
-    ]
-}

package/index.html

@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/icon?family=Material+Icons"
-        />
-        <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-        />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;400;500;700&display=swap"
-            rel="stylesheet"
-        />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
-            rel="stylesheet"
-        />
-
-        <title>redux-connected-chrome-extension</title>
-        <style>
-            body {
-                padding: 0;
-                margin: 0;
-                min-height: 100vh;
-                font-family: 'Inter', sans-serif;
-            }
-
-            body,
-            #root {
-                display: flex;
-                flex: 1;
-            }
-
-            input,
-            h1,
-            h2,
-            h3,
-            select,
-            textarea {
-                font-family: 'Inter', sans-serif;
-            }
-        </style>
-    </head>
-    <body>
-        <div id="root"></div>
-        <div id="modal-root"></div>
-        <script type="module" src="/src/panel.tsx"></script>
-    </body>
-</html>

package/jest.config.js

@@ -1,8 +0,0 @@
-module.exports = {
-    "roots": [
-        "src"
-    ],
-    "transform": {
-        "^.+\\.ts$": "ts-jest"
-    },
-}; 

package/public/devtools.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Injects the devtools panel</title>
-        <script src="js/devtools.js"></script>
-    </head>
-    <body></body>
-</html>

package/public/manifest.json

@@ -1,29 +0,0 @@
-{
-    "manifest_version": 3,
-    "name": "redux-connected devtools",
-    "description": "Inspect the lifecycle of a redux-connected request",
-    "version": "1.0",
-    "options_ui": {
-        "page": "options.html"
-    },
-    "action": {
-        "default_icon": "icon.png",
-        "default_popup": "popup.html"
-    },
-    "background": {
-        "service_worker": "js/background.js"
-    },
-    "content_scripts": [
-        {
-            "matches": ["<all_urls>"],
-            "js": [
-                "js/vendor.js",
-                "js/content_script.js",
-                "js/injected_script.js"
-            ]
-        }
-    ],
-    "devtools_page": "devtools.html",
-    "permissions": ["storage"],
-    "host_permissions": ["<all_urls>"]
-}

package/public/options.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Extension options</title>
-        <script src="js/vendor.js"></script>
-    </head>
-
-    <body>
-        <div id="root"></div>
-        <script src="js/options.js"></script>
-    </body>
-</html>

package/public/panel.html

@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Redux-connected devtools</title>
-        <script src="js/vendor.js"></script>
-        <link
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
-            rel="stylesheet"
-        />
-        <style>
-            body {
-                padding: 0;
-                margin: 0;
-                min-height: 100vh;
-            }
-
-            body,
-            #root {
-                display: flex;
-                flex: 1;
-                font-family: 'Inter', sans-serif;
-            }
-
-            input,
-            h1,
-            h2,
-            h3,
-            select,
-            textarea {
-                font-family: 'Inter', sans-serif;
-            }
-        </style>
-    </head>
-
-    <body>
-        <div id="root"></div>
-        <script src="js/panel.js"></script>
-    </body>
-</html>

package/public/popup.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="UTF-8" />
-        <title>Popup</title>
-        <script src="js/vendor.js"></script>
-    </head>
-    <body>
-        <div id="root"></div>
-        <script src="js/popup.js"></script>
-    </body>
-</html>

package/src/__tests__/sum.ts

@@ -1,9 +0,0 @@
-import { sum } from "../sum";
-
-test("1 + 1 = 2", () => {
-  expect(sum(1, 1)).toBe(2);
-});
-
-test("1 + 2 != 2", () => {
-  expect(sum(1, 2)).not.toBe(2);
-});

package/src/background.ts

@@ -1,49 +0,0 @@
-// background.js
-
-let connections: Record<number | string, chrome.runtime.Port> = {};
-
-chrome.runtime.onConnect.addListener(function (port) {
-    var extensionListener = function (message: any) {
-        // The original connection event doesn't include the tab ID of the
-        // DevTools page, so we need to send it explicitly.
-        if (message.name == 'init') {
-            connections[message.tabId] = port;
-            return;
-        }
-
-        // other message handling
-    };
-
-    // Listen to messages sent from the DevTools page
-    port.onMessage.addListener(extensionListener);
-
-    port.onDisconnect.addListener(function (port) {
-        port.onMessage.removeListener(extensionListener);
-
-        const tabs = Object.keys(connections);
-        for (var i = 0, len = tabs.length; i < len; i++) {
-            if (connections[tabs[i]] == port) {
-                delete connections[tabs[i]];
-                break;
-            }
-        }
-    });
-});
-
-// Receive message from content script and relay to the devTools page for the
-// current tab
-chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
-    // Messages from content scripts should have sender.tab set
-    if (sender.tab) {
-        var tabId = sender.tab.id;
-
-        if (tabId && connections[tabId]) {
-            connections[tabId].postMessage(request);
-        } else {
-            console.log('Tab not found in connection list.');
-        }
-    } else {
-        console.log('sender.tab not defined.');
-    }
-    return true;
-});

package/src/components/DevInspector/DevInspector.scss

@@ -1,2 +0,0 @@
-.DevInspector-container {
-}

package/src/components/DevInspector/DevInspector.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { Container } from './DevInspector.style';
-import { ApiRequest } from 'redux-connected';
-import RequestJourney from '../RequestJourney/RequestJourney';
-import RequestDetails from '../RequestDetails/RequestDetails';
-
-export type DevInspectorProps = {
-    item?: ApiRequest;
-};
-
-export function DevInspector(props: DevInspectorProps) {
-    const { item } = props;
-
-    if (!item) {
-        return (
-            <Container
-                className='DevInspector-container'
-                data-testid='DevInspector-container'
-            ></Container>
-        );
-    }
-
-    return (
-        <Container
-            className='DevInspector-container'
-            data-testid='DevInspector-container'
-        >
-            <RequestDetails item={item} />
-            <RequestJourney item={item} />
-        </Container>
-    );
-}
-
-export default DevInspector;

package/src/components/DevList/DevList.scss

@@ -1,2 +0,0 @@
-.DevList-container {
-}

package/src/components/DevList/DevList.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import { Container, Empty } from './DevList.style';
-import { FixedSizeList as List } from 'react-window';
-import { Json } from '../../types';
-
-export type DevListProps = {
-    items: Json[];
-    row: React.FC<any>;
-    onClick: (item: any) => void;
-};
-
-export function DevList(props: DevListProps) {
-    const { row: Cmp, items } = props;
-
-    const Item = (rowInfo: any) => {
-        const { index, style } = rowInfo;
-
-        const item = items[index];
-
-        return (
-            <Cmp
-                onClick={props.onClick}
-                index={index}
-                style={style}
-                item={item}
-            />
-        );
-    };
-
-    function renderEmpty() {
-        return <Empty>Empty list</Empty>;
-    }
-
-    function renderList() {
-        if (items.length === 0) {
-            return renderEmpty();
-        }
-
-        return (
-            <List
-                height={850}
-                itemCount={items.length}
-                itemSize={68}
-                width={350}
-                className='list'
-            >
-                {Item}
-            </List>
-        );
-    }
-
-    return (
-        <Container
-            className='DevList-container'
-            data-testid='DevList-container'
-        >
-            {renderList()}
-        </Container>
-    );
-}
-
-export default DevList;

package/src/components/DevMenu/DevMenu.scss

@@ -1,2 +0,0 @@
-.DevMenu-container {
-}