https://github.com/luwes/sinuous-todomvc

TodoMVC implemented in Sinuous ~ 2.9kB gzip
https://github.com/luwes/sinuous-todomvc

sinuous todomvc

Last synced: 14 days ago
JSON representation

TodoMVC implemented in Sinuous ~ 2.9kB gzip

• Host: GitHub
• URL: https://github.com/luwes/sinuous-todomvc
• Owner: luwes
• Created: 2019-08-24T17:09:47.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-28T15:39:42.000Z (about 1 year ago)
• Last Synced: 2024-10-06T08:42:16.592Z (about 1 month ago)
• Topics: sinuous, todomvc
• Language: JavaScript
• Homepage: https://luwes.github.io/sinuous-todomvc/
• Size: 325 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Sinuous TodoMVC

[Sinuous](https://github.com/luwes/sinuous/) implementation of the [TodoMVC](http://todomvc.com/) example application.  

[luwes.github.io/sinuous-todomvc](https://luwes.github.io/sinuous-todomvc).

The entire app weighs 2.9kb gzip.

```js

import { h } from 'sinuous';

import { map } from 'sinuous/map';

import { addTodo, clearCompleted, completed, displayed, doneEditing, editing,

  filter, remaining, remove, save, todos, toggle, toggleAll } from './controller.js';

import { cx, focus } from './utils.js';

const TodoApp = () => html`

  

    
todos

    

  


   !todos().length}>

     !remaining().length}

    />

    Mark all as complete

    


      ${map(displayed, ({ id, title, completed }) => html`

        
 cx({ completed: completed(), editing: editing() === id })}>

          


             toggle(e, id)}

            />

             editing(id)}>${title}

             remove(id)}>

          

          ${() => editing() === id && focus(html`

             save(e, id)}

              onkeyup=${e => doneEditing(e, id)}

            />`)

          }

        

      `)}

    


    

      

        ${() => remaining().length}

        ${() => remaining().length === 1 ? ' item' : ' items'} left

      

      


        
 cx({ selected: filter() === 'all' })} href="#/">All

        
 cx({ selected: filter() === 'active' })} href="#/active">Active

        
 cx({ selected: filter() === 'completed' })} href="#/completed">Completed

      

      ${() => completed().length > 0 && html`

        

          Clear completed

        

      `}

    

  

`;


const updateView = () => filter(location.hash.slice(2) || 'all');

window.addEventListener('hashchange', updateView);

updateView();

document.querySelector('.todoapp').append(TodoApp());

```