@lisergia/core 0.0.0

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@lisergia/core",
+  "version": "0.0.0",
+  "exports": {
+    "./*": "./src/*.ts"
+  },
+  "main": "./src/index.ts",
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "auto-bind": "^5.0.1",
+    "lenis": "^1.3.1",
+    "mobx": "^6.13.7",
+    "nanoevents": "^9.1.0",
+    "tempus": "1.0.0-dev.10"
+  }
+}

package/src/App.ts

@@ -0,0 +1,293 @@
+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,
+
+      // 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.
+  //
+  declare links: Links
+
+  initPage() {
+    this.createPage()
+    this.createLinks()
+  }
+
+  //
+  // Links.
+  //
+  createLinks() {
+    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
+
+  onRouteChange({ oldValue, newValue }: IValueDidChange<string>) {
+    this.onRouteChangeRequest({
+      href: newValue,
+      pushState: true,
+    })
+  }
+
+  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 }) {
+    const domParser = new DOMParser()
+    const dom = 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)
+    }
+  }
+
+  //
+  // Pop State.
+  //
+  onPopState() {
+    this.onRouteChangeRequest({
+      href: document.location.pathname,
+      pushState: false,
+    })
+  }
+
+  //
+  // 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

@@ -0,0 +1,133 @@
+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)!
+    }
+  }
+
+  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
+        }
+      }
+    }
+  }
+
+  addEventListeners() {}
+
+  removeEventListeners() {}
+
+  destroy() {
+    super.destroy()
+
+    this.removeEventListeners()
+  }
+}

package/src/EventEmitter.ts

@@ -0,0 +1,41 @@
+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()
+    }
+  }
+
+  fire(event: string, ...args: any[]) {
+    this.emitter.emit(event, ...args)
+  }
+
+  destroy() {
+    this.entries.forEach((unsubscribe) => unsubscribe())
+  }
+}

package/src/Link.ts

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

@@ -0,0 +1,46 @@
+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
+  }
+
+  refresh() {
+    this.addEventListeners()
+  }
+}

package/src/Page.ts

@@ -0,0 +1,209 @@
+import Lenis, { LenisOptions } from 'lenis'
+import { makeObservable, observable } from 'mobx'
+import Tempus from 'tempus'
+
+import { ApplicationManager } from './App'
+import { Component, ComponentClasses, ComponentSelectors } from './Component'
+
+export interface PageParameters {
+  application: ApplicationManager
+  classes?: ComponentClasses
+  datasets: Array<{ component: typeof Component; selector: string }>
+  element?: HTMLElement | string
+  elements?: ComponentSelectors
+  scrollEnabled?: boolean
+  scrollOptions?: LenisOptions
+}
+
+export class Page extends Component {
+  declare element: HTMLElement
+  declare elements: {
+    wrapper: HTMLElement
+  }
+
+  declare application: ApplicationManager
+
+  datasets: Array<{
+    component: typeof Component
+    selector: string
+  }> = []
+
+  scroll: number = 0
+  scrollEnabled: boolean = true
+  scrollOptions: LenisOptions = {}
+
+  declare unsubscribeRaf: (() => void) | undefined
+
+  constructor({
+    application,
+    classes,
+    datasets,
+    element,
+    elements,
+    scrollEnabled = true,
+    scrollOptions = {},
+  }: PageParameters) {
+    super({
+      autoMount: false,
+      autoListeners: false,
+      classes,
+      element,
+      elements,
+    })
+
+    this.application = application
+    this.datasets = datasets
+
+    this.scrollEnabled = scrollEnabled
+    this.scrollOptions = scrollOptions
+
+    makeObservable(this, {
+      components: observable,
+      scroll: observable,
+    })
+  }
+
+  create() {
+    super.create()
+
+    this.createResizeObserver()
+    this.createComponents()
+    this.createScroll()
+
+    this.addEventListeners()
+  }
+
+  //
+  // Observer.
+  //
+  declare resizeObserver: ResizeObserver
+
+  createResizeObserver() {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.onResize()
+    })
+
+    this.resizeObserver.observe(this.elements.wrapper)
+  }
+
+  destroyResizeObserver() {
+    this.resizeObserver.disconnect()
+  }
+
+  //
+  // Components.
+  //
+  components: Set<Component> = new Set()
+
+  createComponents() {
+    this.datasets.map(({ component: Component, selector }) => {
+      const elements = this.element.querySelectorAll(selector)
+
+      const components = Array.from(elements).map((element) => {
+        const component = new Component({
+          application: this.application,
+          element: element as HTMLElement,
+        })
+
+        return component
+      })
+
+      components.forEach((component) => {
+        this.application.addComponent(component)
+
+        this.components.add(component)
+      })
+    })
+  }
+
+  destroyComponents() {
+    this.components.forEach((component) => {
+      this.application.removeComponent(component)
+    })
+
+    this.components.clear()
+  }
+
+  //
+  // Scroll.
+  //
+  declare lenis: Lenis
+
+  createScroll() {
+    if (!this.scrollEnabled) {
+      this.element.addEventListener('scroll', this.onScrollFallback)
+
+      return
+    }
+
+    this.lenis = new Lenis({
+      content: this.elements.wrapper as HTMLElement,
+      wrapper: this.element,
+      ...this.scrollOptions,
+    })
+
+    this.lenis.on('scroll', (event) => {
+      this.onScroll(event.scroll)
+
+      this.emitter.emit('scroll', event)
+    })
+  }
+
+  destroyScroll() {
+    if (!this.scrollEnabled) {
+      this.element.removeEventListener('scroll', this.onScrollFallback)
+
+      return
+    }
+
+    this.lenis?.destroy()
+  }
+
+  //
+  // Events.
+  //
+  onResize() {
+    this.lenis?.resize()
+  }
+
+  onRAF(time: number) {
+    this.lenis?.raf(time)
+  }
+
+  onScroll(scroll: number) {
+    this.scroll = scroll
+  }
+
+  onScrollFallback() {
+    this.scroll = this.element.scrollTop
+
+    this.emitter.emit('scroll', { scroll: this.scroll })
+  }
+
+  //
+  // Events.
+  //
+  addEventListeners() {
+    super.addEventListeners()
+
+    this.unsubscribeRaf = Tempus.add(this.onRAF)
+  }
+
+  removeEventListeners() {
+    super.removeEventListeners()
+
+    this.unsubscribeRaf?.()
+    this.unsubscribeRaf = undefined
+  }
+
+  //
+  // Destroy.
+  //
+  destroy() {
+    super.destroy()
+
+    this.destroyResizeObserver()
+    this.destroyComponents()
+    this.destroyScroll()
+  }
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from './App'
+export * from './Link'
+export * from './Links'
+export * from './Component'
+export * from './EventEmitter'
+export * from './Page'
+
+import Tempus from 'tempus'
+
+export { Tempus }