rumious 1.0.13 → 2.0.1

package/src/component/component.ts

@@ -0,0 +1,69 @@
+import { RumiousTemplate } from '../types/index.js';
+import { RumiousRenderContext, render ,RumiousViewControl,createViewControl} from '../render/index.js';
+import { RumiousApp } from '../app/index.js';
+
+export class RumiousComponent < T = any > {
+  public props!: T;
+  public app!: RumiousApp;
+  public element!: HTMLElement;
+  public context!: RumiousRenderContext;
+  static tagName = 'rumious-component';
+  
+  constructor() {}
+  
+  createViewControl():RumiousViewControl{
+    return createViewControl();
+  }
+  
+  mountTo(
+    template: RumiousTemplate,
+    target: HTMLElement,
+  ): HTMLElement {
+    return render(
+      template,
+      target,
+      this.context
+    );
+  }
+  
+  prepare(
+    props: T,
+    context: RumiousRenderContext,
+    element: HTMLElement
+  ) {
+    this.app = context.app;
+    this.element = element;
+    this.props = props;
+    this.context = new RumiousRenderContext(
+      context.app,
+      this
+    );
+  }
+  
+  template(): RumiousTemplate {
+    throw new Error(`RumiousRenderError: Cannot render empty component !`);
+  }
+  
+  requestRender() {
+    let template = this.template();
+    render(
+      template,
+      this.element,
+      this.context
+    );
+  }
+  
+  remove() {
+    this.element.remove();
+  }
+  
+  onCreate() {}
+  onRender() {}
+  onDestroy() {}
+  beforeRender() {}
+  
+}
+
+export class Fragment extends RumiousComponent<any>{
+  
+}

package/src/component/element.ts

@@ -0,0 +1,76 @@
+import { RumiousComponentConstructor } from '../types/index.js';
+import { RumiousRenderContext } from '../render/index.js';
+import type { RumiousComponent } from './component.js';
+
+
+export class RumiousComponentElement < T > extends HTMLElement {
+  public component!: RumiousComponentConstructor < T > ;
+  public props!: T;
+  public context!: RumiousRenderContext;
+  public instance!: RumiousComponent;
+  constructor() {
+    super()
+  }
+  
+  setContext(context: RumiousRenderContext){
+    this.context = context;
+  }
+  
+  async connectedCallback() {
+    let instance = new this.component();
+    this.instance = instance;
+    instance.prepare(
+      this.props,
+      this.context,
+      this
+    );
+    instance.onCreate();
+    await instance.beforeRender();
+    instance.requestRender();
+    instance.onRender();
+  }
+  
+  disconnectedCallback() {
+    this.instance.onDestroy();
+  }
+}
+
+export function createComponentElement < T > (
+  context: RumiousRenderContext,
+  component: RumiousComponentConstructor < T > ,
+  props: T
+): HTMLElement {
+  if (!window.customElements.get(component.tagName)) {
+    window.customElements.define(component.tagName, class extends RumiousComponentElement < T > {
+      constructor() {
+        super()
+        this.component = component;
+        this.props = props;
+        this.context = context;
+      }
+    });
+  }
+  
+  let element = document.createElement(component.tagName);
+  return element;
+  
+}
+
+export function renderComponent < T > (
+  component: RumiousComponentConstructor < T > ,
+  props: T
+): HTMLElement {
+  if (!window.customElements.get(component.tagName)) {
+    window.customElements.define(component.tagName, class extends RumiousComponentElement < T > {
+      constructor() {
+        super()
+        this.component = component;
+        this.props = props;
+      }
+    });
+  }
+  
+  let element = document.createElement(component.tagName);
+  return element;
+  
+}

package/src/component/index.ts

@@ -0,0 +1,2 @@
+export * from './component.js';
+export * from './element.js';

package/src/global.ts

@@ -0,0 +1,20 @@
+import type * as JSXUtils from './jsx/index.js';
+import type { RumiousTemplate } from './types/index.js';
+
+export {}; 
+
+declare global {
+  var RUMIOUS: typeof JSXUtils;
+  
+  namespace JSX {
+    type Element = RumiousTemplate;
+    
+    interface IntrinsicElements {
+      [tagName: string]: any;
+    }
+    
+    interface ElementChildrenAttribute {
+      children: {};
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+import './global.js';
+
+
+export const __version__ = "2.x";
+export * from './app/index.js';
+export * from './types/index.js';
+export * from './render/index.js';
+export * from './state/index.js';
+export * from './component/index.js';
+export * from './ref/index.js';
+export * from './jsx/index.js';
+export * from './module/index.js';
+

package/src/jsx/component.ts

@@ -0,0 +1,17 @@
+import { RumiousRenderContext } from '../render/index.js';
+import { createComponentElement } from '../component/index.js';
+import { RumiousComponentConstructor } from '../types/index.js';
+
+export function createComponent<T>(
+  context: RumiousRenderContext,
+  component: RumiousComponentConstructor<T>,
+  props:T
+): HTMLElement {
+  let element = createComponentElement(
+    context,
+    component,
+    props
+  );
+  
+  return element;
+}

package/src/jsx/dynamic.ts

@@ -0,0 +1,87 @@
+import { RumiousRenderContext } from '../render/index.js';
+import { isTemplate } from '../utils/checker.js';
+import { RumiousState } from '../state/index.js';
+import { RumiousComponentElement } from '../component/index.js';
+
+
+function handleReactiveNode(
+  node: Node,
+  value: RumiousState < Node > ,
+  context: RumiousRenderContext
+): Node {
+  let currentNode: Node = node;
+  
+  const update = () => {
+    if (!document.contains(currentNode) && value.reactor) {
+      value.reactor.removeBinding(update);
+      return;
+    }
+    
+    const newNode = value.value;
+    if (newNode instanceof RumiousComponentElement) {
+      newNode.setContext(context);
+    }
+    
+    currentNode.parentNode?.replaceChild(newNode, currentNode);
+    currentNode = newNode;
+  };
+  
+  context.onRendered.push(() => {
+    update();
+    if (!value.reactor) return;
+    value.reactor.addBinding(update);
+  });
+  return node;
+}
+
+
+function isPrimitive(value: unknown): value is(string | number | boolean | bigint | symbol | null | undefined) {
+  return value === null || (typeof value !== 'object' && typeof value !== 'function');
+}
+
+export function createDynamicValue(
+  context: RumiousRenderContext,
+  value: unknown
+): Node {
+  if (Array.isArray(value)) {
+    const fragment = document.createDocumentFragment();
+    
+    for (const item of value) {
+      if (isTemplate(item)) {
+        const rendered = item(document.createDocumentFragment(), context);
+        fragment.appendChild(rendered);
+      } else if (isPrimitive(item)) {
+        if (item !== null && item !== undefined && item !== false) {
+          fragment.appendChild(document.createTextNode(String(item)));
+        }
+      }
+    }
+    
+    return fragment;
+  }
+  
+  
+  if (isTemplate(value)) {
+    return value(document.createDocumentFragment(), context);
+  }
+  
+  if (value instanceof RumiousState && value.value instanceof Node) {
+    return handleReactiveNode(document.createTextNode(''), value, context);
+  }
+  
+  if (value instanceof RumiousState && value.reactor) {
+    let node = document.createTextNode('');
+    context.onRendered.push(() => {
+      node.textContent = String(value.get());
+      if (!value.reactor) return;
+      value.reactor.addBinding((commit) => node.textContent = String(commit.state.get()));
+    });
+    return node;
+  }
+  
+  if (isPrimitive(value) && value !== null && value !== undefined && value !== false) {
+    return document.createTextNode(String(value));
+  }
+  
+  return document.createTextNode('');
+}

package/src/jsx/element.ts

@@ -0,0 +1,77 @@
+
+export function appendChild(
+  parent:HTMLElement,
+  node:Node | string
+){
+  if(typeof node === 'string') parent.appendChild(document.createTextNode(node))
+  else parent.appendChild(node);
+}
+
+export function element(
+  parent: HTMLElement,
+  tagName: string,
+  attrs ? : Record < string, any >
+): HTMLElement {
+  const el = document.createElement(tagName);
+  
+  if (attrs) {
+    for (let key in attrs) {
+      el.setAttribute(key, attrs[key]);
+    }
+  }
+  
+  parent.appendChild(el);
+  return el;
+}
+
+
+export function replaceNode(oldNode: Node, newNode: Node): void {
+  const parent = oldNode.parentNode;
+  if (parent) {
+    parent.replaceChild(newNode, oldNode);
+  } else {
+    console.warn('replaceNode: oldNode has no parent. Cannot replace.');
+  }
+}
+
+
+
+interface RumiousEventTarget extends HTMLElement {
+  __rumiousEvents ? : Record < string, (e: Event) => void > ;
+}
+
+export function createEvent(
+  target: RumiousEventTarget,
+  name: string,
+  callback: (e: Event) => void
+) {
+  if (!target.__rumiousEvents) {
+    target.__rumiousEvents = {};
+  }
+  target.__rumiousEvents[name] = callback;
+}
+
+function triggerEvent(name: string, event: Event) {
+  const path = (event.composedPath?.() ?? [event.target]) as EventTarget[];
+  
+  for (const target of path) {
+    if (
+      target instanceof HTMLElement &&
+      '__rumiousEvents' in target
+    ) {
+      const element = target as RumiousEventTarget;
+      
+      const handler = element.__rumiousEvents?.[name];
+      if (handler) {
+        handler(event);
+        break;
+      }
+    }
+  }
+}
+
+export function delegateEvents(events: string[]) {
+  for (const name of events) {
+    window.addEventListener(name, (e) => triggerEvent(name, e));
+  }
+}

package/src/jsx/index.ts

@@ -0,0 +1,7 @@
+export * from './element.js';
+export * from './dynamic.js';
+export * from './template.js';
+export * from './component.js';
+
+
+