{"id":13806509,"url":"https://github.com/mitchlloyd/ember-islands","last_synced_at":"2026-01-25T02:07:04.366Z","repository":{"id":27662275,"uuid":"31147970","full_name":"mitchlloyd/ember-islands","owner":"mitchlloyd","description":"Render Ember components anywhere on a server-rendered page to create \"Islands of Richness\"","archived":false,"fork":false,"pushed_at":"2020-06-25T02:34:15.000Z","size":559,"stargazers_count":235,"open_issues_count":8,"forks_count":24,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-13T21:43:40.661Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/mitchlloyd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-22T01:14:40.000Z","updated_at":"2025-03-17T13:50:27.000Z","dependencies_parsed_at":"2022-09-19T15:50:43.898Z","dependency_job_id":null,"html_url":"https://github.com/mitchlloyd/ember-islands","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/mitchlloyd/ember-islands","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitchlloyd%2Fember-islands","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitchlloyd%2Fember-islands/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitchlloyd%2Fember-islands/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitchlloyd%2Fember-islands/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mitchlloyd","download_url":"https://codeload.github.com/mitchlloyd/ember-islands/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitchlloyd%2Fember-islands/sbom","scorecard":{"id":650292,"data":{"date":"2025-08-11","repo":{"name":"github.com/mitchlloyd/ember-islands","commit":"4978347287751505369ede181adb223918883b27"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.9,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":1,"reason":"Found 4/23 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 15 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"120 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-p6mr-pxg4-68hx","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-wxhq-pm8v-cw75","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-hr2v-3952-633q","Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m","Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-mpcf-4gmh-23w8","Warn: Project is vulnerable to: GHSA-9qj9-36jm-prpv","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c","Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq","Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-6c3j-c64m-qhgq","Warn: Project is vulnerable to: GHSA-gxr4-xjj5-5px2","Warn: Project is vulnerable to: GHSA-jpcq-cgw6-v4j6","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-46fh-8fc5-xcwx","Warn: Project is vulnerable to: GHSA-h5mp-5q4p-ggf5","Warn: Project is vulnerable to: GHSA-2m96-9w4j-wgv7","Warn: Project is vulnerable to: GHSA-h726-x36v-rx45","Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c","Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-wrvr-8mpx-r7pp","Warn: Project is vulnerable to: GHSA-hxm2-r34f-qmc5","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-446m-mv8f-q348","Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4","Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g","Warn: Project is vulnerable to: GHSA-56x4-j7p9-fcf9","Warn: Project is vulnerable to: GHSA-v78c-4p63-2j6c","Warn: Project is vulnerable to: GHSA-gwg9-rgvj-4h5j","Warn: Project is vulnerable to: GHSA-pc58-wgmc-hfjr","Warn: Project is vulnerable to: GHSA-vvv8-xw5f-3f88","Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-q75g-2496-mxpp","Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-xfhp-gmh8-r8v2","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3","Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj","Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4","Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq","Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9","Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3","Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7","Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq","Warn: Project is vulnerable to: GHSA-v2p6-4mp7-3r9v","Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv","Warn: Project is vulnerable to: GHSA-5v72-xg48-5rpm","Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv","Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q","Warn: Project is vulnerable to: GHSA-crh6-fp67-6883","Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5","Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-21T13:20:37.470Z","repository_id":27662275,"created_at":"2025-08-21T13:20:37.470Z","updated_at":"2025-08-21T13:20:37.470Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28741664,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T01:40:51.112Z","status":"online","status_checked_at":"2026-01-25T02:00:06.841Z","response_time":113,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-08-04T01:01:12.657Z","updated_at":"2026-01-25T02:07:04.349Z","avatar_url":"https://github.com/mitchlloyd.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":["End-user customization"],"readme":"\u003cimg\n  src=\"http://mitchlloyd.com/ember-islands/images/ember-islands-logo-700.png\"\n  width=\"350px\"\n  alt=\"Ember Islands Logo\"\n  title=\"Ember Islands Logo\"\u003e\n\n[![Build Status](https://travis-ci.org/mitchlloyd/ember-islands.svg?branch=master)](https://travis-ci.org/mitchlloyd/ember-islands)\n\nRender Ember components into existing HTML.\n\nThis addon provides a practical way to introduce Ember into a server-rendered\napplication. It can facilitate a gradual redesign from a server-rendered\napplication to a client-rendered application.\n\n## Installation\n\nIf you're starting a new Ember project, follow the Getting Started \u003e Quick Start\nsection of the [Ember Guides](https://guides.emberjs.com). Once you have an Ember\nCLI project you can install Ember Islands.\n\n```\nember install ember-islands\n```\n\nVersion 1.x of this addon is tested against Ember 2.x versions. If you have\ntrouble with an earlier version of Ember try using version 0.5.x of Ember\nIslands.\n\n## Usage\n\nAdd a placeholder for an Ember Component inside your server-rendered HTML.\n\n```html\n\u003cdiv\n  data-component='user-profile'\n  data-attrs='{\"name\": \"Sally User\", \"id\": \"4\"}'\u003e\n\n  \u003cp\u003eSally likes hiking in the wilderness\u003c/p\u003e\n\n\u003c/div\u003e\n```\n\n* `data-component` names the component to render into this placeholder.\n* `data-attrs` is a JSON object that will become the component's `attrs`.\n* Content inside of the placeholder tag (`innerHTML`) will be the component's\n  `innerContent` attribute.\n\nNext define a component for that placeholder. In this example we'll show the\ndetails of a user when someone clicks on their name.\n\n```handlebars\n{{! inside of app/templates/components/user-profile.hbs}}\n\n\u003ch2 {{action 'showDetails'}}\u003e\n  {{name}}\n\u003c/h2\u003e\n\n{{#if isShowingDetails}}\n  \u003cp\u003e{{description}}\u003c/p\u003e\n  {{user.email}}\n  {{user.address}}\n{{/if}}\n```\n\nInside of the component JavaScript file we'll load a user from the Ember Data\nstore when the name is clicked and reveal the details portion of the template.\n\n```javascript\n// inside of app/components/user-profile.js\n\nimport Ember from 'ember';\nconst { Component, inject } = Ember;\n\nexport default Component.extend({\n  store: inject.service(),\n\n  init() {\n    this._super(...arguments);\n    this.description = this.get('innerContent').htmlSafe();\n  },\n\n  actions: {\n    showDetails() {\n      this.get('store').findRecord('user', this.get('id')).then((user) =\u003e {\n        this.set('user', user);\n      });\n\n      this.set('isShowingDetails', true);\n    }\n  }\n})\n```\n\nNotice that before rendering `innerContent` we called `htmlSafe` on it. Ember\nwill escape this HTML if we don't mark it as safe.\n\nIf you want to render island components on any server-rendered page you can add\nthe `{{ember-islands}}` component to your `application.hbs` template file and\nconfigure the router `locationType` to ignore the URL.\n\n```handlebars\n{{! inside of app/templates/application.hbs}}\n\n{{ember-islands}}\n```\n\n```javascript\n// in /config/environment.js\n\nmodule.exports = function(environment) {\n  var ENV = {\n    // ... other config\n\n    locationType: 'none',\n\n    // ... more config\n  }\n}\n\n```\n\nMore advanced uses are described in [Rendering Ember Islands Based on URL Paths](#rendering-ember-islands-based-on-url-paths).\n\n\n## Rendering Ember Islands Based on URL paths\n\nExclusively using Ember Islands is a great way to start introducing components\ninto an application. However, you can also use Ember's routing and the\n`{{ember-islands}}` component to choose when to render island components. Let's\nlook at an example of using a combination of island components and `rootElement`\nconfiguration to handle different cases.\n\nIt's useful to control where your Ember Application is rendered so that we\ncould, for instance, maintain a consistent header and footer across the\nserver-rendered application. To do that we set the `rootElement` in\n`config/environment.js`.\n\n```javascript\n// in /config/environment.js\n\nmodule.exports = function(environment) {\n  var ENV = {\n    // ... other config\n\n    // Note that we have locationType set to something other than 'none'\n    locationType: 'auto',\n\n    APP: {\n      rootElement: '#ember-application'\n    }\n\n    // ... more config\n  }\n}\n```\n\nNormally Ember will find and attach itself to the `body` element of the page. This\nconfiguration will let us pick where it renders.\n\nLet's say that your server-rendered application has a `/dashboard` page where\nyou would like to introduce some ember components with Ember Islands.\n\nYour sever-rendered HTML might look like this:\n\n```html\n\u003cheader\u003eHeader\u003c/header\u003e\n\n\u003cdiv id=\"ember-application\"\u003e\n\n  \u003ch2\u003eSoak Up These Metrics\u003c/h2\u003e\n\n  \u003c!-- The sign-ups-per-day component will be rendered here. --\u003e\n  \u003cdiv data-component=\"sign-ups-per-day\"\u003e\u003c/div\u003e\n\n  \u003cdiv class=\"my-server-rendered-chart\"\u003eServer Rendered Pie Chart\u003c/div\u003e\n\n  \u003c!-- The net-promoter-score component will be rendered here. --\u003e\n  \u003cdiv data-component=\"net-promoter-score\"\u003e\u003c/div\u003e\n\n\u003c/div\u003e\n\n\u003cfooter\u003eFooter\u003c/footer\u003e\n```\n\nNotice that your island components must be placed inside of the Ember\nApplication container. Otherwise they will not receive clicks or other mouse\nevents.\n\nYour matching `dashboard.hbs` template will render the `ember-islands` component\nwhich will inject the `sign-ups-per-day` and `net-promoter-score` components\ninto your static content.\n\n```handlebars\n{{! inside of app/templates/dashboard.hbs}}\n{{ember-islands}}\n```\n\nNow let's say that you have another page (`/invoices`) where you would like to\nrender an Ember App using the normal routing workflow without Ember Islands.\n\nIn this case your server-rendered HTML could look like this:\n\n```html\n\u003cheader\u003eHeader\u003c/header\u003e\n\n\u003ch2\u003eGet Paid\u003c/h2\u003e\n\n\u003c!-- Your Ember app will be rendered here. --\u003e\n\u003cdiv id=\"ember-application\"\u003e\u003c/div\u003e\n\n\u003cfooter\u003eFooter\u003c/footer\u003e\n```\n\nIn the `app/templates/invoices.hbs` template you can render HTML and components\nin the typical Ember way:\n\n```handlebars\n{{! inside of app/templates/invoices.hbs}}\n\u003ch1\u003eAll The Invoices\u003c/h1\u003e\n{{invoice-list invoices=model}}\n```\n\nThe routing file to support this setup would look like this:\n\n```javascript\nRouter.map(function() {\n  this.route('dashboard');\n  this.route('invoices');\n});\n```\n\n## Reconciling Ember Island Components with DOM Changes\n\nIf you find yourself in the unfortunate situation where you need to\nmanipulate your DOM with non-Ember JavaScript _and_ keep your components in\nsync with those changes, Ember Islands still has your back.\n\nInside of your app.js file (or any imported file for that matter) expose the\n`reconcile` function:\n\n```js\nimport { reconcile } from 'ember-islands';\nwindow.reconcileEmberIslandComponents = reconcile;\n```\n\nThe `reconcile` function supports the following cases:\n1. When encountering a new placeholder element, `reconcile` will render a new\n   component.\n1. When a previously used placeholder element has been removed, `reconcile`\n   will tear down the previously rendered component.\n1. When the `data-attrs` property on a placeholder element has been changed,\n   `reconcile` will update the previously rendered component with the new\n   attrs.\n1. When the `data-component` property on a placeholder changes, `reconcile`\n   will tear down the previously rendered component and render a new\n   component according to the new `data-component` name.\n\n:warning: Some versions of Ember before 2.15 retain top-level components\nin memory after they are destroyed. Depending on your setup this may not\nbe an issue. But if you have a long-running app where users don't refresh\nthe page, you may want to consider other alternatives like calling the\n[`reset`](https://www.emberjs.com/api/ember/2.15/classes/Ember.Application/methods/reset?anchor=reset)\nmethod on your Ember application.\n\n## Integration Concerns\n\nTo get started, add your `vendor.js` and `\u003capplication-name\u003e.js` files into your\nserver-rendered page where you want to use Ember Islands. You can use the\n`app/index.html` file from your Ember CLI project as a guide.\n\n### Escaping JSON for the data-attrs Attribute\n\nYou may find yourself passing JSON that contains quotes or other characters that\naren't valid inside of HTML attributes.\n\n```html\n\u003cdiv data-component=\"my-age\" data-attrs=\"{\"data\": \"I'm \u003c 100 years old\"}\"\u003e\u003c/div\u003e\n```\n\nEscape HTML characters in JSON data before adding it to your markup. For\ninstance in Ruby:\n\n```ruby\nCGI::escapeHTML %({\"data\": \"I\\'m \u003c 100 years old\"})\n# =\u003e \"{\u0026quot;data\u0026quot;: \u0026quot;I\u0026#39;m \u0026lt; 100 years old\u0026quot;}\"\n```\n\n```html\n\u003cdiv data-component=\"my-age\" data-attrs=\"{\u0026quot;data\u0026quot;: \u0026quot;I\u0026#39;m \u0026lt; 100 years old\u0026quot;}\"\u003e\u003c/div\u003e\n```\n\nInside of your component, this string will be unescaped:\n\n```javascript\n// inside of app/components/my-age.js\n\nimport Ember from 'ember';\nconst { Component } = Ember;\n\nexport default Component.extend({\n  init() {\n    this._super(...arguments);\n    console.log(this.get('data'));\n    // '{\"data\": \"I'm \u003c 100 years old\"}'\n  }\n})\n```\n\nYour server-side language or framework will have some means to escape a string\nfor HTML. Rails has the `h` template helper and the next example shows a\nhelper that will produce HTML-escaped JSON.\n\n### Example Rails Usage with Helper\n\nInside of your Rails view files you can render a component using HTML data\nattributes.\n\n```html+erb\n\u003cdiv data-component=\"my-component\" data-attrs=\"\u003c%= {\n  title: @post.title,\n  body: @post.body\n}.to_json %\u003e\"\u003e\u003c/div\u003e\n```\n\nIf you're doing this often you'll want to create a view helper.\n\n```ruby\nmodule EmberComponentHelper\n  def ember_component(name, attrs = {})\n    content_tag(:div, '', data: { component: name, attrs: attrs.to_json })\n  end\nend\n```\n\nThen you can use that helper in your view files.\n\n```html+erb\n\u003c%= ember_component 'my-component', title: @post.title, body: @post.body %\u003e\n```\n\n### Storing Config Data\n\nBy default Ember CLI stores configuration from `config/environment.js` in a\n`meta` tag. It will be more useful to have Ember CLI to build the config object\ninto your compiled JavaScript files.\n\n```javascript\n// Inside of ember-cli-build.js\nvar app = new EmberApp({\n  storeConfigInMeta: false\n});\n```\n\n### Fingerprinting\n\nEmber CLI will fingerprint your files for you by default when you `build` your\napplication. This will work well with many deployment strategies and with\n[ember-cli-deploy](https://github.com/ember-cli/ember-cli-deploy). When you\ndeploy your Ember code, you can update your server application to use the\nnew version of `vendor.js` and `my-application.js`.\n\nYou might find it convenient to let your server application fingerprint these\nfiles instead. For instance if you're using Rails you can prevent Ember CLI from\nfingerprinting your files, build your Ember application assets into your Rails\n`assets/`, path and let Rails do its own fingerprinting during its `rake\nassets:precompile` task. For this to work, you'll want to turn off Ember CLI's\nfingerprinting.\n\n```javascript\n// Inside of ember-cli-build.js\nvar app = new EmberApp({\n  fingerprint: {\n    enabled: false\n  }\n});\n```\n\nAnother option for Rails is to let Ember CLI continue to fingerprint your files\nbut also have it generate a `manifest-md5hash.json` file for Sprockets to\nconsume.\n\n```javascript\n// Inside of ember-cli-build.js\nvar app = new EmberApp({\n  fingerprint: {\n    generateRailsManifest: true\n  }\n});\n```\n\n### Conflicting JavaScript Libraries\n\nIf you are using libraries that rely on global variables to work (e.g. jQuery,\nunderscore, moment) you may run into conflicts with JavaScript libraries that\nare loaded in your server-rendered application.\n\nIn your `ember-cli-build.js` file you can tell Ember CLI to exclude jQuery from\nthe build in certain environments\n\n```javascript\n// Inside of ember-cli-build\nvar vendorFiles = {};\n\nif (EmberApp.env() !== 'test') {\n  vendorFiles['jquery.js'] = null;\n}\n\nvar app = new EmberApp({\n  vendorFiles: vendorFiles,\n});\n```\n\nYou may only want to only include duplicated dependencies in your testing\nenvironment.\n\n```javascript\napp.import({\n  test: 'bower_components/underscore/underscore.js'\n});\n```\n\n## Other Resources\n\n[Discussing the need for Ember Islands at Global Ember Meetup](https://vimeo.com/152241622)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitchlloyd%2Fember-islands","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmitchlloyd%2Fember-islands","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitchlloyd%2Fember-islands/lists"}