@codeleap/web-navigation 5.4.4

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@codeleap/web-navigation",
+  "version": "5.4.4",
+  "main": "src/index.ts",
+  "license": "UNLICENSED",
+  "repository": {
+    "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
+    "type": "git",
+    "directory": "packages/web-navigation"
+  },
+  "devDependencies": {
+    "ts-node-dev": "1.1.8"
+  },
+  "scripts": {
+    "build": "echo 'No build needed'"
+  },
+  "peerDependencies": {
+    "typescript": "5.5.2",
+    "@fastify/deepmerge": "1.3.0"
+  }
+}

package/package.json.bak

@@ -0,0 +1,21 @@
+{
+  "name": "@codeleap/web-navigation",
+  "version": "5.4.4",
+  "main": "src/index.ts",
+  "license": "UNLICENSED",
+  "repository": {
+    "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
+    "type": "git",
+    "directory": "packages/web-navigation"
+  },
+  "devDependencies": {
+    "ts-node-dev": "1.1.8"
+  },
+  "scripts": {
+    "build": "echo 'No build needed'"
+  },
+  "peerDependencies": {
+    "typescript": "5.5.2",
+    "@fastify/deepmerge": "1.3.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './navigation'

package/src/navigation.tsx

@@ -0,0 +1,282 @@
+import { AnyValue, Config, History, Navigator, RouteParams, RoutePath, Routes } from './types'
+import deepmerge from '@fastify/deepmerge'
+
+const IS_SSR = typeof window === 'undefined' || typeof history === 'undefined'
+
+const defaultConfig: Partial<Config> = {
+  historyEnabled: false,
+  getMetadata: () => { },
+}
+
+export type {
+  Navigator,
+  Routes,
+}
+
+export class Navigation<O extends object, R extends object = {}, C extends Record<string, any> = {}> {
+  private _history: History = {}
+
+  private config: Config = defaultConfig
+
+  get history() {
+    return this._history
+  }
+
+  public context: C = {} as C
+
+  private putHistory(path: RoutePath, info: any = {}) {
+    const idx = Object.keys(this._history).length + 1
+
+    const origin = IS_SSR ? null : window?.location?.origin
+
+    const value: History = {
+      [idx]: {
+        origin,
+        date: new Date(),
+        path,
+        metadata: this.config?.getMetadata?.(),
+        info,
+      },
+    }
+
+    this._history = this.merge(this._history, value)
+  }
+
+  private merge(obj: object, addObj: AnyValue) {
+    return deepmerge({ all: true })(
+      obj ?? {},
+      addObj ?? {},
+    )
+  }
+
+  private navigator: Navigator<O> = null
+
+  private routes: R = {} as R
+
+  constructor(
+    routes: R,
+    navigator: Navigator<O, C>,
+    config: Config = {},
+  ) {
+    this.navigator = navigator
+    this.routes = routes
+    this.config = this.merge(this.config, config)
+  }
+
+  /**
+   * Checks if the user is on a certain route based on the parameters passed
+   * @param route Route that will be used to direct
+   * @param routeParams Parameters that will be applied to the route
+   * @param exact Accurate path checking - default false
+   * @returns Is on the route - boolean
+   */
+  public isCurrentRoute<T extends keyof Routes<R>>(
+    route: T,
+    // @ts-expect-error
+    routeParams: Record<Routes<R>[T], string | number> = {} as any,
+    exact = false,
+  ) {
+    if (IS_SSR) return false
+
+    let path = window?.location?.pathname
+
+    // @ts-ignore
+    const routePath = this.getPathWithParams(route, routeParams)
+
+    const isRootPath = routePath === '/'
+
+    if (isRootPath) {
+      const { pathname, origin, href } = window.location || {}
+
+      path = href?.replace(path, '')
+      path = path?.replace(origin, '')
+
+      return !path || pathname == routePath
+    }
+
+    if (exact) {
+      return path?.endsWith(routePath)
+    }
+
+    if (path?.includes(routePath)) {
+      return true
+    }
+
+    return false
+  }
+
+  /**
+   * Get the path from the route
+   * @param route Route that will be used to direct
+   * @returns Path - string
+   */
+  public getPath(route: keyof Routes<R>): string {
+    let path = this.routes
+
+    // @ts-ignore
+    if (route?.includes('.')) {
+      // @ts-ignore
+      const indexesAccess = route?.split('.')
+
+      for (const index of indexesAccess) {
+        path = path?.[index]
+      }
+    } else {
+      // @ts-ignore
+      path = path?.[route]
+    }
+
+    return String(path)?.trim?.()
+  }
+
+  /**
+   * Get the path from the route and route params
+   * @param route Route that will be used to direct
+   * @param routeParams Parameters that will be applied to the route
+   * @returns Path - string
+   */
+  public getPathWithParams<T extends keyof Routes<R>>(
+    route: T,
+    // @ts-expect-error
+    routeParams: Record<Routes<R>[T], string | number> = {} as any,
+  ) {
+    let path = this.getPath(route)
+
+    for (const key in routeParams) {
+      const value = String(routeParams?.[key])
+
+      const searchPartial = `{{${key}}}`
+
+      if (path?.includes(searchPartial)) {
+        path = path?.replace(searchPartial, encodeURIComponent(value))
+      }
+    }
+
+    if (!path?.startsWith('/')) {
+      path = '/' + path
+    }
+
+    if (!path?.endsWith('/')) {
+      path = path + '/'
+    }
+
+    return path?.trim()
+  }
+
+  /**
+   * Function to navigate to the previous page, if history is enabled, the penultimate record will be used,
+   * otherwise the browser's own api with "history.back()"
+   */
+  public goBack() {
+    if (IS_SSR) return
+
+    if (!this.config.historyEnabled) {
+      history?.back?.()
+      return
+    }
+
+    const lastIdx = Object.keys(this.history)?.length
+
+    const historyData = this.history[lastIdx - 1]
+
+    if (!historyData) {
+      throw new Error('Not find back route')
+    }
+
+    const info = this.merge(historyData?.info, {
+      'action': 'goBack',
+    })
+
+    this.to(historyData?.path, historyData?.info?.options ?? {}, info)
+  }
+
+  /**
+   * Main function to navigate between the app using the route system with dynamic parameters
+   * @param route Route that will be used to direct
+   * @param options Route parameters (marked by {{}}), which will be automatically shown if they exist, and navigator options and route queryParams can also be passed through the "params" property
+   */
+  public navigate<T extends keyof Routes<R>>(
+    route: T,
+    // @ts-expect-error
+    options: Record<Routes<R>[T], string | number> & O & { params?: RouteParams } = {} as any,
+  ) {
+    // @ts-ignore
+    let path = this.getPath(route)
+
+    let _options = {}
+    let params = null
+    let routeParams = {}
+
+    const queryParamsKey = 'params'
+
+    for (const key in options) {
+      const value = options?.[key]
+
+      const searchPartial = `{{${key}}}`
+
+      if (path?.includes(searchPartial)) {
+        path = path?.replace(searchPartial, encodeURIComponent(String(value)))
+
+        routeParams = this.merge(routeParams, { [key]: String(value) })
+      } else if (key == queryParamsKey) {
+        params = value
+      } else {
+        _options = this.merge(_options, { [key]: value })
+      }
+    }
+
+    if (!path?.startsWith('/')) {
+      path = '/' + path
+    }
+
+    if (typeof params === 'object') {
+      let searchParams = null
+
+      for (const paramKey in (params ?? {})) {
+        const value = params?.[paramKey]
+        const param = `${paramKey}=${encodeURIComponent(value)}`
+        const separator = searchParams == null ? '' : '&'
+
+        searchParams = `${searchParams ?? ''}${separator}${param}`
+      }
+
+      if (typeof searchParams === 'string') {
+        if (path?.endsWith('/')) {
+          path = path.slice(0, -1)
+        }
+
+        path = `${path}?${searchParams}`
+      }
+    }
+
+    if (!path?.endsWith('/') && !params) {
+      path = path + '/'
+    }
+
+    this.to(path?.trim(), _options as O, {
+      params,
+      routeParams,
+    })
+  }
+
+  /**
+   * Calls the navigator to direct the user to a page
+   * @param path Path to which the user will be taken
+   * @param options Options that will be passed to the navigator
+   * @param info Information that will be added to the history
+   */
+  public to(path: RoutePath, options: O = null as O, info = {}) {
+    if (this.config.historyEnabled) {
+      this.putHistory(path, this.merge(options, info))
+    }
+
+    this.navigator(path, options, this.context)
+  }
+
+  /**
+   * Clear history data
+   */
+  public wipeHistory() {
+    this._history = {}
+  }
+}

package/src/types.ts

@@ -0,0 +1,53 @@
+export type ExtractParams<T extends string> =
+  T extends `${infer _Start}{{${infer Param}}}${infer Rest}`
+  ? Param | ExtractParams<Rest>
+  : never
+
+type Params<T> = {
+  [K in keyof T]: T[K] extends string ? ExtractParams<T[K]> : Params<T[K]>;
+}
+
+// @ts-ignore
+type ExtractRoutes<T, PM, Prefix extends string = ''> = {
+  [K in keyof T & string]:
+  T[K] extends string
+  ? {
+    // @ts-ignore
+    [P in `${Prefix}${Prefix extends '' ? '' : '.'}${K}`]: PM[K]
+  } // @ts-ignore
+  : ExtractRoutes<T[K], PM[K], `${Prefix}${Prefix extends '' ? '' : '.'}${K}`>
+}[keyof T]
+
+type UnionToIntersection<U> =
+  (U extends any ? (x: U) => void : never) extends ((x: infer I) => void) ? I : never
+
+export type Routes<T> = UnionToIntersection<ExtractRoutes<T, Params<T>>>
+
+// Navigation types
+
+export type RoutePath = string
+
+export type RouteParams = {
+  [x: string]: string
+}
+
+export type Navigator<O extends object = {}, C extends Record<string, any> = {}> = (path: RoutePath, options: O, context?: C) => void
+
+export type AnyValue = {
+  [key: string]: any
+}
+
+export type HistoryData = {
+  origin: string
+  date: Date
+  path: RoutePath
+  metadata: any
+  info: any
+}
+
+export type History = Record<number, HistoryData>
+
+export type Config = {
+  historyEnabled?: boolean
+  getMetadata?: () => any
+}