Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Ember.js #237

Open
alexlafroscia opened this issue May 12, 2018 · 22 comments · May be fixed by #2438
Open

Add Ember.js #237

alexlafroscia opened this issue May 12, 2018 · 22 comments · May be fixed by #2438
Labels
PRs Welcome for accepted issues that are just awaiting a PR

Comments

@alexlafroscia
Copy link

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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

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

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
Copy link
Author

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
Copy link
Contributor

@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
Copy link
Author

alexlafroscia commented May 16, 2018

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

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
Copy link
Contributor

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

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
Copy link
Contributor

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

NullVoxPopuli commented Dec 8, 2018

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
Copy link
Contributor

@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
Copy link

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

@robdodson
Copy link
Contributor

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

billyjov commented Apr 6, 2021

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

@alexlafroscia
Copy link
Author

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.

@rictic rictic added the PRs Welcome for accepted issues that are just awaiting a PR label Dec 29, 2021
@MPParsley
Copy link

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

@NullVoxPopuli
Copy link

@MPParsley you probably want to join the Ember discord for help with compilation targets: https://discord.gg/emberjs

@NullVoxPopuli NullVoxPopuli linked a pull request Sep 28, 2024 that will close this issue
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
PRs Welcome for accepted issues that are just awaiting a PR
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants