rumious 1.0.12 → 2.0.0

package/src/render/render.ts

@@ -0,0 +1,31 @@
+import { RumiousRenderContext } from './context.js';
+import { RumiousTemplate } from '../types/index.js';
+
+export function render(
+  content: RumiousTemplate,
+  container:HTMLElement,
+  context:RumiousRenderContext
+):HTMLElement{
+  context.onRendered = [];
+  let result = content(container,context);
+  
+  for (var i = 0; i < context.onRendered.length; i++) {
+    context.onRendered[i]();
+  }
+  return result;
+}
+
+export function renderFrag(
+  content: RumiousTemplate,
+  context: RumiousRenderContext
+): HTMLElement {
+  let container = document.createDocumentFragment();
+  context.onRendered = [];
+  let result = content(container, context);
+  
+  for (var i = 0; i < context.onRendered.length; i++) {
+    context.onRendered[i]();
+  }
+  
+  return result;
+}

package/src/render/view.ts

@@ -0,0 +1,101 @@
+import { RumiousTemplate } from '../types/index.js';
+import { RumiousRenderContext } from './context.js';
+import { render, renderFrag } from './render.js';
+
+export interface RumiousViewControlTarget {
+  element: HTMLElement,
+  context: RumiousRenderContext
+}
+
+export class RumiousViewControl {
+  private targets: RumiousViewControlTarget[] = [];
+  
+  constructor() {}
+  
+  addTarget(target: RumiousViewControlTarget) {
+    this.targets.push(target);
+  }
+  
+  
+  setView(template: RumiousTemplate) {
+    
+    const targets = this.targets;
+    
+    if (targets.length === 0) {
+      throw new Error(`RumiousRenderError: No target assigned to ViewControl`);
+    }
+    
+    for (let i = 0; i < targets.length; i++) {
+      render(template, targets[i].element, targets[i].context);
+    }
+  }
+  
+  removeChild(index: number) {
+    for (let i = 0; i < this.targets.length; i++) {
+      let parent = this.targets[i].element.parentElement;
+      if (!parent) return;
+      let element = parent.children[index];
+      if (element) parent.removeChild(element);
+    }
+  }
+  
+  addChild(
+    template: RumiousTemplate,
+    prepend: boolean = false
+  ) {
+    const targets = this.targets;
+    if (targets.length === 0) {
+      throw new Error(`RumiousRenderError: No target assigned to ViewControl`);
+    }
+    
+    for (let i = 0; i < targets.length; i++) {
+      let templ = renderFrag(template, targets[i].context);
+      if (!prepend) targets[i].element.appendChild(templ);
+      else targets[i].element.prepend(templ);
+    }
+  }
+  
+  
+  each(callback: (target: RumiousViewControlTarget) => any) {
+    for (let target of this.targets) {
+      callback(target);
+    }
+  }
+  
+  emptyAll() {
+    const targets = this.targets;
+    for (let i = 0; i < targets.length; i++) {
+      targets[i].element.textContent = '';
+    }
+  }
+  
+  empty(target: HTMLElement) {
+    const targets = this.targets;
+    for (let i = 0; i < targets.length; i++) {
+      if (targets[i].element === target) {
+        target.textContent = '';
+        return;
+      }
+    }
+  }
+  
+  updateChild(index: number, template: RumiousTemplate) {
+    for (let i = 0; i < this.targets.length; i++) {
+      const { element, context } = this.targets[i];
+      const parent = element.parentElement;
+      if (!parent) continue;
+      
+      const oldChild = parent.children[index];
+      const newNode = renderFrag(template, context);
+      
+      if (oldChild) {
+        parent.replaceChild(newNode, oldChild);
+      }
+    }
+  }
+  
+}
+
+export function createViewControl(): RumiousViewControl {
+  return new RumiousViewControl();
+}

package/src/state/index.ts

@@ -0,0 +1,2 @@
+export * from './state.js';
+export * from './list.js';

package/src/state/list.ts

@@ -0,0 +1,96 @@
+import { RumiousState } from './state.js';
+import { RumiousReactor } from './reactor.js';
+
+export class RumiousListState < T > extends RumiousState < T[] > {
+  constructor(
+    value: T[] = [],
+    reactor ? : RumiousReactor < RumiousState < T[] >>
+  ) {
+    super(value, reactor);
+  }
+  
+  append(value: T) {
+    this.value.push(value);
+    this.reactor?.notify({
+      type: 'append',
+      state: this,
+      key:this.value.length -1 ,
+      value
+    });
+  }
+  
+  prepend(value: T) {
+    this.value.unshift(value);
+    this.reactor?.notify({
+      type: 'prepend',
+      state: this,
+      key:0,
+      value
+    });
+  }
+  
+  insert(pos: number, value: T) {
+    this.value.splice(pos, 0, value);
+    this.reactor?.notify({
+      type: 'insert',
+      state: this,
+      value,
+      key: pos
+    });
+  }
+  
+  updateAt(pos: number, value: T) {
+    this.value[pos] = value;
+    this.reactor?.notify({
+      type: 'update',
+      state: this,
+      value,
+      key: pos
+    });
+  }
+  
+  remove(pos: number) {
+    let currentValue = this.value[pos];
+    this.value.splice(pos, 1);
+    this.reactor?.notify({
+      type: 'remove',
+      state: this,
+      value: currentValue,
+      key: pos
+    });
+  }
+  
+  clear() {
+    this.value.length = 0;
+    this.reactor?.notify({
+      type: 'set',
+      state: this,
+      value: []
+    });
+  }
+  
+  reverse() {
+    this.value.reverse();
+    this.reactor?.notify({
+      type: 'set',
+      state: this,
+      value: this.value
+    });
+  }
+  
+  filter(predicate: (item: T, index: number, array: T[]) => boolean) {
+    this.value = this.value.filter(predicate);
+    this.reactor?.notify({
+      type: 'set',
+      state: this,
+      value: this.value
+    });
+  }
+  
+}
+
+export function createListState<T>(
+  values:T[]
+):RumiousListState<T>{
+  return new RumiousListState(values);
+}

package/src/state/reactor.ts

@@ -0,0 +1,65 @@
+import { RumiousStateBind, RumiousChangeCommit } from '../types/index.js';
+
+export class RumiousReactor < T = any > {
+  private bindings: RumiousStateBind < T > [] = [];
+  private internal: RumiousStateBind < T > [] = [];
+  public isUIBatch = true;
+  private scheduled = false;
+  private queuedCommits: RumiousChangeCommit < T > [] = [];
+  
+  
+  constructor(public target: T) {}
+  
+  addBinding(binding: RumiousStateBind < T > ): void {
+    this.bindings.push(binding);
+  }
+  
+  removeBinding(binding: RumiousStateBind < T > ): void {
+    this.bindings = this.bindings.filter(b => b !== binding);
+  }
+  
+  addInternalBinding(binding: RumiousStateBind < T > ): void {
+    this.internal.push(binding);
+  }
+  
+  removeInternalBinding(binding: RumiousStateBind < T > ): void {
+    this.internal = this.internal.filter(b => b !== binding);
+  }
+  
+  notify(commit: RumiousChangeCommit < T > ): void {
+    for (const binding of this.bindings) {
+      binding(commit);
+    }
+    
+    if (this.isUIBatch) {
+      this.scheduleInternalUpdate(commit);
+    } else {
+      for (const binding of this.internal) {
+        binding(commit);
+      }
+    }
+  }
+  
+  
+  private scheduleInternalUpdate(commit: RumiousChangeCommit < T > ) {
+    this.queuedCommits.push(commit);
+    
+    if (!this.scheduled) {
+      this.scheduled = true;
+      queueMicrotask(() => {
+        this.flushInternal();
+      });
+    }
+  }
+  
+  private flushInternal() {
+    const lastCommit = this.queuedCommits[this.queuedCommits.length - 1];
+    
+    for (const binding of this.internal) {
+      binding(lastCommit); // chỉ gửi commit cuối cùng
+    }
+    
+    this.queuedCommits = [];
+    this.scheduled = false;
+  }
+}

package/src/state/state.ts

@@ -0,0 +1,68 @@
+import { RumiousReactor } from './reactor.js';
+import { RumiousStateBind } from '../types/index.js';
+
+export class RumiousState < T > {
+  
+  constructor(
+    public value: T,
+    public reactor ? : RumiousReactor < RumiousState < T >>
+  ) {
+    
+    if (!this.reactor) {
+      this.reactor = new RumiousReactor < RumiousState < T >> (this);
+    }
+  }
+  
+  set(value: T) {
+    this.value = value;
+    this.reactor?.notify({
+      type: 'set',
+      value: value,
+      state: this
+    });
+  }
+  
+  get(): T {
+    return this.value;
+  }
+  
+  slientUpdate(value: T) {
+    this.value = value;
+  }
+  
+  update(updater: (value: T) => T) {
+    this.set(updater(this.value));
+  }
+  
+  toJSON(): string {
+    return JSON.stringify(this.value);
+  }
+  
+  trigger() {
+    this.reactor?.notify({
+      type: 'set',
+      value: this.value,
+      state: this
+    });
+  }
+}
+
+export function createState < T > (value: T): RumiousState < T > {
+  return new RumiousState < T > (value);
+}
+
+type StateBindFor < M > = RumiousStateBind < RumiousState < M >> ;
+
+export function watch < M > (
+  state: RumiousState < M > ,
+  callback: StateBindFor < M >
+) {
+  if (state.reactor) state.reactor.addBinding(callback);
+}
+
+export function unwatch < M > (
+  state: RumiousState < M > ,
+  callback: StateBindFor < M >
+) {
+  if (state.reactor) state.reactor.removeBinding(callback);
+}

package/src/types/component.ts

@@ -0,0 +1,6 @@
+import type { RumiousComponent } from '../component/index.js';
+
+export interface RumiousComponentConstructor<T = any> {
+  new(): RumiousComponent<T>;
+  tagName: string | 'rumious-component';
+}

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './template.js';
+export * from './component.js';
+export * from './state.js';

package/src/types/state.ts

@@ -0,0 +1,16 @@
+export type RumiousChangeCommitType =
+ | 'set'
+ | 'append'
+ | 'prepend'
+ | 'insert'
+ | 'update'
+ | 'remove'
+ 
+export interface RumiousChangeCommit<T> {
+  state:T;
+  type:RumiousChangeCommitType;
+  value:any;
+  key?:number;
+}
+
+export type RumiousStateBind < T = any > = (commit:RumiousChangeCommit<T>) => void;

package/src/types/template.ts

@@ -0,0 +1,7 @@
+import type { RumiousRenderContext } from '../render/index.js';
+
+export interface RumiousTemplate {
+  (root: HTMLElement | DocumentFragment, context: RumiousRenderContext): HTMLElement;
+  __isTemplate: true;
+}
+

package/src/utils/checker.ts

@@ -0,0 +1,5 @@
+import {RumiousTemplate} from '../types/index.js';
+
+export function isTemplate(fn: unknown): fn is RumiousTemplate {
+  return typeof fn === 'function' && (fn as any).__isTemplate === true;
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"compilerOptions": {
+		"target": "esnext",
+		"module": "esnext",
+		"outDir": "./dist",
+		"esModuleInterop": true,
+		"sourceMap":false,
+		"allowSyntheticDefaultImports": true,
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"declaration": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"paths": {
+			"rumious-compiler": ["../compiler/dist/index.d.ts"]
+		}
+	},
+	"include": ["./src", "./src/global.d.ts"]
+}

package/README.md

@@ -1,7 +0,0 @@
-# Rumious Core
-
-
-## Installation
-
-```bash
-npm install rumious

package/dist/context/context.d.ts

@@ -1,12 +0,0 @@
-export declare class RumiousContext<T extends object> {
-    events: Record<string, Function[]>;
-    values: Partial<T>;
-    constructor(initialValues?: Partial<T>);
-    has<K extends keyof T>(key: K): boolean;
-    set<K extends keyof T>(key: K, value: T[K]): void;
-    get<K extends keyof T>(key: K): T[K] | undefined;
-    on(event: string, callback: Function): void;
-    off(event: string, callback: Function): void;
-    emit(event: string, payload: any): void;
-}
-export declare function createContext<T extends object>(values: T, name?: string): RumiousContext<T>;

package/dist/context/index.d.ts

@@ -1 +0,0 @@
-export * from './context.js';

package/dist/index.cjs

@@ -1 +0,0 @@
-var t=require("mutative");class e{constructor(t,e){this.target=t,this.app=e,this.onRenderFinished=[]}findName(t){return this.target[t]}}function n(t,e,s){let r=e.generator.bind(t.target);t.renderHelper=n,r(s,t),setTimeout((async()=>{const e=[...t.onRenderFinished];t.onRenderFinished=[];for(const t of e)await t()}),0)}class s extends HTMLElement{constructor(){super(),this.props={}}setContext(t){this.context=t}setComponent(t){this.componentConstructor=t}setup(t,e){this.context=t,this.componentConstructor=e}connectedCallback(){this.componentConstructor?(this.componentInstance=new this.componentConstructor,this.componentInstance.element=this,this.componentConstructor.classNames&&(this.className=this.componentConstructor.classNames),this.componentInstance.prepare(this.context,this.props),this.componentInstance.onCreate(),this.componentInstance.requestRender()):console.warn("Rumious: Cannot find matching component constructor.")}disconnectedCallback(){this.componentInstance?.onDestroy()}}class r{constructor(t,n={}){this.root=t,this.options=n,this.modules=[],this.context=new e(this,this)}addModule(t,e){const n=t.init(this,e);return this.modules.push(n),n}render(t){n(this.context,t,this.root)}}class i{constructor(t){this.generator=t}}class o{constructor(t){if(this.contents=t,this.targets=new Map,!t||0===t.length)throw new Error("Injector must be initialized with non-empty content");const e=t[0];this.type="string"==typeof e?"string":"element"}commit(t){this.contents=t;const e=t[0];this.type="string"==typeof e?"string":"element"}addTarget(t){this.targets.set(t,1)}inject(t){if(this.targets.has(t)&&this.contents)if(t.innerHTML="","string"===this.type)for(const e of this.contents)t.insertAdjacentHTML("beforeend",e);else for(const e of this.contents)t.appendChild(e)}injectAll(){for(const t of this.targets.keys())this.inject(t)}removeTarget(t){this.targets.delete(t)}clear(){this.targets.clear()}}class a{constructor(t){this.target=t}getElement(){return this.target}remove(){this.target.remove()}addChild(t){this.target.appendChild(t)}listChild(){return this.target.childNodes}querySelector(t){return this.target.querySelector(t)}querySelectorAll(t){return this.target.querySelectorAll(t)}set text(t){this.target.textContent=t}get text(){return this.target.textContent}set value(t){(this.target instanceof HTMLInputElement||this.target instanceof HTMLTextAreaElement)&&(this.target.value=t)}get value(){if(this.target instanceof HTMLInputElement||this.target instanceof HTMLTextAreaElement)return this.target.value}addClassName(t){this.target.classList.add(t)}removeClassName(t){this.target.classList.remove(t)}hasClassName(t){return this.target.classList.contains(t)}toggleClass(t,e){return this.target.classList.toggle(t,e)}setStyle(t){Object.assign(this.target.style,t)}getStyle(t){return getComputedStyle(this.target).getPropertyValue(t)}setAttribute(t,e){this.target.setAttribute(t,e)}getAttribute(t){return this.target.getAttribute(t)}removeAttribute(t){this.target.removeAttribute(t)}on(t,e,n){this.target.addEventListener(t,e,n)}off(t,e,n){this.target.removeEventListener(t,e,n)}set html(t){this.target.innerHTML=t}get html(){return this.target.innerHTML}getBoundingRect(){return this.target.getBoundingClientRect()}isInViewport(){const t=this.target.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}prependChild(t){this.target.prepend(t)}setDisabled(t){(this.target instanceof HTMLButtonElement||this.target instanceof HTMLInputElement||this.target instanceof HTMLTextAreaElement)&&(this.target.disabled=t)}addClasses(...t){this.target.classList.add(...t)}removeClasses(...t){this.target.classList.remove(...t)}replaceClass(t,e){this.target.classList.replace(t,e)}moveTo(t){t.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"none"===window.getComputedStyle(this.target).display}scrollIntoView(t={behavior:"smooth"}){this.target.scrollIntoView(t)}matches(t){return this.target.matches(t)}getChildren(){return Array.from(this.target.children)}insertAfter(t){this.target.parentNode&&this.target.parentNode.insertBefore(t,this.target.nextSibling)}insertBefore(t){this.target.parentNode&&this.target.parentNode.insertBefore(t,this.target)}clearChildren(){for(;this.target.firstChild;)this.target.removeChild(this.target.firstChild)}animate(t,e){return this.target.animate(t,e)}}function h(t){const e=t.indexOf("$");return-1!==e?t.slice(e+1):""}class l{constructor(t){this.target=t,this.bindings=[]}addBinding(t){this.bindings.push(t)}removeBinding(t){this.bindings=this.bindings.filter((e=>e!==t))}async emit(t){await Promise.allSettled(this.bindings.map((e=>{try{const n=e(t);return n instanceof Promise?n:Promise.resolve(n)}catch(t){return Promise.reject(t)}})))}}class c{constructor(t,e){this.value=t,this.reactor=e??new l(this)}set(t){this.value=t,this.reactor.emit({type:"SET",target:this,value:t})}get(){return this.value}increase(t=1){"number"==typeof this.value&&this.set(this.value+t)}produce(e){const[n,s]=t.create(this.value);e(n),this.set(s())}}function u(t,e){t.reactor.addBinding(e)}function d(t,e){t.reactor.removeBinding(e)}const g={on:function(t,e,n,s){"string"==typeof s&&(s=t.findName(h(s))),e.addEventListener(n,s)},ref:function(t,e,n,s){if("string"==typeof s&&(s=t.findName(h(s))),!(s instanceof a))throw Error("Rumious: ref directive required RumiousElementRef !");s.target=e},inject:function(t,e,n,s){if("string"==typeof s&&(s=t.findName(h(s))),!(s instanceof o))throw Error("Rumious: inject directive required RumiousInjector !");s.addTarget(e),s.inject(e)},bind:function(t,e,n,s){if("string"==typeof s&&(s=t.findName(h(s))),!(s instanceof c))throw Error("Rumious: bind directive requires RumiousState!");{const t={text:(t,e)=>e.textContent=t,html:(t,e)=>e.innerHTML=t,value:(t,e)=>e.value=t,class:(t,e)=>e.className=t,style:(t,e)=>e.style.cssText=t,checked:(t,e)=>e.checked=t,disabled:(t,e)=>{"disabled"in e&&(e.disabled=t)},readonly:(t,e)=>e.readOnly=t,required:(t,e)=>e.required=t,selected:(t,e)=>e.selected=t,src:(t,e)=>e.src=t,href:(t,e)=>e.href=t,placeholder:(t,e)=>e.placeholder=t,title:(t,e)=>e.title=t,show:(t,e)=>e.style.display=t?"":"none",hide:(t,e)=>e.style.display=t?"none":""}[n]??((t,e)=>e.setAttribute(n,t));t(s.value,e),s.reactor.addBinding((()=>t(s.value,e)))}},model:function(t,e,n,s){if("string"==typeof s&&(s=t.findName(h(s))),!(s instanceof c&&(e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement)))throw Error("Rumious: model directive requires RumiousState and a valid form element!");{const t=e.type;e.addEventListener("input",(()=>{if(e instanceof HTMLInputElement)switch(t){case"checkbox":s.set(e.checked);break;case"radio":e.checked&&s.set(e.value);break;default:s.set(e.value)}else(e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement)&&s.set(e.value)}))}}};class m{constructor(t,e){this.state=t,this.callback=e}prepare(t,e){this.anchorElement=t,this.context=e}renderItem(t,e){const n=document.createDocumentFragment(),s=this.callback(t,e);return this.context.renderHelper(this.context,s,n),n}scheduleRenderAll(){requestAnimationFrame((()=>this.renderAll()))}async render(){this.state.reactor.addBinding(this.onStateChange.bind(this)),this.scheduleRenderAll()}renderAll(){const t=document.createDocumentFragment();this.state.value.forEach(((e,n)=>{t.appendChild(this.renderItem(e,n))})),this.anchorElement.replaceChildren(t)}updateElement(t,e){const n=this.anchorElement.children[t];n&&this.anchorElement.replaceChild(this.renderItem(e,t),n)}insertOrAppendElement(t,e){const n=this.renderItem(t,e),s=this.anchorElement.children[e];s?this.anchorElement.insertBefore(n,s):this.anchorElement.appendChild(n)}removeElement(t){this.anchorElement.children[t]?.remove()}appendElement(t,e){if(Array.isArray(t)){const n=document.createDocumentFragment();t.forEach(((t,s)=>{n.appendChild(this.renderItem(t,e+s))})),this.anchorElement.replaceChildren(n),this.anchorElement.appendChild(n)}}async onStateChange(t){if(document.contains(this.anchorElement))switch(t.type){case"SET":default:this.scheduleRenderAll();break;case"SET_BY_KEY":this.updateElement(t.key,t.value);break;case"REMOVE_BY_KEY":this.removeElement(t.key);break;case"INSERT_BY_KEY":this.insertOrAppendElement(t.value,t.key);break;case"APPEND":this.appendElement(t.value,this.state.value.length-t.value.length);break;case"PREPEND":this.anchorElement.prepend(this.renderItem(t.value,0))}else this.state.reactor.removeBinding(this.onStateChange.bind(this))}}class p extends m{isLoading=!1;constructor(t){super(t.data,t.template),this.options=t,this.limit=t.limit??50,this.offset=t.offset??0,this.onScroll=this.handleScroll.bind(this),this.onControl=this.handleControl.bind(this),this.onChange=this.handleStateChange.bind(this)}setState(t){this.options.state?.set(t)}async fetchData(){const t=await(this.options.loader?.(this.limit,this.offset))??[];return this.offset+=t.length,t}getScrollInfo(){const t=this.options.scrollElement;return t===window?{scrollTop:window.scrollY,scrollHeight:document.documentElement.scrollHeight,clientHeight:window.innerHeight}:{scrollTop:t.scrollTop,scrollHeight:t.scrollHeight,clientHeight:t.clientHeight}}async addData(){const t=this.options.scrollElement;this.isLoading=!0,this.setState("START_FETCH");const e=await this.fetchData();this.setState("END_FETCH"),0===e.length?(this.setState("NO_DATA"),t.removeEventListener("scroll",this.onScroll)):this.state.append(...e),this.isLoading=!1}async handleScroll(){const{scrollTop:t,scrollHeight:e,clientHeight:n}=this.getScrollInfo();t+n>=e-this.options.threshold&&!this.isLoading&&await this.addData()}handleControl(){"FETCH"===this.options?.controller?.get()&&this.addData()}handleStateChange(t){if(!document.contains(this.anchorElement))return this.options.controller&&d(this.options.controller,this.onControl),void this.state.reactor.removeBinding(this.onChange);this.onStateChange(t)}async render(){this.options.scrollElement.addEventListener("scroll",this.onScroll),this.options.controller&&u(this.options.controller,this.onControl),this.state.reactor.addBinding(this.onChange),this.scheduleRenderAll()}}class f extends m{constructor(t){super(t.data,t.template),this.options=t,this.size=t.size,this.currentPage=t.page??0}getPageData(){const t=this.currentPage*this.size,e=t+this.size;return this.state.value.slice(t,e)}renderPage(){const t=document.createDocumentFragment(),e=this.currentPage*this.size,n=e+this.size;this.state.value.slice(e,n).forEach(((n,s)=>{t.appendChild(this.renderItem(n,e+s))})),this.anchorElement.replaceChildren(t),this.calculate()}goToPage(t){const e=Math.floor(this.state.value.length/this.size);console.log(e),this.currentPage=Math.max(0,Math.min(t,e)),this.renderPage()}nextPage(){this.goToPage(this.currentPage+1)}prevPage(){this.goToPage(this.currentPage-1)}onControl({value:t}){switch(t){case"NEXT":this.nextPage();break;case"PREV":this.prevPage()}}async calculate(){if(this.options.info&&this.options.info.set({current:this.currentPage,size:this.options.size}),this.options.pages){const e=Math.floor(this.state.value.length/this.size);let n=[];for(var t=0;t<e;t++)n.push({isRender:this.currentPage===t,index:t});this.options.pages.set(n)}}async render(){u(this.options.controller,this.onControl.bind(this)),this.options.controller,this.state.reactor.addBinding(this.onStateChange.bind(this)),this.renderPage()}async onStateChange(t){if(!document.contains(this.anchorElement))return d(this.options.controller,this.onControl.bind(this)),void this.state.reactor.removeBinding(this.onStateChange.bind(this));const e=this.currentPage*this.size,n=e+this.size;switch(t.type){case"SET":this.currentPage=0,this.renderPage();break;case"SET_BY_KEY":case"REMOVE_BY_KEY":case"INSERT_BY_KEY":(s=t.key)>=e&&s<n&&this.renderPage();break;case"APPEND":const r=this.state.value.length,i=Math.floor((r-1)/this.size);this.currentPage===i&&this.renderPage();break;default:this.renderPage()}var s}}function v(t){return t!==Object(t)}async function E(t,e,n,r){if(e.parentNode)if(v(n))!function(t,e){t.textContent=String(e)}(e,n);else if(n instanceof c&&n.value instanceof Node)!function(t,e,n){let r=t;const i=()=>{if(!document.contains(r))return void e.reactor.removeBinding(i);const t=e.value;t instanceof s&&t.setContext(n),r.parentNode?.replaceChild(t,r),r=t};i(),e.reactor.addBinding(i)}(e,n,r);else if(n instanceof c)!function(t,e){const n=()=>{document.contains(t)?t.textContent=String(e.value):e.reactor.removeBinding(n)};n(),e.reactor.addBinding(n)}(e,n);else if(Array.isArray(n))!function(t,e,n){const s=document.createDocumentFragment();for(const t of e)t instanceof i?n.renderHelper?.(n,t,s):v(t)?s.appendChild(document.createTextNode(String(t))):t instanceof Node&&s.appendChild(t.cloneNode(!0));t.replaceWith(s)}(e,n,r);else if(n instanceof m)n.prepare(e.parentElement,r),n.render(),e.remove();else if(n instanceof HTMLElement)e.replaceWith(n);else if(n instanceof i)!function(t,e,n){const s=document.createDocumentFragment();n.renderHelper?.(n,e,s),t.replaceWith(s)}(e,n,r);else if(n instanceof NodeList||n instanceof HTMLCollection)n.length>0?function(t,e){const n=document.createDocumentFragment();for(const t of Array.from(e))n.appendChild(t.cloneNode(!0));t.replaceWith(n)}(e,n):e.remove();else if(n&&"function"==typeof n.toString)try{e.textContent=n.toString()}catch{e.textContent=""}else e.textContent=""}function y(t){return new i(t)}window.RUMIOUS_JSX={template:y,createElement:function(...t){throw console.log(t),Error("Rumious doesn't use createElement !")},addDirective:function(t,e,n,s="",r){let i=g[n];if(!i)throw Error("Rumious: Cannot solve directive !");i(e,t,s,r)},dynamicValue:function(t,e,n,s){E(0,e,n,s)},createComponent:function(t){let e=t.tagName;return window.customElements.get(e)||window.customElements.define(e,class extends s{static tag=e}),document.createElement(e)}};class C extends c{constructor(t,e){super(t,e)}set(t,e){if("number"==typeof t&&void 0!==e){const n=t,s=e;this.value[n]=s,this.reactor.emit({type:"SET_BY_KEY",value:s,target:this,key:n})}else{if(!Array.isArray(t))throw new Error("Invalid arguments passed to set()");super.set(t)}}get(t){return"number"==typeof t?this.value[t]:this.value}insert(t,e){return this.value.splice(t,0,e),this.reactor.emit({type:"INSERT_BY_KEY",value:e,target:this,key:t}),this}remove(t){return this.value.splice(t,1),this.reactor.emit({type:"REMOVE_BY_KEY",value:null,target:this,key:t}),this}append(...t){return this.value.push(...t),this.reactor.emit({type:"APPEND",value:t,target:this}),this}prepend(t){return this.value.unshift(t),this.reactor.emit({type:"PREPEND",value:t,target:this}),this}clear(){return this.value.length=0,this.reactor.emit({type:"SET",value:null,target:this}),this}replace(t,e){if(t<0||t>=this.value.length)throw new Error("Index out of bounds");return this.value[t]=e,this.reactor.emit({type:"SET_BY_KEY",value:e,target:this,key:t}),this}filter(t){return this.value=this.value.filter(t),this.reactor.emit({type:"SET",value:null,target:this}),this}map(t){return this.value=this.value.map(t),this.reactor.emit({type:"SET",value:null,target:this}),this}sort(t){return this.value.sort(t),this.reactor.emit({type:"SET",value:null,target:this}),this}reverse(){return this.value.reverse(),this.reactor.emit({type:"SET",value:null,target:this}),this}get length(){return this.value.length}forEach(t){this.value.forEach(t)}}class S extends c{#t=!1;constructor(t,e){super(t,e)}set(t,e){if(this.#t)throw new Error("Object is locked");if("string"==typeof t){const n=t,s=e;return this.value[n]=s,this.reactor.emit({type:"SET_BY_KEY",value:s,target:this,key:n}),this}if("object"!=typeof t)throw new Error("Invalid arguments passed to set()");super.set(t)}remove(t){if(this.#t)throw new Error("Object is locked");return t in this.value&&(delete this.value[t],this.reactor.emit({type:"REMOVE_BY_KEY",value:{...this.value},target:this,key:t})),this}merge(t){if(this.#t)throw new Error("Object is locked");return Object.assign(this.value,t),this.reactor.emit({type:"SET",value:{...this.value},target:this}),this}assign(t){if(this.#t)throw new Error("Object is locked");return this.value={...this.value,...t},this.reactor.emit({type:"SET",value:{...this.value},target:this}),this}clear(){if(this.#t)throw new Error("Object is locked");for(const t in this.value)delete this.value[t];return this.reactor.emit({type:"SET",value:{},target:this}),this}get(t){return"string"==typeof t?this.value[t]:this.value}keys(){return Object.keys(this.value)}values(){return Object.values(this.value)}entries(){return Object.entries(this.value)}has(t){return t in this.value}get size(){return Object.keys(this.value).length}forEach(t){Object.entries(this.value).forEach((([e,n])=>{t(n,e,this.value)}))}map(t){const e={};return Object.entries(this.value).forEach((([n,s])=>{e[n]=t(s,n,this.value)})),e}clone(){return JSON.parse(JSON.stringify(this.value))}toJSON(){return JSON.parse(JSON.stringify(this.value))}toObject(){return this.get()}lock(){return this.#t=!0,this}unlock(){return this.#t=!1,this}get isLocked(){return this.#t}freeze(){return Object.freeze(this.value),this}unfreeze(){return this.value=JSON.parse(JSON.stringify(this.value)),this}get isFrozen(){return Object.isFrozen(this.value)}}window.RUMIOUS_CONTEXTS={};class w{constructor(t={}){this.events={},this.values=t}has(t){return t in this.values}set(t,e){this.values[t]=e}get(t){return this.values[t]}on(t,e){this.events[t]||(this.events[t]=[]),this.events[t].push(e)}off(t,e){this.events[t]&&(this.events[t]=this.events[t].filter((t=>t!==e)))}emit(t,e){this.events[t]&&this.events[t].forEach((t=>t(e)))}}exports.Fragment=function(...t){throw Error("Fragment element must be compiled by Rumious !")},exports.RumiousApp=r,exports.RumiousArrayState=C,exports.RumiousChildrenRef=class{constructor(t){this.target=t}list(){return Array.from(this.target.children)}getChild(t){return this.list()[t]}remove(t){this.list()[t]?.remove()}add(t){this.target.appendChild(t)}querySelector(t){return this.target.querySelector(t)}querySelectorAll(t){return this.target.querySelectorAll(t)}clear(){this.target.innerHTML=""}replaceChild(t,e){const n=this.getChild(t);n&&this.target.replaceChild(e,n)}insertBefore(t,e){const n=this.getChild(e);n?this.target.insertBefore(t,n):this.add(t)}prepend(t){this.target.prepend(t)}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(t){return this.list().find(t)}forEach(t){this.list().forEach(t)}removeAllMatching(t){this.querySelectorAll(t).forEach((t=>t.remove()))}toggleClass(t){this.list().forEach((e=>e.classList.toggle(t)))}setAttribute(t,e){this.list().forEach((n=>n.setAttribute(t,e)))}},exports.RumiousComponent=class{static classNames="";static tagName="rumious-component";constructor(){this.renderOptions={mode:"idle"}}render(t){let e=document.createDocumentFragment();return n(this.context,t,e),e}onCreate(){}onRender(){}onDestroy(){}async onBeforeRender(){}prepare(t,n){this.props=n,this.context=new e(this,t.app)}async requestRender(){await this.onBeforeRender();let t=this.template();n(this.context,t,this.element),this.onRender()}requestCleanup(){}},exports.RumiousComponentElement=s,exports.RumiousContext=w,exports.RumiousDymanicInjector=o,exports.RumiousElementRef=a,exports.RumiousModule=class{},exports.RumiousObjectState=S,exports.RumiousRenderTemplate=i,exports.RumiousState=c,exports.createApp=function(t,e){return new r(t,e)},exports.createArrayState=function(t){return new C(t)},exports.createContext=function(t,e=function(t="_"){return`${t}${(Math.floor(9999*Math.random())*Date.now()).toString(32)}`}("rctx_")){if(window.RUMIOUS_CONTEXTS[e])return window.RUMIOUS_CONTEXTS[e];{let n=new w(t);return window.RUMIOUS_CONTEXTS[e]=n,n}},exports.createElementRef=function(){return new a(document.createElement("span"))},exports.createHTMLInjector=function(t){return new o([t])},exports.createInfinityScroll=function(t){return new p(t)},exports.createObjectState=function(t){return new S(t)},exports.createPagination=function(t){return new f(t)},exports.createState=function(t){return new c(t)},exports.denounce=function(t,e){let n;return function(...s){clearTimeout(n),n=setTimeout((()=>t.apply(this,s)),e)}},exports.leadingTrailingDebounce=function(t,e){let n,s=!0;return function(...r){s&&(t.apply(this,r),s=!1),clearTimeout(n),n=setTimeout((()=>{t.apply(this,r),s=!0}),e)}},exports.rafThrottle=function(t){let e=!1;return function(...n){e||(e=!0,requestAnimationFrame((()=>{t.apply(this,n),e=!1})))}},exports.renderComponent=function(t,e){let n=window.RUMIOUS_JSX.createComponent(t);return n.props=e,n.setComponent(t),n},exports.renderList=function(t,e){return new m(t,e)},exports.template=y,exports.tholle=function(t,e){let n=0;return function(...s){const r=Date.now();r-n>=e&&(n=r,t.apply(this,s))}},exports.trailingThrottle=function(t,e){let n=0,s=null,r=null;function i(){n=Date.now(),t.apply(this,s),s=null}return function(...t){const o=Date.now();s=t,o-n>=e?i.call(this):r||(r=setTimeout((()=>{r=null,i.call(this)}),e-(o-n)))}},exports.unwatch=d,exports.watch=u;

package/dist/index.esm.js

@@ -1 +0,0 @@
-import{create as t}from"mutative";class e{constructor(t,e){this.target=t,this.app=e,this.onRenderFinished=[]}findName(t){return this.target[t]}}function n(t,e,s){let i=e.generator.bind(t.target);t.renderHelper=n,i(s,t),setTimeout((async()=>{const e=[...t.onRenderFinished];t.onRenderFinished=[];for(const t of e)await t()}),0)}class s{static classNames="";static tagName="rumious-component";constructor(){this.renderOptions={mode:"idle"}}render(t){let e=document.createDocumentFragment();return n(this.context,t,e),e}onCreate(){}onRender(){}onDestroy(){}async onBeforeRender(){}prepare(t,n){this.props=n,this.context=new e(this,t.app)}async requestRender(){await this.onBeforeRender();let t=this.template();n(this.context,t,this.element),this.onRender()}requestCleanup(){}}class i extends HTMLElement{constructor(){super(),this.props={}}setContext(t){this.context=t}setComponent(t){this.componentConstructor=t}setup(t,e){this.context=t,this.componentConstructor=e}connectedCallback(){this.componentConstructor?(this.componentInstance=new this.componentConstructor,this.componentInstance.element=this,this.componentConstructor.classNames&&(this.className=this.componentConstructor.classNames),this.componentInstance.prepare(this.context,this.props),this.componentInstance.onCreate(),this.componentInstance.requestRender()):console.warn("Rumious: Cannot find matching component constructor.")}disconnectedCallback(){this.componentInstance?.onDestroy()}}function r(t,e){let n=window.RUMIOUS_JSX.createComponent(t);return n.props=e,n.setComponent(t),n}class o{constructor(t,n={}){this.root=t,this.options=n,this.modules=[],this.context=new e(this,this)}addModule(t,e){const n=t.init(this,e);return this.modules.push(n),n}render(t){n(this.context,t,this.root)}}function a(t,e){return new o(t,e)}class h{}class l{constructor(t){this.generator=t}}class c{constructor(t){if(this.contents=t,this.targets=new Map,!t||0===t.length)throw new Error("Injector must be initialized with non-empty content");const e=t[0];this.type="string"==typeof e?"string":"element"}commit(t){this.contents=t;const e=t[0];this.type="string"==typeof e?"string":"element"}addTarget(t){this.targets.set(t,1)}inject(t){if(this.targets.has(t)&&this.contents)if(t.innerHTML="","string"===this.type)for(const e of this.contents)t.insertAdjacentHTML("beforeend",e);else for(const e of this.contents)t.appendChild(e)}injectAll(){for(const t of this.targets.keys())this.inject(t)}removeTarget(t){this.targets.delete(t)}clear(){this.targets.clear()}}function u(t){return new c([t])}class d{constructor(t){this.target=t}getElement(){return this.target}remove(){this.target.remove()}addChild(t){this.target.appendChild(t)}listChild(){return this.target.childNodes}querySelector(t){return this.target.querySelector(t)}querySelectorAll(t){return this.target.querySelectorAll(t)}set text(t){this.target.textContent=t}get text(){return this.target.textContent}set value(t){(this.target instanceof HTMLInputElement||this.target instanceof HTMLTextAreaElement)&&(this.target.value=t)}get value(){if(this.target instanceof HTMLInputElement||this.target instanceof HTMLTextAreaElement)return this.target.value}addClassName(t){this.target.classList.add(t)}removeClassName(t){this.target.classList.remove(t)}hasClassName(t){return this.target.classList.contains(t)}toggleClass(t,e){return this.target.classList.toggle(t,e)}setStyle(t){Object.assign(this.target.style,t)}getStyle(t){return getComputedStyle(this.target).getPropertyValue(t)}setAttribute(t,e){this.target.setAttribute(t,e)}getAttribute(t){return this.target.getAttribute(t)}removeAttribute(t){this.target.removeAttribute(t)}on(t,e,n){this.target.addEventListener(t,e,n)}off(t,e,n){this.target.removeEventListener(t,e,n)}set html(t){this.target.innerHTML=t}get html(){return this.target.innerHTML}getBoundingRect(){return this.target.getBoundingClientRect()}isInViewport(){const t=this.target.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}prependChild(t){this.target.prepend(t)}setDisabled(t){(this.target instanceof HTMLButtonElement||this.target instanceof HTMLInputElement||this.target instanceof HTMLTextAreaElement)&&(this.target.disabled=t)}addClasses(...t){this.target.classList.add(...t)}removeClasses(...t){this.target.classList.remove(...t)}replaceClass(t,e){this.target.classList.replace(t,e)}moveTo(t){t.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"none"===window.getComputedStyle(this.target).display}scrollIntoView(t={behavior:"smooth"}){this.target.scrollIntoView(t)}matches(t){return this.target.matches(t)}getChildren(){return Array.from(this.target.children)}insertAfter(t){this.target.parentNode&&this.target.parentNode.insertBefore(t,this.target.nextSibling)}insertBefore(t){this.target.parentNode&&this.target.parentNode.insertBefore(t,this.target)}clearChildren(){for(;this.target.firstChild;)this.target.removeChild(this.target.firstChild)}animate(t,e){return this.target.animate(t,e)}}function g(){return new d(document.createElement("span"))}function m(t){const e=t.indexOf("$");return-1!==e?t.slice(e+1):""}class p{constructor(t){this.target=t,this.bindings=[]}addBinding(t){this.bindings.push(t)}removeBinding(t){this.bindings=this.bindings.filter((e=>e!==t))}async emit(t){await Promise.allSettled(this.bindings.map((e=>{try{const n=e(t);return n instanceof Promise?n:Promise.resolve(n)}catch(t){return Promise.reject(t)}})))}}class f{constructor(t,e){this.value=t,this.reactor=e??new p(this)}set(t){this.value=t,this.reactor.emit({type:"SET",target:this,value:t})}get(){return this.value}increase(t=1){"number"==typeof this.value&&this.set(this.value+t)}produce(e){const[n,s]=t(this.value);e(n),this.set(s())}}function v(t,e){t.reactor.addBinding(e)}function E(t,e){t.reactor.removeBinding(e)}function y(t){return new f(t)}const C={on:function(t,e,n,s){"string"==typeof s&&(s=t.findName(m(s))),e.addEventListener(n,s)},ref:function(t,e,n,s){if("string"==typeof s&&(s=t.findName(m(s))),!(s instanceof d))throw Error("Rumious: ref directive required RumiousElementRef !");s.target=e},inject:function(t,e,n,s){if("string"==typeof s&&(s=t.findName(m(s))),!(s instanceof c))throw Error("Rumious: inject directive required RumiousInjector !");s.addTarget(e),s.inject(e)},bind:function(t,e,n,s){if("string"==typeof s&&(s=t.findName(m(s))),!(s instanceof f))throw Error("Rumious: bind directive requires RumiousState!");{const t={text:(t,e)=>e.textContent=t,html:(t,e)=>e.innerHTML=t,value:(t,e)=>e.value=t,class:(t,e)=>e.className=t,style:(t,e)=>e.style.cssText=t,checked:(t,e)=>e.checked=t,disabled:(t,e)=>{"disabled"in e&&(e.disabled=t)},readonly:(t,e)=>e.readOnly=t,required:(t,e)=>e.required=t,selected:(t,e)=>e.selected=t,src:(t,e)=>e.src=t,href:(t,e)=>e.href=t,placeholder:(t,e)=>e.placeholder=t,title:(t,e)=>e.title=t,show:(t,e)=>e.style.display=t?"":"none",hide:(t,e)=>e.style.display=t?"none":""}[n]??((t,e)=>e.setAttribute(n,t));t(s.value,e),s.reactor.addBinding((()=>t(s.value,e)))}},model:function(t,e,n,s){if("string"==typeof s&&(s=t.findName(m(s))),!(s instanceof f&&(e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement)))throw Error("Rumious: model directive requires RumiousState and a valid form element!");{const t=e.type;e.addEventListener("input",(()=>{if(e instanceof HTMLInputElement)switch(t){case"checkbox":s.set(e.checked);break;case"radio":e.checked&&s.set(e.value);break;default:s.set(e.value)}else(e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement)&&s.set(e.value)}))}}};class w{constructor(t,e){this.state=t,this.callback=e}prepare(t,e){this.anchorElement=t,this.context=e}renderItem(t,e){const n=document.createDocumentFragment(),s=this.callback(t,e);return this.context.renderHelper(this.context,s,n),n}scheduleRenderAll(){requestAnimationFrame((()=>this.renderAll()))}async render(){this.state.reactor.addBinding(this.onStateChange.bind(this)),this.scheduleRenderAll()}renderAll(){const t=document.createDocumentFragment();this.state.value.forEach(((e,n)=>{t.appendChild(this.renderItem(e,n))})),this.anchorElement.replaceChildren(t)}updateElement(t,e){const n=this.anchorElement.children[t];n&&this.anchorElement.replaceChild(this.renderItem(e,t),n)}insertOrAppendElement(t,e){const n=this.renderItem(t,e),s=this.anchorElement.children[e];s?this.anchorElement.insertBefore(n,s):this.anchorElement.appendChild(n)}removeElement(t){this.anchorElement.children[t]?.remove()}appendElement(t,e){if(Array.isArray(t)){const n=document.createDocumentFragment();t.forEach(((t,s)=>{n.appendChild(this.renderItem(t,e+s))})),this.anchorElement.replaceChildren(n),this.anchorElement.appendChild(n)}}async onStateChange(t){if(document.contains(this.anchorElement))switch(t.type){case"SET":default:this.scheduleRenderAll();break;case"SET_BY_KEY":this.updateElement(t.key,t.value);break;case"REMOVE_BY_KEY":this.removeElement(t.key);break;case"INSERT_BY_KEY":this.insertOrAppendElement(t.value,t.key);break;case"APPEND":this.appendElement(t.value,this.state.value.length-t.value.length);break;case"PREPEND":this.anchorElement.prepend(this.renderItem(t.value,0))}else this.state.reactor.removeBinding(this.onStateChange.bind(this))}}function S(t,e){return new w(t,e)}class b extends w{isLoading=!1;constructor(t){super(t.data,t.template),this.options=t,this.limit=t.limit??50,this.offset=t.offset??0,this.onScroll=this.handleScroll.bind(this),this.onControl=this.handleControl.bind(this),this.onChange=this.handleStateChange.bind(this)}setState(t){this.options.state?.set(t)}async fetchData(){const t=await(this.options.loader?.(this.limit,this.offset))??[];return this.offset+=t.length,t}getScrollInfo(){const t=this.options.scrollElement;return t===window?{scrollTop:window.scrollY,scrollHeight:document.documentElement.scrollHeight,clientHeight:window.innerHeight}:{scrollTop:t.scrollTop,scrollHeight:t.scrollHeight,clientHeight:t.clientHeight}}async addData(){const t=this.options.scrollElement;this.isLoading=!0,this.setState("START_FETCH");const e=await this.fetchData();this.setState("END_FETCH"),0===e.length?(this.setState("NO_DATA"),t.removeEventListener("scroll",this.onScroll)):this.state.append(...e),this.isLoading=!1}async handleScroll(){const{scrollTop:t,scrollHeight:e,clientHeight:n}=this.getScrollInfo();t+n>=e-this.options.threshold&&!this.isLoading&&await this.addData()}handleControl(){"FETCH"===this.options?.controller?.get()&&this.addData()}handleStateChange(t){if(!document.contains(this.anchorElement))return this.options.controller&&E(this.options.controller,this.onControl),void this.state.reactor.removeBinding(this.onChange);this.onStateChange(t)}async render(){this.options.scrollElement.addEventListener("scroll",this.onScroll),this.options.controller&&v(this.options.controller,this.onControl),this.state.reactor.addBinding(this.onChange),this.scheduleRenderAll()}}function T(t){return new b(t)}class N extends w{constructor(t){super(t.data,t.template),this.options=t,this.size=t.size,this.currentPage=t.page??0}getPageData(){const t=this.currentPage*this.size,e=t+this.size;return this.state.value.slice(t,e)}renderPage(){const t=document.createDocumentFragment(),e=this.currentPage*this.size,n=e+this.size;this.state.value.slice(e,n).forEach(((n,s)=>{t.appendChild(this.renderItem(n,e+s))})),this.anchorElement.replaceChildren(t),this.calculate()}goToPage(t){const e=Math.floor(this.state.value.length/this.size);console.log(e),this.currentPage=Math.max(0,Math.min(t,e)),this.renderPage()}nextPage(){this.goToPage(this.currentPage+1)}prevPage(){this.goToPage(this.currentPage-1)}onControl({value:t}){switch(t){case"NEXT":this.nextPage();break;case"PREV":this.prevPage()}}async calculate(){if(this.options.info&&this.options.info.set({current:this.currentPage,size:this.options.size}),this.options.pages){const e=Math.floor(this.state.value.length/this.size);let n=[];for(var t=0;t<e;t++)n.push({isRender:this.currentPage===t,index:t});this.options.pages.set(n)}}async render(){v(this.options.controller,this.onControl.bind(this)),this.options.controller,this.state.reactor.addBinding(this.onStateChange.bind(this)),this.renderPage()}async onStateChange(t){if(!document.contains(this.anchorElement))return E(this.options.controller,this.onControl.bind(this)),void this.state.reactor.removeBinding(this.onStateChange.bind(this));const e=this.currentPage*this.size,n=e+this.size;switch(t.type){case"SET":this.currentPage=0,this.renderPage();break;case"SET_BY_KEY":case"REMOVE_BY_KEY":case"INSERT_BY_KEY":(s=t.key)>=e&&s<n&&this.renderPage();break;case"APPEND":const i=this.state.value.length,r=Math.floor((i-1)/this.size);this.currentPage===r&&this.renderPage();break;default:this.renderPage()}var s}}function k(t){return new N(t)}function x(t){return t!==Object(t)}async function A(t,e,n,s){if(e.parentNode)if(x(n))!function(t,e){t.textContent=String(e)}(e,n);else if(n instanceof f&&n.value instanceof Node)!function(t,e,n){let s=t;const r=()=>{if(!document.contains(s))return void e.reactor.removeBinding(r);const t=e.value;t instanceof i&&t.setContext(n),s.parentNode?.replaceChild(t,s),s=t};r(),e.reactor.addBinding(r)}(e,n,s);else if(n instanceof f)!function(t,e){const n=()=>{document.contains(t)?t.textContent=String(e.value):e.reactor.removeBinding(n)};n(),e.reactor.addBinding(n)}(e,n);else if(Array.isArray(n))!function(t,e,n){const s=document.createDocumentFragment();for(const t of e)t instanceof l?n.renderHelper?.(n,t,s):x(t)?s.appendChild(document.createTextNode(String(t))):t instanceof Node&&s.appendChild(t.cloneNode(!0));t.replaceWith(s)}(e,n,s);else if(n instanceof w)n.prepare(e.parentElement,s),n.render(),e.remove();else if(n instanceof HTMLElement)e.replaceWith(n);else if(n instanceof l)!function(t,e,n){const s=document.createDocumentFragment();n.renderHelper?.(n,e,s),t.replaceWith(s)}(e,n,s);else if(n instanceof NodeList||n instanceof HTMLCollection)n.length>0?function(t,e){const n=document.createDocumentFragment();for(const t of Array.from(e))n.appendChild(t.cloneNode(!0));t.replaceWith(n)}(e,n):e.remove();else if(n&&"function"==typeof n.toString)try{e.textContent=n.toString()}catch{e.textContent=""}else e.textContent=""}function R(t){return new l(t)}const P=function(...t){throw Error("Fragment element must be compiled by Rumious !")};window.RUMIOUS_JSX={template:R,createElement:function(...t){throw console.log(t),Error("Rumious doesn't use createElement !")},addDirective:function(t,e,n,s="",i){let r=C[n];if(!r)throw Error("Rumious: Cannot solve directive !");r(e,t,s,i)},dynamicValue:function(t,e,n,s){A(0,e,n,s)},createComponent:function(t){let e=t.tagName;return window.customElements.get(e)||window.customElements.define(e,class extends i{static tag=e}),document.createElement(e)}};class O{constructor(t){this.target=t}list(){return Array.from(this.target.children)}getChild(t){return this.list()[t]}remove(t){this.list()[t]?.remove()}add(t){this.target.appendChild(t)}querySelector(t){return this.target.querySelector(t)}querySelectorAll(t){return this.target.querySelectorAll(t)}clear(){this.target.innerHTML=""}replaceChild(t,e){const n=this.getChild(t);n&&this.target.replaceChild(e,n)}insertBefore(t,e){const n=this.getChild(e);n?this.target.insertBefore(t,n):this.add(t)}prepend(t){this.target.prepend(t)}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(t){return this.list().find(t)}forEach(t){this.list().forEach(t)}removeAllMatching(t){this.querySelectorAll(t).forEach((t=>t.remove()))}toggleClass(t){this.list().forEach((e=>e.classList.toggle(t)))}setAttribute(t,e){this.list().forEach((n=>n.setAttribute(t,e)))}}class L extends f{constructor(t,e){super(t,e)}set(t,e){if("number"==typeof t&&void 0!==e){const n=t,s=e;this.value[n]=s,this.reactor.emit({type:"SET_BY_KEY",value:s,target:this,key:n})}else{if(!Array.isArray(t))throw new Error("Invalid arguments passed to set()");super.set(t)}}get(t){return"number"==typeof t?this.value[t]:this.value}insert(t,e){return this.value.splice(t,0,e),this.reactor.emit({type:"INSERT_BY_KEY",value:e,target:this,key:t}),this}remove(t){return this.value.splice(t,1),this.reactor.emit({type:"REMOVE_BY_KEY",value:null,target:this,key:t}),this}append(...t){return this.value.push(...t),this.reactor.emit({type:"APPEND",value:t,target:this}),this}prepend(t){return this.value.unshift(t),this.reactor.emit({type:"PREPEND",value:t,target:this}),this}clear(){return this.value.length=0,this.reactor.emit({type:"SET",value:null,target:this}),this}replace(t,e){if(t<0||t>=this.value.length)throw new Error("Index out of bounds");return this.value[t]=e,this.reactor.emit({type:"SET_BY_KEY",value:e,target:this,key:t}),this}filter(t){return this.value=this.value.filter(t),this.reactor.emit({type:"SET",value:null,target:this}),this}map(t){return this.value=this.value.map(t),this.reactor.emit({type:"SET",value:null,target:this}),this}sort(t){return this.value.sort(t),this.reactor.emit({type:"SET",value:null,target:this}),this}reverse(){return this.value.reverse(),this.reactor.emit({type:"SET",value:null,target:this}),this}get length(){return this.value.length}forEach(t){this.value.forEach(t)}}function H(t){return new L(t)}class M extends f{#t=!1;constructor(t,e){super(t,e)}set(t,e){if(this.#t)throw new Error("Object is locked");if("string"==typeof t){const n=t,s=e;return this.value[n]=s,this.reactor.emit({type:"SET_BY_KEY",value:s,target:this,key:n}),this}if("object"!=typeof t)throw new Error("Invalid arguments passed to set()");super.set(t)}remove(t){if(this.#t)throw new Error("Object is locked");return t in this.value&&(delete this.value[t],this.reactor.emit({type:"REMOVE_BY_KEY",value:{...this.value},target:this,key:t})),this}merge(t){if(this.#t)throw new Error("Object is locked");return Object.assign(this.value,t),this.reactor.emit({type:"SET",value:{...this.value},target:this}),this}assign(t){if(this.#t)throw new Error("Object is locked");return this.value={...this.value,...t},this.reactor.emit({type:"SET",value:{...this.value},target:this}),this}clear(){if(this.#t)throw new Error("Object is locked");for(const t in this.value)delete this.value[t];return this.reactor.emit({type:"SET",value:{},target:this}),this}get(t){return"string"==typeof t?this.value[t]:this.value}keys(){return Object.keys(this.value)}values(){return Object.values(this.value)}entries(){return Object.entries(this.value)}has(t){return t in this.value}get size(){return Object.keys(this.value).length}forEach(t){Object.entries(this.value).forEach((([e,n])=>{t(n,e,this.value)}))}map(t){const e={};return Object.entries(this.value).forEach((([n,s])=>{e[n]=t(s,n,this.value)})),e}clone(){return JSON.parse(JSON.stringify(this.value))}toJSON(){return JSON.parse(JSON.stringify(this.value))}toObject(){return this.get()}lock(){return this.#t=!0,this}unlock(){return this.#t=!1,this}get isLocked(){return this.#t}freeze(){return Object.freeze(this.value),this}unfreeze(){return this.value=JSON.parse(JSON.stringify(this.value)),this}get isFrozen(){return Object.isFrozen(this.value)}}function B(t){return new M(t)}window.RUMIOUS_CONTEXTS={};class I{constructor(t={}){this.events={},this.values=t}has(t){return t in this.values}set(t,e){this.values[t]=e}get(t){return this.values[t]}on(t,e){this.events[t]||(this.events[t]=[]),this.events[t].push(e)}off(t,e){this.events[t]&&(this.events[t]=this.events[t].filter((t=>t!==e)))}emit(t,e){this.events[t]&&this.events[t].forEach((t=>t(e)))}}function _(t,e=function(t="_"){return`${t}${(Math.floor(9999*Math.random())*Date.now()).toString(32)}`}("rctx_")){if(window.RUMIOUS_CONTEXTS[e])return window.RUMIOUS_CONTEXTS[e];{let n=new I(t);return window.RUMIOUS_CONTEXTS[e]=n,n}}function D(t,e){let n=0;return function(...s){const i=Date.now();i-n>=e&&(n=i,t.apply(this,s))}}function j(t,e){let n;return function(...s){clearTimeout(n),n=setTimeout((()=>t.apply(this,s)),e)}}function Y(t,e){let n=0,s=null,i=null;function r(){n=Date.now(),t.apply(this,s),s=null}return function(...t){const o=Date.now();s=t,o-n>=e?r.call(this):i||(i=setTimeout((()=>{i=null,r.call(this)}),e-(o-n)))}}function q(t,e){let n,s=!0;return function(...i){s&&(t.apply(this,i),s=!1),clearTimeout(n),n=setTimeout((()=>{t.apply(this,i),s=!0}),e)}}function z(t){let e=!1;return function(...n){e||(e=!0,requestAnimationFrame((()=>{t.apply(this,n),e=!1})))}}export{P as Fragment,o as RumiousApp,L as RumiousArrayState,O as RumiousChildrenRef,s as RumiousComponent,i as RumiousComponentElement,I as RumiousContext,c as RumiousDymanicInjector,d as RumiousElementRef,h as RumiousModule,M as RumiousObjectState,l as RumiousRenderTemplate,f as RumiousState,a as createApp,H as createArrayState,_ as createContext,g as createElementRef,u as createHTMLInjector,T as createInfinityScroll,B as createObjectState,k as createPagination,y as createState,j as denounce,q as leadingTrailingDebounce,z as rafThrottle,r as renderComponent,S as renderList,R as template,D as tholle,Y as trailingThrottle,E as unwatch,v as watch};

package/dist/index.global.d.ts

@@ -1,46 +0,0 @@
-import * as Component from './component/index.js';
-import * as App from './app/index.js';
-import * as Render from './render/index.js';
-import * as Ref from './ref/index.js';
-import * as State from './state/index.js';
-import * as Context from './context/index.js';
-declare global {
-    interface Window {
-        Rumious: Record<string, any>;
-    }
-}
-declare const Rumious: {
-    tholle<T extends (...args: any[]) => any>(func: T, limit: number): T;
-    denounce<T extends (...args: any[]) => any>(func: T, delay: number): T;
-    trailingThrottle<T extends (...args: any[]) => any>(func: T, limit: number): T;
-    leadingTrailingDebounce<T extends (...args: any[]) => any>(func: T, delay: number): T;
-    rafThrottle<T extends (...args: any[]) => any>(func: T): T;
-    createContext<T extends object>(values: T, name?: string): Context.RumiousContext<T>;
-    RumiousContext: typeof Context.RumiousContext;
-    watch<T>(state: State.RumiousState<T>, fn: import("./state/reactor.js").RumiousBinding<T>): void;
-    unwatch<T>(state: State.RumiousState<T>, fn: import("./state/reactor.js").RumiousBinding<T>): void;
-    createState<T>(value: T): State.RumiousState<T>;
-    RumiousState: typeof State.RumiousState;
-    createArrayState<T>(value: T[]): State.RumiousArrayState<T>;
-    RumiousArrayState: typeof State.RumiousArrayState;
-    createObjectState<T extends Record<string, any>>(value: T): State.RumiousObjectState<T>;
-    RumiousObjectState: typeof State.RumiousObjectState;
-    createElementRef(): Ref.RumiousElementRef;
-    RumiousElementRef: typeof Ref.RumiousElementRef;
-    RumiousChildrenRef: typeof Ref.RumiousChildrenRef;
-    renderList: typeof Render.renderList;
-    createInfinityScroll: typeof Render.createInfinityScroll;
-    createPagination: typeof Render.createPagination;
-    RumiousRenderTemplate: typeof Render.RumiousRenderTemplate;
-    createHTMLInjector(html: string): Render.RumiousDymanicInjector<string>;
-    RumiousDymanicInjector: typeof Render.RumiousDymanicInjector;
-    template(generator: import("./types/render.js").RumiousTemplateGenerator): Render.RumiousRenderTemplate;
-    Fragment: (...args: any[]) => any;
-    createApp(root: HTMLElement, options?: App.RumiousAppOptions): App.RumiousApp;
-    RumiousApp: typeof App.RumiousApp;
-    RumiousModule: typeof App.RumiousModule;
-    RumiousComponent: typeof Component.RumiousComponent;
-    renderComponent(component: Component.RumiousComponentConstructor, props: any): HTMLElement;
-    RumiousComponentElement: typeof Component.RumiousComponentElement;
-};
-export default Rumious;