Redoc: Add dynamic values to x-code-samples

[lcofre]

The source field on the x-code-samples is a literal text. It would be great to add variables defined on the Swagger schema, i.e. basePath and host.

Having said that, thanks very much for his great user interface! It is really intuitive and configurable. :)

[RomanHotsiy]

@lcofre thanks for the suggestion and for kind words!

This is a completely valid use case and a great feature.
Let's get back to this after 2.0 is released.

[SangHakLee]

@lcofre Is this your suggestion?

Now my x-code-samples

# dev server
x-code-samples:
    - lang: PHP
      source: |
        <?php
        $host = "http://dev.com"
    - lang: Node.js
      source: |
        let host = "http://dev.com"

# production server
x-code-samples:
    - lang: PHP
      source: |
        <?php
        $host = "http://prod.com"
    - lang: Node.js
      source: |
        let host = "http://prod.com"

I really want like this, @RomanGotsiy

# HOST= "http://dev.com" or "http://prod.com"

x-code-samples:
    - lang: PHP
      source: |
        <?php
        $host = "${HOST}"
    - lang: Node.js
      source: |
        let host = "${HOST}"

[lcofre]

Exactly that @SangHakLee !

Maybe in lowercase as it appears on the swagger definition:

    - lang: Node.js
      source: |
        let host = "${host}"

We could use properties like host, basePath and info.title, for example.

[SangHakLee]

@lcofre Great~!

[cskru]

Also, it'll be great and really helpful if I can do something like this:
x-code-samples: - lang: Node.js source: <path/To/Source/FileHere.js>
@RomanGotsiy

[drewish]

@cskru probably worth a separate issue. I had a similar need but ended up writing a script to take a swagger file and directory of examples named after the operationId and merge them together.

[CharlesWinter]

Hi guys, is there any update on this feature? I've currently a use case where this would be really useful! Basically, I would like to alter the code sample based on the scheme selected, as the client binding will change slightly. This would help keep my docs really neat.

[phillbaker]

We added mustache rendering on an internal fork for redoc that pulls variables from the swagger file, it could be modified to also pull these values from the environment. Here's a patch that you could apply:

diff --git a/demo/swagger.yaml b/demo/swagger.yaml
index e7ca463..745cd42 100644
--- a/demo/swagger.yaml
+++ b/demo/swagger.yaml
@@ -85,6 +85,9 @@ x-servers:
     description: Default server
   - url: //petstore.swagger.io/sandbox
     description: Sandbox server
+x-request-variables:
+  default_base_url: //petstore.swagger.io/sandbox
+  default_api_key: abc_123
 paths:
   /pet:
     post:
@@ -117,7 +120,7 @@ paths:
         - lang: 'C#'
           source: |
             PetStore.v1.Pet pet = new PetStore.v1.Pet();
-            pet.setApiKey("your api key");
+            pet.setApiKey("{{ default_api_key }}");
             pet.petType = PetStore.v1.Pet.TYPE_DOG;
             pet.name = "Rex";
             // set other fields
diff --git a/docs/redoc-vendor-extensions.md b/docs/redoc-vendor-extensions.md
index b285aaf..584a166 100644
--- a/docs/redoc-vendor-extensions.md
+++ b/docs/redoc-vendor-extensions.md
@@ -6,6 +6,33 @@ Extend OpenAPI root [Swagger Object](http://swagger.io/specification/#swaggerObj
 #### x-servers
 Backported from OpenAPI 3.0 [`servers`](https://github.com/OAI/OpenAPI-Specification/blob/OpenAPI.next/versions/3.0.md#server-object). Currently doesn't support templates.

+#### x-request-variables
+
+| Field Name     |  Type         | Description |
+| :------------- | :-----------: | :---------- |
+| x-request-variables         | [ Object ] | An object where the keys define the variable names and the values map to the variable values. |
+
+###### Usage in Redoc
+`x-request-variables` is used to pre-render the code examples using Mustache.js. Any variables in double curly braces (`{{ }}`) are rendered using the values provided.
+
+###### x-request-variables example
+json
+```json
+{
+  "x-request-variables": {
+    "default_base_url": "//petstore.swagger.io/sandbox",
+    "default_api_key": "abc_123"
+  },
+}
+```
+yaml
+```yaml
+x-request-variables:
+  default_base_url: //petstore.swagger.io/sandbox
+  default_api_key: abc_123
+```
+
+
 #### x-tagGroups

 | Field Name     | Type           | Description |
diff --git a/lib/components/RequestSamples/request-samples.ts b/lib/components/RequestSamples/request-samples.ts
index b0ebda9..4bc0b27 100644
--- a/lib/components/RequestSamples/request-samples.ts
+++ b/lib/components/RequestSamples/request-samples.ts
@@ -3,6 +3,7 @@
 import { Component, ViewChildren, QueryList, Input,
  ChangeDetectionStrategy, OnInit, HostBinding, ElementRef, NgZone } from '@angular/core';

+import { render as mustacheRender } from 'mustache';
 import { Subject } from 'rxjs/Subject';

 import { BaseComponent, SpecManager } from '../base';
@@ -22,6 +23,7 @@ export class RequestSamples extends BaseComponent implements OnInit {
   @ViewChildren(Tabs) childQuery:QueryList<Tabs>;
   @HostBinding('attr.hidden') hidden;

+  requestVariables: any;
   childTabs: Tabs;
   selectedLang: Subject<any>;
   samples: Array<any>;
@@ -35,6 +37,7 @@ export class RequestSamples extends BaseComponent implements OnInit {
   ) {
     super(specMgr);

+    this.requestVariables = specMgr.schema['x-request-variables'] || null;
     this.selectedLang = this.appState.samplesLanguage;
   }

@@ -51,6 +54,12 @@ export class RequestSamples extends BaseComponent implements OnInit {
   init() {
     this.schemaPointer = this.schemaPointer ? JsonPointer.join(this.schemaPointer, 'schema') : null;
     this.samples = this.componentSchema['x-code-samples'] || [];
+    if (this.requestVariables) {
+      this.samples = this.samples.map(s => {
+        s.source = mustacheRender(s.source, this.requestVariables)
+        return s;
+      });
+    }
     if (!this.schemaPointer && !this.samples.length) this.hidden = true;
   }

diff --git a/package.json b/package.json
index 52562c7..424f4f4 100644
--- a/package.json
+++ b/package.json
@@ -135,6 +135,7 @@
     "json-schema-ref-parser": "^3.2.0",
     "lunr": "^1.0.0",
     "mark.js": "github:julmot/mark.js",
+    "mustache": "^2.3.0",
     "openapi-sampler": "^0.4.2",
     "perfect-scrollbar": "^0.7.0",
     "prismjs": "^1.5.1",

[chionn]

perhaps you'd like this feature: https://github.com/Redocly/redoc/pull/1011