asyn requests, polling, deferred props

Author: joetannenbaum

packages/core/package.json

@@ -47,7 +47,8 @@
     "dev": "./build.js --watch",
     "build": "npm run clean && ./build.js && tsc --emitDeclarationOnly",
     "clean": "rm -rf types && rm -rf dist",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "test": "vitest"
   },
   "dependencies": {
     "axios": "^1.6.0",
@@ -62,6 +63,8 @@
     "@types/qs": "^6.9.0",
     "esbuild": "^0.16.13",
     "esbuild-node-externals": "^1.6.0",
-    "typescript": "^4.9.4"
+    "happy-dom": "^14.12.3",
+    "typescript": "^4.9.4",
+    "vitest": "^1.6.0"
   }
 }

packages/core/src/formData.ts

@@ -1,5 +1,7 @@
 import { FormDataConvertible } from './types'
 
+export const isFormData = (value: any): value is FormData => value instanceof FormData
+
 export function objectToFormData(
   source: Record<string, FormDataConvertible>,
   form: FormData = new FormData(),

packages/core/src/history.ts

@@ -0,0 +1,52 @@
+import { page as currentPage } from './page'
+import { Page } from './types'
+
+const isServer = typeof window === 'undefined'
+
+export class History {
+  public static remember(data: unknown, key: string): void {
+    History.replaceState({
+      ...currentPage.get(),
+      rememberedState: {
+        ...currentPage.get()?.rememberedState,
+        [key]: data,
+      },
+    })
+  }
+
+  public static restore(key: string): unknown {
+    if (!isServer) {
+      return this.getState<{ [key: string]: any }>('rememberedState', {})?.[key]
+    }
+  }
+
+  public static pushState(page: Page): void {
+    window.history.pushState(page, '', page.url)
+  }
+
+  public static replaceState(page: Page): void {
+    window.history.replaceState(page, '', page.url)
+  }
+
+  public static setState(key: string, value: any) {
+    window.history.state[key] = value
+  }
+
+  public static getState<T>(key: string, defaultValue?: T): T {
+    return window.history.state[key] ?? defaultValue
+  }
+
+  public static deleteState(key: string) {
+    if (window.history.state?.[key] !== undefined) {
+      delete window.history.state[key]
+    }
+  }
+
+  public static hasAnyState(): boolean {
+    return !!this.getAllState()
+  }
+
+  public static getAllState(): any {
+    return window.history.state
+  }
+}

packages/core/src/navigationType.ts

@@ -0,0 +1,25 @@
+class NavigationType {
+  protected type: NavigationTimingType
+
+  public constructor() {
+    if (window?.performance.getEntriesByType('navigation').length > 0) {
+      this.type = (window.performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming).type
+    } else {
+      this.type = 'navigate'
+    }
+  }
+
+  public get(): NavigationTimingType {
+    return this.type
+  }
+
+  public isBackForward(): boolean {
+    return this.type === 'back_forward'
+  }
+
+  public isReload(): boolean {
+    return this.type === 'reload'
+  }
+}
+
+export const navigationType = new NavigationType()

packages/core/src/page.ts

@@ -0,0 +1,117 @@
+import { fireNavigateEvent } from './events'
+import { History } from './history'
+import { Scroll } from './scroll'
+import { Component, Page, PageHandler, PageResolver, PreserveStateOption, RouterInitParams } from './types'
+import { hrefToUrl, isSameUrlWithoutHash } from './url'
+
+class CurrentPage {
+  protected page!: Page
+  protected swapComponent!: PageHandler
+  protected resolveComponent!: PageResolver
+  protected componentId = {}
+  protected onNewComponentCallbacks: VoidFunction[] = []
+  protected firstPageLoad = true
+
+  public init({ initialPage, swapComponent, resolveComponent }: RouterInitParams) {
+    this.page = initialPage
+    this.swapComponent = swapComponent
+    this.resolveComponent = resolveComponent
+
+    return this
+  }
+
+  public set(
+    page: Page,
+    {
+      replace = false,
+      preserveScroll = false,
+      preserveState = false,
+    }: {
+      replace?: boolean
+      preserveScroll?: PreserveStateOption
+      preserveState?: PreserveStateOption
+    } = {},
+  ): Promise<void> {
+    this.componentId = {}
+
+    const componentId = this.componentId
+
+    return this.resolve(page.component).then((component) => {
+      if (componentId !== this.componentId) {
+        // Component has changed since we started resolving this component, bail
+        return
+      }
+
+      page.scrollRegions ??= []
+      page.rememberedState ??= {}
+      replace = replace || isSameUrlWithoutHash(hrefToUrl(page.url), window.location)
+      replace ? History.replaceState(page) : History.pushState(page)
+
+      const isNewComponent = !this.isTheSame(page) || this.firstPageLoad
+
+      this.page = page
+
+      if (isNewComponent) {
+        this.onNewComponentCallbacks.forEach((cb) => cb())
+      }
+
+      this.firstPageLoad = false
+
+      return this.swap({ component, page, preserveState }).then(() => {
+        if (!preserveScroll) {
+          Scroll.reset(page)
+        }
+
+        if (!replace) {
+          fireNavigateEvent(page)
+        }
+      })
+    })
+  }
+
+  public get(): Page {
+    return this.page
+  }
+
+  public setUrlHash(hash: string): void {
+    this.page.url += hash
+  }
+
+  public remember(data: Page['rememberedState']): void {
+    this.page.rememberedState = data
+  }
+
+  public scrollRegions(regions: Page['scrollRegions']): void {
+    this.page.scrollRegions = regions
+  }
+
+  public swap({
+    component,
+    page,
+    preserveState,
+  }: {
+    component: Component
+    page: Page
+    preserveState: PreserveStateOption
+  }): Promise<unknown> {
+    return this.swapComponent({ component, page, preserveState })
+  }
+
+  public resolve(component: string): Promise<Component> {
+    return Promise.resolve(this.resolveComponent(component))
+  }
+
+  public isTheSame(page: Page): boolean {
+    return this.page.component === page.component
+  }
+
+  public onNewComponent(cb: VoidFunction): VoidFunction {
+    this.onNewComponentCallbacks.push(cb)
+
+    return () => {
+      this.onNewComponentCallbacks = this.onNewComponentCallbacks.filter((callback) => callback !== cb)
+    }
+  }
+}
+
+export const page = new CurrentPage()

packages/core/src/poll.ts

@@ -0,0 +1,21 @@
+class Poll {
+  protected polls: VoidFunction[] = []
+
+  add(interval: number, cb: VoidFunction): VoidFunction {
+    const id = setInterval(cb, interval)
+
+    const stop = () => clearInterval(id)
+
+    this.polls.push(stop)
+
+    return stop
+  }
+
+  clear() {
+    this.polls.forEach((stop) => stop())
+
+    this.polls = []
+  }
+}
+
+export const poll = new Poll()

packages/core/src/progress.ts

@@ -4,13 +4,15 @@ import { GlobalEvent } from './types'
 let timeout: NodeJS.Timeout | null = null
 
 function addEventListeners(delay: number): void {
-  document.addEventListener('inertia:start', start.bind(null, delay))
+  document.addEventListener('inertia:start', (e) => start(e, delay))
   document.addEventListener('inertia:progress', progress)
   document.addEventListener('inertia:finish', finish)
 }
 
-function start(delay: number): void {
-  timeout = setTimeout(() => NProgress.start(), delay)
+function start(event: GlobalEvent<'start'>, delay: number): void {
+  if (!event.detail.visit.async) {
+    timeout = setTimeout(() => NProgress.start(), delay)
+  }
 }
 
 function progress(event: GlobalEvent<'progress'>) {

packages/core/src/request.ts

@@ -0,0 +1,105 @@
+import { default as axios, AxiosProgressEvent, AxiosRequestConfig, AxiosResponse } from 'axios'
+import { fireExceptionEvent, fireFinishEvent, fireProgressEvent } from './events'
+import { page as currentPage } from './page'
+import { RequestParams } from './requestParams'
+import { Response } from './response'
+import { ActiveVisit, Page } from './types'
+import { urlWithoutHash } from './url'
+
+export class Request {
+  protected response!: AxiosResponse
+  protected cancelToken!: AbortController
+  protected requestParams: RequestParams
+
+  constructor(
+    params: ActiveVisit,
+    protected page: Page,
+  ) {
+    this.requestParams = RequestParams.create(params)
+    this.cancelToken = new AbortController()
+    this.requestParams.onCancelToken(() => this.cancel({ cancelled: true }))
+  }
+
+  public static create(params: ActiveVisit, page: Page): Request {
+    return new Request(params, page)
+  }
+
+  public async send() {
+    return axios({
+      method: this.requestParams.params.method,
+      url: urlWithoutHash(this.requestParams.params.url).href,
+      data: this.requestParams.data(),
+      params: this.requestParams.queryParams(),
+      signal: this.cancelToken.signal,
+      headers: this.getHeaders(),
+      onUploadProgress: this.onProgress.bind(this),
+    })
+      .then((response) => {
+        return Response.create(this.requestParams, response, this.page).handle()
+      })
+      .catch((error) => {
+        if (error?.response) {
+          return Response.create(this.requestParams, error.response, this.page).handle()
+        }
+
+        return Promise.reject(error)
+      })
+      .catch((error) => {
+        if (axios.isCancel(error)) {
+          return
+        }
+
+        if (fireExceptionEvent(error)) {
+          return Promise.reject(error)
+        }
+      })
+      .finally(() => {
+        this.finish()
+      })
+  }
+
+  protected finish(): void {
+    if (this.requestParams.wasCancelledAtAll()) {
+      return
+    }
+
+    this.requestParams.markAsFinished()
+    this.fireFinishEvents()
+  }
+
+  protected fireFinishEvents(): void {
+    fireFinishEvent(this.requestParams.all())
+    this.requestParams.onFinish()
+  }
+
+  public cancel({ cancelled = false, interrupted = false }: { cancelled?: boolean; interrupted?: boolean }): void {
+    this.cancelToken.abort()
+
+    this.requestParams.markAsCancelled({ cancelled, interrupted })
+
+    this.fireFinishEvents()
+  }
+
+  protected onProgress(progress: AxiosProgressEvent): void {
+    if (this.requestParams.data() instanceof FormData) {
+      progress.percentage = progress.progress ? Math.round(progress.progress * 100) : 0
+      fireProgressEvent(progress)
+      this.requestParams.params.onProgress(progress)
+    }
+  }
+
+  protected getHeaders(): AxiosRequestConfig['headers'] {
+    const headers: AxiosRequestConfig['headers'] = {
+      ...this.requestParams.headers(),
+      Accept: 'text/html, application/xhtml+xml',
+      'X-Requested-With': 'XMLHttpRequest',
+      'X-Inertia': true,
+    }
+
+    if (currentPage.get().version) {
+      headers['X-Inertia-Version'] = currentPage.get().version
+    }
+
+    return headers
+  }
+}