rumious 0.0.13-beta.2 → 1.0.1

package/dist/index.esm.js

@@ -0,0 +1,1072 @@
+import { create } from 'mutative';
+
+class RumiousRenderContext {
+  constructor(target, app) {
+    this.target = target;
+    this.app = app;
+    this.onRenderFinished = [];
+  }
+  findName(name) {
+    return this.target[name];
+  }
+}
+
+function render(context, template, target) {
+  let generator = template.generator.bind(context.target);
+  context.renderHelper = render;
+  generator(target, context);
+  setTimeout(async () => {
+    const callbacks = [...context.onRenderFinished];
+    context.onRenderFinished = [];
+    for (const callback of callbacks) {
+      await callback();
+    }
+  }, 0);
+}
+
+class RumiousComponent {
+  static classNames = "";
+  static tagName = "rumious-component";
+  constructor() {
+    this.renderOptions = {
+      mode: "idle"
+    };
+  }
+  onCreate() {}
+  onRender() {}
+  onDestroy() {}
+  async onBeforeRender() {}
+  prepare(currentContext, props) {
+    this.props = props;
+    this.context = new RumiousRenderContext(this, currentContext.app);
+  }
+  async requestRender() {
+    await this.onBeforeRender();
+    let template = this.template();
+    render(this.context, template, this.element);
+    this.onRender();
+  }
+  requestCleanup() {}
+}
+
+class RumiousComponentElement extends HTMLElement {
+  constructor() {
+    super();
+    this.props = {};
+  }
+  setup(context, componentConstructor) {
+    this.context = context;
+    this.componentConstructor = componentConstructor;
+  }
+  connectedCallback() {
+    if (!this.componentConstructor) {
+      console.warn("Rumious: Cannot find matching component constructor.");
+      return;
+    }
+    this.componentInstance = new this.componentConstructor();
+    this.componentInstance.element = this;
+    if (this.componentConstructor.classNames) {
+      this.className = this.componentConstructor.classNames;
+    }
+    this.componentInstance.prepare(this.context, this.props);
+    this.componentInstance.onCreate();
+    this.componentInstance.requestRender();
+  }
+  disconnectedCallback() {
+    this.componentInstance?.onDestroy();
+  }
+}
+
+class RumiousApp {
+  constructor(root, options = {}) {
+    this.root = root;
+    this.options = options;
+    this.modules = [];
+    this.context = new RumiousRenderContext(this, this);
+  }
+  addModule(module, options) {
+    let instance = module.init(this, options);
+    this.modules.push(instance);
+    return instance;
+  }
+  render(template) {
+    render(this.context, template, this.root);
+  }
+}
+function createApp(root, options) {
+  return new RumiousApp(root, options);
+}
+
+class RumiousRenderTemplate {
+  constructor(generator) {
+    this.generator = generator;
+  }
+}
+
+class RumiousDymanicInjector {
+  constructor(contents) {
+    this.contents = contents;
+    this.targets = new Map();
+    if (!contents || contents.length === 0) {
+      throw new Error("Injector must be initialized with non-empty content");
+    }
+    const first = contents[0];
+    this.type = typeof first === "string" ? "string" : "element";
+  }
+  addTarget(element) {
+    this.targets.set(element, 1);
+  }
+  inject(element) {
+    if (!this.targets.has(element)) return;
+    if (!this.contents) return;
+    element.innerHTML = "";
+    if (this.type === "string") {
+      for (const content of this.contents) {
+        element.insertAdjacentHTML("beforeend", content);
+      }
+    } else {
+      for (const content of this.contents) {
+        element.appendChild(content);
+      }
+    }
+  }
+  injectAll() {
+    for (const target of this.targets.keys()) {
+      this.inject(target);
+    }
+  }
+  removeTarget(element) {
+    this.targets.delete(element);
+  }
+  clear() {
+    this.targets.clear();
+  }
+}
+function createHTMLInjector(html) {
+  return new RumiousDymanicInjector([html]);
+}
+
+class RumiousElementRef {
+  constructor(target) {
+    this.target = target;
+  }
+  getElement() {
+    return this.target;
+  }
+  remove() {
+    this.target.remove();
+  }
+  addChild(child) {
+    this.target.appendChild(child);
+  }
+  listChild() {
+    return this.target.childNodes;
+  }
+  querySelector(query) {
+    return this.target.querySelector(query);
+  }
+  querySelectorAll(query) {
+    return this.target.querySelectorAll(query);
+  }
+  set text(t) {
+    this.target.textContent = t;
+  }
+  get text() {
+    return this.target.textContent;
+  }
+  set value(v) {
+    if (this.target instanceof HTMLInputElement || this.target instanceof HTMLTextAreaElement) {
+      this.target.value = v;
+    }
+  }
+  get value() {
+    if (this.target instanceof HTMLInputElement || this.target instanceof HTMLTextAreaElement) {
+      return this.target.value;
+    }
+    return undefined;
+  }
+  addClassName(className) {
+    this.target.classList.add(className);
+  }
+  removeClassName(className) {
+    this.target.classList.remove(className);
+  }
+  hasClassName(className) {
+    return this.target.classList.contains(className);
+  }
+  toggleClass(className, force) {
+    return this.target.classList.toggle(className, force);
+  }
+  setStyle(styles) {
+    Object.assign(this.target.style, styles);
+  }
+  getStyle(property) {
+    return getComputedStyle(this.target).getPropertyValue(property);
+  }
+  setAttribute(key, value) {
+    this.target.setAttribute(key, value);
+  }
+  getAttribute(key) {
+    return this.target.getAttribute(key);
+  }
+  removeAttribute(key) {
+    this.target.removeAttribute(key);
+  }
+  on(event, callback, options) {
+    this.target.addEventListener(event, callback, options);
+  }
+  off(event, callback, options) {
+    this.target.removeEventListener(event, callback, options);
+  }
+  set html(t) {
+    this.target.innerHTML = t;
+  }
+  get html() {
+    return this.target.innerHTML;
+  }
+  getBoundingRect() {
+    return this.target.getBoundingClientRect();
+  }
+  isInViewport() {
+    const rect = this.target.getBoundingClientRect();
+    return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+  }
+  prependChild(child) {
+    this.target.prepend(child);
+  }
+  setDisabled(disabled) {
+    if (this.target instanceof HTMLButtonElement || this.target instanceof HTMLInputElement || this.target instanceof HTMLTextAreaElement) {
+      this.target.disabled = disabled;
+    }
+  }
+  addClasses(...classNames) {
+    this.target.classList.add(...classNames);
+  }
+  removeClasses(...classNames) {
+    this.target.classList.remove(...classNames);
+  }
+  replaceClass(oldClass, newClass) {
+    this.target.classList.replace(oldClass, newClass);
+  }
+  moveTo(newParent) {
+    newParent.appendChild(this.target);
+  }
+  getParent() {
+    return this.target.parentElement;
+  }
+  getNextSibling() {
+    return this.target.nextElementSibling;
+  }
+  getPreviousSibling() {
+    return this.target.previousElementSibling;
+  }
+  hide() {
+    this.target.style.display = 'none';
+  }
+  show() {
+    this.target.style.removeProperty('display');
+  }
+  isHidden() {
+    return window.getComputedStyle(this.target).display === 'none';
+  }
+  scrollIntoView(options = {
+    behavior: 'smooth'
+  }) {
+    this.target.scrollIntoView(options);
+  }
+  matches(selector) {
+    return this.target.matches(selector);
+  }
+  getChildren() {
+    return Array.from(this.target.children);
+  }
+  insertAfter(newNode) {
+    if (this.target.parentNode) {
+      this.target.parentNode.insertBefore(newNode, this.target.nextSibling);
+    }
+  }
+  insertBefore(newNode) {
+    if (this.target.parentNode) {
+      this.target.parentNode.insertBefore(newNode, this.target);
+    }
+  }
+  clearChildren() {
+    while (this.target.firstChild) {
+      this.target.removeChild(this.target.firstChild);
+    }
+  }
+  animate(keyframes, options) {
+    return this.target.animate(keyframes, options);
+  }
+}
+function createElementRef() {
+  return new RumiousElementRef(document.createElement("span"));
+}
+
+function extractName(str) {
+  const index = str.indexOf('$');
+  if (index !== -1) {
+    return str.slice(index + 1);
+  }
+  return '';
+}
+function generateName(prefix = "_") {
+  return `${prefix}${(Math.floor(Math.random() * 9999) * Date.now()).toString(32)}`;
+}
+
+class RumiousReactor {
+  constructor(target) {
+    this.target = target;
+    this.bindings = [];
+  }
+  addBinding(bind) {
+    this.bindings.push(bind);
+  }
+  removeBinding(bind) {
+    this.bindings = this.bindings.filter(_ => _ !== bind);
+  }
+  async emit(commit) {
+    await Promise.allSettled(this.bindings.map(bind => {
+      try {
+        const result = bind(commit);
+        return result instanceof Promise ? result : Promise.resolve(result);
+      } catch (err) {
+        return Promise.reject(err);
+      }
+    }));
+  }
+}
+
+class RumiousState {
+  constructor(value, reactor) {
+    this.value = value;
+    this.reactor = reactor ?? new RumiousReactor(this);
+  }
+  set(value) {
+    this.value = value;
+    this.reactor.emit({
+      type: "SET",
+      target: this,
+      value: value
+    });
+  }
+  get() {
+    return this.value;
+  }
+  increase(count = 1) {
+    if (typeof this.value === "number") {
+      this.set(this.value + count);
+    }
+  }
+  produce(callback) {
+    const [draft, finalize] = create(this.value);
+    callback(draft);
+    this.set(finalize());
+  }
+}
+function watch(state, fn) {
+  state.reactor.addBinding(fn);
+}
+function unwatch(state, fn) {
+  state.reactor.removeBinding(fn);
+}
+function createState(value) {
+  return new RumiousState(value);
+}
+
+function eventBindingDirective(context, target, modifier, data) {
+  if (typeof data === "string") {
+    data = context.findName(extractName(data));
+  }
+  target.addEventListener(modifier, data);
+}
+function refBindingDirective(context, target, modifier, data) {
+  if (typeof data === "string") {
+    data = context.findName(extractName(data));
+  }
+  if (data instanceof RumiousElementRef) {
+    data.target = target;
+  } else {
+    throw Error("Rumious: ref directive required RumiousElementRef !");
+  }
+}
+function injectDirective(context, target, modifier, data) {
+  if (typeof data === "string") {
+    data = context.findName(extractName(data));
+  }
+  if (data instanceof RumiousDymanicInjector) {
+    data.addTarget(target);
+    data.inject(target);
+  } else {
+    throw Error("Rumious: inject directive required RumiousInjector !");
+  }
+}
+function bindDirective(context, target, modifier, data) {
+  if (typeof data === "string") {
+    data = context.findName(extractName(data));
+  }
+  if (data instanceof RumiousState) {
+    target.setAttribute(modifier, data.value);
+    data.reactor.addBinding(({}) => {
+      target.setAttribute(modifier, data.value);
+    });
+  } else {
+    throw Error("Rumious: bind directive required RumiousState !");
+  }
+}
+function modelDirective(context, target, modifier, data) {
+  if (typeof data === "string") {
+    data = context.findName(extractName(data));
+  }
+  if (data instanceof RumiousState && (target instanceof HTMLInputElement || target instanceof HTMLSelectElement || target instanceof HTMLTextAreaElement)) {
+    const type = target.type;
+    target.addEventListener("input", () => {
+      if (target instanceof HTMLInputElement) {
+        switch (type) {
+          case "checkbox":
+            data.set(target.checked);
+            break;
+          case "radio":
+            if (target.checked) data.set(target.value);
+            break;
+          default:
+            data.set(target.value);
+        }
+      } else if (target instanceof HTMLSelectElement || target instanceof HTMLTextAreaElement) {
+        data.set(target.value);
+      }
+    });
+  } else {
+    throw Error("Rumious: model directive requires RumiousState and a valid form element!");
+  }
+}
+const directives = {
+  "on": eventBindingDirective,
+  "ref": refBindingDirective,
+  "inject": injectDirective,
+  "bind": bindDirective,
+  "model": modelDirective
+};
+
+class RumiousDynamicArrayRenderer {
+  domMap = new Map();
+  constructor(state, callback, keyFn) {
+    this.state = state;
+    this.callback = callback;
+    this.keyFn = keyFn ?? ((_, i) => i);
+  }
+  prepare(anchor, context) {
+    this.anchorElement = anchor;
+    this.context = context;
+  }
+  async render() {
+    await this.reconcile(this.state.value);
+    this.state.reactor.addBinding(this.onStateChange.bind(this));
+  }
+  async onStateChange(commit) {
+    if (commit.type === "APPEND") {
+      const key = this.keyFn(commit.item, commit.key);
+      if (!this.domMap.has(key)) {
+        const template = await this.callback(commit.item, commit.key);
+        const frag = document.createDocumentFragment();
+        this.context.renderHelper(this.context, template, frag);
+        this.anchorElement.appendChild(frag);
+        this.domMap.set(key, frag);
+      }
+    } else if (commit.type === "SET_BY_KEY") {
+      const key = this.keyFn(commit.item, commit.key);
+      const oldNode = this.anchorElement.childNodes[commit.key];
+      if (oldNode) {
+        const template = await this.callback(commit.item, commit.key);
+        const frag = document.createDocumentFragment();
+        this.context.renderHelper(this.context, template, frag);
+        this.anchorElement.replaceChild(frag, oldNode);
+        this.domMap.set(key, frag);
+      }
+    } else if (commit.type === "REMOVE_BY_KEY") {
+      const node = this.anchorElement.childNodes[commit.key];
+      if (node) {
+        this.anchorElement.removeChild(node);
+        const entry = [...this.domMap.entries()].find(([, n]) => n === node);
+        if (entry) this.domMap.delete(entry[0]);
+      }
+    } else if (commit.type === "INSERT_BY_KEY") {
+      const key = this.keyFn(commit.item, commit.key);
+      if (!this.domMap.has(key)) {
+        const template = await this.callback(commit.item, commit.key);
+        const frag = document.createDocumentFragment();
+        this.context.renderHelper(this.context, template, frag);
+        const refNode = this.anchorElement.childNodes[commit.key] ?? null;
+        this.anchorElement.insertBefore(frag, refNode);
+        this.domMap.set(key, frag);
+      }
+    } else {
+      await this.reconcile(this.state.value);
+    }
+  }
+  async reconcile(nextItems) {
+    const oldMap = this.domMap;
+    const newMap = new Map();
+    const newNodes = [];
+    for (let i = 0; i < nextItems.length; i++) {
+      const item = nextItems[i];
+      const key = this.keyFn(item, i);
+      let node = oldMap.get(key);
+      if (!node) {
+        const template = await this.callback(item, i);
+        const frag = document.createDocumentFragment();
+        this.context.renderHelper(this.context, template, frag);
+        node = frag;
+      }
+      newMap.set(key, node);
+      newNodes.push(node);
+    }
+    this.anchorElement.textContent = "";
+    for (const node of newNodes) {
+      this.anchorElement.appendChild(node);
+    }
+    this.domMap = newMap;
+  }
+}
+function renderDynamicArray(state, callback) {
+  return new RumiousDynamicArrayRenderer(state, callback);
+}
+
+function isPrimitive(value) {
+  return value !== Object(value);
+}
+
+async function dynamicValue$1(target, textNode, value, context) {
+  const parent = textNode.parentNode;
+  if (!parent) return;
+  if (isPrimitive(value)) {
+    textNode.textContent = String(value);
+  } else if (value && value instanceof RumiousState) {
+    textNode.textContent = value.value;
+    function onValueChange({}) {
+      if (document.contains(textNode)) {
+        textNode.textContent = value.value;
+      } else {
+        value.reactor.removeBinding(onValueChange);
+      }
+    }
+    value.reactor.addBinding(onValueChange);
+  } else if (Array.isArray(value)) {
+    textNode.textContent = value.map(String).join("");
+  } else if (value instanceof RumiousDynamicArrayRenderer) {
+    value.prepare(textNode.parentElement, context);
+    value.render();
+  } else if (value instanceof HTMLElement) {
+    textNode.replaceWith(value);
+  } else if (value instanceof RumiousRenderTemplate) {
+    let fragment = document.createDocumentFragment();
+    context.renderHelper?.(context, value, fragment);
+    textNode.replaceWith(fragment);
+  } else if (value instanceof NodeList || value instanceof HTMLCollection) {
+    if (value.length === 0) {
+      textNode.remove();
+      return;
+    }
+    const fragment = document.createDocumentFragment();
+    for (const node of Array.from(value)) {
+      fragment.appendChild(node.cloneNode(true));
+    }
+    textNode.replaceWith(fragment);
+    textNode.remove();
+  } else if (value && typeof value.toString === "function") {
+    try {
+      textNode.textContent = value.toString();
+    } catch {
+      textNode.textContent = "";
+    }
+  } else {
+    textNode.textContent = "";
+  }
+}
+
+function template(generator) {
+  return new RumiousRenderTemplate(generator);
+}
+function addDirective(element, context, name, modifier = "", data) {
+  let callback = directives[name];
+  if (callback) {
+    callback(context, element, modifier, data);
+  } else {
+    throw Error("Rumious: Cannot solve directive !");
+  }
+}
+function dynamicValue(target, textNode, value, context) {
+  dynamicValue$1(target, textNode, value, context);
+}
+function createComponent(componentConstructor) {
+  let tagName = componentConstructor.tagName;
+  if (!window.customElements.get(tagName)) {
+    window.customElements.define(tagName, class extends RumiousComponentElement {
+      static tag = tagName;
+    });
+  }
+  return document.createElement(tagName);
+}
+
+// This is just to satisfy TypeScript's JSX requirement.
+// Rumious doesn't use createElement — we do things differently.
+
+function createElement(...args) {
+  throw Error("Rumious doesn't use createElement !");
+}
+window.RUMIOUS_JSX = {
+  template,
+  createElement,
+  addDirective,
+  dynamicValue,
+  createComponent
+};
+
+class RumiousChildrenRef {
+  constructor(target) {
+    this.target = target;
+  }
+  list() {
+    return Array.from(this.target.children);
+  }
+  getChild(index) {
+    return this.list()[index];
+  }
+  remove(index) {
+    this.list()[index]?.remove();
+  }
+  add(child) {
+    this.target.appendChild(child);
+  }
+  querySelector(query) {
+    return this.target.querySelector(query);
+  }
+  querySelectorAll(query) {
+    return this.target.querySelectorAll(query);
+  }
+  clear() {
+    this.target.innerHTML = '';
+  }
+  replaceChild(index, newChild) {
+    const oldChild = this.getChild(index);
+    if (oldChild) {
+      this.target.replaceChild(newChild, oldChild);
+    }
+  }
+  insertBefore(newChild, index) {
+    const referenceChild = this.getChild(index);
+    if (referenceChild) {
+      this.target.insertBefore(newChild, referenceChild);
+    } else {
+      this.add(newChild);
+    }
+  }
+  prepend(child) {
+    this.target.prepend(child);
+  }
+  getFirstChild() {
+    return this.list()[0];
+  }
+  getLastChild() {
+    return this.list()[this.list().length - 1];
+  }
+  hasChildren() {
+    return this.target.hasChildNodes();
+  }
+  count() {
+    return this.target.children.length;
+  }
+  find(predicate) {
+    return this.list().find(predicate);
+  }
+  forEach(callback) {
+    this.list().forEach(callback);
+  }
+  removeAllMatching(query) {
+    this.querySelectorAll(query).forEach(element => element.remove());
+  }
+  toggleClass(className) {
+    this.list().forEach(child => child.classList.toggle(className));
+  }
+  setAttribute(key, value) {
+    this.list().forEach(child => child.setAttribute(key, value));
+  }
+}
+
+class RumiousArrayState extends RumiousState {
+  constructor(value, reactor) {
+    super(value, reactor);
+  }
+  set(arg1, arg2) {
+    if (typeof arg1 === "number" && arg2 !== undefined) {
+      const index = arg1;
+      const newValue = arg2;
+      this.value[index] = newValue;
+      this.reactor.emit({
+        type: "SET_BY_KEY",
+        value: [...this.value],
+        target: this,
+        key: index,
+        item: newValue
+      });
+    } else if (Array.isArray(arg1)) {
+      super.set(arg1);
+    } else {
+      throw new Error("Invalid arguments passed to set()");
+    }
+  }
+  get(arg) {
+    return typeof arg === "number" ? this.value[arg] : this.value;
+  }
+  insert(index, newItem) {
+    this.value.splice(index, 0, newItem);
+    this.reactor.emit({
+      type: "INSERT_BY_KEY",
+      value: this.value,
+      target: this,
+      key: index,
+      item: newItem
+    });
+    return this;
+  }
+  remove(index) {
+    this.value.splice(index, 1);
+    this.reactor.emit({
+      type: "REMOVE_BY_KEY",
+      value: this.value,
+      target: this,
+      key: index
+    });
+    return this;
+  }
+  append(value) {
+    this.value.push(value);
+    this.reactor.emit({
+      type: "APPEND",
+      value: this.value,
+      target: this,
+      item: value
+    });
+    return this;
+  }
+  clear() {
+    this.value.length = 0;
+    this.reactor.emit({
+      type: "SET",
+      value: [],
+      target: this
+    });
+    return this;
+  }
+  replace(index, newItem) {
+    if (index < 0 || index >= this.value.length) {
+      throw new Error("Index out of bounds");
+    }
+    this.value[index] = newItem;
+    this.reactor.emit({
+      type: "SET_BY_KEY",
+      value: [...this.value],
+      target: this,
+      key: index,
+      item: newItem
+    });
+    return this;
+  }
+  filter(callback) {
+    this.value = this.value.filter(callback);
+    this.reactor.emit({
+      type: "SET",
+      value: this.value,
+      target: this
+    });
+    return this;
+  }
+  map(callback) {
+    this.value = this.value.map(callback);
+    this.reactor.emit({
+      type: "SET",
+      value: this.value,
+      target: this
+    });
+    return this;
+  }
+  sort(compareFn) {
+    this.value.sort(compareFn);
+    this.reactor.emit({
+      type: "SET",
+      value: this.value,
+      target: this
+    });
+    return this;
+  }
+  reverse() {
+    this.value.reverse();
+    this.reactor.emit({
+      type: "SET",
+      value: this.value,
+      target: this
+    });
+    return this;
+  }
+  get length() {
+    return this.value.length;
+  }
+  forEach(callback) {
+    this.value.forEach(callback);
+  }
+}
+function createArrayState(value) {
+  return new RumiousArrayState(value);
+}
+
+class RumiousObjectState extends RumiousState {
+  #locked = false;
+  constructor(value, reactor) {
+    super(value, reactor);
+  }
+  set(arg1, arg2) {
+    if (this.#locked) throw new Error("Object is locked");
+    if (typeof arg1 === "string") {
+      const key = arg1;
+      const newValue = arg2;
+      this.value[key] = newValue;
+      this.reactor.emit({
+        type: "SET_BY_KEY",
+        value: {
+          ...this.value
+        },
+        target: this,
+        key,
+        item: newValue
+      });
+      return this;
+    } else if (typeof arg1 === "object") {
+      super.set(arg1);
+    } else {
+      throw new Error("Invalid arguments passed to set()");
+    }
+  }
+  remove(key) {
+    if (this.#locked) throw new Error("Object is locked");
+    if (key in this.value) {
+      delete this.value[key];
+      this.reactor.emit({
+        type: "REMOVE_BY_KEY",
+        value: {
+          ...this.value
+        },
+        target: this,
+        key
+      });
+    }
+    return this;
+  }
+  merge(partial) {
+    if (this.#locked) throw new Error("Object is locked");
+    Object.assign(this.value, partial);
+    this.reactor.emit({
+      type: "SET",
+      value: {
+        ...this.value
+      },
+      target: this
+    });
+    return this;
+  }
+  assign(obj) {
+    if (this.#locked) throw new Error("Object is locked");
+    this.value = {
+      ...this.value,
+      ...obj
+    };
+    this.reactor.emit({
+      type: "SET",
+      value: {
+        ...this.value
+      },
+      target: this
+    });
+    return this;
+  }
+  clear() {
+    if (this.#locked) throw new Error("Object is locked");
+    for (const key in this.value) {
+      delete this.value[key];
+    }
+    this.reactor.emit({
+      type: "SET",
+      value: {},
+      target: this
+    });
+    return this;
+  }
+  get(arg) {
+    return typeof arg === "string" ? this.value[arg] : this.value;
+  }
+  keys() {
+    return Object.keys(this.value);
+  }
+  values() {
+    return Object.values(this.value);
+  }
+  entries() {
+    return Object.entries(this.value);
+  }
+  has(key) {
+    return key in this.value;
+  }
+  get size() {
+    return Object.keys(this.value).length;
+  }
+  forEach(callback) {
+    Object.entries(this.value).forEach(([key, value]) => {
+      callback(value, key, this.value);
+    });
+  }
+  map(callback) {
+    const result = {};
+    Object.entries(this.value).forEach(([key, value]) => {
+      result[key] = callback(value, key, this.value);
+    });
+    return result;
+  }
+  clone() {
+    return JSON.parse(JSON.stringify(this.value));
+  }
+  toJSON() {
+    return JSON.parse(JSON.stringify(this.value));
+  }
+  toObject() {
+    return this.get();
+  }
+  lock() {
+    this.#locked = true;
+    return this;
+  }
+  unlock() {
+    this.#locked = false;
+    return this;
+  }
+  get isLocked() {
+    return this.#locked;
+  }
+  freeze() {
+    Object.freeze(this.value);
+    return this;
+  }
+  unfreeze() {
+    this.value = JSON.parse(JSON.stringify(this.value));
+    return this;
+  }
+  get isFrozen() {
+    return Object.isFrozen(this.value);
+  }
+}
+function createObjectState(value) {
+  return new RumiousObjectState(value);
+}
+
+window.RUMIOUS_CONTEXTS = {};
+class RumiousContext {
+  constructor(initialValues = {}) {
+    this.events = {};
+    this.values = initialValues;
+  }
+  has(key) {
+    return key in this.values;
+  }
+  set(key, value) {
+    this.values[key] = value;
+  }
+  get(key) {
+    return this.values[key];
+  }
+  on(event, callback) {
+    if (!this.events[event]) this.events[event] = [];
+    this.events[event].push(callback);
+  }
+  off(event, callback) {
+    if (!this.events[event]) return;
+    this.events[event] = this.events[event].filter(fn => fn !== callback);
+  }
+  emit(event, payload) {
+    if (!this.events[event]) return;
+    this.events[event].forEach(fn => fn(payload));
+  }
+}
+function createContext(values, name = generateName("rctx_")) {
+  if (window.RUMIOUS_CONTEXTS[name]) return window.RUMIOUS_CONTEXTS[name];else {
+    let context = new RumiousContext(values);
+    window.RUMIOUS_CONTEXTS[name] = context;
+    return context;
+  }
+}
+
+function tholle(func, limit) {
+  let lastCall = 0;
+  return function (...args) {
+    const now = Date.now();
+    if (now - lastCall >= limit) {
+      lastCall = now;
+      func.apply(this, args);
+    }
+  };
+}
+function denounce(func, delay) {
+  let timer;
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => func.apply(this, args), delay);
+  };
+}
+function trailingThrottle(func, limit) {
+  let lastCall = 0;
+  let lastArgs = null;
+  let timeout = null;
+  function invoke() {
+    lastCall = Date.now();
+    func.apply(this, lastArgs);
+    lastArgs = null;
+  }
+  return function (...args) {
+    const now = Date.now();
+    lastArgs = args;
+    if (now - lastCall >= limit) {
+      invoke.call(this);
+    } else if (!timeout) {
+      timeout = setTimeout(() => {
+        timeout = null;
+        invoke.call(this);
+      }, limit - (now - lastCall));
+    }
+  };
+}
+function leadingTrailingDebounce(func, delay) {
+  let timer;
+  let isFirstCall = true;
+  return function (...args) {
+    if (isFirstCall) {
+      func.apply(this, args);
+      isFirstCall = false;
+    }
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(this, args);
+      isFirstCall = true;
+    }, delay);
+  };
+}
+function rafThrottle(func) {
+  let ticking = false;
+  return function (...args) {
+    if (!ticking) {
+      ticking = true;
+      requestAnimationFrame(() => {
+        func.apply(this, args);
+        ticking = false;
+      });
+    }
+  };
+}
+
+export { RumiousApp, RumiousArrayState, RumiousChildrenRef, RumiousComponent, RumiousComponentElement, RumiousContext, RumiousDymanicInjector, RumiousElementRef, RumiousObjectState, RumiousRenderTemplate, RumiousState, createApp, createArrayState, createContext, createElementRef, createHTMLInjector, createObjectState, createState, denounce, leadingTrailingDebounce, rafThrottle, renderDynamicArray, template, tholle, trailingThrottle, unwatch, watch };