mirror of
https://codeberg.org/demostf/inspector.git
synced 2026-06-03 18:14:08 +02:00
hot reload
This commit is contained in:
parent
8e4b5f9a61
commit
eb629acd5b
8 changed files with 11978 additions and 4825 deletions
|
|
@ -3,53 +3,6 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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>
|
||||
<body>
|
||||
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
|
||||
|
|
|
|||
7864
www/package-lock.json
generated
7864
www/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -8,7 +8,7 @@
|
|||
},
|
||||
"scripts": {
|
||||
"build": "webpack --config webpack.config.js",
|
||||
"start": "webpack serve"
|
||||
"start": "webpack serve --hot"
|
||||
},
|
||||
"dependencies": {
|
||||
"demo-inspector": "file:../pkg",
|
||||
|
|
@ -19,12 +19,23 @@
|
|||
"react-window": "^1.8.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
|
||||
"@types/react": "^17.0.15",
|
||||
"@types/react-dom": "^17.0.9",
|
||||
"@types/react-virtualized-auto-sizer": "^1.0.1",
|
||||
"@types/react-window": "^1.8.4",
|
||||
"@webpack-cli/serve": "^1.5.1",
|
||||
"babel-loader": "^8.2.2",
|
||||
"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",
|
||||
"type-fest": "^1.3.0",
|
||||
"typescript": "^4.3.5",
|
||||
"webpack": "^5.46.0",
|
||||
"webpack-cli": "^4.7.2",
|
||||
|
|
|
|||
6
www/postcss.config.js
Normal file
6
www/postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: [
|
||||
'postcss-preset-env',
|
||||
'postcss-nested'
|
||||
]
|
||||
};
|
||||
|
|
@ -5,6 +5,8 @@ import ReactDOM from "react-dom";
|
|||
import {Header} from "./header";
|
||||
import {PacketDetails, PacketTable} from "./table";
|
||||
|
||||
let _style = require('../styles/style.css');
|
||||
|
||||
interface AppState {
|
||||
loading: boolean,
|
||||
header: Header | null,
|
||||
|
|
@ -88,13 +90,12 @@ class App extends Component<{}, AppState> {
|
|||
<>
|
||||
<PacketTable packets={this.state.packets} class_names={this.state.class_names}
|
||||
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}
|
||||
</>
|
||||
)
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<DemoDropzone onDrop={(data) => this.load(data)}/>
|
||||
|
|
@ -102,43 +103,42 @@ class App extends Component<{}, AppState> {
|
|||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<App/>
|
||||
ReactDOM.render(
|
||||
<App/>
|
||||
,
|
||||
document.getElementById("root")
|
||||
);
|
||||
);
|
||||
|
||||
|
||||
function DemoDropzone(
|
||||
{
|
||||
onDrop
|
||||
}
|
||||
:
|
||||
function DemoDropzone(
|
||||
{
|
||||
onDrop
|
||||
}
|
||||
:
|
||||
{
|
||||
onDrop: (data: ArrayBuffer) => void
|
||||
}
|
||||
)
|
||||
{
|
||||
const onDropCb = useCallback(acceptedFiles => {
|
||||
let reader = new FileReader();
|
||||
reader.readAsArrayBuffer(acceptedFiles[0]);
|
||||
reader.addEventListener('load', () => {
|
||||
let result = reader.result as ArrayBuffer;
|
||||
onDrop(result)
|
||||
});
|
||||
}, [])
|
||||
const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop: onDropCb})
|
||||
) {
|
||||
const onDropCb = useCallback(acceptedFiles => {
|
||||
let reader = new FileReader();
|
||||
reader.readAsArrayBuffer(acceptedFiles[0]);
|
||||
reader.addEventListener('load', () => {
|
||||
let result = reader.result as ArrayBuffer;
|
||||
onDrop(result)
|
||||
});
|
||||
}, [])
|
||||
const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop: onDropCb})
|
||||
|
||||
return (
|
||||
<div {...getRootProps()}>
|
||||
<input {...getInputProps()} />
|
||||
{
|
||||
isDragActive ?
|
||||
<p>Drop the files here ...</p> :
|
||||
<p>Drag 'n' drop some files here, or click to select files</p>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className="dropzone" {...getRootProps()}>
|
||||
<input {...getInputProps()} />
|
||||
{
|
||||
isDragActive ?
|
||||
<p>Drop the files here ...</p> :
|
||||
<p>Drag 'n' drop some files here, or click to select files</p>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@ interface TableProps {
|
|||
|
||||
export function PacketTable({packets, prop_names, class_names, onClick, activeIndex}: TableProps) {
|
||||
const Row: (props: { index: number, style: CSSProperties }) => any = ({index, style}) => (
|
||||
<div key={index} onClick={() => {
|
||||
<p key={index} onClick={() => {
|
||||
onClick(index, packets[index])
|
||||
}} style={style} className={(activeIndex == index ? 'active ' : '') + 'prop_row'}>
|
||||
<PacketRow packet={packets[index]}/>
|
||||
</div>
|
||||
</p>
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
|
|||
71
www/styles/style.css
Normal file
71
www/styles/style.css
Normal 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;
|
||||
}
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
||||
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
|
||||
const isDevelopment = process.env.NODE_ENV !== 'production';
|
||||
|
||||
module.exports = [{
|
||||
entry: "./bootstrap.js",
|
||||
|
|
@ -7,13 +11,27 @@ module.exports = [{
|
|||
path: path.resolve(__dirname, "dist"),
|
||||
filename: "bootstrap.js",
|
||||
},
|
||||
mode: "development",
|
||||
mode: isDevelopment ? 'development' : 'production',
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: 'ts-loader',
|
||||
test: /\.[jt]sx?$/,
|
||||
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'],
|
||||
},
|
||||
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",
|
||||
target: 'webworker',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue