wip: functional draft

Author: wanjas

.eslintrc.json

@@ -23,7 +23,7 @@
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nx/typescript"],
+      "extends": ["plugin:@nx/typescript", "plugin:@nx/react"],
       "rules": {}
     },
     {

package.json

@@ -25,6 +25,10 @@
     "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
+    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-import": "2.29.0",
     "esbuild": "^0.19.2",
     "eslint": "~8.46.0",
     "eslint-config-prettier": "^9.0.0",
@@ -35,7 +39,8 @@
     "ts-jest": "^29.1.0",
     "ts-node": "10.9.1",
     "typescript": "5.2.2",
-    "verdaccio": "^5.0.4"
+    "verdaccio": "^5.0.4",
+    "next": "^14.0.1"
   },
   "nx": {
     "includedScripts": []

packages/core/package.json

@@ -1,7 +1,17 @@
 {
-  "name": "url-state",
+  "name": "react-url-state",
   "version": "0.0.1",
   "dependencies": {},
   "type": "commonjs",
-  "main": "./index.cjs"
+  "main": "./index.cjs",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "zod": "^3.0.0",
+    "next": "^14.0.1"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  }
 }

packages/core/src/index.ts

@@ -1,18 +1,19 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { z } from 'zod'
-
-let isSubscribed = false;
+import { z } from 'zod';
+import { urlParamsToObject } from './utils';
 
 type StateUpdateNotifier = (searchString: string) => void;
+
+let isSubscribed = false;
 const subscribers = new Map<StateUpdateNotifier, StateUpdateNotifier>();
 
-let currentStateString = ''
+let currentStateString = '';
 
 function update() {
-    if (document.location.search !== currentStateString) {
-      currentStateString = document.location.search;
-      subscribers.forEach((subscriber) => subscriber(currentStateString));
-    }
+  if (document.location.search !== currentStateString) {
+    currentStateString = document.location.search;
+    subscribers.forEach((subscriber) => subscriber(currentStateString));
+  }
 }
 
 function subscribeToHistory(fn: StateUpdateNotifier) {
@@ -22,57 +23,145 @@ function subscribeToHistory(fn: StateUpdateNotifier) {
     return;
   }
 
-  window.addEventListener("popstate", update);
+  window.addEventListener('popstate', update);
 }
 
 function unsubscribeFromHistory(fn: StateUpdateNotifier) {
   subscribers.delete(fn);
 
   if (subscribers.size === 0) {
-    window.removeEventListener("popstate", update);
+    window.removeEventListener('popstate', update);
     isSubscribed = false;
   }
 }
 
-const schema = z.object({
-  name: z.string(),
-  age: z.number(),
-});
+// const schema = z.object({
+//   name: z.string(),
+//   age: z.number(),
+// });
 
 export type UrlStateOptions = {
   preserveUnknown: boolean;
-}
+};
 
-export type UrlState<T extends z.ZodObject<any>> = {
-  data: T['_type'];
+export type UrlState<T extends z.ZodObject<Record<string, z.ZodTypeAny>>> = {
+  data: z.infer<T> | null;
   isError: boolean;
+  error: z.ZodError | null;
+};
+
+// export type UrlStateValue =
+//   | string
+//   | { toString: () => string }
+//   | (string | { toString: () => string })[];
+
+export type UrlStateMethods<
+  T extends z.ZodObject<Record<string, z.ZodTypeAny>>,
+> = {
+  reset: () => void;
+  replace: (data: z.infer<T>) => void;
+  setValue: <K extends keyof z.infer<T>>(key: K, value: z.infer<T>[K]) => void;
+};
+
+function usePush(): (href: string) => void {
+  return useCallback((href: string) => {
+    window.history.pushState({}, '', href);
+  }, []);
 }
 
-export function useUrlState<T extends z.ZodObject<any>>(schema: T, options?: UrlStateOptions): UrlState<T> {
+export function useUrlState<
+  T extends z.ZodObject<Record<string, z.ZodTypeAny>>,
+>(schema: T, options?: UrlStateOptions): UrlState<T> & UrlStateMethods<T> {
   options = {
     preserveUnknown: false,
     ...options,
-  }
+  };
 
   const schemaRef = useRef(schema);
-  const rawDataRef = useRef<Record<string, unknown>>({});
 
-  const recalculateState = useCallback((searchString: string) => {
-    const params = new URLSearchParams(searchString);
-
-  }, [])
+  const [state, setState] = useState<UrlState<T>>({
+    data: null,
+    isError: false,
+    error: null,
+  });
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  const recalculateState = useCallback(
+    (searchString: string) => {
+      const params = new URLSearchParams(searchString);
+      const object = urlParamsToObject(params);
+
+      const validationResult = schemaRef.current.safeParse(object);
+
+      const result = validationResult.success
+        ? { success: true, data: validationResult.data, error: null }
+        : { success: false, data: null, error: validationResult.error };
+
+      if (options?.preserveUnknown) {
+        result.data = { ...object, ...result.data };
+      }
+
+      setState({
+        data: result.data,
+        isError: !result.success,
+        error: result.error,
+      });
+    },
+    [options?.preserveUnknown],
+  );
 
   useEffect(() => {
-    subscribeToHistory(recalculateState)
+    subscribeToHistory(recalculateState);
 
     return () => {
-      unsubscribeFromHistory(recalculateState)
-    }
-  }, []);
+      unsubscribeFromHistory(recalculateState);
+    };
+  }, [recalculateState]);
+
+  const push = usePush();
+
+  const reset = useCallback<UrlStateMethods<T>['reset']>(() => {
+    const href = `?${new URLSearchParams({}).toString()}`;
+    push(href);
+  }, [push]);
+
+  const replace = useCallback<UrlStateMethods<T>['replace']>(
+    (data) => {
+      const href = `?${new URLSearchParams(data).toString()}`;
+      push(href);
+    },
+    [push],
+  );
+
+  const setValue = useCallback<UrlStateMethods<T>['setValue']>(
+    (key, value) => {
+      const href = `?${new URLSearchParams({
+        ...stateRef.current.data,
+        [key]: value,
+      }).toString()}`;
+      push(href);
+    },
+    [push],
+  );
+
+  return { ...state, replace, setValue, reset };
+}
 
+function useTest() {
+  const rez = useUrlState(
+    z.object({
+      name: z.string(),
+      age: z.number(),
+      birthDate: z.date().optional(),
+    }),
+  );
 
-  return {
-    data: schema.parse({ name: 'John', age: 42 }),
-    isError: false,
-  }
+  rez.setValue('age', 10);
+  rez.setValue('birthDate', new Date());
+
+  console.log(rez.data?.birthDate);
+
+  rez.replace({ name: 'test', age: 10, birthDate: new Date() });
+  rez.replace({ name: 'test', age: 10 });
 }

packages/core/src/utils.ts

@@ -0,0 +1,19 @@
+export function urlParamsToObject(params: URLSearchParams) {
+  const object: Record<string, string | string[]> = {};
+
+  for (const [key, value] of params.entries()) {
+    if (!object[key]) {
+      object[key] = value;
+      continue;
+    }
+
+    const currentValue = object[key];
+    if (typeof currentValue === 'string') {
+      object[key] = [currentValue, value];
+    } else {
+      currentValue.push(value);
+    }
+  }
+
+  return object;
+}