@lisergia/core 1.0.0 → 2.0.0

package/dist/index.mjs

@@ -0,0 +1,552 @@
+// src/App.ts
+import { autorun, computed, makeObservable, observable, observe } from "mobx";
+
+// src/EventEmitter.ts
+import AutoBind from "auto-bind";
+import { createNanoEvents } from "nanoevents";
+var EventEmitter = class {
+  emitter;
+  entries = /* @__PURE__ */ new Map();
+  constructor() {
+    AutoBind(this);
+    this.emitter = createNanoEvents();
+  }
+  on(event, callback) {
+    if (!callback) {
+      return console.trace("No callback provided");
+    }
+    const emitter = this.emitter.on(event, callback);
+    this.entries.set(callback, emitter);
+    return emitter;
+  }
+  off(event, callback) {
+    const unsubscribe = this.entries.get(callback);
+    if (unsubscribe) {
+      unsubscribe();
+    }
+  }
+  fire(event, ...args) {
+    this.emitter.emit(event, ...args);
+  }
+  destroy() {
+    this.entries.forEach((unsubscribe) => unsubscribe());
+  }
+};
+
+// src/Component.ts
+var Component = class extends EventEmitter {
+  application;
+  autoListeners;
+  autoMount;
+  classes;
+  selector;
+  selectors;
+  id;
+  element;
+  elements = {};
+  constructor({
+    application,
+    autoListeners = true,
+    autoMount = true,
+    classes,
+    element,
+    elements,
+    id
+  }) {
+    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) {
+    if (selector instanceof HTMLElement) {
+      this.element = selector;
+    } else {
+      this.element = document.querySelector(selector);
+    }
+  }
+  initElements(selectors) {
+    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);
+        if (elements.length === 0) {
+          const elements2 = document.querySelectorAll(selector);
+          if (elements2.length === 0) {
+            this.elements[key] = null;
+          } else if (elements2.length === 1) {
+            this.elements[key] = elements2[0];
+          } else {
+            this.elements[key] = elements2;
+          }
+        } else if (elements.length === 1) {
+          this.elements[key] = elements[0];
+        } else {
+          this.elements[key] = elements;
+        }
+      }
+    }
+  }
+  addEventListeners() {
+  }
+  removeEventListeners() {
+  }
+  destroy() {
+    super.destroy();
+    this.removeEventListeners();
+  }
+};
+
+// src/Links.ts
+import { reaction } from "mobx";
+
+// src/Link.ts
+var Link = class extends Component {
+  constructor({ element }) {
+    super({ element });
+  }
+  onClick(event) {
+    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;
+  }
+};
+
+// src/Links.ts
+var Links = class extends EventEmitter {
+  constructor(application) {
+    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) {
+    this.application.route = href;
+  }
+  refresh() {
+    this.addEventListeners();
+  }
+};
+
+// src/App.ts
+var ApplicationManager = class extends Component {
+  template = 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;
+  components = [];
+  transition;
+  initComponents(components) {
+    const classes = components.map(
+      ({ component: Component2 }) => new Component2({
+        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) {
+    this.components.push(component);
+  }
+  removeComponent(component) {
+    component.destroy();
+    const index = this.components.indexOf(component);
+    if (index !== -1) {
+      this.components.splice(index, 1);
+    }
+  }
+  onComponentChange(event) {
+    if (event.type === "splice") {
+      const { added, removed } = event;
+    }
+  }
+  //
+  // Datasets.
+  //
+  datasets = [];
+  initDatasets(datasets) {
+    this.datasets = datasets;
+  }
+  //
+  // Routes.
+  //
+  pages = /* @__PURE__ */ new Map();
+  initRoutes(routes) {
+    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);
+  }
+  initPage() {
+    this.createPage();
+    this.createLinks();
+  }
+  //
+  // Links.
+  //
+  createLinks() {
+    this.links = new Links(this);
+  }
+  //
+  // Page.
+  //
+  currentPage = void 0;
+  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 = window.location.pathname;
+  onRouteChange({ oldValue, newValue }) {
+    this.onRouteChangeRequest({
+      href: newValue,
+      pushState: true
+    });
+  }
+  async onRouteChangeRequest({ href, pushState = true }) {
+    const request = await window.fetch(href);
+    const response = await request.text();
+    this.onRequest({
+      href,
+      response,
+      pushState
+    });
+  }
+  //
+  // Request.
+  //
+  nextPage = {};
+  async onRequest({ href, response, pushState }) {
+    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);
+  }
+};
+var Application = new ApplicationManager();
+
+// src/Page.ts
+import Lenis from "lenis";
+import { makeObservable as makeObservable2, observable as observable2 } from "mobx";
+import Tempus from "tempus";
+var Page = class extends Component {
+  datasets = [];
+  scroll = 0;
+  scrollEnabled = true;
+  scrollOptions = {};
+  constructor({
+    application,
+    classes,
+    datasets,
+    element,
+    elements,
+    scrollEnabled = true,
+    scrollOptions = {}
+  }) {
+    super({
+      autoMount: false,
+      autoListeners: false,
+      classes,
+      element,
+      elements
+    });
+    this.application = application;
+    this.datasets = datasets;
+    this.scrollEnabled = scrollEnabled;
+    this.scrollOptions = scrollOptions;
+    makeObservable2(this, {
+      components: observable2,
+      scroll: observable2
+    });
+  }
+  create() {
+    super.create();
+    this.createResizeObserver();
+    this.createComponents();
+    this.createScroll();
+    this.addEventListeners();
+  }
+  createResizeObserver() {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.onResize();
+    });
+    this.resizeObserver.observe(this.elements.wrapper);
+  }
+  destroyResizeObserver() {
+    this.resizeObserver.disconnect();
+  }
+  //
+  // Components.
+  //
+  components = /* @__PURE__ */ new Set();
+  createComponents() {
+    this.datasets.map(({ component: Component2, selector }) => {
+      const elements = this.element.querySelectorAll(selector);
+      const components = Array.from(elements).map((element) => {
+        const component = new Component2({
+          application: this.application,
+          element
+        });
+        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();
+  }
+  createScroll() {
+    if (!this.scrollEnabled) {
+      this.element.addEventListener("scroll", this.onScrollFallback);
+      return;
+    }
+    this.lenis = new Lenis({
+      content: this.elements.wrapper,
+      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) {
+    this.lenis?.raf(time);
+  }
+  onScroll(scroll) {
+    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 = void 0;
+  }
+  //
+  // Destroy.
+  //
+  destroy() {
+    super.destroy();
+    this.destroyResizeObserver();
+    this.destroyComponents();
+    this.destroyScroll();
+  }
+};
+
+// src/index.ts
+import Tempus2 from "tempus";
+export {
+  Application,
+  ApplicationManager,
+  Component,
+  EventEmitter,
+  Link,
+  Links,
+  Page,
+  Tempus2 as Tempus
+};

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@lisergia/core",
-  "version": "1.0.0",
-  "exports": {
-    "./*": "./src/*.ts"
+  "version": "2.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch"
   },
-  "main": "./src/index.ts",
-  "files": [
-    "src"
-  ],
   "dependencies": {
+    "@lisergia/config-tsconfig": "2.0.0",
     "auto-bind": "^5.0.1",
     "lenis": "^1.3.1",
     "mobx": "^6.13.7",
     "nanoevents": "^9.1.0",
-    "tempus": "1.0.0-dev.10"
+    "tempus": "^1.0.0-dev.10"
   }
 }

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@lisergia/config-tsconfig/base.json"
+}