rumious 2.0.0 → 2.0.2

package/dist/component/component.d.ts

@@ -6,6 +6,7 @@ export declare class RumiousComponent<T = any> {
     app: RumiousApp;
     element: HTMLElement;
     context: RumiousRenderContext;
+    slot: RumiousTemplate | null;
     static tagName: string;
     constructor();
     createViewControl(): RumiousViewControl;

package/dist/component/element.d.ts

@@ -1,4 +1,4 @@
-import { RumiousComponentConstructor } from '../types/index.js';
+import { RumiousComponentConstructor, RumiousTemplate } from '../types/index.js';
 import { RumiousRenderContext } from '../render/index.js';
 import type { RumiousComponent } from './component.js';
 export declare class RumiousComponentElement<T> extends HTMLElement {
@@ -6,10 +6,12 @@ export declare class RumiousComponentElement<T> extends HTMLElement {
     props: T;
     context: RumiousRenderContext;
     instance: RumiousComponent;
+    slotTempl: RumiousTemplate | null;
     constructor();
     setContext(context: RumiousRenderContext): void;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
+    setSlot(templ: RumiousTemplate): void;
 }
-export declare function createComponentElement<T>(context: RumiousRenderContext, component: RumiousComponentConstructor<T>, props: T): HTMLElement;
+export declare function createComponentElement<T>(context: RumiousRenderContext, component: RumiousComponentConstructor<T>, props: T): [HTMLElement];
 export declare function renderComponent<T>(component: RumiousComponentConstructor<T>, props: T): HTMLElement;

package/dist/index.js

@@ -407,6 +407,7 @@ class RumiousComponent {
     app;
     element;
     context;
+    slot = null;
     static tagName = 'rumious-component';
     constructor() { }
     createViewControl() {
@@ -444,6 +445,7 @@ class RumiousComponentElement extends HTMLElement {
     props;
     context;
     instance;
+    slotTempl = null;
     constructor() {
         super();
     }
@@ -453,6 +455,7 @@ class RumiousComponentElement extends HTMLElement {
     async connectedCallback() {
         let instance = new this.component();
         this.instance = instance;
+        this.instance.slot = this.slotTempl;
         instance.prepare(this.props, this.context, this);
         instance.onCreate();
         await instance.beforeRender();
@@ -462,32 +465,29 @@ class RumiousComponentElement extends HTMLElement {
     disconnectedCallback() {
         this.instance.onDestroy();
     }
+    setSlot(templ) {
+        this.slotTempl = templ;
+    }
 }
 function createComponentElement(context, component, props) {
     if (!window.customElements.get(component.tagName)) {
         window.customElements.define(component.tagName, class extends RumiousComponentElement {
-            constructor() {
-                super();
-                this.component = component;
-                this.props = props;
-                this.context = context;
-            }
         });
     }
-    let element = document.createElement(component.tagName);
-    return element;
+    const element = document.createElement(component.tagName);
+    element.component = component;
+    element.props = props;
+    element.context = context;
+    return [element];
 }
 function renderComponent(component, props) {
     if (!window.customElements.get(component.tagName)) {
         window.customElements.define(component.tagName, class extends RumiousComponentElement {
-            constructor() {
-                super();
-                this.component = component;
-                this.props = props;
-            }
         });
     }
-    let element = document.createElement(component.tagName);
+    const element = document.createElement(component.tagName);
+    element.component = component;
+    element.props = props;
     return element;
 }
 
@@ -645,9 +645,14 @@ function appendChild(parent, node) {
         parent.appendChild(node);
 }
 function element(parent, tagName, attrs) {
-    let element = document.createElement(tagName);
-    parent.appendChild(element);
-    return element;
+    const el = document.createElement(tagName);
+    if (attrs) {
+        for (let key in attrs) {
+            el.setAttribute(key, attrs[key]);
+        }
+    }
+    parent.appendChild(el);
+    return el;
 }
 function replaceNode(oldNode, newNode) {
     const parent = oldNode.parentNode;
@@ -1024,9 +1029,10 @@ const directives = {
     }
 };
 
-function createComponent(context, component, props) {
-    let element = createComponentElement(context, component, props);
-    return element;
+function createComponent(root, context, component, props) {
+    let [element] = createComponentElement(context, component, props);
+    root.appendChild(element);
+    return [element];
 }
 
 class RumiousModule {

package/dist/jsx/component.d.ts

@@ -1,3 +1,3 @@
 import { RumiousRenderContext } from '../render/index.js';
 import { RumiousComponentConstructor } from '../types/index.js';
-export declare function createComponent<T>(context: RumiousRenderContext, component: RumiousComponentConstructor<T>, props: T): HTMLElement;
+export declare function createComponent<T>(root: HTMLElement, context: RumiousRenderContext, component: RumiousComponentConstructor<T>, props: T): [HTMLElement];

package/dist/jsx/element.d.ts

@@ -1,5 +1,5 @@
 export declare function appendChild(parent: HTMLElement, node: Node | string): void;
-export declare function element(parent: HTMLElement, tagName: string, attrs: Record<string, any>): HTMLElement;
+export declare function element(parent: HTMLElement, tagName: string, attrs?: Record<string, any>): HTMLElement;
 export declare function replaceNode(oldNode: Node, newNode: Node): void;
 interface RumiousEventTarget extends HTMLElement {
     __rumiousEvents?: Record<string, (e: Event) => void>;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "rumious",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs.js"
+      "default": "./dist/index.js"
     }
   },
   "scripts": {
@@ -25,6 +25,9 @@
     "frontend",
     "framework"
   ],
+  "files":[
+  	"dist/**"
+  ],
   "author": "smtdfc",
   "license": "MIT",
   "devDependencies": {},

package/rollup.config.js

@@ -1,21 +0,0 @@
-import typescript from '@rollup/plugin-typescript';
-
-const isProduction = process.env.NODE_ENV === 'production';
-
-export default {
-  input: 'src/index.ts',
-  external: ['rumious-compiler'],
-  output: {
-    file: './dist/index.js',
-    format: 'esm',
-    sourcemap: false,
-    paths: {
-      'rumious-compiler': !isProduction 
-      ? '../compiler/dist/index.js'
-      : 'rumious-compiler'
-    }
-  },
-  plugins: [
-    typescript({ tsconfig: './tsconfig.json' })
-  ]
-};

package/src/app/app.ts

@@ -1,45 +0,0 @@
-import { RumiousRenderContext, render } from '../render/index.js';
-import { RumiousTemplate } from '../types/index.js';
-import { RumiousModule, RumiousModuleClass } from '../module/index.js';
-
-export interface RumiousAppConfig {
-  root: HTMLElement;
-}
-
-export class RumiousApp {
-  public modules: any[] = [];
-  
-  public context: RumiousRenderContext = new RumiousRenderContext(
-    this,
-    this
-  );
-  
-  constructor(
-    public config: RumiousAppConfig
-  ) {}
-  
-  addModule < T extends RumiousModule, O > (
-    ModuleClass: RumiousModuleClass < T, O > ,
-    options ? : O
-  ): T {
-    const instance = ModuleClass.init(this, options);
-    this.modules.push(instance);
-    return instance;
-  }
-  
-  render(
-    content: RumiousTemplate
-  ): void {
-    render(
-      content,
-      this.config.root,
-      this.context
-    );
-  }
-}
-
-export function createApp(
-  config: RumiousAppConfig
-): RumiousApp {
-  return new RumiousApp(config);
-}

package/src/app/index.ts

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

package/src/component/component.ts

@@ -1,69 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

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

package/src/global.ts

@@ -1,20 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,70 +0,0 @@
-
-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{
-  let element = document.createElement(tagName);
-  parent.appendChild(element);
-  return element;
-}
-
-
-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

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