wip

dist/cmp/Button.jsx.map

-{"version":3,"file":"Button.jsx","sourceRoot":"","sources":["../../src/cmp/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,gCAA2D;AAE3D;IAAqB,0BAAS;IAA9B;QAAA,qEAeC;QAdG,YAAM,GAAc,IAAI,CAAC;QACzB,SAAG,GAAG;YACF,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,KAAK;SAClB,CAAC;QACF,aAAO,GAAiC;YACpC,KAAK,EAAE,UAAC,CAAC,EAAC,GAAU,IAAG,OAAA,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,GAAG,GAAG,EAA3B,CAA2B;YAClD,QAAQ,EAAE,UAAC,CAAC,EAAC,GAAW,IAAG,OAAA,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAC,QAAQ,EAAE,GAAG,EAAC,CAAC,EAA7B,CAA6B;SAC3D,CAAC;;IAMN,CAAC;IALG,uBAAM,GAAN;QACI,YAAY;QACZ,IAAI,CAAC,MAAM,GAAG,CAAC,MAAM,CAAA,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IACL,aAAC;AAAD,CAAC,AAfD,CAAqB,gBAAS,GAe7B;AAEO,wBAAM"}
+{"version":3,"file":"Button.jsx","sourceRoot":"","sources":["../../src/cmp/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,gCAAyE;AAIzE;IAAqB,0BAAsB;IAA3C;QAAA,qEAeC;QAdG,YAAM,GAAc,IAAI,CAAC;QACzB,SAAG,GAAG;YACF,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,KAAK;SAClB,CAAC;QACF,aAAO,GAAiC;YACpC,KAAK,EAAE,UAAC,CAAC,EAAC,GAAU,IAAG,OAAA,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,GAAG,GAAG,EAA3B,CAA2B;YAClD,QAAQ,EAAE,UAAC,CAAC,EAAC,GAAW,IAAG,OAAA,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAC,QAAQ,EAAE,GAAG,EAAC,CAAC,EAA7B,CAA6B;SAC3D,CAAC;;IAMN,CAAC;IALG,uBAAM,GAAN;QACI,YAAY;QACZ,IAAI,CAAC,MAAM,GAAG,CAAC,MAAM,CAAA,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IACL,aAAC;AAAD,CAAC,AAfD,CAAqB,gBAAS,GAe7B;AAEO,wBAAM"}
\ No newline at end of file

dist/index.jsx

@@ -36,10 +36,33 @@ var Item = /** @class */ (function (_super) {
     };
     return Item;
 }(Rjsx_1.Component));
+var UIComponent = /** @class */ (function (_super) {
+    __extends(UIComponent, _super);
+    function UIComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.def = {
+            disabled: false,
+            hidden: false,
+            label: {
+                position: 'top',
+                text: 'Label'
+            },
+            selected: false,
+            active: false,
+            empty: false,
+            placeholder: '',
+            style: {
+                size: 'normal',
+                margin: { top: '16px' }
+            }
+        };
+        return _this;
+    }
+    return UIComponent;
+}(Rjsx_1.Component));
 <div className='wrapper'>
-
     {item = <Item />}
-    {btn = <Button_1.Button onClick={function (a, b, c) {
+    {btn = <Button_1.Button onClick={function (e, b, c) {
     item.checkbox.set({ checked: !item.checkbox.state.checked });
 }}>text1<b>text2</b>{i = <i x="2">text3</i>}text4</Button_1.Button>}
     <Item />

dist/index.jsx.map

-{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
\ No newline at end of file

src/Rjsx.d.ts

-import {Reactivity} from "./Rjsx";
+import {Component, Reactivity} from "./Rjsx";
 
 export = Rjsx;
 export as namespace Rjsx;
@@ -52,7 +52,7 @@ declare namespace Rjsx {
         attributes: P;
         children: Array<VNode<any> | string>;
         key?: Key | null;
-        renderTo: Function
+        renderTo(el:HTMLElement):void;
     }
 
     type RenderableProps<P, RefType = any> = Readonly<
@@ -103,7 +103,7 @@ declare namespace Rjsx {
         forceUpdate(callback?: () => void): void;
 
         abstract render(props?: RenderableProps<P>, state?: Readonly<S>, context?: any): ComponentChild;
-        renderTo?(HTMLElement): void;
+        abstract renderTo(el: HTMLElement): void;
     }
 
     function h(
@@ -129,7 +129,7 @@ declare namespace Rjsx {
     };
 }
 
-/*
+
 type Defaultize<Props, Defaults> =
 	// Distribute over unions
 	Props extends any
@@ -138,15 +138,18 @@ type Defaultize<Props, Defaults> =
 			// Include the remaining properties from Props
 			& Pick<Props, Exclude<keyof Props, keyof Defaults>>
 		: never;
-*/
+
 
 declare global {
     namespace JSX {
-        /*interface Element extends Rjsx.VNode<any> {
+        interface Element extends Component<any> {
+            props: any;
         }
 
         interface ElementClass extends Rjsx.Component<any, any> {
-        }*/
+            props: any;
+
+        }
 
         interface ElementAttributesProperty {
             props: any;
@@ -154,12 +157,14 @@ declare global {
 
         interface ElementChildrenAttribute {
             children: any;
+            props: any;
+
         }
 
-        /*type LibraryManagedAttributes<Component, Props> =
+        type LibraryManagedAttributes<Component, Props> =
             Component extends { defaultProps: infer Defaults }
                 ? Defaultize<Props, Defaults>
-                : Props;*/
+                : Props;
 
         interface SVGAttributes extends HTMLAttributes {
             accentHeight?: number | string;

src/Rjsx.ts

@@ -183,18 +183,18 @@ const Predefined: {[key: string]: any} = {
         }
     }
 };
-class Component extends Reactive {
+class Component<T> extends Reactive {
     nodeName: string = null;
     el: HTMLElement|Text|any = null;
     def = {};
-    children: Component[] = null;
-    tree: TreeType = null;
-    setters: PropSettersInterface<Component> = {
+    children: Component<any>[] = null;
+    tree: Component<any> = null;
+    setters: PropSettersInterface<Component<T>> = {
         dangerouslySetInnerHTML: (_, htmlText) => _.el.innerHTML = htmlText,
         text: (_, val) => _.el.innerText = val
     };
 
-    render(): TreeType{
+    render(): Component<any>{
         this.el = document.createElement(this.nodeName);
         return this;
     }
@@ -214,7 +214,7 @@ class Component extends Reactive {
     renderTo(where: HTMLElement) {
         where.appendChild(this.el);
     }
-    addChild(child: Component) {
+    addChild(child: Component<any>) {
         child.renderTo(this.el);
         this.children.push(child);
     }
@@ -249,8 +249,11 @@ class Component extends Reactive {
     }
 }
 
+interface TextNodeProps {
+    value: string
+}
 
-class TextNode extends Component {
+class TextNode extends Component<TextNodeProps> {
     constructor(){
         super('TextNode');
     }

src/cmp/Button.tsx

-import {Component, h, PropSettersInterface} from '../Rjsx';
-
-class Button extends Component {
+import {Component, h, PropSettersInterface, EventHandler} from '../Rjsx';
+interface ButtonProps {
+    onClick: EventHandler<MouseEvent>
+}
+class Button extends Component<ButtonProps> {
     button: Component = null;
     def = {
         type: 'Button',

src/index.tsx

@@ -5,12 +5,12 @@ let i, btn, item;
 interface ItemProps {
     onClick: Function
 }
-class Item<ItemProps> extends Component {
-    checkbox: Component = null;
-    checkbox2: Component = null;
+class Item extends Component<ItemProps> {
+    checkbox: Component<any> = null;
+    checkbox2: Component<any> = null;
 
     render(){
-        let checkbox3: Component;
+        let checkbox3: Component<any>;
 
         return <div>
             {this.checkbox = <input disabled={false} type="checkbox"/>}<br/>
@@ -26,10 +26,70 @@ class Item<ItemProps> extends Component {
     }
 }
 
-<div className='wrapper'>
+type positionType = 'left'|'top'|'right'|'bottom';
+type sizeType = 'tiny'|'small'|'normal'|'big'|'large'|'enormous';
+
+interface UIComponentProps {
+    disabled?: boolean;
+    hidden?: boolean;
+
+    selected?: boolean;
+    active?: boolean;
+    empty?: boolean;
+
+    placeholder?: string;
+    label?: {
+        position?: positionType,
+        text?: string | (Component<any>|string)[],
+        hidden?: boolean
+    };
+    description?: {
+        position?: positionType,
+        text?: string | (Component<any>|string)[]
+    };
+    error?: {
+        position?: positionType,
+        text?: string | (Component<any>|string)[]
+    };
+    validation?: null | Function | RegExp;
+    type: Readonly<string>;
+    style?: {
+        font?: {
+            size?: sizeType | number;
+            family?: string;
+            color?: string
+        },
+        size?: sizeType,
+        margin?: {
+            top?: number | string,
+            left?: number | string,
+            right?: number | string,
+            bottom?: number | string,
+        }
+    }
+}
+class UIComponent extends Component<UIComponentProps> {
+    def: UIComponentProps = {
+        disabled: false,
+        hidden: false,
+        label: {
+            position: 'top',
+            text: 'Label'
+        },
+        selected: false,
+        active: false,
+        empty: false,
+        placeholder: '',
+        style: {
+            size: 'normal',
+            margin: {top: '16px'}
+        }
+    };
+}
 
+<div className='wrapper'>
     {item = <Item/>}
-    {btn = <Button onClick={function(a,b,c){
+    {btn = <Button onClick={function(e,b,c){
         item.checkbox.set({checked: !item.checkbox.state.checked})
     }}>text1<b>text2</b>{i = <i x="2">text3</i>}text4</Button>}
     <Item/>