feat: read the code from hash

Author: zhangmo8

package.json

@@ -42,6 +42,7 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "codemirror": "^6.0.1",
+    "fflate": "^0.8.2",
     "globals": "^15.11.0",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",

pnpm-lock.yaml

@@ -1,5 +1,6 @@
-import { type FC, type PropsWithChildren, useState } from "react"
+import { type FC, type PropsWithChildren, useEffect, useState } from "react"
 import { DEFAULT_REPL_STATE, ReplContext, type ReplState } from "./store"
+import { deserialize, serialize } from "./utils"
 
 interface Props extends PropsWithChildren {
   config?: ReplState
@@ -13,8 +14,23 @@ export const ReplProvider: FC<Props> = ({ children, config = {} }) => {
 
   const [state, setState] = useState<ReplState>(value)
 
+  const onChangeCode = (code: string) => {
+    setState({ ...state, code })
+    history.replaceState({}, "", serialize(code))
+  }
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    try {
+      const code = deserialize(location.hash)
+      setState({ ...state, code })
+    } catch (error) {
+      setState({ ...state, code: state.defaultCode })
+    }
+  }, [])
+
   return (
-    <ReplContext.Provider value={{ state, setState }}>
+    <ReplContext.Provider value={{ state, setState, onChangeCode }}>
       {children}
     </ReplContext.Provider>
   )

src/ReplProvider.tsx

@@ -4,16 +4,12 @@ import { useContext } from "react"
 import CodeMirror from "./CodeMirror"
 
 const EditorContainer = () => {
-  const { state, setState } = useContext(ReplContext)
+  const { state, onChangeCode } = useContext(ReplContext)
   const { code = "" } = state
 
-  const onChange = (code: string) => {
-    setState({ ...state, code })
-  }
-
   return (
     <div>
-      <CodeMirror code={code} onChange={onChange} />
+      <CodeMirror code={code} onChange={onChangeCode} />
     </div>
   )
 }

src/components/Editor/index.tsx

@@ -40,7 +40,7 @@ const Output = () => {
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
-    transformOutput(code)
+    if (code) transformOutput(code)
   }, [code])
 
   return (

src/components/Output/index.tsx

@@ -77,9 +77,11 @@ export const DEFAULT_REPL_STATE: ReplState = {
 export const ReplContext = createContext<{
   state: ReplState
   setState: Dispatch<ReplState>
+  onChangeCode: (code: string) => void
 }>({
   state: DEFAULT_REPL_STATE,
   setState: () => {},
+  onChangeCode: () => {},
 })
 
 export const useReplStore = () => {

src/store.ts

@@ -0,0 +1,53 @@
+import { strFromU8, strToU8, unzlibSync, zlibSync } from "fflate"
+import logger from "./logger"
+
+// biome-ignore lint/complexity/noBannedTypes: <explanation>
+export function debounce(fn: Function, n = 100) {
+  let handle: any
+  return (...args: any[]) => {
+    if (handle) clearTimeout(handle)
+    handle = setTimeout(() => {
+      fn(...args)
+    }, n)
+  }
+}
+
+export function utoa(data: string): string {
+  const buffer = strToU8(data)
+  const zipped = zlibSync(buffer, { level: 9 })
+  const binary = strFromU8(zipped, true)
+  return btoa(binary)
+}
+
+export function atou(base64: string): string {
+  const binary = atob(base64)
+
+  // zlib header (x78), level 9 (xDA)
+  if (binary.startsWith("\x78\xDA")) {
+    const buffer = strToU8(binary, true)
+    const unzipped = unzlibSync(buffer)
+    return strFromU8(unzipped)
+  }
+
+  // old unicode hacks for backward compatibility
+  // https://base64.guru/developers/javascript/examples/unicode-strings
+  return decodeURIComponent(escape(binary))
+}
+
+export function deserialize(serializedState: string) {
+  if (serializedState.startsWith("#"))
+    serializedState = serializedState.slice(1)
+  let saved: any
+  try {
+    saved = JSON.parse(atou(serializedState))
+  } catch (err) {
+    logger.error(err)
+    throw err
+  }
+
+  return saved
+}
+
+export function serialize(code: string) {
+  return `#${utoa(JSON.stringify(code))}`
+}