diff --git a/guides/release/tutorial/part-1/automated-testing.md b/guides/release/tutorial/part-1/automated-testing.md index 485b59a66c..f27173bcd8 100644 --- a/guides/release/tutorial/part-1/automated-testing.md +++ b/guides/release/tutorial/part-1/automated-testing.md @@ -125,7 +125,7 @@ If you watch really carefully, you can see our test robot roaming around our app It happens really quickly though—blink and you might miss it! In fact, I had to slow this animation down by a hundred times just so you can see it in action. I told you the robot has really, really fast hands! -As much as I enjoy watching this robot hard at work, the important thing here is that the test we wrote has _passed_, meaning everything is working exactly as we expect and the test UI is all green and happy. If you want, you can go to `index.hbs`, delete the `` component and see what things look like when we have _a failing test_. +As much as I enjoy watching this robot hard at work, the important thing here is that the test we wrote has _passed_, meaning everything is working exactly as we expect and the test UI is all green and happy. If you want, you can go to `index.gjs`, delete the `` component and see what things look like when we have _a failing test_. A failing test diff --git a/guides/release/tutorial/part-1/building-pages.md b/guides/release/tutorial/part-1/building-pages.md index 3fd80617f2..e0d9ea1c73 100644 --- a/guides/release/tutorial/part-1/building-pages.md +++ b/guides/release/tutorial/part-1/building-pages.md @@ -43,18 +43,20 @@ This adds a _[route](../../../routing/defining-your-routes/)_ named "about", whi ## Using Route Templates -With that in place, we can create a new `app/templates/about.hbs` template with the following content: - -```handlebars { data-filename="app/templates/about.hbs" } -
-
-

About Super Rentals

-

- The Super Rentals website is a delightful project created to explore Ember. - By building a property rental site, we can simultaneously imagine traveling - AND building Ember applications. -

-
+With that in place, we can create a new `app/templates/about.gjs` template with the following content: + +```gjs { data-filename="app/templates/about.gjs" } + ``` To see this in action, navigate to `http://localhost:4200/about`. @@ -86,26 +88,28 @@ Router.map(function () { Here, we added the `contact` route, but explicitly specified a path for the route. This allows us to keep the legacy URL, but use the new, shorter name for the route, as well as the template filename. -Speaking of the template, let's create that as well. We'll add a `app/templates/contact.hbs` file: - -```handlebars { data-filename="app/templates/contact.hbs" } -
-
-

Contact Us

-

- Super Rentals Representatives would love to help you
- choose a destination or answer any questions you may have. -

-
- Super Rentals HQ +Speaking of the template, let's create that as well. We'll add a `app/templates/contact.gjs` file: + +```gjs { data-filename="app/templates/contact.gjs" } + ``` Ember comes with strong _conventions_ and sensible defaults—if we were starting from scratch, we wouldn't mind the default `/contact` URL. However, if the defaults don't work for us, it is no problem at all to customize Ember for our needs! @@ -122,52 +126,64 @@ Since Ember offers great support for URLs out-of-the-box, we _could_ just link o With Ember, we can do better than that! Instead of the plain-old `` tag, Ember provides an alternative called ``. For example, here is how you would use it on the pages we just created: -```handlebars { data-filename="app/templates/index.hbs" data-diff="+5" } -
-
-

Welcome to Super Rentals!

-

We hope you find exactly what you're looking for in a place to stay.

- About Us -
+```gjs { data-filename="app/templates/index.gjs" data-diff="+1,+2,+8" } +import { LinkTo } from '@ember/routing'; + + ``` -```handlebars { data-filename="app/templates/about.hbs" data-diff="+9" } -
-
-

About Super Rentals

-

- The Super Rentals website is a delightful project created to explore Ember. - By building a property rental site, we can simultaneously imagine traveling - AND building Ember applications. -

- Contact Us -
+```gjs { data-filename="app/templates/about.gjs" data-diff="+1,+2,+12" } +import { LinkTo } from '@ember/routing'; + + ``` -```handlebars { data-filename="app/templates/contact.hbs" data-diff="+17" } -
-
-

Contact Us

-

- Super Rentals Representatives would love to help you
- choose a destination or answer any questions you may have. -

-
- Super Rentals HQ +```gjs { data-filename="app/templates/contact.gjs" data-diff="+1,+2,+20" } +import { LinkTo } from '@ember/routing'; + + ``` There is quite a bit going on here, so let's break it down. -`` is an example of a _[component](../../../components/introducing-components/)_ in Ember—you can tell them apart from regular HTML tags because they start with an uppercase letter. Along with regular HTML tags, components are a key building block that we can use to build up an app's user interface. +`` is an example of a _[component](../../../components/introducing-components/)_ in Ember. Along with regular HTML tags, components are a key building block that we can use to build up an app's user interface. Unlike regular HTML tags, components need to be imported before they can be used. In this case, `` is imported from the `@ember/routing` package that is part of Ember. We have a lot more to say about components later, but for now, you can think of them as a way to provide _custom tags_ to supplement the built-in ones that came with the browser. diff --git a/guides/release/tutorial/part-1/component-basics.md b/guides/release/tutorial/part-1/component-basics.md index 8a4c9d2749..fd56dac693 100644 --- a/guides/release/tutorial/part-1/component-basics.md +++ b/guides/release/tutorial/part-1/component-basics.md @@ -29,28 +29,18 @@ During the course of developing an app, it is pretty common to reuse the same UI Since it is not a lot of code, it may not seem like a big deal to duplicate this structure on each page. However, if our designer wanted us to make a change to the header, we would have to find and update every single copy of this code. As our app gets bigger, this will become even more of a problem. -Components are the perfect solution to this. In its most basic form, a component is just a piece of template that can be referred to by name. Let's start by creating a new file at `app/components/jumbo.hbs` with markup for the "jumbo" header: +Components are the perfect solution to this. In its most basic form, a component is just a piece of template that can be referred to by name. Let's start by creating a new file at `app/components/jumbo.gjs` with markup for the "jumbo" header: -```handlebars { data-filename="app/components/jumbo.hbs" } -
-
- {{yield}} -
+```gjs { data-filename="app/components/jumbo.gjs" } + ``` -That's it, we have created our first component! We can now _invoke_ this component anywhere in our app, using `` as the tag name. - -
-
-
-
Zoey says...
-
-

Remember, when invoking components, we need to capitalize their names so Ember can tell them apart from regular HTML elements. The jumbo.hbs template corresponds to the <Jumbo> tag, just like super-awesome.hbs corresponds to <SuperAwesome>.

-
-
- -
-
+That's it, we have created our first component! We can now _invoke_ this component anywhere in our app, by importing it and using it like we saw with `` previously. ## Passing Content to Components with `{{yield}}` @@ -58,15 +48,21 @@ When invoking a component, Ember will replace the component tag with the content Let's try it out by editing the index template: -```handlebars { data-filename="app/templates/index.hbs" data-diff="-1,-2,+3,-7,+8" } -
-
- -

Welcome to Super Rentals!

-

We hope you find exactly what you're looking for in a place to stay.

- About Us -
- +```gjs { data-filename="app/templates/index.gjs" data-diff="-1,+2,+3,-6,-7,+8,-12,+13" } +import { LinkTo } from '@ember/routing'; +import { LinkTo } from '@ember/routing'; +import Jumbo from 'super-rentals/components/jumbo'; + + ``` ## Refactoring Existing Code @@ -79,42 +75,52 @@ After saving the changes, your page should automatically reload, and, _voilà_.. Let's do the same for our other two pages as well. -```handlebars { data-filename="app/templates/about.hbs" data-diff="-1,-2,+3,-11,+12" } -
-
- -

About Super Rentals

-

- The Super Rentals website is a delightful project created to explore Ember. - By building a property rental site, we can simultaneously imagine traveling - AND building Ember applications. -

- Contact Us -
- +```gjs { data-filename="app/templates/about.gjs" data-diff="+2,-5,-6,+7,-15,+16" } +import { LinkTo } from '@ember/routing'; +import Jumbo from 'super-rentals/components/jumbo'; + + ``` -```handlebars { data-filename="app/templates/contact.hbs" data-diff="-1,-2,+3,-19,+20" } -
-
- -

Contact Us

-

- Super Rentals Representatives would love to help you
- choose a destination or answer any questions you may have. -

-
- Super Rentals HQ +```gjs { data-filename="app/templates/contact.gjs" data-diff="+2,-5,-6,+7,-23,+24" } +import { LinkTo } from '@ember/routing'; +import Jumbo from 'super-rentals/components/jumbo'; + + ``` After saving, everything should look exactly the same as before, and all the tests should still pass. Very nice! @@ -134,7 +140,7 @@ Before we move on to the next component, let's write an automated test for our ` ```shell $ ember generate component-test jumbo installing component-test - create tests/integration/components/jumbo-test.js + create tests/integration/components/jumbo-test.gjs Running "lint:fix" script... ``` @@ -143,36 +149,38 @@ Here, we used the generator to generate a _[component test](../../../testing/tes Let's replace the boilerplate code that was generated for us with our own test: -```js { data-filename="tests/integration/components/jumbo-test.js" data-diff="-9,-10,-11,+12,+13,-15,-16,-17,-18,-19,-20,-21,-22,-23,-24,-25,-26,+27,+28,+29" } +```js { data-filename="tests/integration/components/jumbo-test.gjs" data-diff="-9,-10,-11,-12,-13,-14,-15,-16,-17,-18,-19,+20,-22,-23,-24,+25,-28,+29,+30,+31" } import { module, test } from 'qunit'; import { setupRenderingTest } from 'super-rentals/tests/helpers'; import { render } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; +import Jumbo from 'super-rentals/components/jumbo'; module('Integration | Component | jumbo', function (hooks) { setupRenderingTest(hooks); test('it renders', async function (assert) { - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.set('myAction', function(val) { ... }); - test('it renders the content inside a jumbo header with a tomster', async function (assert) { - await render(hbs`Hello World`); + // Updating values is achieved using autotracking, just like in app code. For example: + // class State { @tracked myProperty = 0; }; const state = new State(); + // and update using state.myProperty = 1; await rerender(); + // Handle any actions with function myAction(val) { ... }; - await render(hbs``); + await render(); assert.dom().hasText(''); // Template block usage: - await render(hbs` + test('it renders the content inside a jumbo header with a tomster', async function (assert) { + await render(); assert.dom().hasText('template block text'); assert.dom('.jumbo').exists(); assert.dom('.jumbo').hasText('Hello World'); - assert.dom('.jumbo .tomster').exists(); + assert.dom('.jumbo .tomster').exists(); }); }); ``` @@ -185,67 +193,89 @@ Just like visit and click, which we used earlier, render is also an async step, We've been refactoring our existing code for a while, so let's change gears and implement a new feature: the site-wide navigation bar. -We can create a `` component at `app/components/nav-bar.hbs`: +We can create a `` component at `app/components/nav-bar.gjs`: -```handlebars { data-filename="app/components/nav-bar.hbs" } -