This week we made some progress towards using Ember with Vite and we are one step closer to finishing the allowAppImports feature in ember-auto-import

Starting work on virtualising main app asset

Last week I mentioned that we made significant progress with Vite and esbuild, and that the next step is to remove the need for Embroider to move your app to a node_modules/.embroider/rewritten-app. The easiest way to identify the parts that need to be update is to compare the contents of the rewritten-app and see how they differ from your app folder. If you did take a look into the rewritten-app you would see that main entry point that your html file is pointing at is entirely generated, assets/app-name.js.

The assets/app-name.js file is generated by Embroider to stitch all your app files together and actually boot your Ember app. You’ll see a number of things in this file that look like this

d("app-name/templates/application", function(){ return i("app-name/templates/application.hbs");});

Which currently trips esbuild up during dependency optimisation and it will always externalise the right hand side of this import, and essentially never discover any imports that are being used by these files.

Myself and Andrey started looking into how we can change this to be implemented in virtualised context that wouldn’t trip up esbuild and we used a lot of our pairing session diving into how Embroider deals with virtual imports under the hood.

Continuing work on ember-auto-import allowAppImport

In previous weeks I’ve talked about our work to add the ability to import from your own application to ember-auto-import. This week we are working on our second last TODO item, making sure that imported files from the app use the correct babel config.

Before our work on the allowAppImports functionality, when you are importing from npm ember-auto-import needed to ensure that dependencies match a common subset of JS features that an Ember app expects. This means that we need to use a clean babel transform that can effectively convert JS to the format that we expect.

Now that we add the ability to import your own app files this changes a little bit. You are able to define custom babel transforms in your app, and any of your addons are also able to do this automatically. This means that when we identify that you are trying to import a file from your app, we need to make sure it has the exact same set of babel transforms applied to it that it would have had before it was moved over to webpack.

If you want to see how we achieved this in the PR you can check out this commit.

—

This post is part of the Embroider Initiative Updates.