@json-editor/json-editor 2.8.0 → 2.9.0-beta.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@json-editor/json-editor",
   "title": "JSONEditor",
   "description": "JSON Schema based editor",
-  "version": "2.8.0",
+  "version": "2.9.0-beta.0",
   "main": "dist/jsoneditor.js",
   "author": {
     "name": "Jeremy Dorn",

package/src/schemaloader.js

@@ -421,27 +421,40 @@ export class SchemaLoader {
       waiting++
 
       let url = this._joinUrl(uri, fileBase)
-      const response = await new Promise(resolve => {
-        const r = new XMLHttpRequest()
-        if (this.options.ajaxCredentials) r.withCredentials = this.options.ajaxCredentials
-        r.overrideMimeType('application/json')
-        r.open('GET', url, true)
-        r.onload = () => {
-          resolve(r)
+
+      let externalSchema
+      if (this.options.ajax_cache_responses) {
+        const schemaFromCache = this.cacheGet(url)
+        if (schemaFromCache) {
+          externalSchema = schemaFromCache
         }
-        r.onerror = (e) => {
-          resolve(undefined)
+      }
+
+      if (!externalSchema) {
+        const response = await new Promise(resolve => {
+          const r = new XMLHttpRequest()
+          if (this.options.ajaxCredentials) r.withCredentials = this.options.ajaxCredentials
+          r.overrideMimeType('application/json')
+          r.open('GET', url, true)
+          r.onload = () => {
+            resolve(r)
+          }
+          r.onerror = (e) => {
+            resolve(undefined)
+          }
+          r.send()
+        })
+        if (typeof response === 'undefined') throw new Error(`Failed to fetch ref via ajax - ${uri}`)
+        try {
+          externalSchema = JSON.parse(response.responseText)
+          if (this.options.ajax_cache_responses) {
+            this.cacheSet(url, externalSchema)
+          }
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.log(e)
+          throw new Error(`Failed to parse external ref ${url}`)
         }
-        r.send()
-      })
-      if (typeof response === 'undefined') throw new Error(`Failed to fetch ref via ajax - ${uri}`)
-      let externalSchema
-      try {
-        externalSchema = JSON.parse(response.responseText)
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.log(e)
-        throw new Error(`Failed to parse external ref ${url}`)
       }
 
       if (!(typeof externalSchema === 'boolean' || typeof externalSchema === 'object') || externalSchema === null || Array.isArray(externalSchema)) {
@@ -528,4 +541,84 @@ export class SchemaLoader {
     })
     return extended
   }
+
+  /**
+   * Gets a cache key namespaced for JSON Editor.
+   *
+   * @param {*} key
+   *   The schema's key, e.g., URL.
+   * @returns {string}
+   *   A namespaced cache key, by prefixing "je-cache::".
+   */
+  getCacheKey (key) {
+    return ['je-cache', key].join('::')
+  }
+
+  /**
+   * Returns the schema cache buster from JSON Editor settings.
+   *
+   * @returns {string}
+   *   The configured cache buster, if any. Otherwise, returns the current date
+   *   in ISO 8601 simplified format (e.g., 2011-10-05 for October 5, 2011).
+   */
+  getCacheBuster () {
+    return this.options.ajax_cache_buster || new Date().toISOString().slice(0, 10)
+  }
+
+  /**
+   * Sets a schema into localStorage cache.
+   *
+   * @param {string} key
+   *   The schema's key, e.g., URL.
+   * @param {mixed} data
+   *   The schema to store. Can be any data type.
+   */
+  cacheSet (key, data) {
+    try {
+      window.localStorage.setItem(this.getCacheKey(key), JSON.stringify({
+        cacheBuster: this.getCacheBuster(),
+        schema: data
+      }))
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e)
+    }
+  }
+
+  /**
+   * Fetches a schema from localStorage cache.
+   *
+   * @param {string} key
+   *   The schema's key, e.g., URL.
+   *
+   * @returns {mixed}
+   *   If found, returns the schema.
+   */
+  cacheGet (key) {
+    try {
+      const resultRaw = window.localStorage.getItem(this.getCacheKey(key))
+      if (resultRaw) {
+        const resultDecoded = JSON.parse(resultRaw)
+        if (resultDecoded.cacheBuster && resultDecoded.schema) {
+          if (resultDecoded.cacheBuster === this.getCacheBuster()) {
+            return resultDecoded.schema
+          }
+        }
+        this.cacheDelete(key)
+      }
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e)
+    }
+  }
+
+  /**
+   * Deletes a schema from localStorage cache.
+   *
+   * @param {string} key
+   *   The schema's key, e.g., URL.
+   */
+  cacheDelete (key) {
+    window.localStorage.removeItem(this.getCacheKey(key))
+  }
 }

package/tests/codeceptjs/core_test.js

@@ -247,6 +247,27 @@ Scenario('should load internal schema definitions, external schema definitions a
 
   // external schema properties
   I.waitForElement('[data-schemapath="root.link.street_address"]')
+
+  const currentUrl = await I.grabCurrentUrl()
+  const currentPath = currentUrl.replace('references.html', '')
+
+  // Ensures that external schemas were stored in cache. (This does not assert that the loader actually fetched them from cache.)
+  const schemaPaths = [
+    '../fixtures/string.json',
+    '../fixtures/definitions.json',
+    '../fixtures/basic_person.json',
+    '../fixtures/person.json',
+  ]
+  for (const path of schemaPaths) {
+    let key = 'je-cache::' + currentPath + path;
+
+    const item = await I.executeScript(function (storageKey) {
+      return window.localStorage.getItem(storageKey);
+    }, key)
+    const itemDecoded = JSON.parse(item)
+    assert.equal(itemDecoded.cacheBuster, 'abc123');
+    assert(itemDecoded, 'Cached schema found');
+  }
 })
 
 Scenario('should override error messages if specified in schema options @core @errors-messages', async (I) => {

package/tests/pages/references.html

@@ -58,6 +58,12 @@
         // Enable fetching schemas via ajax
         ajax: true,
 
+        // Enable caching schemas from via ajax
+        ajax_cache_responses: true,
+
+        // The cache-buster for cached caches
+        ajax_cache_buster: 'abc123',
+
         // The schema for the editor
         schema: {
           $schema: "https://json-schema.org/draft-04/schema",

package/tests/unit/schemaloader.spec.js

@@ -80,7 +80,7 @@ describe('SchemaLoader', () => {
   })
 
   describe('when external absolute ref exists', () => {
-    it('should set oprion { ajax: true }', async () => {
+    it('should set option { ajax: true }', async () => {
       const response = {
         type: 'string',
         minLength: 4
@@ -117,7 +117,7 @@ describe('SchemaLoader', () => {
   })
 
   describe('when external relative $ref exists', () => {
-    it('should set oprion { ajax: true }', async () => {
+    it('should set option { ajax: true }', async () => {
       const response = {
         type: 'string',
         minLength: 4
@@ -467,4 +467,110 @@ describe('SchemaLoader', () => {
       expect(Object.keys(loader.refs).length).toBe(1)
     })
   })
+
+  describe('when schemas caching is enabled', () => {
+    beforeEach(() => {
+      // Mocks window.localStorage system.
+      // Thanks to https://stackoverflow.com/a/32911774.
+      var localStorageMock = (function () {
+        var store = {}
+        return {
+          getItem: function (key) {
+            return store[key]
+          },
+          setItem: function (key, value) {
+            store[key] = value.toString()
+          },
+          clear: function () {
+            store = {}
+          },
+          removeItem: function (key) {
+            delete store[key]
+          }
+        }
+      })()
+      Object.defineProperty(window, 'localStorage', { value: localStorageMock })
+    })
+    it('should store and retrieve cached items', async () => {
+      const schema = {
+        type: 'string',
+        minLength: 4
+      }
+      const cacheKey = 'myItem'
+      loader = new SchemaLoader({ ajax: true, ajax_cache_responses: true, ajax_cache_buster: 'abc123' })
+      loader.cacheSet(cacheKey, schema)
+
+      const schemaCached = loader.cacheGet(cacheKey)
+      expect(schemaCached).toEqual(schema)
+    })
+    it('should not retrieve cached item with invalid cache buster', async () => {
+      const schema = {
+        type: 'string',
+        minLength: 4
+      }
+      const cacheKey = 'myItem'
+      loader = new SchemaLoader({ ajax: true, ajax_cache_responses: true, ajax_cache_buster: 'abc123' })
+      loader.cacheSet(cacheKey, schema)
+
+      loader.options.ajax_cache_buster = 'not-abc123'
+      const schemaCached = loader.cacheGet(cacheKey)
+      expect(schemaCached).toBeUndefined()
+    })
+    it('should fetch schemas from cache { ajax: true, ajax_cache_responses: true }', async () => {
+      // Runs two passes, the first to warm cache and second to fetch from cache.
+      const response = {
+        type: 'string',
+        minLength: 4
+      }
+      const server = createFakeServer()
+      server.autoRespond = true
+      window.XMLHttpRequest = server.xhr
+      server.respondWith('/string.json', [
+        200,
+        { 'Content-Type': 'application/json' },
+        JSON.stringify(response)
+      ])
+      fetchUrl =
+        document.location.origin + document.location.pathname.toString()
+      loader = new SchemaLoader({ ajax: true, ajax_cache_responses: true })
+      fileBase = loader._getFileBase(document.location.toString())
+
+      // Pass one: Warm the cache.
+      const schema = {
+        type: 'object',
+        properties: {
+          fname: { $ref: '/string.json' },
+          lname: { $ref: '/string.json' }
+        }
+      }
+      await loader.load(
+        schema,
+        fetchUrl,
+        fileBase
+      )
+      const urls = Object.keys(loader.refs)
+      expect(urls.length).toEqual(1)
+
+      // Tears down the mock Ajax endpoint to ensure any schemas get fetched from cache.
+      server.restore()
+
+      // Pass two: Should fetch external schemas from cache.
+      // Requires a fresh loader because SchemaLoader.refs can return stale data.
+      const loaderFresh = new SchemaLoader({ ajax: true, ajax_cache_responses: true })
+      const schemaFromCache = {
+        type: 'object',
+        properties: {
+          fname: { $ref: '/string.json' },
+          lname: { $ref: '/string.json' }
+        }
+      }
+      await loaderFresh.load(
+        schemaFromCache,
+        fetchUrl,
+        fileBase
+      )
+      const urlsFromCache = Object.keys(loaderFresh.refs)
+      expect(urlsFromCache.length).toEqual(1)
+    })
+  })
 })