{"id":15541754,"url":"https://github.com/simonihmig/ember-embedded-snippet","last_synced_at":"2025-04-15T01:07:47.770Z","repository":{"id":37007278,"uuid":"305301085","full_name":"simonihmig/ember-embedded-snippet","owner":"simonihmig","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-07T16:14:38.000Z","size":2302,"stargazers_count":16,"open_issues_count":15,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-15T01:07:37.110Z","etag":null,"topics":["ember","ember-addon"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/simonihmig.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-19T07:37:44.000Z","updated_at":"2024-09-13T09:27:59.000Z","dependencies_parsed_at":"2024-05-07T17:31:28.592Z","dependency_job_id":"c971b8a9-bb2f-4da5-96b8-35b049951ebd","html_url":"https://github.com/simonihmig/ember-embedded-snippet","commit_stats":null,"previous_names":["kaliber5/ember-embedded-snippet"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonihmig%2Fember-embedded-snippet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonihmig%2Fember-embedded-snippet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonihmig%2Fember-embedded-snippet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonihmig%2Fember-embedded-snippet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonihmig","download_url":"https://codeload.github.com/simonihmig/ember-embedded-snippet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248986312,"owners_count":21194025,"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"],"created_at":"2024-10-02T12:19:30.458Z","updated_at":"2025-04-15T01:07:47.754Z","avatar_url":"https://github.com/simonihmig.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ember-embedded-snippet\n==============================================================================\n\n![CI](https://github.com/kaliber5/ember-embedded-snippet/workflows/CI/badge.svg)\n\nEmbed your Ember app as a WebComponent into external pages with a simple JavaScript snippet.\n\n\nCompatibility\n------------------------------------------------------------------------------\n\n* Ember.js v3.16 or above\n* Ember CLI v3.20 or above\n* Node.js v12 or above\n\n\nInstallation\n------------------------------------------------------------------------------\n\n```\nember install ember-embedded-snippet\n```\n\nTo allow compatibility with `ember-auto-import` v2 and Embroider, since `v0.7.0` the addon requires some manual \nsetup to postprocess Ember's build.\n\nIn your `ember-cli-build.js` change the last part:\n\n```diff\nmodule.exports = function (defaults) {\n  let app = new EmberAddon(defaults, {\n    // ...\n  });\n\n-  return app.toTree();\n+  return require('ember-embedded-snippet').process(app, app.toTree());\n}\n```\n\nThen you should also add the custom element invocation to your `app/index.html`, so when running locally using `ember serve`\nthe app is bootstrapped the same way as when it is embedded in production. See also the \"Usage\" below!\n\n```diff\n  \u003cbody\u003e\n    {{content-for \"body\"}}\n\n+    \u003cmy-app-name\u003e\u003c/my-app-name\u003e\n    \n    \u003cscript src=\"{{rootURL}}assets/vendor.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"{{rootURL}}assets/\u003c%= name %\u003e.js\"\u003e\u003c/script\u003e\n\n    {{content-for \"body-footer\"}}\n  \u003c/body\u003e\n```\n\n\u003e Note: doing this also for `tests/index.html` will not work, you should keep that file as-is. That means tests use the default\n\u003e bootstrapping process of Ember.\n\nUsage\n------------------------------------------------------------------------------\n\nAdd a snippet like this to your static or server rendered HTML page:\n\n```html\n\u003cscript src=\"https://www.your-deployed-ember-app.com/embed.js\"\u003e\u003c/script\u003e\n\u003cmy-app-name\u003e\u003c/my-app-name\u003e\n```\n\n`my-app-name` is the name of your app. As custom elements require to contain a dash, if your app name is a single word, append the `-app` suffix.\n\n### Shadow DOM\n\nTo prevent styles leaking from the parent page into your app or vice versa, you can enable [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) support:\n\n```html\n\u003cmy-app-name shadow\u003e\u003c/my-app-name\u003e\n```\n\n\u003e Note that even with shadow DOM, inherited styles will also be inherited by your shadow DOM, thus leak into your app. \n\u003e So you might want to [reset inheritable styles](https://developers.google.com/web/fundamentals/web-components/shadowdom#reset)\n\n### Custom arguments\n\nAny other attributes added to the custom element are taken as custom arguments, that you can read from the `embedded` service's `args` property:\n\n```html\n\u003cmy-app-name foo=\"bar\" enable-foo\u003e\u003c/my-app-name\u003e\n```\n\n```js\nimport Controller from '@ember/controller';\nimport { inject as service } from '@ember/service';\n\nexport default class FooController extends Controller {\n  @service\n  embedded;\n  \n  get foo() {\n    return this.embedded.args.hasOwnProperty('enable-foo') ? this.embedded.args.foo : null;\n  }\n}\n```\n\n\nContributing\n------------------------------------------------------------------------------\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n\nLicense\n------------------------------------------------------------------------------\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonihmig%2Fember-embedded-snippet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonihmig%2Fember-embedded-snippet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonihmig%2Fember-embedded-snippet/lists"}