Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update dependencies for Ember 5 #634

Merged
merged 1 commit into from
May 1, 2023
Merged

Update dependencies for Ember 5 #634

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 46 additions & 59 deletions ember-stargate/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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?
Expand All @@ -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
`<Portal @target="some-target">`, and the target - identified by its name - where it should be rendered to
`<Portal @target="some-target">`, and the target - identified by its name - where it should be rendered to
using `<PortalTarget @name="some-target">`.

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
<Portal @target="footer-title">Step 1</Portal>
<Portal @target='footer-title'>Step 1</Portal>

<Portal @target="footer-left">
<LinkTo @route="index">Back</LinkTo>
<Portal @target='footer-left'>
<LinkTo @route='index'>Back</LinkTo>
</Portal>

<Portal @target="footer-right">
<button type="button" {{on "click" this.submit}}>Submit and proceed</button>
<Portal @target='footer-right'>
<button type='button' {{on 'click' this.submit}}>Submit and proceed</button>
</Portal>
```

Expand All @@ -89,41 +84,37 @@ application.hbs:
```hbs
{{outlet}}

<footer class="sticky-footer">
<PortalTarget @name="footer-left" class="sticky-footer__left" />
<PortalTarget @name="footer-title" class="sticky-footer__title" />
<PortalTarget @name="footer-right" class="sticky-footer__right" />
<footer class='sticky-footer'>
<PortalTarget @name='footer-left' class='sticky-footer__left' />

<PortalTarget @name='footer-title' class='sticky-footer__title' />

<PortalTarget @name='footer-right' class='sticky-footer__right' />
</footer>
```

Note that although the footer will be rendered *after* the portals, as it comes after the `{{outlet}}` at the
bottom of the DOM, this poses no problem for this addon as it explicitly supports this case: a portal's content
Note that although the footer will be rendered _after_ the portals, as it comes after the `{{outlet}}` at the
bottom of the DOM, this poses no problem for this addon as it explicitly supports this case: a portal's content
will not be rendered until its target is available, but then the target will immediately show the portal's content.


API
------------------------------------------------------------------------------
## API

### Portal

* `@target`: required argument to specify the name of the target
* `@fallback`: by default the portal's content will not render until the target is available.
- `@target`: required argument to specify the name of the target
- `@fallback`: by default the portal's content will not render until the target is available.
With `@fallback="inplace"` the content will be rendered in place as long as the target is not available.
* `@renderInPlace`: if `true` the portal is effectively disabled, and the content is rendered in place.
- `@renderInPlace`: if `true` the portal is effectively disabled, and the content is rendered in place.

### PortalTarget

* `@name`: required argument that identifies the target
* `@multiple`: by default if multiple portals refer to the same target, they will replace each other
- `@name`: required argument that identifies the target
- `@multiple`: by default if multiple portals refer to the same target, they will replace each other
(in the order of rendering). With `@multiple={{true}}` the portal's content will be appended (again in the order of rendering).
* `@onChange`: whenever a portal is rendered to or removed from the target, this action will be called. It will receive
- `@onChange`: whenever a portal is rendered to or removed from the target, this action will be called. It will receive
the current portal count of this target as an argument.


TypeScript usage
------------------------------------------------------------------------------
## TypeScript usage

All components have proper [Glint](https://github.com/typed-ember/glint) types, which allow you when using TypeScript to get strict type checking in your templates.

Expand All @@ -138,14 +129,10 @@ import 'ember-stargate/glint';

> Note that Glint itself is still under active development, and as such breaking changes might occur. Therefore, Glint support by this addon is also considered experimental, and not covered by our SemVer contract!


Contributing
------------------------------------------------------------------------------
## Contributing

See the [Contributing](CONTRIBUTING.md) guide for details.


License
------------------------------------------------------------------------------
## License

This project is licensed under the [MIT License](LICENSE.md).
2 changes: 1 addition & 1 deletion test-app/config/environment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ module.exports = function (environment) {
modulePrefix: 'test-app',
environment,
rootURL: '/',
locationType: 'auto',
locationType: 'history',
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
Expand Down
2 changes: 1 addition & 1 deletion test-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"@ember/optional-features": "2.0.0",
"@ember/test-helpers": "2.9.3",
"@embroider/test-setup": "2.1.1",
"@ember/string": "^3.0.1",
"@glimmer/component": "1.1.2",
"@glimmer/tracking": "1.1.2",
"@glint/core": "0.9.7",
Expand Down Expand Up @@ -65,7 +66,6 @@
"ember-cli-terser": "4.0.2",
"ember-cli-typescript": "5.2.1",
"ember-cli-typescript-blueprints": "3.0.0",
"ember-export-application-global": "2.0.1",
"ember-load-initializers": "2.1.2",
"ember-maybe-import-regenerator": "1.0.0",
"ember-page-title": "7.0.0",
Expand Down
50 changes: 40 additions & 10 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,13 +154,20 @@
dependencies:
"@babel/types" "^7.21.0"

"@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.8.3":
"@babel/helper-module-imports@^7.18.6":
version "7.18.6"
resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
dependencies:
"@babel/types" "^7.18.6"

"@babel/helper-module-imports@^7.8.3":
version "7.21.4"
resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af"
integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==
dependencies:
"@babel/types" "^7.21.4"

"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.19.6", "@babel/helper-module-transforms@^7.21.2":
version "7.21.2"
resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz#160caafa4978ac8c00ac66636cb0fa37b024e2d2"
Expand Down Expand Up @@ -235,6 +242,11 @@
resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==

"@babel/helper-string-parser@^7.21.5":
version "7.21.5"
resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz#2b3eea65443c6bdc31c22d037c65f6d323b6b2bd"
integrity sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==

"@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
version "7.19.1"
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
Expand Down Expand Up @@ -576,13 +588,20 @@
dependencies:
"@babel/helper-plugin-utils" "^7.18.6"

"@babel/plugin-transform-block-scoping@^7.20.2", "@babel/plugin-transform-block-scoping@^7.8.3":
"@babel/plugin-transform-block-scoping@^7.20.2":
version "7.20.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.20.5.tgz#401215f9dc13dc5262940e2e527c9536b3d7f237"
integrity sha512-WvpEIW9Cbj9ApF3yJCjIEEf1EiNJLtXagOrL5LNWEZOo3jv8pmPoYTSNJQvqej8OavVlgOoOPw6/htGZro6IkA==
dependencies:
"@babel/helper-plugin-utils" "^7.20.2"

"@babel/plugin-transform-block-scoping@^7.8.3":
version "7.21.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz#e737b91037e5186ee16b76e7ae093358a5634f02"
integrity sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==
dependencies:
"@babel/helper-plugin-utils" "^7.20.2"

"@babel/plugin-transform-classes@^7.20.2":
version "7.20.2"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.20.2.tgz#c0033cf1916ccf78202d04be4281d161f6709bb2"
Expand Down Expand Up @@ -1005,6 +1024,15 @@
"@babel/helper-validator-identifier" "^7.19.1"
to-fast-properties "^2.0.0"

"@babel/types@^7.21.4":
version "7.21.5"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.5.tgz#18dfbd47c39d3904d5db3d3dc2cc80bedb60e5b6"
integrity sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==
dependencies:
"@babel/helper-string-parser" "^7.21.5"
"@babel/helper-validator-identifier" "^7.19.1"
to-fast-properties "^2.0.0"

"@cnakazawa/watch@^1.0.3":
version "1.0.4"
resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
Expand Down Expand Up @@ -1049,6 +1077,13 @@
ember-cli-babel "^7.26.11"
ember-modifier-manager-polyfill "^1.2.0"

"@ember/string@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@ember/string/-/string-3.0.1.tgz#42cf032031a4432c2dd69c327ae1876d2c13df9c"
integrity sha512-ntnmXS+upOWVXE+rVw2l03DjdMnaGdWbYVUxUBuPJqnIGZu2XFRsoXc7E6mOw62s8i1Xh1RgTuFHN41QGIolEQ==
dependencies:
ember-cli-babel "^7.26.6"

"@ember/[email protected]":
version "2.9.3"
resolved "https://registry.yarnpkg.com/@ember/test-helpers/-/test-helpers-2.9.3.tgz#c2a9d6ab1c367af92cf1a334f97eb19b8e06e6e1"
Expand Down Expand Up @@ -5208,11 +5243,6 @@ ember-destroyable-polyfill@^2.0.3:
ember-cli-version-checker "^5.1.1"
ember-compatibility-helpers "^1.2.1"

[email protected]:
version "2.0.1"
resolved "https://registry.yarnpkg.com/ember-export-application-global/-/ember-export-application-global-2.0.1.tgz#b120a70e322ab208defc9e2daebe8d0dfc2dcd46"
integrity sha512-B7wiurPgsxsSGzJuPFkpBWnaeuCu2PGpG2BjyrfA1VcL7//o+5RSnZqiCEY326y7qmxb2GoCgo0ft03KBU0rRw==

[email protected]:
version "2.1.2"
resolved "https://registry.yarnpkg.com/ember-load-initializers/-/ember-load-initializers-2.1.2.tgz#8a47a656c1f64f9b10cecdb4e22a9d52ad9c7efa"
Expand Down Expand Up @@ -7902,9 +7932,9 @@ jest-worker@^27.4.5:
supports-color "^8.0.0"

jquery@^3.5.1:
version "3.6.2"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.2.tgz#8302bbc9160646f507bdf59d136a478b312783c4"
integrity sha512-/e7ulNIEEYk1Z/l4X0vpxGt+B/dNsV8ghOPAWZaJs8pkGvsSC0tm33aMGylXcj/U7y4IcvwtMXPMyBFZn/gK9A==
version "3.6.4"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.4.tgz#ba065c188142100be4833699852bf7c24dc0252f"
integrity sha512-v28EW9DWDFpzcD9O5iyJXg3R3+q+mET5JhnjJzQUZMHOv67bpSIHq81GEYpPNZHG+XXHsfSme3nxp/hndKEcsQ==

js-string-escape@^1.0.1:
version "1.0.1"
Expand Down