@salesforcedevs/docs-components 1.29.0-alpha1 → 1.30.1-node22-2

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/LICENSE ADDED
@@ -0,0 +1,12 @@
1
+ Copyright (c) 2020, Salesforce.com, Inc.
2
+ All rights reserved.
3
+
4
+ Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
5
+
6
+ * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
7
+
8
+ * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
9
+
10
+ * Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
11
+
12
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
package/lwc.config.json CHANGED
@@ -5,7 +5,6 @@
5
5
  { "npm": "@salesforcedevs/dw-components" }
6
6
  ],
7
7
  "expose": [
8
- "doc/apiPlayground",
9
8
  "doc/amfReference",
10
9
  "doc/breadcrumbs",
11
10
  "doc/componentPlayground",
package/package.json CHANGED
@@ -1,29 +1,33 @@
1
1
  {
2
- "name": "@salesforcedevs/docs-components",
3
- "version": "1.29.0-alpha1",
4
- "description": "Docs Lightning web components for DSC",
5
- "license": "MIT",
6
- "main": "index.js",
7
- "engines": {
8
- "node": "20.x"
9
- },
10
- "publishConfig": {
11
- "access": "public"
12
- },
13
- "dependencies": {
14
- "@api-components/amf-helper-mixin": "4.5.29",
15
- "classnames": "2.5.1",
16
- "dompurify": "3.2.4",
17
- "kagekiri": "1.4.2",
18
- "lodash.orderby": "4.6.0",
19
- "lodash.uniqby": "4.7.0",
20
- "query-string": "7.1.3",
21
- "sentence-case": "3.0.4"
22
- },
23
- "devDependencies": {
24
- "@types/classnames": "2.3.1",
25
- "@types/lodash.orderby": "4.6.9",
26
- "@types/lodash.uniqby": "4.7.9"
27
- },
28
- "stableVersion": "1.29.0-alpha1"
29
- }
2
+ "name": "@salesforcedevs/docs-components",
3
+ "version": "1.30.1-node22-2",
4
+ "description": "Docs Lightning web components for DSC",
5
+ "license": "MIT",
6
+ "main": "index.js",
7
+ "engines": {
8
+ "node": ">=22.0.0"
9
+ },
10
+ "volta": {
11
+ "node": "22.22.0",
12
+ "yarn": "1.22.22"
13
+ },
14
+ "publishConfig": {
15
+ "access": "public"
16
+ },
17
+ "dependencies": {
18
+ "@api-components/amf-helper-mixin": "4.5.29",
19
+ "classnames": "2.5.1",
20
+ "dompurify": "3.2.4",
21
+ "kagekiri": "1.4.2",
22
+ "lodash.orderby": "4.6.0",
23
+ "lodash.uniqby": "4.7.0",
24
+ "query-string": "7.1.3",
25
+ "sentence-case": "3.0.4"
26
+ },
27
+ "devDependencies": {
28
+ "@types/classnames": "2.3.1",
29
+ "@types/lodash.orderby": "4.6.9",
30
+ "@types/lodash.uniqby": "4.7.9"
31
+ },
32
+ "gitHead": "db460ac1fb9b1f752d0c129dfe19012c8a085867"
33
+ }
@@ -3,11 +3,8 @@ import { createElement, LightningElement, api } from "lwc";
3
3
  import DocPhase from "doc/phase";
4
4
  import DxFooter from "dx/footer";
5
5
  import SprigSurvey from "doc/sprigSurvey";
6
- import ApiPlayground from "doc/apiPlayground";
7
6
  import { throttle } from "throttle-debounce";
8
7
  import { pollUntil } from "dxUtils/async";
9
- import { parseOpenApiSpec } from "docUtils/openApiParser";
10
- import type { OperationDefinition } from "docUtils/openApiParser";
11
8
 
12
9
  declare global {
13
10
  interface Window {
@@ -43,10 +40,6 @@ export default class RedocReference extends LightningElement {
43
40
 
44
41
  showError = false;
45
42
 
46
- private parsedOperations: OperationDefinition[] = [];
47
- private openApiSpec: any = null;
48
- private playgroundInstances: Map<string, HTMLElement> = new Map();
49
-
50
43
  @api
51
44
  get referenceConfig(): ReferenceConfig {
52
45
  return this._referenceConfig;
@@ -106,7 +99,6 @@ export default class RedocReference extends LightningElement {
106
99
  // Clean up cached DOM element references to prevent memory leaks
107
100
  this.docHeaderElement = null;
108
101
  this.docPhaseWrapperElement = null;
109
- this.playgroundInstances.clear();
110
102
  }
111
103
 
112
104
  // Displays error UI and logs error message for debugging
@@ -254,8 +246,6 @@ export default class RedocReference extends LightningElement {
254
246
  return;
255
247
  }
256
248
 
257
- this.fetchAndParseSpec(specUrl);
258
-
259
249
  window.Redoc.init(
260
250
  specUrl,
261
251
  {
@@ -316,7 +306,6 @@ export default class RedocReference extends LightningElement {
316
306
  // Wait for footer to be rendered before updating styles
317
307
  requestAnimationFrame(() => {
318
308
  this.updateRedocThirdColumnStyle(redocContainer);
319
- this.injectTryItButtons();
320
309
 
321
310
  // Fix initial hash scroll after doc phase insertion
322
311
  this.handleInitialHashScrollFix();
@@ -421,114 +410,6 @@ export default class RedocReference extends LightningElement {
421
410
  );
422
411
  }
423
412
 
424
- // Fetches and parses the OpenAPI spec for Try It playground
425
- private async fetchAndParseSpec(specUrl: string): Promise<void> {
426
- try {
427
- const response = await fetch(specUrl);
428
- if (!response.ok) {
429
- return;
430
- }
431
- this.openApiSpec = await response.json();
432
- this.parsedOperations = parseOpenApiSpec(this.openApiSpec);
433
- } catch {
434
- // Non-fatal: playground simply won't be available
435
- }
436
- }
437
-
438
- // Injects "Try It" toggle buttons into Redoc operation sections
439
- private injectTryItButtons(): void {
440
- if (this.parsedOperations.length === 0) {
441
- return;
442
- }
443
-
444
- const redocContainer = this.getRedocContainer();
445
- if (!redocContainer) {
446
- return;
447
- }
448
-
449
- for (const operation of this.parsedOperations) {
450
- const sectionId = `operation/${operation.operationId}`;
451
- const section = redocContainer.querySelector(
452
- `[data-section-id="${sectionId}"]`
453
- );
454
- if (!section) {
455
- continue;
456
- }
457
-
458
- // Skip if button already injected
459
- if (section.querySelector(".try-it-toggle")) {
460
- continue;
461
- }
462
-
463
- const button = document.createElement("button");
464
- button.className = "try-it-toggle";
465
- button.textContent = "Try It";
466
- button.setAttribute("type", "button");
467
- button.setAttribute("aria-expanded", "false");
468
- button.style.cssText =
469
- "display:inline-flex;align-items:center;gap:4px;padding:4px 12px;" +
470
- "border:1px solid #0070d2;border-radius:4px;background:#fff;color:#0070d2;" +
471
- "font-size:12px;font-weight:600;cursor:pointer;margin-left:12px;vertical-align:middle;";
472
- button.addEventListener("click", () => {
473
- this.togglePlayground(operation, section as HTMLElement);
474
- });
475
-
476
- // Insert button after the first heading or at the start
477
- const heading = section.querySelector("h1, h2, h3");
478
- if (heading?.parentElement) {
479
- heading.parentElement.insertBefore(
480
- button,
481
- heading.nextSibling
482
- );
483
- } else {
484
- section.insertBefore(button, section.firstChild);
485
- }
486
- }
487
- }
488
-
489
- // Toggles the playground panel for an operation section
490
- private togglePlayground(
491
- operation: OperationDefinition,
492
- section: HTMLElement
493
- ): void {
494
- const operationId = operation.operationId;
495
- const existingWrapper = this.playgroundInstances.get(operationId);
496
-
497
- if (existingWrapper) {
498
- const isHidden = existingWrapper.style.display === "none";
499
- existingWrapper.style.display = isHidden ? "block" : "none";
500
-
501
- const button = section.querySelector(".try-it-toggle");
502
- if (button) {
503
- button.setAttribute(
504
- "aria-expanded",
505
- isHidden ? "true" : "false"
506
- );
507
- }
508
- return;
509
- }
510
-
511
- const wrapper = document.createElement("div");
512
- wrapper.className = "try-it-playground-wrapper";
513
-
514
- const playgroundElement = createElement("doc-api-playground", {
515
- is: ApiPlayground
516
- });
517
- Object.assign(playgroundElement, {
518
- operation,
519
- spec: this.openApiSpec
520
- });
521
-
522
- wrapper.appendChild(playgroundElement);
523
- section.appendChild(wrapper);
524
- this.playgroundInstances.set(operationId, wrapper);
525
-
526
- const button = section.querySelector(".try-it-toggle");
527
- if (button) {
528
- button.setAttribute("aria-expanded", "true");
529
- }
530
- }
531
-
532
413
  // Fixes initial hash scroll positioning after doc phase insertion
533
414
  private handleInitialHashScrollFix(): void {
534
415
  const hash = window.location.hash;
@@ -53,7 +53,7 @@
53
53
  </doc-content-layout>
54
54
  <div lwc:if={display404}>
55
55
  <dx-error
56
- image="https://a.sfdcstatic.com/developer-website/prod/images/404.svg"
56
+ image="https://developer.salesforce.com/ns-assets/images/404.svg"
57
57
  code="404"
58
58
  header="Beep boop. That did not compute."
59
59
  subtitle="The document you're looking for doesn't seem to exist."
@@ -1,186 +0,0 @@
1
- :host {
2
- display: block;
3
- }
4
-
5
- .playground-container {
6
- border: 1px solid var(--dx-g-color-border-primary, #e0e0e0);
7
- border-radius: 8px;
8
- padding: 20px;
9
- margin: 16px 0;
10
- background: var(--dx-g-color-surface-primary, #ffffff);
11
- }
12
-
13
- .playground-header {
14
- display: flex;
15
- align-items: center;
16
- gap: 12px;
17
- margin-bottom: 20px;
18
- }
19
-
20
- .method-badge {
21
- display: inline-block;
22
- padding: 4px 10px;
23
- border-radius: 4px;
24
- font-size: 12px;
25
- font-weight: 700;
26
- text-transform: uppercase;
27
- color: #fff;
28
- letter-spacing: 0.5px;
29
- }
30
-
31
- .method-get {
32
- background-color: #61affe;
33
- }
34
-
35
- .method-post {
36
- background-color: #49cc90;
37
- }
38
-
39
- .method-put {
40
- background-color: #fca130;
41
- }
42
-
43
- .method-delete {
44
- background-color: #f93e3e;
45
- }
46
-
47
- .method-patch {
48
- background-color: #50e3c2;
49
- }
50
-
51
- .method-options,
52
- .method-head {
53
- background-color: #9012fe;
54
- }
55
-
56
- .operation-path {
57
- font-family: var(--dx-g-font-family-mono, monospace);
58
- font-size: 14px;
59
- font-weight: 600;
60
- color: var(--dx-g-color-text-primary, #181818);
61
- }
62
-
63
- .params-section {
64
- margin-bottom: 16px;
65
- }
66
-
67
- .section-title {
68
- font-size: 13px;
69
- font-weight: 600;
70
- margin: 0 0 8px 0;
71
- color: var(--dx-g-color-text-secondary, #444);
72
- text-transform: uppercase;
73
- letter-spacing: 0.5px;
74
- }
75
-
76
- .field-group {
77
- margin-bottom: 12px;
78
- }
79
-
80
- .field-label {
81
- display: block;
82
- font-size: 13px;
83
- font-weight: 500;
84
- margin-bottom: 4px;
85
- color: var(--dx-g-color-text-primary, #181818);
86
- }
87
-
88
- .required-marker {
89
- color: #f93e3e;
90
- margin-left: 2px;
91
- }
92
-
93
- .field-input,
94
- .server-select {
95
- width: 100%;
96
- padding: 8px 12px;
97
- border: 1px solid var(--dx-g-color-border-primary, #e0e0e0);
98
- border-radius: 4px;
99
- font-size: 14px;
100
- font-family: var(--dx-g-font-family-mono, monospace);
101
- background: var(--dx-g-color-surface-primary, #ffffff);
102
- color: var(--dx-g-color-text-primary, #181818);
103
- box-sizing: border-box;
104
- }
105
-
106
- .field-input:focus,
107
- .server-select:focus {
108
- outline: none;
109
- border-color: var(--dx-g-color-brand, #0070d2);
110
- box-shadow: 0 0 0 1px var(--dx-g-color-brand, #0070d2);
111
- }
112
-
113
- .body-textarea {
114
- width: 100%;
115
- padding: 8px 12px;
116
- border: 1px solid var(--dx-g-color-border-primary, #e0e0e0);
117
- border-radius: 4px;
118
- font-size: 13px;
119
- font-family: var(--dx-g-font-family-mono, monospace);
120
- background: var(--dx-g-color-surface-primary, #ffffff);
121
- color: var(--dx-g-color-text-primary, #181818);
122
- resize: vertical;
123
- box-sizing: border-box;
124
- }
125
-
126
- .body-textarea:focus {
127
- outline: none;
128
- border-color: var(--dx-g-color-brand, #0070d2);
129
- box-shadow: 0 0 0 1px var(--dx-g-color-brand, #0070d2);
130
- }
131
-
132
- .actions {
133
- margin: 16px 0;
134
- }
135
-
136
- .error-display {
137
- margin-top: 16px;
138
- padding: 12px;
139
- border-radius: 4px;
140
- background-color: #fef0ef;
141
- border: 1px solid #f93e3e;
142
- }
143
-
144
- .error-message {
145
- color: #c23934;
146
- font-size: 13px;
147
- margin: 0;
148
- }
149
-
150
- .response-section {
151
- margin-top: 16px;
152
- }
153
-
154
- .response-header {
155
- display: flex;
156
- align-items: center;
157
- gap: 12px;
158
- margin-bottom: 8px;
159
- }
160
-
161
- .status-code {
162
- font-weight: 700;
163
- font-size: 14px;
164
- padding: 2px 8px;
165
- border-radius: 4px;
166
- }
167
-
168
- .status-success {
169
- color: #256029;
170
- background-color: #e6f9ec;
171
- }
172
-
173
- .status-client-error {
174
- color: #974b00;
175
- background-color: #fff3e0;
176
- }
177
-
178
- .status-server-error {
179
- color: #c23934;
180
- background-color: #fef0ef;
181
- }
182
-
183
- .response-duration {
184
- font-size: 12px;
185
- color: var(--dx-g-color-text-tertiary, #999);
186
- }
@@ -1,136 +0,0 @@
1
- <template>
2
- <div class="playground-container">
3
- <div class="playground-header">
4
- <span class={methodBadgeClass}>{operation.method}</span>
5
- <span class="operation-path">{operation.path}</span>
6
- </div>
7
-
8
- <template lwc:if={showServerSelector}>
9
- <div class="field-group">
10
- <label class="field-label" for="server-select">Server</label>
11
- <select id="server-select" class="server-select" aria-label="Server" onchange={handleServerChange}>
12
- <template for:each={serverOptions} for:item="server">
13
- <option key={server.value} value={server.value}>
14
- {server.label}
15
- </option>
16
- </template>
17
- </select>
18
- </div>
19
- </template>
20
-
21
- <template lwc:if={hasPathParams}>
22
- <div class="params-section">
23
- <h4 class="section-title">Path Parameters</h4>
24
- <template for:each={pathParams} for:item="param">
25
- <div class="field-group" key={param.name}>
26
- <label class="field-label">
27
- {param.name}
28
- <template lwc:if={param.required}>
29
- <span class="required-marker">*</span>
30
- </template>
31
- </label>
32
- <input
33
- type="text"
34
- class="field-input"
35
- data-param={param.name}
36
- value={param.value}
37
- placeholder={param.description}
38
- onchange={handleParamChange}
39
- />
40
- </div>
41
- </template>
42
- </div>
43
- </template>
44
-
45
- <template lwc:if={hasQueryParams}>
46
- <div class="params-section">
47
- <h4 class="section-title">Query Parameters</h4>
48
- <template for:each={queryParams} for:item="param">
49
- <div class="field-group" key={param.name}>
50
- <label class="field-label">
51
- {param.name}
52
- <template lwc:if={param.required}>
53
- <span class="required-marker">*</span>
54
- </template>
55
- </label>
56
- <input
57
- type="text"
58
- class="field-input"
59
- data-param={param.name}
60
- value={param.value}
61
- placeholder={param.description}
62
- onchange={handleParamChange}
63
- />
64
- </div>
65
- </template>
66
- </div>
67
- </template>
68
-
69
- <template lwc:if={hasHeaderParams}>
70
- <div class="params-section">
71
- <h4 class="section-title">Headers</h4>
72
- <template for:each={headerParams} for:item="param">
73
- <div class="field-group" key={param.name}>
74
- <label class="field-label">
75
- {param.name}
76
- <template lwc:if={param.required}>
77
- <span class="required-marker">*</span>
78
- </template>
79
- </label>
80
- <input
81
- type="text"
82
- class="field-input"
83
- data-param={param.name}
84
- value={param.value}
85
- placeholder={param.description}
86
- onchange={handleParamChange}
87
- />
88
- </div>
89
- </template>
90
- </div>
91
- </template>
92
-
93
- <template lwc:if={hasRequestBody}>
94
- <div class="params-section">
95
- <h4 class="section-title">Request Body</h4>
96
- <textarea
97
- class="body-textarea"
98
- value={requestBody}
99
- onchange={handleBodyChange}
100
- rows="8"
101
- ></textarea>
102
- </div>
103
- </template>
104
-
105
- <div class="actions">
106
- <dx-button
107
- variant="brand"
108
- onclick={handleSendRequest}
109
- disabled={loading}
110
- >
111
- <template lwc:if={loading}>Sending...</template>
112
- <template lwc:else>Send Request</template>
113
- </dx-button>
114
- </div>
115
-
116
- <template lwc:if={hasError}>
117
- <div class="error-display">
118
- <p class="error-message">{error}</p>
119
- </div>
120
- </template>
121
-
122
- <template lwc:if={hasResponse}>
123
- <div class="response-section">
124
- <div class="response-header">
125
- <span class={responseStatusClass}>
126
- {response.status} {response.statusText}
127
- </span>
128
- <span class="response-duration">{response.duration}ms</span>
129
- </div>
130
- <dx-code-block
131
- language={responseLanguage}
132
- >{formattedResponseBody}</dx-code-block>
133
- </div>
134
- </template>
135
- </div>
136
- </template>
@@ -1,240 +0,0 @@
1
- import { LightningElement, api, track } from "lwc";
2
- import type {
3
- OperationDefinition,
4
- ParameterDefinition
5
- } from "docUtils/openApiParser";
6
- import {
7
- generateSampleFromSchema,
8
- resolveRef
9
- } from "docUtils/openApiParser";
10
- import {
11
- buildRequestUrl,
12
- executeRequest
13
- } from "docUtils/apiRequestExecutor";
14
- import type { ApiResponse } from "docUtils/apiRequestExecutor";
15
-
16
- type ParamState = {
17
- name: string;
18
- in: string;
19
- value: string;
20
- required: boolean;
21
- description: string;
22
- };
23
-
24
- export default class ApiPlayground extends LightningElement {
25
- @api operation!: OperationDefinition;
26
- @api spec: any;
27
-
28
- @track paramStates: ParamState[] = [];
29
- @track requestBody = "";
30
- @track selectedServer = "";
31
- @track response: ApiResponse | null = null;
32
- @track error: string | null = null;
33
- @track loading = false;
34
-
35
- private initialized = false;
36
-
37
- renderedCallback(): void {
38
- if (!this.initialized && this.operation) {
39
- this.initialized = true;
40
- this.initializeState();
41
- }
42
- }
43
-
44
- private initializeState(): void {
45
- this.paramStates = (this.operation.parameters ?? []).map(
46
- (param: ParameterDefinition) => ({
47
- name: param.name,
48
- in: param.in,
49
- value: param.example !== undefined ? String(param.example) : "",
50
- required: param.required,
51
- description: param.description
52
- })
53
- );
54
-
55
- if (this.operation.requestBody) {
56
- const content = this.operation.requestBody.content;
57
- const jsonContent = content?.["application/json"];
58
- if (jsonContent?.schema) {
59
- const sample = generateSampleFromSchema(
60
- jsonContent.schema,
61
- this.spec
62
- );
63
- if (sample !== undefined) {
64
- this.requestBody = JSON.stringify(sample, null, 2);
65
- }
66
- }
67
- }
68
-
69
- if (this.servers.length > 0) {
70
- this.selectedServer = this.servers[0].url;
71
- }
72
- }
73
-
74
- get servers(): Array<{ url: string; description: string }> {
75
- return (this.spec?.servers ?? []).map((s: any) => ({
76
- url: s.url ?? "",
77
- description: s.description ?? s.url ?? ""
78
- }));
79
- }
80
-
81
- get showServerSelector(): boolean {
82
- return this.servers.length > 1;
83
- }
84
-
85
- get serverOptions(): Array<{ label: string; value: string }> {
86
- return this.servers.map((s) => ({
87
- label: s.description || s.url,
88
- value: s.url
89
- }));
90
- }
91
-
92
- get pathParams(): ParamState[] {
93
- return this.paramStates.filter((p) => p.in === "path");
94
- }
95
-
96
- get queryParams(): ParamState[] {
97
- return this.paramStates.filter((p) => p.in === "query");
98
- }
99
-
100
- get headerParams(): ParamState[] {
101
- return this.paramStates.filter((p) => p.in === "header");
102
- }
103
-
104
- get hasPathParams(): boolean {
105
- return this.pathParams.length > 0;
106
- }
107
-
108
- get hasQueryParams(): boolean {
109
- return this.queryParams.length > 0;
110
- }
111
-
112
- get hasHeaderParams(): boolean {
113
- return this.headerParams.length > 0;
114
- }
115
-
116
- get hasRequestBody(): boolean {
117
- return this.operation?.requestBody !== null && this.operation?.requestBody !== undefined;
118
- }
119
-
120
- get methodBadgeClass(): string {
121
- const method = this.operation?.method?.toLowerCase() ?? "get";
122
- return `method-badge method-${method}`;
123
- }
124
-
125
- get responseStatusClass(): string {
126
- if (!this.response) {
127
- return "status-code";
128
- }
129
- const status = this.response.status;
130
- if (status >= 200 && status < 300) {
131
- return "status-code status-success";
132
- }
133
- if (status >= 400 && status < 500) {
134
- return "status-code status-client-error";
135
- }
136
- if (status >= 500) {
137
- return "status-code status-server-error";
138
- }
139
- return "status-code";
140
- }
141
-
142
- get hasResponse(): boolean {
143
- return this.response !== null;
144
- }
145
-
146
- get hasError(): boolean {
147
- return this.error !== null;
148
- }
149
-
150
- get formattedResponseBody(): string {
151
- if (!this.response?.body) {
152
- return "";
153
- }
154
- try {
155
- return JSON.stringify(JSON.parse(this.response.body), null, 2);
156
- } catch {
157
- return this.response.body;
158
- }
159
- }
160
-
161
- get responseLanguage(): string {
162
- if (!this.response?.body) {
163
- return "text";
164
- }
165
- try {
166
- JSON.parse(this.response.body);
167
- return "json";
168
- } catch {
169
- return "text";
170
- }
171
- }
172
-
173
- handleParamChange(event: Event): void {
174
- const target = event.target as HTMLInputElement;
175
- const paramName = target.dataset.param;
176
- this.paramStates = this.paramStates.map((p) =>
177
- p.name === paramName ? { ...p, value: target.value } : p
178
- );
179
- }
180
-
181
- handleBodyChange(event: Event): void {
182
- const target = event.target as HTMLTextAreaElement;
183
- this.requestBody = target.value;
184
- }
185
-
186
- handleServerChange(event: Event): void {
187
- const target = event.target as HTMLSelectElement;
188
- this.selectedServer = target.value;
189
- }
190
-
191
- async handleSendRequest(): Promise<void> {
192
- this.loading = true;
193
- this.response = null;
194
- this.error = null;
195
-
196
- try {
197
- const pathParams: Record<string, string> = {};
198
- const queryParams: Record<string, string> = {};
199
- const headers: Record<string, string> = {};
200
-
201
- for (const param of this.paramStates) {
202
- if (param.in === "path") {
203
- pathParams[param.name] = param.value;
204
- } else if (param.in === "query") {
205
- queryParams[param.name] = param.value;
206
- } else if (param.in === "header") {
207
- headers[param.name] = param.value;
208
- }
209
- }
210
-
211
- const serverUrl =
212
- this.selectedServer || this.servers[0]?.url || "";
213
- const url = buildRequestUrl(
214
- serverUrl,
215
- this.operation.path,
216
- pathParams,
217
- queryParams
218
- );
219
-
220
- if (this.hasRequestBody && this.requestBody) {
221
- headers["Content-Type"] =
222
- headers["Content-Type"] || "application/json";
223
- }
224
-
225
- this.response = await executeRequest({
226
- url,
227
- method: this.operation.method,
228
- headers,
229
- body: this.hasRequestBody ? this.requestBody : undefined
230
- });
231
- } catch (err: any) {
232
- this.error =
233
- err?.message?.includes("fetch")
234
- ? "Network error: The request failed. This may be due to CORS restrictions or a network issue."
235
- : err?.message || "An unexpected error occurred.";
236
- } finally {
237
- this.loading = false;
238
- }
239
- }
240
- }
@@ -1,96 +0,0 @@
1
- export type ApiRequest = {
2
- url: string;
3
- method: string;
4
- headers: Record<string, string>;
5
- body?: string;
6
- };
7
-
8
- export type ApiResponse = {
9
- status: number;
10
- statusText: string;
11
- headers: Record<string, string>;
12
- body: string;
13
- duration: number;
14
- };
15
-
16
- export type RequestExecutor = (request: ApiRequest) => Promise<ApiResponse>;
17
-
18
- export function buildRequestUrl(
19
- serverUrl: string,
20
- pathTemplate: string,
21
- pathParams: Record<string, string>,
22
- queryParams: Record<string, string>
23
- ): string {
24
- let url = pathTemplate;
25
- for (const [key, value] of Object.entries(pathParams)) {
26
- url = url.replace(`{${key}}`, encodeURIComponent(value));
27
- }
28
-
29
- const fullUrl = `${serverUrl.replace(/\/$/, "")}${url}`;
30
-
31
- const queryEntries = Object.entries(queryParams).filter(
32
- ([, v]) => v !== ""
33
- );
34
- if (queryEntries.length === 0) {
35
- return fullUrl;
36
- }
37
-
38
- const searchParams = new URLSearchParams();
39
- for (const [key, value] of queryEntries) {
40
- searchParams.append(key, value);
41
- }
42
- return `${fullUrl}?${searchParams.toString()}`;
43
- }
44
-
45
- export const directFetchExecutor: RequestExecutor = async (
46
- request: ApiRequest
47
- ): Promise<ApiResponse> => {
48
- const start = performance.now();
49
-
50
- const fetchOptions: RequestInit = {
51
- method: request.method,
52
- headers: request.headers,
53
- mode: "cors"
54
- };
55
-
56
- if (
57
- request.body &&
58
- request.method !== "GET" &&
59
- request.method !== "HEAD"
60
- ) {
61
- fetchOptions.body = request.body;
62
- }
63
-
64
- const response = await fetch(request.url, fetchOptions);
65
- const duration = Math.round(performance.now() - start);
66
-
67
- const responseHeaders: Record<string, string> = {};
68
- response.headers.forEach((value, key) => {
69
- responseHeaders[key] = value;
70
- });
71
-
72
- let body: string;
73
- try {
74
- body = await response.text();
75
- } catch {
76
- body = "";
77
- }
78
-
79
- return {
80
- status: response.status,
81
- statusText: response.statusText,
82
- headers: responseHeaders,
83
- body,
84
- duration
85
- };
86
- };
87
-
88
- let currentExecutor: RequestExecutor = directFetchExecutor;
89
-
90
- export function setRequestExecutor(executor: RequestExecutor): void {
91
- currentExecutor = executor;
92
- }
93
-
94
- export function executeRequest(request: ApiRequest): Promise<ApiResponse> {
95
- return currentExecutor(request);
96
- }
@@ -1,187 +0,0 @@
1
- export type ParameterDefinition = {
2
- name: string;
3
- in: "path" | "query" | "header" | "cookie";
4
- required: boolean;
5
- description: string;
6
- schema: any;
7
- example?: any;
8
- };
9
-
10
- export type RequestBodyDefinition = {
11
- description: string;
12
- required: boolean;
13
- content: Record<string, { schema: any }>;
14
- };
15
-
16
- export type OperationDefinition = {
17
- operationId: string;
18
- method: string;
19
- path: string;
20
- summary: string;
21
- description: string;
22
- parameters: ParameterDefinition[];
23
- requestBody: RequestBodyDefinition | null;
24
- responses: Record<string, any>;
25
- tags: string[];
26
- };
27
-
28
- export function resolveRef(ref: string, spec: any): any {
29
- if (!ref || !ref.startsWith("#/")) {
30
- return ref;
31
- }
32
- const parts = ref.replace("#/", "").split("/");
33
- let current = spec;
34
- for (const part of parts) {
35
- current = current?.[part];
36
- if (current === undefined) {
37
- return undefined;
38
- }
39
- }
40
- return current;
41
- }
42
-
43
- export function generateSampleFromSchema(schema: any, spec: any): any {
44
- if (!schema) {
45
- return undefined;
46
- }
47
-
48
- if (schema.$ref) {
49
- return generateSampleFromSchema(resolveRef(schema.$ref, spec), spec);
50
- }
51
-
52
- if (schema.example !== undefined) {
53
- return schema.example;
54
- }
55
-
56
- if (schema.default !== undefined) {
57
- return schema.default;
58
- }
59
-
60
- if (schema.enum && schema.enum.length > 0) {
61
- return schema.enum[0];
62
- }
63
-
64
- switch (schema.type) {
65
- case "string":
66
- return schema.format === "date"
67
- ? "2024-01-01"
68
- : schema.format === "date-time"
69
- ? "2024-01-01T00:00:00Z"
70
- : schema.format === "email"
71
- ? "user@example.com"
72
- : schema.format === "uri"
73
- ? "https://example.com"
74
- : "string";
75
- case "integer":
76
- return schema.minimum ?? 0;
77
- case "number":
78
- return schema.minimum ?? 0.0;
79
- case "boolean":
80
- return false;
81
- case "array":
82
- if (schema.items) {
83
- return [generateSampleFromSchema(schema.items, spec)];
84
- }
85
- return [];
86
- case "object": {
87
- const result: Record<string, any> = {};
88
- if (schema.properties) {
89
- for (const [key, propSchema] of Object.entries(
90
- schema.properties
91
- )) {
92
- result[key] = generateSampleFromSchema(
93
- propSchema as any,
94
- spec
95
- );
96
- }
97
- }
98
- return result;
99
- }
100
- default:
101
- return null;
102
- }
103
- }
104
-
105
- function resolveParameter(param: any, spec: any): ParameterDefinition {
106
- const resolved = param.$ref ? resolveRef(param.$ref, spec) : param;
107
- return {
108
- name: resolved.name ?? "",
109
- in: resolved.in ?? "query",
110
- required: resolved.required ?? false,
111
- description: resolved.description ?? "",
112
- schema: resolved.schema ?? {},
113
- example: resolved.example
114
- };
115
- }
116
-
117
- export function parseOpenApiSpec(spec: any): OperationDefinition[] {
118
- if (!spec?.paths) {
119
- return [];
120
- }
121
-
122
- const operations: OperationDefinition[] = [];
123
- const httpMethods = [
124
- "get",
125
- "post",
126
- "put",
127
- "delete",
128
- "patch",
129
- "options",
130
- "head"
131
- ];
132
-
133
- for (const [path, pathItem] of Object.entries(spec.paths)) {
134
- const pathObj = pathItem as any;
135
- const pathLevelParams: any[] = pathObj.parameters ?? [];
136
-
137
- for (const method of httpMethods) {
138
- const operation = pathObj[method];
139
- if (!operation) {
140
- continue;
141
- }
142
-
143
- const operationParams = (operation.parameters ?? []).map(
144
- (p: any) => resolveParameter(p, spec)
145
- );
146
- const pathParams = pathLevelParams
147
- .map((p: any) => resolveParameter(p, spec))
148
- .filter(
149
- (pp) =>
150
- !operationParams.some(
151
- (op: ParameterDefinition) => op.name === pp.name
152
- )
153
- );
154
-
155
- const mergedParams = [...pathParams, ...operationParams];
156
-
157
- let requestBody: RequestBodyDefinition | null = null;
158
- if (operation.requestBody) {
159
- const rb = operation.requestBody.$ref
160
- ? resolveRef(operation.requestBody.$ref, spec)
161
- : operation.requestBody;
162
- if (rb) {
163
- requestBody = {
164
- description: rb.description ?? "",
165
- required: rb.required ?? false,
166
- content: rb.content ?? {}
167
- };
168
- }
169
- }
170
-
171
- operations.push({
172
- operationId:
173
- operation.operationId ?? `${method}_${path.replace(/\//g, "_")}`,
174
- method: method.toUpperCase(),
175
- path,
176
- summary: operation.summary ?? "",
177
- description: operation.description ?? "",
178
- parameters: mergedParams,
179
- requestBody,
180
- responses: operation.responses ?? {},
181
- tags: operation.tags ?? []
182
- });
183
- }
184
- }
185
-
186
- return operations;
187
- }