Accounted for public assets

[ijlee2]

Background

In v1 addons, static assets (like images) are placed in the public folder:

This directory is not created by default in a new addon, but you can add it manually if there are static assets (like images) that you want to include in your addon. You can add static assets in the public/ directory in your addon, and they will automatically be merged into the public directory in the host app under a folder with the name of your addon.

For example, if your addon is published to npm as @foo/my-awesome-addon, and it contains an image at public/icon.png, the host app can reference it as /@foo/my-awesome-addon/icon.png in CSS or JS.

https://cli.emberjs.com/release/writing-addons/#public

In v2 addons, the assets can be stored anywhere in the addon package, because the mapping ember-addon.public-assets in package.json defines where the assets are and how the consuming project are to refer to them. For example, in [email protected], there is an image called construction.png, which lives in the images directory.

{
  "name": "ember-welcome-page",
  "files": [
    "addon-main.js",
    "dist",
    "images"  // ⬅
  ],
  "ember-addon": {
    "version": 2,
    "type": "addon",
    "main": "addon-main.js",
    "app-js": {
      "./components/welcome-page.js": "./dist/_app_/components/welcome-page.js"
    },
    "public-assets": {
      "./images/construction.png": "/ember-welcome-page/images/construction.png"  // ⬅
    }
  }
}

Thanks to @phndiaye for suggesting the feature.

What changed?

The codemod can now migrate the addon's assets by

• Moving assets from public to <addon-name>/public
• Updating ember-addon.files and ember-addon.public-assets

(When there are no assets, the two steps above do not occur.)

Note an upcoming feature of @embroider/addon-dev called addon.publicAssets(), which lets rollup keep the ember-addon.public-assets meta in sync. Once there is a new release of @embroider/addon-dev, we can downstream the changes to @embroider/addon-blueprint and this codemod.

/* src/blueprints/ember-addon/__addonLocation__/rollup.config.mjs */

...

import { Addon } from '@embroider/addon-dev/rollup';

const addon = new Addon({
  srcDir: 'src',
  destDir: 'dist',
});

export default {
  ...

  addon.publicAssets('public', {
    include: [
      /* File paths */
    ],
  });

  ...
};

References

• Add support for keeping public assets and ember-addon.public-assets meta in sync embroider-build/embroider#1368
• https://medium.com/@phndiaye/migrating-an-ember-addon-to-the-v2-format-1d62e45384d3