How to import all the components and utils in an in-repo-engine into another?

Questions General
1

I have created two in-repo-engines, my-engine and common-engine in my ember app. I want all the components inside common-engine in my-engine. As far i have seen i need to re-export that component by creating all the files again inside my-engine.

Is there any other way to import the entire engine inside the other ?

Thanks in advance, Mohanapriya C

2

The only real way to do this is to have another “traditional” addon (in-repo works great) that holds everything you want to share between engines, and use that addon in both engines. Engines are meant to be isolated and self-contained in terms of dependencies, so any code must either be defined in the engine itself or explicitly imported from an addon.

It’s definitely a pain to get three in-repo addons set up, but once you get all the wiring hashed out it works nicely. My company uses 4 in-repo engines and 2 in-repo component for sharing components/etc between the engines and it’s been working well.

Another small advantage to pulling out components into a shared “regular” addon is that they’re easier to write tests for, writing tests for a component in an in-repo engine requires some monkey business with the resolver and such.

1 Like
3

Thanks for the clarification. Hope i would do the same if adding the common-engine as a dependency for my-engine is not possible.

I have tried adding common-engine as a dependency of my-engine in package.json inside /my-engine/package.json . But that required manual symlink creation of common-engine in node_modules. After that i was able to use the component inside common-engine inside my-engine. If i unlink the same, it didn’t work. Is it not possible to add dependency without the symlink ?

4

You shouldn’t need a symlink (in fact i would specifically avoid it), but you also can’t use an engine as a dependency of another engine as far as I know. That’s why I said you should use a “normal” in repo addon for shared components.

An engine (at least the routable variety, which is much more common in my experience) is mostly for isolating a collection of routes and their associated templates/controllers and any dependencies those have (components, etc). These things could be defined in either the engine itself or in an addon that the engine consumes.

All that to say, shared components should NOT go inside an engine, they should be in a regular addon. The basic building blocks are, roughly:

  • app: a standalone Ember application which consumes dependencies like ember addons, other npm packages, and can mount engines to itself. This can be compiled into a deployable webapp.
  • addon (regular): a collection of reusable items (could be any Ember class like Component, Initializer, etc) or utils that can be shared between apps and engines. Items in /addon are importable only from the addon namespace (e.g. import <thing> from 'my-cool-addon/<path-to-thing>'), items in /app are mixed in to the consuming app/engine namespace which is why these are typically re-exports of things in addon. Addons cannot be compiled to a standalone app, they can only be compiled into other apps and engines
  • engine: an isolated “mini app” which is cannot run on its own but must be “mounted” to another app. Because engines are isolated their dependencies must either be part of the engine itself or explicitly declared. They can consume addons, but not other engines. An engine is supposed to be isolated so it does not “leak” its code (e.g. components, etc) into other packages. This is probably why what you described above isn’t working.

Anyway hope that helps. Engines are still a little rough around the edges but they’re a good way to isolate pieces of an app into isolated chunks.

1 Like
5

Thanks for the clarification. That was really helpful !!!