From ab288393affda2fd2ec6fd8abfc9789162211db9 Mon Sep 17 00:00:00 2001 From: Tommy Carter Date: Mon, 28 Jul 2025 12:24:01 -0500 Subject: [PATCH 01/11] Converted accessibility/page-template-considerations to use gjs --- .../page-template-considerations.md | 35 ++++++++++--------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/guides/release/accessibility/page-template-considerations.md b/guides/release/accessibility/page-template-considerations.md index 8ad0724f31..8d616240b2 100644 --- a/guides/release/accessibility/page-template-considerations.md +++ b/guides/release/accessibility/page-template-considerations.md @@ -17,29 +17,32 @@ Consider this format: Note that the unique page title is first. This is because it is the most important piece of information from a contextual perspective. Since a user with a screen reader can interrupt the screen reader as they wish, it introduces less fatigue when the unique page title is first, but provides the additional guidance if it is desired. -A simple way to add page titles is to use the `page-title` helper which comes from the [ember-page-title](https://github.com/ember-cli/ember-page-title) addon that is installed by default in new apps. We can use this helper to set the page title at any point in any template. +A simple way to add page titles is to use the `pageTitle` helper which comes from the [ember-page-title](https://github.com/ember-cli/ember-page-title) addon that is installed by default in new apps. We can use this helper to set the page title at any point in any template. For example, if we have a “posts” route, we can set the page title for it like so: +```gjs {data-filename=app/routes/posts.gjs} +import { pageTitle } from 'ember-page-title'; -```handlebars {data-filename=app/routes/posts.hbs} -{{page-title "Posts - Site Title"}} - -{{outlet}} + ``` Extending the example, if we have a “post” route that lives within the “posts” route, we could set its page title like so: -```handlebars {data-filename=app/routes/posts/post.hbs} -{{page-title (concat @model.title " - Site Title")}} +```gjs {data-filename=app/routes/posts/post.gjs} +import { pageTitle } from 'ember-page-title'; -

{{@model.title}}

-``` + +``` -- [ember-cli-head](https://github.com/ronco/ember-cli-head) -- [ember-cli-document-title](https://github.com/kimroen/ember-cli-document-title) +Each call to the `{{pageTitle}}` helper will prepend the title string to the existing title all the way up to the root title in `application.gts`. So, if your application is titled "My App", then the full title for the above example would be "My Title | Posts | My App". To evaluate more addons to add/manage content in the `` of a page, view this category on [Ember Observer](https://emberobserver.com/categories/header-content). @@ -48,14 +51,14 @@ You can test that page titles are generated correctly by asserting on the value ```javascript {data-filename=tests/acceptance/posts-test.js} import { module, test } from 'qunit'; import { visit, currentURL } from '@ember/test-helpers'; -import { setupApplicationTest } from 'my-app-name/tests/helpers'; +import { setupApplicationTest } from 'my-app/tests/helpers'; -module('Acceptance | posts', function(hooks) { +module('Acceptance | posts', function (hooks) { setupApplicationTest(hooks); - test('visiting /posts', async function(assert) { + test('visiting /posts', async function (assert) { await visit('/posts'); - assert.equal(document.title, 'Posts - Site Title'); + assert.equal(document.title, 'Posts | My App'); }); }); ``` From ebac76d80b2cd10db42235b41386d7c3bd0cee85 Mon Sep 17 00:00:00 2001 From: Tommy Carter Date: Mon, 28 Jul 2025 12:47:47 -0500 Subject: [PATCH 02/11] Converted services to use gjs --- guides/release/services/index.md | 56 +++++++++++++++++++------------- 1 file changed, 34 insertions(+), 22 deletions(-) diff --git a/guides/release/services/index.md b/guides/release/services/index.md index 59d2627b89..d653adbd20 100644 --- a/guides/release/services/index.md +++ b/guides/release/services/index.md @@ -62,13 +62,17 @@ You can either invoke it with no arguments, or you can pass it the registered na When no arguments are passed, the service is loaded based on the name of the decorated property. You can load the shopping cart service with no arguments like below. -```javascript {data-filename=app/components/cart-contents.js} +```gjs {data-filename=app/components/cart-contents.gjs} import Component from '@glimmer/component'; import { service } from '@ember/service'; export default class CartContentsComponent extends Component { // Will load the service defined in: app/services/shopping-cart.js @service shoppingCart; + + } ``` @@ -76,13 +80,17 @@ This injects the shopping cart service into the component and makes it available Another way to inject a service is to provide the name of the service as an argument to the decorator. -```javascript {data-filename=app/components/cart-contents.js} +```gjs {data-filename=app/components/cart-contents.gjs} import Component from '@glimmer/component'; import { service } from '@ember/service'; export default class CartContentsComponent extends Component { // Will load the service defined in: app/services/shopping-cart.js @service('shopping-cart') cart; + + } ``` @@ -92,7 +100,7 @@ Sometimes a service may or may not exist, like when an initializer conditionally Since normal injection will throw an error if the service doesn't exist, you must look up the service using Ember's [`getOwner`](https://api.emberjs.com/ember/release/classes/@ember%2Fapplication/methods/getOwner?anchor=getOwner) instead. -```javascript {data-filename=app/components/cart-contents.js} +```gjs {data-filename=app/components/cart-contents.gjs} import Component from '@glimmer/component'; import { getOwner } from '@ember/application'; @@ -101,6 +109,10 @@ export default class CartContentsComponent extends Component { get cart() { return getOwner(this).lookup('service:shopping-cart'); } + + } ``` @@ -108,35 +120,35 @@ Injected properties are lazy loaded; meaning the service will not be instantiate Once loaded, a service will persist until the application exits. +Once injected into a component, a service can also be used in the template. + Below we add a remove action to the `cart-contents` component. -```javascript {data-filename=app/components/cart-contents.js} +```gjs {data-filename=app/components/cart-contents.gjs} import Component from '@glimmer/component'; import { service } from '@ember/service'; -import { action } from '@ember/object'; +import { on } from '@ember/modifier'; +import { fn } from '@ember/helper'; export default class CartContentsComponent extends Component { @service('shopping-cart') cart; - @action - remove(item) { + remove = (item) => { this.cart.remove(item); - } + }; + + } ``` -Once injected into a component, a service can also be used in the template. -Note `cart` being used below to get data from the cart. - -```handlebars {data-filename=app/components/cart-contents.hbs} - -``` - From 41b3e0d65d753a288c316017dce65981b37bea6f Mon Sep 17 00:00:00 2001 From: Tommy Carter Date: Mon, 28 Jul 2025 13:21:16 -0500 Subject: [PATCH 03/11] Converted typescript invokables to use gts (no diff indicators) --- .../typescript/core-concepts/invokables.md | 196 +++++++++--------- 1 file changed, 101 insertions(+), 95 deletions(-) diff --git a/guides/release/typescript/core-concepts/invokables.md b/guides/release/typescript/core-concepts/invokables.md index e14f50083a..80cb3ac405 100644 --- a/guides/release/typescript/core-concepts/invokables.md +++ b/guides/release/typescript/core-concepts/invokables.md @@ -81,31 +81,30 @@ For example, consider the `AudioPlayer` described in the There, we defined component which accepted a `srcUrl` argument and used a `play-when` modifier to manage the behavior of the element: -```typescript {data-filename="app/components/audio-player.ts"} +```gts {data-filename="app/components/audio-player.gts"} import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; -import { action } from '@ember/object'; +import playWhen from '../modifiers/play-when.ts'; +import { on } from '@ember/modifier'; export default class AudioPlayer extends Component { @tracked isPlaying = false; - @action - play() { + play = () => { this.isPlaying = true; - } + }; - @action - pause() { + pause = () => { this.isPlaying = false; - } -} -``` + }; -```handlebars {data-filename="app/components/audio-player.hbs"} -