aptechka 0.1.0 → 0.1.2

package/src/packages/loading/index.ts

@@ -1,131 +0,0 @@
-import { Notifier } from '$packages/notifier'
-import { debounce } from '$packages/utils'
-
-export interface LoadingProgressDetail {
-  loaded: number
-  total: number
-  progress: number
-  namespace: string
-}
-
-export interface LoadingErrorDetail {
-  namespace: string
-  url: string
-}
-
-export interface LoadingCompleteDetail {
-  total: number
-}
-
-export type LoadingProgressSubscriber = (detail: LoadingProgressDetail) => void
-export type LoadingErrorSubscriber = (detail: LoadingErrorDetail) => void
-export type LoadingCompleteSubscriber = (detail: LoadingCompleteDetail) => void
-
-class Loading {
-  #counter: Map<string, { total: number; loaded: number }> = new Map()
-  #progressEvent = new Notifier<LoadingProgressSubscriber>()
-  #completeEvent = new Notifier<LoadingCompleteSubscriber>()
-  #errorEvent = new Notifier<LoadingErrorSubscriber>()
-  #isComplete = false
-
-  public get progressEvent() {
-    return this.#progressEvent
-  }
-
-  public get completeEvent() {
-    return this.#completeEvent
-  }
-
-  public get errorEvent() {
-    return this.#errorEvent
-  }
-
-  public get _counter() {
-    return this.#counter
-  }
-
-  public get isComplete() {
-    return this.#isComplete
-  }
-
-  public reset() {
-    this.#isComplete = false
-    this.#counter.clear()
-  }
-
-  public setTotal(namespace: string, total: number = 1) {
-    if (this.#isComplete) {
-      return
-    }
-
-    this.#counter.set(namespace, { loaded: 0, total: total })
-  }
-
-  public setLoaded(namespace: string, loaded: number = 1) {
-    if (this.#isComplete) {
-      return
-    }
-
-    if (this.#counter.has(namespace)) {
-      const ns = this.#counter.get(namespace)!
-
-      if (ns.loaded !== loaded) {
-        this.#counter.set(namespace, { ...ns, loaded: loaded })
-        this.#progressListener(namespace)
-      }
-    }
-  }
-
-  public setError(namespace: string, url: string) {
-    if (this.#isComplete) {
-      return
-    }
-
-    if (this.#counter.has(namespace)) {
-      const ns = this.#counter.get(namespace)!
-      this.#counter.set(namespace, { ...ns, total: ns.total - 1 })
-      this.#errorEvent.notify({
-        namespace,
-        url,
-      })
-    }
-  }
-
-  public getStats() {
-    return Array.from(this.#counter).reduce(
-      (p, c) => {
-        return { loaded: p.loaded + c[1].loaded, total: p.total + c[1].total }
-      },
-      { loaded: 0, total: 0 }
-    )
-  }
-
-  #progressListener = (namespace: string) => {
-    const { loaded, total } = this.getStats()
-
-    this.#progressEvent.notify({
-      progress: loaded / total,
-      loaded,
-      total,
-      namespace,
-    })
-
-    this.#tryComplete()
-  }
-
-  #tryComplete = debounce(() => {
-    const { loaded, total } = this.getStats()
-
-    if (loaded === total) {
-      this.#isComplete = true
-
-      const { total } = this.getStats()
-
-      this.#completeEvent.notify({
-        total,
-      })
-    }
-  }, 150)
-}
-
-export const loading = new Loading()

package/src/packages/measurer/CumulativeOffsetLeft.ts

@@ -1,8 +0,0 @@
-import { getCumulativeOffsetLeft } from '$packages/utils'
-import { Measurer } from './Meaurer'
-
-export class CumulativeOffsetLeft extends Measurer {
-  protected handleResize() {
-    return getCumulativeOffsetLeft(this.element)
-  }
-}

package/src/packages/measurer/CumulativeOffsetTop.ts

@@ -1,8 +0,0 @@
-import { getCumulativeOffsetTop } from '$packages/utils'
-import { Measurer } from './Meaurer'
-
-export class CumulativeOffsetTop extends Measurer {
-  protected handleResize() {
-    return getCumulativeOffsetTop(this.element)
-  }
-}

package/src/packages/measurer/Meaurer.ts

@@ -1,38 +0,0 @@
-import { isBrowser } from '$packages/utils'
-
-export abstract class Measurer {
-  #element: HTMLElement
-  #resizeObserver: ResizeObserver = null!
-  #value = 0
-
-  constructor(element: HTMLElement) {
-    this.#element = element
-
-    if (isBrowser) {
-      this.#resizeObserver = new ResizeObserver(this.#resizeObserverCallback)
-      this.#resizeObserver.observe(element)
-    }
-  }
-
-  public get element() {
-    return this.#element
-  }
-
-  public value = (modifier?: (current: number) => number) => {
-    return modifier ? modifier(this.#value) : this.#value
-  }
-
-  public destroy() {
-    this.#resizeObserver.disconnect()
-  }
-
-  protected abstract handleResize(): number
-
-  #resizeObserverCallback: ResizeObserverCallback = () => {
-    this.#value = this.handleResize()
-
-    if (!this.#element.isConnected) {
-      this.destroy()
-    }
-  }
-}

package/src/packages/measurer/index.ts

@@ -1,3 +0,0 @@
-export { Measurer } from './Meaurer'
-export { CumulativeOffsetLeft } from './CumulativeOffsetLeft'
-export { CumulativeOffsetTop } from './CumulativeOffsetTop'

package/src/packages/media/index.ts

@@ -1,38 +0,0 @@
-import { RESIZE_ORDER } from '$packages/order'
-import { resizer } from '$packages/resizer'
-import { Store } from '$packages/store'
-
-export type MediaCallback = () => void
-
-export type MediaQueries<T extends string = string> = Map<
-  T,
-  {
-    match: MediaCallback
-    unmatch?: MediaCallback
-  }
->
-
-export class Media extends Store<boolean> {
-  #query: string
-
-  #unsubscribeFromResizer: Function
-
-  constructor(query: string) {
-    super(false)
-
-    this.#query = query
-
-    this.#unsubscribeFromResizer = resizer.subscribe(() => {
-      if (matchMedia(this.#query).matches) {
-        this.current = true
-      } else {
-        this.current = false
-      }
-    }, RESIZE_ORDER.MEDIA)
-  }
-
-  public override close() {
-    super.close()
-    this.#unsubscribeFromResizer()
-  }
-}

package/src/packages/morph/Link.ts

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

package/src/packages/morph/Morph.ts

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

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

package/src/packages/notifier/index.ts

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

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

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

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