Open
Description
Here is an exemple
<html>
<head>
<script src="/js/magery-compiler.js"></script>
<script src="/js/magery-patcher.js"></script>
<script src="/js/redux.js"></script>
<template data-tagname="app-title">
<h1>{{text}}</h1>
</template>
</head>
<body>
<app></app>
<script>
var components = MageryCompiler.compile('template');
// create a store
var store = Redux.createStore(function (state, action) {
if (typeof state === 'undefined') {
return {
title: "fuck mennn",
count: 0
};
}
switch (action.type) {
case 'INCREMENT':
return {count: state.count + 1};
case 'DECREMENT':
return {count: state.count - 1};
default:
return state;
}
});
var target = document.querySelector('app');
var handlers = {};
function render() {
console.log(store.getState())
components['app-title'](target, store.getState(), handlers);
}
// add event handlers using Magery
handlers.increment = function () {
store.dispatch({type: 'INCREMENT'});
};
handlers.decrement = function () {
store.dispatch({type: 'DECREMENT'});
};
// update the page when the store changes
store.subscribe(render);
// initial render
render();
</script>
</body>
</html>I've noticed that in the produced dom, the tree rendered by outside ouf the target
<html><head>
...
<template data-tagname="app-title">
<h1>{{text}}</h1>
</template>
</head>
<body>
<app-title>
<h1></h1>
</app-title><app></app>
<script>
...
</body></html>