@lisergia/core 1.0.0 → 2.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,20 @@
+
+
+> @lisergia/core@1.0.0 build
+> tsup src/index.ts --format cjs,esm --dts
+
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.0
+CLI Target: esnext
+CJS Build start
+ESM Build start
+CJS dist/index.js 15.04 KB
+CJS ⚡️ Build success in 39ms
+ESM dist/index.mjs 12.93 KB
+ESM ⚡️ Build success in 39ms
+DTS Build start
+DTS ⚡️ Build success in 1055ms
+DTS dist/index.d.ts  5.74 KB
+DTS dist/index.d.mts 5.74 KB
+⠙

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# @lisergia/core
+
+## 2.0.0
+
+### Major Changes
+
+- Update build and serving of npm packages.
+- Updating build and serving of npm packages.
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - @lisergia/config-tsconfig@2.0.0
+
+## 1.0.0
+
+### Major Changes
+
+- 9c70654: Initial release of Lisergia packages.

package/dist/index.cjs

@@ -0,0 +1,596 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Application: () => Application,
+  ApplicationManager: () => ApplicationManager,
+  Component: () => Component,
+  EventEmitter: () => EventEmitter,
+  Link: () => Link,
+  Links: () => Links,
+  Page: () => Page,
+  Tempus: () => import_tempus2.default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/App.ts
+var import_mobx2 = require("mobx");
+
+// src/EventEmitter.ts
+var import_auto_bind = __toESM(require("auto-bind"), 1);
+var import_nanoevents = require("nanoevents");
+var EventEmitter = class {
+  emitter;
+  entries = /* @__PURE__ */ new Map();
+  constructor() {
+    (0, import_auto_bind.default)(this);
+    this.emitter = (0, import_nanoevents.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
+var import_mobx = require("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;
+    (0, import_mobx.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"
+    });
+    (0, import_mobx2.makeObservable)(this, {
+      // Application DOM Element.
+      element: import_mobx2.observable,
+      // Components.
+      canvas: import_mobx2.observable,
+      components: import_mobx2.observable,
+      transition: import_mobx2.observable,
+      // Page Information.
+      currentPage: import_mobx2.observable,
+      nextPage: import_mobx2.observable,
+      // Route Information.
+      route: import_mobx2.observable,
+      // Template Information.
+      template: import_mobx2.observable,
+      // Page Scroll.
+      scroll: import_mobx2.computed
+    });
+    (0, import_mobx2.observe)(this.components, this.onComponentChange);
+    (0, import_mobx2.observe)(this, "route", this.onRouteChange);
+    (0, import_mobx2.autorun)(this.onTitleUpdate);
+    (0, import_mobx2.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
+var import_lenis = __toESM(require("lenis"), 1);
+var import_mobx3 = require("mobx");
+var import_tempus = __toESM(require("tempus"), 1);
+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;
+    (0, import_mobx3.makeObservable)(this, {
+      components: import_mobx3.observable,
+      scroll: import_mobx3.observable
+    });
+  }
+  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 import_lenis.default({
+      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 = import_tempus.default.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
+var import_tempus2 = __toESM(require("tempus"), 1);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Application,
+  ApplicationManager,
+  Component,
+  EventEmitter,
+  Link,
+  Links,
+  Page,
+  Tempus
+});