rumious 2.0.0 → 2.0.2

package/src/jsx/template.ts

@@ -1,377 +0,0 @@
-import { RumiousRenderContext, renderFrag, RumiousViewControl } from '../render/index.js';
-import { RumiousTemplate } from '../types/index.js';
-import { RumiousRef } from '../ref/index.js';
-import { RumiousState, RumiousListState } from '../state/index.js';
-import { createEvent } from './element.js';
-
-export function createTemplate(
-  fn: (root: HTMLElement | DocumentFragment, context: RumiousRenderContext) => HTMLElement
-): RumiousTemplate {
-  return Object.assign(fn, {
-    __isTemplate: true as
-    const
-  });
-}
-
-
-export function html(
-  h: string
-): Node {
-  let template = document.createElement('template');
-  template.innerHTML = h;
-  return template.content.cloneNode(true)
-}
-
-
-
-export const directives = {
-  ref(context: RumiousRenderContext, modifier: string, target: HTMLElement, value: RumiousRef) {
-    if (value instanceof RumiousRef) {
-      value.setTarget(target);
-    } else {
-      throw new Error("Cannot setup element reference for non-RumiousRef object !");
-    }
-  },
-  
-  model(
-    context: RumiousRenderContext,
-    modifier: string,
-    element: HTMLElement,
-    state: RumiousState < any >
-  ) {
-    const tag = element.tagName,
-      type = (element as HTMLInputElement).type;
-    
-    if (tag === "TEXTAREA") {
-      element.addEventListener("input", () => state.set((element as HTMLTextAreaElement).value));
-    } else if (tag === "SELECT") {
-      element.addEventListener("change", () => {
-        const s = element as HTMLSelectElement;
-        state.set(s.multiple ? Array.from(s.selectedOptions).map(o => o.value) : s.value);
-      });
-    } else if (tag === "INPUT") {
-      if (type === "checkbox") {
-        element.addEventListener("change", () => state.set((element as HTMLInputElement).checked));
-      } else if (type === "radio") {
-        element.addEventListener("change", () => {
-          const i = element as HTMLInputElement;
-          if (i.checked) state.set(i.value);
-        });
-      } else if (type === "file") {
-        element.addEventListener("change", () => {
-          const f = (element as HTMLInputElement).files;
-          state.set(element.hasAttribute("multiple") ? f : f?.[0] ?? null);
-        });
-      } else {
-        element.addEventListener("input", () => {
-          const val = (element as HTMLInputElement).value;
-          state.set(type === "number" ? (val === "" ? null : +val) : val);
-        });
-      }
-    }
-  },
-  
-  on(
-    context: RumiousRenderContext,
-    event: string,
-    element: HTMLElement,
-    callback: (e: Event) => void
-  ) {
-    createEvent(
-      element,
-      event,
-      callback
-    );
-  },
-  
-  bind(
-    context: RumiousRenderContext,
-    modifier: string,
-    element: HTMLElement,
-    state: RumiousState < any >
-  ) {
-    let reactive: () => void = () => {};
-    
-    switch (modifier) {
-      case 'text':
-        reactive = () => { element.textContent = String(state.get()) };
-        break;
-        
-      case 'html':
-        reactive = () => { element.innerHTML = String(state.get()) };
-        break;
-        
-      case 'style':
-        reactive = () => {
-          const styles = state.get();
-          if (typeof styles === 'string') {
-            element.setAttribute('style', styles);
-          } else if (typeof styles === 'object') {
-            Object.assign(element.style, styles);
-          }
-        };
-        break;
-        
-      case 'class':
-        reactive = () => {
-          const cls = state.get();
-          if (typeof cls === 'string') element.className = cls;
-          else if (Array.isArray(cls)) element.className = cls.join(' ');
-          else if (typeof cls === 'object') {
-            element.className = Object.entries(cls)
-              .filter(([_, active]) => active)
-              .map(([name]) => name)
-              .join(' ');
-          }
-        };
-        break;
-        
-      case 'disabled':
-        reactive = () => {
-          if ('disabled' in element)(element as any).disabled = Boolean(state.get());
-        };
-        break;
-        
-      case 'checked':
-        reactive = () => {
-          if (element instanceof HTMLInputElement || element instanceof HTMLInputElement) {
-            element.checked = Boolean(state.get());
-          }
-        };
-        break;
-        
-      case 'value':
-        reactive = () => {
-          if ('value' in element)(element as any).value = String(state.get());
-        };
-        break;
-        
-      default:
-        throw new Error(`Unknown bind directive modifier: ${modifier}`);
-    }
-    
-    
-    
-    function onStateChange(commit: any) {
-      if (!document.contains(element) && state.reactor) {
-        state.reactor.removeInternalBinding(onStateChange);
-        return;
-      }
-      reactive();
-    }
-    
-    context.onRendered.push(() => {
-      reactive();
-      if (!state.reactor) return;
-      state.reactor.addInternalBinding(onStateChange);
-    });
-  },
-  
-  attr(
-    context: RumiousRenderContext,
-    attrName: string,
-    element: HTMLElement,
-    state: RumiousState < any >
-  ) {
-    
-    function onStateChange(commit ? : any) {
-      if (!document.contains(element) && state.reactor) {
-        state.reactor.removeInternalBinding(onStateChange);
-        return;
-      }
-      element.setAttribute(attrName, String(state.get()));
-    }
-    
-    context.onRendered.push(() => {
-      onStateChange();
-      if (!state.reactor) return;
-      state.reactor.addInternalBinding(onStateChange);
-    });
-  },
-  
-  prop(
-    context: RumiousRenderContext,
-    name: string,
-    element: HTMLElement,
-    state: RumiousState < any >
-  ) {
-    
-    function onStateChange(commit ? : any) {
-      if (!document.contains(element) && state.reactor) {
-        state.reactor.removeInternalBinding(onStateChange);
-        return;
-      }
-      (element as any)[name] = state.get();
-    }
-    
-    context.onRendered.push(() => {
-      onStateChange();
-      if (!state.reactor) return;
-      state.reactor.addInternalBinding(onStateChange);
-    });
-  },
-  
-  html(
-    context: RumiousRenderContext,
-    modifier: string,
-    element: HTMLElement,
-    state: RumiousState < any >
-  ) {
-    
-    function onStateChange(commit ? : any) {
-      if (!document.contains(element) && state.reactor) {
-        state.reactor.removeInternalBinding(onStateChange);
-        return;
-      }
-      element.innerHTML = String(state.get());
-    }
-    
-    context.onRendered.push(() => {
-      onStateChange();
-      if (!state.reactor) return;
-      state.reactor.addInternalBinding(onStateChange);
-    });
-  },
-  
-  show(
-    context: RumiousRenderContext,
-    modifier: string,
-    element: HTMLElement,
-    state: RumiousState < any >
-  ) {
-    
-    function onStateChange(commit ? : any) {
-      if (!document.contains(element) && state.reactor) {
-        state.reactor.removeInternalBinding(onStateChange);
-        return;
-      }
-      element.style.display = Boolean(state.get()) ? 'block' : 'none';
-    }
-    
-    context.onRendered.push(() => {
-      onStateChange();
-      if (!state.reactor) return;
-      state.reactor.addInternalBinding(onStateChange);
-    });
-  },
-  
-  hide(
-    context: RumiousRenderContext,
-    modifier: string,
-    element: HTMLElement,
-    state: RumiousState < any >
-  ) {
-    
-    function onStateChange(commit ? : any) {
-      if (!document.contains(element) && state.reactor) {
-        state.reactor.removeInternalBinding(onStateChange);
-        return;
-      }
-      element.style.display = !Boolean(state.get()) ? 'block' : 'none';
-    }
-    
-    context.onRendered.push(() => {
-      onStateChange();
-      if (!state.reactor) return;
-      state.reactor.addInternalBinding(onStateChange);
-    });
-  },
-  
-  each < T > (
-    context: RumiousRenderContext,
-    modifier: string,
-    element: HTMLElement,
-    configs: EachDirectiveConfig < T >
-  ) {
-    
-    context = new RumiousRenderContext(
-      context.app,
-      context.target
-    );
-    
-    const keyToNode = new Map < string,
-      Node > ();
-    const nodeOrder: string[] = [];
-    
-    for (const item of configs.value.value) {
-      const key = configs.key(item);
-      const templ = renderFrag(configs.templ(item, key), context);
-      const dom = templ.childNodes[0] as Node;
-      keyToNode.set(key, dom);
-      nodeOrder.push(key);
-      element.appendChild(dom);
-    }
-    
-    if (!configs.value.reactor) return;
-    
-    configs.value.reactor.addInternalBinding((commit) => {
-      const value = commit.value;
-      const key = configs.key(value);
-      
-      if (commit.type === 'remove') {
-        const oldDom = keyToNode.get(key);
-        if (oldDom) {
-          element.removeChild(oldDom);
-          keyToNode.delete(key);
-          const index = nodeOrder.indexOf(key);
-          if (index !== -1) nodeOrder.splice(index, 1);
-        }
-        return;
-      }
-      
-      const templ = renderFrag(configs.templ(value, key), context);
-      const dom = templ.childNodes[0] as Node;
-      
-      switch (commit.type) {
-        case 'append':
-          keyToNode.set(key, dom);
-          nodeOrder.push(key);
-          element.appendChild(dom);
-          break;
-          
-        case 'prepend':
-          keyToNode.set(key, dom);
-          nodeOrder.unshift(key);
-          element.prepend(dom);
-          break;
-          
-        case 'update': {
-          const oldDom = keyToNode.get(key);
-          if (oldDom) {
-            keyToNode.set(key, dom);
-            element.replaceChild(dom, oldDom);
-          }
-          break;
-        }
-        
-        case 'insert': {
-          const index = commit.key!;
-          const anchorKey = nodeOrder[index];
-          const anchorNode = keyToNode.get(anchorKey) ?? null;
-          keyToNode.set(key, dom);
-          nodeOrder.splice(index, 0, key);
-          element.insertBefore(dom, anchorNode);
-          break;
-        }
-      }
-    });
-  },
-  
-  view(
-    context: RumiousRenderContext,
-    modifier: string,
-    element: HTMLElement,
-    configs: RumiousViewControl
-  ) {
-    configs.addTarget({
-      element,
-      context
-    });
-  }
-}
-
-interface EachDirectiveConfig < T > {
-  value: RumiousListState < T > ;
-  key: (item: T) => string;
-  templ: (item: T, key: string) => RumiousTemplate;
-}

package/src/module/index.ts

@@ -1,7 +0,0 @@
-import type { RumiousApp } from '../app/index.js';
-
-export abstract class RumiousModule {}
-
-export type RumiousModuleClass < T extends RumiousModule = any, O = any > = {
-  init(app: RumiousApp, options ? : O): T;
-};

package/src/ref/index.ts

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

package/src/ref/ref.ts

@@ -1,178 +0,0 @@
-import {
-  RumiousComponent,
-  RumiousComponentElement
-} from '../component/index.js';
-
-export class RumiousRef {
-  public element!: HTMLElement;
-  private _mounted = false;
-  private _onMountCallbacks: ((el: HTMLElement) => void)[] = [];
-  private _onUnmountCallbacks: (() => void)[] = [];
-  
-  constructor() {}
-  
-  setTarget(element: HTMLElement) {
-    this.element = element;
-    this._mounted = true;
-    for (const cb of this._onMountCallbacks) {
-      cb(element);
-    }
-  }
-  
-  reset() {
-    if (this._mounted) {
-      for (const cb of this._onUnmountCallbacks) {
-        cb();
-      }
-    }
-    this.element = undefined as any;
-    this._mounted = false;
-  }
-  
-  get(): HTMLElement | undefined {
-    return this._mounted ? this.element : undefined;
-  }
-  
-  isMounted(): boolean {
-    return this._mounted;
-  }
-  
-  has(): boolean {
-    return this.isMounted();
-  }
-  
-  onMount(cb: (el: HTMLElement) => void) {
-    this._onMountCallbacks.push(cb);
-    if (this._mounted) cb(this.element);
-  }
-  
-  onUnmount(cb: () => void) {
-    this._onUnmountCallbacks.push(cb);
-  }
-  
-  toString(): string {
-    return `[RumiousRef ${this._mounted ? "mounted" : "not mounted"}]`;
-  }
-  
-  
-  focus() {
-    this.assertMounted();
-    this.element.focus();
-  }
-  
-  addClass(className: string) {
-    this.assertMounted();
-    this.element.classList.add(className);
-  }
-  
-  removeClass(className: string) {
-    this.assertMounted();
-    this.element.classList.remove(className);
-  }
-  
-  toggleClass(className: string) {
-    this.assertMounted();
-    this.element.classList.toggle(className);
-  }
-  
-  setAttr(key: string, value: string) {
-    this.assertMounted();
-    this.element.setAttribute(key, value);
-  }
-  
-  removeAttr(key: string) {
-    this.assertMounted();
-    this.element.removeAttribute(key);
-  }
-  
-  query < T extends Element = Element > (selector: string): T | null {
-    this.assertMounted();
-    return this.element.querySelector < T > (selector);
-  }
-  
-  queryAll < T extends Element = Element > (selector: string): NodeListOf < T > {
-    this.assertMounted();
-    return this.element.querySelectorAll < T > (selector);
-  }
-  
-  get value(): string | undefined {
-    this.assertMounted();
-    return 'value' in this.element ? (this.element as any).value : undefined;
-  }
-  
-  set value(val: string | undefined) {
-    this.assertMounted();
-    if ('value' in this.element) {
-      (this.element as any).value = val;
-    } else {
-      throw new Error("RumiousRefError: Element has no 'value' property.");
-    }
-  }
-  
-  get text(): string | null {
-    this.assertMounted();
-    return this.element.textContent;
-  }
-  
-  set text(val: string | null) {
-    this.assertMounted();
-    this.element.textContent = val;
-  }
-  
-  get html(): string {
-    this.assertMounted();
-    return this.element.innerHTML;
-  }
-  
-  set html(val: string) {
-    this.assertMounted();
-    this.element.innerHTML = val;
-  }
-  
-  get checked(): boolean {
-    this.assertMounted();
-    return 'checked' in this.element ? Boolean((this.element as any).checked) : false;
-  }
-  
-  set checked(val: boolean) {
-    this.assertMounted();
-    if ('checked' in this.element) {
-      (this.element as any).checked = val;
-    } else {
-      throw new Error("RumiousRefError: Element has no 'checked' property.");
-    }
-  }
-  
-  get disabled(): boolean {
-    this.assertMounted();
-    return 'disabled' in this.element ? Boolean((this.element as any).disabled) : false;
-  }
-  
-  set disabled(val: boolean) {
-    this.assertMounted();
-    if ('disabled' in this.element) {
-      (this.element as any).disabled = val;
-    } else {
-      throw new Error("RumiousRefError: Element has no 'disabled' property.");
-    }
-  }
-  
-  get component():RumiousComponent | null{
-    if(this.element instanceof RumiousComponentElement){
-      return this.element.instance;
-    }else{
-      return null;
-    }
-  }
-  
-  private assertMounted() {
-    if (!this._mounted) {
-      throw new Error("RumiousRefError: Element is not mounted.");
-    }
-  }
-}
-
-
-export function createRef(): RumiousRef {
-  return new RumiousRef();
-}

package/src/render/context.ts

@@ -1,11 +0,0 @@
-import type {RumiousApp} from '../app/index.js';
-
-type Callback = () => any;
-
-export class RumiousRenderContext{
-  public onRendered: Callback[] = [];
-  constructor(
-    public app:RumiousApp,
-    public target:any
-  ){}
-}

package/src/render/index.ts

@@ -1,4 +0,0 @@
-export * from './context.js';
-export * from './render.js';
-export * from './view.js';
-export * from './list.js';

package/src/render/list.ts

@@ -1,115 +0,0 @@
-import { RumiousViewControl } from './view.js';
-import { RumiousListState, RumiousState } from '../state/index.js';
-import { RumiousTemplate, RumiousChangeCommit } from '../types/index.js';
-import { renderFrag } from '../render/index.js';
-
-
-export class RumiousPagination < T > {
-  public currentPage = 0;
-  public limit = 50;
-  public pos = [0, 0];
-  constructor(
-    public view: RumiousViewControl,
-    public data: RumiousListState < T > ,
-    public templFn: (data: T) => RumiousTemplate,
-    public keyFn: (data: T) => string
-  ) {}
-  
-  show() {
-    
-    let [start, end] = this.calcPos();
-    let list = this.data.value.slice(start, end);
-    this.pos = [start, end];
-    for (let data of list) {
-      let key = this.keyFn(data);
-      let templ = this.templFn(data);
-      this.view.addChild(templ);
-    }
-    
-    if (!this.data.reactor) return;
-    this.data.reactor.addInternalBinding(this.onDataChange.bind(this));
-  }
-  
-  calcPos(): [number, number] {
-    const size = this.data.value.length;
-    const totalPage = Math.ceil(size / this.limit);
-    const currentPage = Math.max(0, Math.min(this.currentPage, totalPage - 1));
-    const start = currentPage * this.limit;
-    const end = Math.min(start + this.limit, size);
-    return [start, end];
-  }
-  
-  
-  onDataChange(commit: RumiousChangeCommit < RumiousState < T[] >> ) {
-    const [start, end] = this.calcPos();
-    const total = this.data.value.length;
-    
-    const { type, key, value } = commit;
-    
-    if (type === 'set') {
-      this.view.emptyAll();
-      this.show();
-      return;
-    }
-    
-    if (typeof key === 'number' && key < start) {
-      this.view.emptyAll();
-      this.show();
-      return;
-    }
-
-    if (typeof key === 'number' && key >= start && key < end) {
-      const indexInView = key - start;
-      
-      switch (type) {
-        case 'update': {
-          const item = this.data.value[key];
-          const templ = this.templFn(item);
-          this.view.updateChild(indexInView, templ);
-          break;
-        }
-        
-        case 'remove': {
-          this.view.removeChild(indexInView);
-          
-          const extraIndex = end - 1;
-          if (extraIndex < total) {
-            const extraItem = this.data.value[extraIndex];
-            const extraTemplate = this.templFn(extraItem);
-            this.view.addChild(extraTemplate);
-          }
-          break;
-        }
-        
-        case 'insert':
-        case 'prepend': {
-          const item = this.data.value[key];
-          const templ = this.templFn(item);
-          this.view.addChild(templ, true); 
-          const currentViewSize = end - start + 1;
-          if (currentViewSize > this.limit) {
-            this.view.removeChild(this.limit);
-          }
-          break;
-        }
-        
-        case 'append': {
-          if (key < start + this.limit) {
-            const item = this.data.value[key];
-            const templ = this.templFn(item);
-            this.view.addChild(templ);
-            
-            const currentViewSize = end - start + 1;
-            if (currentViewSize > this.limit) {
-              this.view.removeChild(0);
-            }
-          }
-          break;
-        }
-      }
-      
-      return;
-    }
-    
-  }
-}