{"action":"created","issue":{"url":"https://api.github.com/repos/matthewp/haunted/issues/27","repository_url":"https://api.github.com/repos/matthewp/haunted","labels_url":"https://api.github.com/repos/matthewp/haunted/issues/27/labels{/name}","comments_url":"https://api.github.com/repos/matthewp/haunted/issues/27/comments","events_url":"https://api.github.com/repos/matthewp/haunted/issues/27/events","html_url":"https://github.com/matthewp/haunted/issues/27","id":377209999,"node_id":"MDU6SXNzdWUzNzcyMDk5OTk=","number":27,"title":"Make use of directives","user":{"login":"askbeka","id":3000474,"node_id":"MDQ6VXNlcjMwMDA0NzQ=","avatar_url":"https://avatars1.githubusercontent.com/u/3000474?v=4","gravatar_id":"","url":"https://api.github.com/users/askbeka","html_url":"https://github.com/askbeka","followers_url":"https://api.github.com/users/askbeka/followers","following_url":"https://api.github.com/users/askbeka/following{/other_user}","gists_url":"https://api.github.com/users/askbeka/gists{/gist_id}","starred_url":"https://api.github.com/users/askbeka/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/askbeka/subscriptions","organizations_url":"https://api.github.com/users/askbeka/orgs","repos_url":"https://api.github.com/users/askbeka/repos","events_url":"https://api.github.com/users/askbeka/events{/privacy}","received_events_url":"https://api.github.com/users/askbeka/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-11-04T23:55:49Z","updated_at":"2018-11-06T22:55:57Z","closed_at":null,"author_association":"NONE","body":"Most of the time application developers do not need shadowDom encapsulation, since they consume ready components and don't need custom elements for each reusable block of code, they can just create functions that return templates, but hooks will be used for sure.\r\n\r\nIn order to achieve this, lit-html directives could be used, and some internal base Element needs to be created with life cycle hooks, but would this mean creating React over lit-html?"},"comment":{"url":"https://api.github.com/repos/matthewp/haunted/issues/comments/436439625","html_url":"https://github.com/matthewp/haunted/issues/27#issuecomment-436439625","issue_url":"https://api.github.com/repos/matthewp/haunted/issues/27","id":436439625,"node_id":"MDEyOklzc3VlQ29tbWVudDQzNjQzOTYyNQ==","user":{"login":"Hypercubed","id":509946,"node_id":"MDQ6VXNlcjUwOTk0Ng==","avatar_url":"https://avatars1.githubusercontent.com/u/509946?v=4","gravatar_id":"","url":"https://api.github.com/users/Hypercubed","html_url":"https://github.com/Hypercubed","followers_url":"https://api.github.com/users/Hypercubed/followers","following_url":"https://api.github.com/users/Hypercubed/following{/other_user}","gists_url":"https://api.github.com/users/Hypercubed/gists{/gist_id}","starred_url":"https://api.github.com/users/Hypercubed/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Hypercubed/subscriptions","organizations_url":"https://api.github.com/users/Hypercubed/orgs","repos_url":"https://api.github.com/users/Hypercubed/repos","events_url":"https://api.github.com/users/Hypercubed/events{/privacy}","received_events_url":"https://api.github.com/users/Hypercubed/received_events","type":"User","site_admin":false},"created_at":"2018-11-06T22:55:57Z","updated_at":"2018-11-06T22:55:57Z","author_association":"NONE","body":"@matthewp Is `virtual` a lit-html directive somewhat equivalent to my withHooks directive?  If so would the following work:\r\n\r\n```js\r\nimport { virtual, useState } from '@matthewp/haunted';\r\nimport { render, html } from 'lit-html';\r\n\r\nconst Child = () => {\r\n  return html` ... `\r\n};\r\n\r\nconst Parent =() => {\r\n  return html`\r\n    <section>${virtual(Child)}</section>\r\n  `;\r\n};\r\n\r\nrender(virtual(Parent), document.body);\r\n```\r\n\r\nBTW... For my `withHooks` implementation I'm tying state to the `NodeParts` object.  By design `lit-html` uses the same `NodeParts` for a given DOM node for every render. "}}
{"actor":{"display_login":"Hypercubed"}}