Week 10 - Ember Inspector feat. Embroider

#web #emberjs #ember_inspector #vite #embroider #addons #blog_post

I am posting this summary a few days late since I couldn’t work on it last Friday, but here it is. Unfortunately, it might be my last Ember Initiative weekly update for a while, unless the Initiative receives more support. But let’s start with the good news and return to this later.

Ember Inspector #

Running the proof of concept #

My primary focus this week was to get the Ember Inspector working for a Vite app — in other words, getting Chris’ proof of concept to run on my side.

Week 9 - a plan for Ember Inspector

#web #emberjs #docs_writing #ember_inspector #vitejs #embroider #virtual_files

This week was a lonely week for me since both my coworkers and my manager were on vacation. I had to move forward with all the topics we had on the table, and I focused on three of them: improving ember-vite-codemod, preparing the communication about the Ember addons audit, and working on Ember Inspector.

First things first: rewrite the README #

Like every senior developer, I was a junior once. My most traumatising memories from this period relate to a particular part of error solving: guessing what other developers mean when they write stuff on the Internet. At some point, it seemed to me that they were unclear on purpose, I was suspecting some unconscious ego issue, like “If I add more detailed explanations about something, it means I think it’s not obvious. But if other developers think that I think it’s not obvious, but it’s obvious to them, then they will think I am incompetent”. Something like that. I was desperately seeking a logical answer to the questions: “Why are all your docs so BAD? Why don’t you want to EXPLAIN? You’ve written a lot of stuff here, but what’s the CONCLUSION? What do you MEAN? What’s the matter with YOU?”.

Week 8 - a new release for ember-test-selectors

#web #emberjs #embertestselectors #pnpm #workspaces #babel #viteplugins #rollupplugins #emberinspector

ember-test-selectors 7.1.0 is out, along with strip-test-selectors 1.0.0. After this topic was closed, I could also look into some issues on ember-vite-codemod and pair with Chris on our big next step: getting Ember Inspector work with Vite.

Tips from ember-test-selectors #

About workspace:* #

ember-test-selectors is now a monorepo with the following structure:

• ember-test-selectors: the classic addon that used to exit before
• strip-test-selectors: the transform functions you can configure in your Babel config directly when your app uses Embroider+Vite
• tests:
  • classic-app: tests the compatibility of the classic addon
  • node-tests: unit tests for the plugin that strip data-test-* from JS objects
  • vite-app: tests the configuration for strip-test-selectors

Working with monorepos requires familiarity with the concept of workspaces. To simplify the idea, it’s a protocol that allows you to declare what are the different packages contained in your monorepo.

Week 7 - the short week

#web #emberjs #embertestselectors #babel #babelconfig

This week has been very short for the Ember Initiative since we had a team event at Mainmatter. I tried to move on with my tasks, but I couldn’t properly finish anything.

ember-test-selectors for Vite #

ember-test-selectors is an addon managed by Mainmatter that belongs to the top 100 addons. Since it’s a popular addon, we need to move it to V2 world like we’ve already did for ember-simple-auth, ember-cookies or ember-promise-modals.

Week 6 - starting the upgrade of ember-test-selectors

#web #emberjs #migrationStrategy #embercssmodules #emberscopedcss #monorepo #embertry

This week has been a week of transition in my Ember Initiative journey. I am moving from one topic to another, which gives me a false feeling of incompletion that doesn’t truly reflect how things have been moving. My 3-day week in a nutshell: I am done with the migration path from ember-css-modules to ember-scoped-css, I started to work moving ember-test-selectors to v2, and I handled a few issues on ember-vite-codemod.

Week 5 - between codemod improvements and migration paths

#web #emberjs #backwardCompatibility #embercssmodules #emberscopedcss #vite #vitest #snapshotTesting

This week has been very productive. We have Vite support for Ember 3.28, the migration path from ember-css-modules to ember-scoped-css is now clear, and we fixed a couple of issues in ember-vite-codemod.

The Ember Initiative started a month ago, and we have already achieved a few critical goals. If you want us to continue, please support the initiative. It aims to secure the Ember ecosystem in the long run with continuous development and improvements. Get in touch with Mainmatter to support and decide on our team’s priorities.

Week 4 - the start of the addon audit

#web #emberjs #emberobserver #publicapi #embercssmodules #emberscopedcss

This has been a tough week, in the sense that I see a lot of work coming! As usual, I’ll keep this weekly log short and focus only on a few noticeable points.

The start of the addon audit #

We released ember-vite-codemod to get classic Ember apps to build with Vite, and I wrote a blog post about it on Mainmatter website. So far, so good. But will people be able to use the codemod without any trouble? A part of the answer depends on the addons they use. If they use a v1 addon (classic Ember addon) that is incompatible with Embroider+Vite requirements, at least part of the functionalities will break.

Week 3 - supporting @embroider/webpack

#web #emberjs #codemod #embroider #vite #vitest #testem concurrency

At the end of this third week, ember-vite-codemod brings Vite to your Ember app formerly building with @embroider/webpack, and this case is tested by the CI, which is the important part.

From @embroider/webpackto @embroider/vite: easy peasy? #

At the time of writing, Embroider’s README describes how to start building a classic app with @embroider/webpack; and it’s quite straightforward, the only file that changes is ember-cli-build.js.

Week 2 - releasing the codemod

#web #emberjs #codemod #docs #embroider #vite #vitest

At the end of this second week, we have the first release of ember-vite-codemod! It can make Ember >=5.12 apps building with Vite. Aside from all the AST manipulations, I had the opportunity to have a clearer vision of where we are going with this.

Do or document #

As defined last week, a codemod is a script that transforms your code automatically. To put it differently, let’s assume that you document entirely the way the code should be transformed: a codemod is like a script that automatically follows your docs so your users don’t have to follow it themselves. But as long as the docs exist, the codemod is just a bonus with two purposes: saving your users time and protecting them from a feeling of overwhelm that could turn them away from your lib.

Week 1 - the codemod

#web #emberjs #codemod #ast #npmView #nodeFs #embroider #vite

Ember’s power is step-by-step improvement. As the framework evolves, the community won’t leave you behind: it will provide you with everything you need to update your app and adopt modern practices at your own pace (Trust me on this; the first version I used was a 2.x, and I did all the way to 4.x). My job now is to help you migrate your classic Ember app to build with Vite. This is the first step of my journey: the codemod to help developers migrate from classic apps to Vite apps.