chore: Debug printouts in dev only

47ng · Sep 13, 2023 · 54ca83f · 54ca83f
1 parent 65694d2
commit 54ca83f
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 17 deletions.
diff --git a/ambient.d.ts b/ambient.d.ts
@@ -0,0 +1 @@
+declare const __DEBUG__: boolean
diff --git a/package.json b/package.json
@@ -45,17 +45,11 @@
       "types": "./dist/parsers.d.ts"
     }
   },
-  "tsup": {
-    "entry": [
-      "src/lib/index.ts",
-      "src/lib/parsers.ts"
-    ]
-  },
   "scripts": {
     "dev": "run-p dev:*",
     "dev:build": "tsup --format esm --dts --watch",
     "dev:next": "next dev",
-    "build": "tsup --clean --dts --format esm,cjs",
+    "build": "NODE_ENV=production tsup --clean --dts --format esm,cjs",
     "test": "run-p test:types test:e2e:ci",
     "test:types": "tsd",
     "test:e2e:ci": "run-p --race test:e2e:next:start cypress:run",

diff --git a/src/lib/sync.ts b/src/lib/sync.ts
@@ -22,20 +22,26 @@ export function subscribeToQueryUpdates(
 let patched = false
 
 if (!patched && typeof window === 'object') {
-  // console.debug('Patching history')
+  __DEBUG__ && console.debug('Patching history')
   for (const method of ['pushState', 'replaceState'] as const) {
     const original = window.history[method].bind(window.history)
     window.history[method] = function nextUseQueryState_patchedHistory(
       state: any,
       title: string,
       url?: string | URL | null
     ) {
-      // console.debug(`history.${method}(${url}) ${title} %O`, state)
+      __DEBUG__ &&
+        console.debug(
+          `history.${method}(${url}) (${
+            title === NOSYNC_MARKER ? 'internal' : 'external'
+          }) %O`,
+          state
+        )
       // If someone else than our hooks have updated the URL,
       // send out a signal for them to sync their internal state.
       if (title !== NOSYNC_MARKER && url) {
         const search = new URL(url, location.origin).searchParams
-        // console.debug(`Triggering sync with ${search.toString()}`)
+        __DEBUG__ && console.debug(`Triggering sync with ${search.toString()}`)
         // Here we're delaying application to next tick to avoid:
         // `Warning: useInsertionEffect must not schedule updates.`
         //

diff --git a/src/lib/update-queue.ts b/src/lib/update-queue.ts
@@ -26,7 +26,7 @@ export function enqueueQueryStringUpdate<Value>(
     value: value === null ? null : serialize(value),
     options
   }
-  // console.debug('Pushing to queue %O', queueItem)
+  __DEBUG__ && console.debug('Pushing to queue %O', queueItem)
   updateQueue.push(queueItem)
 }
 
@@ -49,7 +49,7 @@ export function flushToURL(router: Router) {
         0,
         Math.min(FLUSH_RATE_LIMIT_MS, FLUSH_RATE_LIMIT_MS - timeSinceLastFlush)
       )
-      // console.debug('Scheduling flush in %f ms', flushInMs)
+      __DEBUG__ && console.debug('Scheduling flush in %f ms', flushInMs)
       setTimeout(() => {
         lastFlushTimestamp = performance.now()
         const search = flushUpdateQueue(router)
@@ -73,7 +73,7 @@ function flushUpdateQueue(router: Router) {
   // Work on a copy and clear the queue immediately
   const items = updateQueue.slice()
   updateQueue = []
-  // console.debug('Flushing queue %O', items)
+  __DEBUG__ && console.debug('Flushing queue %O', items)
 
   const options: Required<Options> = {
     history: 'replace',
@@ -105,6 +105,7 @@ function flushUpdateQueue(router: Router) {
   // otherwise using a relative URL works just fine.
   // todo: Does it when using the router with `shallow: false` on dynamic paths?
   const url = query ? `?${query}${hash}` : `${path}${hash}`
+  __DEBUG__ && console.debug('Updating url %s', url)
   try {
     if (options.shallow) {
       const updateUrl =

diff --git a/src/lib/useQueryState.ts b/src/lib/useQueryState.ts
@@ -209,6 +209,12 @@ export function useQueryState<T = string>(
   const router = useRouter()
   // Not reactive, but available on the server and on page load
   const initialSearchParams = useSearchParams()
+  __DEBUG__ &&
+    console.debug(
+      `initialSearchParams: ${
+        initialSearchParams === null ? 'null' : initialSearchParams.toString()
+      }`
+    )
   const [internalState, setInternalState] = React.useState<T | null>(() => {
     const value =
       typeof window !== 'object'
@@ -218,21 +224,21 @@ export function useQueryState<T = string>(
           new URLSearchParams(window.location.search).get(key) ?? null
     return value === null ? null : parse(value)
   })
-  // console.debug(`render ${key}: ${internalState}`)
+  __DEBUG__ && console.debug(`render \`${key}\`: ${internalState}`)
 
   // Sync all hooks together & with external URL changes
   React.useInsertionEffect(() => {
     function syncFromURL(search: URLSearchParams) {
       const value = search.get(key) ?? null
       const v = value === null ? null : parse(value)
-      // console.debug(`sync   ${key}: ${v}`)
+      __DEBUG__ && console.debug(`sync \`${key}\`: ${v}`)
       setInternalState(v)
     }
-    // console.debug(`Subscribing to sync for \`${key}\``)
+    __DEBUG__ && console.debug(`Subscribing to sync for \`${key}\``)
     emitter.on(key, setInternalState)
     emitter.on(SYNC_EVENT_KEY, syncFromURL)
     return () => {
-      // console.debug(`Unsubscribing from sync for \`${key}\``)
+      __DEBUG__ && console.debug(`Unsubscribing from sync for \`${key}\``)
       emitter.off(key, setInternalState)
       emitter.off(SYNC_EVENT_KEY, syncFromURL)
     }

diff --git a/tsup.config.ts b/tsup.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsup'
+
+console.dir(process.env.NODE_ENV)
+
+export default defineConfig({
+  entry: ['src/lib/index.ts', 'src/lib/parsers.ts'],
+  splitting: true,
+  define: {
+    __DEBUG__: process.env.NODE_ENV === 'production' ? 'false' : 'true'
+  }
+})