@planet-matrix/mobius-model 0.6.0 → 0.10.1

package/src/route/adapter/browser.ts

@@ -0,0 +1,122 @@
+import { createRoute } from "../router/index.ts"
+import type { Route, Router } from "../router/index.ts"
+
+/**
+ * 创建浏览器路由适配器时需要的输入项。
+ */
+export interface CreateBrowserRouterOptions {
+  router: Router
+}
+
+/**
+ * 浏览器路由适配器返回的结果。
+ *
+ * `dispose` 用于释放当前适配器注册的订阅和浏览器事件监听器。
+ */
+export interface CreateBrowserRouterResult {
+  router: Router
+  dispose: () => void
+}
+
+/**
+ * 将 Router 和浏览器路由对接在一起，将 Router 作为唯一信源。
+ *
+ * 该适配器负责把 Router 产生的历史记录同步到浏览器 `history`，并在浏览器
+ * `popstate` 或 `hashchange` 发生时，把新的地址变化回灌到 Router。
+ *
+ * Tips:
+ *  - 浏览器 F5 刷新之后 `history.state` 不会丢失。
+ */
+export const createBrowserRouter = (options: CreateBrowserRouterOptions): CreateBrowserRouterResult => {
+  const { router } = options
+
+  interface State {
+    routeHistoryEntryId: string
+  }
+  const isState = (target: unknown): target is State => {
+    if (typeof target !== "object" || target === null) {
+      return false
+    }
+    if (("routeHistoryEntryId" in target) === false) {
+      return false
+    }
+    if (typeof target["routeHistoryEntryId"] !== "string") {
+      return false
+    }
+    return true
+  }
+  const insertState = (route: Route, state: State): void => {
+    const url = location.origin + route.getRecord().partialUrl
+    window.history.pushState(state, "", url)
+  }
+  const updateState = (route: Route, state: State): void => {
+    const url = location.origin + route.getRecord().partialUrl
+    window.history.replaceState(state, "", url)
+  }
+  const upsertState = (route: Route, state: State): void => {
+    const oldUrl = location.origin + createRoute(location.href).getRecord().partialUrl
+    const newUrl = location.origin + route.getRecord().partialUrl
+    if (oldUrl === newUrl) {
+      updateState(route, state)
+    } else {
+      insertState(route, state)
+    }
+  }
+
+  const subscriberEntry = router.eventManager.subscribe("history", (routeHistoryEntry) => {
+    upsertState(routeHistoryEntry.to.route, { routeHistoryEntryId: routeHistoryEntry.id })
+  })
+  const disposeRouterSubscriber = (): void => {
+    subscriberEntry.unsubscribe()
+  }
+
+  const popstateEventListener = (event: PopStateEvent): void => {
+    // 此事件触发的结果有两种：
+    // 1. 来到 Router 设置的路由，此时 state 可识别。
+    // 2. 来到非 Router 设置的路由，此时 state 不可识别。
+    //
+    // 对于 1，判断 state 中的 routeHistoryEntryId 是否与 router 的
+    // 最新的 routeHistoryEntry 的 id 相同，若相同，则说明此事件由 router
+    // 触发，不需要再次操作（否则会导致循环触发），若不同，则作为新路由同步至
+    // router。
+    // 对于 2，始终作为新路由同步至 router。
+
+    if (isState(event.state)) {
+      const currentRouteHistoryEntryId = router.getCurrentRouteHistoryEntryId()
+      if (event.state.routeHistoryEntryId === currentRouteHistoryEntryId) {
+        return
+      }
+    }
+
+    router.navigateTo({ url: location.href })
+  }
+  window.addEventListener("popstate", popstateEventListener)
+  const disposePopstateEventListener = (): void => {
+    window.removeEventListener("popstate", popstateEventListener)
+  }
+
+  const hashchangeEventListener = (event: HashChangeEvent): void => {
+    if (isState(history.state)) {
+      const currentRouteHistoryEntryId = router.getCurrentRouteHistoryEntryId()
+      if (history.state.routeHistoryEntryId === currentRouteHistoryEntryId) {
+        return
+      }
+    }
+    router.navigateTo({ url: event.newURL })
+  }
+  window.addEventListener("hashchange", hashchangeEventListener)
+  const disposeHashchangeEventListener = (): void => {
+    window.removeEventListener("hashchange", hashchangeEventListener)
+  }
+
+  const dispose = (): void => {
+    disposeRouterSubscriber()
+    disposePopstateEventListener()
+    disposeHashchangeEventListener()
+  }
+
+  return {
+    router,
+    dispose
+  }
+}

package/src/route/adapter/driver.ts

@@ -0,0 +1,56 @@
+import type { Computed } from "#Source/reactor/index.ts"
+import { computed, signal } from "#Source/reactor/index.ts"
+import type { Route, RouteHistoryEntry, Router, RouteRecord } from "../router/index.ts"
+
+/**
+ * 创建路由驱动器时需要的输入项。
+ */
+export interface CreateRouteDriverOptions {
+  router: Router
+}
+
+/**
+ * 将 Router 暴露为响应式只读视图的驱动器。
+ *
+ * 该接口把当前历史记录、当前 Route 以及当前 RouteRecord 暴露为可追踪的计算值，
+ * 方便响应式系统消费。
+ */
+export interface RouteDriver {
+  router: Router
+  routeHistoryEntry: Computed<RouteHistoryEntry>
+  route: Computed<Route>
+  routeRecord: Computed<RouteRecord>
+}
+
+/**
+ * 基于 Router 创建一组可响应追踪的当前路由派生值。
+ *
+ * 返回结果中的计算值会随着 Router 的 `history` 事件自动更新。
+ */
+export const createRouteDriver = (options: CreateRouteDriverOptions): RouteDriver => {
+  const { router } = options
+
+  const internalCurrentRouteHistoryEntry = signal(() => {
+    return router.getCurrentRouteHistoryEntry()
+  })
+  router.eventManager.subscribe("history", (routeHistoryEntry) => {
+    internalCurrentRouteHistoryEntry.set(routeHistoryEntry)
+  })
+
+  const currentRouteHistoryEntry = computed(() => {
+    return internalCurrentRouteHistoryEntry.get()
+  })
+  const currentRoute = computed(() => {
+    return currentRouteHistoryEntry.get().to.route
+  })
+  const currentRouteRecord = computed(() => {
+    return currentRoute.get().getRecord()
+  })
+
+  return {
+    router,
+    routeHistoryEntry: currentRouteHistoryEntry,
+    route: currentRoute,
+    routeRecord: currentRouteRecord
+  }
+}

package/src/route/adapter/index.ts

@@ -0,0 +1,2 @@
+export * from "./driver.ts"
+export * from "./browser.ts"

package/src/route/index.ts

@@ -0,0 +1,3 @@
+export * from "./uri/index.ts"
+export * from "./router/index.ts"
+export * from "./adapter/index.ts"

package/src/route/router/index.ts

@@ -0,0 +1,2 @@
+export * from "./route.ts"
+export * from "./router.ts"