aptechka 0.1.1 → 0.1.2

package/src/packages/router/Route.ts

@@ -1,152 +0,0 @@
-import { isBrowser } from '$packages/utils'
-import { RouteElement, RouteParameters } from './RouteElement'
-
-export type RouteModule = () => Promise<any>
-
-export class Route {
-  #pattern: string
-  #module: RouteModule
-  #urlPattern: URLPattern
-  #elementConstructor: typeof RouteElement | null
-  #element: RouteElement | null
-  #isActive: boolean
-  #outlet: HTMLElement | ShadowRoot | null
-  #mutationObserver: MutationObserver = null!
-  #permanentHeadNodes: Array<Node> = []
-  #temporalHeadNodes: Array<Node> = []
-
-  constructor(pattern: string, module: RouteModule) {
-    this.#pattern = pattern
-    this.#module = module
-    this.#urlPattern = new URLPattern({ pathname: this.#pattern })
-    this.#elementConstructor = null
-    this.#element = null
-    this.#isActive = false
-    this.#outlet = null
-
-    if (isBrowser) {
-      this.#mutationObserver = new MutationObserver((mutations) => {
-        const mutation = mutations[0]
-
-        mutation.addedNodes.forEach((addedNode) => {
-          if (!this.#elementConstructor) {
-            this.#permanentHeadNodes.push(addedNode)
-          } else {
-            this.#temporalHeadNodes.push(addedNode)
-          }
-        })
-      })
-    }
-  }
-
-  public get pattern() {
-    return this.#pattern
-  }
-
-  public get urlPattern() {
-    return this.#urlPattern
-  }
-
-  public get isActive() {
-    return this.#isActive
-  }
-
-  public get element() {
-    return this.#element
-  }
-
-  public get outlet() {
-    return this.#outlet
-  }
-
-  public testPathname(pathname: string) {
-    return this.urlPattern.test({ pathname: pathname })
-  }
-
-  public async render(containerElement: HTMLElement | ShadowRoot, pathname: string) {
-    this.#mutationObserver.observe(document.head, { childList: true, subtree: true })
-
-    if (!this.#elementConstructor) {
-      const content = await this.#module()
-
-      this.#temporalHeadNodes = [...this.#permanentHeadNodes]
-
-      if (typeof content.default === 'function') {
-        this.#elementConstructor = content.default
-        customElements.define('e-' + this.#elementConstructor?.name.toLowerCase(), content.default)
-      }
-    } else {
-      this.#permanentHeadNodes.forEach((node) => {
-        document.head.appendChild(node)
-      })
-    }
-
-    await this.#waitHeadNodesLoad()
-
-    if (this.#elementConstructor) {
-      const v = this.#urlPattern.exec({ pathname })
-      const pathnameParams = v?.pathname.groups || {}
-      const searchParams = Object.fromEntries(new URLSearchParams(location.search))
-
-      const routeParameters: RouteParameters<any, any> = {
-        pathnameParams,
-        searchParams,
-      }
-
-      this.#element = new this.#elementConstructor(routeParameters)
-
-      containerElement.appendChild(this.#element)
-
-      this.#outlet =
-        this.#element.querySelector<HTMLElement>('[data-outlet]') ||
-        this.#element.shadowRoot?.querySelector<HTMLElement>('[data-outlet]') ||
-        this.#element.shadowRoot ||
-        this.#element
-
-      this.#isActive = true
-    }
-
-    this.#mutationObserver.disconnect()
-  }
-
-  public close() {
-    this.#mutationObserver.disconnect()
-    this.#element?.remove()
-    this.#isActive = false
-
-    this.#temporalHeadNodes.forEach((node) => document.head.removeChild(node))
-    this.#temporalHeadNodes = []
-  }
-
-  public getAnchorElements() {
-    let links: Array<HTMLAnchorElement> = []
-
-    if (this.#element) {
-      links = [...this.#element.querySelectorAll<HTMLAnchorElement>('a')]
-    }
-
-    if (this.#element?.shadowRoot) {
-      links = [...links, ...this.#element.shadowRoot.querySelectorAll<HTMLAnchorElement>('a')]
-    }
-
-    return links
-  }
-
-  async #waitHeadNodesLoad() {
-    const nodes = this.#permanentHeadNodes.filter((node) => {
-      if (node instanceof HTMLElement) {
-        return node.tagName === 'STYLE' || node.tagName === 'SCRIPT' || node.tagName === 'LINK'
-      }
-
-      return false
-    }) as Array<HTMLStyleElement | HTMLScriptElement | HTMLLinkElement>
-
-    for await (const node of nodes) {
-      await new Promise<void>((res) => {
-        node.onload = () => {
-          res()
-        }
-      })
-    }
-  }
-}

package/src/packages/router/RouteElement.ts

@@ -1,34 +0,0 @@
-import { CustomElement } from '$packages/custom-element'
-
-export type RouteURLParams<T extends string = string> = Partial<{ [key in T]: string }>
-
-export type RouteParameters<
-  PathnameParams extends string = string,
-  SearchParams extends string = string
-> = {
-  pathnameParams: RouteURLParams<PathnameParams>
-  searchParams: RouteURLParams<SearchParams>
-}
-
-export class RouteElement<
-  PathnameParams extends string = string,
-  SearchParams extends string = string
-> extends CustomElement {
-  #pathnameParams: RouteURLParams<PathnameParams>
-  #searchParams: RouteURLParams<SearchParams>
-
-  constructor(parameters: RouteParameters<PathnameParams, SearchParams>) {
-    super()
-
-    this.#pathnameParams = parameters.pathnameParams
-    this.#searchParams = parameters.searchParams
-  }
-
-  public get pathnameParams() {
-    return this.#pathnameParams
-  }
-
-  public get searchParams() {
-    return this.#searchParams
-  }
-}

package/src/packages/router/Router.ts

@@ -1,190 +0,0 @@
-import { URLPattern } from 'urlpattern-polyfill'
-import { Notifier } from '$packages/notifier'
-import { isBrowser, debounce } from '$packages/utils'
-import { Route, RouteModule } from './Route'
-import { Link } from './Link'
-
-// @ts-ignore
-globalThis.URLPattern = URLPattern
-
-export interface RouterPreprocessorEntry {
-  pathname: string
-  resolve: () => void
-  reject: () => void
-}
-
-export type RouterPreprocessor = (entry: RouterPreprocessorEntry) => void
-
-export interface RouterPostprocessorEntry {
-  pathname: string
-}
-
-export type RouterPostprocessor = (entry: RouterPostprocessorEntry) => void
-
-export interface RouterAfterNavigationEntry {
-  pathname: string
-}
-
-export type RouterAfterNavigationCallback = (entry: RouterAfterNavigationEntry) => void
-
-export type RouterHistoryAction = 'push' | 'replace' | 'none'
-
-export interface RouterParameters {
-  rootElement?: HTMLElement
-  base?: string
-}
-
-export class Router {
-  public static active: Router
-
-  #rootElement: HTMLElement = null!
-  #base: string
-  #routes: Array<Route> = []
-  #lastRoute: Route | null = null
-  #links: Array<Link> = []
-  #candidatePathname: string | undefined
-  #currentPathname: string = null!
-
-  #navigationEvent = new Notifier<RouterAfterNavigationCallback>()
-
-  public preprocessor?: RouterPreprocessor
-  public postprocessor?: RouterPostprocessor
-
-  constructor(parameters?: RouterParameters) {
-    this.#base = parameters?.base || ''
-
-    Router.active = this
-
-    if (isBrowser) {
-      this.#rootElement = parameters?.rootElement || document.body
-      addEventListener('popstate', this.#popStateListener)
-    }
-  }
-
-  public get currentPathname() {
-    return this.#currentPathname
-  }
-
-  public get candidatePathname() {
-    return this.#candidatePathname
-  }
-
-  public get routes() {
-    return this.#routes
-  }
-
-  public navigationEvent(callback: RouterAfterNavigationCallback) {
-    return this.#navigationEvent.subscribe(callback)
-  }
-
-  public defineRoute(pattern: string, module: RouteModule) {
-    const route = new Route(pattern, module)
-    this.#routes.push(route)
-    this.#start()
-  }
-
-  public async navigate(pathname: string, action: RouterHistoryAction = 'push') {
-    if (this.#candidatePathname === pathname || this.#currentPathname === pathname) {
-      return
-    }
-
-    Router.active = this
-
-    this.#candidatePathname = pathname
-
-    const activeRoutes = this.#routes.filter((r) => r.isActive)
-
-    const newRoutes = this.#routes.filter(
-      (r) => !activeRoutes.includes(r) && r.testPathname(pathname)
-    )
-
-    const oldRoutes = activeRoutes.filter((r) => !r.testPathname(pathname))
-    const keepRoutes = activeRoutes.filter((r) => r.testPathname(pathname))
-
-    let isOkToSwitch = true
-
-    if (this.preprocessor) {
-      try {
-        await new Promise<void>((resolve, reject) => {
-          this.preprocessor?.({ pathname, resolve, reject })
-        })
-      } catch (e: any) {
-        if (e) {
-          console.error(e)
-        } else {
-          console.log('Route change canceled')
-        }
-        isOkToSwitch = false
-      }
-    }
-
-    if (isOkToSwitch && this.#candidatePathname === pathname) {
-      this.#lastRoute = keepRoutes[keepRoutes.length - 1]
-
-      oldRoutes.forEach((r) => {
-        r.close()
-      })
-
-      this.#currentPathname = pathname
-
-      for await (const route of newRoutes) {
-        await route.render(this.#lastRoute?.outlet || this.#rootElement, pathname)
-        this.#lastRoute = route
-      }
-
-      const fullPathname = this.#base + pathname + location.search
-
-      if (action === 'push') {
-        history.pushState(fullPathname, '', fullPathname)
-      } else if (action === 'replace') {
-        history.replaceState(fullPathname, '', fullPathname)
-      }
-
-      this.#updateLinks()
-
-      this.postprocessor?.({ pathname })
-      this.#navigationEvent.notify({ pathname })
-    }
-  }
-
-  #start = debounce(() => {
-    const slashesLength = (pathname: string) => {
-      return pathname.split('/').length
-    }
-
-    this.#routes = this.#routes.sort((a, b) => {
-      return slashesLength(a.pattern) - slashesLength(b.pattern)
-    })
-
-    this.navigate(location.pathname.replace(this.#base, ''))
-  }, 0)
-
-  #updateLinks() {
-    const activeRoutes = this.#routes.filter((r) => r.isActive)
-
-    const anchorElements = Array.from(
-      new Set(
-        [
-          ...this.#rootElement.querySelectorAll('a'),
-          ...activeRoutes.map((r) => r.getAnchorElements()).flat(),
-        ].filter((a) => a.getAttribute('href')?.startsWith('/'))
-      )
-    )
-
-    this.#links.forEach((link) => {
-      link.destroy()
-    })
-
-    this.#links = anchorElements.map((element) => {
-      const link = new Link(this, element)
-
-      return link
-    })
-  }
-
-  #popStateListener = (event: PopStateEvent) => {
-    if (event.state) {
-      this.navigate(event.state, 'none')
-    }
-  }
-}

package/src/packages/router/index.ts

@@ -1,13 +0,0 @@
-export {
-  Router,
-  type RouterPreprocessorEntry,
-  type RouterPreprocessor,
-  type RouterPostprocessor,
-  type RouterAfterNavigationCallback,
-  type RouterHistoryAction,
-  type RouterParameters,
-} from './Router'
-
-export { RouteElement, type RouteParameters, type RouteURLParams } from './RouteElement'
-
-export { type RouteModule } from './Route'