<div dir="ltr"><div>> <span class="gmail-im"></span>To "polyfill" an idea I have for DOM, to propose it later, etc.<br><br></div>You can consider something like this depending on your needs: <a href="https://gist.github.com/Ginden/03004e52b3d331e236b5256e3b4c08ff">https://gist.github.com/Ginden/03004e52b3d331e236b5256e3b4c08ff</a><br>
</div><div class="gmail_extra"><br><div class="gmail_quote">On Tue, Oct 24, 2017 at 7:47 PM, /#!/JoePea <span dir="ltr"><<a href="mailto:joe@trusktr.io" target="_blank">joe@trusktr.io</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">@Michał<br>
<span class=""><br>
> But why do you need this?<br>
<br>
</span>To "polyfill" an idea I have for DOM, to propose it later, etc.<br>
<br>
@Logan<br>
<span class=""><br>
> Why not store your data separately in a WeakMap and rather than injecting properties onto existing objects? Then you can initialize the stored data on first access of the data you want.<br>
<br>
</span>I thought about that, it seems like the only way, but was curious to<br>
see about the the during-construction way if possible.<br>
<br>
@Andrea<br>
<br>
But this one doesn't work:<br>
<br>
```js<br>
window.Element = class extends Element {<br>
<span class="im HOEnZb">  constructor() {<br>
    super();<br>
    console.log('hello darkness my old friend');<br>
  }<br>
};<br>
<br>
// then ...<br>
class MyEl extends HTMLElement {}<br>
customElements.define('my-el', MyEl);<br>
<br>
new MyEl;<br>
```<br>
<br>
</span><span class="HOEnZb"><font color="#888888">/#!/JoePea<br>
</font></span><div class="HOEnZb"><div class="h5"><br>
<br>
On Tue, Oct 24, 2017 at 10:36 AM, Andrea Giammarchi<br>
<<a href="mailto:andrea.giammarchi@gmail.com">andrea.giammarchi@gmail.com</a>> wrote:<br>
> I know I'm going to regret this already, but since I've secretly played with<br>
> polyfills, you can still do this:<br>
><br>
> ```js<br>
> window.HTMLElement = class extends HTMLElement {<br>
>   constructor() {<br>
>     super();<br>
>     console.log('hello darkness my old friend');<br>
>   }<br>
> };<br>
><br>
> // then ...<br>
> class MyEl extends HTMLElement {}<br>
> customElements.define('my-el', MyEl);<br>
><br>
> new MyEl;<br>
> ```<br>
><br>
> Regards<br>
><br>
><br>
><br>
> On Tue, Oct 24, 2017 at 2:32 PM, Logan Smyth <<a href="mailto:loganfsmyth@gmail.com">loganfsmyth@gmail.com</a>> wrote:<br>
>><br>
>> Given that these are constructors that you don't own, adding your own<br>
>> properties to them seems like an overall ugly approach to me. Why not store<br>
>> your data separately in a WeakMap and rather than injecting properties onto<br>
>> existing objects? Then you can initialize the stored data on first access of<br>
>> the data you want.<br>
>><br>
>> On Tue, Oct 24, 2017 at 10:25 AM, /#!/JoePea <<a href="mailto:joe@trusktr.io">joe@trusktr.io</a>> wrote:<br>
>>><br>
>>> Well, I know I can set accessors on a prototype easily, but what I<br>
>>> mean is, I need each instance of an `Element` to have exactly one<br>
>>> instance of something right after construction during the same<br>
>>> synchronous operation.<br>
>>><br>
>>> For example, if we have an application with a bunch of pre-existing<br>
>>> Elements that do not extend from any classes of mine, I'd like for the<br>
>>> all to have `foo` properties, so that I can do this:<br>
>>><br>
>>> ```js<br>
>>> const el = new SomeCustomElementThatWasDefine<wbr>dCreatedByMe<br>
>>> console.log(el.foo) // it exists and is specific to the instance, not<br>
>>> a prototype property<br>
>>><br>
>>> // or<br>
>>><br>
>>> const div = document.createElement('div')<br>
>>> console.log(div.foo) // it exists and is specific to the instance, not<br>
>>> a prototype property<br>
>>> ```<br>
>>><br>
>>> Can this be done?<br>
>>> /#!/JoePea<br>
>>><br>
>>><br>
>>> On Tue, Oct 24, 2017 at 10:19 AM, /#!/JoePea <<a href="mailto:joe@trusktr.io">joe@trusktr.io</a>> wrote:<br>
>>> >> This feels like a problem similar to<br>
>>> >> <a href="https://esdiscuss.org/topic/block-scoped-prototype-extensions" rel="noreferrer" target="_blank">https://esdiscuss.org/topic/<wbr>block-scoped-prototype-<wbr>extensions</a><br>
>>> ><br>
>>> > @Boris, even if it were scoped, how do we monkey patch a<br>
>>> > *constructor*? By the way, for some reason your link to<br>
>>> > `<a href="https://esdiscuss.org/topic/block-scoped-prototype-extensions`" rel="noreferrer" target="_blank">https://esdiscuss.org/topic/<wbr>block-scoped-prototype-<wbr>extensions`</a> posted<br>
>>> > as `<a href="https://esdiscuss.org/topic/block`" rel="noreferrer" target="_blank">https://esdiscuss.org/topic/<wbr>block`</a> which is 404. If you can edit<br>
>>> > it it would help others not to stumble on a broken link.<br>
>>> ><br>
>>> >> if that would be possible, then everyone could just monkey patch<br>
>>> >> Object, right?<br>
>>> ><br>
>>> > But everyone can monkey patch the entire class already, aside from the<br>
>>> > constructor, by modifying the prototype. Obviously if someone returns<br>
>>> > something new from the constructor they might break everything, but it<br>
>>> > will be completely obvious and people then won't do that. The same<br>
>>> > applies with methods and properties, it is super easy to break entire<br>
>>> > applications monkey patching methods.<br>
>>> ><br>
>>> > ---<br>
>>> ><br>
>>> > So suppose I want to "polyfill" a concept. For example, I want all<br>
>>> > elements to have a new "foo" accessor after they've been constructed.<br>
>>> > Or for example, suppose `HTMLElement.prototype.style` and<br>
>>> > `SVGElement.prototype.style` didn't exist yet. How would I patch those<br>
>>> > in?<br>
>>> > /#!/JoePea<br>
>>> ><br>
>>> ><br>
>>> > On Tue, Oct 24, 2017 at 10:07 AM, Michał Wadas <<a href="mailto:michalwadas@gmail.com">michalwadas@gmail.com</a>><br>
>>> > wrote:<br>
>>> >> AFAIR DOM classes are not extensible by any means.<br>
>>> >><br>
>>> >><br>
>>> >><br>
>>> >> On 24 Oct 2017 6:51 pm, "/#!/JoePea" <<a href="mailto:joe@trusktr.io">joe@trusktr.io</a>> wrote:<br>
>>> >>><br>
>>> >>> Is it possible to monkey-patch an intermediate constructor of a<br>
>>> >>> built-in<br>
>>> >>> subclass?<br>
>>> >>><br>
>>> >>> For example, suppose I want all `Element` instances in a web app to<br>
>>> >>> have<br>
>>> >>> new instance properties, is there a way to monkey-patch the Element<br>
>>> >>> constructor so that when I make a custom element by extending a<br>
>>> >>> subclass of<br>
>>> >>> `Element` that the new logic will fire?<br>
>>> >>><br>
>>> >>> For example:<br>
>>> >>><br>
>>> >>> ```js<br>
>>> >>> // monkey-patch the Element constructor somehow so that it logs<br>
>>> >>> "patched<br>
>>> >>> in Element".<br>
>>> >>><br>
>>> >>> // then<br>
>>> >>> class FooBar extends HTMLElement {}<br>
>>> >>> customElement.define('foo-bar'<wbr>, FooBar)<br>
>>> >>> new FooBar // "patched in Element"<br>
>>> >>> ```<br>
>>> >>><br>
>>> >>> I tried<br>
>>> >>><br>
>>> >>> ```js<br>
>>> >>> const OldElement = window.Element<br>
>>> >>><br>
>>> >>> window.Element = function Element() {<br>
>>> >>>   const _this = new OldElement<br>
>>> >>>   console.log("patched in Element")<br>
>>> >>>   return _this<br>
>>> >>> }<br>
>>> >>><br>
>>> >>> window.Element.prototype = OldElement.prototype<br>
>>> >>> window.Element.prototype.<wbr>constructor = window.Element<br>
>>> >>><br>
>>> >>> class FooBar extends HTMLElement {}<br>
>>> >>> customElements.define('f-b', FooBar)<br>
>>> >>> new FooBar // does not log "patched in Element"<br>
>>> >>> ```<br>
>>> >>><br>
>>> >>> But when I make a new custom element, constructing it seems to use<br>
>>> >>> the old<br>
>>> >>> Element constructor, as if a non-global reference to the original<br>
>>> >>> constructor is kept inside a module so that modifying the global<br>
>>> >>> wouldn't<br>
>>> >>> have any effect.<br>
>>> >>><br>
>>> >>> Is there a way to monkey patch a constructor in the middle of a<br>
>>> >>> built-in<br>
>>> >>> prototype chain or to otherwise inject construction logic to base<br>
>>> >>> classes of<br>
>>> >>> existing class hierarchies?<br>
>>> >>><br>
>>> >>><br>
>>> >>> /#!/JoePea<br>
>>> >>><br>
>>> >>> ______________________________<wbr>_________________<br>
>>> >>> es-discuss mailing list<br>
>>> >>> <a href="mailto:es-discuss@mozilla.org">es-discuss@mozilla.org</a><br>
>>> >>> <a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer" target="_blank">https://mail.mozilla.org/<wbr>listinfo/es-discuss</a><br>
>>> >>><br>
>>> >><br>
>>> ______________________________<wbr>_________________<br>
>>> es-discuss mailing list<br>
>>> <a href="mailto:es-discuss@mozilla.org">es-discuss@mozilla.org</a><br>
>>> <a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer" target="_blank">https://mail.mozilla.org/<wbr>listinfo/es-discuss</a><br>
>><br>
>><br>
>><br>
>> ______________________________<wbr>_________________<br>
>> es-discuss mailing list<br>
>> <a href="mailto:es-discuss@mozilla.org">es-discuss@mozilla.org</a><br>
>> <a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer" target="_blank">https://mail.mozilla.org/<wbr>listinfo/es-discuss</a><br>
>><br>
><br>
______________________________<wbr>_________________<br>
es-discuss mailing list<br>
<a href="mailto:es-discuss@mozilla.org">es-discuss@mozilla.org</a><br>
<a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer" target="_blank">https://mail.mozilla.org/<wbr>listinfo/es-discuss</a><br>
</div></div></blockquote></div><br></div>