[state-router] Set "strict" in TS config and fix typings

packages/@sanity/state-router/package.json

@@ -9,7 +9,8 @@
     "compile": "tsc",
     "compile:watch": "babel --watch --out-dir lib/ src/",
     "benchmark": "npm run compile && node --prof --logfile=benchmarks.log perf/benchmark.js",
-    "clean": "rimraf lib"
+    "clean": "rimraf lib",
+    "type-check": "tsc --noEmit"
   },
   "keywords": [
     "sanity",

packages/@sanity/state-router/src/components/IntentLink.tsx

@@ -11,13 +11,13 @@ interface IntentLinkProps {
 export default class IntentLink extends React.PureComponent<
   IntentLinkProps & Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'>
 > {
-  context: RouterProviderContext
+  context: RouterProviderContext | null = null
 
   static contextTypes = {
     __internalRouter: internalRouterContextTypeCheck
   }
 
-  _element: Link
+  _element: Link | null = null
 
   focus() {
     if (this._element) {
@@ -32,9 +32,12 @@ export default class IntentLink extends React.PureComponent<
   }
 
   resolveIntentLink(intent: string, params?: IntentParameters) {
+    if (!this.context) throw new Error('IntentLink: missing context value')
+
     if (!this.context.__internalRouter) {
       return `javascript://intent@${JSON.stringify({intent, params})}`
     }
+
     return this.context.__internalRouter.resolveIntentLink(intent, params)
   }
 

packages/@sanity/state-router/src/components/Link.tsx

@@ -18,8 +18,8 @@ interface LinkProps {
 export default class Link extends React.PureComponent<
   LinkProps & Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'>
 > {
-  context: RouterProviderContext
-  _element: HTMLAnchorElement
+  context: RouterProviderContext | null = null
+  _element: HTMLAnchorElement | null = null
 
   static defaultProps = {
     replace: false
@@ -30,6 +30,8 @@ export default class Link extends React.PureComponent<
   }
 
   private handleClick = (event: React.MouseEvent<HTMLAnchorElement>): void => {
+    if (!this.context) throw new Error('Link: missing context value')
+
     if (!this.context.__internalRouter) {
       return
     }
@@ -40,6 +42,8 @@ export default class Link extends React.PureComponent<
 
     const {onClick, href, target, replace} = this.props
 
+    if (!href) return
+
     if (onClick) {
       onClick(event)
     }

packages/@sanity/state-router/src/components/RouteScope.tsx

@@ -2,10 +2,14 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import isEmpty from '../utils/isEmpty'
 
-import {InternalRouter, NavigateOptions, RouterProviderContext} from './types'
 import {RouterContext} from '../RouterContext'
+import {InternalRouter, NavigateOptions, RouterProviderContext} from './types'
 
-function addScope(routerState: Object, scope: string, scopedState: Object) {
+function addScope(
+  routerState: Record<string, any>,
+  scope: string,
+  scopedState: Record<string, any>
+) {
   return (
     scopedState && {
       ...routerState,
@@ -20,7 +24,7 @@ type Props = {
 }
 
 export default class RouteScope extends React.Component<Props> {
-  context: RouterProviderContext
+  context: RouterProviderContext | null = null
   __internalRouter: InternalRouter
 
   static childContextTypes = {
@@ -51,22 +55,26 @@ export default class RouteScope extends React.Component<Props> {
 
   getScopedState = () => {
     const {scope} = this.props
+    if (!this.context) throw new Error('RouteScope: missing context value')
     const parentInternalRouter = this.context.__internalRouter
     return parentInternalRouter.getState()[scope]
   }
 
-  resolvePathFromState = (nextState: Object): string => {
+  resolvePathFromState = (nextState: Record<string, any>): string => {
+    if (!this.context) throw new Error('RouteScope: missing context value')
+
     const parentInternalRouter = this.context.__internalRouter
     const scope = this.props.scope
 
-    const nextStateScoped: Object = isEmpty(nextState)
+    const nextStateScoped: Record<string, any> = isEmpty(nextState)
       ? {}
       : addScope(parentInternalRouter.getState(), scope, nextState)
 
     return parentInternalRouter.resolvePathFromState(nextStateScoped)
   }
 
-  navigate = (nextState: Object, options?: NavigateOptions): void => {
+  navigate = (nextState: Record<string, any>, options?: NavigateOptions): void => {
+    if (!this.context) throw new Error('RouteScope: missing context value')
     const parentInternalRouter = this.context.__internalRouter
     const nextScopedState = addScope(parentInternalRouter.getState(), this.props.scope, nextState)
     parentInternalRouter.navigate(nextScopedState, options)

packages/@sanity/state-router/src/components/StateLink.tsx

@@ -11,8 +11,8 @@ type Props = {
 }
 
 export default class StateLink extends React.PureComponent<Props> {
-  context: RouterProviderContext
-  _element: Link
+  context: RouterProviderContext | null = null
+  _element: Link | null = null
 
   static defaultProps = {
     replace: false,
@@ -44,10 +44,13 @@ export default class StateLink extends React.PureComponent<Props> {
     return this.resolvePathFromState(nextState)
   }
 
-  resolvePathFromState(state: Object) {
+  resolvePathFromState(state: Record<string, any>) {
+    if (!this.context) throw new Error('StateLink: missing context value')
+
     if (!this.context.__internalRouter) {
       return `javascript://state@${JSON.stringify(state)}`
     }
+
     return this.context.__internalRouter.resolvePathFromState(state)
   }
 

packages/@sanity/state-router/src/components/WithRouter.tsx

@@ -3,7 +3,7 @@ import withRouterHOC from './withRouterHOC'
 import {Router} from './types'
 
 type Props = {
-  router?: Router
+  router: Router
   children: (router: Router) => React.ReactElement
 }
 

packages/@sanity/state-router/src/components/withRouterHOC.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
+import React, {ComponentType} from 'react'
 import internalRouterContextTypeCheck from './internalRouterContextTypeCheck'
 import {Router, InternalRouter} from './types'
-import {ComponentType} from 'react'
 
 const NO_CONTEXT_STATE = {
   state: {},
@@ -22,28 +21,33 @@ export default function withRouterHOC<OuterProps>(
 ) {
   return class WithRouter extends React.Component<OuterProps> {
     static displayName = `withRouter(${Component.displayName || Component.name})`
-    unsubscribe: () => void
+    unsubscribe: (() => void) | null = null
+
     state = {
       routerState: {}
     }
 
     context: {
       __internalRouter?: InternalRouter
-    }
+    } | null = null
 
     static contextTypes = {
       __internalRouter: internalRouterContextTypeCheck
     }
 
     constructor(props, context) {
       super(props)
+
       const __internalRouter = context.__internalRouter
+
       if (__internalRouter) {
         this.state = {routerState: __internalRouter.getState()}
       }
     }
 
     UNSAFE_componentWillMount() {
+      if (!this.context) throw new Error('WithRouter: missing context value')
+
       const __internalRouter = this.context.__internalRouter
       if (!__internalRouter) {
         return
@@ -54,10 +58,12 @@ export default function withRouterHOC<OuterProps>(
     }
 
     componentWillUnmount() {
-      this.unsubscribe()
+      if (this.unsubscribe) this.unsubscribe()
     }
 
     render() {
+      if (!this.context) throw new Error('WithRouter: missing context value')
+
       const internalRouter = this.context.__internalRouter
 
       const router: Router = internalRouter

packages/@sanity/state-router/src/parseRoute.ts

@@ -25,10 +25,10 @@ function createSegment(segment: string): Segment | null {
 export default function parseRoute(route: string): Route {
   const [pathname] = route.split('?')
 
-  const segments: Segment[] = pathname
+  const segments = pathname
     .split('/')
     .map(createSegment)
-    .filter(Boolean)
+    .filter(Boolean) as Segment[]
 
   return {
     raw: route,

packages/@sanity/state-router/src/resolveStateFromPath.ts

@@ -29,7 +29,9 @@ function matchPath(
   }
 
   const rest = parts.slice(segmentsLength)
-  let childState = null
+  let childState: {
+    [key: string]: string
+  } | null = null
   const children =
     typeof node.children === 'function' ? arrayify(node.children(state)) : node.children
   children.some(childNode => {
@@ -44,11 +46,11 @@ function matchPath(
     return null
   }
 
-  const mergedState = {...state, ...childState}
+  const mergedState = {...state, ...(childState || {})}
   return node.scope ? {[node.scope]: mergedState} : mergedState
 }
 
-export default function resolveStateFromPath(node: Node, path: string): Object | null {
+export default function resolveStateFromPath(node: Node, path: string): Record<string, any> | null {
   debug('resolving state from path %s', path)
 
   const pathMatch = matchPath(node, path.split('?')[0])

packages/@sanity/state-router/tsconfig.json

@@ -4,7 +4,6 @@
   "exclude": ["node_modules", "test/**/*.ts"],
   "compilerOptions": {
     "declaration": true,
-    "strict": false,
     "jsx": "react",
     "outDir": "./lib"
   }