Skip to content

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

proof

parent 727e5804
Showing with 426 additions and 8 deletions
.gitignore
node_modules
node_modules/*
.idea
.idea/*
\ No newline at end of file
.idea/*
dist/*
build0/bundle.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
build0/index.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<title>The Minimal React Webpack Babel Setup</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
\ No newline at end of file
dist/cmp/Button.jsx
......@@ -13,7 +13,7 @@ var __extends = (this && this.__extends) || (function () {
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var Rjsx_1 = require("../Rjsx");
var F_1 = require("../F");
var Button = /** @class */ (function (_super) {
__extends(Button, _super);
function Button() {
......@@ -35,6 +35,6 @@ var Button = /** @class */ (function (_super) {
return this.button;
};
return Button;
}(Rjsx_1.Component));
}(F_1.Component));
exports.Button = Button;
//# sourceMappingURL=Button.jsx.map
\ No newline at end of file
dist/cmp/Button.jsx.map
{"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
{"version":3,"file":"Button.jsx","sourceRoot":"","sources":["../../src/cmp/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,0BAAsE;AAItE;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,aAAS,GAe7B;AAEO,wBAAM"}
\ No newline at end of file
src/F.js 0 → 100644
import {PropertySetterInterface, PropSettersInterface} from "./Rjsx";
const byPass = a => a;
export const Reactivity = function(args) {
this.args = args;
};
Reactivity.prototype = {
args: [],
scope: null,
key: null,
fn: null,
emit: function() {
TaskManager.add(()=>{
this.scope.setKey(this.key, this.fn.apply(this.scope, this.args));
});
}
};
export const TaskManager = {
jobs: [],
active: false,
add: function(task) {
TaskManager.jobs.push(task);
if(!TaskManager.active) {
TaskManager.active = true;
requestAnimationFrame(TaskManager.work);
}
},
work: function() {
const jobs = TaskManager.jobs;
TaskManager.jobs = [];
TaskManager.active = false;
for (let i = 0, _i = jobs.length; i < _i; i++) {
jobs[i]();
}
}
};
export const R = function() {
const args = [];
const reactivity = new Reactivity(args);
for(let i = 0, _i = arguments.length === 1 ? arguments.length : arguments.length - 1; i < _i; i++){
const obj = arguments[i];
if(typeof obj === 'function'){
TaskManager.add(()=>{
const objResolved = obj();
objResolved.trigger = (val) => {
args[i] = val;
reactivity.emit();
};
args[i] = objResolved.value;
})
} else {
obj.trigger = (val) => {
args[i] = val;
reactivity.emit();
};
args[i] = obj.value;
}
}
if(arguments.length === 1){
reactivity.fn = byPass;
}else{
reactivity.fn = arguments[arguments.length-1];
}
return reactivity;
};
export const Reactive = function(cfg){
if(cfg === false) {
return;
}
this.state = cfg ? Object.create(cfg) : {};
this.subs = {};
};
Reactive.prototype = {
state: {},
subs: {},
setters: {},
fire: function (key, val, lastVal) {
if (key in this.subs) {
const subs = this.subs[key];
for (let i = 0, _i = subs.length; i < _i; i++) {
subs[i].call(this, this, val, lastVal);
}
}
},
on: function (key, fn) {
let FN, obj;// TODO unAny
if (arguments.length === 1) {
obj = {
value: key in this.state ? this.state[key] : void 0
};
FN = function (_, val, oldVal) {
obj.value = val;
obj.trigger && obj.trigger(val)
};
} else {
FN = fn;
}
(this.subs[key] || (this.subs[key] = [])).push(FN);
if (key in this.state)
FN.call(this, this, this.state[key]);
return obj;
},
set: function (obj) {
for (let key in obj)
this.setKey(key, obj[key]);
},
afterSetKey: function (key, val, lastVal) {
},
beforeSetKey: function (key, val, lastVal) {
return val;
},
setKey: function (key, val) {
const lastVal = this.state[key];
if (lastVal === val)
return null;
if (val instanceof Reactivity) {
val.scope = this;
val.key = key;
val.emit();
return true;
}
val = this.beforeSetKey(key, val, lastVal);
this.state[key] = val;
if (key in this.setters) {
if(typeof this.setters[key] === 'function'){
this.setters[ key ].call( this, this, val, lastVal );
}else{
}
} else {
this.afterSetKey(key, val, lastVal);
}
this.fire(key, val, lastVal);
return true;
}
};
const Predefined = {
input: {
onChange: function() {
this.set({checked: this.el.checked})
}
}
};
export const Component = function(tagName){
// TODO supER
Reactive.call(this);
this.children = [];
this.nodeName = tagName;
if(tagName in Predefined){
this.def = Predefined[tagName];
}
};
Component.prototype = new Reactive();
Object.assign(Component.prototype, {
nodeName: null,
el: null,
def: {},
children: null,
tree: null,
setters: {
dangerouslySetInnerHTML: (_, htmlText) => _.el.innerHTML = htmlText,
text: (_, val) => _.el.innerText = val
},
render: function () {
this.el = document.createElement(this.nodeName);
return this;
},
init: function () {
this.tree = this.render();
this.el = this.tree.el;
this.set(this.def);
},
renderTo: function (where) {
where.appendChild(this.el);
},
addChild: function (child) {
child.renderTo(this.el);
this.children.push(child);
},
beforeSetKey: function (key, val, lastVal) {
if (key.substr(0, 2) === 'on') {
return (e) => {
val.call(this, e)
};
} else {
return val;
}
},
afterSetKey: function (key, val, lastVal) {
if (this.el) {
if (key.substr(0, 2) === 'on') {
const eventName = key.toLowerCase().substr(2);
if (lastVal) {
this.el.removeEventListener(eventName, lastVal);
}
this.el.addEventListener(eventName, val);
} else {
//@ts-ignore
this.el[key] = val;
if (val === false) {
this.el.removeAttribute(key);
} else {
this.el.setAttribute(key, val);
}
}
}
}
});
Component.extend = function(name, cfg) {
const ctor = cfg.ctor || function() {
Component.call(this);
};
ctor.prototype = new Component();
const setters = Object.assign({}, ctor.prototype.setters, cfg.setters);
Object.assign(ctor.prototype, cfg);
ctor.prototype.setters = setters;
ctor.extend = Component.extend;
return ctor;
};
export const TextNode = Component.extend('TextNode', {
setters: {
value: (_, val)=>_.el.textContent = val
},
render: function(){
this.el = document.createTextNode('');
return this;
},
addChild: function (child) {
throw new Error('No children in text node');
}
});
export const h = function(ctor, props){
let obj;
if(typeof ctor==='string'){
obj = new Component(ctor);
}else {
obj = new ctor();
}
obj.init();
obj.set(props);
for(let i = 2; i < arguments.length; i++) {
const child = arguments[i];
if(typeof child === 'string' || typeof child === 'number'){
let textNode = new TextNode();
textNode.init();
textNode.set({value:child});
obj.addChild(textNode);
}else if(typeof child === 'function') {
obj.addChild(child());
}else{
obj.addChild(child);
}
}
return obj;
};
//export {Component, TextNode, h};
\ No newline at end of file
src/cmp/Button.tsx
import {Component, h, PropSettersInterface, EventHandler} from '../Rjsx';
import {Component, h, PropSettersInterface, EventHandler} from '../F';
interface ButtonProps {
onClick: EventHandler<MouseEvent>
}
......
src/index.jsx 0 → 100644
import {Button} from './cmp/Button';
import {h, R, Component} from './F';
let i, btn, item;
class Item extends Component {
checkbox = null;
checkbox2 = null;
render(){
let checkbox3;
return <div>
{this.checkbox = <input disabled={false} type="checkbox"/>}<br/>
Title: <input value={R(()=>checkbox3.on('checked'))}/><br/>
{this.checkbox2 = <input type="checkbox"/>}<br/>
{checkbox3 = <input type="checkbox" checked={R(
this.checkbox2.on('checked'),
this.checkbox.on('checked'),
(v1,v2)=>!!(v1^v2)
)}/>}<br/>
{<input type="checkbox" id="c4" checked={R(checkbox3.on('checked'))}/>}<br/><br/><br/><br/>
</div>;
}
}
let but = <i text={2}>1</i>;
class UIComponent extends Component {
def = {
disabled: false,
hidden: false,
label: {
position: 'top',
text: 'Label'
},
selected: false,
active: false,
empty: false,
placeholder: '',
style: {
size: 'normal',
margin: {top: '16px'}
}
};
setters = {
hidden: (_, val) => _.el.style.display = val ? 'block' : 'none'
}
}
class Input extends UIComponent {
def = {
value: null
}
}
class Check extends UIComponent {
setters = {
value: (_, val)=>{
_.check.el.checked = val
},
label: {
text: (_, val)=>_.label.el.innerText = val
}
};
getters = {
value: (_, val)=>_.check.el.checked
};
render(){
this.check = <input type="checkbox"/>;
this.check.on('click', ()=>{console.log('lalka')} );
this.label = <span>456</span>;
return <div>{this.check}{this.label}</div>
}
}
//R(()=>i.on('text'))
<div className='wrapper'>
<Check value={true} label={{text: 'Ti pidor'}}/>
<Check value={false}/>
{item = <Item/>}
{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/>
<Item />
{but}
</div>.renderTo(document.body);
let counter = 0;
setInterval(()=>{
i.set({text: counter++});
btn.set({disabled: counter%2===0});
item.checkbox.set({checked: counter%2===1});
item.checkbox2.set({checked: counter%4>1});
}, 1000);
setTimeout(()=>{
//debugger;
but.set({
text: R(but.on('text'), (v1)=>{
return (v1-0)+1
})
});
}, 100);
// Do not read after this line
console.log(btn);
webpack.config.js
module.exports = {
entry: './src/index.tsx',
entry: './src/index.jsx',
devtool: 'source-map',
module: {
rules: [
......
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