Re: document.register and ES6

Yes, it's not intended to work in IE ... I used __proto__.


On Wed, Feb 6, 2013 at 12:41 PM, Daniel Buchner <daniel@mozilla.com> wrote:

> Scott: is this example not intended to work in IE9? It throws, the output
> object is missing the 'oranginate' method.
>
> Daniel J. Buchner
> Product Manager, Developer Ecosystem
> Mozilla Corporation
>
>
> On Wed, Feb 6, 2013 at 12:32 PM, Scott Miles <sjmiles@google.com> wrote:
>
>> There were several errors in my pseudo-code, here is a working version:
>>
>> http://jsfiddle.net/yNbnL/1/
>>
>> S
>>
>>
>> On Wed, Feb 6, 2013 at 12:01 PM, Scott Miles <sjmiles@google.com> wrote:
>>
>>> Errata:
>>>  makePrototypeTwiddlingConstructorForDomNodes needs to know the extendee
>>>
>>>  var ctor = makePrototypeTwiddlingConstructorForDomNodes(inExtends,
>>> inClass);
>>>
>>>
>>> On Wed, Feb 6, 2013 at 11:59 AM, Scott Miles <sjmiles@google.com> wrote:
>>>
>>>> On Wed, Feb 6, 2013 at 11:18 AM, Erik Arvidsson <arv@chromium.org>wrote:
>>>>
>>>>> On Wed, Feb 6, 2013 at 1:38 PM, Scott Miles <sjmiles@google.com>
>>>>> wrote:
>>>>> > Sorry, replace MyButton.super() with MyButton.super.call(this);
>>>>> >
>>>>> >
>>>>> > On Wed, Feb 6, 2013 at 10:37 AM, Scott Miles <sjmiles@google.com>
>>>>> wrote:
>>>>> >>
>>>>> >> So, neglecting issues around the syntax of document.register and the
>>>>> >> privatization of callbacks, is it fair to say the following is the
>>>>> intended
>>>>> >> future:
>>>>> >>
>>>>> >> class MyButton extends HTMLButtonElement {
>>>>> >>   constructor() {
>>>>> >>     super();
>>>>> >>     // make root, etc.
>>>>> >>   }
>>>>> >> }
>>>>> >> document.register('x-button', MyButton);
>>>>> >>
>>>>> >> If so then can we do this in the present:
>>>>> >>
>>>>> >> MyButtonImpl = function() {
>>>>>
>>>>> What do you mean here?
>>>>>
>>>>> >>   MyButton.super();
>>>>>
>>>>> Did you get that backwards? I don't see how MyButtonImpl can be
>>>>> derived from MyButton.
>>>>>
>>>>
>>>> Its not. The 'super' means 'the super-class constructor for MyButton
>>>> that does not include magic DOM object generation' (in this case,
>>>> HTMLButtonElement). For MyDerivedButton, MyDerivedButton.super would point
>>>> to MyButtonImpl.
>>>>
>>>> The existence of MyButtonImpl is an unfortunate side-effect of needing
>>>> a generated constructor.
>>>>
>>>> The idea is to correspond as closely as possible with the ES6
>>>> version. MyButtonImpl goes away in ES6, it's purpose in the meantime is
>>>> just to provide something that looks like a proper class.
>>>>
>>>> I could write it this way:
>>>>
>>>> *MyButton = function() {
>>>>
>>>>   MyButton.super();
>>>>   // make root, etc.
>>>> };
>>>> MyButton.prototype = Object.create(HTMLButtonElement, { ... });*
>>>> *
>>>> MyButton = document.register(‘x-button’, MyButton);
>>>> *
>>>>
>>>> Written this way, MyButton no longer refers to the constructor you
>>>> specified, but instead refers to the generated constructor. This is
>>>> conceptually cleaner, but it's a bit tricky. For maximum clarity, I named
>>>> the internal version MyButtonImpl in my example code, but there is no
>>>> reason to have that symbol.
>>>>
>>>>
>>>>>
>>>>> >>   // make root, etc.
>>>>> >> };
>>>>> >> MyButtonImpl.prototype = Object.create(HTMLButtonElement, { ... });
>>>>> >>
>>>>> >> // the ‘real’ constructor comes from document.register
>>>>> >> // register injects ‘super’ into MyButton
>>>>> >> MyButton = document.register(‘x-button’, MyButtonImpl);
>>>>>
>>>>> What is the relationship between MyButton and MyButtonImpl?
>>>>>
>>>>> If MyButton.__proto__ === MyButtonImpl and
>>>>> MyButton.prototype.__proto__ === MyButtonImpl.prototype then this
>>>>> might work (but this cannot be polyfilled either).
>>>>>
>>>>>
>>>> MyButton.prototype == MyButtonImpl.prototype or
>>>> MyButton.prototype.__proto__ == MyButtonImpl.prototype, depending on needs.
>>>>
>>>> MyButton itself does magic DOM construction work that we cannot do with
>>>> normal inheritance, then invokes MyButtonImpl. MyButtonImpl is never used
>>>> as a constructor itself (not as an argument to 'new' anyway).
>>>>
>>>> From the user's perspective, he has made a single class which
>>>> implements his element (the goal!). The unfortunate name shenanigan (I
>>>> called my class MyButtonImpl, but after 'register' I refer to it as
>>>> MyButton) is the simplest way I could conceive to overcome the 'generated
>>>> constructor' problem.
>>>>
>>>> To be clear, everything I come up with is intended to polyfill (modulo
>>>> my error), because I generally am writing those myself (at first anyway).
>>>> One version might look like this:
>>>>
>>>> document.register = function(inExtends, inClass) {
>>>>   var ctor = makePrototypeTwiddlingConstructorForDomNodes(inClass);
>>>>   ctor.prototype = inClass.prototype;
>>>>   addToTagRegistry(inExtends, ctor, inClass);
>>>>   ctor.super = getClassForExtendee(inExtends);
>>>>   return ctor;
>>>> };
>>>>
>>>>
>>>> --
>>>>> erik
>>>>>
>>>>
>>>>
>>>
>>
>