Skip to content

Instantly share code, notes, and snippets.

@robwormald
Created Jan 15, 2018
Embed
What would you like to do?
import * as ng from '@angular/platform'
function todoAppState(state = {todos: [1,2,3]}, action = {type:''}){
switch (action.type) {
case 'ADD_TODO':
return {
todos: state.todos.concat((action as any).payload),
...state
}
default:
return state;
}
}
const todos = [1, 2, 3]
const TodoApp = ng.defineElement({
selector: 'todo-app',
shadow: true,
templateFn(ctx, cm){
if(cm){
ng.E(0, 'link', ['rel','stylesheet','href', 'todo-app.css', 'type', 'text/css']); ng.e();
ng.E(1, 'h3');
ng.T(2, 'Todo App');
ng.e();
ng.E(3, 'todo-input');
ng.e();
ng.E(4, 'todo-list');
ng.e();
}
ng.p(4, 'todos', ng.b(todos));
},
});
const TodoInput = ng.defineElement({
selector: 'todo-input',
shadow: true,
templateFn(ctx, cm){
if(cm){
ng.E(0, 'input', ['type', 'text']);
ng.e();
}
ng.p(0, 'value', ng.b(''))
},
host: {
properties: {}
}
});
const TodoList = ng.defineElement({
selector: 'todo-list',
shadow: true,
host: {
properties: {
todos: 'todos'
}
},
templateFn(ctx, cm){
if(cm){
ng.E(0, 'ul');
ng.C(1, [ng.NgRepeat], List);
ng.e();
}
ng.p(1, 'data', ng.b(ctx.todos));
ng.cR(1);{
console.log('container refersh')
ng.NgRepeat.ngDirectiveDef.r(2, 0);
} ng.cr();
function List(ctx, cm){
if(cm){
ng.E(0, 'li');
ng.T(1);
ng.e();
}
ng.t(1, ng.b(ctx.$implicit));
}
}
});
customElements.define(TodoList.is, TodoList);
customElements.define(TodoInput.is, TodoInput)
customElements.define(TodoApp.is, TodoApp);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment