Skip to content
This repository has been archived by the owner on Oct 7, 2020. It is now read-only.

Some V1 examples in README.md and in other sites not working ! #85

Closed
SerkanSipahi opened this issue Oct 16, 2016 · 18 comments
Closed

Some V1 examples in README.md and in other sites not working ! #85

SerkanSipahi opened this issue Oct 16, 2016 · 18 comments
Labels

Comments

@SerkanSipahi
Copy link

SerkanSipahi commented Oct 16, 2016

In Chrome Canary v56.0.2891.0 where is V1 ( natively ) available are the most examples with "extend native components" not working !

Example on README.md not working

// extends some different native constructor
class MyButton extends HTMLButtonElement {}

// define it specifying what's extending
customElements.define('my-button', MyButton, {extends: 'button'});

// append this in dom "<button is="my-button">click me</button>" not working

// creating with new not working
document.body.appendChild(
  new MyButton
).textContent = 'click me';

Error:

VM302:1 Uncaught TypeError: Illegal constructor
    at MyDom (<anonymous>:1:1)
    at <anonymous>:11:10

Same effect with examples (extend native components) on this sites not working

This was a minimal analysis !

My Question, whats going wrong and is v1 really ready for production?
Do you think the Polyfill mirror the spec (W3C Working Draft)? and i think the spec not behave as expected!

@WebReflection
Copy link
Owner

My Question, whats going wrong

are you transpiling? if the answer is yes, you are pointing the finger at the wrong issue (neither Canary, nor this polyfill)

is v1 really ready for production?

it's not even finished, not sure how to answer this. Few parts are ready for production and available through this poly.

Developer browsers might be unstable, and I won't fix them, but I'll ensure stable browsers will work.

Firefox nightly, for instance, is a black hole of errors so far. It exposes the API and it throws with 3/4 of it: I don't care.

Do you think the Polyfill mirror the spec (W3C Working Draft)?

It does its best to polyfill them. Few parts of the specs are unpolyfillable.

The constructor is one of these cases, described in here: https://www.webreflection.co.uk/blog/2016/08/30/js-super-problem and also in this repo:
https://github.com/WebReflection/document-register-element#v1-caveat

@SerkanSipahi
Copy link
Author

SerkanSipahi commented Oct 16, 2016

are you transpiling? if the answer is yes, you are pointing the finger at the wrong issue (neither Canary, nor this polyfill)

as well ... as ! Without compiling in Canary ( v56.0.2891.0) the "extend native components" e.g. button, form, ui, etc not working, you are right , maybe because its not a stable browser, and in stable Chrome v54.0.2840.59 without compiling its also not working!

The problem is i have/must to transpile my code. With v0 i have no problems when extending native components (HTMLButtonElement, HTMLImageElement, etc). Im using an other polyfill for v0.
I had hoped i can change to v1 with your polyfill but its not possible for me at the moment.

Thank you for your answer and for https://www.webreflection.co.uk/blog/2016/08/30/js-super-problem#not-so-easy-though. I think v1 is in 1 - 2 years ready for production (incl. polyfill) like v0 ! We need more native behaviors (ES6 => extends, etc) and the disappearance of the old browsers.

@WebReflection
Copy link
Owner

It works on chrome and so does v0 too. Use the test page and go in console
to try 'cause Canary last time I've checked was OK

On Sunday, 16 October 2016, Bitcollage notifications@github.com wrote:

are you transpiling? if the answer is yes, you are pointing the finger at
the wrong issue (neither Canary, nor this polyfill)

as well ... as ! Without compiling in Canary ( v56.0.2891.0) the "extend
native components" e.g. button, form, ui, etc not working, you are right ,
maybe because its not a stable browser!

The problem is i have/must to transpile my code. With v0 i have no
problems when extending native components (HTMLButtonElement,
HTMLImageElement, etc). Im using an other polyfill for v0.
I had hoped i can change to v1 with your polyfill but its not possible for
me at the moment.

I thinkg v1 is in 1 - 2 years ready for production (incl. polyfill) like
v0 !

Thank you for your answer :)


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#85 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAFO9WcSdHrb3i2Tn5DzmdsGyFN-ZBbYks5q0omMgaJpZM4KYCk_
.

@WebReflection
Copy link
Owner

P.S. you can't transpile V1, there is a Babel bug for this issue

On Sunday, 16 October 2016, Andrea Giammarchi andrea.giammarchi@gmail.com
wrote:

It works on chrome and so does v0 too. Use the test page and go in console
to try 'cause Canary last time I've checked was OK

On Sunday, 16 October 2016, Bitcollage <notifications@github.com
javascript:_e(%7B%7D,'cvml','notifications@github.com');> wrote:

are you transpiling? if the answer is yes, you are pointing the finger at
the wrong issue (neither Canary, nor this polyfill)

as well ... as ! Without compiling in Canary ( v56.0.2891.0) the "extend
native components" e.g. button, form, ui, etc not working, you are right ,
maybe because its not a stable browser!

The problem is i have/must to transpile my code. With v0 i have no
problems when extending native components (HTMLButtonElement,
HTMLImageElement, etc). Im using an other polyfill for v0.
I had hoped i can change to v1 with your polyfill but its not possible
for me at the moment.

I thinkg v1 is in 1 - 2 years ready for production (incl. polyfill) like
v0 !

Thank you for your answer :)


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#85 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAFO9WcSdHrb3i2Tn5DzmdsGyFN-ZBbYks5q0omMgaJpZM4KYCk_
.

@SerkanSipahi
Copy link
Author

SerkanSipahi commented Oct 17, 2016

It works on chrome and so does v0 too. Use the test page and go in console
to try 'cause Canary last time I've checked was OK

What i mean is, i paste (without compiling) following code in stable Chrome v54.0.2840.59 where is "customElements.define" is available (natively). It does not work. Getting error:

// extends some different native constructor
class MyButton extends HTMLButtonElement {}

// define it specifying what's extending
customElements.define('my-button', MyButton, {extends: 'button'});

// append this in dom "<button is="my-button">click me</button>" not working

// creating with new not working
document.body.appendChild(
  new MyButton
).textContent = 'click me';

error:

VM302:1 Uncaught TypeError: Illegal constructor
    at MyDom (<anonymous>:1:1)
    at <anonymous>:11:10

P.S. you can't transpile V1, there is a Babel bug for this issue

Maybe its time to develop a new babel-plugin (https://www.webreflection.co.uk/blog/2016/08/30/js-super-problem). I think i can do that (https://github.com/thejameskyle/babel-handbook/blob/master/translations/en/plugin-handbook.md). Will give you feedback in some days.

What do you think @kittens @hzoo? Is there a bug-ticket for that or can we develop a mod-plugin?

@WebReflection
Copy link
Owner

I've tried right now on this page
http://webreflection.github.io/document-register-element/test/

opening the console.

Everything works fine.

ce-demo

@WebReflection
Copy link
Owner

Canary Version 56.0.2891.0 canary (64-bit)

@SerkanSipahi
Copy link
Author

SerkanSipahi commented Oct 17, 2016

@WebReflection Please open "NOT" your Testpage ! "OPEN" www.google.com (no polyfill) with v56.0.2891.0 canary or with v54.0.2840.59 and then paste the code. The code does not even work in a stable version( v54.0.2840.59).

Why i should use a polyfill that not working on stable version where is v1 available. I hope you understand this time what i mean !!!!

@WebReflection
Copy link
Owner

I see ... you were complaining about non polyfilled case but then I'm not sure why you would open a bug in here ... btw, now I understand your last question:

Do you think the Polyfill mirror the spec (W3C Working Draft)? and i think the spec not behave as expected!

Yes, this polyfill implements W3C specs including native builtins extend

@SerkanSipahi
Copy link
Author

SerkanSipahi commented Oct 17, 2016

I see ... you were complaining about non polyfilled case but then I'm not sure why you would open a bug in here ... btw, now I understand your last question:

because v54.0.2840.59 is "STABLE" and v1 is available and then i assume that should works ! i thought something gone wrong.

@WebReflection
Copy link
Owner

Wrong assumption. Firefox Nightly exposes a completely broken API and Safari wasn't implementing .when and .get

This is a polyfill that brings Custom Elements V1 on every browser that was previously compatible/polyfilled for V0

@SerkanSipahi
Copy link
Author

you had written:

Developer browsers might be unstable, and I won't fix them, >>>> but I'll ensure stable browsers will work. <<<<

@WebReflection
Copy link
Owner

WebReflection commented Oct 17, 2016

Indeed Firefox stable, as well as Chrome, and Safari, are working.

How can I help you now? ...

edit: all supported browsers here https://github.com/WebReflection/document-register-element#tested-on

@SerkanSipahi
Copy link
Author

SerkanSipahi commented Oct 17, 2016

Indeed Firefox stable, as well as Chrome, and Safari, are working.

Yes you could help me. With polyfill it works and without it not works. The browsers are not yet ready although in stable available.

@SerkanSipahi
Copy link
Author

edit: all supported browsers here https://github.com/WebReflection/document-register-element#tested-on

i know now, your polyfill works according the spec

@SerkanSipahi
Copy link
Author

SerkanSipahi commented Oct 17, 2016

@WebReflection What do you think about a babel-plugin for compiling a better code (https://www.webreflection.co.uk/blog/2016/08/30/js-super-problem)? Makes sense or not?

@WebReflection
Copy link
Owner

The browsers are not yet ready although in stable available.

do you understand this polyfill exists so you don't care about when browsers would be ready?
That's the entire purpose of having polyfills. After a while you drop them because natively implemented ... right?

What do you think about a babel-plugin for compiling a better code?

there is a bug already on babel repo.
babel/babel#4480

Feel free to push a PR or help resolving, thanks.

@SerkanSipahi
Copy link
Author

SerkanSipahi commented Oct 17, 2016

do you understand this polyfill exists so you don't care about when browsers would be ready?
That's the entire purpose of having polyfills. After a while you drop them because natively implemented ... right?

right

Feel free to push a PR or help resolving, thanks.

i will try to solve this problem.

there is a bug already on babel repo.
babel/babel#4480

thank you for the link

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants