@lisergia/core 23.0.1 → 25.0.0

package/src/App.ts

@@ -1,312 +0,0 @@
-import { autorun, computed, IArrayDidChange, IValueDidChange, makeObservable, observable, observe } from 'mobx'
-
-import { Component, ComponentParameters } from './Component'
-import { Links } from './Links'
-import { Page, PageParameters } from './Page'
-
-export interface ApplicationComponentData {
-  component: new (params?: ComponentParameters) => Component
-}
-
-export interface ApplicationComponentDatasetData extends ApplicationComponentData {
-  selector: string
-}
-
-export interface ApplicationRoute {
-  component: new (params?: PageParameters) => Page
-  template: string
-}
-
-export class ApplicationManager extends Component {
-  declare element: HTMLElement
-
-  template: string = document.documentElement.dataset.template ?? '404'
-
-  constructor() {
-    super({
-      autoListeners: false,
-      element: '.app',
-    })
-
-    makeObservable(this, {
-      // Application DOM Element.
-      element: observable,
-
-      // Components.
-      canvas: observable,
-      components: observable,
-      transition: observable,
-
-      // Page Information.
-      currentPage: observable,
-      nextPage: observable,
-
-      // Route Information.
-      route: observable,
-      routeHistory: observable,
-
-      // Template Information.
-      template: observable,
-
-      // Page Scroll.
-      scroll: computed,
-    })
-
-    observe(this.components, this.onComponentChange)
-    observe(this, 'route', this.onRouteChange)
-
-    autorun(this.onTitleUpdate)
-    autorun(this.onTemplateUpdate)
-
-    this.addEventListeners()
-  }
-
-  onTitleUpdate() {
-    const title = this.nextPage?.title
-
-    if (title) {
-      document.title = title
-    }
-  }
-
-  onTemplateUpdate() {
-    const template = this.nextPage?.template
-
-    if (template) {
-      document.documentElement.dataset.template = template
-
-      this.template = template
-    }
-  }
-
-  //
-  // Components.
-  //
-  canvas?: Component
-  components: Array<Component> = []
-  transition?: Component & { onTransition?: (args: any) => Promise<void> }
-
-  initComponents(components: Array<ApplicationComponentData>) {
-    const classes = components.map(
-      ({ component: Component }) =>
-        new Component({
-          application: this,
-        }),
-    )
-
-    this.canvas = classes.find((component) => component.id === 'canvas')
-    this.transition = classes.find((component) => component.id === 'transition')
-
-    classes.forEach((component) => {
-      this.addComponent(component)
-    })
-  }
-
-  addComponent(component: Component) {
-    this.components.push(component)
-  }
-
-  removeComponent(component: Component) {
-    component.destroy()
-
-    const index = this.components.indexOf(component)
-
-    if (index !== -1) {
-      this.components.splice(index, 1)
-    }
-  }
-
-  onComponentChange(event: IArrayDidChange<Component>) {
-    if (event.type === 'splice') {
-      const { added, removed } = event
-    }
-  }
-
-  //
-  // Datasets.
-  //
-  datasets: Array<ApplicationComponentDatasetData> = []
-
-  initDatasets(datasets: Array<ApplicationComponentDatasetData>) {
-    this.datasets = datasets
-  }
-
-  //
-  // Routes.
-  //
-  pages: Map<string, new (args: PageParameters) => Page> = new Map()
-
-  initRoutes(routes: Array<ApplicationRoute>) {
-    routes.forEach(({ component, template }) => {
-      this.pages.set(template, component)
-    })
-  }
-
-  //
-  // Sprites.
-  //
-  async initSprites(url = '/bundle.svg') {
-    const request = await window.fetch(url)
-    const response = await request.text()
-
-    const sprite = document.createElement('div')
-
-    sprite.innerHTML = response
-
-    sprite.style.left = '-999999px'
-    sprite.style.opacity = '0'
-    sprite.style.position = 'absolute'
-    sprite.style.top = '0'
-
-    document.body.appendChild(sprite)
-  }
-
-  //
-  // Initialization.
-  //
-  IS_LINKS_ENABLED = true
-
-  declare links: Links
-
-  initPage() {
-    this.createPage()
-    this.createLinks()
-  }
-
-  //
-  // Links.
-  //
-  createLinks() {
-    if (!this.IS_LINKS_ENABLED) {
-      return
-    }
-
-    this.links = new Links(this)
-  }
-
-  //
-  // Page.
-  //
-  currentPage?: Page = undefined
-
-  createPage(template = this.template) {
-    const PageClass = this.pages.get(template)!
-
-    const page = new PageClass({
-      application: this,
-      datasets: this.datasets,
-    })
-
-    this.currentPage = page
-    this.currentPage.create()
-  }
-
-  destroyPage() {
-    if (this.currentPage) {
-      this.currentPage.destroy()
-    }
-  }
-
-  //
-  // Navigate.
-  //
-  route: string = window.location.pathname
-  routeHistory: Array<string> = [this.route]
-  routePushState: boolean = true
-
-  onRouteChange({ oldValue, newValue }: IValueDidChange<string>) {
-    const href = newValue.replace(window.location.origin, '')
-
-    this.onRouteChangeRequest({
-      href,
-      pushState: this.routePushState,
-    })
-  }
-
-  async onRouteChangeRequest({ href, pushState = true }: { href: string; pushState: boolean }) {
-    const request = await window.fetch(href)
-    const response = await request.text()
-
-    this.onRequest({
-      href,
-      response,
-      pushState,
-    })
-  }
-
-  //
-  // Request.
-  //
-  nextPage: {
-    element?: Element
-    template?: string
-    title?: string
-  } = {}
-
-  async onRequest({ href, response, pushState }: { href: string; response: string; pushState: boolean }) {
-    let domParser: DOMParser | null = new DOMParser()
-    let dom: Document | null = domParser.parseFromString(response, 'text/html')
-
-    const html = dom!.querySelector('html')!
-    const app = dom!.querySelector('.app')!
-
-    this.nextPage = {
-      element: app,
-      template: html.dataset.template ?? this.template,
-      title: dom!.title ?? document.title,
-    }
-
-    if (this.transition) {
-      await this.transition.onTransition?.(this)
-    } else {
-      this.currentPage!.element.remove()
-      this.currentPage!.destroy()
-
-      this.element.appendChild(this.nextPage.element!.firstElementChild!)
-
-      this.createPage(this.nextPage.template)
-    }
-
-    if (pushState) {
-      window.history.pushState({}, this.nextPage.title!, href)
-    }
-
-    this.routeHistory.push(href)
-
-    domParser = null
-    dom = null
-  }
-
-  //
-  // Pop State.
-  //
-  onPopState(event: PopStateEvent) {
-    if (event.state === null) {
-      return event.preventDefault()
-    }
-
-    this.routePushState = false
-    this.route = document.location.pathname
-    this.routePushState = true
-  }
-
-  //
-  // Scroll.
-  //
-  get scroll() {
-    return this.currentPage!.scroll ?? 0
-  }
-
-  //
-  // Listeners.
-  //
-  addEventListeners() {
-    window.addEventListener('popstate', this.onPopState)
-  }
-
-  removeEventListeners() {
-    window.removeEventListener('popstate', this.onPopState)
-  }
-}
-
-export const Application = new ApplicationManager()

package/src/Component.ts

@@ -1,144 +0,0 @@
-import { ApplicationManager } from './App'
-import { EventEmitter } from './EventEmitter'
-
-export interface ComponentClasses {
-  [key: string]: string
-}
-
-export interface ComponentElements {
-  [key: string]: Array<any> | Element | Array<Element> | HTMLElement | Array<HTMLElement> | NodeList | Window | null
-}
-
-export type ComponentSelector = string | HTMLElement
-
-export interface ComponentSelectors {
-  [key: string]: string | Element | Array<Element> | HTMLElement | Array<HTMLElement> | NodeList | Window
-}
-
-export interface ComponentParameters {
-  application?: ApplicationManager
-  autoListeners?: boolean
-  autoMount?: boolean
-  classes?: ComponentClasses
-  element?: ComponentSelector
-  elements?: ComponentSelectors
-  id?: string
-}
-
-export class Component extends EventEmitter {
-  application?: ApplicationManager
-  autoListeners: boolean
-  autoMount: boolean
-  classes?: ComponentClasses
-  selector?: ComponentSelector
-  selectors?: ComponentSelectors
-
-  id?: string
-
-  element?: HTMLElement
-  elements: ComponentElements = {}
-
-  constructor({
-    application,
-    autoListeners = true,
-    autoMount = true,
-    classes,
-    element,
-    elements,
-    id,
-  }: ComponentParameters) {
-    super()
-
-    this.application = application
-    this.autoListeners = autoListeners
-    this.autoMount = autoMount
-
-    this.classes = classes
-
-    this.selector = element
-    this.selectors = elements
-
-    this.id = id
-
-    if (this.autoMount) {
-      this.create()
-    }
-
-    if (this.autoListeners) {
-      this.addEventListeners()
-    }
-  }
-
-  create() {
-    if (this.selector) {
-      this.initElement(this.selector)
-    }
-
-    if (this.selectors) {
-      this.initElements(this.selectors)
-    }
-  }
-
-  initElement(selector: ComponentSelector) {
-    if (selector instanceof HTMLElement) {
-      this.element = selector
-    } else {
-      this.element = document.querySelector(selector)!
-    }
-  }
-
-  destroyElement() {
-    this.element = undefined
-  }
-
-  initElements(selectors?: ComponentSelectors) {
-    for (const key in selectors) {
-      const selector = selectors[key]
-
-      if (selector === window) {
-        this.elements[key] = window
-      } else if (selector instanceof HTMLElement) {
-        this.elements[key] = selector
-      } else if (selector instanceof NodeList) {
-        this.elements[key] = selector
-      } else if (Array.isArray(selector)) {
-        this.elements[key] = selector
-      } else {
-        const elements = this.element!.querySelectorAll(selector as string)
-
-        if (elements.length === 0) {
-          const elements = document.querySelectorAll(selector as string)
-
-          if (elements.length === 0) {
-            this.elements[key] = null
-          } else if (elements.length === 1) {
-            this.elements[key] = elements[0] as HTMLElement
-          } else {
-            this.elements[key] = elements
-          }
-        } else if (elements.length === 1) {
-          this.elements[key] = elements[0] as HTMLElement
-        } else {
-          this.elements[key] = elements
-        }
-      }
-    }
-  }
-
-  destroyElements() {
-    this.elements = {}
-  }
-
-  addEventListeners() {}
-
-  removeEventListeners() {}
-
-  destroy() {
-    super.destroy()
-
-    this.removeEventListeners()
-
-    this.destroyElements()
-    this.destroyElement()
-  }
-}

package/src/EventEmitter.ts

@@ -1,44 +0,0 @@
-import AutoBind from 'auto-bind'
-import { Emitter, Unsubscribe, createNanoEvents } from 'nanoevents'
-
-export class EventEmitter {
-  emitter: Emitter
-  entries: Map<Function, Unsubscribe> = new Map()
-
-  constructor() {
-    AutoBind(this)
-
-    this.emitter = createNanoEvents()
-  }
-
-  on(event: string, callback: (...args: any) => void) {
-    if (!callback) {
-      return console.trace('No callback provided')
-    }
-
-    const emitter = this.emitter.on(event, callback)
-
-    this.entries.set(callback, emitter)
-
-    return emitter
-  }
-
-  off(event: string, callback: (...args: any) => void) {
-    const unsubscribe = this.entries.get(callback)
-
-    if (unsubscribe) {
-      unsubscribe()
-    }
-
-    this.entries.delete(callback)
-  }
-
-  fire(event: string, ...args: any[]) {
-    this.emitter.emit(event, ...args)
-  }
-
-  destroy() {
-    this.entries.forEach((unsubscribe) => unsubscribe())
-    this.entries.clear()
-  }
-}

package/src/Link.ts

@@ -1,51 +0,0 @@
-import { Component } from './Component'
-
-export class Link extends Component {
-  declare element: HTMLLinkElement
-
-  constructor({ element }: { element: HTMLAnchorElement }) {
-    super({ element })
-  }
-
-  onClick(event: MouseEvent) {
-    event.preventDefault()
-
-    this.fire('click', this.element.href)
-  }
-
-  addEventListeners() {
-    const isLocal = this.element.href.includes(window.location.origin)
-    const isLocalPrevented = this.element.dataset.linkOverride === ''
-    const isNotEmail = !this.element.href.startsWith('mailto')
-    const isNotPhone = !this.element.href.startsWith('tel')
-    const isDownload = this.element.hasAttribute('download')
-    const isAnchor = this.element.href.includes('#')
-
-    if (isAnchor) {
-      const hash = this.element.href.split('#')[1]
-
-      if (hash) {
-        const element = document.querySelector(`#${hash}`)
-
-        if (element) {
-          return
-        }
-      }
-    }
-
-    if (isLocalPrevented || isDownload) {
-      return
-    }
-
-    if (isLocal) {
-      this.element.onclick = this.onClick
-    } else if (isNotEmail && isNotPhone) {
-      this.element.rel = 'noopener'
-      this.element.setAttribute('target', '_blank')
-    }
-  }
-
-  removeEventListeners() {
-    this.element.onclick = null
-  }
-}

package/src/Links.ts

@@ -1,46 +0,0 @@
-import { reaction } from 'mobx'
-
-import { ApplicationManager } from './App'
-import { Link } from './Link'
-import { EventEmitter } from './EventEmitter'
-
-export class Links extends EventEmitter {
-  declare application: ApplicationManager
-  declare links: Array<Link>
-
-  constructor(application: ApplicationManager) {
-    super()
-
-    this.application = application
-
-    reaction(
-      () => application.currentPage,
-      () => this.refresh(),
-      { fireImmediately: true },
-    )
-  }
-
-  addEventListeners() {
-    this.links?.forEach((link) => link.destroy())
-
-    const links = document.querySelectorAll('a')
-
-    this.links = Array.from(links).map((element) => {
-      const link = new Link({
-        element,
-      })
-
-      link.on('click', this.onLinkClick)
-
-      return link
-    })
-  }
-
-  onLinkClick(href: string) {
-    this.application.route = href.replace(window.location.origin, '')
-  }
-
-  refresh() {
-    this.addEventListeners()
-  }
-}