feat: Generate sharable link for code-explorer

Author: amareshsm

src/App.tsx

@@ -1,17 +1,50 @@
-import React, { useEffect, useLayoutEffect } from 'react';
+import { useLayoutEffect } from 'react';
 import './App.css';
 import { Navbar } from './components/navbar';
 import { useExplorer } from './hooks/use-explorer';
 import { tools } from './lib/tools';
 import { Editor } from './components/editor';
 import { ToolSelector } from './components/tool-selector';
-import { ThemeProvider, useTheme } from './components/theme-provider';
+import { ThemeProvider } from './components/theme-provider';
+import { decodeFromBase64 } from './lib/utils';
 
 function App() {
-  const { theme } = useTheme();
-  const { language, tool, JSCode, setJSCode, JSONCode, setJSONCode, jsonMode} = useExplorer();
+  const { setTool, language, tool, JSCode, setJSCode, JSONCode, setJSONCode, setLanguage, setParser,
+    setSourceType, setEsVersion, setIsJSX, setJsonMode, setWrap, setAstViewMode, setScopeViewMode,
+    setPathViewMode, setPathIndexes, setPathIndex } = useExplorer();
   const activeTool = tools.find(({ value }) => value === tool) ?? tools[0];
-  
+
+  useLayoutEffect(() => {
+    const getUrlState = () => {
+      try {
+        const urlState = JSON.parse(decodeFromBase64(window.location.hash.replace(/^#/u, "")));
+        if (urlState?.state) {
+          const { tool, JSCode, JSONCode, language, parser, sourceType, esVersion, isJSX,
+            jsonMode, wrap, astViewMode, scopeViewMode, pathViewMode, pathIndexes, pathIndex } = urlState.state;
+
+          setTool(tool);
+          setJSCode(JSCode);
+          setJSONCode(JSONCode);
+          setLanguage(language);
+          setParser(parser);
+          setSourceType(sourceType);
+          setEsVersion(esVersion);
+          setIsJSX(isJSX);
+          setJsonMode(jsonMode);
+          setWrap(wrap);
+          setAstViewMode(astViewMode);
+          setScopeViewMode(scopeViewMode);
+          setPathViewMode(pathViewMode);
+          setPathIndexes(pathIndexes);
+          setPathIndex(pathIndex);
+        }
+      } catch {
+        console.error('error while parsing');
+      }
+    };
+    getUrlState();
+  }, [])
+
   return (
     <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
       <div className="antialiased touch-manipulation font-sans">
@@ -22,9 +55,10 @@ function App() {
               <Editor
                 className="h-[30dvh] sm:h-full"
                 language={language}
-                value={language === 'javascript' ? JSCode: JSONCode}
+                value={language === 'javascript' ? JSCode : JSONCode}
                 onChange={(value) => {
-                  language === 'javascript' ? setJSCode(value ?? '') : setJSONCode(value ?? '')  }}
+                  language === 'javascript' ? setJSCode(value ?? '') : setJSONCode(value ?? '')
+                }}
               />
               <div className="bg-foreground/5 pb-8 overflow-auto h-[70dvh] sm:h-full relative flex flex-col">
                 <div className="flex sm:items-center flex-col sm:flex-row justify-between p-4 gap-2 z-10">

src/hooks/use-explorer.ts

@@ -1,7 +1,8 @@
 import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import type { Options } from 'espree';
-import {defaultJavascriptCode, defaultJSONCode} from '../lib/const'
+import { defaultJavascriptCode, defaultJSONCode } from '../lib/const'
+import { storeState } from '../lib/utils';
 export type SourceType = Exclude<Options['sourceType'], undefined>;
 export type Version = Exclude<Options['ecmaVersion'], undefined>;
 
@@ -22,7 +23,7 @@ type ExplorerState = {
   setParser: (parser: string) => void;
 
   sourceType: SourceType;
-  setSourceType: (sourceType: string) => void;
+  setSourceType: (sourceType: SourceType) => void;
 
   esVersion: Version;
   setEsVersion: (esVersion: string) => void;
@@ -53,62 +54,65 @@ type ExplorerState = {
 
 };
 
+const createSetter = <T extends keyof ExplorerState>(
+  key: T,
+  set: (state: Partial<ExplorerState>) => void
+) => (value: ExplorerState[T]) => {
+  set({ [key]: value });
+  storeState();
+};
+
 export const useExplorer = create<ExplorerState>()(
   devtools(
     persist(
       (set) => ({
         tool: 'ast',
-        setTool: (tool) => set({ tool }),
+        setTool: createSetter('tool', set),
 
         JSCode: defaultJavascriptCode,
-        setJSCode: (JSCode) => set({ JSCode }),
+        setJSCode: createSetter('JSCode', set),
 
         JSONCode: defaultJSONCode,
-        setJSONCode: (JSONCode) => set({ JSONCode }),
+        setJSONCode: createSetter('JSONCode', set),
 
         language: 'javascript',
-        setLanguage: (language) => set({ language }),
+        setLanguage: createSetter('language', set),
 
         parser: 'espree',
-        setParser: (parser) => set({ parser }),
+        setParser: createSetter('parser', set),
 
         sourceType: 'module',
-        setSourceType: (sourceType) =>
-          set({ sourceType: sourceType as SourceType }),
+        setSourceType: createSetter('sourceType', set),
 
         esVersion: 'latest',
-        setEsVersion: (esVersion) =>
-          set({
-            esVersion:
-              esVersion === 'latest'
-                ? 'latest'
-                : (Number(esVersion) as Options['ecmaVersion']),
-          }),
+        setEsVersion: (esVersion) => {
+          const version = esVersion === 'latest' ? 'latest' : Number(esVersion);
+          createSetter('esVersion', set)(version as Version);
+        },
 
         isJSX: true,
-        setIsJSX: (isJSX) => set({ isJSX }),
+        setIsJSX: createSetter('isJSX', set),
 
         jsonMode: 'jsonc',
-        setJsonMode: (mode) => set({ jsonMode: mode }),
+        setJsonMode: createSetter('jsonMode', set),
 
         wrap: true,
-        setWrap: (wrap) => set({ wrap }),
+        setWrap: createSetter('wrap', set),
 
         astViewMode: 'json',
-        setAstViewMode: (mode) => set({ astViewMode: mode }),
+        setAstViewMode: createSetter('astViewMode', set),
 
         scopeViewMode: 'flat',
-        setScopeViewMode: (mode) => set({ scopeViewMode: mode }),
+        setScopeViewMode: createSetter('scopeViewMode', set),
 
         pathViewMode: 'code',
-        setPathViewMode: (mode) => set({ pathViewMode: mode }),
+        setPathViewMode: createSetter('pathViewMode', set),
 
         pathIndexes: 1,
-        setPathIndexes: (indexes) => set({ pathIndexes: indexes }),
+        setPathIndexes: createSetter('pathIndexes', set),
 
         pathIndex: 0,
-        setPathIndex: (index) => set({ pathIndex: index }),
-
+        setPathIndex: createSetter('pathIndex', set),
       }),
       {
         name: 'eslint-explorer',

src/lib/utils.ts

@@ -6,3 +6,19 @@ export const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));
 
 export const capitalize = (substring: string): string =>
   substring.charAt(0).toUpperCase() + substring.slice(1);
+
+export const
+  encodeToBase64 = (text: string) => {
+    return window.btoa(unescape(encodeURIComponent(text)));
+  };
+
+export const decodeFromBase64 = (base64: any) => {
+  return decodeURIComponent(escape(window.atob(base64)));
+}
+
+export const storeState = () => {
+  const serializedState = window.localStorage.getItem("eslint-explorer");
+  const url = new URL(window.location.href);
+  url.hash = encodeToBase64(serializedState || '');
+  history.replaceState(null, '', url);
+};

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": [
       "dom",
       "dom.iterable",