Skip to content

Commit 0b8ee51

Browse files
yann300yann300
committed
debugger react app
1 parent 72a2c5c commit 0b8ee51

33 files changed

Lines changed: 1154 additions & 453 deletions

‎apps/debugger/.babelrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": ["@nrwl/react/babel"],
3+
"plugins": []
4+
}

‎apps/debugger/.browserslistrc‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# This file is used by:
2+
# 1. autoprefixer to adjust CSS to support the below specified browsers
3+
# 2. babel preset-env to adjust included polyfills
4+
#
5+
# For additional information regarding the format and rule options, please see:
6+
# https://github.com/browserslist/browserslist#queries
7+
#
8+
# If you need to support different browsers in production, you may tweak the list below.
9+
10+
last 1 Chrome version
11+
last 1 Firefox version
12+
last 2 Edge major versions
13+
last 2 Safari major version
14+
last 2 iOS major versions
15+
Firefox ESR
16+
not IE 9-11 # For IE 9-11 support, remove 'not'.

‎apps/debugger/src/app/app.css‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
.app {
2+
font-family: sans-serif;
3+
min-width: 300px;
4+
max-width: 600px;
5+
margin: 50px auto;
6+
}
7+
8+
.app .gutter-left {
9+
margin-left: 9px;
10+
}
11+
12+
.app .col-span-2 {
13+
grid-column: span 2;
14+
}
15+
16+
.app .flex {
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
}
21+
22+
.app header {
23+
background-color: #143055;
24+
color: white;
25+
padding: 5px;
26+
border-radius: 3px;
27+
}
28+
29+
.app main {
30+
padding: 0 36px;
31+
}
32+
33+
.app p {
34+
text-align: center;
35+
}
36+
37+
.app h1 {
38+
text-align: center;
39+
margin-left: 18px;
40+
font-size: 24px;
41+
}
42+
43+
.app h2 {
44+
text-align: center;
45+
font-size: 20px;
46+
margin: 40px 0 10px 0;
47+
}
48+
49+
.app .resources {
50+
text-align: center;
51+
list-style: none;
52+
padding: 0;
53+
display: grid;
54+
grid-gap: 9px;
55+
grid-template-columns: 1fr 1fr;
56+
}
57+
58+
.app .resource {
59+
color: #0094ba;
60+
height: 36px;
61+
background-color: rgba(0, 0, 0, 0);
62+
border: 1px solid rgba(0, 0, 0, 0.12);
63+
border-radius: 4px;
64+
padding: 3px 9px;
65+
text-decoration: none;
66+
}
67+
68+
.app .resource:hover {
69+
background-color: rgba(68, 138, 255, 0.04);
70+
}
71+
72+
.app pre {
73+
padding: 9px;
74+
border-radius: 4px;
75+
background-color: black;
76+
color: #eee;
77+
}
78+
79+
.app details {
80+
border-radius: 4px;
81+
color: #333;
82+
background-color: rgba(0, 0, 0, 0);
83+
border: 1px solid rgba(0, 0, 0, 0.12);
84+
padding: 3px 9px;
85+
margin-bottom: 9px;
86+
}
87+
88+
.app summary {
89+
outline: none;
90+
height: 36px;
91+
line-height: 36px;
92+
}
93+
94+
.app .github-star-container {
95+
margin-top: 12px;
96+
line-height: 20px;
97+
}
98+
99+
.app .github-star-container a {
100+
display: flex;
101+
align-items: center;
102+
text-decoration: none;
103+
color: #333;
104+
}
105+
106+
.app .github-star-badge {
107+
color: #24292e;
108+
display: flex;
109+
align-items: center;
110+
font-size: 12px;
111+
padding: 3px 10px;
112+
border: 1px solid rgba(27, 31, 35, 0.2);
113+
border-radius: 3px;
114+
background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
115+
margin-left: 4px;
116+
font-weight: 600;
117+
}
118+
119+
.app .github-star-badge:hover {
120+
background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
121+
border-color: rgba(27, 31, 35, 0.35);
122+
background-position: -0.5em;
123+
}
124+
.app .github-star-badge .material-icons {
125+
height: 16px;
126+
width: 16px;
127+
margin-right: 4px;
128+
}

‎apps/debugger/src/app/app.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React, { useState, useEffect } from 'react';
2+
3+
import { DebuggerUI } from '@remix-ui/debugger-ui' // eslint-disable-line
4+
5+
import './app.css';
6+
7+
import { DebuggerClientApi } from './debugger'
8+
9+
const remix = new DebuggerClientApi()
10+
11+
export const App = () => {
12+
/*
13+
* Replace the elements below with your own.
14+
*
15+
* Note: The corresponding styles are in the ./app.css file.
16+
*/
17+
let renderCount = 0
18+
const [state, setState] = useState(renderCount)
19+
20+
remix.onRenderComponent = () => {
21+
renderCount++
22+
setState(renderCount)
23+
}
24+
25+
return (
26+
<div className="debugger">
27+
<DebuggerUI debuggerAPI={remix} />
28+
</div>
29+
);
30+
};
31+
32+
export default App;

‎apps/debugger/src/app/debugger.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { PluginClient } from "@remixproject/plugin";
2+
import { createClient } from "@remixproject/plugin-webview";
3+
import { DebuggerApiMixin, RawLocation, Sources, Asts, LineColumnLocation,
4+
onBreakpointClearedListener, onBreakpointAddedListener, onEditorContentChanged, TransactionReceipt } from '@remix-ui/debugger-ui'
5+
6+
export class DebuggerClientApi extends DebuggerApiMixin(PluginClient) {
7+
constructor () {
8+
super()
9+
createClient(this as any)
10+
this.initDebuggerApi()
11+
}
12+
13+
onRenderComponent() {}
14+
15+
offsetToLineColumnConverter: { offsetToLineColumn: (sourceLocation: RawLocation, file: number, contents: Sources, asts: Asts) => Promise<LineColumnLocation> }
16+
debugHash: string
17+
debugHashRequest: number
18+
removeHighlights: boolean
19+
onBreakpointCleared: (listener: onBreakpointClearedListener) => void
20+
onBreakpointAdded: (listener: onBreakpointAddedListener) => void
21+
onEditorContentChanged: (listener: onEditorContentChanged) => void
22+
discardHighlight: () => Promise<void>
23+
highlight: (lineColumnPos: LineColumnLocation, path: string) => Promise<void>
24+
fetchContractAndCompile: (address: string, currentReceipt: TransactionReceipt) => Promise<CompilerAbstract>
25+
getFile: (path: string) => Promise<string>
26+
setFile: (path: string, content: string) => Promise<void>
27+
getDebugWeb3: () => any // returns an instance of web3.js
28+
}
29+

‎apps/debugger/src/assets/.gitkeep‎

Whitespace-only changes.

‎apps/debugger/src/environments/environment.prod.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const environment = {
2+
production: true
3+
};

‎apps/debugger/src/environments/environment.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// This file can be replaced during build by using the `fileReplacements` array.
2+
// When building for production, this file is replaced with `environment.prod.ts`.
3+
4+
export const environment = {
5+
production: false
6+
};

‎apps/debugger/src/favicon.ico‎

14.7 KB
Binary file not shown.

‎apps/debugger/src/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Debugger</title>
6+
<base href="/" />
7+
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
10+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"/>
11+
</head>
12+
<body>
13+
<div id="root"></div>
14+
</body>
15+
</html>

0 commit comments

Comments
 (0)