Possible issue with usage in FireFox

frcake commented 6 years ago

Hey! Great work!

I'm trying to import a StencilJS component in my EmberJS app, I've done all the steps needed for the StencilJS component to be rendered from a simple empty.html file just by calling the <script> in the head and then using the <my-simple-component> tag in the <body>.

So, i suppose the StencilJS component is fine..

Now in EmberJS , i have installed my component via npm and it's been added in package.json "dependencies":{} I also added the same <script> tag (unpkg) to my index.html and i can see the GET request being ran in my console.

When i use {{my-simple-component }} or in block format nothing renders on screen, but using the firefox inspector i can see the tags <my-simple-component> and on the block component (say we try to render <h1> Hello World</h1> inside it) i can see the html in the inspector , but still nothing on the screen!

So no errors , everything seems to go fine but no result either. On this issue #2 you mention the collections:{} in the package.json (i assume you mean the StencilJS package.json) and i suspect that this could be the problem, i wont post it yet so i don't confuse things , but if you think that could be the case i have it ready.

Any ideas or steps I'm missing in order to import the Stencil component?

Thanks!

frcake commented 6 years ago

Problem was that i was using FireFox (probably the es5 and development environment) no error was mentioned so i lost some hours on this..

Google Chrome renders the component fine!

alexlafroscia commented 6 years ago

Interesting -- is the issue only with FireFox and Ember? By this I mean, was FireFox OK with the component when not invoked through Ember?

If there is something that this addon can do to help support FireFox + Ember + Stencil, I'd love to do that!

frcake commented 6 years ago

That's interesting indeed (didn't think of that this way as i was scratching my head thinking about more complex scenarios) and yes , the component was fine running on a flat html file.

The only thing i can imagine without any certainty is the es5 disabled on FireFox. Running npm run dev on the StencilJS component directory gives you this:

This Stencil app is disabled for this browser.
Developers:

    ES5 builds are disabled during development to take advantage of 2x faster build times.
    Please see the example below or our config docs if you would like to develop on a browser that does not fully support ES2017 and custom elements.
    Note that by default, ES5 builds and polyfills are enabled during production builds.
    When testing browsers it is recommended to always test in production mode, and ES5 builds should always be enabled during production builds.
    This is only an experiement and if it slows down app development then we will revert this and enable ES5 builds during dev.

Enabling ES5 builds during development:

    npm run dev --es5  

Enabling full production builds during development:

    npm run dev --prod  

Current Browser's Support:

    ES Module Imports: true
    Custom Elements: true
    fetch(): true
    CSS Variables: true

Current Browser:

    Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:62.0) Gecko/20100101 Firefox/62.0

Which goes away if you run with npm run dev --es5

So i could see the development environment being used by the component since EmberJS "has" an environment (in this case development..) while the flat html file using the component in some "production" fashion , as it does not specify anything.

Hope I'm not steering you away from the right direction! :D

alexlafroscia commented 6 years ago

Hmm... that’s interesting.

I’ve never seen a warning like that before, maybe it’s something new in the Stencil build tools? I haven’t checked this addon against the latest version of the Stencil compiler.

I’ll try to check this out on my own computer when I have time to get to the bottom of the problem.

_{Sent with GitHawk}

alexlafroscia / ember-cli-stencil

Possible issue with usage in FireFox #4