stagnate 1.0.6 → 1.0.8

package/README.md

@@ -174,58 +174,137 @@ Primary used to avoid passing nested JSX elements as props.
 
 ### Component class
 ```typescript
-declare class Component<REFS = {}, PROPS = undefined, ROOT extends SVGElement | HTMLElement = SVGElement | HTMLElement> {
-	// props from JSX (set via constructor)
-	readonly props: PROPS extends undefined ? {} : PROPS
-	// HTML root element of this component (can be not set if not attached)
-	protected root: ROOT
-	// parent of this component (can be not set if not attached)
-	protected parent: Component<any, any>
-	// the refs object containing bound elements created during render
-	protected refs: REFS
-	// overcomplicated constructor signature made so props is optional only if component has no props defined
-	constructor(...props: PROPS extends undefined ? [] : [never])
-	// the render function, called to get the component root element, null can be returned if component
-	// has nothing to render but will result with exception if component is being created via create or replace
-	protected render(): Element | null
-	// the ref callback generation function with a overcomplicated signature, used to bind JSX elements to refs
-	protected ref<T extends keyof REFS | undefined = undefined>(key?: T): (x: REFS[NonNullable<T>] extends never ? any : REFS[NonNullable<T>]) => void
-	// create component and replace target element
-	replace(parent: Component<any, any>, target?: Element | Component<any, any> | null): void
-	// create component and insert to target
-	create(parent: Component<any, any>, target?: Element | Component<any, any> | null, before?: Element | Component<any, any> | number): void
-	// crate component as root (attached set on creation)
-	createOrphanized(target?: Element | null): void
-	// bind component to a already existing element (called internally on JSX ref binding)
-	bind(parent: Component<any, any>, target?: Element): void
-	// destroy component and it child components
-	destroy(): void
-	// check if component is attached
-	get attached(): boolean
-	// get the root element of this component
-	get htmlRoot(): ROOT;
-	// get and array of child components
-	protected get components(): Readonly<Component<any, any, any>[]>
-	// called before render is called
-	protected onBeforeRender(): void
-	// called after render is called
-	protected onRender(): void
-	// called when parent becomes attached (or on parent assignment if parent is attached)
-	protected onAttach(): void
-	// called when element is destroyed
-	protected onDetach(): void;
+/**
+ * Stagnate Component class
+ *
+ * @typeParam REFS - interface describing jsx references stored on this component, see {@link Component.refs}
+ * @typeParam PROPS - interface describing jsx props passed to this component
+ * @typeParam ROOT - type of the html root element
+ */
+class Component<REFS = {}, PROPS = undefined, ROOT extends SVGElement | HTMLElement = SVGElement | HTMLElement> {
+    /** properties received from jsx (or set via constructor) */
+    readonly props: PROPS extends undefined ? {} : PROPS
+
+    /** html root element, only accessible after {@link build} was called */
+    protected root: ROOT
+
+    /**
+     * parent component, only accessible after {@link bind} was called
+     * for self-bound components `this.parent = this`
+     */
+    protected parent: Component<any, any>
+
+    /**
+     * jsx references stored on this component,
+     * the REFS type should be set to a interface describing what references the component will use
+     * see {@link ref} for how to set references
+     */
+    protected refs: REFS
+
+    /**
+     * if component is to be used from jsx it has to have one constructor argument being the props,
+     * any other constructor signature will fail when used from jsx
+     */
+    constructor(props: PROPS)
+
+    /**
+     * component render function, should return the component JSX
+     * if null is returned {@link build} call will fail with an exception
+     */
+    protected render(): Element | null
+
+    /** called in {@link build} before render is called */
+    protected onBeforeRender(): void
+
+    /** called in {@link build} after render is called and root is set */
+    protected onRender(): void
+
+    /**
+     * called when component if fully attached (children are attached and `this.attached = true`),
+     * `onAttach` will be called only if the component is bound to a parent component or the component
+     * is self-bound
+     */
+    protected onAttach(): void
+
+    /**
+     * called when component if fully detached (children are detached and `this.attached = false`),
+     * `onDetach` will be called only if the component is bound to a parent component or it {@link destroy} was
+     * called on the component directly
+     */
+    protected onDetach(): void
+
+    /** function meant to be used in jsx for binding references */
+    protected ref<T extends keyof REFS | undefined = undefined>(key?: T): (x: REFS[NonNullable<T>] extends never ? any : REFS[NonNullable<T>]) => void
+
+    /**
+     * calls {@link render} and sets {@link root}
+     * @returns the created DOM element ({@link root})
+     */
+    build(): Element
+
+    /**
+     * add component to a parent component,
+     * attach component if parent component is attached
+     *
+     * a component can be self-bound by passing itself as parent (`x.bind(x)`),
+     * self-bound components get automatically attached
+     */
+    bind(parent: Component<any, any>): void
+
+    /**
+     * render the component, add it as a child of {@link parent} and insert it into DOM
+     *
+     * calls {@link build} and {@link bind} internally
+     *
+     * @param parent - parent component
+     * @param target - DOM element to add the component to, if unset or null `parent.root` is used, if a component is passed it's root will be used
+     * @param before - add the element before the given DOM child, a number can be used as a child index, if unset adds the element as the last child
+     */
+    create(parent: Component<any, any>, target?: Element | Component<any, any> | null, before?: Element | Component<any, any> | number): void
+
+    /**
+     * render the component, add it as a child of {@link parent} and add it to DOM by replacing a existing element or component
+     *
+     * calls {@link build} and {@link bind} internally
+     *
+     * @param parent - parent component
+     * @param target - component or DOM element to replace, if component is passed {@link destroy} will be called on it
+     */
+    replace(parent: Component<any, any>, target: Element | Component<any, any>): void
+
+    /**
+     * render the component, add it to DOM and self-bound, meant to be used for creating the root component
+     *
+     * calls {@link build} and {@link bind} internally
+     *
+     * @param target - DOM target to append the component to
+     */
+    createOrphanized(target: Node): void
+
+    /** remove this component from DOM and its parent component */
+    destroy(): void
+
+    /** true if component is attached */
+    get attached(): boolean
+
+    /** public accessor for {@link root} */
+    get htmlRoot(): ROOT
+
+    /** child component list accessor */
+    get components(): Readonly<Component<any, any, any>[]>
 }
-
 ```
 
 ### Utility Types
 
 ```typescript
-// get props of an JSX element or component function / class
+/** get props of an JSX element or component function / class */
 type ComponentProps<IntrinsicElement | ClassElement | FunctionElement>
-// anything that can be legally used in JSX
+
+/** any value that can be used in JSX */
 type StagnateNode
-// the JSX element css class attribute
+
+/** the JSX element css class attribute */
 type ClassAttribute
 ```
 

package/lib/Component.d.ts

@@ -1,27 +1,122 @@
+/**
+ * Stagnate Component class
+ *
+ * @typeParam REFS - interface describing jsx references stored on this component, see {@link Component.refs}
+ * @typeParam PROPS - interface describing jsx props passed to this component
+ * @typeParam ROOT - type of the html root element
+ */
 export declare class Component<REFS = {}, PROPS = undefined, ROOT extends SVGElement | HTMLElement = SVGElement | HTMLElement> {
+    /** properties received from jsx (or set via constructor) */
     readonly props: PROPS extends undefined ? {} : PROPS;
     private _components;
     private _attached;
+    /** html root element, only accessible after {@link build} was called */
     protected root: ROOT;
+    /**
+     * parent component, only accessible after {@link bind} was called
+     * for self-bound components `this.parent = this`
+     */
     protected parent: Component<any, any>;
+    /**
+     * jsx references stored on this component,
+     * the REFS type should be set to a interface describing what references the component will use
+     * see {@link ref} for how to set references
+     */
     protected refs: REFS;
+    /**
+     * if component is to be used from jsx it has to have one constructor argument being the props,
+     * any other constructor signature will fail when used from jsx
+     */
     constructor(...props: PROPS extends undefined ? [] : [never]);
     constructor(props: PROPS);
+    private attach;
+    private detach;
+    /**
+     * component render function, should return the component JSX
+     * if null is returned {@link build} call will fail with an exception
+     */
     protected render(): Element | null;
+    /** called in {@link build} before render is called */
+    protected onBeforeRender(): void;
+    /** called in {@link build} after render is called and root is set */
+    protected onRender(): void;
+    /**
+     * called when component if fully attached (children are attached and `this.attached = true`),
+     * `onAttach` will be called only if the component is bound to a parent component or the component
+     * is self-bound
+     */
+    protected onAttach(): void;
+    /**
+     * called when component if fully detached (children are detached and `this.attached = false`),
+     * `onDetach` will be called only if the component is bound to a parent component or it {@link destroy} was
+     * called on the component directly
+     */
+    protected onDetach(): void;
+    /**
+     * function meant to be used in jsx for binding references
+     *
+     * the following will bind the div under `this.refs.foo` and requires the `REFS` type to include `{foo: HTMLDivElement}`
+     * ```
+     * <div ref={this.ref("foo")} />
+     * ```
+     *
+     * the following will bind the child component under `this.refs.bar` and requires the `REFS` type to include `{bar: BarComponent}`
+     * ```
+     * <BarComponent ref={this.ref("bar")} />
+     * ```
+     *
+     * the following will bind the child component without adding it to refs
+     * ```
+     * <BarComponent ref={this.ref()} />
+     * ```
+     */
     protected ref<T extends keyof REFS | undefined = undefined>(key?: T): (x: REFS[NonNullable<T>] extends never ? any : REFS[NonNullable<T>]) => void;
-    _jsx(): Element;
-    replace(parent: Component<any, any>, target?: Element | Component<any, any> | null): void;
+    /**
+     * calls {@link render} and sets {@link root}
+     * @returns the created DOM element ({@link root})
+     */
+    build(): Element;
+    /**
+     * add component to a parent component,
+     * attach component if parent component is attached
+     *
+     * a component can be self-bound by passing itself as parent (`x.bind(x)`),
+     * self-bound components get automatically attached
+     */
+    bind(parent: Component<any, any>): void;
+    /**
+     * render the component, add it as a child of {@link parent} and insert it into DOM
+     *
+     * calls {@link build} and {@link bind} internally
+     *
+     * @param parent - parent component
+     * @param target - DOM element to add the component to, if unset or null `parent.root` is used, if a component is passed it's root will be used
+     * @param before - add the element before the given DOM child, a number can be used as a child index, if unset adds the element as the last child
+     */
     create(parent: Component<any, any>, target?: Element | Component<any, any> | null, before?: Element | Component<any, any> | number): void;
-    createOrphanized(target?: Element | null): void;
-    bind(parent: Component<any, any>, target?: Element): void;
+    /**
+     * render the component, add it as a child of {@link parent} and add it to DOM by replacing a existing element or component
+     *
+     * calls {@link build} and {@link bind} internally
+     *
+     * @param parent - parent component
+     * @param target - component or DOM element to replace, if component is passed {@link destroy} will be called on it
+     */
+    replace(parent: Component<any, any>, target: Element | Component<any, any>): void;
+    /**
+     * render the component, add it to DOM and self-bound, meant to be used for creating the root component
+     *
+     * calls {@link build} and {@link bind} internally
+     *
+     * @param target - DOM target to append the component to
+     */
+    createOrphanized(target: Node): void;
+    /** remove this component from DOM and its parent component */
     destroy(): void;
-    protected attach(): void;
-    protected detach(): void;
+    /** true if component is attached */
     get attached(): boolean;
+    /** public accessor for {@link root} */
     get htmlRoot(): ROOT;
-    protected get components(): Readonly<Component<any, any, any>[]>;
-    protected onBeforeRender(): void;
-    protected onRender(): void;
-    protected onAttach(): void;
-    protected onDetach(): void;
+    /** child component list accessor */
+    get components(): Readonly<Component<any, any, any>[]>;
 }

package/lib/Component.js

@@ -1,3 +1,10 @@
+/**
+ * Stagnate Component class
+ *
+ * @typeParam REFS - interface describing jsx references stored on this component, see {@link Component.refs}
+ * @typeParam PROPS - interface describing jsx props passed to this component
+ * @typeParam ROOT - type of the html root element
+ */
 export class Component {
     constructor(props) {
         this._components = [];
@@ -5,20 +12,86 @@ export class Component {
         this.refs = {};
         this.props = props;
     }
+    attach() {
+        for (let i = 0; i < this._components.length; i += 1) {
+            const component = this._components[i];
+            if (!component._attached) {
+                component.attach();
+            }
+        }
+        this._attached = true;
+        this.onAttach();
+    }
+    detach() {
+        this._components.forEach(x => x.detach());
+        this._components = [];
+        this._attached = false;
+        this.onDetach();
+    }
+    /**
+     * component render function, should return the component JSX
+     * if null is returned {@link build} call will fail with an exception
+     */
     render() {
         return null;
     }
+    /** called in {@link build} before render is called */
+    onBeforeRender() {
+    }
+    /** called in {@link build} after render is called and root is set */
+    onRender() {
+    }
+    /**
+     * called when component if fully attached (children are attached and `this.attached = true`),
+     * `onAttach` will be called only if the component is bound to a parent component or the component
+     * is self-bound
+     */
+    onAttach() {
+    }
+    /**
+     * called when component if fully detached (children are detached and `this.attached = false`),
+     * `onDetach` will be called only if the component is bound to a parent component or it {@link destroy} was
+     * called on the component directly
+     */
+    onDetach() {
+    }
+    /**
+     * function meant to be used in jsx for binding references
+     *
+     * the following will bind the div under `this.refs.foo` and requires the `REFS` type to include `{foo: HTMLDivElement}`
+     * ```
+     * <div ref={this.ref("foo")} />
+     * ```
+     *
+     * the following will bind the child component under `this.refs.bar` and requires the `REFS` type to include `{bar: BarComponent}`
+     * ```
+     * <BarComponent ref={this.ref("bar")} />
+     * ```
+     *
+     * the following will bind the child component without adding it to refs
+     * ```
+     * <BarComponent ref={this.ref()} />
+     * ```
+     */
     ref(key) {
         return (x) => {
             if (x instanceof Component) {
-                x.bind(this);
+                x.parent = this;
+                this._components.push(x);
+                if (this._attached) {
+                    x.attach();
+                }
             }
             if (key) {
                 this.refs[key] = x;
             }
         };
     }
-    _jsx() {
+    /**
+     * calls {@link render} and sets {@link root}
+     * @returns the created DOM element ({@link root})
+     */
+    build() {
         this.onBeforeRender();
         const html = this.render();
         if (!html) {
@@ -28,37 +101,35 @@ export class Component {
         this.onRender();
         return html;
     }
-    replace(parent, target) {
-        if (this.root) {
-            throw new Error("can not create a already created item");
-        }
-        if (!target) {
-            target = parent.root;
-        }
-        this.onBeforeRender();
-        const html = this.render();
-        if (!html) {
-            throw new Error("can not replace component: render function returned null");
-        }
-        this.root = html;
-        this.onRender();
+    /**
+     * add component to a parent component,
+     * attach component if parent component is attached
+     *
+     * a component can be self-bound by passing itself as parent (`x.bind(x)`),
+     * self-bound components get automatically attached
+     */
+    bind(parent) {
         this.parent = parent;
-        if (target instanceof Component) {
-            target.root.replaceWith(html);
-            target.destroy();
+        if (parent != this) {
+            parent._components.push(this);
+            if (parent._attached) {
+                this.attach();
+            }
         }
         else {
-            target.replaceWith(html);
-        }
-        this.parent._components.push(this);
-        if (parent._attached) {
             this.attach();
         }
     }
+    /**
+     * render the component, add it as a child of {@link parent} and insert it into DOM
+     *
+     * calls {@link build} and {@link bind} internally
+     *
+     * @param parent - parent component
+     * @param target - DOM element to add the component to, if unset or null `parent.root` is used, if a component is passed it's root will be used
+     * @param before - add the element before the given DOM child, a number can be used as a child index, if unset adds the element as the last child
+     */
     create(parent, target, before) {
-        if (this.root) {
-            throw new Error("can not create a already created item");
-        }
         if (!target) {
             target = parent.root;
         }
@@ -71,90 +142,65 @@ export class Component {
         else if (before instanceof Component) {
             before = before.root;
         }
-        this.onBeforeRender();
-        const html = this.render();
-        if (!html) {
-            throw new Error("can not create component: render function returned null");
+        target.insertBefore(this.build(), before === undefined ? null : before);
+        this.bind(parent);
+    }
+    /**
+     * render the component, add it as a child of {@link parent} and add it to DOM by replacing a existing element or component
+     *
+     * calls {@link build} and {@link bind} internally
+     *
+     * @param parent - parent component
+     * @param target - component or DOM element to replace, if component is passed {@link destroy} will be called on it
+     */
+    replace(parent, target) {
+        if (target instanceof Component) {
+            target.root.replaceWith(this.build());
+            target.destroy();
         }
-        this.root = html;
-        this.onRender();
-        target.insertBefore(html, before === undefined ? null : before);
-        this.parent = parent;
-        this.parent._components.push(this);
-        if (parent._attached) {
-            this.attach();
+        else {
+            target.replaceWith(this.build());
         }
+        this.bind(parent);
     }
+    /**
+     * render the component, add it to DOM and self-bound, meant to be used for creating the root component
+     *
+     * calls {@link build} and {@link bind} internally
+     *
+     * @param target - DOM target to append the component to
+     */
     createOrphanized(target) {
-        if (this.root) {
-            throw new Error("can not create a already created item");
-        }
-        this.onBeforeRender();
-        const html = this.render();
-        if (!html) {
-            throw new Error("can not create component: render function returned null");
-        }
-        this.root = html;
-        this.onRender();
-        target === null || target === void 0 ? void 0 : target.appendChild(html);
-        this.attach();
-    }
-    bind(parent, target) {
-        if (target) {
-            if (this.root) {
-                throw new Error("can not bind a already bound item");
-            }
-            this.root = target;
-        }
-        else if (!this.root) {
-            throw new Error("can not bind not rendered item to itself");
-        }
-        this.parent = parent;
-        parent._components.push(this);
-        if (parent._attached) {
-            this.attach();
-        }
+        target.appendChild(this.build());
+        this.bind(this);
     }
+    /** remove this component from DOM and its parent component */
     destroy() {
         this.detach();
         this.refs = {};
-        this.root.remove();
-        this.parent._components.splice(this.parent._components.indexOf(this), 1);
-        this.parent = null;
-        this.root = null;
-    }
-    attach() {
-        for (let i = 0; i < this._components.length; i += 1) {
-            const component = this._components[i];
-            if (!component._attached) {
-                component.attach();
+        if (this.root) {
+            this.root.remove();
+        }
+        if (this.parent) {
+            const index = this.parent._components.indexOf(this);
+            if (index >= 0) {
+                this.parent._components.splice(index, 1);
             }
         }
-        this._attached = true;
-        this.onAttach();
-    }
-    detach() {
-        this._components.forEach(x => x.detach());
-        this._components = [];
-        this._attached = false;
-        this.onDetach();
+        this.parent = null;
+        this.root = null;
     }
+    /** true if component is attached */
     get attached() {
         return this._attached;
     }
+    /** public accessor for {@link root} */
     get htmlRoot() {
         return this.root;
     }
+    /** child component list accessor */
     get components() {
         return this._components;
     }
-    onBeforeRender() {
-    }
-    onRender() {
-    }
-    onAttach() {
-    }
-    onDetach() {
-    }
 }
 //# sourceMappingURL=Component.js.map

package/lib/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sourceRoot":"","sources":["../src/Component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sourceRoot":"","sources":["../src/Component.ts"],"names":[],"mappings":"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"}

package/lib/Slot.d.ts

@@ -1,8 +1,33 @@
 import { JSX, StagnateNode } from "./types";
+/**
+ * Pseudo component used to create named slots.
+ *
+ * example use:
+ * ```typescript
+ * function Foo(props: {children: StagnateNode}) {
+ *   const slots = Slot.extract<{foo: HTMLElement, bar: HTMLElement}>(props.children)
+ *   return <div>
+ *     <div>{slots.foo}</div>
+ *     <div>{slots.bar}</div>
+ *    </div>
+ * }
+ *
+ * const example = <Foo>
+ *   <Slot name="foo">FOO</Slot>
+ *   <Slot name="bar">BAR</Slot>
+ * </Foo>
+ * ```
+ */
 export declare function Slot(props: {
     name: string;
     children: StagnateNode;
 }): JSX.Element;
 export declare namespace Slot {
-    var extract: <T = Record<string, any>>(input: StagnateNode, slots?: Record<string, any>) => T;
+    /**
+     * This function extracts slotted children from the child list,
+     * it has to be called if slots are in the child list or render will fail on un-extracted slot data.
+     *
+     * see {@link Slot} for a usage example
+     */
+    function extract<T = Record<string, any>>(input: StagnateNode, slots?: Record<string, any>): T;
 }

package/lib/Slot.js

@@ -5,28 +5,56 @@ class SlotArray extends Array {
         this.push(elements);
     }
 }
+/**
+ * Pseudo component used to create named slots.
+ *
+ * example use:
+ * ```typescript
+ * function Foo(props: {children: StagnateNode}) {
+ *   const slots = Slot.extract<{foo: HTMLElement, bar: HTMLElement}>(props.children)
+ *   return <div>
+ *     <div>{slots.foo}</div>
+ *     <div>{slots.bar}</div>
+ *    </div>
+ * }
+ *
+ * const example = <Foo>
+ *   <Slot name="foo">FOO</Slot>
+ *   <Slot name="bar">BAR</Slot>
+ * </Foo>
+ * ```
+ */
 export function Slot(props) {
     return new SlotArray(props.name, props.children);
 }
-Slot.extract = function (input, slots = {}) {
-    if (input instanceof SlotArray && input.length) {
-        slots[input.name] = input[0];
-        input.pop();
-    }
-    else if (Array.isArray(input)) {
-        for (let i = 0; i < input.length; i += 1) {
-            const item = input[i];
-            if (item instanceof SlotArray) {
-                if (input.length) {
-                    slots[item.name] = item[0];
+(function (Slot) {
+    /**
+     * This function extracts slotted children from the child list,
+     * it has to be called if slots are in the child list or render will fail on un-extracted slot data.
+     *
+     * see {@link Slot} for a usage example
+     */
+    function extract(input, slots = {}) {
+        if (input instanceof SlotArray && input.length) {
+            slots[input.name] = input[0];
+            input.pop();
+        }
+        else if (Array.isArray(input)) {
+            for (let i = 0; i < input.length; i += 1) {
+                const item = input[i];
+                if (item instanceof SlotArray) {
+                    if (input.length) {
+                        slots[item.name] = item[0];
+                    }
+                    input[i] = null;
+                }
+                else if (Array.isArray(item)) {
+                    extract(item, slots);
                 }
-                input[i] = null;
-            }
-            else if (Array.isArray(item)) {
-                this.extract(item, slots);
             }
         }
+        return slots;
     }
-    return slots;
-};
+    Slot.extract = extract;
+})(Slot || (Slot = {}));
 //# sourceMappingURL=Slot.js.map

package/lib/Slot.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slot.js","sourceRoot":"","sources":["../src/Slot.ts"],"names":[],"mappings":"AAEA,MAAM,SAAU,SAAQ,KAAmB;IAE1C,YAAa,IAAY,EAAE,QAAsB;QAChD,KAAK,EAAE,CAAA;QACP,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACpB,CAAC;CACD;AAED,MAAM,UAAU,IAAI,CAAC,KAA6C;IACjE,OAAO,IAAI,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAQ,CAAA;AACxD,CAAC;AAED,IAAI,CAAC,OAAO,GAAG,UAAkC,KAAmB,EAAE,QAA6B,EAAE;IACpG,IAAI,KAAK,YAAY,SAAS,IAAI,KAAK,CAAC,MAAM,EAAE;QAC/C,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;QAC5B,KAAK,CAAC,GAAG,EAAE,CAAA;KACX;SAAM,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QAChC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE;YACzC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;YACrB,IAAI,IAAI,YAAY,SAAS,EAAE;gBAC9B,IAAI,KAAK,CAAC,MAAM,EAAE;oBACjB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;iBAC1B;gBACD,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAA;aACf;iBAAM,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBAC/B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;aACzB;SACD;KACD;IACD,OAAO,KAAU,CAAA;AAClB,CAAC,CAAA"}
+{"version":3,"file":"Slot.js","sourceRoot":"","sources":["../src/Slot.ts"],"names":[],"mappings":"AAEA,MAAM,SAAU,SAAQ,KAAmB;IAE1C,YAAa,IAAY,EAAE,QAAsB;QAChD,KAAK,EAAE,CAAA;QACP,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACpB,CAAC;CACD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,IAAI,CAAC,KAA6C;IACjE,OAAO,IAAI,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAQ,CAAA;AACxD,CAAC;AAED,WAAiB,IAAI;IACpB;;;;;OAKG;IACH,SAAgB,OAAO,CAA0B,KAAmB,EAAE,QAA6B,EAAE;QACpG,IAAI,KAAK,YAAY,SAAS,IAAI,KAAK,CAAC,MAAM,EAAE;YAC/C,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;YAC5B,KAAK,CAAC,GAAG,EAAE,CAAA;SACX;aAAM,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAChC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE;gBACzC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;gBACrB,IAAI,IAAI,YAAY,SAAS,EAAE;oBAC9B,IAAI,KAAK,CAAC,MAAM,EAAE;wBACjB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;qBAC1B;oBACD,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAA;iBACf;qBAAM,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBAC/B,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;iBACpB;aACD;SACD;QACD,OAAO,KAAU,CAAA;IAClB,CAAC;IAlBe,YAAO,UAkBtB,CAAA;AACF,CAAC,EA1BgB,IAAI,KAAJ,IAAI,QA0BpB"}

package/lib/jsx-runtime.d.ts

@@ -1,6 +1,7 @@
 import type { JSX, StagnateNode } from "./types";
 export declare function jsx(type: any, props: any): any;
 export declare function createElement(type: any, props: any, ...children: any[]): any;
+/** JSX fragment component, <> can be used as an alias */
 export declare function Fragment(props: {
     children: StagnateNode;
 }): JSX.Element;

package/lib/jsx-runtime.js

@@ -1,3 +1,4 @@
+import { Component } from "./Component";
 function _collect(data, accumulator) {
     for (let i = 0; i < data.length; i += 1) {
         const value = data[i];
@@ -29,8 +30,10 @@ export function jsx(type, props) {
     else if (typeof type == "string") {
         const children = collect(props.children);
         let element;
-        if (type == "svg" || type == "path") {
-            element = document.createElementNS("http://www.w3.org/2000/svg", type);
+        let isSvg = false;
+        if (type.startsWith("svg")) {
+            element = document.createElementNS("http://www.w3.org/2000/svg", type.length == 3 ? "svg" : type.slice(4));
+            isSvg = true;
         }
         else {
             element = document.createElement(type);
@@ -49,15 +52,20 @@ export function jsx(type, props) {
                 props.ref(element);
             }
             else if (key == "class") {
-                const value = props.class;
-                element.setAttribute("class", typeof value == "string" ? value : collect(value).join(" "));
+                let value = props.class;
+                if (Array.isArray(value)) {
+                    value = collect(value).join(" ");
+                }
+                if (value) {
+                    element.setAttribute("class", value);
+                }
             }
             else if (key == "style") {
                 Object.assign(element.style, props.style);
             }
             else {
                 const value = props[key];
-                const attribute = key == "viewBox" ? key : key.toLowerCase();
+                const attribute = isSvg ? key : key.toLowerCase();
                 if (value === true) {
                     element.setAttribute(attribute, "");
                 }
@@ -75,9 +83,9 @@ export function jsx(type, props) {
         children.forEach(x => element.appendChild(x instanceof Node ? x : document.createTextNode(x.toString())));
         return element;
     }
-    else if ("prototype" in type && type.prototype._jsx) {
+    else if (type.prototype instanceof Component) {
         const component = new type(props);
-        const element = component._jsx();
+        const element = component.build();
         if (props.ref) {
             props.ref(component);
         }
@@ -95,6 +103,7 @@ export function createElement(type, props, ...children) {
     props.children = children;
     return jsx(type, props);
 }
+/** JSX fragment component, <> can be used as an alias */
 export function Fragment(props) {
     return props.children;
 }

package/lib/jsx-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../src/jsx-runtime.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../src/jsx-runtime.ts"],"names":[],"mappings":"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"}

package/lib/types.d.ts

@@ -10,6 +10,13 @@ export interface EvenHandlers {
     onChange: (ev: Event) => void;
     onClick: (ev: MouseEvent) => void;
     onClose: (ev: Event) => void;
+    onDrag: (ev: DragEvent) => void;
+    onDragEnd: (ev: DragEvent) => void;
+    onDragEnter: (ev: DragEvent) => void;
+    onDragLeave: (ev: DragEvent) => void;
+    onDragOver: (ev: DragEvent) => void;
+    onDragStart: (ev: DragEvent) => void;
+    onDrop: (ev: DragEvent) => void;
     onContextMenu: (ev: MouseEvent) => void;
     onDblClick: (ev: MouseEvent) => void;
     onFocus: (ev: FocusEvent) => void;
@@ -46,7 +53,7 @@ export interface EvenHandlers {
 export interface GlobalAttributes<T> extends Partial<EvenHandlers> {
     ref?: (value: T) => void;
     id?: string;
-    class?: CollectableValue<(string | false | null | undefined)>;
+    class?: CollectableValue<string>;
     style?: Partial<CSSStyleDeclaration>;
     title?: string;
     tabIndex?: number;
@@ -148,10 +155,6 @@ export interface SvgElementAttributes extends GlobalAttributes<SVGElement> {
     fill?: string;
     children?: CollectableValue<JSX.Element | string>;
 }
-export interface SvgPathElementAttributes extends GlobalAttributes<SVGPathElement> {
-    fill?: string;
-    d?: string;
-}
 export declare namespace JSX {
     interface IntrinsicElements {
         text: TextElementAttributes;
@@ -165,7 +168,7 @@ export declare namespace JSX {
         option: OptionElementAttributes;
         iframe: IframeElementAttributes;
         svg: SvgElementAttributes;
-        path: SvgPathElementAttributes;
+        [key: `svg:${string}`]: GlobalAttributes<SVGElement> & Record<string, any>;
     }
     interface ElementChildrenAttribute {
         children: {};
@@ -182,10 +185,13 @@ export declare namespace JSX {
         props: {};
     }
 }
+/** get props of an JSX element or component function / class */
 export declare type ComponentProps<T extends keyof JSX.IntrinsicElements | {
     props: any;
 } | ((props: any) => any)> = T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : (T extends {
     props: any;
 } ? T["props"] : (T extends (props: any) => any ? Parameters<T>[0] : never));
+/** any value that can be used in JSX */
 export declare type StagnateNode = CollectableValue<JSX.Element | string>;
-export declare type ClassAttribute = CollectableValue<(string | false | null | undefined)>;
+/** the JSX element css class attribute */
+export declare type ClassAttribute = CollectableValue<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "stagnate",
-	"version": "1.0.6",
+	"version": "1.0.8",
 	"description": "non-reactive react",
 	"main": "lib/index.js",
 	"files": [