{"action":"created","issue":{"url":"https://api.github.com/repos/tastejs/todomvc/issues/1178","labels_url":"https://api.github.com/repos/tastejs/todomvc/issues/1178/labels{/name}","comments_url":"https://api.github.com/repos/tastejs/todomvc/issues/1178/comments","events_url":"https://api.github.com/repos/tastejs/todomvc/issues/1178/events","html_url":"https://github.com/tastejs/todomvc/pull/1178","id":58470918,"number":1178,"title":"Add riot.js 2.0 example","user":{"login":"txchen","id":713074,"avatar_url":"https://avatars.githubusercontent.com/u/713074?v=3","gravatar_id":"","url":"https://api.github.com/users/txchen","html_url":"https://github.com/txchen","followers_url":"https://api.github.com/users/txchen/followers","following_url":"https://api.github.com/users/txchen/following{/other_user}","gists_url":"https://api.github.com/users/txchen/gists{/gist_id}","starred_url":"https://api.github.com/users/txchen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/txchen/subscriptions","organizations_url":"https://api.github.com/users/txchen/orgs","repos_url":"https://api.github.com/users/txchen/repos","events_url":"https://api.github.com/users/txchen/events{/privacy}","received_events_url":"https://api.github.com/users/txchen/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/tastejs/todomvc/labels/needs-review","name":"needs-review","color":"0052cc"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":7,"created_at":"2015-02-21T19:12:08Z","updated_at":"2015-03-13T10:36:46Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/tastejs/todomvc/pulls/1178","html_url":"https://github.com/tastejs/todomvc/pull/1178","diff_url":"https://github.com/tastejs/todomvc/pull/1178.diff","patch_url":"https://github.com/tastejs/todomvc/pull/1178.patch"},"body":"This is new implementaion using riotjs 2.0 https://github.com/muut/riotjs\r\n\r\nRiotjs is like react, but its size is much smaller. V2 was released about one month ago, and now it already has more than 5400 stars. Also, muut claims that they are using riot in their production code so we can consider it's already ready for real product.\r\n\r\nRiot has the tag concept: https://muut.com/riotjs/guide/#tag-syntax, which is like react's jsx, but more like html instead of js. Riot compiler is like jsx-transformer, since its size is also tiny, we can use it in the page and compile the tag on the fly.\r\n\r\nThis implementation is using the compiler on the page, the main html and js logic is all in `todo.html`.\r\n\r\nI have manually compiled todo.html to todo.js using riot compiler, and ran `jshint` to ensure there is no error.\r\n\r\nThe current implementation cannot pass the browser test because the dom structure is a little different, riot would generate extra root element for tag, the structure would become:\r\n\r\n```html\r\n<ul id=\"todo-list\">\r\n  <todoitem>\r\n    <li>todo item 1...</li>\r\n  </todoitem>\r\n  <todoitem>\r\n    <li>todo item 2...</li>\r\n  </todoitem>\r\n</ul>\r\n```\r\n\r\nRiotjs team is actively trying to find a solution on this issue. \r\n\r\nI manually changed the test code like this:\r\n```diff\r\ndiff --git a/browser-tests/page.js b/browser-tests/page.js\r\nindex 08ee347..e46ce4d 100644\r\n--- a/browser-tests/page.js\r\n+++ b/browser-tests/page.js\r\n@@ -15,12 +15,12 @@ module.exports = function Page(browser) {\r\n        };\r\n\r\n        this.getTodoListXpath = function () {\r\n-               return '//ul[@id=\"todo-list\"]';\r\n+               return '//ul[@id=\"todo-list\"]/todoitem';\r\n        };\r\n\r\n        this.xPathForItemAtIndex = function (index) {\r\n                // why is XPath the only language silly enough to be 1-indexed?\r\n-               return this.getTodoListXpath() + '/li[' + (index + 1) + ']';\r\n+               return this.getTodoListXpath() + '[' + (index + 1) + ']' + '/li';\r\n        };\r\n\r\n        // ----------------- navigation methods\r\n```\r\n\r\nThen all the test cases except these 3 can pass:\r\n* should display the number of completed items\r\n* should remove completed items when clicked\r\n* should be hidden when there are no items that are completed\r\n\r\nI think these 3 are known issues because of the new css,  #1110 \r\nIn another word, this implementation is actually totally working, and once the dom structure issue is solved, all the browser-tests can pass.\r\n\r\nAt @tipiirai who is the author of riotjs, FYI. "},"comment":{"url":"https://api.github.com/repos/tastejs/todomvc/issues/comments/78909681","html_url":"https://github.com/tastejs/todomvc/pull/1178#issuecomment-78909681","issue_url":"https://api.github.com/repos/tastejs/todomvc/issues/1178","id":78909681,"user":{"login":"tipiirai","id":169330,"avatar_url":"https://avatars.githubusercontent.com/u/169330?v=3","gravatar_id":"","url":"https://api.github.com/users/tipiirai","html_url":"https://github.com/tipiirai","followers_url":"https://api.github.com/users/tipiirai/followers","following_url":"https://api.github.com/users/tipiirai/following{/other_user}","gists_url":"https://api.github.com/users/tipiirai/gists{/gist_id}","starred_url":"https://api.github.com/users/tipiirai/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tipiirai/subscriptions","organizations_url":"https://api.github.com/users/tipiirai/orgs","repos_url":"https://api.github.com/users/tipiirai/repos","events_url":"https://api.github.com/users/tipiirai/events{/privacy}","received_events_url":"https://api.github.com/users/tipiirai/received_events","type":"User","site_admin":false},"created_at":"2015-03-13T10:36:46Z","updated_at":"2015-03-13T10:36:46Z","body":"@samccone you can see the flesh of the implementation on this [single html file](https://github.com/txchen/todomvc/blob/riotjs/examples/riotjs/js/todo.html). I think it demonstrates Riot capabilities and simplicity pretty well.\r\n\r\nTwo custom tags are used with related layout and logic sitting on a same module and you can understand what the program does by reading the source code. No redundant boilerplate on your way. \r\n\r\n"}}