From 4b7fce7529b0baeacba63c831591f7dc4b0f7568 Mon Sep 17 00:00:00 2001 From: Simon Ihmig Date: Mon, 1 May 2023 22:49:10 +0200 Subject: [PATCH] Update dependencies for Ember 5 --- ember-stargate/README.md | 105 +++++++++++++++------------------ test-app/config/environment.js | 2 +- test-app/package.json | 2 +- yarn.lock | 50 ++++++++++++---- 4 files changed, 88 insertions(+), 71 deletions(-) diff --git a/ember-stargate/README.md b/ember-stargate/README.md index 6f8604d3..304b2386 100644 --- a/ember-stargate/README.md +++ b/ember-stargate/README.md @@ -1,5 +1,4 @@ -ember-stargate -============================================================================== +# ember-stargate [![CI](https://github.com/kaliber5/ember-stargate/actions/workflows/ci.yml/badge.svg)](https://github.com/kaliber5/ember-stargate/actions/workflows/ci.yml) [![Ember Observer Score](https://emberobserver.com/badges/ember-stargate.svg)](https://emberobserver.com/addons/ember-stargate) @@ -10,24 +9,18 @@ different place of the DOM tree than they are logically defined in the app. Implemented using lightweight Glimmer components and Ember's new `{{in-element}}`, but without its caveats. +## Compatibility -Compatibility ------------------------------------------------------------------------------- +- Ember.js v3.28 or above +- Embroider or ember-auto-import v2 -* Ember.js v3.24 or above -* Embroider or ember-auto-import v2 - - -Installation ------------------------------------------------------------------------------- +## Installation ``` ember install ember-stargate ``` - -Why this addon? ------------------------------------------------------------------------------- +## Why this addon? There are a number of existing solutions in the Ember ecosystem for the same problem, so why this addon you may ask? @@ -36,51 +29,53 @@ Let's see how it compares to some of those... #### ember-wormhole -The first addon to make portals popular in Ember uses proprietary implementation +The first addon to make portals popular in Ember uses proprietary implementation tricks, that make it potentially less stable. Also defining portal targets in your app is less flexible. #### ember-elsewhere -While using only public Ember APIs, due to its requirement to use Ember's +While using only public Ember APIs, due to its requirement to use Ember's `component` helper it comes with some caveats: -* you cannot send arbitrary content though the portal, it must be a single component -* you cannot use a [component in block form](https://github.com/ef4/ember-elsewhere/issues/2) -* the component helper does not support passing HTML attributes (as in regular angle bracket invocation) + +- you cannot send arbitrary content though the portal, it must be a single component +- you cannot use a [component in block form](https://github.com/ef4/ember-elsewhere/issues/2) +- the component helper does not support passing HTML attributes (as in regular angle bracket invocation) #### in-element -While Ember starting with 3.20 (or earlier using [ember-in-element-polyfill](https://github.com/ember-polyfills/ember-in-element-polyfill) +While Ember starting with 3.20 (or earlier using [ember-in-element-polyfill](https://github.com/ember-polyfills/ember-in-element-polyfill) has a built-in primitive with `{{in-element}}`, due to its (intentional) low-level nature it is suitable more for usage in addons (for things like modals, tooltips, dropdowns), but using it in apps is not very ergonomic: -* it requires you to pass a reference to the target DOM element, which is less ergonomic than a CSS selector or some other + +- it requires you to pass a reference to the target DOM element, which is less ergonomic than a CSS selector or some other higher-level way to define the target (e.g. a target component) -* that DOM element has to *exist* already before using `{{in-element}}`, so it's sensitive to rendering timings +- that DOM element has to _exist_ already before using `{{in-element}}`, so it's sensitive to rendering timings -Other than that, `{{in-element}}` is a very useful primitive, and in fact this addon uses it under the hood, -with just some simple higher-level abstractions on top of it! +Other than that, `{{in-element}}` is a very useful primitive, and in fact this addon uses it under the hood, +with just some simple higher-level abstractions on top of it! -Usage ------------------------------------------------------------------------------- +## Usage You need two things to make a portal work: define the content that should be sent through the portal using -``, and the target - identified by its name - where it should be rendered to +``, and the target - identified by its name - where it should be rendered to using ``. -Let's take an example where we want to render a sticky footer inside `application.hbs`, as it will be used -across routes, but the actual content (left and right sections for action buttons etc. and a title) needs +Let's take an example where we want to render a sticky footer inside `application.hbs`, as it will be used +across routes, but the actual content (left and right sections for action buttons etc. and a title) needs to be defined within the actual routes; step1.hbs: + ```hbs -Step 1 +Step 1 - - Back + + Back - - + + ``` @@ -89,41 +84,37 @@ application.hbs: ```hbs {{outlet}} -