JSONPath-Plus · 80avin · Feb 14, 2025 · Feb 14, 2025
diff --git a/demo/index.html b/demo/index.html
@@ -76,6 +76,7 @@ <h2>JSONPath Demo <i id="demoNode">(To demo on Node instead, see the <a href="ht
        </label>
      </div>
    </form>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js" integrity="sha512-qtX0GLM3qX8rxJN1gyDfcnMFFrKvixfoEOwbBib9VafR5vbChV5LeE5wSI/x+IlCkTY5ZFddFDCCfaVJJNnuKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="../dist/index-browser-umd.cjs"></script>
    <script src="index.js"></script>
  </body>

diff --git a/demo/index.js b/demo/index.js
@@ -1,4 +1,5 @@
-/* globals JSONPath -- Test UMD */
+/// <reference path="./types.d.ts" />
+/* globals JSONPath, LZString -- Test UMD */
 /* eslint-disable import/unambiguous -- Demo */

 // Todo: Extract testing example paths/contents and use for a
@@ -14,8 +15,38 @@
 const $ = (s) => document.querySelector(s);

 const jsonpathEl = $('#jsonpath');
+const jsonSample = $('#jsonSample');
+
+const updateUrl = () => {
+    const path = jsonpathEl.value;
+    const jsonText = LZString.compressToEncodedURIComponent(jsonSample.value);
+    const url = new URL(location.href);
+    url.searchParams.set('path', path);
+    url.searchParams.set('json', jsonText);
+    url.searchParams.set('eval', $('#eval').value);
+    url.searchParams.set('ignoreEvalErrors', $('#ignoreEvalErrors').value);
+    history.replaceState(null, '', url.toString());
+};
+
+const loadUrl = () => {
+    const url = new URL(location.href);
+    if (url.searchParams.has('path')) {
+        jsonpathEl.value = url.searchParams.get('path');
+    }
+    if (url.searchParams.has('json')) {
+        jsonSample.value = LZString.decompressFromEncodedURIComponent(
+            url.searchParams.get('json')
+        );
+    }
+    if (url.searchParams.has('eval')) {
+        $('#eval').value = url.searchParams.get('eval');
+    }
+    if (url.searchParams.has('ignoreEvalErrors')) {
+        $('#ignoreEvalErrors').value = url.searchParams.get('ignoreEvalErrors');
+    }
+};
+
 const updateResults = () => {
-    const jsonSample = $('#jsonSample');
    const reportValidity = () => {
        // Doesn't work without a timeout
        setTimeout(() => {
@@ -52,19 +83,26 @@ const updateResults = () => {
 };

 $('#jsonpath').addEventListener('input', () => {
+    updateUrl();
    updateResults();
 });

 $('#jsonSample').addEventListener('input', () => {
+    updateUrl();
    updateResults();
 });

 $('#eval').addEventListener('change', () => {
+    updateUrl();
    updateResults();
 });

 $('#ignoreEvalErrors').addEventListener('change', () => {
+    updateUrl();
    updateResults();
 });

-window.addEventListener('load', updateResults);
+window.addEventListener('load', () => {
+    loadUrl();
+    updateResults();
+});
diff --git a/demo/types.d.ts b/demo/types.d.ts
@@ -0,0 +1,12 @@
+import '../src/jsonpath.d.ts'
+import type { JSONPathType } from 'jsonpath-plus';
+
+declare global {
+    var LZString: {
+        decompressFromEncodedURIComponent: (value: string) => string;
+        compressToEncodedURIComponent: (value: string) => string;
+    };
+    var JSONPath: {
+        JSONPath: JSONPathType
+    }
+}