demostf/inspector
1
0
Fork 0
mirror of https://codeberg.org/demostf/inspector.git synced 2026-06-03 10:04:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

hot reload

Browse source
This commit is contained in:
Robin Appelman 2021-08-01 17:05:42 +02:00
commit eb629acd5b
8 changed files with 11978 additions and 4825 deletions
Download patch file Download diff file Expand all files Collapse all files

47
www/index.html
View file

@ -3,53 +3,6 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello wasm-pack!</title> <title>Hello wasm-pack!</title>
<style>
span.tick {
display: inline-block;
width: 50px;
text-align: right;
padding-right: 5px;
}
span.type {
vertical-align: top;
word-wrap: break-word;
}
div.details {
display: inline-block;
width: calc(100vw - 210px);
height: 100vh;
overflow: auto;
}
div.list {
display: inline-block;
}
#root {
display: flex;
flex-direction: row;
}
table {
table-layout: fixed;
}
tr {
height: 30px;
}
td.type {
vertical-align: top;
width: 160px;
}
p {
margin: 8px 0;
}
html, body, #root {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
div.prop_row.active {
background: #ccc;
}
</style>
</head> </head>
<body> <body>
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript> <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>

7864
www/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

13
www/package.json
View file

@ -8,7 +8,7 @@
}, },
"scripts": { "scripts": {
"build": "webpack --config webpack.config.js", "build": "webpack --config webpack.config.js",
"start": "webpack serve" "start": "webpack serve --hot"
}, },
"dependencies": { "dependencies": {
"demo-inspector": "file:../pkg", "demo-inspector": "file:../pkg",
@ -19,12 +19,23 @@
"react-window": "^1.8.6" "react-window": "^1.8.6"
}, },
"devDependencies": { "devDependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"@types/react": "^17.0.15", "@types/react": "^17.0.15",
"@types/react-dom": "^17.0.9", "@types/react-dom": "^17.0.9",
"@types/react-virtualized-auto-sizer": "^1.0.1", "@types/react-virtualized-auto-sizer": "^1.0.1",
"@types/react-window": "^1.8.4", "@types/react-window": "^1.8.4",
"@webpack-cli/serve": "^1.5.1",
"babel-loader": "^8.2.2",
"copy-webpack-plugin": "^9.0.1", "copy-webpack-plugin": "^9.0.1",
"css-loader": "^6.2.0",
"postcss-cssnext": "^3.1.0",
"postcss-loader": "^6.1.1",
"postcss-nested": "^5.0.6",
"postcss-preset-env": "^6.7.0",
"react-refresh": "^0.9.0",
"style-loader": "^3.2.1",
"ts-loader": "^9.2.4", "ts-loader": "^9.2.4",
"type-fest": "^1.3.0",
"typescript": "^4.3.5", "typescript": "^4.3.5",
"webpack": "^5.46.0", "webpack": "^5.46.0",
"webpack-cli": "^4.7.2", "webpack-cli": "^4.7.2",

6
www/postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
module.exports = {
plugins: [
'postcss-preset-env',
'postcss-nested'
]
};

14
www/src/index.tsx
View file

@ -5,6 +5,8 @@ import ReactDOM from "react-dom";
import {Header} from "./header"; import {Header} from "./header";
import {PacketDetails, PacketTable} from "./table"; import {PacketDetails, PacketTable} from "./table";
let _style = require('../styles/style.css');
interface AppState { interface AppState {
loading: boolean, loading: boolean,
header: Header | null, header: Header | null,
@ -88,13 +90,12 @@ class App extends Component<{}, AppState> {
<> <>
<PacketTable packets={this.state.packets} class_names={this.state.class_names} <PacketTable packets={this.state.packets} class_names={this.state.class_names}
activeIndex={this.state.activeIndex} activeIndex={this.state.activeIndex}
prop_names={this.state.prop_names} onClick={(activeIndex, active) => this.setState({activeIndex, active})}/> prop_names={this.state.prop_names}
onClick={(activeIndex, active) => this.setState({activeIndex, active})}/>
{active} {active}
</> </>
) )
} } else {
else
{
return ( return (
<> <>
<DemoDropzone onDrop={(data) => this.load(data)}/> <DemoDropzone onDrop={(data) => this.load(data)}/>
@ -119,8 +120,7 @@ class App extends Component<{}, AppState> {
{ {
onDrop: (data: ArrayBuffer) => void onDrop: (data: ArrayBuffer) => void
} }
) ) {
{
const onDropCb = useCallback(acceptedFiles => { const onDropCb = useCallback(acceptedFiles => {
let reader = new FileReader(); let reader = new FileReader();
reader.readAsArrayBuffer(acceptedFiles[0]); reader.readAsArrayBuffer(acceptedFiles[0]);
@ -132,7 +132,7 @@ class App extends Component<{}, AppState> {
const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop: onDropCb}) const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop: onDropCb})
return ( return (
<div {...getRootProps()}> <div className="dropzone" {...getRootProps()}>
<input {...getInputProps()} /> <input {...getInputProps()} />
{ {
isDragActive ? isDragActive ?

4
www/src/table.tsx
View file

@ -12,11 +12,11 @@ interface TableProps {
export function PacketTable({packets, prop_names, class_names, onClick, activeIndex}: TableProps) { export function PacketTable({packets, prop_names, class_names, onClick, activeIndex}: TableProps) {
const Row: (props: { index: number, style: CSSProperties }) => any = ({index, style}) => ( const Row: (props: { index: number, style: CSSProperties }) => any = ({index, style}) => (
<div key={index} onClick={() => { <p key={index} onClick={() => {
onClick(index, packets[index]) onClick(index, packets[index])
}} style={style} className={(activeIndex == index ? 'active ' : '') + 'prop_row'}> }} style={style} className={(activeIndex == index ? 'active ' : '') + 'prop_row'}>
<PacketRow packet={packets[index]}/> <PacketRow packet={packets[index]}/>
</div> </p>
); );
return ( return (

71
www/styles/style.css Normal file
View file

@ -0,0 +1,71 @@
span.tick {
width: 50px;
text-align: right;
padding-right: 5px;
}
span.type {
vertical-align: top;
word-wrap: break-word;
}
div.details {
display: inline-block;
width: calc(100vw - 210px);
height: 100vh;
overflow: auto;
}
div.list {
display: inline-block;
}
#root {
display: flex;
flex-direction: row;
}
table {
table-layout: fixed;
}
tr {
height: 30px;
}
td.type {
vertical-align: top;
width: 160px;
}
p {
margin: 8px 0;
}
html, body, #root {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.prop_row {
margin: 0;
&.active {
background: #ccc;
}
display: inline-flex;
align-items: center;
span {
vertical-align: middle;
}
}
.dropzone {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

30
www/webpack.config.js
View file

@ -1,5 +1,9 @@
const CopyWebpackPlugin = require("copy-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin");
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const path = require('path'); const path = require('path');
const webpack = require('webpack');
const isDevelopment = process.env.NODE_ENV !== 'production';
module.exports = [{ module.exports = [{
entry: "./bootstrap.js", entry: "./bootstrap.js",
@ -7,13 +11,27 @@ module.exports = [{
path: path.resolve(__dirname, "dist"), path: path.resolve(__dirname, "dist"),
filename: "bootstrap.js", filename: "bootstrap.js",
}, },
mode: "development", mode: isDevelopment ? 'development' : 'production',
module: { module: {
rules: [ rules: [
{ {
test: /\.tsx?$/, test: /\.[jt]sx?$/,
use: 'ts-loader',
exclude: /node_modules/, exclude: /node_modules/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
plugins: [
isDevelopment && require.resolve('react-refresh/babel'),
].filter(Boolean),
},
},
'ts-loader',
],
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader", "postcss-loader"],
}, },
], ],
}, },
@ -21,8 +39,10 @@ module.exports = [{
extensions: ['.tsx', '.ts', '.js'], extensions: ['.tsx', '.ts', '.js'],
}, },
plugins: [ plugins: [
new CopyWebpackPlugin({patterns: [{from: 'index.html'}]}) new CopyWebpackPlugin({patterns: [{from: 'index.html'}]}),
], isDevelopment && new webpack.HotModuleReplacementPlugin(),
isDevelopment && new ReactRefreshWebpackPlugin(),
].filter(Boolean),
}, { }, {
entry: "./src/worker.ts", entry: "./src/worker.ts",
target: 'webworker', target: 'webworker',