@acala-network/chopsticks 0.3.3 → 0.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/rpc/substrate/system.js +5 -1
  2. package/dist/utils/generate-html-diff.js +5 -1
  3. package/package.json +2 -1
  4. package/template/diff.html +243 -0
package/dist/rpc/substrate/system.js CHANGED
@@ -1,7 +1,11 @@
1
1
  "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
2
5
  Object.defineProperty(exports, "__esModule", { value: true });
3
6
  const util_1 = require("@polkadot/util");
4
7
  const node_fs_1 = require("node:fs");
8
+ const node_path_1 = __importDefault(require("node:path"));
5
9
  const handlers = {
6
10
  system_chain: async (context) => {
7
11
  return context.chain.api.getSystemChain();
@@ -13,7 +17,7 @@ const handlers = {
13
17
  return context.chain.api.getSystemName();
14
18
  },
15
19
  system_version: async (_context) => {
16
- const { version } = JSON.parse((0, node_fs_1.readFileSync)('package.json', 'utf-8'));
20
+ const { version } = JSON.parse((0, node_fs_1.readFileSync)(node_path_1.default.join(__dirname, '../../../package.json'), 'utf-8'));
17
21
  return `chopsticks-v${version}`;
18
22
  },
19
23
  system_chainType: async (_context) => {
package/dist/utils/generate-html-diff.js CHANGED
@@ -1,12 +1,16 @@
1
1
  "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
2
5
  Object.defineProperty(exports, "__esModule", { value: true });
3
6
  exports.generateHtmlDiffPreviewFile = exports.generateHtmlDiff = void 0;
4
7
  const decoder_1 = require("./decoder");
5
8
  const node_fs_1 = require("node:fs");
6
9
  const lodash_1 = require("lodash");
10
+ const node_path_1 = __importDefault(require("node:path"));
7
11
  const generateHtmlDiff = async (block, diff) => {
8
12
  const [left, _right, delta] = await (0, decoder_1.decodeStorageDiff)(block, diff);
9
- const htmlTemplate = (0, node_fs_1.readFileSync)('./template/diff.html', 'utf-8');
13
+ const htmlTemplate = (0, node_fs_1.readFileSync)(node_path_1.default.join(__dirname, '../../template/diff.html'), 'utf-8');
10
14
  return (0, lodash_1.template)(htmlTemplate)({ left: JSON.stringify(left), delta: JSON.stringify(delta) });
11
15
  };
12
16
  exports.generateHtmlDiff = generateHtmlDiff;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acala-network/chopsticks",
3
- "version": "0.3.3",
3
+ "version": "0.3.5",
4
4
  "main": "./dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "author": "Bryan Chen <xlchen1291@gmail.com>",
@@ -74,6 +74,7 @@
74
74
  "files": [
75
75
  "dist",
76
76
  "bin",
77
+ "template",
77
78
  "chopsticks.mjs"
78
79
  ],
79
80
  "engines": {
package/template/diff.html ADDED
@@ -0,0 +1,243 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <style>
5
+ body {
6
+ font-family: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
7
+ font-size: 14px;
8
+ min-width: 600px;
9
+ margin: 0;
10
+ padding: 0;
11
+ background-color: rgb(39, 40, 34);
12
+ }
13
+
14
+ div#app {
15
+ margin: 0 !important;
16
+ padding: 10px !important;
17
+ }
18
+
19
+ .diff {
20
+ padding: 2px 4px;
21
+ border-radius: 4px;
22
+ position: relative;
23
+ color: white;
24
+ line-height: 150%;
25
+ }
26
+
27
+ .diffWrap {
28
+ position: relative;
29
+ z-index: 1;
30
+ }
31
+
32
+ li:has(> span > span.diffWrap > span.diffRemove) > label {
33
+ color: red !important;
34
+ text-decoration: line-through;
35
+ text-decoration-thickness: 1px;
36
+ }
37
+
38
+ .diffAdd {
39
+ color: darkseagreen;
40
+ }
41
+
42
+ .diffRemove {
43
+ text-decoration: line-through;
44
+ text-decoration-thickness: 1px;
45
+ color: red;
46
+ }
47
+
48
+ .diffUpdateFrom {
49
+ text-decoration: line-through;
50
+ text-decoration-thickness: 1px;
51
+ color: red;
52
+ }
53
+
54
+ .diffUpdateTo {
55
+ color: darkseagreen;
56
+ }
57
+
58
+ .diffUpdateArrow {
59
+ color: #ccc;
60
+ }
61
+ .unchanged {
62
+ color: #666;
63
+ }
64
+ .delta {
65
+ color: #ccc;
66
+ font-size: 12px;
67
+ margin: 0 10px;
68
+ }
69
+ </style>
70
+ <script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>
71
+ <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js" crossorigin></script>
72
+ <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
73
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
74
+ <script src="https://unpkg.com/react-json-tree@0.18.0/lib/umd/react-json-tree.min.js" crossorigin></script>
75
+ </head>
76
+
77
+ <body>
78
+ <div id="app"></div>
79
+ <script type="text/babel">
80
+
81
+ const left = <%= left %>;
82
+ const delta = <%= delta %>;
83
+
84
+ const expandFirstLevel = (keyName, data, level) => level <= 1;
85
+
86
+ function stringifyAndShrink(val) {
87
+ if (val == null) return 'null';
88
+ if (typeof val === 'string') return val
89
+ return JSON.stringify(val, null, 1);
90
+ }
91
+
92
+ const styling = (a) => {
93
+ const className = Array.isArray(a) ? a : [a]
94
+ return { className: className.join(' ') }
95
+ }
96
+
97
+ function valueRenderer(raw, value, ...keys) {
98
+ const modifyPath = keys.reverse().join('.')
99
+ const removePath = keys.map(x => Number.isInteger(parseInt(x)) ? '_' + x : x).join('.')
100
+ const isDelta = _.has(delta, modifyPath) || _.has(delta, removePath)
101
+
102
+ function renderSpan(name, body) {
103
+ return (
104
+ <span key={name} {...styling(['diff', name])}>
105
+ {body}
106
+ </span>
107
+ );
108
+ }
109
+
110
+ function renderDelta(value) {
111
+ if (/^\d+(,\d+)*$/.test(value[0]) && /^\d+(,\d+)*$/.test(value[1])) {
112
+ const oldValue = parseInt(value[0].replace(/,/g, ''))
113
+ const newValue = parseInt(value[1].replace(/,/g, ''))
114
+ if (oldValue > 0 && newValue > 0) {
115
+ const delta = Number(newValue - oldValue)
116
+ return (<span className="delta" >{delta > 0 ? '+' : ''}{delta.toLocaleString()}</span>)
117
+ }
118
+ }
119
+ }
120
+
121
+ if (isDelta && Array.isArray(value)) {
122
+ switch (value.length) {
123
+ case 0:
124
+ return (
125
+ <span {...styling('diffWrap')}>
126
+ {renderSpan('diff', '[]')}
127
+ </span>
128
+ )
129
+ case 1:
130
+ return (
131
+ <span {...styling('diffWrap')}>
132
+ {renderSpan(
133
+ 'diffAdd',
134
+ stringifyAndShrink(value[0])
135
+ )}
136
+ </span>
137
+ );
138
+ case 2:
139
+ return (
140
+ <span {...styling('diffWrap')}>
141
+ {renderSpan(
142
+ 'diffUpdateFrom',
143
+ stringifyAndShrink(value[0])
144
+ )}
145
+ {renderSpan('diffUpdateArrow', ' => ')}
146
+ {renderSpan(
147
+ 'diffUpdateTo',
148
+ stringifyAndShrink(value[1])
149
+ )}
150
+ {renderDelta(value)}
151
+ </span>
152
+ );
153
+ case 3:
154
+ return (
155
+ <span {...styling('diffWrap')}>
156
+ {renderSpan('diffRemove', stringifyAndShrink(value[0]))}
157
+ </span>
158
+ );
159
+ }
160
+ }
161
+
162
+ return (
163
+ <span {...styling('diffWrap')}>
164
+ {renderSpan('unchanged', stringifyAndShrink(value))}
165
+ </span>
166
+ );
167
+ };
168
+
169
+ function prepareDelta(value) {
170
+ if (value && value._t === 'a') {
171
+ const res = {};
172
+ for (const key in value) {
173
+ if (key !== '_t') {
174
+ if (key[0] === '_' && !value[key.substr(1)]) {
175
+ res[key.substr(1)] = value[key];
176
+ } else if (value['_' + key]) {
177
+ res[key] = [value['_' + key][0], value[key][0]];
178
+ } else if (!value['_' + key] && key[0] !== '_') {
179
+ res[key] = value[key];
180
+ }
181
+ }
182
+ }
183
+ return res;
184
+ }
185
+ return value;
186
+ }
187
+
188
+ const theme = {
189
+ scheme: 'monokai',
190
+ base00: '#272822',
191
+ base01: '#383830',
192
+ base02: '#49483e',
193
+ base03: '#75715e',
194
+ base04: '#a59f85',
195
+ base05: '#f8f8f2',
196
+ base06: '#f5f4f1',
197
+ base07: '#f9f8f5',
198
+ base08: '#f92672',
199
+ base09: '#fd971f',
200
+ base0A: '#f4bf75',
201
+ base0B: '#a6e22e',
202
+ base0C: '#a1efe4',
203
+ base0D: '#66d9ef',
204
+ base0E: '#ae81ff',
205
+ base0F: '#cc6633',
206
+ };
207
+
208
+ class App extends React.Component {
209
+ constructor(props) {
210
+ super(props);
211
+ this.state = { showUnchanged: false };
212
+ }
213
+
214
+ toggle = (e) => {
215
+ this.setState(state => {
216
+ return { showUnchanged: !state.showUnchanged }
217
+ })
218
+ }
219
+
220
+ render() {
221
+ return (
222
+ <div>
223
+ <input type="checkbox" onChange={this.toggle} id="show_unchanged" />
224
+ <label for="show_unchanged" style={{fontSize: '12px', color: 'white'}}>Show Unchanged</label>
225
+ <ReactJsonTree.JSONTree
226
+ theme={theme}
227
+ invertTheme={false}
228
+ data={this.state.showUnchanged ? _.merge(_.cloneDeep(left), delta): delta}
229
+ valueRenderer={valueRenderer}
230
+ postprocessValue={prepareDelta}
231
+ isCustomNode={Array.isArray}
232
+ shouldExpandNodeInitially={expandFirstLevel}
233
+ hideRoot
234
+ />
235
+ </div>
236
+ );
237
+ }
238
+ }
239
+
240
+ ReactDOM.createRoot(document.querySelector('#app')).render(<App />);
241
+ </script>
242
+ </body>
243
+ </html>