feat(ref, updateFromQuery): export updateFromQuery in provider for …

…routing solutions out of history.js

src/lib/middleware.ts

@@ -44,6 +44,7 @@ export interface InnerNamespace<T> {
   [ns: string]: NamespaceValues<T>
 }
 export interface StoreState<ValueState = object> {
+  updateFromQuery: (query: string) => void
   batchReplaceState: (
     ns: readonly string[],
     fn: (...valueState: ValueState[]) => void
@@ -276,16 +277,8 @@ export const converter = <T extends GenericObject>(
 ): StoreState<T> => {
   const memoizedGetInitialQueries = memoizeOne(parseSearchString)
 
-  const unregisterListener = historyInstance.listen((location, action) => {
-    // don't handle our own actions
-    if (
-      (action === 'REPLACE' || action === 'PUSH') &&
-      location.state &&
-      location.state.__g__
-    ) {
-      return
-    }
-    const nextQueries = memoizedGetInitialQueries(location.search)
+  const updateFromQuery = (search: string) => {
+    const nextQueries = memoizedGetInitialQueries(search)
     const namespaces = get().namespaces
     Object.keys(namespaces).forEach(ns => {
       set(
@@ -302,6 +295,18 @@ export const converter = <T extends GenericObject>(
         ns
       )
     })
+  }
+
+  const unregisterListener = historyInstance.listen((location, action) => {
+    // don't handle our own actions
+    if (
+      (action === 'REPLACE' || action === 'PUSH') &&
+      location.state &&
+      location.state.__g__
+    ) {
+      return
+    }
+    updateFromQuery(location.search)
   })
 
   const reset = (ns: string, event: HistoryEventType) =>
@@ -411,6 +416,7 @@ export const converter = <T extends GenericObject>(
       }, HistoryEventType.REGISTER)
       // unregister history event listener
       unregisterListener()
-    }
+    },
+    updateFromQuery
   }
 }

src/lib/provider.tsx

@@ -1,26 +1,52 @@
 /* tslint:disable:no-expression-statement readonly-array */
 import { History } from 'history'
-import React, { FC, useEffect, useMemo } from 'react'
+import React, {
+  FC,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo
+} from 'react'
 import { StoreApi, UseStore } from 'zustand'
+// tslint:disable-next-line:no-submodule-imports
+import shallow from 'zustand/shallow'
 import { StoreState } from './middleware'
 import { geschichte, StoreContext } from './store'
 
-interface Props {
+interface Props<T> {
   /** a history instance (e.g. createBrowserHistory()) */
   readonly history: History
 }
 
-export const Geschichte: FC<Props> = ({ children, history }) => {
-  const value = useMemo(() => geschichte(history), []) as [
-    UseStore<StoreState<any>>,
-    StoreApi<StoreState<any>>
-  ]
-  const [useStore] = value
-  const unregister = useStore((state: StoreState<any>) => state.unregister)
-  useEffect(() => {
-    return () => {
-      return unregister()
-    }
-  }, [unregister])
-  return <StoreContext.Provider value={value}>{children}</StoreContext.Provider>
-}
+export const Geschichte: FC<Props<any>> = forwardRef(
+  ({ children, history }, ref) => {
+    const value = useMemo(() => geschichte(history), []) as [
+      UseStore<StoreState<any>>,
+      StoreApi<StoreState<any>>
+    ]
+    const [useStore] = value
+    const state = useStore(
+      ({ unregister, updateFromQuery }: StoreState<any>) => ({
+        unregister,
+        updateFromQuery
+      }),
+      shallow
+    )
+    useImperativeHandle(
+      ref,
+      () => ({
+        updateFromQuery: state.updateFromQuery
+      }),
+      [state]
+    )
+    useEffect(() => {
+      const { unregister } = state
+      return () => {
+        return unregister()
+      }
+    }, [state])
+    return (
+      <StoreContext.Provider value={value}>{children}</StoreContext.Provider>
+    )
+  }
+)