Skip to content

R
reactive
Commit 727e5804 by Иван Кубота
Options

wip

parent 78d40225
Showing with 124 additions and 31 deletions
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"}
\ No newline at end of file
{"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":";;;;;;;;;;;;;;;AAAA,uCAAoC;AACpC,+BAAuC;AACvC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC;AAKjB;IAA8B,wBAAS;IAAvC;QAAA,qEAmBC;QAlBG,cAAQ,GAAc,IAAI,CAAC;QAC3B,eAAS,GAAc,IAAI,CAAC;;IAiBhC,CAAC;IAfG,qBAAM,GAAN;QACI,IAAI,SAAoB,CAAC;QAEzB,OAAO,CAAC,GAAG,CACP;YAAA,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAA,EAC9D;mBAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,QAAC,CAAC,cAAI,OAAA,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,EAAvB,CAAuB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAA,EACzD;YAAA,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAA,EAC9C;YAAA,CAAC,SAAS,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,QAAC,CAC1C,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,EAC5B,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,SAAS,CAAC,EAC3B,UAAC,EAAE,EAAC,EAAE,IAAG,OAAA,CAAC,CAAC,CAAC,EAAE,GAAC,EAAE,CAAC,EAAT,CAAS,CACrB,CAAC,EAAE,CAAC,CAAC,EAAE,CAAA,EACR;YAAA,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAC,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAA,EAAE,CAAC,EAAE,CAAA,EAAE,CAAC,EAAE,CAAA,EAAE,CAAC,EAAE,CAAA,EAC7F;QAAA,EAAE,GAAG,CAAC,CAAC;IACX,CAAC;IACL,WAAC;AAAD,CAAC,AAnBD,CAA8B,gBAAS,GAmBtC;AAED,CAAC,GAAG,CAAC,SAAS,CAAC,SAAS,CAEpB;;IAAA,CAAC,IAAI,GAAG,CAAC,IAAI,CAAA,EAAE,CACf;IAAA,CAAC,GAAG,GAAG,CAAC,eAAM,CAAC,OAAO,CAAC,CAAC,UAAS,CAAC,EAAC,CAAC,EAAC,CAAC;IAClC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAC,OAAO,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAC,CAAC,CAAA;AAC9D,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,eAAM,CAAC,CAC1D;IAAA,CAAC,IAAI,CAAA,EACL;IAAA,CAAC,IAAI,CAAC,AAAD,EACT;AAAA,EAAE,GAAG,CAAC,CAAA;AAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAE/B,IAAI,OAAO,GAAG,CAAC,CAAC;AAChB,WAAW,CAAC;IACR,CAAC,CAAC,GAAG,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,EAAC,CAAC,CAAC;IACzB,GAAG,CAAC,GAAG,CAAC,EAAC,QAAQ,EAAE,OAAO,GAAC,CAAC,KAAG,CAAC,EAAC,CAAC,CAAC;IACnC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAC,OAAO,EAAE,OAAO,GAAC,CAAC,KAAG,CAAC,EAAC,CAAC,CAAC;IAC5C,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAC,OAAO,EAAE,OAAO,GAAC,CAAC,GAAC,CAAC,EAAC,CAAC,CAAC;AAC/C,CAAC,EAAE,IAAI,CAAC,CAAC;AAET,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC"}
\ No newline at end of file
{"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/>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment