{"id":15161403,"url":"https://github.com/dazzlingfugu/ember-cli-embedded","last_synced_at":"2025-08-20T04:23:22.144Z","repository":{"id":38797702,"uuid":"42884675","full_name":"DazzlingFugu/ember-cli-embedded","owner":"DazzlingFugu","description":"Control how your Ember applications boot in non-Ember pages/apps.","archived":false,"fork":false,"pushed_at":"2024-10-06T10:57:51.000Z","size":4753,"stargazers_count":16,"open_issues_count":0,"forks_count":4,"subscribers_count":26,"default_branch":"master","last_synced_at":"2024-10-10T11:05:28.017Z","etag":null,"topics":["ember","ember-addon","hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DazzlingFugu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-09-21T18:11:22.000Z","updated_at":"2024-10-06T10:57:54.000Z","dependencies_parsed_at":"2023-02-15T13:16:13.891Z","dependency_job_id":"60d4a544-31f7-44ff-a0d6-7af745370179","html_url":"https://github.com/DazzlingFugu/ember-cli-embedded","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DazzlingFugu%2Fember-cli-embedded","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DazzlingFugu%2Fember-cli-embedded/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DazzlingFugu%2Fember-cli-embedded/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DazzlingFugu%2Fember-cli-embedded/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DazzlingFugu","download_url":"https://codeload.github.com/DazzlingFugu/ember-cli-embedded/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219867829,"owners_count":16555886,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember","ember-addon","hacktoberfest"],"created_at":"2024-09-27T00:05:47.113Z","updated_at":"2024-10-10T11:05:54.647Z","avatar_url":"https://github.com/DazzlingFugu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-cli-embedded\n\n[![CI](https://github.com/DazzlingFugu/ember-cli-embedded/actions/workflows/ci.yml/badge.svg)](https://github.com/DazzlingFugu/ember-cli-embedded/actions/workflows/ci.yml) [![Ember Observer Score](https://emberobserver.com/badges/ember-cli-embedded.svg)](https://emberobserver.com/addons/ember-cli-embedded)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nMakes it easier to embed your Ember application in another (non-Ember) app.\n\nThis addon gives you more control over how and when your Ember app will boot and also allows how to add/override some configuration so that the Ember app can boot with some context-dependent config.\n\nWe found it especially useful, for example, when migrating an existing app to Ember part by part.\n\n## Compatibility\n\n- Ember.js v4.8 or above\n- Ember CLI v4.8 or above\n- Node.js v18 or above\n\n## Installation\n\n```\nember install ember-cli-embedded\n```\n\n## Usage\n\n### Configuration\n\nThis plugin is opt-in by default, it does nothing to your app unless you configure it.\n\nIn your `config/environment.js`, add the following config to the `ENV`:\n\n```js\nlet ENV = {\n  ...,\n  modulePrefix: 'my-app-name',\n\n  embedded: {\n    delegateStart: true,\n    config: { // optional\n      // Default values for the config passed at boot\n    },\n  },\n\n  /*\n  * 1. If this key is undefined or set to `true`, you will have to start your app with `MyAppName.start(...)`\n  * 2. If this key is set to `SomeOtherAppName`, you will have to start your app with `SomeOtherAppName.start(...)`\n  * 3. If this key is set to `false`, you will NOT be able to start your app with `.start(...)` at all\n  */\n  exportApplicationGlobal: 'SomeOtherAppName'\n}\n```\n\nDoing so will make your application hold until you manually start it. (read on to learn more)\n\n\u003e For compatibility reasons, this behaviour will work as long as the value of `embedded` is truthy\n\u003e but we plan to remove it in a future version.  \n\u003e Please stick to the config format above.\n\n### Start your app\n\nIn your JS code, execute `MyAppName.start(/* optionalConfig */)` to resume the boot of your application. As per the example, it takes an optional configuration as its first argument.\n\n### Attention :warning:\n\n1. Your app **will not start** unless you call `MyAppName.start(/* optionalConfig */)` method.\n2. Calling `MyAppName.start(...)` will **not work** if you've set `exportApplicationGlobal: false` in `your config/environment.js`\n\n### Access the config from your application\n\n#### Via the Service `embedded`\n\nConsider the following `config/environment.js` file:\n\n```js\nlet ENV = {\n  ...,\n  modulePrefix: 'my-app',\n  embedded: {\n    config: {\n      option1: 'value-1',\n    },\n  },\n  ...\n}\n```\n\nAnd the application is started that way:\n\n```html\n\u003cscript\u003e\n  MyApp.start({ option2: \"value-2\" });\n\u003c/script\u003e\n```\n\nThen in your Services, Components, Controllers...\n\n```js\nclass MyService extends Service {\n  @service embedded;\n\n  @action\n  logSomeConfigKey() {\n    // Will log 'value-1'\n    console.log(this.embedded.option1);\n  }\n}\n```\n\n#### Via the container itself\n\nSometimes it can be more convenient to access the data directly from the container.\n\nFollowing the previous example:\n\n```js\nimport { getOwner } from '@ember/application';\n\n...\n\n// Returns the raw config\nlet embeddedConfig = getOwner(this).lookup('config:embedded');\n\n// Will log 'value-2'\nconsole.log(embeddedConfig.option2);\n```\n\n### Override your `APP` configuration\n\nThe startup object will be merged into your `APP` configuration key, which is very useful, for\ninstance, if you want to change the `rootElement` of your application and other context-sensitive\nvalues.\n\nConsider the following `config/environment.js` file:\n\n```js\nlet ENV = {\n  APP: {\n    rootElement: `#some-element`,\n  },\n\n  modulePrefix: \"my-app\",\n\n  embedded: {\n    config: {\n      option1: \"value-1\",\n    },\n  },\n};\n```\n\nAnd the application is started that way:\n\n```html\n\u003cscript\u003e\n  MyApp.start({ option2: \"value-2\" });\n\u003c/script\u003e\n```\n\nThis would result in:\n\n```js\nimport APP_ENV_CONFIG from \"my-app/config/environment\";\n\nassert.deepEqual(APP_ENV_CONFIG, {\n  APP: {\n    option2: \"value-2\",\n    rootElement: `#some-element`,\n  },\n\n  embedded: {\n    config: {\n      option1: \"value-1\",\n    },\n  },\n});\n```\n\n### About the test environment\n\nIn your test suite, you will probably want to let your application start automatically without this addon interfering.\n\nTo do that, make sure to disable the addon for the `test` environment:\n\n```js\n// file `config/environment.js`\n\nif (environment === \"test\") {\n  ENV.embedded.delegateStart = false;\n}\n```\n\n### TypeScript support\n\nIf your consuming application relies on TypeScript, you can make your life a bit easier by using the included types:\n\n**File `/types/my-project/index.d.ts`**\n\n```ts\nimport type BaseEmbeddedService from \"ember-cli-embedded/services/embedded\";\n\ndeclare global {\n  type EmbeddedService = BaseEmbeddedService\u003c{\n    one: string;\n    two?: string;\n  }\u003e;\n}\n\nexport {};\n```\n\n**File `/app/components/my-component.ts`**\n\n```ts\nimport Component from \"@glimmer/component\";\nimport { service } from \"@ember/service\";\n\nexport default class MyComponent extends Component {\n  /**\n   * To know why the modifier `declare` should be used when injecting a Service:\n   * https://github.com/typed-ember/ember-cli-typescript/issues/1406#issuecomment-778660505\n   */\n  @service\n  declare embedded: EmbeddedService;\n\n  get one() {\n    // Return type inferred: `string | undefined`\n    return this.embedded.get(\"one\");\n  }\n\n  get two() {\n    // TypeScript returns an error as `twoo` is not a recognised key\n    return this.embedded.get(\"twoo\");\n  }\n}\n```\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n## Contributors\n\n\u003c!-- readme: contributors,ember-tomster/- -start --\u003e\n\u003ctable\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/MrChocolatine\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/47531779?v=4\" width=\"100;\" alt=\"MrChocolatine\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eMrChocolatine\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/xcambar\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/657654?v=4\" width=\"100;\" alt=\"xcambar\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003excambar\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/GreatWizard\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/1322081?v=4\" width=\"100;\" alt=\"GreatWizard\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eGreatWizard\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/yonmey\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/3025706?v=4\" width=\"100;\" alt=\"yonmey\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eyonmey\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/jacky-peopledoc\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/45593806?v=4\" width=\"100;\" alt=\"jacky-peopledoc\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003ejacky-peopledoc\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/romgere\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/13900970?v=4\" width=\"100;\" alt=\"romgere\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eromgere\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/cah-danmonroe\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/11519684?v=4\" width=\"100;\" alt=\"cah-danmonroe\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003ecah-danmonroe\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/saintsebastian\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/8288415?v=4\" width=\"100;\" alt=\"saintsebastian\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003esaintsebastian\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/BlueCutOfficial\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/22059380?v=4\" width=\"100;\" alt=\"BlueCutOfficial\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eBlueCutOfficial\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/ndekeister-us\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/56396753?v=4\" width=\"100;\" alt=\"ndekeister-us\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003endekeister-us\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\u003c/tr\u003e\n\u003c/table\u003e\n\u003c!-- readme: contributors,ember-tomster/- -end --\u003e\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdazzlingfugu%2Fember-cli-embedded","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdazzlingfugu%2Fember-cli-embedded","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdazzlingfugu%2Fember-cli-embedded/lists"}