refactor config

js-commons · Nov 22, 2024 · 7972a04 · 7972a04
1 parent 00fe351
commit 7972a04
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 61 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -1,32 +1,34 @@
 <html>
     <head>
-        <script type="text/javascript" src="./try-it-out.min.js"></script>
-        <!-- <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@5.11.0/swagger-ui.css" /> -->
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/CommunityExtensions/redoc-try-it-out@refactor_config/dist/try-it-out.min.js"></script>
     </head>
     <body>
         <div id="redoc_container"></div>
-        <!-- <script src="https://unpkg.com/swagger-ui-dist@5.11.0/swagger-ui-bundle.js" crossorigin></script> -->
         <script>
-            // SwaggerUIBundle({
-            //     url: "./openapi.yaml",
-            //     dom_id: '#redoc_container',
-            //     presets: [
-            //     SwaggerUIBundle.presets.apis,
-            //     SwaggerUIBundle.SwaggerUIStandalonePreset
-            //     ],
-            // })
             RedocTryItOut.init(
-                "./openapi.json",
+                "https://petstore3.swagger.io/api/v3/openapi.json",
                 { 
-                    title: "Pet Store"
+                    redocVersion: "2.1.4",
+                    // Specify the place where you have stored the dependencies this library pulls down
+                    //cdnUrl: "https://cdn.redoc.ly", // <- will fail with 404 because this cdn doesnt have jquery :) 
+                    //cdnUrl: "./test", // <- will also fail with 4094
+                    cdnUrl: "https://cdn.jsdelivr.net/npm",
+                    theme: {
+                        spacing: {
+                            unit: 4,
+                            sectionHorizontal: 100,
+                            sectionVertical: 100,
+                        }
+                    },
+                    disableSearch: true,
+                    hideLoading: true,
+                    untrustedDefinition: true,
+                    sortOperationsAlphabetically: false,
+                    scrollYOffset: 100,
+                    pathInMiddlePanel: true
                 },
                 document.getElementById("redoc_container"),
             );
-            // RedocTryItOut.init(
-            //     "./openapi.yaml",
-            //     { title: "Pet Store" },
-            //     document.getElementById("redoc_container"),
-            // );
         </script>
     </body>
 </html>
diff --git a/dist/try-it-out.min.js b/dist/try-it-out.min.js
diff --git a/src/config/config.ts b/src/config/config.ts
@@ -19,5 +19,5 @@ export const Config = {
     });
   },
 
-  cdnUrl: "https://cdn.jsdelivr.net/npm/",
+  cdnUrl: "https://cdn.jsdelivr.net/npm",
 };
diff --git a/src/config/redoc-try-it-out-config.ts b/src/config/redoc-try-it-out-config.ts
@@ -11,30 +11,34 @@ const DEFAULT_REDOC_VERSION = "2.0.0-rc.56";
 const DEFAULT_JQUERY_VERSION = "3.6.0";
 const DEFAULT_JQUERY_SCROLL_VERSION = "2.1.2";
 
-export class RedocTryItOutConfig implements RedocTryItOutOptions {
+export class RedocTryItOutConfig {
   public readonly docUrl: string;
   public readonly element?: HTMLElement;
-
-  private readonly _containerId: string = "redoc-container";
-  private readonly _operationBoxSelector: string = "[data-section-id]";
-
-  public readonly tryItOutEnabled: boolean = true;
-  public readonly tryItBoxContainerId: string = "try-out-wrapper";
-  public readonly redocVersion: string = DEFAULT_REDOC_VERSION;
-  public readonly selectedOperationClass: string = "try";
-  public readonly disableZenscroll: boolean = true;
-
-  public readonly dependenciesVersions: DependenciesVersions = {
-    jquery: DEFAULT_JQUERY_VERSION,
-    jqueryScrollTo: DEFAULT_JQUERY_SCROLL_VERSION,
-  };
+  public readonly options: RedocTryItOutOptions;
 
   public constructor(
     docUrl: string,
     options: RedocTryItOutOptions,
     element?: HTMLElement,
   ) {
-    Config.parseOptions(this, options);
+    this.options = {
+      tryItOutEnabled: true,
+      tryItBoxContainerId: "try-out-wrapper",
+      redocVersion: DEFAULT_REDOC_VERSION,
+      selectedOperationClass: "try",
+      disableZenscroll: true,
+      dependenciesVersions: {
+        ...{
+          jquery: DEFAULT_JQUERY_VERSION,
+          jqueryScrollTo: DEFAULT_JQUERY_SCROLL_VERSION,
+        },
+        ...options.dependenciesVersions,
+      },
+      containerId: "redoc-container",
+      operationBoxSelector: "[data-section-id]",
+      cdnUrl: Config.cdnUrl,
+      ...options,
+    };
     this.docUrl = docUrl;
     this.element = element;
   }
@@ -50,36 +54,36 @@ export class RedocTryItOutConfig implements RedocTryItOutOptions {
   }
 
   public get tryItBoxSelector(): string {
-    return `#${this.tryItBoxContainerId}`;
+    return `#${this.options.tryItBoxContainerId}`;
   }
 
   public get version(): string {
-    return this.redocVersion;
+    return this.options.redocVersion || "";
   }
 
   public get containerId(): string {
-    return this.element ? this.elementId : this._containerId;
+    return this.element ? this.elementId : this.options.containerId || "";
   }
 
   public get containerSelector(): string {
-    return `#${this.containerId}`;
+    return `#${this.options.containerId}`;
   }
 
   public get operationBoxSelector(): string {
-    return `${this.containerSelector} ${this._operationBoxSelector}`;
+    return `${this.containerSelector} ${this.options.operationBoxSelector}`;
   }
 
   public get bundleUrl(): string {
-    return `${Config.cdnUrl}/redoc@${this.version}/bundles/redoc.standalone.min.js`;
+    return `${this.options.cdnUrl}/redoc@${this.version}/bundles/redoc.standalone.min.js`;
   }
 
   public get tryItDependencies(): {
     jqueryUrl: string;
     jqueryScrollToUrl: string;
   } {
     return {
-      jqueryUrl: `${Config.cdnUrl}/jquery@${this.dependenciesVersions.jquery}/dist/jquery.min.js`,
-      jqueryScrollToUrl: `${Config.cdnUrl}/jquery.scrollto@${this.dependenciesVersions.jqueryScrollTo}/jquery.scrollTo.min.js`,
+      jqueryUrl: `${this.options.cdnUrl}/jquery@${this.options.dependenciesVersions?.jquery || ""}/dist/jquery.min.js`,
+      jqueryScrollToUrl: `${this.options.cdnUrl}/jquery.scrollto@${this.options.dependenciesVersions?.jqueryScrollTo || ""}/jquery.scrollTo.min.js`,
     };
   }
 }
diff --git a/src/config/swagger-config.ts b/src/config/swagger-config.ts
@@ -37,6 +37,7 @@ export class SwaggerConfig implements SwaggerOptions {
   public readonly selectedOperationContainerClass: string = "opened-shadow";
 
   public readonly version: string = "3.48.0";
+  public readonly cdnUrl: string = Config.cdnUrl;
 
   constructor(options: SwaggerOptions, url: string, tryItOutEnabled: boolean) {
     Config.parseOptions(this, options);
@@ -108,11 +109,11 @@ export class SwaggerConfig implements SwaggerOptions {
   }
 
   public get bundleUrl(): string {
-    return `${Config.cdnUrl}/swagger-ui-dist@${this.version}/swagger-ui-bundle.js`;
+    return `${this.cdnUrl}/swagger-ui-dist@${this.version}/swagger-ui-bundle.js`;
   }
 
   public get cssUrl(): string {
-    return `${Config.cdnUrl}swagger-ui-dist@${this.version}/swagger-ui.css`;
+    return `${this.cdnUrl}/swagger-ui-dist@${this.version}/swagger-ui.css`;
   }
 
   public onComplete = () => {

diff --git a/src/interfaces/redoc-try-it-out-options.interface.ts b/src/interfaces/redoc-try-it-out-options.interface.ts
@@ -234,4 +234,5 @@ export interface RedocTryItOutOptions extends RedocOptions {
   swaggerOptions?: SwaggerOptions;
   stylerMatcher?: StyleMatcherOptions;
   disableZenscroll?: boolean;
+  cdnUrl?: string;
 }
diff --git a/src/interfaces/swagger-options.interface.ts b/src/interfaces/swagger-options.interface.ts
@@ -17,4 +17,5 @@ export interface SwaggerOptions {
   selectedOperationContainerClass?: string;
   wrapperSelector?: string;
   onComplete?: CallbackFunction;
+  cdnUrl?: string;
 }
diff --git a/src/module.ts b/src/module.ts
@@ -29,9 +29,12 @@ export class RedocTryItOut {
   ): void {
     RedocWrapper.cfg = new RedocTryItOutConfig(url, cfg, element);
 
-    if (RedocWrapper.cfg.tryItOutEnabled) {
+    if (RedocWrapper.cfg.options.tryItOutEnabled) {
       SwaggerWrapper.cfg = new SwaggerConfig(
-        cfg.swaggerOptions || {},
+        {
+          cdnUrl: RedocWrapper.cfg.options.cdnUrl,
+          ...(cfg.swaggerOptions || {}),
+        },
         url,
         true,
       );
@@ -53,11 +56,11 @@ export class RedocTryItOut {
     // This parses and sets the config on the static cfg property on the RedocWrapper class
     RedocTryItOut.config(docUrl, cfg, element);
 
-    if (RedocWrapper.cfg.disableZenscroll) {
+    if (RedocWrapper.cfg.options.disableZenscroll) {
       (window as any).noZensmooth = true;
     }
 
-    if (RedocWrapper.cfg.tryItOutEnabled) {
+    if (RedocWrapper.cfg.options.tryItOutEnabled) {
       await RedocTryItOut.loadAll();
       AuthBtn.init();
       TryBtn.init();

diff --git a/src/wrappers/redoc.wrapper.ts b/src/wrappers/redoc.wrapper.ts
@@ -24,7 +24,7 @@ export class RedocWrapper {
     const $tryItBox = $(RedocWrapper.cfg.tryItBoxSelector);
     return $tryItBox.length
       ? $tryItBox
-      : $(`<div id="${RedocWrapper.cfg.tryItBoxContainerId}"></div>`);
+      : $(`<div id="${RedocWrapper.cfg.options.tryItBoxContainerId}"></div>`);
   }
 
   private static moveTryApiContainer(): void {
@@ -46,7 +46,7 @@ export class RedocWrapper {
     const promise = new Promise<void>((resolve, reject): void => {
       Redoc.init(
         RedocWrapper.cfg.docUrl,
-        RedocWrapper.cfg,
+        RedocWrapper.cfg.options,
         RedocWrapper.domElement,
         (e: Error) => (e ? reject(e) : resolve()),
       );
@@ -57,14 +57,14 @@ export class RedocWrapper {
 
   public static configureTryBox(): void {
     RedocWrapper.$operationBox.addClass(
-      RedocWrapper.cfg.selectedOperationClass,
+      RedocWrapper.cfg.options.selectedOperationClass || "",
     );
     RedocWrapper.moveTryApiContainer();
   }
 
   public static hide(): void {
     RedocWrapper.$operationBox.removeClass(
-      RedocWrapper.cfg.selectedOperationClass,
+      RedocWrapper.cfg.options.selectedOperationClass,
     );
   }
 

diff --git a/test/RedocTryItOutConfig.test.ts b/test/RedocTryItOutConfig.test.ts
@@ -13,20 +13,36 @@ describe("RedocTryItOutConfig", () => {
         jquery: "0.1",
         jqueryScrollTo: "0.3",
       },
+      theme: {
+        spacing: {
+          unit: 4,
+          sectionHorizontal: 20,
+          sectionVertical: 10,
+        },
+      },
     });
 
-    expect(config.redocVersion).toEqual("foo");
-    expect(config.tryItOutEnabled).toEqual(false);
-    expect(config.tryItBoxContainerId).toEqual("other-tryItBoxContainerId");
-    expect(config.containerId).toEqual("other-containerId");
+    expect(config.options.redocVersion).toEqual("foo");
+    expect(config.options.tryItOutEnabled).toEqual(false);
+    expect(config.options.tryItBoxContainerId).toEqual(
+      "other-tryItBoxContainerId",
+    );
+    expect(config.options.containerId).toEqual("other-containerId");
     expect(config.containerSelector).toEqual("#other-containerId");
     expect(config.operationBoxSelector).toEqual(
       "#other-containerId other-operationBoxSelector",
     );
-    expect(config.selectedOperationClass).toEqual("dont-try");
-    expect(config.dependenciesVersions).toEqual({
+    expect(config.options.selectedOperationClass).toEqual("dont-try");
+    expect(config.options.dependenciesVersions).toEqual({
       jquery: "0.1",
       jqueryScrollTo: "0.3",
     });
+    expect(config.options.theme).toEqual({
+      spacing: {
+        unit: 4,
+        sectionHorizontal: 20,
+        sectionVertical: 10,
+      },
+    });
   });
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,5 +19,5 @@ export const Config = { @@
         });
       },
-      cdnUrl: "https://cdn.jsdelivr.net/npm/",
+      cdnUrl: "https://cdn.jsdelivr.net/npm",
     };