feat(demo): make demo link shareable

Author: 80avin

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>

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();
+});

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
+    }
+}