{"action":"created","issue":{"url":"https://api.github.com/repos/shama/bel/issues/27","repository_url":"https://api.github.com/repos/shama/bel","labels_url":"https://api.github.com/repos/shama/bel/issues/27/labels{/name}","comments_url":"https://api.github.com/repos/shama/bel/issues/27/comments","events_url":"https://api.github.com/repos/shama/bel/issues/27/events","html_url":"https://github.com/shama/bel/issues/27","id":157771773,"number":27,"title":"Rendering issues when used with ES6 / prototypes","user":{"login":"arturi","id":1199054,"avatar_url":"https://avatars.githubusercontent.com/u/1199054?v=3","gravatar_id":"","url":"https://api.github.com/users/arturi","html_url":"https://github.com/arturi","followers_url":"https://api.github.com/users/arturi/followers","following_url":"https://api.github.com/users/arturi/following{/other_user}","gists_url":"https://api.github.com/users/arturi/gists{/gist_id}","starred_url":"https://api.github.com/users/arturi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/arturi/subscriptions","organizations_url":"https://api.github.com/users/arturi/orgs","repos_url":"https://api.github.com/users/arturi/repos","events_url":"https://api.github.com/users/arturi/events{/privacy}","received_events_url":"https://api.github.com/users/arturi/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":7,"created_at":"2016-05-31T21:11:50Z","updated_at":"2016-06-01T22:37:59Z","closed_at":null,"body":"Hey! Using `yo-yo` in a project with ES6 classes: we have Core and Plugins, and each plugin is inheriting from a Plugin class, which serves a boilerplate. Using `super` and `extend` keywords, which is relevant, because the issue goes away without those. Everything gets transpiled down to ES5 with Babel.\r\n\r\nSometimes `yo-yo` won’t render an element that was created in a `constructor` with `this`, like so:\r\n\r\n```\r\nimport yo from 'yo-yo'\r\n\r\nexport class Smth extends Plugin {\r\n  constructor (core, opts) {\r\n    super(core, opts)\r\n    this.strange = yo`<h1>this is strange 1</h1>`\r\n  }\r\n\r\n  render (state) {\r\n    const bla = yo`<h2>this is strange 2</h2>`\r\n    return yo`\r\n      <div class=\"wow-this-works\">\r\n        <input type=\"text\" value=\"hello\">\r\n        ${this.strange}\r\n        ${bla}\r\n      </div>\r\n    `\r\n  }\r\n\r\n  install () {\r\n    this.getTarget(this.opts.target, this, this.render)\r\n  }\r\n}\r\n```\r\n\r\n`<h1>this is strange 1</h1>` gets rendered while `<h2>this is strange 2</h2>` does not. If you move `this.strange` from the constructor to render function, it works. If you `console.log` the elements, they always show up in the console. Also, it works if you wrap `yo` call in a function, like `this.strange = function () { return yo'<h1>this is strange 1</h1>' }`\r\n\r\nAnd I would think it’s totally `this` and `class` issues, except — wait for it — when you replace `h2` with `h1`, it works. Different elements won’t render, but if two of the same are used — it works.\r\n\r\nHere is a diff of two transpiled examples: https://www.diffchecker.com/ngpc5whl (the one on the left works, the one on the right does not), and are screenshots:\r\n\r\n<img width=\"960\" alt=\"screen shot 2016-05-31 at 17 01 47\" src=\"https://cloud.githubusercontent.com/assets/1199054/15690573/1dffb1d4-2752-11e6-9a7a-c2cda513733a.png\">\r\n\r\n<img width=\"959\" alt=\"screen shot 2016-05-31 at 17 02 22\" src=\"https://cloud.githubusercontent.com/assets/1199054/15690574/1e01e4ea-2752-11e6-8457-d9d7ff79a2bb.png\">\r\n\r\nI thought maybe someone who wrote `bel` and knows internals will understand what’s going on here. Where should we even look? Sorry for complicated explanation and thanks in advance."},"comment":{"url":"https://api.github.com/repos/shama/bel/issues/comments/223146019","html_url":"https://github.com/shama/bel/issues/27#issuecomment-223146019","issue_url":"https://api.github.com/repos/shama/bel/issues/27","id":223146019,"user":{"login":"arturi","id":1199054,"avatar_url":"https://avatars.githubusercontent.com/u/1199054?v=3","gravatar_id":"","url":"https://api.github.com/users/arturi","html_url":"https://github.com/arturi","followers_url":"https://api.github.com/users/arturi/followers","following_url":"https://api.github.com/users/arturi/following{/other_user}","gists_url":"https://api.github.com/users/arturi/gists{/gist_id}","starred_url":"https://api.github.com/users/arturi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/arturi/subscriptions","organizations_url":"https://api.github.com/users/arturi/orgs","repos_url":"https://api.github.com/users/arturi/repos","events_url":"https://api.github.com/users/arturi/events{/privacy}","received_events_url":"https://api.github.com/users/arturi/received_events","type":"User","site_admin":false},"created_at":"2016-06-01T22:37:59Z","updated_at":"2016-06-01T22:37:59Z","body":"Sorry, could you pull now, this makes it “work”: https://github.com/transloadit/uppy/commit/9a2d81f8a485e0cd62e7cc92c8ae1a48f65f3a23\r\n\r\nSame tags show up, different don’t."}}
{"actor":{"display_login":"arturi"}}