{"action":"created","issue":{"url":"https://api.github.com/repos/tunnckoCore/ideas/issues/71","repository_url":"https://api.github.com/repos/tunnckoCore/ideas","labels_url":"https://api.github.com/repos/tunnckoCore/ideas/issues/71/labels{/name}","comments_url":"https://api.github.com/repos/tunnckoCore/ideas/issues/71/comments","events_url":"https://api.github.com/repos/tunnckoCore/ideas/issues/71/events","html_url":"https://github.com/tunnckoCore/ideas/issues/71","id":206588140,"number":71,"title":"mich - Virtual DOM Builder, parser, renderer and diffing","user":{"login":"tunnckoCore","id":5038030,"avatar_url":"https://avatars.githubusercontent.com/u/5038030?v=3","gravatar_id":"","url":"https://api.github.com/users/tunnckoCore","html_url":"https://github.com/tunnckoCore","followers_url":"https://api.github.com/users/tunnckoCore/followers","following_url":"https://api.github.com/users/tunnckoCore/following{/other_user}","gists_url":"https://api.github.com/users/tunnckoCore/gists{/gist_id}","starred_url":"https://api.github.com/users/tunnckoCore/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tunnckoCore/subscriptions","organizations_url":"https://api.github.com/users/tunnckoCore/orgs","repos_url":"https://api.github.com/users/tunnckoCore/repos","events_url":"https://api.github.com/users/tunnckoCore/events{/privacy}","received_events_url":"https://api.github.com/users/tunnckoCore/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":14,"created_at":"2017-02-09T18:22:16Z","updated_at":"2017-02-19T13:06:40Z","closed_at":null,"body":"Built on [HAST](https://github.com/syntax-tree/hast) - **H**ypertext **A**bstract **S**yntax **T**ree format.\r\n\r\n## [mich-parse-selector](https://github.com/tunnckoCore/mich-parse-selector) ~250 bytes gzip+min\r\n> Parses simple (id, class, tag name) string to a HAST node\r\n\r\n```js\r\nvar parse = require('mich-parse-selector')\r\n\r\n// if tag name not given, defaults to `div`\r\nvar node = parse('div.foo#page.bar.quxie-sea.btn')\r\n\r\nconsole.log(node)\r\n// node.properties.className: [ 'foo', 'bar', 'quxie-sea', 'btn']\r\n// node.properties.id: 'page'\r\n```\r\n\r\n\r\n## [mich-h](https://github.com/tunnckoCore/mich-h) ~500 bytes gzip+min\r\n> Uses `-parse-selector` and in addition handles `properties/attributes` and `childrens` so it can be used as `hyperscript` or any other `h` implementation, finally it gives you AST - specifically HAST tree of object nodes. **It is fully compatible with `hyperscript`**\r\n\r\n```js\r\nvar h = require('mich-h')\r\nvar tree = h('div#page',\r\n  h('#header', // if tag name is not given, defaults to `div`\r\n    h('h1.classy', { style: {'background-color': '#333'} })),\r\n  h('nav#menu', { style: {'background': '#2f2'} },\r\n    h('ul',\r\n      h('li', 'one'),\r\n      h('li', 'two'),\r\n      h('li', 'three'))),\r\n  h('h2#title', 'content title',  { style: {'background-color': 'red'} }),\r\n  h('p.first', // classes of that `p` would be `first, foobie, quxie`\r\n    { className: 'foobie' },\r\n    \"so it's just like a templating engine,\\n\",\r\n    { class: 'quxie' },\r\n    \"but easy to use inline with javascript\\n\",\r\n    { onclick: () => {} }\r\n  ),\r\n  h('p',\r\n    \"the intention is for this to be used to create\\n\",\r\n    h('strong', 'charlike', { style: 'background: white; color: green' }),\r\n    \" reusable, interactive html widgets. \"))\r\n\r\nconsole.log(tree)\r\n```\r\n\r\n## [mich-to-html](https://github.com/tunnckoCore/mich-to-html) ~420 bytes\r\n> Gets an AST (HAST) tree and compiles it to html string, perfect for server-side rendering (SSR), excluding the events\r\n\r\n```js\r\nvar toHtml = require('mich-to-html')\r\nvar htmlString = toHtml(tree)\r\n\r\nconsole.log(htmlString)\r\n```\r\n\r\noutputs\r\n\r\n```html\r\n<div id=\"page\">\r\n  <div id=\"header\">\r\n    <h1 class=\"classy\" style=\"background-color: #333;\"></h1>\r\n  </div>\r\n  <nav id=\"menu\" style=\"background: #2f2;\">\r\n    <ul>\r\n      <li>one</li>\r\n      <li>two</li>\r\n      <li>three</li>\r\n    </ul>\r\n  </nav>\r\n  <h2 id=\"title\" style=\"background-color: red;\">content title</h2>\r\n  <p class=\"foobie\">so it's just like a templating engine,\r\n  but easy to use inline with javascript</p>\r\n  <p>the intention is for this to be used to create <strong>charlike</strong> reusable,\r\n  interactive html widgets.</p>\r\n</div>\r\n```\r\n\r\n## `mich-to-dom`\r\n> Gets an AST (HAST) and creates real DOM tree from it\r\n\r\n## `mich-morph` - based on Facebook Reconciliation algorithm\r\n> not sure for the name, but ... gets 2 AST trees and makes a diffing then patch\r\n\r\n## `mich`\r\n> Gets a tree, makes a diff / patch (apply plugins), renders to dom/html"},"comment":{"url":"https://api.github.com/repos/tunnckoCore/ideas/issues/comments/280917916","html_url":"https://github.com/tunnckoCore/ideas/issues/71#issuecomment-280917916","issue_url":"https://api.github.com/repos/tunnckoCore/ideas/issues/71","id":280917916,"user":{"login":"tunnckoCore","id":5038030,"avatar_url":"https://avatars.githubusercontent.com/u/5038030?v=3","gravatar_id":"","url":"https://api.github.com/users/tunnckoCore","html_url":"https://github.com/tunnckoCore","followers_url":"https://api.github.com/users/tunnckoCore/followers","following_url":"https://api.github.com/users/tunnckoCore/following{/other_user}","gists_url":"https://api.github.com/users/tunnckoCore/gists{/gist_id}","starred_url":"https://api.github.com/users/tunnckoCore/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tunnckoCore/subscriptions","organizations_url":"https://api.github.com/users/tunnckoCore/orgs","repos_url":"https://api.github.com/users/tunnckoCore/repos","events_url":"https://api.github.com/users/tunnckoCore/events{/privacy}","received_events_url":"https://api.github.com/users/tunnckoCore/received_events","type":"User","site_admin":false},"created_at":"2017-02-19T13:06:40Z","updated_at":"2017-02-19T13:06:40Z","body":"**monorepo**\r\n\r\n- mich\r\n- mich-to-html\r\n- mich-render\r\n- mich-component\r\n- mich-nanomorph\r\n- mich-mount\r\n- mich-parse-selector\r\n- mich-util-merge"}}
{"actor":{"display_login":"tunnckoCore"}}