Issue-19: handling refs as in displaying them as it is and giving the…

README.md

@@ -12,14 +12,15 @@ JSON Schema is very verbose and hard to read in JSON. This component helps rende
 
 Installation
 
-Install via bower
-
-
 ```
+# Install via bower
 bower install json-schema-view-js --save
+
+# Install via NPM
+npm install json-schema-view-js --save
 ```
 
-Then use global `JSONSchemaView` constructor
+Then either use global `JSONSchemaView` constructor or require if you need to
 
 ```js
 const schema = {type: 'string', title: 'Name'};
@@ -42,6 +43,8 @@ This number indicates up to how many levels the rendered tree should expand. Set
 An object containing other options for construction the view. These are possible options:
 ###### `theme` (`string`)
 A theme defined in the CSS of this view. Possible values: `dark`. Note that the dark theme is just for making the text brighter so it looks good on dark backgrounds.
+###### `showRefs` (`boolean`)
+to show refs as is. By default, the refs aren't handled and an 'undefined' is rendered.
 
 ## Development
 Install `gulp` and run `gulp serve` to start the server that serves the development version of the project.
@@ -59,4 +62,4 @@ gulp test
 ```
 
 ### License
-[MIT](./LICENSE)
+[MIT](./LICENSE)

demo/index.html

@@ -137,6 +137,7 @@ <h2>Demo</h2>
             description: 'Anything from objects to arrays!'
           }
         },
+
         {
           title: 'Simple',
           schema: {
@@ -146,6 +147,13 @@ <h2>Demo</h2>
           }
         },
 
+        {
+          title: 'Ref (options.showRef = true)',
+          schema: {
+            $ref: 'http://foo.bar'
+          }
+        },
+
         {
           title: 'Object',
           schema: {
@@ -444,7 +452,7 @@ <h2>Demo</h2>
 
       examples.forEach(function(example) {
         var title = document.createElement('h3');
-        var formatter = new JSONSchemaView(example.schema, 1, {theme: example.theme});
+        var formatter = new JSONSchemaView(example.schema, 1, {theme: example.theme, showRefs: true});
 
         title.innerText = example.title;
 
@@ -453,4 +461,4 @@ <h2>Demo</h2>
       });
     </script>
   </body>
-</html>
+</html>

dist/style.css

@@ -1,7 +1,7 @@
 /*!
  * json-schema-view-js
  * https://github.com/mohsen1/json-schema-view-js#readme
- * Version: 0.4.1 - 2016-12-26T23:51:39.556Z
+ * Version: 1.0.0 - 2017-09-08T12:47:25.090Z
  * License: MIT
  */
 

src/index.js

@@ -24,8 +24,9 @@ export default class JSONSchemaView {
    * or set it to `Infinity` to expand the tree deeply
    * @param {object} options.
    *  theme {string}: one of the following options: ['dark']
+	 *  showRefs {boolean}: to render refs as is. Default is false. 
   */
-  constructor(schema, open, options = {theme: null}) {
+  constructor(schema, open, options = {theme: null, showRefs: false}) {
     this.schema = schema;
     this.open = open;
     this.options = options;
@@ -47,9 +48,12 @@ export default class JSONSchemaView {
        this.schema.oneof ||
        this.schema.allOf);
 
-    // Determine if a schema is a primitive
-    this.isPrimitive = !this.isAny && !this.isArray && !this.isObject;
+    // Determine if the schema is a ref
+    this.isRef = this.options.showRefs && '$ref' in this.schema;
 
+    // Determine if a schema is a primitive
+    this.isPrimitive = !this.isAny && !this.isArray && !this.isObject && !this.isRef;
+
     //
     this.showToggle = this.schema.description ||
       this.schema.title ||
@@ -159,6 +163,13 @@ export default class JSONSchemaView {
         </div>
       `}
 
+      <!-- Ref -->
+      ${_if(this.isRef)`
+        <div class="primitive">
+            <a class="title">${'Ref'} </a>
+            <a class="type" href="${this.schema.$ref}">${this.schema.$ref}</a>
+        </div>
+      `}
 
       <!-- Array -->
       ${_if(this.isArray)`
@@ -191,7 +202,7 @@ export default class JSONSchemaView {
       `}
 
       <!-- Object -->
-      ${_if(!this.isPrimitive && !this.isArray && !this.isAny)`
+      ${_if(!this.isPrimitive && !this.isArray && !this.isAny && !this.isRef)`
         <div class="object">
           <a class="title"><span
             class="toggle-handle"></span>${this.schema.title || ''} <span

test/spec.js

@@ -23,6 +23,9 @@ const schema = {
       type: 'string',
       description: 'Blood type in a string',
       enum: ['A+', 'A-', 'O+', 'O-', 'AB+', 'AB-', 'A', 'B', 'AB', 'O']
+    },
+    {
+      $ref: 'http://foo.bar/additionalBloodTypes'
     }
   ]
 };
@@ -44,5 +47,13 @@ describe('rendering', ()=> {
       expect(el.classList.toString()).not.to.contain('collapsed');
       expect(el.querySelector('.inner.oneOf').innerHTML.trim()).not.to.equal('');
     });
+
+    it('renderes references', ()=> {
+      const view = new JSONSchemaView(schema, 2);
+      const el = view.render();
+      const code = el.querySelector('.inner.oneOf').innerHTML;
+      expect(code.indexOf('<a class="title">Ref </a>')).not.to.equal(-1);
+      expect(code.indexOf('<a class="type" href="http://foo.bar/additionalBloodTypes">http://foo.bar/additionalBloodTypes</a>')).not.to.equal(-1);
+    });
   });
-});
+});