Re: document.register and ES6

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
>>>
>>
>>
>