@studiometa/js-toolkit/helpers/createApp.js

A set of useful little bits of JavaScript to boost your project! 🚀

import { getInstances } from "../Base/index.js";
import { features } from "../Base/features.js";
import { useMutation } from "../services/index.js";
import { isBoolean, isObject, isString } from "../utils/index.js";
function createApp(App, options = {}) {
  let app;
  const {
    root = document.body,
    breakpoints = null,
    blocking = null,
    prefix = null,
    attributes = null
  } = options instanceof HTMLElement ? { root: options } : options;
  if (isObject(breakpoints)) {
    features.set("breakpoints", breakpoints);
  }
  if (isBoolean(blocking)) {
    features.set("blocking", blocking);
  }
  if (isString(prefix)) {
    features.set("prefix", prefix);
  }
  if (isObject(attributes)) {
    features.set("attributes", attributes);
  }
  const service = useMutation(document.documentElement, { childList: true, subtree: true });
  const symbol = Symbol("createApp");
  service.add(symbol, (props) => {
    for (const mutation of props.mutations) {
      if (mutation.type === "childList") {
        for (const node of mutation.removedNodes) {
          if (!node.isConnected) {
            for (const instance of getInstances()) {
              if (node === instance.$el || node.contains(instance.$el)) {
                instance.$terminate();
              }
            }
          }
        }
      }
    }
  });
  async function init() {
    app = new App(root);
    await app.$mount();
    return app;
  }
  let p;
  if (features.get("blocking")) {
    p = init();
  } else {
    p = new Promise((resolve) => {
      if (document.readyState === "complete") {
        resolve(init());
      } else {
        document.addEventListener("readystatechange", () => {
          if (document.readyState === "complete") {
            resolve(init());
          }
        });
      }
    });
  }
  return () => p;
}
export {
  createApp
};
//# sourceMappingURL=createApp.js.map