aptechka 0.1.0

package/src/packages/morph/Morph.ts

@@ -0,0 +1,246 @@
+import { Notifier } from '$packages/notifier'
+import { isBrowser } from '$packages/utils'
+import { Link } from './Link'
+
+export type MorphHistoryAction = 'replace' | 'push' | 'none'
+
+export interface MorphParameters {
+  base?: string
+  waitForHeadToLoad?: boolean
+  cachePages?: boolean
+}
+
+export interface MorphNavigationEntry {
+  pathname: string
+  isCached: boolean
+}
+
+export interface MorphPreprocessorEntry extends MorphNavigationEntry {
+  resolve: () => void
+  reject: () => void
+}
+
+export type MorphPreprocessor = (entry: MorphPreprocessorEntry) => void
+
+export type MorphNavigationCallback = (entry: MorphNavigationEntry) => void
+
+export type MorphPostprocessor = MorphNavigationCallback
+
+export class Morph {
+  #base: string = null!
+  #waitForHeadToLoad: boolean = null!
+  #cachePages: boolean = null!
+  #morphElements: Array<HTMLElement> = null!
+  #links: Array<Link> = []
+  #domParser: DOMParser = new DOMParser()
+  #cache: Map<string, Document> = new Map()
+  #candidatePathname: string | undefined
+  #currentPathname: string = null!
+
+  public preprocessor?: MorphPreprocessor
+  public postprocessor?: MorphPostprocessor
+
+  #beforeNavigationEvent = new Notifier<MorphNavigationCallback>()
+  #afterNavigationEvent = new Notifier<MorphNavigationCallback>()
+
+  constructor(parameters?: MorphParameters) {
+    if (isBrowser) {
+      this.#base = parameters?.base || '/'
+
+      if (parameters?.base) {
+        this.#base = parameters.base
+
+        if (!parameters.base.endsWith('/')) {
+          this.#base += '/'
+        }
+      } else {
+        this.#base = '/'
+      }
+
+      this.#waitForHeadToLoad = parameters?.waitForHeadToLoad === false ? false : true
+      this.#cachePages = parameters?.cachePages === false ? false : true
+
+      this.#morphElements = this.#getMorphElements(document)
+
+      this.#currentPathname = location.pathname
+
+      this.#findLinks()
+
+      addEventListener('popstate', this.#popStateListener)
+    }
+  }
+
+  public beforeNavigationEvent(callback: MorphNavigationCallback) {
+    return this.#beforeNavigationEvent.subscribe(callback)
+  }
+
+  public afterNavigationEvent(callback: MorphNavigationCallback) {
+    return this.#afterNavigationEvent.subscribe(callback)
+  }
+
+  public async navigate(pathname: string, historyAction: MorphHistoryAction = 'push') {
+    pathname = this.#preparePathname(pathname)
+
+    if (this.#candidatePathname === pathname || this.#currentPathname === pathname) {
+      return
+    }
+
+    this.#candidatePathname = pathname
+
+    const isCached = this.#cache.has(pathname)
+
+    try {
+      let isOkToSwitch = true
+
+      if (this.preprocessor) {
+        try {
+          await new Promise<void>((resolve, reject) => {
+            this.preprocessor?.({ pathname, resolve, reject, isCached })
+          })
+        } catch (e: any) {
+          if (e) {
+            console.error(e)
+          } else {
+            console.log('Route change canceled')
+          }
+          isOkToSwitch = false
+        }
+      }
+
+      this.#beforeNavigationEvent.notify({
+        pathname,
+        isCached,
+      })
+
+      if (!isOkToSwitch || this.#candidatePathname !== pathname) {
+        return
+      }
+
+      const newDocument = await this.#fetchDocument(pathname)
+
+      if (this.#cachePages) {
+        this.#cache.set(pathname, newDocument)
+      }
+
+      if (this.#candidatePathname !== pathname) {
+        return
+      }
+
+      const currentHeadChildren = Array.from(document.head.children)
+      const newHeadChildren = Array.from((newDocument.head.cloneNode(true) as HTMLElement).children)
+
+      const identicalHeadChildren = this.#intersectElements(currentHeadChildren, newHeadChildren)
+      const removeHeadChildren = this.#excludeElements(currentHeadChildren, identicalHeadChildren)
+      const addHeadChildren = this.#excludeElements(newHeadChildren, identicalHeadChildren)
+
+      removeHeadChildren.forEach((child) => child.remove())
+      addHeadChildren.forEach((child) => document.head.appendChild(child))
+
+      const elementsWithLoad = addHeadChildren.filter(
+        (child) =>
+          child.tagName === 'STYLE' || child.tagName === 'SCRIPT' || child.tagName === 'LINK'
+      ) as Array<HTMLLinkElement>
+
+      if (this.#waitForHeadToLoad && elementsWithLoad.length) {
+        await new Promise<void>(async (res) => {
+          let counter = 0
+
+          for await (const element of elementsWithLoad) {
+            element.onload = () => {
+              counter++
+
+              if (counter === elementsWithLoad.length) {
+                res()
+              }
+            }
+          }
+        })
+      }
+
+      const newMorphElements = this.#getMorphElements(newDocument)
+
+      this.#morphElements.forEach((morphElement, i) => {
+        const newMorphElement = newMorphElements[i]
+        morphElement.innerHTML = newMorphElement.innerHTML
+      })
+
+      this.#currentPathname = pathname
+
+      if (historyAction === 'push') {
+        history.pushState(pathname, '', pathname + location.search)
+      } else if (historyAction === 'replace') {
+        history.replaceState(pathname, '', pathname + location.search)
+      }
+
+      this.#findLinks()
+
+      this.postprocessor?.({ pathname, isCached })
+      this.#afterNavigationEvent.notify({ pathname, isCached })
+    } catch (e) {
+      console.error(e)
+    }
+
+    this.#candidatePathname = undefined
+  }
+
+  async #fetchDocument(pathname: string) {
+    const cahcnedDocument = this.#cache.get(pathname)
+
+    if (cahcnedDocument) {
+      return cahcnedDocument
+    }
+
+    const fetchResult = await fetch(pathname)
+    const text = await fetchResult.text()
+    const document = this.#domParser.parseFromString(text, 'text/html')
+    return document
+  }
+
+  #preparePathname(pathname: string) {
+    pathname = pathname.replace(this.#base, '')
+
+    if (pathname.startsWith('/')) {
+      pathname = pathname.slice(1)
+    }
+
+    return this.#base + pathname
+  }
+
+  #findLinks() {
+    const linkElements = [...document.documentElement.querySelectorAll('a')].filter((a) =>
+      a.getAttribute('href')?.startsWith('/')
+    )
+
+    this.#links.forEach((link) => link.destroy())
+
+    this.#links = linkElements.map((element) => new Link(element, this))
+  }
+
+  #getMorphElements(document: Document) {
+    const elements = document.querySelectorAll<HTMLElement>('[data-morph]')
+    return elements.length ? [...elements] : [document.body]
+  }
+
+  #intersectElements(elements: Array<Element>, elementsToIntersect: Array<Element>) {
+    return elements.filter((element) =>
+      elementsToIntersect.find(
+        (elementToIntersect) => elementToIntersect.outerHTML === element.outerHTML
+      )
+    )
+  }
+
+  #excludeElements(elements: Array<Element>, elementsToExclude: Array<Element>) {
+    return elements.filter(
+      (element) =>
+        !elementsToExclude.find(
+          (elementToExclude) => elementToExclude.outerHTML === element.outerHTML
+        )
+    )
+  }
+
+  #popStateListener = (event: PopStateEvent) => {
+    if (event.state) {
+      this.navigate(event.state, 'none')
+    }
+  }
+}

package/src/packages/morph/index.ts

@@ -0,0 +1,10 @@
+export {
+  Morph,
+  type MorphPostprocessor,
+  type MorphNavigationCallback,
+  type MorphPreprocessor,
+  type MorphPreprocessorEntry,
+  type MorphNavigationEntry,
+  type MorphParameters,
+  type MorphHistoryAction,
+} from './Morph'

package/src/packages/notifier/index.ts

@@ -0,0 +1,41 @@
+export type ProviderCallback = (...args: any[]) => void
+
+interface NotifierSubscriber {
+  callback: ProviderCallback
+  order: number
+}
+
+export class Notifier<Callback extends ProviderCallback = ProviderCallback> {
+  #subscribers: Array<NotifierSubscriber> = []
+
+  public close() {
+    this.#subscribers = []
+  }
+
+  public subscribe(callback: Callback, order: number = 0) {
+    if (this.#subscribers.find((subscriber) => subscriber.callback === callback)) {
+      return () => {}
+    }
+
+    this.#subscribers.push({
+      callback,
+      order,
+    })
+
+    this.#subscribers = this.#subscribers.sort((a, b) => a.order - b.order)
+
+    return () => {
+      this.unsubscribe(callback)
+    }
+  }
+
+  public unsubscribe(callback: Callback) {
+    this.#subscribers = this.#subscribers.filter((subscriber) => subscriber.callback !== callback)
+  }
+
+  public notify(...parameters: Parameters<Callback>) {
+    for (const subscriber of this.#subscribers) {
+      subscriber.callback(...parameters)
+    }
+  }
+}

package/src/packages/order/index.ts

@@ -0,0 +1,14 @@
+export enum RESIZE_ORDER {
+  DEVICE = -100000,
+  MEDIA,
+  SOURCE_MANAGER,
+  SCROLL,
+  LAYOUT_BOX,
+  EN3 = 100000,
+}
+
+export enum TICK_ORDER {
+  SCROLL = -100000,
+  LAYOUT_BOX,
+  EN3 = 100000,
+}

package/src/packages/resizer/index.ts

@@ -0,0 +1,55 @@
+import { Notifier } from '$packages/notifier'
+import { debounce, isBrowser } from '$packages/utils'
+
+export type ResizerCallback = () => void
+
+export const dispatchResizeEvent = debounce((cause?: string) => {
+  if (cause) {
+    window.dispatchEvent(
+      new CustomEvent('resize', {
+        detail: {
+          cause: cause,
+        },
+      })
+    )
+  } else {
+    window.dispatchEvent(new Event('resize'))
+  }
+}, 0)
+
+class Resizer extends Notifier<ResizerCallback> {
+  #isResizeScheduled = false
+
+  constructor() {
+    super()
+
+    if (isBrowser) {
+      addEventListener('resize', this.#resizeListener)
+      this.#resizeListener()
+    }
+  }
+
+  public subscribe(callback: ResizerCallback, order?: number) {
+    const unsub = super.subscribe(callback, order)
+
+    if (!this.#isResizeScheduled) {
+      callback()
+    }
+
+    return unsub
+  }
+
+  #resizeListener = () => {
+    if (!this.#isResizeScheduled) {
+      this.#isResizeScheduled = true
+      this.#resize()
+    }
+  }
+
+  #resize = debounce(() => {
+    this.notify()
+    this.#isResizeScheduled = false
+  }, 0)
+}
+
+export const resizer = new Resizer()

package/src/packages/router/Link.ts

@@ -0,0 +1,33 @@
+import { Router, RouterHistoryAction } from './Router'
+
+export class Link {
+  #router: Router
+  #element: HTMLElement
+  #pathname: string
+  #historyAction: RouterHistoryAction
+
+  constructor(router: Router, element: HTMLElement) {
+    this.#router = router
+    this.#element = element
+    this.#pathname = this.#element.getAttribute('href') || '/'
+    this.#historyAction =
+      (this.#element.getAttribute('data-history-action') as RouterHistoryAction) || 'push'
+
+    this.#element.addEventListener('click', this.#clickListener)
+
+    if (location.pathname === this.#pathname) {
+      this.#element.classList.add('current')
+    }
+  }
+
+  public destroy() {
+    this.#element.removeEventListener('click', this.#clickListener)
+    this.#element.classList.remove('current')
+  }
+
+  #clickListener = (e: Event) => {
+    e.preventDefault()
+
+    this.#router.navigate(this.#pathname, this.#historyAction)
+  }
+}

package/src/packages/router/Route.ts

@@ -0,0 +1,152 @@
+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

@@ -0,0 +1,34 @@
+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
+  }
+}