@jsenv/server 15.5.3 → 16.0.0
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.
- package/README.md +79 -86
- package/dist/html/4xx.html +196 -0
- package/dist/html/500.html +17 -0
- package/dist/html/route_inspector.html +2435 -0
- package/dist/js/formidable.js +17 -0
- package/dist/js/vendors.js +2001 -0
- package/dist/js/ws.js +6863 -0
- package/dist/jsenv_server.js +8829 -0
- package/package.json +20 -9
- package/src/content_negotiation/pick_content_version.js +63 -0
- package/src/{fetch_filesystem.js → filesystem/fetch_filesystem.js} +57 -72
- package/src/{serve_directory.js → filesystem/serve_directory.js} +1 -2
- package/src/interfacing_with_node/from_node_request.js +455 -0
- package/src/interfacing_with_node/get_observable_value_type.js +43 -0
- package/src/interfacing_with_node/observable.js +91 -75
- package/src/interfacing_with_node/observable_from.js +34 -0
- package/src/interfacing_with_node/observable_from_file_handle.js +30 -0
- package/src/interfacing_with_node/observable_from_node_stream.js +44 -46
- package/src/interfacing_with_node/observable_from_node_web_readable_stream.js +32 -0
- package/src/interfacing_with_node/observable_from_promise.js +13 -0
- package/src/interfacing_with_node/write_node_response.js +80 -35
- package/src/internal/colorizeResponseStatus.js +2 -0
- package/src/internal/headers_composition.js +42 -15
- package/src/internal/multiple-header.js +27 -12
- package/src/internal/object_composition.js +2 -2
- package/src/internal/response_composition.js +16 -3
- package/src/main.js +15 -11
- package/src/progressive_response.js +38 -0
- package/src/replace_placeholder_in_html.js +12 -0
- package/src/request_body_handling.js +22 -0
- package/src/router/router.js +878 -0
- package/src/server_events.js +431 -0
- package/src/service_controller.js +79 -73
- package/src/services/autoreload_on_server_restart/client/autoreload_on_server_restart.js +125 -0
- package/src/services/autoreload_on_server_restart/jsenv_service_autoreload_on_server_restart.js +45 -0
- package/src/services/cors/jsenv_service_cors.js +10 -18
- package/src/services/default_body_4xx_5xx/client/4xx.html +65 -0
- package/src/services/default_body_4xx_5xx/jsenv_service_default_body_4xx_5xx.js +82 -0
- package/src/services/error_handler/client/500.html +17 -0
- package/src/services/error_handler/jsenv_service_error_handler.js +47 -28
- package/src/services/internal_client_files/jsenv_service_internal_client_files.js +34 -0
- package/src/services/open_file/jsenv_service_open_file.js +37 -0
- package/src/services/route_inspector/client/code_block.js +215 -0
- package/src/services/route_inspector/client/route_inspector.html +1363 -0
- package/src/services/route_inspector/jsenv_service_route_inspector.js +39 -0
- package/src/start_server.js +575 -607
- package/src/web_socket_response.js +53 -0
- package/src/from_fetch_response.js +0 -15
- package/src/interfacing_with_node/body.js +0 -81
- package/src/interfacing_with_node/request_factory.js +0 -125
- package/src/readRequestBody.js +0 -32
- package/src/server_timing/timing_measure.js +0 -26
- package/src/service_composition/path_to_regexp.js +0 -436
- package/src/service_composition/routing.js +0 -31
- package/src/sse/sse_room.js +0 -313
|
@@ -0,0 +1,2435 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Route inspector</title>
|
|
7
|
+
<script>
|
|
8
|
+
/**
|
|
9
|
+
* Copyright (c) 2014-present, Facebook, Inc.
|
|
10
|
+
*
|
|
11
|
+
* This source code is licensed under the MIT license found in the
|
|
12
|
+
* LICENSE file in the root directory of this source tree.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
var runtime = (function (exports) {
|
|
16
|
+
|
|
17
|
+
var Op = Object.prototype;
|
|
18
|
+
var hasOwn = Op.hasOwnProperty;
|
|
19
|
+
var undefined$1; // More compressible than void 0.
|
|
20
|
+
var $Symbol = typeof Symbol === "function" ? Symbol : {};
|
|
21
|
+
var iteratorSymbol = $Symbol.iterator || "@@iterator";
|
|
22
|
+
var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
|
|
23
|
+
var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
|
|
24
|
+
|
|
25
|
+
function define(obj, key, value) {
|
|
26
|
+
Object.defineProperty(obj, key, {
|
|
27
|
+
value: value,
|
|
28
|
+
enumerable: true,
|
|
29
|
+
configurable: true,
|
|
30
|
+
writable: true
|
|
31
|
+
});
|
|
32
|
+
return obj[key];
|
|
33
|
+
}
|
|
34
|
+
try {
|
|
35
|
+
// IE 8 has a broken Object.defineProperty that only works on DOM objects.
|
|
36
|
+
define({}, "");
|
|
37
|
+
} catch (err) {
|
|
38
|
+
define = function(obj, key, value) {
|
|
39
|
+
return obj[key] = value;
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
function wrap(innerFn, outerFn, self, tryLocsList) {
|
|
44
|
+
// If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
|
|
45
|
+
var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
|
|
46
|
+
var generator = Object.create(protoGenerator.prototype);
|
|
47
|
+
var context = new Context(tryLocsList || []);
|
|
48
|
+
|
|
49
|
+
// The ._invoke method unifies the implementations of the .next,
|
|
50
|
+
// .throw, and .return methods.
|
|
51
|
+
generator._invoke = makeInvokeMethod(innerFn, self, context);
|
|
52
|
+
|
|
53
|
+
return generator;
|
|
54
|
+
}
|
|
55
|
+
exports.wrap = wrap;
|
|
56
|
+
|
|
57
|
+
// Try/catch helper to minimize deoptimizations. Returns a completion
|
|
58
|
+
// record like context.tryEntries[i].completion. This interface could
|
|
59
|
+
// have been (and was previously) designed to take a closure to be
|
|
60
|
+
// invoked without arguments, but in all the cases we care about we
|
|
61
|
+
// already have an existing method we want to call, so there's no need
|
|
62
|
+
// to create a new function object. We can even get away with assuming
|
|
63
|
+
// the method takes exactly one argument, since that happens to be true
|
|
64
|
+
// in every case, so we don't have to touch the arguments object. The
|
|
65
|
+
// only additional allocation required is the completion record, which
|
|
66
|
+
// has a stable shape and so hopefully should be cheap to allocate.
|
|
67
|
+
function tryCatch(fn, obj, arg) {
|
|
68
|
+
try {
|
|
69
|
+
return { type: "normal", arg: fn.call(obj, arg) };
|
|
70
|
+
} catch (err) {
|
|
71
|
+
return { type: "throw", arg: err };
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
var GenStateSuspendedStart = "suspendedStart";
|
|
76
|
+
var GenStateSuspendedYield = "suspendedYield";
|
|
77
|
+
var GenStateExecuting = "executing";
|
|
78
|
+
var GenStateCompleted = "completed";
|
|
79
|
+
|
|
80
|
+
// Returning this object from the innerFn has the same effect as
|
|
81
|
+
// breaking out of the dispatch switch statement.
|
|
82
|
+
var ContinueSentinel = {};
|
|
83
|
+
|
|
84
|
+
// Dummy constructor functions that we use as the .constructor and
|
|
85
|
+
// .constructor.prototype properties for functions that return Generator
|
|
86
|
+
// objects. For full spec compliance, you may wish to configure your
|
|
87
|
+
// minifier not to mangle the names of these two functions.
|
|
88
|
+
function Generator() {}
|
|
89
|
+
function GeneratorFunction() {}
|
|
90
|
+
function GeneratorFunctionPrototype() {}
|
|
91
|
+
|
|
92
|
+
// This is a polyfill for %IteratorPrototype% for environments that
|
|
93
|
+
// don't natively support it.
|
|
94
|
+
var IteratorPrototype = {};
|
|
95
|
+
IteratorPrototype[iteratorSymbol] = function () {
|
|
96
|
+
return this;
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
var getProto = Object.getPrototypeOf;
|
|
100
|
+
var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
|
|
101
|
+
if (NativeIteratorPrototype &&
|
|
102
|
+
NativeIteratorPrototype !== Op &&
|
|
103
|
+
hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
|
|
104
|
+
// This environment has a native %IteratorPrototype%; use it instead
|
|
105
|
+
// of the polyfill.
|
|
106
|
+
IteratorPrototype = NativeIteratorPrototype;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
var Gp = GeneratorFunctionPrototype.prototype =
|
|
110
|
+
Generator.prototype = Object.create(IteratorPrototype);
|
|
111
|
+
GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;
|
|
112
|
+
GeneratorFunctionPrototype.constructor = GeneratorFunction;
|
|
113
|
+
GeneratorFunction.displayName = define(
|
|
114
|
+
GeneratorFunctionPrototype,
|
|
115
|
+
toStringTagSymbol,
|
|
116
|
+
"GeneratorFunction"
|
|
117
|
+
);
|
|
118
|
+
|
|
119
|
+
// Helper for defining the .next, .throw, and .return methods of the
|
|
120
|
+
// Iterator interface in terms of a single ._invoke method.
|
|
121
|
+
function defineIteratorMethods(prototype) {
|
|
122
|
+
["next", "throw", "return"].forEach(function(method) {
|
|
123
|
+
define(prototype, method, function(arg) {
|
|
124
|
+
return this._invoke(method, arg);
|
|
125
|
+
});
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
exports.isGeneratorFunction = function(genFun) {
|
|
130
|
+
var ctor = typeof genFun === "function" && genFun.constructor;
|
|
131
|
+
return ctor
|
|
132
|
+
? ctor === GeneratorFunction ||
|
|
133
|
+
// For the native GeneratorFunction constructor, the best we can
|
|
134
|
+
// do is to check its .name property.
|
|
135
|
+
(ctor.displayName || ctor.name) === "GeneratorFunction"
|
|
136
|
+
: false;
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
exports.mark = function(genFun) {
|
|
140
|
+
if (Object.setPrototypeOf) {
|
|
141
|
+
Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
|
|
142
|
+
} else {
|
|
143
|
+
genFun.__proto__ = GeneratorFunctionPrototype;
|
|
144
|
+
define(genFun, toStringTagSymbol, "GeneratorFunction");
|
|
145
|
+
}
|
|
146
|
+
genFun.prototype = Object.create(Gp);
|
|
147
|
+
return genFun;
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
// Within the body of any async function, `await x` is transformed to
|
|
151
|
+
// `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
|
|
152
|
+
// `hasOwn.call(value, "__await")` to determine if the yielded value is
|
|
153
|
+
// meant to be awaited.
|
|
154
|
+
exports.awrap = function(arg) {
|
|
155
|
+
return { __await: arg };
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
function AsyncIterator(generator, PromiseImpl) {
|
|
159
|
+
function invoke(method, arg, resolve, reject) {
|
|
160
|
+
var record = tryCatch(generator[method], generator, arg);
|
|
161
|
+
if (record.type === "throw") {
|
|
162
|
+
reject(record.arg);
|
|
163
|
+
} else {
|
|
164
|
+
var result = record.arg;
|
|
165
|
+
var value = result.value;
|
|
166
|
+
if (value &&
|
|
167
|
+
typeof value === "object" &&
|
|
168
|
+
hasOwn.call(value, "__await")) {
|
|
169
|
+
return PromiseImpl.resolve(value.__await).then(function(value) {
|
|
170
|
+
invoke("next", value, resolve, reject);
|
|
171
|
+
}, function(err) {
|
|
172
|
+
invoke("throw", err, resolve, reject);
|
|
173
|
+
});
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
return PromiseImpl.resolve(value).then(function(unwrapped) {
|
|
177
|
+
// When a yielded Promise is resolved, its final value becomes
|
|
178
|
+
// the .value of the Promise<{value,done}> result for the
|
|
179
|
+
// current iteration.
|
|
180
|
+
result.value = unwrapped;
|
|
181
|
+
resolve(result);
|
|
182
|
+
}, function(error) {
|
|
183
|
+
// If a rejected Promise was yielded, throw the rejection back
|
|
184
|
+
// into the async generator function so it can be handled there.
|
|
185
|
+
return invoke("throw", error, resolve, reject);
|
|
186
|
+
});
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
var previousPromise;
|
|
191
|
+
|
|
192
|
+
function enqueue(method, arg) {
|
|
193
|
+
function callInvokeWithMethodAndArg() {
|
|
194
|
+
return new PromiseImpl(function(resolve, reject) {
|
|
195
|
+
invoke(method, arg, resolve, reject);
|
|
196
|
+
});
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
return previousPromise =
|
|
200
|
+
// If enqueue has been called before, then we want to wait until
|
|
201
|
+
// all previous Promises have been resolved before calling invoke,
|
|
202
|
+
// so that results are always delivered in the correct order. If
|
|
203
|
+
// enqueue has not been called before, then it is important to
|
|
204
|
+
// call invoke immediately, without waiting on a callback to fire,
|
|
205
|
+
// so that the async generator function has the opportunity to do
|
|
206
|
+
// any necessary setup in a predictable way. This predictability
|
|
207
|
+
// is why the Promise constructor synchronously invokes its
|
|
208
|
+
// executor callback, and why async functions synchronously
|
|
209
|
+
// execute code before the first await. Since we implement simple
|
|
210
|
+
// async functions in terms of async generators, it is especially
|
|
211
|
+
// important to get this right, even though it requires care.
|
|
212
|
+
previousPromise ? previousPromise.then(
|
|
213
|
+
callInvokeWithMethodAndArg,
|
|
214
|
+
// Avoid propagating failures to Promises returned by later
|
|
215
|
+
// invocations of the iterator.
|
|
216
|
+
callInvokeWithMethodAndArg
|
|
217
|
+
) : callInvokeWithMethodAndArg();
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
// Define the unified helper method that is used to implement .next,
|
|
221
|
+
// .throw, and .return (see defineIteratorMethods).
|
|
222
|
+
this._invoke = enqueue;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
defineIteratorMethods(AsyncIterator.prototype);
|
|
226
|
+
AsyncIterator.prototype[asyncIteratorSymbol] = function () {
|
|
227
|
+
return this;
|
|
228
|
+
};
|
|
229
|
+
exports.AsyncIterator = AsyncIterator;
|
|
230
|
+
|
|
231
|
+
// Note that simple async functions are implemented on top of
|
|
232
|
+
// AsyncIterator objects; they just return a Promise for the value of
|
|
233
|
+
// the final result produced by the iterator.
|
|
234
|
+
exports.async = function(innerFn, outerFn, self, tryLocsList, PromiseImpl) {
|
|
235
|
+
if (PromiseImpl === undefined) PromiseImpl = Promise;
|
|
236
|
+
|
|
237
|
+
var iter = new AsyncIterator(
|
|
238
|
+
wrap(innerFn, outerFn, self, tryLocsList),
|
|
239
|
+
PromiseImpl
|
|
240
|
+
);
|
|
241
|
+
|
|
242
|
+
return exports.isGeneratorFunction(outerFn)
|
|
243
|
+
? iter // If outerFn is a generator, return the full iterator.
|
|
244
|
+
: iter.next().then(function(result) {
|
|
245
|
+
return result.done ? result.value : iter.next();
|
|
246
|
+
});
|
|
247
|
+
};
|
|
248
|
+
|
|
249
|
+
function makeInvokeMethod(innerFn, self, context) {
|
|
250
|
+
var state = GenStateSuspendedStart;
|
|
251
|
+
|
|
252
|
+
return function invoke(method, arg) {
|
|
253
|
+
if (state === GenStateExecuting) {
|
|
254
|
+
throw new Error("Generator is already running");
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
if (state === GenStateCompleted) {
|
|
258
|
+
if (method === "throw") {
|
|
259
|
+
throw arg;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
// Be forgiving, per 25.3.3.3.3 of the spec:
|
|
263
|
+
// https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
|
|
264
|
+
return doneResult();
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
context.method = method;
|
|
268
|
+
context.arg = arg;
|
|
269
|
+
|
|
270
|
+
while (true) {
|
|
271
|
+
var delegate = context.delegate;
|
|
272
|
+
if (delegate) {
|
|
273
|
+
var delegateResult = maybeInvokeDelegate(delegate, context);
|
|
274
|
+
if (delegateResult) {
|
|
275
|
+
if (delegateResult === ContinueSentinel) continue;
|
|
276
|
+
return delegateResult;
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
if (context.method === "next") {
|
|
281
|
+
// Setting context._sent for legacy support of Babel's
|
|
282
|
+
// function.sent implementation.
|
|
283
|
+
context.sent = context._sent = context.arg;
|
|
284
|
+
|
|
285
|
+
} else if (context.method === "throw") {
|
|
286
|
+
if (state === GenStateSuspendedStart) {
|
|
287
|
+
state = GenStateCompleted;
|
|
288
|
+
throw context.arg;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
context.dispatchException(context.arg);
|
|
292
|
+
|
|
293
|
+
} else if (context.method === "return") {
|
|
294
|
+
context.abrupt("return", context.arg);
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
state = GenStateExecuting;
|
|
298
|
+
|
|
299
|
+
var record = tryCatch(innerFn, self, context);
|
|
300
|
+
if (record.type === "normal") {
|
|
301
|
+
// If an exception is thrown from innerFn, we leave state ===
|
|
302
|
+
// GenStateExecuting and loop back for another invocation.
|
|
303
|
+
state = context.done
|
|
304
|
+
? GenStateCompleted
|
|
305
|
+
: GenStateSuspendedYield;
|
|
306
|
+
|
|
307
|
+
if (record.arg === ContinueSentinel) {
|
|
308
|
+
continue;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
return {
|
|
312
|
+
value: record.arg,
|
|
313
|
+
done: context.done
|
|
314
|
+
};
|
|
315
|
+
|
|
316
|
+
} else if (record.type === "throw") {
|
|
317
|
+
state = GenStateCompleted;
|
|
318
|
+
// Dispatch the exception by looping back around to the
|
|
319
|
+
// context.dispatchException(context.arg) call above.
|
|
320
|
+
context.method = "throw";
|
|
321
|
+
context.arg = record.arg;
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
};
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
// Call delegate.iterator[context.method](context.arg) and handle the
|
|
328
|
+
// result, either by returning a { value, done } result from the
|
|
329
|
+
// delegate iterator, or by modifying context.method and context.arg,
|
|
330
|
+
// setting context.delegate to null, and returning the ContinueSentinel.
|
|
331
|
+
function maybeInvokeDelegate(delegate, context) {
|
|
332
|
+
var method = delegate.iterator[context.method];
|
|
333
|
+
if (method === undefined$1) {
|
|
334
|
+
// A .throw or .return when the delegate iterator has no .throw
|
|
335
|
+
// method always terminates the yield* loop.
|
|
336
|
+
context.delegate = null;
|
|
337
|
+
|
|
338
|
+
if (context.method === "throw") {
|
|
339
|
+
// Note: ["return"] must be used for ES3 parsing compatibility.
|
|
340
|
+
if (delegate.iterator["return"]) {
|
|
341
|
+
// If the delegate iterator has a return method, give it a
|
|
342
|
+
// chance to clean up.
|
|
343
|
+
context.method = "return";
|
|
344
|
+
context.arg = undefined$1;
|
|
345
|
+
maybeInvokeDelegate(delegate, context);
|
|
346
|
+
|
|
347
|
+
if (context.method === "throw") {
|
|
348
|
+
// If maybeInvokeDelegate(context) changed context.method from
|
|
349
|
+
// "return" to "throw", let that override the TypeError below.
|
|
350
|
+
return ContinueSentinel;
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
context.method = "throw";
|
|
355
|
+
context.arg = new TypeError(
|
|
356
|
+
"The iterator does not provide a 'throw' method");
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
return ContinueSentinel;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
var record = tryCatch(method, delegate.iterator, context.arg);
|
|
363
|
+
|
|
364
|
+
if (record.type === "throw") {
|
|
365
|
+
context.method = "throw";
|
|
366
|
+
context.arg = record.arg;
|
|
367
|
+
context.delegate = null;
|
|
368
|
+
return ContinueSentinel;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
var info = record.arg;
|
|
372
|
+
|
|
373
|
+
if (! info) {
|
|
374
|
+
context.method = "throw";
|
|
375
|
+
context.arg = new TypeError("iterator result is not an object");
|
|
376
|
+
context.delegate = null;
|
|
377
|
+
return ContinueSentinel;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
if (info.done) {
|
|
381
|
+
// Assign the result of the finished delegate to the temporary
|
|
382
|
+
// variable specified by delegate.resultName (see delegateYield).
|
|
383
|
+
context[delegate.resultName] = info.value;
|
|
384
|
+
|
|
385
|
+
// Resume execution at the desired location (see delegateYield).
|
|
386
|
+
context.next = delegate.nextLoc;
|
|
387
|
+
|
|
388
|
+
// If context.method was "throw" but the delegate handled the
|
|
389
|
+
// exception, let the outer generator proceed normally. If
|
|
390
|
+
// context.method was "next", forget context.arg since it has been
|
|
391
|
+
// "consumed" by the delegate iterator. If context.method was
|
|
392
|
+
// "return", allow the original .return call to continue in the
|
|
393
|
+
// outer generator.
|
|
394
|
+
if (context.method !== "return") {
|
|
395
|
+
context.method = "next";
|
|
396
|
+
context.arg = undefined$1;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
} else {
|
|
400
|
+
// Re-yield the result returned by the delegate method.
|
|
401
|
+
return info;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
// The delegate iterator is finished, so forget it and continue with
|
|
405
|
+
// the outer generator.
|
|
406
|
+
context.delegate = null;
|
|
407
|
+
return ContinueSentinel;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
// Define Generator.prototype.{next,throw,return} in terms of the
|
|
411
|
+
// unified ._invoke helper method.
|
|
412
|
+
defineIteratorMethods(Gp);
|
|
413
|
+
|
|
414
|
+
define(Gp, toStringTagSymbol, "Generator");
|
|
415
|
+
|
|
416
|
+
// A Generator should always return itself as the iterator object when the
|
|
417
|
+
// @@iterator function is called on it. Some browsers' implementations of the
|
|
418
|
+
// iterator prototype chain incorrectly implement this, causing the Generator
|
|
419
|
+
// object to not be returned from this call. This ensures that doesn't happen.
|
|
420
|
+
// See https://github.com/facebook/regenerator/issues/274 for more details.
|
|
421
|
+
Gp[iteratorSymbol] = function() {
|
|
422
|
+
return this;
|
|
423
|
+
};
|
|
424
|
+
|
|
425
|
+
Gp.toString = function() {
|
|
426
|
+
return "[object Generator]";
|
|
427
|
+
};
|
|
428
|
+
|
|
429
|
+
function pushTryEntry(locs) {
|
|
430
|
+
var entry = { tryLoc: locs[0] };
|
|
431
|
+
|
|
432
|
+
if (1 in locs) {
|
|
433
|
+
entry.catchLoc = locs[1];
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
if (2 in locs) {
|
|
437
|
+
entry.finallyLoc = locs[2];
|
|
438
|
+
entry.afterLoc = locs[3];
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
this.tryEntries.push(entry);
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
function resetTryEntry(entry) {
|
|
445
|
+
var record = entry.completion || {};
|
|
446
|
+
record.type = "normal";
|
|
447
|
+
delete record.arg;
|
|
448
|
+
entry.completion = record;
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
function Context(tryLocsList) {
|
|
452
|
+
// The root entry object (effectively a try statement without a catch
|
|
453
|
+
// or a finally block) gives us a place to store values thrown from
|
|
454
|
+
// locations where there is no enclosing try statement.
|
|
455
|
+
this.tryEntries = [{ tryLoc: "root" }];
|
|
456
|
+
tryLocsList.forEach(pushTryEntry, this);
|
|
457
|
+
this.reset(true);
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
exports.keys = function(object) {
|
|
461
|
+
var keys = [];
|
|
462
|
+
for (var key in object) {
|
|
463
|
+
keys.push(key);
|
|
464
|
+
}
|
|
465
|
+
keys.reverse();
|
|
466
|
+
|
|
467
|
+
// Rather than returning an object with a next method, we keep
|
|
468
|
+
// things simple and return the next function itself.
|
|
469
|
+
return function next() {
|
|
470
|
+
while (keys.length) {
|
|
471
|
+
var key = keys.pop();
|
|
472
|
+
if (key in object) {
|
|
473
|
+
next.value = key;
|
|
474
|
+
next.done = false;
|
|
475
|
+
return next;
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
// To avoid creating an additional object, we just hang the .value
|
|
480
|
+
// and .done properties off the next function object itself. This
|
|
481
|
+
// also ensures that the minifier will not anonymize the function.
|
|
482
|
+
next.done = true;
|
|
483
|
+
return next;
|
|
484
|
+
};
|
|
485
|
+
};
|
|
486
|
+
|
|
487
|
+
function values(iterable) {
|
|
488
|
+
if (iterable) {
|
|
489
|
+
var iteratorMethod = iterable[iteratorSymbol];
|
|
490
|
+
if (iteratorMethod) {
|
|
491
|
+
return iteratorMethod.call(iterable);
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
if (typeof iterable.next === "function") {
|
|
495
|
+
return iterable;
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
if (!isNaN(iterable.length)) {
|
|
499
|
+
var i = -1, next = function next() {
|
|
500
|
+
while (++i < iterable.length) {
|
|
501
|
+
if (hasOwn.call(iterable, i)) {
|
|
502
|
+
next.value = iterable[i];
|
|
503
|
+
next.done = false;
|
|
504
|
+
return next;
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
next.value = undefined$1;
|
|
509
|
+
next.done = true;
|
|
510
|
+
|
|
511
|
+
return next;
|
|
512
|
+
};
|
|
513
|
+
|
|
514
|
+
return next.next = next;
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
// Return an iterator with no values.
|
|
519
|
+
return { next: doneResult };
|
|
520
|
+
}
|
|
521
|
+
exports.values = values;
|
|
522
|
+
|
|
523
|
+
function doneResult() {
|
|
524
|
+
return { value: undefined$1, done: true };
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
Context.prototype = {
|
|
528
|
+
constructor: Context,
|
|
529
|
+
|
|
530
|
+
reset: function(skipTempReset) {
|
|
531
|
+
this.prev = 0;
|
|
532
|
+
this.next = 0;
|
|
533
|
+
// Resetting context._sent for legacy support of Babel's
|
|
534
|
+
// function.sent implementation.
|
|
535
|
+
this.sent = this._sent = undefined$1;
|
|
536
|
+
this.done = false;
|
|
537
|
+
this.delegate = null;
|
|
538
|
+
|
|
539
|
+
this.method = "next";
|
|
540
|
+
this.arg = undefined$1;
|
|
541
|
+
|
|
542
|
+
this.tryEntries.forEach(resetTryEntry);
|
|
543
|
+
|
|
544
|
+
if (!skipTempReset) {
|
|
545
|
+
for (var name in this) {
|
|
546
|
+
// Not sure about the optimal order of these conditions:
|
|
547
|
+
if (name.charAt(0) === "t" &&
|
|
548
|
+
hasOwn.call(this, name) &&
|
|
549
|
+
!isNaN(+name.slice(1))) {
|
|
550
|
+
this[name] = undefined$1;
|
|
551
|
+
}
|
|
552
|
+
}
|
|
553
|
+
}
|
|
554
|
+
},
|
|
555
|
+
|
|
556
|
+
stop: function() {
|
|
557
|
+
this.done = true;
|
|
558
|
+
|
|
559
|
+
var rootEntry = this.tryEntries[0];
|
|
560
|
+
var rootRecord = rootEntry.completion;
|
|
561
|
+
if (rootRecord.type === "throw") {
|
|
562
|
+
throw rootRecord.arg;
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
return this.rval;
|
|
566
|
+
},
|
|
567
|
+
|
|
568
|
+
dispatchException: function(exception) {
|
|
569
|
+
if (this.done) {
|
|
570
|
+
throw exception;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
var context = this;
|
|
574
|
+
function handle(loc, caught) {
|
|
575
|
+
record.type = "throw";
|
|
576
|
+
record.arg = exception;
|
|
577
|
+
context.next = loc;
|
|
578
|
+
|
|
579
|
+
if (caught) {
|
|
580
|
+
// If the dispatched exception was caught by a catch block,
|
|
581
|
+
// then let that catch block handle the exception normally.
|
|
582
|
+
context.method = "next";
|
|
583
|
+
context.arg = undefined$1;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
return !! caught;
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
|
|
590
|
+
var entry = this.tryEntries[i];
|
|
591
|
+
var record = entry.completion;
|
|
592
|
+
|
|
593
|
+
if (entry.tryLoc === "root") {
|
|
594
|
+
// Exception thrown outside of any try block that could handle
|
|
595
|
+
// it, so set the completion value of the entire function to
|
|
596
|
+
// throw the exception.
|
|
597
|
+
return handle("end");
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
if (entry.tryLoc <= this.prev) {
|
|
601
|
+
var hasCatch = hasOwn.call(entry, "catchLoc");
|
|
602
|
+
var hasFinally = hasOwn.call(entry, "finallyLoc");
|
|
603
|
+
|
|
604
|
+
if (hasCatch && hasFinally) {
|
|
605
|
+
if (this.prev < entry.catchLoc) {
|
|
606
|
+
return handle(entry.catchLoc, true);
|
|
607
|
+
} else if (this.prev < entry.finallyLoc) {
|
|
608
|
+
return handle(entry.finallyLoc);
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
} else if (hasCatch) {
|
|
612
|
+
if (this.prev < entry.catchLoc) {
|
|
613
|
+
return handle(entry.catchLoc, true);
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
} else if (hasFinally) {
|
|
617
|
+
if (this.prev < entry.finallyLoc) {
|
|
618
|
+
return handle(entry.finallyLoc);
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
} else {
|
|
622
|
+
throw new Error("try statement without catch or finally");
|
|
623
|
+
}
|
|
624
|
+
}
|
|
625
|
+
}
|
|
626
|
+
},
|
|
627
|
+
|
|
628
|
+
abrupt: function(type, arg) {
|
|
629
|
+
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
|
|
630
|
+
var entry = this.tryEntries[i];
|
|
631
|
+
if (entry.tryLoc <= this.prev &&
|
|
632
|
+
hasOwn.call(entry, "finallyLoc") &&
|
|
633
|
+
this.prev < entry.finallyLoc) {
|
|
634
|
+
var finallyEntry = entry;
|
|
635
|
+
break;
|
|
636
|
+
}
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
if (finallyEntry &&
|
|
640
|
+
(type === "break" ||
|
|
641
|
+
type === "continue") &&
|
|
642
|
+
finallyEntry.tryLoc <= arg &&
|
|
643
|
+
arg <= finallyEntry.finallyLoc) {
|
|
644
|
+
// Ignore the finally entry if control is not jumping to a
|
|
645
|
+
// location outside the try/catch block.
|
|
646
|
+
finallyEntry = null;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
var record = finallyEntry ? finallyEntry.completion : {};
|
|
650
|
+
record.type = type;
|
|
651
|
+
record.arg = arg;
|
|
652
|
+
|
|
653
|
+
if (finallyEntry) {
|
|
654
|
+
this.method = "next";
|
|
655
|
+
this.next = finallyEntry.finallyLoc;
|
|
656
|
+
return ContinueSentinel;
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
return this.complete(record);
|
|
660
|
+
},
|
|
661
|
+
|
|
662
|
+
complete: function(record, afterLoc) {
|
|
663
|
+
if (record.type === "throw") {
|
|
664
|
+
throw record.arg;
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
if (record.type === "break" ||
|
|
668
|
+
record.type === "continue") {
|
|
669
|
+
this.next = record.arg;
|
|
670
|
+
} else if (record.type === "return") {
|
|
671
|
+
this.rval = this.arg = record.arg;
|
|
672
|
+
this.method = "return";
|
|
673
|
+
this.next = "end";
|
|
674
|
+
} else if (record.type === "normal" && afterLoc) {
|
|
675
|
+
this.next = afterLoc;
|
|
676
|
+
}
|
|
677
|
+
|
|
678
|
+
return ContinueSentinel;
|
|
679
|
+
},
|
|
680
|
+
|
|
681
|
+
finish: function(finallyLoc) {
|
|
682
|
+
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
|
|
683
|
+
var entry = this.tryEntries[i];
|
|
684
|
+
if (entry.finallyLoc === finallyLoc) {
|
|
685
|
+
this.complete(entry.completion, entry.afterLoc);
|
|
686
|
+
resetTryEntry(entry);
|
|
687
|
+
return ContinueSentinel;
|
|
688
|
+
}
|
|
689
|
+
}
|
|
690
|
+
},
|
|
691
|
+
|
|
692
|
+
"catch": function(tryLoc) {
|
|
693
|
+
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
|
|
694
|
+
var entry = this.tryEntries[i];
|
|
695
|
+
if (entry.tryLoc === tryLoc) {
|
|
696
|
+
var record = entry.completion;
|
|
697
|
+
if (record.type === "throw") {
|
|
698
|
+
var thrown = record.arg;
|
|
699
|
+
resetTryEntry(entry);
|
|
700
|
+
}
|
|
701
|
+
return thrown;
|
|
702
|
+
}
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
// The context.catch method must only be called with a location
|
|
706
|
+
// argument that corresponds to a known catch block.
|
|
707
|
+
throw new Error("illegal catch attempt");
|
|
708
|
+
},
|
|
709
|
+
|
|
710
|
+
delegateYield: function(iterable, resultName, nextLoc) {
|
|
711
|
+
this.delegate = {
|
|
712
|
+
iterator: values(iterable),
|
|
713
|
+
resultName: resultName,
|
|
714
|
+
nextLoc: nextLoc
|
|
715
|
+
};
|
|
716
|
+
|
|
717
|
+
if (this.method === "next") {
|
|
718
|
+
// Deliberately forget the last sent value so that we don't
|
|
719
|
+
// accidentally pass it on to the delegate.
|
|
720
|
+
this.arg = undefined$1;
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
return ContinueSentinel;
|
|
724
|
+
}
|
|
725
|
+
};
|
|
726
|
+
|
|
727
|
+
// Regardless of whether this script is executing as a CommonJS module
|
|
728
|
+
// or not, return the runtime object so that we can declare the variable
|
|
729
|
+
// regeneratorRuntime in the outer scope, which allows this module to be
|
|
730
|
+
// injected easily by `bin/regenerator --include-runtime script.js`.
|
|
731
|
+
return exports;
|
|
732
|
+
|
|
733
|
+
}(
|
|
734
|
+
// If this script is executing as a CommonJS module, use module.exports
|
|
735
|
+
// as the regeneratorRuntime namespace. Otherwise create a new empty
|
|
736
|
+
// object. Either way, the resulting object will be used to initialize
|
|
737
|
+
// the regeneratorRuntime variable at the top of this file.
|
|
738
|
+
typeof module === "object" ? module.exports : {}
|
|
739
|
+
));
|
|
740
|
+
|
|
741
|
+
try {
|
|
742
|
+
regeneratorRuntime = runtime;
|
|
743
|
+
} catch (accidentalStrictMode) {
|
|
744
|
+
// This module should not be running in strict mode, so the above
|
|
745
|
+
// assignment should always work unless something is misconfigured. Just
|
|
746
|
+
// in case runtime.js accidentally runs in strict mode, we can escape
|
|
747
|
+
// strict mode using a global Function call. This could conceivably fail
|
|
748
|
+
// if a Content Security Policy forbids using Function, but in that case
|
|
749
|
+
// the proper solution is to fix the accidental strict mode problem. If
|
|
750
|
+
// you've misconfigured your bundler to force strict mode and applied a
|
|
751
|
+
// CSP to forbid Function, and you're not willing to fix either of those
|
|
752
|
+
// problems, please detail your unique predicament in a GitHub issue.
|
|
753
|
+
Function("r", "regeneratorRuntime = r")(runtime);
|
|
754
|
+
}
|
|
755
|
+
</script>
|
|
756
|
+
<script type="importmap">{
|
|
757
|
+
"imports": {
|
|
758
|
+
"preact": "https://esm.sh/preact@10.23.1",
|
|
759
|
+
"@preact/signals": "https://esm.sh/@preact/signals@1.3.0?external=preact",
|
|
760
|
+
"htm/preact": "https://esm.sh/htm@3.1.1/preact?external=preact"
|
|
761
|
+
}
|
|
762
|
+
}</script>
|
|
763
|
+
<script>
|
|
764
|
+
/**
|
|
765
|
+
* Example of how you'd use this:
|
|
766
|
+
* <code-block data-language="HTML" data-escaped="true">
|
|
767
|
+
* <h1>Your HTML here. Any HTML should be escaped</h1>
|
|
768
|
+
* </code-block>
|
|
769
|
+
*
|
|
770
|
+
* https://github.com/TheWebTech/hs-code-block-web-component/tree/main
|
|
771
|
+
*/
|
|
772
|
+
|
|
773
|
+
(() => {
|
|
774
|
+
const css = /*css*/ `
|
|
775
|
+
*[aria-hidden="true"] {
|
|
776
|
+
display: none;
|
|
777
|
+
}
|
|
778
|
+
|
|
779
|
+
.clipboard_container {
|
|
780
|
+
display: flex;
|
|
781
|
+
padding: 8px;
|
|
782
|
+
gap: 5px;
|
|
783
|
+
align-items: center;
|
|
784
|
+
}
|
|
785
|
+
|
|
786
|
+
#copied_notif {
|
|
787
|
+
background: black;
|
|
788
|
+
color: white;
|
|
789
|
+
border-radius: 3px;
|
|
790
|
+
padding: 0.2em 0.5em;
|
|
791
|
+
font-size: 80%;
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
button {
|
|
795
|
+
border: none;
|
|
796
|
+
background: none;
|
|
797
|
+
background-color: rgb(246, 248, 250);
|
|
798
|
+
border-color: rgb(209, 217, 224);
|
|
799
|
+
border-radius: 6px;
|
|
800
|
+
border-width: 1px;
|
|
801
|
+
border-style: solid;
|
|
802
|
+
cursor: pointer;
|
|
803
|
+
width: 32px;
|
|
804
|
+
height: 32px;
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
button:hover {
|
|
808
|
+
background-color: rgb(239, 242, 245);
|
|
809
|
+
}
|
|
810
|
+
`;
|
|
811
|
+
|
|
812
|
+
const html = /* html */ `<style>
|
|
813
|
+
${css}
|
|
814
|
+
</style>
|
|
815
|
+
<div class="clipboard_container">
|
|
816
|
+
<div id="copied_notif" aria-hidden="true">Copied !</div>
|
|
817
|
+
<button id="copy_button">
|
|
818
|
+
<svg id="copy_icon" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16">
|
|
819
|
+
<path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
|
|
820
|
+
</svg>
|
|
821
|
+
<svg id="copied_icon" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16">
|
|
822
|
+
<path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path>
|
|
823
|
+
</svg>
|
|
824
|
+
</button>
|
|
825
|
+
</div>`;
|
|
826
|
+
class ClipboardCopy extends HTMLElement {
|
|
827
|
+
constructor() {
|
|
828
|
+
super();
|
|
829
|
+
const root = this.attachShadow({ mode: "open" });
|
|
830
|
+
root.innerHTML = html;
|
|
831
|
+
}
|
|
832
|
+
|
|
833
|
+
connectedCallback() {
|
|
834
|
+
const valueToCopy = this.getAttribute("value");
|
|
835
|
+
const shadowRoot = this.shadowRoot;
|
|
836
|
+
const button = shadowRoot.querySelector("button");
|
|
837
|
+
const copyIcon = shadowRoot.querySelector("#copy_icon");
|
|
838
|
+
const copiedIcon = shadowRoot.querySelector("#copied_icon");
|
|
839
|
+
const copiedNotif = shadowRoot.querySelector("#copied_notif");
|
|
840
|
+
copyIcon.removeAttribute("aria-hidden");
|
|
841
|
+
|
|
842
|
+
const copy = async () => {
|
|
843
|
+
await addToClipboard(valueToCopy);
|
|
844
|
+
copiedNotif.removeAttribute("aria-hidden");
|
|
845
|
+
copyIcon.setAttribute("aria-hidden", "true");
|
|
846
|
+
copiedIcon.setAttribute("aria-hidden", "false");
|
|
847
|
+
setTimeout(() => {
|
|
848
|
+
copiedNotif.setAttribute("aria-hidden", "true");
|
|
849
|
+
copyIcon.setAttribute("aria-hidden", "false");
|
|
850
|
+
copiedIcon.setAttribute("aria-hidden", "true");
|
|
851
|
+
}, 1500);
|
|
852
|
+
};
|
|
853
|
+
|
|
854
|
+
button.onclick = () => {
|
|
855
|
+
copy();
|
|
856
|
+
};
|
|
857
|
+
}
|
|
858
|
+
}
|
|
859
|
+
|
|
860
|
+
customElements.define("clipboard-copy", ClipboardCopy);
|
|
861
|
+
|
|
862
|
+
const addToClipboard = async (text) => {
|
|
863
|
+
const type = "text/plain";
|
|
864
|
+
const clipboardItemData = {
|
|
865
|
+
[type]: text,
|
|
866
|
+
};
|
|
867
|
+
const clipboardItem = new ClipboardItem(clipboardItemData);
|
|
868
|
+
await window.navigator.clipboard.write([clipboardItem]);
|
|
869
|
+
};
|
|
870
|
+
})();
|
|
871
|
+
|
|
872
|
+
(() => {
|
|
873
|
+
const css = /*css*/ `
|
|
874
|
+
/* :host {
|
|
875
|
+
display: block;
|
|
876
|
+
}
|
|
877
|
+
:host code[class*="language-"], :host pre[class*="language-"]{
|
|
878
|
+
margin-top: 0;
|
|
879
|
+
} */
|
|
880
|
+
#code_block {
|
|
881
|
+
position: relative;
|
|
882
|
+
}
|
|
883
|
+
|
|
884
|
+
#pre {
|
|
885
|
+
padding: 16px;
|
|
886
|
+
font-size: 86%;
|
|
887
|
+
margin-top: 16px;
|
|
888
|
+
margin-bottom: 16px;
|
|
889
|
+
margin-left: 0;
|
|
890
|
+
margin-right: 0;
|
|
891
|
+
background: #333 ;
|
|
892
|
+
}
|
|
893
|
+
`;
|
|
894
|
+
|
|
895
|
+
const html = /* html */ `<style>
|
|
896
|
+
${css}
|
|
897
|
+
</style>
|
|
898
|
+
<div id="code_block">
|
|
899
|
+
<pre id="pre"><code></code></pre>
|
|
900
|
+
<div id="clipboard_copy_container" style="position: absolute; right: 0; top: 0">
|
|
901
|
+
<clipboard-copy></clipboard-copy>
|
|
902
|
+
</div>
|
|
903
|
+
</div>
|
|
904
|
+
`;
|
|
905
|
+
|
|
906
|
+
let loadPromise;
|
|
907
|
+
const loadPrism = () => {
|
|
908
|
+
if (loadPromise) {
|
|
909
|
+
return loadPromise;
|
|
910
|
+
}
|
|
911
|
+
// https://prismjs.com/#basic-usage
|
|
912
|
+
const scriptLoadPromise = new Promise((resolve, reject) => {
|
|
913
|
+
window.Prism = window.Prism || {};
|
|
914
|
+
window.Prism.manual = true;
|
|
915
|
+
const script = document.createElement("script");
|
|
916
|
+
script.src = "https://cdn.jsdelivr.net/npm/prismjs";
|
|
917
|
+
script.onload = () => {
|
|
918
|
+
resolve(window.Prism);
|
|
919
|
+
};
|
|
920
|
+
script.onerror = (error) => {
|
|
921
|
+
reject(error);
|
|
922
|
+
};
|
|
923
|
+
document.head.appendChild(script);
|
|
924
|
+
});
|
|
925
|
+
const cssInjectionPromise = (async () => {
|
|
926
|
+
const prismCssUrl =
|
|
927
|
+
"https://cdn.jsdelivr.net/npm/prismjs/themes/prism-tomorrow.css?inline";
|
|
928
|
+
const response = await window.fetch(prismCssUrl, {
|
|
929
|
+
method: "GET",
|
|
930
|
+
});
|
|
931
|
+
const cssText = await response.text();
|
|
932
|
+
const cssStylesheet = new CSSStyleSheet({ baseUrl: prismCssUrl });
|
|
933
|
+
cssStylesheet.replaceSync(cssText);
|
|
934
|
+
return cssStylesheet;
|
|
935
|
+
})();
|
|
936
|
+
loadPromise = Promise.all([scriptLoadPromise, cssInjectionPromise]);
|
|
937
|
+
return loadPromise;
|
|
938
|
+
};
|
|
939
|
+
|
|
940
|
+
class CodeBlock extends HTMLElement {
|
|
941
|
+
constructor() {
|
|
942
|
+
super();
|
|
943
|
+
const root = this.attachShadow({ mode: "open" });
|
|
944
|
+
root.innerHTML = html;
|
|
945
|
+
loadPrism();
|
|
946
|
+
}
|
|
947
|
+
|
|
948
|
+
async connectedCallback() {
|
|
949
|
+
const shadowRoot = this.shadowRoot;
|
|
950
|
+
const language = this.getAttribute("lang").toLowerCase();
|
|
951
|
+
const isEscaped = this.hasAttribute("data-escaped");
|
|
952
|
+
const addCopyButton = this.hasAttribute("data-copy-button");
|
|
953
|
+
let code = this.innerHTML.trimStart();
|
|
954
|
+
this.innerHTML = "";
|
|
955
|
+
|
|
956
|
+
const codeNode = shadowRoot.querySelector("code");
|
|
957
|
+
codeNode.className = `language-${language}`;
|
|
958
|
+
codeNode.textContent = isEscaped ? unescapeHTML(code) : code;
|
|
959
|
+
if (addCopyButton) {
|
|
960
|
+
const clipboardCopy = shadowRoot.querySelector("clipboard-copy");
|
|
961
|
+
clipboardCopy.setAttribute(
|
|
962
|
+
"value",
|
|
963
|
+
isEscaped ? unescapeHTML(code) : code,
|
|
964
|
+
);
|
|
965
|
+
}
|
|
966
|
+
const [Prism, prismCssStyleSheet] = await loadPrism();
|
|
967
|
+
shadowRoot.adoptedStyleSheets.push(prismCssStyleSheet);
|
|
968
|
+
Prism.highlightAllUnder(shadowRoot);
|
|
969
|
+
}
|
|
970
|
+
}
|
|
971
|
+
customElements.define("code-block", CodeBlock);
|
|
972
|
+
|
|
973
|
+
const escape = document.createElement("textarea");
|
|
974
|
+
function unescapeHTML(html) {
|
|
975
|
+
escape.innerHTML = html;
|
|
976
|
+
return escape.textContent;
|
|
977
|
+
}
|
|
978
|
+
})();
|
|
979
|
+
</script>
|
|
980
|
+
<script>
|
|
981
|
+
const css = /* css */ `
|
|
982
|
+
dialog {
|
|
983
|
+
opacity: 0;
|
|
984
|
+
transition: all 0.3s allow-discrete;
|
|
985
|
+
}
|
|
986
|
+
dialog::backdrop {
|
|
987
|
+
background-image: linear-gradient(
|
|
988
|
+
45deg,
|
|
989
|
+
magenta,
|
|
990
|
+
rebeccapurple,
|
|
991
|
+
dodgerblue,
|
|
992
|
+
green
|
|
993
|
+
);
|
|
994
|
+
opacity: 0;
|
|
995
|
+
transition: all 0.3s allow-discrete;
|
|
996
|
+
}
|
|
997
|
+
dialog:open {
|
|
998
|
+
opacity: 1;
|
|
999
|
+
}
|
|
1000
|
+
dialog:open::backdrop {
|
|
1001
|
+
opacity: 0.75;
|
|
1002
|
+
}`;
|
|
1003
|
+
|
|
1004
|
+
const html = /* html */ `<style>
|
|
1005
|
+
${css}
|
|
1006
|
+
</style>
|
|
1007
|
+
<dialog>
|
|
1008
|
+
<p>Connection with server is lost</p>
|
|
1009
|
+
<button autofocus name="reconnect">Retry</button>
|
|
1010
|
+
</dialog>`;
|
|
1011
|
+
|
|
1012
|
+
class JsenvAutoreloadOnServerRestart extends HTMLElement {
|
|
1013
|
+
constructor({ url } = {}) {
|
|
1014
|
+
super();
|
|
1015
|
+
const root = this.attachShadow({ mode: "open" });
|
|
1016
|
+
root.innerHTML = html;
|
|
1017
|
+
|
|
1018
|
+
const dialog = root.querySelector("dialog");
|
|
1019
|
+
const reconnectButton = dialog.querySelector('button[name="reconnect"]');
|
|
1020
|
+
|
|
1021
|
+
(async () => {
|
|
1022
|
+
const connect = () => {
|
|
1023
|
+
const websocket = new WebSocket(url);
|
|
1024
|
+
const connectedPromise = new Promise((resolve) => {
|
|
1025
|
+
websocket.onerror = () => {
|
|
1026
|
+
resolve(null);
|
|
1027
|
+
};
|
|
1028
|
+
websocket.onopen = () => {
|
|
1029
|
+
resolve(websocket);
|
|
1030
|
+
};
|
|
1031
|
+
});
|
|
1032
|
+
return connectedPromise;
|
|
1033
|
+
};
|
|
1034
|
+
|
|
1035
|
+
const initialWebSocket = await connect();
|
|
1036
|
+
initialWebSocket.onclose = async () => {
|
|
1037
|
+
console.info("connection to server lost, trying to reconnect");
|
|
1038
|
+
const retry = async () => {
|
|
1039
|
+
let attemptCount = 0;
|
|
1040
|
+
let timeToWait = 100;
|
|
1041
|
+
const tryToReconnect = async () => {
|
|
1042
|
+
const newWebsocket = await connect();
|
|
1043
|
+
if (newWebsocket) {
|
|
1044
|
+
dialog.close();
|
|
1045
|
+
console.info("reconnected to server, reloading the page...");
|
|
1046
|
+
window.location.reload(true);
|
|
1047
|
+
return;
|
|
1048
|
+
}
|
|
1049
|
+
attemptCount++;
|
|
1050
|
+
if (attemptCount === 10) {
|
|
1051
|
+
dialog.showModal();
|
|
1052
|
+
reconnectButton.onclick = async () => {
|
|
1053
|
+
reconnectButton.disabled = true;
|
|
1054
|
+
const previousContext = reconnectButton.textContent;
|
|
1055
|
+
reconnectButton.textContent = "Retrying...";
|
|
1056
|
+
await retry();
|
|
1057
|
+
reconnectButton.textContent = previousContext;
|
|
1058
|
+
reconnectButton.disabled = false;
|
|
1059
|
+
};
|
|
1060
|
+
return;
|
|
1061
|
+
}
|
|
1062
|
+
timeToWait += 100;
|
|
1063
|
+
await new Promise((resolve) => setTimeout(resolve, timeToWait));
|
|
1064
|
+
await tryToReconnect();
|
|
1065
|
+
};
|
|
1066
|
+
await tryToReconnect();
|
|
1067
|
+
};
|
|
1068
|
+
retry();
|
|
1069
|
+
};
|
|
1070
|
+
})();
|
|
1071
|
+
}
|
|
1072
|
+
}
|
|
1073
|
+
if (!customElements.get("jsenv-autoreload-on-server-restart")) {
|
|
1074
|
+
customElements.define(
|
|
1075
|
+
"jsenv-autoreload-on-server-restart",
|
|
1076
|
+
JsenvAutoreloadOnServerRestart,
|
|
1077
|
+
);
|
|
1078
|
+
}
|
|
1079
|
+
|
|
1080
|
+
const jsenvAutoreloadOnServerRestartElement =
|
|
1081
|
+
new JsenvAutoreloadOnServerRestart({
|
|
1082
|
+
url: (() => {
|
|
1083
|
+
const websocketScheme =
|
|
1084
|
+
self.location.protocol === "https:" ? "wss" : "ws";
|
|
1085
|
+
const websocketUrl = `${websocketScheme}://${self.location.host}/.internal/alive.websocket`;
|
|
1086
|
+
return websocketUrl;
|
|
1087
|
+
})(),
|
|
1088
|
+
});
|
|
1089
|
+
|
|
1090
|
+
// script is injected into document.body
|
|
1091
|
+
if (document.body) {
|
|
1092
|
+
document.currentScript.parentNode.replaceChild(
|
|
1093
|
+
jsenvAutoreloadOnServerRestartElement,
|
|
1094
|
+
document.currentScript,
|
|
1095
|
+
);
|
|
1096
|
+
}
|
|
1097
|
+
// script injected outisde document.body (likely in head)
|
|
1098
|
+
else {
|
|
1099
|
+
document.currentScript.parentNode.removeChild(document.currentScript);
|
|
1100
|
+
document.onreadystatechange = () => {
|
|
1101
|
+
if (document.readyState === "interactive") {
|
|
1102
|
+
document.body.appendChild(jsenvAutoreloadOnServerRestartElement);
|
|
1103
|
+
}
|
|
1104
|
+
};
|
|
1105
|
+
}
|
|
1106
|
+
</script>
|
|
1107
|
+
</head>
|
|
1108
|
+
<body>
|
|
1109
|
+
<style>:root {
|
|
1110
|
+
--background-color: #fff;
|
|
1111
|
+
--text-color: #333;
|
|
1112
|
+
--border-color: #e0e0e0;
|
|
1113
|
+
--primary-color: #1976d2;
|
|
1114
|
+
--secondary-color: #f5f5f5;
|
|
1115
|
+
--success-color: #4caf50;
|
|
1116
|
+
--warning-color: #ff9800;
|
|
1117
|
+
--method-get-color: #61affe;
|
|
1118
|
+
--method-post-color: #49cc90;
|
|
1119
|
+
--method-put-color: #ff9800;
|
|
1120
|
+
--method-delete-color: #f44336;
|
|
1121
|
+
--method-patch-color: #9c27b0;
|
|
1122
|
+
--method-options-color: #607d8b;
|
|
1123
|
+
--method-head-color: #00bcd4;
|
|
1124
|
+
}
|
|
1125
|
+
|
|
1126
|
+
:root[data-theme="light"] {
|
|
1127
|
+
--background-color: #fff;
|
|
1128
|
+
--text-color: #333;
|
|
1129
|
+
--border-color: #e0e0e0;
|
|
1130
|
+
--primary-color: #1976d2;
|
|
1131
|
+
--secondary-color: #f5f5f5;
|
|
1132
|
+
}
|
|
1133
|
+
|
|
1134
|
+
:root[data-theme="dark"] {
|
|
1135
|
+
--background-color: #121212;
|
|
1136
|
+
--text-color: #e0e0e0;
|
|
1137
|
+
--border-color: #333;
|
|
1138
|
+
--primary-color: #4f9eff;
|
|
1139
|
+
--secondary-color: #1e1e1e;
|
|
1140
|
+
}
|
|
1141
|
+
|
|
1142
|
+
:root[data-theme="dark"] a {
|
|
1143
|
+
color: #1e90ff;
|
|
1144
|
+
}
|
|
1145
|
+
|
|
1146
|
+
body {
|
|
1147
|
+
color: var(--text-color);
|
|
1148
|
+
background-color: var(--background-color);
|
|
1149
|
+
margin: 0;
|
|
1150
|
+
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif;
|
|
1151
|
+
line-height: 1.5;
|
|
1152
|
+
transition: background-color .3s, color .3s;
|
|
1153
|
+
}
|
|
1154
|
+
|
|
1155
|
+
.container {
|
|
1156
|
+
flex-direction: row;
|
|
1157
|
+
display: flex;
|
|
1158
|
+
}
|
|
1159
|
+
|
|
1160
|
+
aside {
|
|
1161
|
+
background: var(--background-color);
|
|
1162
|
+
border-radius: 6px;
|
|
1163
|
+
flex-shrink: 0;
|
|
1164
|
+
width: 250px;
|
|
1165
|
+
max-height: calc(100vh - 40px);
|
|
1166
|
+
margin-right: 20px;
|
|
1167
|
+
padding-top: 20px;
|
|
1168
|
+
padding-left: 10px;
|
|
1169
|
+
transition: width .3s, margin-left .3s;
|
|
1170
|
+
overflow: hidden auto;
|
|
1171
|
+
}
|
|
1172
|
+
|
|
1173
|
+
main {
|
|
1174
|
+
flex-grow: 1;
|
|
1175
|
+
flex-basis: 0;
|
|
1176
|
+
min-width: 0;
|
|
1177
|
+
padding-top: 10px;
|
|
1178
|
+
padding-right: 20px;
|
|
1179
|
+
transition: margin-left .3s;
|
|
1180
|
+
}
|
|
1181
|
+
|
|
1182
|
+
.header_row {
|
|
1183
|
+
align-items: center;
|
|
1184
|
+
gap: 10px;
|
|
1185
|
+
display: flex;
|
|
1186
|
+
}
|
|
1187
|
+
|
|
1188
|
+
.note_button_open {
|
|
1189
|
+
cursor: pointer;
|
|
1190
|
+
color: var(--text-color);
|
|
1191
|
+
opacity: .7;
|
|
1192
|
+
background: none;
|
|
1193
|
+
border: none;
|
|
1194
|
+
border-radius: 50%;
|
|
1195
|
+
height: 24px;
|
|
1196
|
+
padding: 0;
|
|
1197
|
+
transition: background-color .2s;
|
|
1198
|
+
}
|
|
1199
|
+
|
|
1200
|
+
.note_button_open:hover {
|
|
1201
|
+
background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
|
|
1202
|
+
opacity: 1;
|
|
1203
|
+
}
|
|
1204
|
+
|
|
1205
|
+
.note_title {
|
|
1206
|
+
align-items: center;
|
|
1207
|
+
margin-bottom: 10px;
|
|
1208
|
+
font-size: 1.1rem;
|
|
1209
|
+
font-weight: bold;
|
|
1210
|
+
display: flex;
|
|
1211
|
+
}
|
|
1212
|
+
|
|
1213
|
+
.note_button_close {
|
|
1214
|
+
cursor: pointer;
|
|
1215
|
+
background: none;
|
|
1216
|
+
border: none;
|
|
1217
|
+
border-radius: 50%;
|
|
1218
|
+
justify-content: center;
|
|
1219
|
+
align-items: center;
|
|
1220
|
+
padding: 5px;
|
|
1221
|
+
display: flex;
|
|
1222
|
+
position: absolute;
|
|
1223
|
+
top: 15px;
|
|
1224
|
+
right: 15px;
|
|
1225
|
+
}
|
|
1226
|
+
|
|
1227
|
+
.note_button_close:hover {
|
|
1228
|
+
background-color: var(--secondary-color);
|
|
1229
|
+
}
|
|
1230
|
+
|
|
1231
|
+
.note_content {
|
|
1232
|
+
background-color: var(--background-color);
|
|
1233
|
+
border-radius: 8px;
|
|
1234
|
+
width: 90%;
|
|
1235
|
+
max-width: 500px;
|
|
1236
|
+
padding: 20px;
|
|
1237
|
+
transition: transform .3s;
|
|
1238
|
+
position: relative;
|
|
1239
|
+
transform: translateY(-20px);
|
|
1240
|
+
box-shadow: 0 10px 25px #0003;
|
|
1241
|
+
}
|
|
1242
|
+
|
|
1243
|
+
.theme-toggle {
|
|
1244
|
+
align-items: center;
|
|
1245
|
+
display: flex;
|
|
1246
|
+
}
|
|
1247
|
+
|
|
1248
|
+
#theme-toggle-btn {
|
|
1249
|
+
cursor: pointer;
|
|
1250
|
+
background: none;
|
|
1251
|
+
background-color: var(--secondary-color);
|
|
1252
|
+
border: none;
|
|
1253
|
+
border-radius: 50%;
|
|
1254
|
+
justify-content: center;
|
|
1255
|
+
align-items: center;
|
|
1256
|
+
width: 40px;
|
|
1257
|
+
height: 40px;
|
|
1258
|
+
transition: background-color .2s;
|
|
1259
|
+
display: flex;
|
|
1260
|
+
}
|
|
1261
|
+
|
|
1262
|
+
#theme-toggle-btn:hover {
|
|
1263
|
+
background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
|
|
1264
|
+
}
|
|
1265
|
+
|
|
1266
|
+
#theme-toggle-btn svg {
|
|
1267
|
+
fill: var(--text-color);
|
|
1268
|
+
}
|
|
1269
|
+
|
|
1270
|
+
.sun-icon, .moon-icon {
|
|
1271
|
+
display: none;
|
|
1272
|
+
}
|
|
1273
|
+
|
|
1274
|
+
:root[data-theme="dark"] .sun-icon, :root[data-theme="light"] .moon-icon {
|
|
1275
|
+
display: block;
|
|
1276
|
+
}
|
|
1277
|
+
|
|
1278
|
+
.progress-container {
|
|
1279
|
+
background-color: #1976d233;
|
|
1280
|
+
border-radius: 4px;
|
|
1281
|
+
width: 100%;
|
|
1282
|
+
height: 100%;
|
|
1283
|
+
margin: 20px 0;
|
|
1284
|
+
position: relative;
|
|
1285
|
+
overflow: hidden;
|
|
1286
|
+
}
|
|
1287
|
+
|
|
1288
|
+
.progress-indeterminate .progress-bar-long, .progress-indeterminate .progress-bar-short {
|
|
1289
|
+
background-color: var(--primary-color);
|
|
1290
|
+
border-radius: 4px;
|
|
1291
|
+
height: 100%;
|
|
1292
|
+
animation-duration: 2.2s;
|
|
1293
|
+
animation-iteration-count: infinite;
|
|
1294
|
+
position: absolute;
|
|
1295
|
+
top: 0;
|
|
1296
|
+
}
|
|
1297
|
+
|
|
1298
|
+
.progress-indeterminate .progress-bar-long {
|
|
1299
|
+
width: 75%;
|
|
1300
|
+
animation-name: indeterminate-ltr;
|
|
1301
|
+
}
|
|
1302
|
+
|
|
1303
|
+
.progress-indeterminate .progress-bar-short {
|
|
1304
|
+
width: 20%;
|
|
1305
|
+
animation-name: indeterminate-short-ltr;
|
|
1306
|
+
}
|
|
1307
|
+
|
|
1308
|
+
@keyframes indeterminate-ltr {
|
|
1309
|
+
0% {
|
|
1310
|
+
left: -90%;
|
|
1311
|
+
right: 100%;
|
|
1312
|
+
}
|
|
1313
|
+
|
|
1314
|
+
60% {
|
|
1315
|
+
left: -90%;
|
|
1316
|
+
right: 100%;
|
|
1317
|
+
}
|
|
1318
|
+
|
|
1319
|
+
100% {
|
|
1320
|
+
left: 100%;
|
|
1321
|
+
right: -35%;
|
|
1322
|
+
}
|
|
1323
|
+
}
|
|
1324
|
+
|
|
1325
|
+
@keyframes indeterminate-short-ltr {
|
|
1326
|
+
0% {
|
|
1327
|
+
left: -200%;
|
|
1328
|
+
right: 100%;
|
|
1329
|
+
}
|
|
1330
|
+
|
|
1331
|
+
60% {
|
|
1332
|
+
left: 107%;
|
|
1333
|
+
right: -8%;
|
|
1334
|
+
}
|
|
1335
|
+
|
|
1336
|
+
100% {
|
|
1337
|
+
left: 107%;
|
|
1338
|
+
right: -8%;
|
|
1339
|
+
}
|
|
1340
|
+
}
|
|
1341
|
+
|
|
1342
|
+
.auto_head_note {
|
|
1343
|
+
color: var(--method-head-color);
|
|
1344
|
+
align-items: center;
|
|
1345
|
+
margin-top: 10px;
|
|
1346
|
+
font-size: 14px;
|
|
1347
|
+
display: flex;
|
|
1348
|
+
}
|
|
1349
|
+
|
|
1350
|
+
.note {
|
|
1351
|
+
border-left: 4px solid var(--warning-color);
|
|
1352
|
+
background-color: #ff98001a;
|
|
1353
|
+
border-radius: 4px;
|
|
1354
|
+
margin-bottom: 20px;
|
|
1355
|
+
padding: 12px;
|
|
1356
|
+
}
|
|
1357
|
+
|
|
1358
|
+
.info_pill {
|
|
1359
|
+
background-color: #0000000d;
|
|
1360
|
+
border-radius: 14px;
|
|
1361
|
+
align-items: center;
|
|
1362
|
+
margin-left: 10px;
|
|
1363
|
+
padding: 4px 10px;
|
|
1364
|
+
font-size: 13px;
|
|
1365
|
+
display: inline-flex;
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
.route_container {
|
|
1369
|
+
align-items: flex-start;
|
|
1370
|
+
gap: 20px;
|
|
1371
|
+
display: flex;
|
|
1372
|
+
}
|
|
1373
|
+
|
|
1374
|
+
.filters_sidebar {
|
|
1375
|
+
border: 1px solid var(--border-color);
|
|
1376
|
+
background: var(--secondary-color);
|
|
1377
|
+
border-radius: 6px;
|
|
1378
|
+
flex-shrink: 0;
|
|
1379
|
+
width: 250px;
|
|
1380
|
+
overflow: hidden;
|
|
1381
|
+
}
|
|
1382
|
+
|
|
1383
|
+
.sidebar_header {
|
|
1384
|
+
border-bottom: 1px solid var(--border-color);
|
|
1385
|
+
justify-content: space-between;
|
|
1386
|
+
align-items: center;
|
|
1387
|
+
padding: 12px 15px;
|
|
1388
|
+
font-weight: 500;
|
|
1389
|
+
display: flex;
|
|
1390
|
+
}
|
|
1391
|
+
|
|
1392
|
+
.filters_content {
|
|
1393
|
+
background: var(--background-color);
|
|
1394
|
+
padding: 15px;
|
|
1395
|
+
}
|
|
1396
|
+
|
|
1397
|
+
.filters_count {
|
|
1398
|
+
background-color: var(--primary-color);
|
|
1399
|
+
color: #fff;
|
|
1400
|
+
border-radius: 12px;
|
|
1401
|
+
padding: 2px 8px;
|
|
1402
|
+
font-size: .8rem;
|
|
1403
|
+
font-weight: normal;
|
|
1404
|
+
}
|
|
1405
|
+
|
|
1406
|
+
@media (width <= 768px) {
|
|
1407
|
+
.route_container {
|
|
1408
|
+
flex-direction: column;
|
|
1409
|
+
}
|
|
1410
|
+
|
|
1411
|
+
.filters_sidebar {
|
|
1412
|
+
width: 100%;
|
|
1413
|
+
margin-bottom: 20px;
|
|
1414
|
+
}
|
|
1415
|
+
}
|
|
1416
|
+
|
|
1417
|
+
.route_list {
|
|
1418
|
+
flex-grow: 1;
|
|
1419
|
+
min-width: 0;
|
|
1420
|
+
margin-top: 20px;
|
|
1421
|
+
}
|
|
1422
|
+
|
|
1423
|
+
.route_details {
|
|
1424
|
+
border: 1px solid #000;
|
|
1425
|
+
border-color: var(--method-color);
|
|
1426
|
+
background: color-mix(in srgb, var(--method-color), transparent 90%);
|
|
1427
|
+
border-radius: 4px;
|
|
1428
|
+
margin: 0 0 15px;
|
|
1429
|
+
box-shadow: 0 0 3px #00000030;
|
|
1430
|
+
}
|
|
1431
|
+
|
|
1432
|
+
.route_details > summary {
|
|
1433
|
+
cursor: pointer;
|
|
1434
|
+
list-style: none;
|
|
1435
|
+
}
|
|
1436
|
+
|
|
1437
|
+
.route_details > summary::marker {
|
|
1438
|
+
display: none;
|
|
1439
|
+
}
|
|
1440
|
+
|
|
1441
|
+
.route_summary_container {
|
|
1442
|
+
align-items: center;
|
|
1443
|
+
padding: 5px;
|
|
1444
|
+
display: flex;
|
|
1445
|
+
}
|
|
1446
|
+
|
|
1447
|
+
.route_method {
|
|
1448
|
+
color: #fff;
|
|
1449
|
+
text-align: center;
|
|
1450
|
+
text-shadow: 0 1px #0000001a;
|
|
1451
|
+
background: var(--method-color);
|
|
1452
|
+
border-radius: 3px;
|
|
1453
|
+
min-width: 80px;
|
|
1454
|
+
padding: 6px 0;
|
|
1455
|
+
font-family: sans-serif;
|
|
1456
|
+
font-size: 14px;
|
|
1457
|
+
font-weight: 700;
|
|
1458
|
+
}
|
|
1459
|
+
|
|
1460
|
+
.route_resource {
|
|
1461
|
+
word-break: break-word;
|
|
1462
|
+
margin-top: 0;
|
|
1463
|
+
margin-bottom: 0;
|
|
1464
|
+
margin-left: 8px;
|
|
1465
|
+
font-family: monospace;
|
|
1466
|
+
font-size: 16px;
|
|
1467
|
+
font-weight: 600;
|
|
1468
|
+
}
|
|
1469
|
+
|
|
1470
|
+
.route_details[data-method="HEAD"] {
|
|
1471
|
+
--method-color: var(--method-head-color);
|
|
1472
|
+
}
|
|
1473
|
+
|
|
1474
|
+
.route_details[data-method="OPTIONS"] {
|
|
1475
|
+
--method-color: var(--method-options-color);
|
|
1476
|
+
}
|
|
1477
|
+
|
|
1478
|
+
.route_details[data-method="GET"] {
|
|
1479
|
+
--method-color: var(--method-get-color);
|
|
1480
|
+
}
|
|
1481
|
+
|
|
1482
|
+
.route_details[data-method="POST"] {
|
|
1483
|
+
--method-color: var(--method-post-color);
|
|
1484
|
+
}
|
|
1485
|
+
|
|
1486
|
+
.route_details[data-method="PUT"] {
|
|
1487
|
+
--method-color: var(--method-put-color);
|
|
1488
|
+
}
|
|
1489
|
+
|
|
1490
|
+
.route_details[data-method="PATCH"] {
|
|
1491
|
+
--method-color: var(--method-patch-color);
|
|
1492
|
+
}
|
|
1493
|
+
|
|
1494
|
+
.route_details[data-method="DELETE"] {
|
|
1495
|
+
--method-color: var(--method-delete-color);
|
|
1496
|
+
}
|
|
1497
|
+
|
|
1498
|
+
.route_owner_name {
|
|
1499
|
+
color: #666;
|
|
1500
|
+
text-align: center;
|
|
1501
|
+
background-color: #ffefd2;
|
|
1502
|
+
border-radius: 5px;
|
|
1503
|
+
padding: 4px 8px;
|
|
1504
|
+
}
|
|
1505
|
+
|
|
1506
|
+
:root[data-theme="dark"] .route_owner_name {
|
|
1507
|
+
color: #fff;
|
|
1508
|
+
background-color: #603b0d;
|
|
1509
|
+
}
|
|
1510
|
+
|
|
1511
|
+
.route_details_content {
|
|
1512
|
+
border-top: 1px solid var(--method-color);
|
|
1513
|
+
padding: 10px;
|
|
1514
|
+
}
|
|
1515
|
+
|
|
1516
|
+
.route_description {
|
|
1517
|
+
margin: 0;
|
|
1518
|
+
}
|
|
1519
|
+
|
|
1520
|
+
.route_content_nego_title {
|
|
1521
|
+
font-weight: bold;
|
|
1522
|
+
}
|
|
1523
|
+
|
|
1524
|
+
.filter_container {
|
|
1525
|
+
border: 1px solid var(--border-color);
|
|
1526
|
+
background: var(--secondary-color);
|
|
1527
|
+
border-radius: 4px;
|
|
1528
|
+
margin-bottom: 20px;
|
|
1529
|
+
overflow: hidden;
|
|
1530
|
+
}
|
|
1531
|
+
|
|
1532
|
+
.filter_container::marker {
|
|
1533
|
+
display: none;
|
|
1534
|
+
}
|
|
1535
|
+
|
|
1536
|
+
.filter_summary {
|
|
1537
|
+
cursor: pointer;
|
|
1538
|
+
user-select: none;
|
|
1539
|
+
flex-direction: row;
|
|
1540
|
+
justify-content: space-between;
|
|
1541
|
+
align-items: center;
|
|
1542
|
+
font-weight: 500;
|
|
1543
|
+
display: flex;
|
|
1544
|
+
}
|
|
1545
|
+
|
|
1546
|
+
.filter:open .arrow_down {
|
|
1547
|
+
transform: rotate(180deg);
|
|
1548
|
+
}
|
|
1549
|
+
|
|
1550
|
+
.filter_list {
|
|
1551
|
+
background: var(--background-color);
|
|
1552
|
+
border-top: 1px solid var(--border-color);
|
|
1553
|
+
overflow: hidden;
|
|
1554
|
+
}
|
|
1555
|
+
|
|
1556
|
+
.filter_item {
|
|
1557
|
+
margin: 15px;
|
|
1558
|
+
}
|
|
1559
|
+
|
|
1560
|
+
.filter_badge {
|
|
1561
|
+
background-color: var(--primary-color);
|
|
1562
|
+
color: #fff;
|
|
1563
|
+
border-radius: 12px;
|
|
1564
|
+
margin-left: 10px;
|
|
1565
|
+
padding: 2px 8px;
|
|
1566
|
+
font-size: .8rem;
|
|
1567
|
+
}
|
|
1568
|
+
|
|
1569
|
+
select {
|
|
1570
|
+
border: 1px solid var(--border-color);
|
|
1571
|
+
background-color: var(--background-color);
|
|
1572
|
+
min-width: 200px;
|
|
1573
|
+
color: var(--text-color);
|
|
1574
|
+
border-radius: 4px;
|
|
1575
|
+
padding: 8px;
|
|
1576
|
+
font-family: inherit;
|
|
1577
|
+
}
|
|
1578
|
+
|
|
1579
|
+
select option {
|
|
1580
|
+
padding: 8px;
|
|
1581
|
+
}
|
|
1582
|
+
|
|
1583
|
+
select option:checked {
|
|
1584
|
+
background-color: var(--primary-color);
|
|
1585
|
+
color: #fff;
|
|
1586
|
+
}
|
|
1587
|
+
|
|
1588
|
+
.filter_form {
|
|
1589
|
+
user-select: none;
|
|
1590
|
+
flex-flow: column wrap;
|
|
1591
|
+
gap: 8px;
|
|
1592
|
+
margin-top: 15px;
|
|
1593
|
+
margin-bottom: 15px;
|
|
1594
|
+
display: flex;
|
|
1595
|
+
}
|
|
1596
|
+
|
|
1597
|
+
.filter_form label {
|
|
1598
|
+
cursor: pointer;
|
|
1599
|
+
word-break: keep-all;
|
|
1600
|
+
text-overflow: ellipsis;
|
|
1601
|
+
white-space: nowrap;
|
|
1602
|
+
align-items: center;
|
|
1603
|
+
gap: 5px;
|
|
1604
|
+
width: 100%;
|
|
1605
|
+
display: flex;
|
|
1606
|
+
overflow: hidden;
|
|
1607
|
+
}
|
|
1608
|
+
|
|
1609
|
+
label .filter_text {
|
|
1610
|
+
text-overflow: ellipsis;
|
|
1611
|
+
overflow: hidden;
|
|
1612
|
+
}
|
|
1613
|
+
|
|
1614
|
+
.filter_text[data-method] {
|
|
1615
|
+
border-left: 5px solid var(--method-color);
|
|
1616
|
+
padding-left: 4px;
|
|
1617
|
+
}
|
|
1618
|
+
|
|
1619
|
+
.filter_text[data-method="all"] {
|
|
1620
|
+
--method-color: transparent;
|
|
1621
|
+
border-image-slice: 1;
|
|
1622
|
+
}
|
|
1623
|
+
|
|
1624
|
+
.filter_text[data-method="HEAD"] {
|
|
1625
|
+
--method-color: var(--method-head-color);
|
|
1626
|
+
}
|
|
1627
|
+
|
|
1628
|
+
.filter_text[data-method="OPTIONS"] {
|
|
1629
|
+
--method-color: var(--method-options-color);
|
|
1630
|
+
}
|
|
1631
|
+
|
|
1632
|
+
.filter_text[data-method="GET"] {
|
|
1633
|
+
--method-color: var(--method-get-color);
|
|
1634
|
+
}
|
|
1635
|
+
|
|
1636
|
+
.filter_text[data-method="POST"] {
|
|
1637
|
+
--method-color: var(--method-post-color);
|
|
1638
|
+
}
|
|
1639
|
+
|
|
1640
|
+
.filter_text[data-method="PUT"] {
|
|
1641
|
+
--method-color: var(--method-put-color);
|
|
1642
|
+
}
|
|
1643
|
+
|
|
1644
|
+
.filter_text[data-method="PATCH"] {
|
|
1645
|
+
--method-color: var(--method-patch-color);
|
|
1646
|
+
}
|
|
1647
|
+
|
|
1648
|
+
.filter_text[data-method="DELETE"] {
|
|
1649
|
+
--method-color: var(--method-delete-color);
|
|
1650
|
+
}
|
|
1651
|
+
|
|
1652
|
+
.filter_count {
|
|
1653
|
+
color: #666;
|
|
1654
|
+
opacity: .8;
|
|
1655
|
+
background-color: #eee;
|
|
1656
|
+
border-radius: 12px;
|
|
1657
|
+
margin-left: auto;
|
|
1658
|
+
padding: 2px 8px;
|
|
1659
|
+
font-size: .8rem;
|
|
1660
|
+
}
|
|
1661
|
+
|
|
1662
|
+
.filter_actions {
|
|
1663
|
+
gap: 10px;
|
|
1664
|
+
display: flex;
|
|
1665
|
+
}
|
|
1666
|
+
|
|
1667
|
+
.filter_button {
|
|
1668
|
+
background-color: var(--secondary-color);
|
|
1669
|
+
border: 1px solid var(--border-color);
|
|
1670
|
+
color: var(--text-color);
|
|
1671
|
+
cursor: pointer;
|
|
1672
|
+
border-radius: 4px;
|
|
1673
|
+
padding: 6px 12px;
|
|
1674
|
+
font-size: .9rem;
|
|
1675
|
+
transition: all .2s;
|
|
1676
|
+
}
|
|
1677
|
+
|
|
1678
|
+
.filter_button:hover {
|
|
1679
|
+
background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
|
|
1680
|
+
}
|
|
1681
|
+
</style>
|
|
1682
|
+
<div class="container">
|
|
1683
|
+
<aside></aside>
|
|
1684
|
+
<main>
|
|
1685
|
+
<div class="header_row">
|
|
1686
|
+
<h1 style="margin: 0">Route inspector</h1>
|
|
1687
|
+
<button class="note_button_open" aria-label="Show information" title="About HTTP Methods">
|
|
1688
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
1689
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
1690
|
+
<line x1="12" y1="16" x2="12" y2="12"></line>
|
|
1691
|
+
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
|
1692
|
+
</svg>
|
|
1693
|
+
</button>
|
|
1694
|
+
<div style="flex: 1"></div>
|
|
1695
|
+
<div class="theme-toggle">
|
|
1696
|
+
<button id="theme-toggle-btn" aria-label="Toggle dark/light mode">
|
|
1697
|
+
<svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
|
|
1698
|
+
<path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM80-440q0 17 11.5 28.5T120-400h80q17 0 28.5-11.5T240-440q0-17-11.5-28.5T200-480h-80q-17 0-28.5 11.5T80-440Zm680 0q0 17 11.5 28.5T800-400h80q17 0 28.5-11.5T920-440q0-17-11.5-28.5T880-480h-80q-17 0-28.5 11.5T760-440ZM440-760q0 17 11.5 28.5T480-720q17 0 28.5-11.5T520-760v-80q0-17-11.5-28.5T480-880q-17 0-28.5 11.5T440-840v80Zm0 680q0 17 11.5 28.5T480-40q17 0 28.5-11.5T520-80v-80q0-17-11.5-28.5T480-200q-17 0-28.5 11.5T440-160v80ZM226-678l56 56q12 12 28.5 12t28.5-12q12-12 12-28.5T339-679l-56-56q-12-12-28.5-12T226-735q-12 12-12 28.5t12 28.5Zm452 452 56 56q12 12 28.5 12t28.5-12q12-12 12-28.5T791-227l-56-56q-12-12-28.5-12T678-283q-12 12-12 28.5t12 28.5ZM791-678q12 12 28.5 12t28.5-12q12-12 12-28.5T848-735l-56-56q-12-12-28.5-12T735-791q-12 12-12 28.5t12 28.5l56 56Zm-508 452q12 12 28.5 12t28.5-12q12-12 12-28.5T340-283l-56-56q-12-12-28.5-12T227-339q-12 12-12 28.5t12 28.5l56 56Z"></path>
|
|
1699
|
+
</svg>
|
|
1700
|
+
<svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
|
|
1701
|
+
<path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q8 0 17 .5t23 1.5q-36 32-56 79t-20 99q0 83 58.5 141.5T643-460q52 0 99-20t79-56q1 14 1.5 23t.5 17q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"></path>
|
|
1702
|
+
</svg>
|
|
1703
|
+
</button>
|
|
1704
|
+
</div>
|
|
1705
|
+
</div>
|
|
1706
|
+
<dialog class="node_dialog">
|
|
1707
|
+
<button class="note_button_close" aria-label="Close">
|
|
1708
|
+
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
1709
|
+
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
1710
|
+
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
1711
|
+
</svg>
|
|
1712
|
+
</button>
|
|
1713
|
+
<div class="note_title">Explanation about this page</div>
|
|
1714
|
+
<div class="note_text">
|
|
1715
|
+
<p>This page displays all routes configured in your server.</p>
|
|
1716
|
+
<p>
|
|
1717
|
+
Every GET route also automatically supports HEAD requests without
|
|
1718
|
+
additional configuration.
|
|
1719
|
+
</p>
|
|
1720
|
+
</div>
|
|
1721
|
+
</dialog>
|
|
1722
|
+
<script>
|
|
1723
|
+
const noteDialog = document.querySelector(".node_dialog");
|
|
1724
|
+
const noteButtonOpen = document.querySelector(".note_button_open");
|
|
1725
|
+
const nodeButtonClose = document.querySelector(".note_button_close");
|
|
1726
|
+
|
|
1727
|
+
noteDialog.onclick = (e) => {
|
|
1728
|
+
if (e.target === noteDialog) {
|
|
1729
|
+
noteDialog.close();
|
|
1730
|
+
}
|
|
1731
|
+
};
|
|
1732
|
+
nodeButtonClose.onclick = () => {
|
|
1733
|
+
noteDialog.close();
|
|
1734
|
+
};
|
|
1735
|
+
noteButtonOpen.onclick = () => {
|
|
1736
|
+
noteDialog.showModal();
|
|
1737
|
+
};
|
|
1738
|
+
</script>
|
|
1739
|
+
<div id="app"></div>
|
|
1740
|
+
</main>
|
|
1741
|
+
</div>
|
|
1742
|
+
<script>
|
|
1743
|
+
// Theme toggling functionality
|
|
1744
|
+
const toggleThemeButton = document.getElementById("theme-toggle-btn");
|
|
1745
|
+
|
|
1746
|
+
// Check for saved theme preference or use system preference
|
|
1747
|
+
const savedTheme = localStorage.getItem("theme");
|
|
1748
|
+
const prefersDark = window.matchMedia(
|
|
1749
|
+
"(prefers-color-scheme: dark)",
|
|
1750
|
+
).matches;
|
|
1751
|
+
|
|
1752
|
+
// Apply theme based on saved preference or system preference
|
|
1753
|
+
if (savedTheme === "dark" || (savedTheme === null && prefersDark)) {
|
|
1754
|
+
document.documentElement.setAttribute("data-theme", "dark");
|
|
1755
|
+
} else {
|
|
1756
|
+
document.documentElement.setAttribute("data-theme", "light");
|
|
1757
|
+
}
|
|
1758
|
+
|
|
1759
|
+
// Toggle theme when button is clicked
|
|
1760
|
+
toggleThemeButton.addEventListener("click", () => {
|
|
1761
|
+
if (document.documentElement.getAttribute("data-theme") === "dark") {
|
|
1762
|
+
document.documentElement.setAttribute("data-theme", "light");
|
|
1763
|
+
localStorage.setItem("theme", "light");
|
|
1764
|
+
} else {
|
|
1765
|
+
document.documentElement.setAttribute("data-theme", "dark");
|
|
1766
|
+
localStorage.setItem("theme", "dark");
|
|
1767
|
+
}
|
|
1768
|
+
});
|
|
1769
|
+
</script>
|
|
1770
|
+
<script type="module">
|
|
1771
|
+
// https://preactjs.com/guide/v10/no-build-workflows/
|
|
1772
|
+
import { render } from "preact";
|
|
1773
|
+
import { html } from "htm/preact";
|
|
1774
|
+
import { signal, computed } from "@preact/signals";
|
|
1775
|
+
import { useState, useRef, useCallback } from "preact/hooks";
|
|
1776
|
+
|
|
1777
|
+
const routesLoadingSignal = signal(false);
|
|
1778
|
+
const routeLoadingErrorSignal = signal(null);
|
|
1779
|
+
const routesSignal = signal([]);
|
|
1780
|
+
const NO_PACKAGE_NAME = "unknown";
|
|
1781
|
+
|
|
1782
|
+
const repartitionsSignal = computed(() => {
|
|
1783
|
+
const routes = routesSignal.value;
|
|
1784
|
+
const methodRepartition = {};
|
|
1785
|
+
const packageRepartition = {};
|
|
1786
|
+
for (const route of routes) {
|
|
1787
|
+
const method = route.method;
|
|
1788
|
+
if (!methodRepartition[method]) {
|
|
1789
|
+
methodRepartition[method] = 0;
|
|
1790
|
+
}
|
|
1791
|
+
methodRepartition[method]++;
|
|
1792
|
+
|
|
1793
|
+
const packageName = route.meta.packageName || NO_PACKAGE_NAME;
|
|
1794
|
+
if (!packageRepartition[packageName]) {
|
|
1795
|
+
packageRepartition[packageName] = 0;
|
|
1796
|
+
}
|
|
1797
|
+
packageRepartition[packageName]++;
|
|
1798
|
+
}
|
|
1799
|
+
return {
|
|
1800
|
+
methodRepartition,
|
|
1801
|
+
packageRepartition,
|
|
1802
|
+
};
|
|
1803
|
+
});
|
|
1804
|
+
const methodRepartitionSignal = computed(() => {
|
|
1805
|
+
return repartitionsSignal.value.methodRepartition;
|
|
1806
|
+
});
|
|
1807
|
+
const packageRepartitionSignal = computed(() => {
|
|
1808
|
+
return repartitionsSignal.value.packageRepartition;
|
|
1809
|
+
});
|
|
1810
|
+
const availableMethodNamesSignal = computed(() => {
|
|
1811
|
+
return Object.keys(methodRepartitionSignal.value);
|
|
1812
|
+
});
|
|
1813
|
+
const availablePackageNamesSignal = computed(() => {
|
|
1814
|
+
return Object.keys(packageRepartitionSignal.value);
|
|
1815
|
+
});
|
|
1816
|
+
|
|
1817
|
+
const loadRoutes = async () => {
|
|
1818
|
+
routesLoadingSignal.value = true;
|
|
1819
|
+
routeLoadingErrorSignal.value = null;
|
|
1820
|
+
try {
|
|
1821
|
+
const response = await fetch("/.internal/routes.json");
|
|
1822
|
+
const routes = await response.json();
|
|
1823
|
+
routesLoadingSignal.value = false;
|
|
1824
|
+
routesSignal.value = routes;
|
|
1825
|
+
} catch (e) {
|
|
1826
|
+
routesLoadingSignal.value = false;
|
|
1827
|
+
routeLoadingErrorSignal.value = e;
|
|
1828
|
+
throw e;
|
|
1829
|
+
}
|
|
1830
|
+
};
|
|
1831
|
+
loadRoutes();
|
|
1832
|
+
|
|
1833
|
+
const Sidebar = () => {
|
|
1834
|
+
const routes = routesSignal.value;
|
|
1835
|
+
if (routes.length === 0) {
|
|
1836
|
+
return null;
|
|
1837
|
+
}
|
|
1838
|
+
return html` <${FiltersPanel} routes=${routes} /> `;
|
|
1839
|
+
};
|
|
1840
|
+
|
|
1841
|
+
const App = () => {
|
|
1842
|
+
return html` <${RouteList} /> `;
|
|
1843
|
+
};
|
|
1844
|
+
const ProgressBar = ({ width = "100%", height = 6, loading }) => {
|
|
1845
|
+
if (!loading) {
|
|
1846
|
+
return null;
|
|
1847
|
+
}
|
|
1848
|
+
return html`
|
|
1849
|
+
<div
|
|
1850
|
+
class="progress-bar"
|
|
1851
|
+
style=${{
|
|
1852
|
+
width: typeof Number(width) === "number" ? `${width}px` : width,
|
|
1853
|
+
height:
|
|
1854
|
+
typeof Number(height) === "number" ? `${height}px` : height,
|
|
1855
|
+
}}
|
|
1856
|
+
>
|
|
1857
|
+
<div class="progress-container progress-indeterminate">
|
|
1858
|
+
<div class="progress-bar-long"></div>
|
|
1859
|
+
<div class="progress-bar-short"></div>
|
|
1860
|
+
</div>
|
|
1861
|
+
</div>
|
|
1862
|
+
`;
|
|
1863
|
+
};
|
|
1864
|
+
const RouteList = () => {
|
|
1865
|
+
const routes = routesSignal.value;
|
|
1866
|
+
const loading = routesLoadingSignal.value;
|
|
1867
|
+
const routeLoadingError = routeLoadingErrorSignal.value;
|
|
1868
|
+
|
|
1869
|
+
if (loading) {
|
|
1870
|
+
return html`<${ProgressBar} width="150" loading=${true} />`;
|
|
1871
|
+
}
|
|
1872
|
+
|
|
1873
|
+
if (routeLoadingError) {
|
|
1874
|
+
return html`<p>
|
|
1875
|
+
Error loading routes: ${routeLoadingError.message}
|
|
1876
|
+
</p>`;
|
|
1877
|
+
}
|
|
1878
|
+
|
|
1879
|
+
if (!routes || routes.length === 0) {
|
|
1880
|
+
return html`<p>No routes configured.</p>`;
|
|
1881
|
+
}
|
|
1882
|
+
|
|
1883
|
+
return html`<div class="route_container">
|
|
1884
|
+
<div class="route_list">
|
|
1885
|
+
${routes.map((route) => html`<${RouteDetails} ...${route} />`)}
|
|
1886
|
+
</div>
|
|
1887
|
+
</div>`;
|
|
1888
|
+
};
|
|
1889
|
+
|
|
1890
|
+
const documentUrlSignal = signal(window.location.href);
|
|
1891
|
+
window.addEventListener("popstate", async (popstateEvent) => {
|
|
1892
|
+
documentUrlSignal.value = popstateEvent.target.location.href;
|
|
1893
|
+
});
|
|
1894
|
+
const goTo = (url, { replace } = {}) => {
|
|
1895
|
+
if (replace) {
|
|
1896
|
+
window.history.replaceState(null, null, url);
|
|
1897
|
+
documentUrlSignal.value = url;
|
|
1898
|
+
} else {
|
|
1899
|
+
window.history.pushState(null, null, url);
|
|
1900
|
+
documentUrlSignal.value = url;
|
|
1901
|
+
}
|
|
1902
|
+
};
|
|
1903
|
+
goTo(window.location.href, { replace: true });
|
|
1904
|
+
|
|
1905
|
+
let useUrlStringParam;
|
|
1906
|
+
url_string_param: {
|
|
1907
|
+
useUrlStringParam = (name, { availableValues } = {}) => {
|
|
1908
|
+
const urlStringParamSignal = signalForUrlParam(name, (url) => {
|
|
1909
|
+
return new URL(url).searchParams.get(name);
|
|
1910
|
+
});
|
|
1911
|
+
const urlStringParam = urlStringParamSignal.value;
|
|
1912
|
+
let value;
|
|
1913
|
+
if (urlStringParam) {
|
|
1914
|
+
value = urlStringParam;
|
|
1915
|
+
if (availableValues && !availableValues.includes(value)) {
|
|
1916
|
+
value = "";
|
|
1917
|
+
}
|
|
1918
|
+
} else {
|
|
1919
|
+
value = "";
|
|
1920
|
+
}
|
|
1921
|
+
|
|
1922
|
+
const set = useCallback(
|
|
1923
|
+
(newValue) => {
|
|
1924
|
+
const urlObject = new URL(documentUrlSignal.peek());
|
|
1925
|
+
const { searchParams } = urlObject;
|
|
1926
|
+
if (!newValue) {
|
|
1927
|
+
searchParams.delete(name);
|
|
1928
|
+
const urlWithoutStringParam = urlObject.href;
|
|
1929
|
+
if (urlWithoutStringParam !== window.location.href) {
|
|
1930
|
+
goTo(urlWithoutStringParam);
|
|
1931
|
+
}
|
|
1932
|
+
return;
|
|
1933
|
+
}
|
|
1934
|
+
if (availableValues && !availableValues.includes(newValue)) {
|
|
1935
|
+
return;
|
|
1936
|
+
}
|
|
1937
|
+
searchParams.set(name, newValue);
|
|
1938
|
+
const urlWithStringParam = urlObject.href;
|
|
1939
|
+
if (urlWithStringParam !== window.location.href) {
|
|
1940
|
+
goTo(urlWithStringParam);
|
|
1941
|
+
}
|
|
1942
|
+
return;
|
|
1943
|
+
},
|
|
1944
|
+
[name],
|
|
1945
|
+
);
|
|
1946
|
+
return [value, set];
|
|
1947
|
+
};
|
|
1948
|
+
|
|
1949
|
+
const urlParamSignalMap = new Map();
|
|
1950
|
+
// can be called multiple times by hooks
|
|
1951
|
+
const signalForUrlParam = (name, getter) => {
|
|
1952
|
+
const existingSignal = urlParamSignalMap.get(name);
|
|
1953
|
+
if (existingSignal) {
|
|
1954
|
+
return existingSignal;
|
|
1955
|
+
}
|
|
1956
|
+
const signalForFirstCall = computed(() => {
|
|
1957
|
+
const url = documentUrlSignal.value;
|
|
1958
|
+
const valueInUrl = getter(url);
|
|
1959
|
+
return valueInUrl;
|
|
1960
|
+
});
|
|
1961
|
+
urlParamSignalMap.set(name, signalForFirstCall);
|
|
1962
|
+
return signalForFirstCall;
|
|
1963
|
+
};
|
|
1964
|
+
}
|
|
1965
|
+
|
|
1966
|
+
const useMethodUrlStringParam = () => {
|
|
1967
|
+
const availableMethodNames = availableMethodNamesSignal.value;
|
|
1968
|
+
return useUrlStringParam("method", {
|
|
1969
|
+
availableValues: availableMethodNames,
|
|
1970
|
+
});
|
|
1971
|
+
};
|
|
1972
|
+
|
|
1973
|
+
const usePackageUrlStringParam = () => {
|
|
1974
|
+
const availablePackageNames = availablePackageNamesSignal.value;
|
|
1975
|
+
return useUrlStringParam("package", {
|
|
1976
|
+
availableValues: availablePackageNames,
|
|
1977
|
+
});
|
|
1978
|
+
};
|
|
1979
|
+
|
|
1980
|
+
let FiltersPanel;
|
|
1981
|
+
filters: {
|
|
1982
|
+
FiltersPanel = ({ routes }) => {
|
|
1983
|
+
return html`
|
|
1984
|
+
<div class="filter_container">
|
|
1985
|
+
<div class="filter_list">
|
|
1986
|
+
<div class="filter_item">
|
|
1987
|
+
<${MethodFilter} routes=${routes} />
|
|
1988
|
+
</div>
|
|
1989
|
+
<div class="filter_item">
|
|
1990
|
+
<${PackageFilter} routes=${routes} />
|
|
1991
|
+
</div>
|
|
1992
|
+
</div>
|
|
1993
|
+
</div>
|
|
1994
|
+
`;
|
|
1995
|
+
};
|
|
1996
|
+
const MethodFilter = ({ routes }) => {
|
|
1997
|
+
const availableMethodNames = availableMethodNamesSignal.value;
|
|
1998
|
+
const availableMethodRepartition = methodRepartitionSignal.value;
|
|
1999
|
+
const [selectedMethod, setSelectedMethod] = useMethodUrlStringParam();
|
|
2000
|
+
|
|
2001
|
+
// "all" border image is a combination of available method colors
|
|
2002
|
+
const getMethodColor = (methodName) => {
|
|
2003
|
+
const bodyStyle = window.getComputedStyle(document.body);
|
|
2004
|
+
const methodColor = bodyStyle.getPropertyValue(
|
|
2005
|
+
`--method-${methodName.toLowerCase()}-color`,
|
|
2006
|
+
);
|
|
2007
|
+
return methodColor;
|
|
2008
|
+
};
|
|
2009
|
+
const percentagePerColor = Math.floor(
|
|
2010
|
+
100 / (availableMethodNames.length - 1),
|
|
2011
|
+
);
|
|
2012
|
+
const gradientSteps = [];
|
|
2013
|
+
let progress = 0;
|
|
2014
|
+
let index = 0;
|
|
2015
|
+
for (const methodName of availableMethodNames) {
|
|
2016
|
+
if (index === availableMethodNames.length - 1) {
|
|
2017
|
+
progress = 100;
|
|
2018
|
+
}
|
|
2019
|
+
gradientSteps.push(`${getMethodColor(methodName)} ${progress}%`);
|
|
2020
|
+
progress += percentagePerColor;
|
|
2021
|
+
index++;
|
|
2022
|
+
}
|
|
2023
|
+
const gradient = `linear-gradient(to bottom, ${gradientSteps.join(", ")})`;
|
|
2024
|
+
|
|
2025
|
+
const options = [
|
|
2026
|
+
{
|
|
2027
|
+
value: "",
|
|
2028
|
+
text: html`
|
|
2029
|
+
<span
|
|
2030
|
+
class="filter_text"
|
|
2031
|
+
data-method="all"
|
|
2032
|
+
style=${{
|
|
2033
|
+
borderImageSource: gradient,
|
|
2034
|
+
}}
|
|
2035
|
+
>all</span
|
|
2036
|
+
>
|
|
2037
|
+
<span class="filter_count">${routes.length}</span>
|
|
2038
|
+
`,
|
|
2039
|
+
selected: !selectedMethod,
|
|
2040
|
+
},
|
|
2041
|
+
...availableMethodNames.map((availableMethodName) => {
|
|
2042
|
+
return {
|
|
2043
|
+
value: availableMethodName,
|
|
2044
|
+
text: html`
|
|
2045
|
+
<span class="filter_text" data-method="${availableMethodName}"
|
|
2046
|
+
>${availableMethodName}
|
|
2047
|
+
</span>
|
|
2048
|
+
<span class="filter_count">
|
|
2049
|
+
${availableMethodRepartition[availableMethodName]}
|
|
2050
|
+
</span>
|
|
2051
|
+
`,
|
|
2052
|
+
selected: availableMethodName === selectedMethod,
|
|
2053
|
+
};
|
|
2054
|
+
}),
|
|
2055
|
+
];
|
|
2056
|
+
|
|
2057
|
+
return html`
|
|
2058
|
+
<${FilterSelector}
|
|
2059
|
+
label="Methods"
|
|
2060
|
+
options=${options}
|
|
2061
|
+
onChange=${(methodToSelect) => {
|
|
2062
|
+
setSelectedMethod(methodToSelect);
|
|
2063
|
+
}}
|
|
2064
|
+
/>
|
|
2065
|
+
`;
|
|
2066
|
+
};
|
|
2067
|
+
const PackageFilter = ({ routes }) => {
|
|
2068
|
+
const availablePackageNames = availablePackageNamesSignal.value;
|
|
2069
|
+
const packageRepartition = packageRepartitionSignal.value;
|
|
2070
|
+
const [selectedPackageName, setSelectedPackageName] =
|
|
2071
|
+
usePackageUrlStringParam();
|
|
2072
|
+
|
|
2073
|
+
const options = [
|
|
2074
|
+
{
|
|
2075
|
+
value: "",
|
|
2076
|
+
text: html`<span>all</span>
|
|
2077
|
+
<span class="filter_count">${routes.length}</span>`,
|
|
2078
|
+
selected: !selectedPackageName,
|
|
2079
|
+
},
|
|
2080
|
+
...availablePackageNames.map((availablePackageName) => {
|
|
2081
|
+
return {
|
|
2082
|
+
value: availablePackageName,
|
|
2083
|
+
text: html` <span
|
|
2084
|
+
class="filter_text"
|
|
2085
|
+
title="${availablePackageName}"
|
|
2086
|
+
>${availablePackageName}</span
|
|
2087
|
+
>
|
|
2088
|
+
<span class="filter_count"
|
|
2089
|
+
>${packageRepartition[availablePackageName]}</span
|
|
2090
|
+
>`,
|
|
2091
|
+
selected: availablePackageName === selectedPackageName,
|
|
2092
|
+
};
|
|
2093
|
+
}),
|
|
2094
|
+
];
|
|
2095
|
+
return html`
|
|
2096
|
+
<${FilterSelector}
|
|
2097
|
+
label="Packages"
|
|
2098
|
+
options=${options}
|
|
2099
|
+
onChange=${(packageNameToSelect) => {
|
|
2100
|
+
setSelectedPackageName(packageNameToSelect);
|
|
2101
|
+
}}
|
|
2102
|
+
/>
|
|
2103
|
+
`;
|
|
2104
|
+
};
|
|
2105
|
+
const FilterSelector = ({
|
|
2106
|
+
label,
|
|
2107
|
+
multiple,
|
|
2108
|
+
options,
|
|
2109
|
+
onChange,
|
|
2110
|
+
actions,
|
|
2111
|
+
}) => {
|
|
2112
|
+
const formRef = useRef();
|
|
2113
|
+
|
|
2114
|
+
return html`<details open class="filter">
|
|
2115
|
+
<summary class="filter_summary">
|
|
2116
|
+
${label}
|
|
2117
|
+
<${ArrowDown} />
|
|
2118
|
+
</summary>
|
|
2119
|
+
<form ref=${formRef} class="filter_form">
|
|
2120
|
+
${options.map((option) => {
|
|
2121
|
+
return html`<label>
|
|
2122
|
+
<input
|
|
2123
|
+
type="${multiple ? "checkbox" : "radio"}"
|
|
2124
|
+
name="${label}"
|
|
2125
|
+
checked=${option.selected}
|
|
2126
|
+
value=${option.value}
|
|
2127
|
+
onChange=${multiple
|
|
2128
|
+
? () => {
|
|
2129
|
+
const formNode = formRef.current;
|
|
2130
|
+
// even if we create a checkbox list the HTML spec
|
|
2131
|
+
// return a radio node list and we have to gather the checked values
|
|
2132
|
+
const radioNodeList = formNode.elements[label];
|
|
2133
|
+
const selectedValues = [];
|
|
2134
|
+
for (const checkboxNode of Array.from(
|
|
2135
|
+
radioNodeList,
|
|
2136
|
+
)) {
|
|
2137
|
+
if (checkboxNode.checked) {
|
|
2138
|
+
selectedValues.push(checkboxNode.value);
|
|
2139
|
+
}
|
|
2140
|
+
}
|
|
2141
|
+
onChange(selectedValues);
|
|
2142
|
+
}
|
|
2143
|
+
: () => {
|
|
2144
|
+
const formNode = formRef.current;
|
|
2145
|
+
const radioNodeList = formNode.elements[label];
|
|
2146
|
+
const selectedValue = radioNodeList.value;
|
|
2147
|
+
onChange(selectedValue);
|
|
2148
|
+
}}
|
|
2149
|
+
/>
|
|
2150
|
+
${option.text}
|
|
2151
|
+
</label>`;
|
|
2152
|
+
})}
|
|
2153
|
+
</form>
|
|
2154
|
+
${
|
|
2155
|
+
actions &&
|
|
2156
|
+
html` <div class="filter_actions">
|
|
2157
|
+
<button
|
|
2158
|
+
type="button"
|
|
2159
|
+
class="filter_button"
|
|
2160
|
+
onClick=${() => {
|
|
2161
|
+
onChange(options.map((option) => option.value));
|
|
2162
|
+
}}
|
|
2163
|
+
>
|
|
2164
|
+
Select All
|
|
2165
|
+
</button>
|
|
2166
|
+
<button
|
|
2167
|
+
type="button"
|
|
2168
|
+
class="filter_button"
|
|
2169
|
+
onClick=${() => {
|
|
2170
|
+
onChange([]);
|
|
2171
|
+
}}
|
|
2172
|
+
>
|
|
2173
|
+
Clear All
|
|
2174
|
+
</button>
|
|
2175
|
+
</div>`
|
|
2176
|
+
}
|
|
2177
|
+
</div>`;
|
|
2178
|
+
};
|
|
2179
|
+
}
|
|
2180
|
+
|
|
2181
|
+
const RouteDetails = ({
|
|
2182
|
+
meta,
|
|
2183
|
+
method,
|
|
2184
|
+
resource,
|
|
2185
|
+
description,
|
|
2186
|
+
availableMediaTypes,
|
|
2187
|
+
availableLanguages,
|
|
2188
|
+
availableVersions,
|
|
2189
|
+
availableEncodings,
|
|
2190
|
+
acceptedMediaTypes,
|
|
2191
|
+
websocket,
|
|
2192
|
+
clientCodeExample,
|
|
2193
|
+
declarationSource,
|
|
2194
|
+
}) => {
|
|
2195
|
+
const [opened, setOpened] = useState(false);
|
|
2196
|
+
const [selectedMethod] = useUrlStringParam("method");
|
|
2197
|
+
const [selectedPackageName] = usePackageUrlStringParam();
|
|
2198
|
+
|
|
2199
|
+
if (selectedMethod && method !== selectedMethod) {
|
|
2200
|
+
return null;
|
|
2201
|
+
}
|
|
2202
|
+
const packageName = meta.packageName || NO_PACKAGE_NAME;
|
|
2203
|
+
if (selectedPackageName && packageName !== selectedPackageName) {
|
|
2204
|
+
return null;
|
|
2205
|
+
}
|
|
2206
|
+
|
|
2207
|
+
return html`<details
|
|
2208
|
+
class="route_details"
|
|
2209
|
+
onToggle=${(e) => {
|
|
2210
|
+
setOpened(e.newState === "open");
|
|
2211
|
+
}}
|
|
2212
|
+
data-method=${method}
|
|
2213
|
+
>
|
|
2214
|
+
<summary>
|
|
2215
|
+
<div class="route_summary_container">
|
|
2216
|
+
<span class="route_method">${method}</span>
|
|
2217
|
+
<p class="route_resource">${resource}</p>
|
|
2218
|
+
<span style="flex:1"></span>
|
|
2219
|
+
<${RouteBadge} meta=${meta} />
|
|
2220
|
+
${opened ? html`<${ArrowUp} />` : html`<${ArrowDown} />`}
|
|
2221
|
+
</div>
|
|
2222
|
+
</summary>
|
|
2223
|
+
<${RouteDetailsContent}
|
|
2224
|
+
method=${method}
|
|
2225
|
+
resource=${resource}
|
|
2226
|
+
description=${description}
|
|
2227
|
+
availableMediaTypes=${availableMediaTypes}
|
|
2228
|
+
availableLanguages=${availableLanguages}
|
|
2229
|
+
availableVersions=${availableVersions}
|
|
2230
|
+
availableEncodings=${availableEncodings}
|
|
2231
|
+
acceptedMediaTypes=${acceptedMediaTypes}
|
|
2232
|
+
websocket=${websocket}
|
|
2233
|
+
clientCodeExample=${clientCodeExample}
|
|
2234
|
+
declarationSource=${declarationSource}
|
|
2235
|
+
meta=${meta}
|
|
2236
|
+
/>
|
|
2237
|
+
</details>`;
|
|
2238
|
+
};
|
|
2239
|
+
|
|
2240
|
+
const RouteBadge = ({ meta }) => {
|
|
2241
|
+
if (!meta.packageName) {
|
|
2242
|
+
return null;
|
|
2243
|
+
}
|
|
2244
|
+
let text = meta.packageName;
|
|
2245
|
+
let title = `This endpoint is declared by ${meta.packageName}`;
|
|
2246
|
+
return html`<span title=${title} class="route_owner_name"
|
|
2247
|
+
>${text}</span
|
|
2248
|
+
>`;
|
|
2249
|
+
};
|
|
2250
|
+
|
|
2251
|
+
const RouteDetailsContent = ({
|
|
2252
|
+
method,
|
|
2253
|
+
resource,
|
|
2254
|
+
description,
|
|
2255
|
+
availableMediaTypes,
|
|
2256
|
+
availableLanguages,
|
|
2257
|
+
availableVersions,
|
|
2258
|
+
availableEncodings,
|
|
2259
|
+
acceptedMediaTypes,
|
|
2260
|
+
websocket,
|
|
2261
|
+
clientCodeExample,
|
|
2262
|
+
declarationSource,
|
|
2263
|
+
meta,
|
|
2264
|
+
}) => {
|
|
2265
|
+
return html`<div class="route_details_content">
|
|
2266
|
+
<${RoutedeclarationSource}
|
|
2267
|
+
meta=${meta}
|
|
2268
|
+
declarationSource=${declarationSource}
|
|
2269
|
+
/>
|
|
2270
|
+
<p style="margin-top: 0"><strong>Description:</strong></p>
|
|
2271
|
+
<p class="route_description">
|
|
2272
|
+
${description || "No description available"}
|
|
2273
|
+
</p>
|
|
2274
|
+
${availableMediaTypes.length > 0 &&
|
|
2275
|
+
html`<${RouteContentNegotiationSection}
|
|
2276
|
+
type="content-type"
|
|
2277
|
+
title="Available media types"
|
|
2278
|
+
availableValues=${availableMediaTypes}
|
|
2279
|
+
/>`}
|
|
2280
|
+
${availableLanguages.length > 0 &&
|
|
2281
|
+
html`<${RouteContentNegotiationSection}
|
|
2282
|
+
type="language"
|
|
2283
|
+
title="Available languages"
|
|
2284
|
+
availableValues=${availableLanguages}
|
|
2285
|
+
/>`}
|
|
2286
|
+
${availableVersions.length > 0 &&
|
|
2287
|
+
html`<${RouteContentNegotiationSection}
|
|
2288
|
+
type="version"
|
|
2289
|
+
title="Available versions"
|
|
2290
|
+
availableValues=${availableVersions}
|
|
2291
|
+
/>`}
|
|
2292
|
+
${availableEncodings.length > 0 &&
|
|
2293
|
+
html`<${RouteContentNegotiationSection}
|
|
2294
|
+
type="encoding"
|
|
2295
|
+
title="Available encodings"
|
|
2296
|
+
availableValues=${availableEncodings}
|
|
2297
|
+
/>`}
|
|
2298
|
+
${acceptedMediaTypes.length > 0 &&
|
|
2299
|
+
html`<${RouteAcceptableContentSection}
|
|
2300
|
+
acceptedMediaTypes=${acceptedMediaTypes}
|
|
2301
|
+
/>`}
|
|
2302
|
+
<p style="margin-bottom:0; font-weight:bold">Example:</p>
|
|
2303
|
+
<${RouteCodeExample}
|
|
2304
|
+
method=${method}
|
|
2305
|
+
resource=${resource}
|
|
2306
|
+
availableMediaTypes=${availableMediaTypes}
|
|
2307
|
+
websocket=${websocket}
|
|
2308
|
+
clientCodeExample=${clientCodeExample}
|
|
2309
|
+
/>
|
|
2310
|
+
</div>`;
|
|
2311
|
+
};
|
|
2312
|
+
const RoutedeclarationSource = ({ meta, declarationSource }) => {
|
|
2313
|
+
if (!declarationSource) {
|
|
2314
|
+
return null;
|
|
2315
|
+
}
|
|
2316
|
+
return html`<p style="margin-top: 0"><strong>Declaration:</strong></p>
|
|
2317
|
+
<p>
|
|
2318
|
+
<${RouteDeclarationText}
|
|
2319
|
+
ownerLink=${meta.ownerLink}
|
|
2320
|
+
declarationLink=${meta.declarationLink}
|
|
2321
|
+
/>
|
|
2322
|
+
</p>`;
|
|
2323
|
+
};
|
|
2324
|
+
const RouteDeclarationText = ({ declarationLink }) => {
|
|
2325
|
+
return html`This route is declared in${" "}
|
|
2326
|
+
<a href="${declarationLink.url}">${declarationLink.text}</a>`;
|
|
2327
|
+
};
|
|
2328
|
+
const RouteContentNegotiationSection = ({
|
|
2329
|
+
type,
|
|
2330
|
+
title,
|
|
2331
|
+
availableValues,
|
|
2332
|
+
}) => {
|
|
2333
|
+
return html`<div class="route_content_nego" data-nego-type="${type}">
|
|
2334
|
+
<p class="route_content_nego_title">${title}:</p>
|
|
2335
|
+
<ul>
|
|
2336
|
+
${availableValues.map(
|
|
2337
|
+
(availableValue) => html`<li>${availableValue}</li>`,
|
|
2338
|
+
)}
|
|
2339
|
+
</ul>
|
|
2340
|
+
</div>`;
|
|
2341
|
+
};
|
|
2342
|
+
const RouteAcceptableContentSection = ({ acceptedMediaTypes }) => {
|
|
2343
|
+
return html`<div class="route_accepted_content_type">
|
|
2344
|
+
<p><strong>Accepted content types:</strong></p>
|
|
2345
|
+
<ul>
|
|
2346
|
+
${acceptedMediaTypes.map(
|
|
2347
|
+
(acceptedMediaType) => html`<li>${acceptedMediaType}</li>`,
|
|
2348
|
+
)}
|
|
2349
|
+
</ul>
|
|
2350
|
+
</div>`;
|
|
2351
|
+
};
|
|
2352
|
+
|
|
2353
|
+
const RouteCodeExample = ({
|
|
2354
|
+
method,
|
|
2355
|
+
resource,
|
|
2356
|
+
availableMediaTypes,
|
|
2357
|
+
websocket,
|
|
2358
|
+
clientCodeExample,
|
|
2359
|
+
}) => {
|
|
2360
|
+
let jsSource;
|
|
2361
|
+
if (clientCodeExample) {
|
|
2362
|
+
jsSource = clientCodeExample;
|
|
2363
|
+
} else if (websocket) {
|
|
2364
|
+
const websocketScheme =
|
|
2365
|
+
self.location.protocol === "https:" ? "wss" : "ws";
|
|
2366
|
+
const websocketOrigin = `${websocketScheme}://${self.location.host}`;
|
|
2367
|
+
jsSource = /*js */ `
|
|
2368
|
+
const websocket = new WebSocket("${websocketOrigin}${resource}");
|
|
2369
|
+
websocket.onerror = () => {
|
|
2370
|
+
console.error("Failed to connect to websocket endpoint");
|
|
2371
|
+
};
|
|
2372
|
+
websocket.onopen = () => {
|
|
2373
|
+
console.info("Connected to websocket endpoint")
|
|
2374
|
+
};
|
|
2375
|
+
websocket.onmessage = (event) => {
|
|
2376
|
+
console.log("Received message", event.data);
|
|
2377
|
+
};
|
|
2378
|
+
`;
|
|
2379
|
+
} else {
|
|
2380
|
+
let fetchLine;
|
|
2381
|
+
if (method === "GET") {
|
|
2382
|
+
fetchLine = `const response = await window.fetch("${resource}");`;
|
|
2383
|
+
} else {
|
|
2384
|
+
fetchLine = `const response = await window.fetch("${resource}", {
|
|
2385
|
+
method: "${method}",
|
|
2386
|
+
}`;
|
|
2387
|
+
}
|
|
2388
|
+
let readResponseLine;
|
|
2389
|
+
if (availableMediaTypes.includes("application/json")) {
|
|
2390
|
+
readResponseLine = `const json = await response.json();`;
|
|
2391
|
+
} else {
|
|
2392
|
+
readResponseLine = `const text = await response.text();`;
|
|
2393
|
+
}
|
|
2394
|
+
|
|
2395
|
+
jsSource = /*js */ `
|
|
2396
|
+
${fetchLine}
|
|
2397
|
+
${readResponseLine}
|
|
2398
|
+
`;
|
|
2399
|
+
}
|
|
2400
|
+
|
|
2401
|
+
return html`<code-block lang="js" data-escaped data-copy-button
|
|
2402
|
+
>${jsSource}</code-block
|
|
2403
|
+
>`;
|
|
2404
|
+
};
|
|
2405
|
+
|
|
2406
|
+
const ArrowDown = () => {
|
|
2407
|
+
return html`<svg
|
|
2408
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2409
|
+
viewBox="0 -960 960 960"
|
|
2410
|
+
width="24"
|
|
2411
|
+
height="24"
|
|
2412
|
+
fill="currentColor"
|
|
2413
|
+
class="arrow_down"
|
|
2414
|
+
>
|
|
2415
|
+
<path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" />
|
|
2416
|
+
</svg>`;
|
|
2417
|
+
};
|
|
2418
|
+
const ArrowUp = () => {
|
|
2419
|
+
return html`<svg
|
|
2420
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2421
|
+
viewBox="0 -960 960 960"
|
|
2422
|
+
width="24"
|
|
2423
|
+
height="24"
|
|
2424
|
+
fill="currentColor"
|
|
2425
|
+
class="arrow_up"
|
|
2426
|
+
>
|
|
2427
|
+
<path d="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z" />
|
|
2428
|
+
</svg>`;
|
|
2429
|
+
};
|
|
2430
|
+
|
|
2431
|
+
render(html`<${Sidebar} />`, document.querySelector("aside"));
|
|
2432
|
+
render(html`<${App} />`, document.querySelector("#app"));
|
|
2433
|
+
</script>
|
|
2434
|
+
</body>
|
|
2435
|
+
</html>
|