mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-27 00:19:55 +03:00
refactor(rtk-query-monitor): conform demo setup to repo standards
This commit is contained in:
FaberVitale
parent
323a5d954c
commit
76f00bd6ab
|
|
@ -19,7 +19,7 @@
|
|||
"babel-eslint": "^10.1.0",
|
||||
"babel-loader": "^8.2.2",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"copy-webpack-plugin": "^6.3.1",
|
||||
"copy-webpack-plugin": "^6.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^4.3.0",
|
||||
"eslint": "^7.28.0",
|
||||
|
|
|
|||
|
|
@ -95,7 +95,11 @@ See also
|
|||
|
||||
### Development
|
||||
|
||||
[running the demo](./demo/README.md)
|
||||
#### Start Demo
|
||||
|
||||
```bash
|
||||
yarn lerna run start --stream --scope @redux-devtools/rtk-query-monitor
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
|
|
|
|||
11
packages/redux-devtools-rtk-query-monitor/demo/.babelrc
Normal file
11
packages/redux-devtools-rtk-query-monitor/demo/.babelrc
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"presets": [
|
||||
"@babel/preset-env",
|
||||
"@babel/preset-react",
|
||||
"@babel/preset-typescript"
|
||||
],
|
||||
"plugins": [
|
||||
"@babel/plugin-proposal-class-properties",
|
||||
"@babel/plugin-transform-runtime"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
# RTK Query Inspector monitor demo
|
||||
|
||||
## Running demo
|
||||
|
||||
### Working directory
|
||||
|
||||
Run the following commands from redux-devtools monorepo root directory.
|
||||
|
||||
### 1. Install monorepo depedencies
|
||||
|
||||
```bash
|
||||
yarn
|
||||
```
|
||||
|
||||
### 2. Install demo dependencies
|
||||
|
||||
```bash
|
||||
yarn exec --cwd 'packages/redux-devtools-rtk-query-monitor/demo' yarn
|
||||
```
|
||||
|
||||
### 3. Start demo
|
||||
|
||||
```bash
|
||||
yarn lerna run --stream start --scope '@redux-devtools/rtk-query-monitor'
|
||||
```
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"extends": "../../../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"resolveJsonModule": true
|
||||
},
|
||||
"include": ["webpack.config.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
import * as path from 'path';
|
||||
import * as webpack from 'webpack';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
|
||||
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
|
||||
import * as pkg from '../../package.json';
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const isProduction = process.env.NODE_ENV === 'production';
|
||||
|
||||
const demoSrc = path.join(__dirname, '../src');
|
||||
const libSrc = path.join(__dirname, '../../src');
|
||||
const publicDir = path.join(__dirname, '../public');
|
||||
|
||||
module.exports = {
|
||||
mode: process.env.NODE_ENV || 'development',
|
||||
entry: isProduction
|
||||
? ['./demo/src/index']
|
||||
: [
|
||||
'webpack-dev-server/client?http://localhost:3000',
|
||||
'webpack/hot/only-dev-server',
|
||||
'./demo/src/index',
|
||||
],
|
||||
output: {
|
||||
path: path.join(__dirname, '../dist'),
|
||||
filename: isProduction ? '[name].[contenthash:8].js' : 'js/bundle.js',
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js|ts)x?$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/,
|
||||
include: [demoSrc, libSrc],
|
||||
},
|
||||
{
|
||||
test: /\.css?$/,
|
||||
loaders: ['style-loader', 'css-loader'],
|
||||
include: demoSrc,
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
modules: ['node_modules', demoSrc],
|
||||
extensions: ['.js', '.jsx', '.ts', '.tsx'],
|
||||
},
|
||||
optimization: {
|
||||
minimize: isProduction,
|
||||
},
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
inject: true,
|
||||
template: 'demo/public/index.html',
|
||||
package: pkg,
|
||||
}),
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [
|
||||
{
|
||||
from: 'demo/public/assets/*.js',
|
||||
to: ({ absoluteFilename }: any) => {
|
||||
return `./${path.basename(absoluteFilename)}`;
|
||||
},
|
||||
globOptions: {
|
||||
ignore: ['*.DS_Store'],
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
new ForkTsCheckerWebpackPlugin({
|
||||
typescript: {
|
||||
configFile: 'demo/tsconfig.json',
|
||||
},
|
||||
}),
|
||||
].concat(isProduction ? [] : [new webpack.HotModuleReplacementPlugin()]),
|
||||
devServer: isProduction
|
||||
? {}
|
||||
: {
|
||||
quiet: false,
|
||||
port: 3000,
|
||||
hot: true,
|
||||
stats: {
|
||||
chunkModules: false,
|
||||
colors: true,
|
||||
},
|
||||
historyApiFallback: true,
|
||||
},
|
||||
devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
|
||||
};
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
{
|
||||
"name": "rtk-query-monitor-demo",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts start",
|
||||
"build": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts build"
|
||||
},
|
||||
"author": {
|
||||
"name": "FaberVitale",
|
||||
"url": "https://github.com/FaberVitale"
|
||||
},
|
||||
"dependencies": {
|
||||
"@chakra-ui/react": "1.0.0",
|
||||
"@emotion/react": "^11.4.0",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@mswjs/data": "^0.3.0",
|
||||
"@redux-devtools/core": "^3.9.0",
|
||||
"@redux-devtools/dock-monitor": "^1.4.0",
|
||||
"@reduxjs/toolkit": "^1.6.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"devui": "^1.0.0-8",
|
||||
"framer-motion": "^2.9.5",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"msw": "0.28.2",
|
||||
"react": "^17.0.2",
|
||||
"react-base16-styling": "^0.8.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-json-tree": "^0.15.0",
|
||||
"react-redux": "^7.2.1",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "4.0.2",
|
||||
"redux": "^4.0.5",
|
||||
"redux-devtools-themes": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "17.0.0",
|
||||
"@types/react-dom": "17.0.0",
|
||||
"@types/react-redux": "7.1.9",
|
||||
"@types/react-router-dom": "5.1.6",
|
||||
"typescript": "~4.0.7"
|
||||
},
|
||||
"browserslist": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not ie <= 11",
|
||||
"not op_mini all"
|
||||
],
|
||||
"msw": {
|
||||
"workerDirectory": "public"
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-snowpack-app"
|
||||
content="@redux-devtools/rtk-query-monitor demo site"
|
||||
/>
|
||||
<title>RTK Query monitor demo</title>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import * as React from 'react';
|
||||
import { createDevTools } from '@redux-devtools/core';
|
||||
import DockMonitor from '@redux-devtools/dock-monitor';
|
||||
import RtkQueryMonitor from './build';
|
||||
import RtkQueryMonitor from '../../src';
|
||||
|
||||
const largeScreenQuery = window.matchMedia('(min-width: 1024px)');
|
||||
|
||||
|
|
|
|||
|
|
@ -25,4 +25,4 @@ function renderApp() {
|
|||
);
|
||||
}
|
||||
|
||||
worker.start({ quiet: true }).then(renderApp);
|
||||
worker.start({ quiet: true }).then(renderApp, renderApp);
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { configureStore, Middleware } from '@reduxjs/toolkit';
|
|||
import { pokemonApi } from './services/pokemon';
|
||||
import { postsApi } from 'services/posts';
|
||||
import DevTools from './DevTools';
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
[pokemonApi.reducerPath]: pokemonApi.reducer,
|
||||
|
|
|
|||
|
|
@ -1,21 +1,11 @@
|
|||
{
|
||||
"include": ["./src/**/*"],
|
||||
"extends": "../../../tsconfig.react.base.json",
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"lib": ["dom", "es2015"],
|
||||
"jsx": "react",
|
||||
"target": "es5",
|
||||
"baseUrl": "src",
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true
|
||||
}
|
||||
"baseUrl": "./src",
|
||||
"target": "esNext",
|
||||
"module": "es6",
|
||||
"moduleResolution": "node"
|
||||
},
|
||||
"include": ["../src", "src"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,11 +30,11 @@
|
|||
"url": "https://github.com/reduxjs/redux-devtools.git"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server --config demo/config/webpack.config.ts",
|
||||
"build": "npm run build:types && npm run build:js",
|
||||
"stats": "webpack --profile --json > stats.json",
|
||||
"build:demo": "cross-env NODE_ENV=production webpack -p --config demo/config/webpack.config.ts",
|
||||
"build:types": "tsc --emitDeclarationOnly",
|
||||
"start:demo": "cd demo && yarn start",
|
||||
"start:ts": "tsc -p ./tsconfig.dev.json --watch",
|
||||
"start": "run-p start:ts start:demo",
|
||||
"build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
|
||||
"clean": "rimraf lib",
|
||||
"lint": "eslint . --ext .ts,.tsx",
|
||||
|
|
@ -55,11 +55,27 @@
|
|||
"redux-devtools-themes": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@chakra-ui/react": "^1.6.5",
|
||||
"@emotion/react": "^11",
|
||||
"@emotion/styled": "^11",
|
||||
"@mswjs/data": "^0.3.0",
|
||||
"@redux-devtools/core": "^3.9.0",
|
||||
"@redux-devtools/dock-monitor": "^1.4.0",
|
||||
"@reduxjs/toolkit": "^1.6.0",
|
||||
"@types/react": "^16.14.8",
|
||||
"@types/react": "^17.0.2",
|
||||
"@types/react-dom": "17.0.0",
|
||||
"@types/react-redux": "7.1.9",
|
||||
"@types/react-router-dom": "5.1.6",
|
||||
"cross-env": "^7.0.3",
|
||||
"devui": "^1.0.0-8",
|
||||
"framer-motion": "^4",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"msw": "0.28.2",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"react": "^16.13.1",
|
||||
"react": "^16.14.0",
|
||||
"react-dom": "^16.14.0",
|
||||
"react-redux": "^7.2.1",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"redux": "^4.0.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
@ -68,5 +84,8 @@
|
|||
"@types/react": "^16.3.0 || ^17.0.0",
|
||||
"react": "^16.3.0 || ^17.0.0",
|
||||
"redux": "^3.4.0 || ^4.0.0"
|
||||
},
|
||||
"msw": {
|
||||
"workerDirectory": "demo/public"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
export { default } from './containers/RtkQueryMonitor';
|
||||
export { ExternalProps } from './types';
|
||||
export type { ExternalProps } from './types';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
{
|
||||
"extends": "../../tsconfig.react.base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "lib"
|
||||
"outDir": "lib",
|
||||
"resolveJsonModule": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user