Skip to content

Instantly share code, notes, and snippets.

@voronianski
Last active November 25, 2016 16:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save voronianski/8e8b74861f299a672075ae155a86f444 to your computer and use it in GitHub Desktop.
Save voronianski/8e8b74861f299a672075ae155a86f444 to your computer and use it in GitHub Desktop.
esnextbin sketch
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<script src="https://unpkg.com/jsx-create-element@0.1.1/dist/jsx-create-element.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
// https://medium.com/@TheStrazz86/create-a-fully-reactive-ui-framework-with-javascript-proxies-and-virtual-dom-c6fb28253776#.r3vjhpygb
import { create, h, diff, patch } from 'virtual-dom';
const loggable = (target) => {
const loggingHandler = {
get: function (target,name) {
const value = target[name];
console.log(`getting ${name}: ${value}`);
return value;
},
set: function (target,name,value) {
console.log(`setting ${name}: ${value}`);
target[name] = value;
return true;
}
};
return new Proxy(target,loggingHandler);
};
const observable = ({target, listener}) => {
let observable;
const set = (target, name, value) => {
target[name] = value;
listener(observable);
return true;
};
const get = (target, name) => {
return Object.freeze(target[name]);
};
const handler = {
set,
get
};
observable = new Proxy(target, handler);
return observable;
};
let view;
let domNode;
const render = (state) => {
const children = [
state.list.map(t => h('li', {}, [t])),
h('button', {
onclick() {
state.list = [...state.list, 'more'];
}
}, '+ Add more')
];
return h('ul', {}, children);
};
const updateDom = (state) => {
const newView = render(state);
const patches = diff(view, newView);
view = newView;
domNode = patch(domNode, patches);
};
const initState = {
list: ['first','second']
};
const state = observable({
target: loggable(initState),
listener: updateDom
});
view = render(state);
domNode = create(view);
document.body.appendChild(domNode);
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"virtual-dom": "2.1.1",
"babel-runtime": "6.18.0"
}
}
'use strict';
var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
var _freeze = require('babel-runtime/core-js/object/freeze');
var _freeze2 = _interopRequireDefault(_freeze);
var _virtualDom = require('virtual-dom');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var loggable = function loggable(target) {
var loggingHandler = {
get: function get(target, name) {
var value = target[name];
console.log('getting ' + name + ': ' + value);
return value;
},
set: function set(target, name, value) {
console.log('setting ' + name + ': ' + value);
target[name] = value;
return true;
}
};
return new Proxy(target, loggingHandler);
}; // https://medium.com/@TheStrazz86/create-a-fully-reactive-ui-framework-with-javascript-proxies-and-virtual-dom-c6fb28253776#.r3vjhpygb
var observable = function observable(_ref) {
var target = _ref.target;
var listener = _ref.listener;
var observable = void 0;
var set = function set(target, name, value) {
target[name] = value;
listener(observable);
return true;
};
var get = function get(target, name) {
return (0, _freeze2.default)(target[name]);
};
var handler = {
set: set,
get: get
};
observable = new Proxy(target, handler);
return observable;
};
var view = void 0;
var domNode = void 0;
var render = function render(state) {
var children = [state.list.map(function (t) {
return (0, _virtualDom.h)('li', {}, [t]);
}), (0, _virtualDom.h)('button', {
onclick: function onclick() {
state.list = [].concat((0, _toConsumableArray3.default)(state.list), ['more']);
}
}, '+ Add more')];
return (0, _virtualDom.h)('ul', {}, children);
};
var updateDom = function updateDom(state) {
var newView = render(state);
var patches = (0, _virtualDom.diff)(view, newView);
view = newView;
domNode = (0, _virtualDom.patch)(domNode, patches);
};
var initState = {
list: ['first', 'second']
};
var state = observable({
target: loggable(initState),
listener: updateDom
});
view = render(state);
domNode = (0, _virtualDom.create)(view);
document.body.appendChild(domNode);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment