How do you watch addon changes / rebuilds under embroider?

[NullVoxPopuli]

in the v2 addon blueprint, the default setup uses non-embroider, which relies on ember-auto-import's autoImport.watchDependencies configuration -- works great!

However, when switching to an embroider-only test-app, that config is no longer relevant, as embroider has taken over the full build.

I recall there was once an environment variable for telling embroider which addons to watch for development/rebuilding -- but I couldn't find it anywhere.

I asked our AI bot in the discord, and it told me EMBROIDER_REBUILD_ADDONS, from: https://dev.to/bendemboski/embroider-from-zero-to-route-splitting-in-3-5-weeks-5abo/

but, it seems like that doesn't work anymore? (or I gave it the wrong value, and maybe I need to PR some validation to the value of this environment variable?)

Thoughts?
Is something broken?

Thanks!

[ijlee2]

I believe it's not the environment variable EMBROIDER_REBUILD_ADDONS, but the package broccoli-side-watch, that you're looking for.

[NullVoxPopuli]

So something like:

const sideWatch = require('@embroider/broccoli-side-watch');

function watchLibraries(...libraries) {
  const paths = libraries.map(libraryName => {
    let entry = path.resolve(libraryName);
    let manifestPath = findPackageJsonUp(entry);
    let packagePath = path.dirname(manifestPath);
    let manifest = require(manifestPath);
    let toWatch = manifest.files.map(f => path.join(packagePath, f));
    return toWatch;
  });
  
  return sideWatch('app', { watching: paths.flat() });
}

const app = new EmberApp(defaults, {  
  trees: {
    app: watchLibraries('library-a', 'library-b', 'my-clone-of-whatever');
  },
});

[NullVoxPopuli]

Here is the code I actually ended up with (the above was just spit ballin'):

Deps

  "@embroider/broccoli-side-watch": "0.0.2-unstable.ba9fd29",
  "@pnpm/find-workspace-packages": "6.0.9",
  "package-up": "5.0.0"

some-file.js (as CJS)

'use strict';

const { findWorkspacePackagesNoCheck, arrayOfWorkspacePackagesToMap } = require('@pnpm/find-workspace-packages');
const path = require('path');
const fs = require('fs');

const monorepoRoot = path.join(__dirname, '../../../');

/**
 * For a given "currentPath", we determine what packages (specified in the package.json)
 * are from the monorepo.
 *
 * @param {string} currentPath directory of the package, containing the package.json
 */
async function addons(currentPath) {
	const thisPackage = require(path.join(currentPath, 'package.json'));
	const { dependencies, devDependencies } = thisPackage;

	const allDependencies = [...Object.keys(dependencies || {}), ...Object.keys(devDependencies || {})];

	const packageInfos = await findWorkspacePackagesNoCheck(monorepoRoot);
	const packageObjectMap = arrayOfWorkspacePackagesToMap(packageInfos);

	const relevantPackages = [];

	for (const [name, info] of Object.entries(packageObjectMap)) {
		if (!allDependencies.includes(name)) {
			continue;
		}

		// Info is an object of version => Object, but we only use one version throughout the monorepo
		// even if we didn't, for the purpose of discovering what is in the monorepo, we don't care about
		// what-would-be-extra-information.
		const actualInfo = Object.values(info)[0];
		relevantPackages.push(actualInfo);
	}

	const inMonorepoAddons = relevantPackages
		.map((packageInfo) => packageInfo.manifest)
		.filter((manifest) => manifest.keywords?.includes('ember-addon'));

	return inMonorepoAddons.map((manifest) => manifest.name);
}

const sideWatch = require('@embroider/broccoli-side-watch');

async function watchLibraries(projectDir) {
	const { packageUp } = await import('package-up');

	const libraries = await addons(projectDir);

	const promises = libraries.map(async (libraryName) => {
		const entry = require.resolve(libraryName, { paths: [projectDir] });
		const manifestPath = await packageUp({ cwd: entry });
		const packagePath = path.dirname(manifestPath);
		const manifest = require(manifestPath);

		if (!manifest.files) {
			return;
		}

		const toWatch = manifest.files.map((f) => path.join(packagePath, f));

		return toWatch;
	});

	const paths = (await Promise.all(promises)).flat().filter(Boolean);

	const relative = paths
		.filter((p) => {
			const repoRelative = p.replace(monorepoRoot, '');

			if (!fs.existsSync(p)) {
				// eslint-disable-next-line no-console
				console.warn(`Path ${repoRelative} doesn't exist. It will not be watched.`);
				return false;
			}

			if (!fs.lstatSync(p).isDirectory()) {
				// eslint-disable-next-line no-console
				console.warn(`Path ${repoRelative} is not a directory. It will not be watched.`);
				return false;
			}

			// NOTE: We don't have any libraries that don't need compilation today,
			//       but we might some day.
			return !p.endsWith('/src');
		})
		.map((p) => path.relative(projectDir, p));

	return sideWatch('app', { watching: relative });
}

module.exports = { addons, watchLibraries };

then in ember-cli-build.js

module.exports = async function (defaults) {
	const app = new EmberApp(defaults, {
		'trees': {
			app: await require('the-path-or-place-to-the-above').watchLibraries(__dirname),
		},

[simonihmig]

Is that not working in general, or some special cases?

Because it is definitely working for me in the common case: test-app on Embroider v3 having a dependency on v2 addon, that is rebuilding.

Not entirely sure when broccoli-side-watch needs to come into play. Been using it for watching a plain npm package (no addon). This comment is also interesting: https://github.com/embroider-build/embroider/blob/main/packages/broccoli-side-watch/index.js#L18-L20

[NullVoxPopuli]

Could be environment related, I suppose. I know watch behaviors are wildly different between machines that have watchman installed, vs using a native inotify -- though, I was testing this on MacOS as well, and embroider doesn't pick up changes from addons without the side-watcher.