Add Ember.js

[alexlafroscia]

I've been doing some work with Ember + WebComponents lately and support, in the latest version, is actually pretty good. I would love to get this reflected in your site! I can look into making a PR that adds tests for Ember, but it may be tricky since Ember is tightly coupled to its own build tools.

[alexlafroscia]

I see that most (all?) of the test suites use Karma -- is this required? The Ember tests run through Testem by default, and I don't think there's a way to use Karma instead. Will this cause an issue?

[robdodson]

I would love to get Ember added to the site as well. Unfortunately Karma is kind of a requirement because there are a few special Karma plugins that the site uses to parse the results and generate the template content for the page. I've also tried to use Webpack throughout, not because I have any deep love for Webpack, but just to keep all of the testing environments consistent. But if it's impossible to build Ember without their build chain, we could try dropping that part and at least see if we can get a bundle put together. Once we have a bundle I could try to make it work with Karma.

[alexlafroscia]

We could build on top of their Globals build but there is an RFC to deprecate it (thus making the custom build tooling the only supported developmen workflow). It would work for a current version of Ember but it wouldn’t be possible to keep it up-to-date... I’m not sure if it’s possible to build it with WebPack. If it is at all, it would be a huge deviation from how Ember apps are normally built and would likely be a pain to maintain :(

[robdodson]

Just curious if @TheLarkInn has any thoughts regarding Ember and webpack.

@alexlafroscia if it's possible to create a standalone build using their CLI we may still be able to pull that into Karma to test. Karma is the main important bit because I wrote custom plugins for it to output html and json which are used to build the final report.

[alexlafroscia]

There is some work slated for this year to allow other bundlers to be used... Maybe just waiting for that work to land would be wise? I'm sure that shortly after the feature lands in the Ember CLI, a Webpack plugin will surface. I don't mind building it myself, need be.

WRT Karma, maybe that could work. Export the entire application (rather than using Ember's normal testing story) and test it Selenium-style. Can Karma do that?

[robdodson]

WRT Karma, maybe that could work. Export the entire application (rather than using Ember's normal testing story) and test it Selenium-style. Can Karma do that?

Essentially yes. It doesn't do Selenium style tests with keypresses. The tests are entirely JS based and just do things like add an Ember component to the page, inspect it a bit with JavaScript, and assert that things seem correct. Here's an example of a basic test to determine if Preact passed the correct data to a web component.

[TheLarkInn]

Ember doesn't use modules and has a pretty heavily abstracted system that makes it really impossible to statically analyze. I guess it's possible but requires a lot of custom config and a bit of pain. ☹️.

Glimmer however works much better!

[alexlafroscia]

Glimmer however works much better!

Maybe this is a better short-term goal then. With it being based on the same rendering engine, what is true for one should be true for another. I would love to have Ember listed in the frameworks for visibility but maybe that could be covered through the description of the Glimmer results on the site?

[robdodson]

@alexlafroscia I would love to get Glimmer up and running. And yeah, we can refer out to Ember.

Do you think you'd be able to take a crack at setting up some Glimmer tests? I can do my best to help if there are any questions.

[alexlafroscia]

Yeah, I can give that a try. I'm not super familiar with running Glimmer on its own but I understand a fair amount about the Ember CLI... We can take this over to #16 though and plan from there.

I'd like to keep this ticket open as a record of the desire to address getting proper Ember reporting in here... eventually.

[knownasilya]

Now that it's been a little why, and Glimmer.js is still experimental and is planned to stay that way for the foreseeable future. Ember is basically absorbing all of the lessons learned from Glimmer.js so I think adding Ember.js should be priority 1 before Glimmer.js.

[robdodson]

If folks can figure out a way to add Ember that doesn't make things super weird i'm all for it. There are currently 14 frameworks on the site and they've all been able to use the same webpack + karma setup. This is really nice because I've been working on a Lerna refactor and having everything use the same setup makes that fairly straightforward. At a minimum we'd want to use karma because I've written a couple of plugins that pull the data out of karma and make it consumable for the site.

[tomwayson]

I think a more likely solution is going to be to replicate the tests in an ember environment.

I think a fist pass could be an Ember app that can install the ce-* elements and run an equivalent basic and advanced suites of using ember's default (broccoli-based) build and (qunit-based) tests. The easiest thing to do would be to have that Ember app be it's own repo, but if #253 lands I suppose that app could live in the monorepo too.

Subsequent passes could improve on how a "score" for Ember would be generated and ideally published to https://custom-elements-everywhere.com/. However, I think it would be sufficient if initially that page just linked to the above Ember app w/ passing tests. That would be a huge improvement on the current situation at least.

@robdodson would there be a way for an external app/repo to install the ce-* elements? At first glance I didn't see where those are coming from.

[robdodson]

Sorry for the lag. I'm leading another project at the moment and it's crunch time from now till November :\

The external custom elements live here: https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/__shared__/webcomponents

Creating a standalone separate Ember repo seems like a good start.

[NullVoxPopuli]

FWIW, bigtest.js works with ember.js (looks like: via mocha), and karma works with bigtest.js and mocha, so Shirley, it's possible to hook up karma tests to ember.js.

Do all the current frameworks on the site use the exact same test suite? or are there variations / how much flexibility is allowed if any?

Personally, I don't see any blockers with getting ember added. :)

[robdodson]

@NullVoxPopuli All of the frameworks on the site use essentially the same karma.conf.js which includes a custom webpack build section for each.

There's definitely variation in the webpack bits, in particular comparing something like Angular to React.

Each test suite imports the same custom elements which all live in a shared directory.

Using karma is important because I've hacked together custom karma reporters which extract the data from the tests and provide it to the templates that generate the site.

[NullVoxPopuli]

you can use karma with something like bigtest.js to js-framework-agnosticly test ember.

[robdodson]

Definitely seems possible. Unfortunately I'd need someone to put together a PR because I haven't had much time to work on any open source projects outside of my current one :\

[billyjov]

@alexlafroscia any news on this ? Did you have some open sources projects using emberJS + custom elements ?

[alexlafroscia]

Unfortunately not, sorry ☹️ I used to use them together, but never in OSS (and that was honestly a few jobs ago!)

I know some big players use Ember + Web Components together through Stencil (https://music.apple.com/ 👀 ) but nothing that's open-source.

[MPParsley]

I'd like to create a webcomponent using emberjs. Could someone point me in the right direction?