### Import Setup Engine Helper

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/testing-intro.md

Import the `setupEngine` helper from `ember-engines/test-support` for testing engine components and services.

```javascript
// tests/<integration or unit>/…
import { setupEngine } from 'ember-engines/test-support';

```

--------------------------------

### Generate a Specific In-Repo Engine

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Example of generating an in-repo engine named 'super-blog'. This command adds the necessary directory structure and files for the engine.

```shell
ember g in-repo-engine super-blog
```

--------------------------------

### Use Setup Engine Helper in Tests

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/testing-intro.md

Include the `setupEngine` helper in your test module, specifying the engine name to automatically load, instantiate, and provide access to the engine. The engine owner is accessible via `this.engine`.

```javascript
setupEngine(hooks, '<engine-name>');

```

--------------------------------

### Generate a Specific Standalone Engine Addon

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Example of generating a standalone addon named 'super-blog'. This addon will serve as the base for a new engine.

```shell
ember addon super-blog
```

--------------------------------

### Asset Manifest Example

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/lazy-loading.md

An example of the asset manifest JSON structure generated at build time for a lazy engine. This manifest lists the primary JavaScript bundles.

```json
{
  "bundles": {
    "guide": {
      "assets": [
        {
          "uri": "/engines-dist/<lazy-engine>/assets/engine-vendor.js",
          "type": "js"
        },
        {
          "uri": "/engines-dist/<lazy-engine>/assets/engine.js",
          "type": "js"
        }
      ]
    }
  }
}
```

--------------------------------

### Install ember-engines Addon

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

After creating a standalone addon, install the 'ember-engines' addon to enable engine-specific features. This should be done within the addon's directory.

```shell
cd super-blog/
ember install ember-engines
```

--------------------------------

### Yarn Workspaces Project Structure Example

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/dependencies.md

Illustrates a typical project layout using Yarn workspaces for an Ember application with multiple engines and a shared addon.

```text
- my-app (workspace)
  - packages
    - host-app
    - engine-a
    - engine-b
    - shared-addon
```

--------------------------------

### Provide and Map Host Services to Engine

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/services.md

Configure the host application to provide services to an Ember Engine. This example shows mapping the host's 'store' to the engine's 'store' and the host's 'user-session' to the engine's 'session'.

```javascript
// dummy/app/app.js
export default class App extends Application {
  // ...
  engines = {
    'super-blog': {
      dependencies: {
        services: [
          'store',
          { 'session': 'user-session' }
        ]
      }
    }
  }
}
```

--------------------------------

### Custom Cache Key for Addon Tree

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/addons.md

This example demonstrates how to provide a custom cache key for an addon's tree to ensure proper deduplication when the addon has a custom `treeForAddon` hook. It uses `calculate-cache-key-for-tree` to generate the key.

```javascript
const calculateCacheKeyForTree = require('calculate-cache-key-for-tree');

module.exports = {
  name: require('./package').name,

  treeForAddon() {
    // returns custom tree - overwriting this hook disables the default caching!
  },

  cacheKeyForTree(treeType) {
    if (treeType === 'addon') {
      return calculateCacheKeyForTree(treeType, this);
    }

    return this._super.cacheKeyForTree.apply(this, arguments);
  }
};
```

--------------------------------

### Configure Engine in index.js

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Modify your Engine's index.js file to configure it as an Engine using the buildEngine function. Set lazyLoading.enabled to false initially for simpler setup.

```javascript
// index.js

const { buildEngine } = require('ember-engines/lib/engine-addon');

module.exports = buildEngine({
  name: 'super-blog',
  lazyLoading: {
    enabled: false
  }
});
```

--------------------------------

### Forcing Addon Version with Yarn Resolutions

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/dependencies.md

Example of using Yarn's 'resolutions' in package.json to enforce a specific version of an addon across all workspaces. Use with caution.

```json
{
  "dependencies": {},
  "devDependencies": {},
  "resolutions": {
    "**/ember-power-select": "^1.0.0"
  }
}
```

--------------------------------

### Define Engine Service Dependencies

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/services.md

Specify the services your Ember Engine requires from the host application. This example shows an engine depending on 'store' and 'session' services.

```javascript
// super-blog/addon/engine.js
export default class SuperBlog extends Engine {
  // ...
  dependencies = {
    services: [
      'store',
      'session'
    ]
  }
});
```

--------------------------------

### Mount Engine in Dummy App Router

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/testing-acceptance.md

Configure the dummy application's router to mount the engine. This sets up the entry point for testing the engine as if it were part of the main application.

```javascript
// admin-engine/tests/dummy/app/router.js
import EmberRouter from '@ember/routing/router';
import config from './config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function() {
  this.mount('admin-engine', { path: '/' });
});

export default Router;

```

--------------------------------

### Create Engine Template Directory and Application Template

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Create the necessary directory and the `application.hbs` template for an engine. The `application` template is the top-level template for an engine.

```shell
mkdir addon/templates
touch addon/templates/application.hbs
```

--------------------------------

### Unsupported Router Service Transition Syntax (v0.10 -> v0.11)

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/migrations.md

Demonstrates an unsupported syntax for router service transitions using only query parameters. Use the alternative syntax that includes a route name.

```js
this.router.transitionTo({ queryParams: { page: 1 }});
```

```js
this.router.transitionTo('posts', { queryParams: { page: 1 }});
```

--------------------------------

### Create Engine Routes File

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Create the `routes.js` file for a routable engine. This file defines the engine's internal routing structure.

```shell
touch addon/routes.js
```

--------------------------------

### Specify Engine Service Dependencies in Dummy App

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/testing-acceptance.md

Configure the dummy application's `app.js` to declare the services that the engine depends on. This is a prerequisite for stubbing these services.

```javascript
// admin-engine/tests/dummy/app/app.js
import Application from '@ember/application';

export default class App extends Application {
  // ...
  engines = {
    'admin-engine': {
      dependencies: {
        services: [
          'location-service'
        ]
      }
    }
  }
}

```

--------------------------------

### Mount Multiple Instances of an Engine

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Mount multiple instances of the same engine into the host application, each with a distinct route name and path. This is achieved using the `as` option.

```javascript
Router.map(function() {
  this.mount('super-blog', { path: '/blog' });
  this.mount('super-blog', { as: 'dev-blog', path: '/dev-blog' });
});
```

--------------------------------

### Generate a Component in an In-Repo Engine

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Command to generate a new component within a specified in-repo engine. Replace placeholders with your actual component and engine names.

```shell
ember generate component <component-name> --in-repo <in-repo-name>
```

--------------------------------

### Mount Routable Engine with Options

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Mount a routable engine with custom options, such as specifying a different path or resetting the namespace. This provides flexibility in how the engine is integrated.

```javascript
Router.map(function() {
  this.mount('super-blog', { resetNamespace: true, path: '/blog' });
});
```

--------------------------------

### Mount Routable Engine (Basic)

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Mount a routable engine into the host application's router. This makes the engine's routes accessible within the application.

```javascript
Router.map(function() {
  this.mount('super-blog');
});
```

--------------------------------

### Unit Test for Engine Service

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/testing-unit.md

Demonstrates how to unit test a service within an Ember Engine. It uses `setupTest` and `setupEngine` helpers to access the engine's services and assert computed property values.

```javascript
// <app-name>/tests/unit/services/some-thing-test.js

import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
import { setupEngine } from 'ember-engines/test-support';

module('Unit | Service | some thing', function(hooks) {
  setupTest(hooks);
  setupEngine(hooks, 'admin-engine')

  test('should correctly concat foo', function(assert) {
    const someThing = this.engine.lookup('service:some-thing');
    someThing.set('foo', 'baz');

    assert.equal(someThing.get('computedFoo'), 'computed baz');
  });
});
```

--------------------------------

### Specify Engine External Route Dependencies in Dummy App

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/testing-acceptance.md

Configure the dummy application's `app.js` to declare external routes that the engine depends on. This is necessary for stubbing these external routes.

```javascript
// admin-engine/tests/dummy/app/app.js
import Application from '@ember/application';

export default class App extends Application {
  // ...
  engines = {
    'admin-engine': {
      dependencies: {
        externalRoutes: [
          'home'
        ]
      }
    }
  }
}

```

--------------------------------

### Configure External Route Paths in Host Application

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/link-to-external.md

When mounting your Engine, the host application must specify the actual paths for each external route defined by the Engine. This is done within the `engines` configuration in the host's `app.js`.

```javascript
// dummy/app/app.js
import Application from '@ember/application';

export default class App extends Application {
  // ...
  engines = {
    'super-blog': {
      dependencies: {
        externalRoutes: {
          home: 'home.index',
          settings: 'settings.blog.index'
        }
      }
    }
  }
}
```

--------------------------------

### Preload Assets for Lazy Engines

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/testing-intro.md

Configure `tests/test-helper.js` to preload engine assets for lazy engines. This ensures all engine resources are loaded before tests begin.

```javascript
// <app-name>/tests/test-helper.js
import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { start } from 'ember-qunit';
import preloadAssets from 'ember-asset-loader/test-support/preload-assets';
import manifest from '<app-name>/config/asset-manifest';

setApplication(Application.create(config.APP));

preloadAssets(manifest).then(start); // This ensures all engine resources are loaded before the tests

```

--------------------------------

### Basic Engine Template Content

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Add simple content to the engine's `application.hbs` template. This allows verification that the engine renders when mounted.

```handlebars
<h3>Hello World!</h3>
```

--------------------------------

### Define Engine Routes

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/testing-acceptance.md

Define the routes for your engine using `buildRoutes`. This allows the engine to manage its own internal navigation.

```javascript
import buildRoutes from 'ember-engines/routes';

export default buildRoutes(function() {
  this.route('users');
});

```

--------------------------------

### Service Definition for Testing

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/testing-unit.md

Defines a sample service with a computed property for use in unit tests. This code should be placed within the engine's test support directory.

```javascript
// admin-engine/services/some-thing-test.js
import Service from '@ember/service';
import { computed } from '@ember/object';

export default class SomeService extends Service {
  foo = 'bar';

  @computed('foo')
  get computedFoo() {
    return `computed ${this.foo}`;
  }
}
```

--------------------------------

### Mount a Route-less Engine

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Use the {{mount}} helper in your templates to render a route-less Engine. The Engine's application.hbs will be rendered at the mount point.

```handlebars
{{mount "super-blog"}}
```

--------------------------------

### In-Repo Engine Package JSON Configuration

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

This JSON snippet shows the package.json configuration for an in-repo engine, specifically referencing a shared 'common' in-repo addon.

```json
{
  "name": "super-blog",

  "dependencies": {
    "ember-cli-htmlbars": "*",
    "ember-cli-babel": "*"
  },

  "ember-addon": {
    "paths": [
      "../common"
    ]
  }
}
```

--------------------------------

### Generate a Route in an In-Repo Engine

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Command to generate a new route within a specified in-repo engine. Ensure you replace placeholders with your actual route and engine names.

```shell
ember generate route <route-name> --in-repo <in-repo-name>
```

--------------------------------

### Create addon/engine.js

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Create the addon/engine.js file to define your Engine class, extending Ember's Engine class. This file is crucial for the Engine's namespace and initialization.

```shell
touch addon/engine.js
```

--------------------------------

### Generate an In-Repo Engine

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Use this command to create a new engine within your existing Ember application's project structure. The engine will be placed in the `/lib` directory.

```shell
ember g in-repo-engine <engine-name>
```

--------------------------------

### Generate a Standalone Engine Addon

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Use this command to create a new, standalone Ember addon that can be later converted into an engine.

```shell
ember addon <engine-name>
```

--------------------------------

### Alias Router Service Injection

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/deprecations.md

Demonstrates how to alias the host application's router service when injecting it into an engine to maintain encapsulation.

```javascript
export default class App extends Application {
  // ...
  engines = {
    'super-blog': {
      dependencies: {
        services: [
          'router'
        ]
      }
    }
  }
}
```

```javascript
export default class App extends Application {
  // ...
  engines = {
    'super-blog': {
      dependencies: {
        services: [
          { 'host-router': 'router' }
        ]
      }
    }
  }
}
```

--------------------------------

### Transition to External Route using Controller

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/deprecations.md

Replaces `transitionToExternalRoute` with `this.router.transitionToExternal` for route transitions initiated from a controller.

```javascript
import Controller from '@ember/controller';

export default class FooController extends Controller {
  @action
  async save({ title, text }) {
    let post = this.store.createRecord('post', { title, text });
    await post.save();
    return this.transitionToExternalRoute('post', post.id);
  }
}
```

```javascript
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class FooRoute extends Route {
  @service router;

  @action
  async save({ title, text }) {
    let post = this.store.createRecord('post', { title, text });
    await post.save();
    return this.router.transitionToExternal('post', post.id);
  }
}
```

--------------------------------

### Update engine.js for Embroider+Vite

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/embroider.md

Modify your `engine.js` to import `compatModules` and pass them to the resolver and `loadInitializers` for Embroider+Vite compatibility.

```diff
// addon/engine.js
import Engine from 'ember-engines/engine';
import Resolver from 'ember-resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';
+ import compatModules from '@embroider/virtual/compat-modules';

const { modulePrefix } = config;

class Eng extends Engine {
modulePrefix = config.modulePrefix;
- Resolver = Resolver;
+ Resolver = Resolver.withModules(compatModules);
}

- loadInitializers(Eng, modulePrefix);
+ loadInitializers(Eng, modulePrefix, compatModules);

export default Eng;

```

--------------------------------

### Basic Acceptance Test for Engine Routing

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/testing-acceptance.md

Write an acceptance test to verify navigation within the mounted engine. This test simulates user interaction to check if routing works as expected.

```javascript
// admin-engine/tests/acceptance/basic-test.js
import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
import { visit, click, currentURL } from '@ember/test-helpers';

module('basic acceptance test', function(hooks) {
  setupApplicationTest(hooks);

  test('the user can visit home page', async function(assert) {
    await visit('/');
    await click('.user-menu-item');

    assert.equal(currentURL(), '/users');
  });
});

```

--------------------------------

### Transition to External Route using Route

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/deprecations.md

Replaces `transitionToExternal` with `this.router.transitionToExternal` for route transitions in engines.

```javascript
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class FooRoute extends Route {
  @service session;

  beforeModel() {
    if (!this.session.isAuthenticated) {
      this.transitionToExternal('login');
    }
  }
}
```

```javascript
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class FooRoute extends Route {
  @service router;
  @service session;

  beforeModel() {
    if (!this.session.isAuthenticated) {
      this.router.transitionToExternal('login');
    }
  }
}
```

--------------------------------

### Configure Environment in config/environment.js

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Update the config/environment.js file within your Engine's config directory to set the modulePrefix and environment.

```javascript
// config/environment.js

'use strict';

module.exports = function(environment) {
  const ENV = {
    modulePrefix: 'super-blog',
    environment: environment
  }

  return ENV;
};
```

--------------------------------

### Transition to External Route Programmatically

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/link-to-external.md

Programmatically transition to an external route from within your Engine using methods like `transitionToExternal`. This is useful for handling navigation logic in route or controller actions.

```javascript
import Route from "@ember/routing/route";
import { action } from '@ember/object';

export default class YourRoute extends Route {
  @action
  goHome() {
    this.transitionToExternal('home');
  }
});
```

--------------------------------

### Destroy a Component from an In-Repo Engine

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Command to remove a component from an in-repo engine. Replace 'generate' with 'destroy' and provide the correct component and engine names.

```shell
ember destroy component <component-name> --in-repo <in-repo-name>
```

--------------------------------

### Component Template

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/testing-integration.md

The Handlebars template for the 'hello-name' component.

```hbs
{{!--  admin-engine/addon/components/hello-name.hbs --}}
Hello, {{@name}}!
```

--------------------------------

### Link to the Engine's Root Route from Within the Engine

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/links.md

Use this to link to the root of the Engine (its mount point) from within the Engine itself. The route path 'application' corresponds to the mount point.

```handlebars
<LinkTo @route="application">Goes to Blog Home</LinkTo>
```

--------------------------------

### Define External Routes in Engine

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/link-to-external.md

Specify external routes that your Engine needs to link to in the `dependencies` property of your engine's `addon/engine.js` file. The host application will then provide the actual paths for these routes.

```javascript
// super-blog/addon/engine.js
export default class SuperBlog extends Engine {
  // ...
  dependencies = {
    externalRoutes: [
      'home',
      'settings'
    ]
  };
}
```

--------------------------------

### Engine Dependencies Configuration

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

This JSON snippet shows the 'dependencies' section of a package.json file for an engine, highlighting the need for 'ember-cli-htmlbars' for template compilation.

```json
// package.json
"dependencies": {
  "ember-cli-htmlbars": "^1.1.0"
}
```

--------------------------------

### Generate Resource using --in Flag

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Use the `--in` flag with the generate command to specify the directory for creating resources within an in-repo addon. This is available from ember-cli@3.7 onwards.

```shell
ember generate component awesome-sauce --in ./lib/foo
```

--------------------------------

### Link to a Specific Route from Host Application

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/links.md

Use this when linking to a route within an Engine from the host application. The route path includes the Engine's mount point.

```handlebars
<LinkTo @route="super-blog.posts.index">Comments</LinkTo>
```

--------------------------------

### Mounting an Engine in Host App Router

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/testing-acceptance.md

Configure the host application's router to mount an Ember Engine at a specific path. This is essential for testing engine integration.

```javascript
import EmberRouter from '@ember/routing/router';
import config from './config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function() {
  this.mount('admin-engine', { path: '/admin' });
});

export default Router;
```

--------------------------------

### Link to the Index Route from Within the Engine

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/links.md

An alternative way to link to the root of the Engine from within the Engine itself, using the 'index' route.

```handlebars
<LinkTo @route="index">Also goes to Blog Home</LinkTo>
```

--------------------------------

### Define Engine Class in addon/engine.js

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Add the necessary code to addon/engine.js to define your Engine class, including its modulePrefix, Resolver, and loading initializers. This structure is similar to an Ember Application's app.js.

```javascript
// addon/engine.js
import Engine from '@ember/engine';

import loadInitializers from 'ember-load-initializers';
import Resolver from 'ember-resolver';

import config from './config/environment';

const { modulePrefix } = config;

export default class YourEngine extends Engine {
  modulePrefix = modulePrefix;
  Resolver = Resolver;
}

loadInitializers(YourEngine, modulePrefix);
```

--------------------------------

### Dependency Resolution Table

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/bundling.md

Illustrates how Ember Engines bundles dependencies based on their presence and version in both the host application and the engine. This table helps understand where each dependency will be included in the final build output.

```markdown
| Dependency Name | Engine A | Host |
|=================|==========|======|
| Foo             | v2       | v1   |
| Bar             | v1       | N\A  |
| Baz             | v1       | v2   |
| Qux             | v2       | v2   |
```

--------------------------------

### Route Serializer Implementation

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/lazy-loading.md

Replace `Route#serialize` functions with inline route serializers in `routes.js` for lazily loaded routable engines. This ensures URLs can be constructed before the engine is loaded.

```javascript
function serializePost(model) {
  return { post_id: model.id };
}

export default buildRoutes(function() {
  this.route('post', { serialize: serializePost });
});
```

--------------------------------

### Enable Lazy Loading for an Engine

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/lazy-loading.md

Set the `lazyLoading.enabled` flag to `true` in your engine's `index.js` to enable lazy loading. This is the primary step for implementing lazy loading.

```javascript
const { buildEngine } = require('ember-engines/lib/engine-addon');

module.exports = buildEngine({
  name: 'super-blog',
  lazyLoading: {
    enabled: true
  }
});
```

--------------------------------

### Integration Test for Component

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/testing-integration.md

An integration test for the 'hello-name' component using ember-qunit and ember-engines test support. This test renders the component and asserts its output.

```js
// <app-name>/tests/integration/components/hello-name-test.js

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import { setupEngine } from 'ember-engines/test-support';

module('Integration | Component | hello-name', function(hooks) {
  setupRenderingTest(hooks);
  setupEngine(hooks, 'admin-engine')

  test('it renders', async function(assert) {
    await render(hbs`<HelloName @name="Tom"/>`, { owner: this.engine });

    assert.equal(this.element.textContent.trim(), 'Hello, Tom!');
  });
});
```

--------------------------------

### Camelized Engine Names

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/deprecations.md

Illustrates the change from camelized engine names to kebab-case in the host application's engine configuration for better compatibility with package names.

```javascript
export default class App extends Application {
  // ...
  engines = {
    'superBlog': {
      dependencies: {
        services: [
          'store'
        ]
      }
    }
  }
}
```

```javascript
export default class App extends Application {
  // ...
  engines = {
    'super-blog': {
      dependencies: {
        services: [
          'store'
        ]
      }
    }
  }
}
```

--------------------------------

### Stubbing a Service Dependency in Acceptance Test

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/testing-acceptance.md

Create and register a stub for a service dependency within your acceptance test. This allows you to control the service's behavior during testing.

```javascript
// admin-engine/tests/acceptance/basic-test.js
import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
import { visit, click, currentURL } from '@ember/test-helpers';
import Service from '@ember/service';

//Stub location service
class LocationStub extends Service {
  city = 'New York';
  country = 'USA';
  currentLocation = {
    x: 1234,
    y: 5678
  };

  getCurrentCity() {
    return this.city;
  }

  getCurrentCountry() {
    return this.country;
  }
}

module('basic acceptance test', function(hooks) {
  setupApplicationTest(hooks);

  test('the user can visit home page', async function(assert) {
    this.owner.register('service:location-service', LocationStub);

    await visit('/');
    await click('.user-menu-item');

    assert.equal(currentURL(), '/users');
  });
});

```

--------------------------------

### Stubbing an External Route Dependency in Acceptance Test

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/testing-acceptance.md

Stub an external route dependency by registering a mock router service. This allows you to test transitions to external routes without actually navigating.

```javascript
// admin-engine/tests/acceptance/basic-test.js
import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
import { visit, click, currentURL } from '@ember/test-helpers';
import Service from '@ember/service';

module('basic acceptance test', function(hooks) {
  setupApplicationTest(hooks);

  test('the user can click on the home button and trigger external transition', async function(assert) {
    this.owner.unregister('service:router');
    this.owner.register(
      'service:router',
      class extends Service {
        transitionToExternal(actual) {
          let expected = 'home';
          assert.equal(actual, expected);
        }
      }
    );

    await visit('/');
    await click('.back-to-home');
  });
});

```

--------------------------------

### Acceptance Test for Engine Route Navigation

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/testing-acceptance.md

Write an acceptance test to verify that a user can navigate to an engine's mounted route within the host application. This test uses standard Ember testing helpers.

```javascript
import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
import { visit, click, currentURL } from '@ember/test-helpers';

module('basic acceptance test', function(hooks) {
  setupApplicationTest(hooks);

  test('the user can visit /admin page', async function(assert) {
    await visit('/');
    await click('.admin-menu-item');

    assert.equal(currentURL(), '/admin');
  });
});
```

--------------------------------

### Link to External Route using Component

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/link-to-external.md

Use the `<LinkToExternal/>` component within your Engine's templates to create links to routes that are defined as external dependencies. The `@route` argument specifies the name of the external route.

```handlebars
<LinkToExternal @route="home">Go Home</LinkToExternal>
```

--------------------------------

### Configure Asset URI Generation for CDN

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/deploying.md

Implement a `generateURI` function in `ember-cli-build.js` to specify the location of engine assets when served from a static server or CDN. This is useful for production environments.

```javascript
// host-app/ember-cli-build.js
let app = new EmberApp(defaults, {
  assetLoader: {
    generateURI(filePath) {
      if (EmberApp.env() === 'production') {
        return `https://production.cdn.com/${filePath}`;
      } else {
        return `local/static/${filePath}`;
      }
    }
  }
});

```

--------------------------------

### Destroy a Route from an In-Repo Engine

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Command to remove a route from an in-repo engine. Replace 'generate' with 'destroy' and provide the correct route and engine names.

```shell
ember destroy route <route-name> --in-repo <in-repo-name>
```

--------------------------------

### Link to a Route Within the Same Engine

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/links.md

Use this when linking to a route from within the Engine itself. The route path is relative to the Engine's mount point and omits it.

```handlebars
<LinkTo @route="posts.index">Comments</LinkTo>
```

--------------------------------

### Add ember-engines-router-service (v0.10 -> v0.11)

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/migrations.md

Add `ember-engines-router-service` to the engine's `package.json` dependencies to enable `@service router;` injection and access the full RouterService API.

```diff
# package.json
{
    "dependencies": {
+       "ember-engines-router-service": "^0.6.0",
            ...
    }
}
```

--------------------------------

### Replace with External Route using Route

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/deprecations.md

Replaces `replaceWithExternal` with `this.router.replaceWithExternal` for route replacements in engines.

```javascript
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class FooRoute extends Route {
  @service session;

  beforeModel() {
    if (!this.session.isAuthenticated) {
      this.replaceWithExternal('login');
    }
  }
}
```

```javascript
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class FooRoute extends Route {
  @service router;
  @service session;

  beforeModel() {
    if (!this.session.isAuthenticated) {
      this.router.replaceWithExternal('login');
    }
  }
}
```

--------------------------------

### Remove Legacy Built-in Components (v0.10 -> v0.11)

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/migrations.md

Remove `@ember/legacy-built-in-components` from `package.json` dependencies if it was only added for Ember Engines.

```diff
# package.json
{
    "dependencies": {
-       "@ember/legacy-built-in-components": "^0.5.0",
            ...
    }
}
```

--------------------------------

### Update engine.js for Vite Support (v0.12 -> v0.13)

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/migrations.md

Modify `engine.js` to integrate Vite support by updating the Resolver and loadInitializers. This change is compatible with classic apps if `ember-engines` is also upgraded.

```diff
// addon/engine.js
import Engine from 'ember-engines/engine';
import Resolver from 'ember-resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';
+ import compatModules from '@embroider/virtual/compat-modules';

const { modulePrefix } = config;

class Eng extends Engine {
modulePrefix = config.modulePrefix;
-    Resolver = Resolver;
+    Resolver = Resolver.withModules(compatModules);
}

-loadInitializers(Eng, modulePrefix);
+loadInitializers(Eng, modulePrefix, compatModules);

export default Eng;
```

--------------------------------

### Replace EmberRouter with Embroider Router

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/embroider.md

Update your application's router to use `@embroider/router` for compatibility with Embroider's bundle splitting and lazy engine loading.

```diff
// <your app>/app/router.js
-import EmberRouter from '@ember/routing/router';
+import EmberRouter from '@embroider/router';

```

--------------------------------

### Complex Engine Routes Definition

Source: https://github.com/ember-engines/ember-engines-website/blob/master/tests/dummy/app/templates/docs/quickstart.md

Define a more complex routing map for a routable engine, including nested routes and dynamic segments. This uses the same syntax as a standard Ember application's router map.

```javascript
import buildRoutes from 'ember-engines/routes';

export default buildRoutes(function() {
  this.route('new');

  this.route('post', { path: 'post/:id' }, function() {
    this.route('comments', function() {
      this.route('comment', { path: ':id' });
    });
  });
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.