test.ts

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);