Skip to content

Commit 2de2e7d

Browse files
authored
Revert "Strict mode (#263)" (#268)
This reverts commit cba238c.
1 parent 16c5d81 commit 2de2e7d

11 files changed

+1050
-1227
lines changed

src/markdown/tutorial/part-1/01-orientation.md

Lines changed: 26 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,12 @@ Hack: make an empty package.json to convince ember-cli we are really not in an E
4646
# pretend we are running NPM.
4747
4848
#[cfg(all(ci, unix))]
49-
#[display(ember new super-rentals --lang en --strict)]
50-
ember new super-rentals --lang en --strict --pnpm \
49+
#[display(ember new super-rentals --lang en)]
50+
ember new super-rentals --lang en --pnpm \
5151
| awk '{ gsub("Pnpm", "npm"); gsub("pnpm", "npm"); print }'
5252
5353
#[cfg(not(all(ci, unix)))]
54-
ember new super-rentals --lang en --strict --pnpm
54+
ember new super-rentals --lang en --pnpm
5555
```
5656

5757
```run:command hidden=true
@@ -196,7 +196,7 @@ del package.json
196196
197197
```run:file:patch hidden=true cwd=super-rentals filename=.prettierignore
198198
@@ -1 +1,2 @@
199-
+**/*.gjs
199+
+**/*.hbs
200200
# unconventional js
201201

202202
```
@@ -277,54 +277,48 @@ You can exit out of the development server at any time by typing `Ctrl + C` into
277277

278278
The development server has a feature called *live reload*, which monitors your app for file changes, automatically re-compiles everything, and refreshes any open browser pages. This comes in really handy during development, so let's give that a try!
279279
280-
As text on the welcome page pointed out, the source code for the page is located in `app/templates/application.gjs`. Let's try to edit that file and replace it with our own content:
280+
As text on the welcome page pointed out, the source code for the page is located in `app/templates/application.hbs`. Let's try to edit that file and replace it with our own content:
281281

282-
```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/application.gjs
283-
@@ -1,12 +1,3 @@
284-
-import pageTitle from 'ember-page-title/helpers/page-title';
285-
-import WelcomePage from 'ember-welcome-page/components/welcome-page';
282+
```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/application.hbs
283+
@@ -1,7 +1 @@
284+
-{{page-title "SuperRentals"}}
286285
-
287-
<template>
288-
- {{pageTitle "SuperRentals"}}
286+
-{{outlet}}
289287
-
290-
- {{outlet}}
291-
-
292-
- {{! The following component displays Ember's default welcome message. }}
293-
- <WelcomePage />
294-
- {{! Feel free to remove this! }}
295-
+ Hello World!!!
296-
</template>
297-
```
288+
-{{! The following component displays Ember's default welcome message. }}
289+
-<WelcomePage />
290+
-{{! Feel free to remove this! }}
291+
\ No newline at end of file
292+
+Hello World!!!
293+
```
298294

299295
Soon after saving the file, your browser should automatically refresh and render our greetings to the world. Neat!
300296

301297
```run:screenshot width=1024 height=250 retina=true filename=hello-world.png alt="Hello World!!!"
302298
visit http://localhost:4200/?deterministic
303299
```
304300

305-
When you are done experimenting, go ahead and delete the `app/templates/application.gjs` file. We won't be needing this for a while, so let's start afresh. We can add it back later when we have a need for it.
301+
When you are done experimenting, go ahead and delete the `app/templates/application.hbs` file. We won't be needing this for a while, so let's start afresh. We can add it back later when we have a need for it.
306302

307303
```run:command hidden=true cwd=super-rentals
308-
git rm -f app/templates/application.gjs
304+
git rm -f app/templates/application.hbs
309305
```
310306

311307
Again, if you still have your browser tab open, your tab will automatically re-render a blank page as soon as you delete the file. This reflects the fact that we no longer have an application template in our app.
312308

313309
## Working with HTML, CSS and Assets in an Ember App
314310

315-
Create a `app/templates/index.gjs` file and paste the following markup.
311+
Create a `app/templates/index.hbs` file and paste the following markup.
316312

317-
```run:file:create lang=gjs cwd=super-rentals filename=app/templates/index.gjs
318-
<template>
319-
<div class="jumbo">
320-
<div class="right tomster"></div>
321-
<h2>Welcome to Super Rentals!</h2>
322-
<p>We hope you find exactly what you're looking for in a place to stay.</p>
323-
</div>
324-
</template>
313+
```run:file:create lang=handlebars cwd=super-rentals filename=app/templates/index.hbs
314+
<div class="jumbo">
315+
<div class="right tomster"></div>
316+
<h2>Welcome to Super Rentals!</h2>
317+
<p>We hope you find exactly what you're looking for in a place to stay.</p>
318+
</div>
325319
```
326320

327-
If you are thinking, "Hey, that looks like HTML!", then you would be right! In their simplest form, Ember templates are really just HTML wrapped in a `<template>` tag. If you are already familiar with HTML, you should feel right at home here.
321+
If you are thinking, "Hey, that looks like HTML!", then you would be right! In their simplest form, Ember templates are really just HTML. If you are already familiar with HTML, you should feel right at home here.
328322

329323
Of course, unlike HTML, Ember templates can do a lot more than just displaying static content. We will see that in action soon.
330324

@@ -335,7 +329,7 @@ visit http://localhost:4200/?deterministic
335329
```
336330

337331
```run:command hidden=true cwd=super-rentals
338-
git add app/templates/index.gjs
332+
git add app/templates/index.hbs
339333
```
340334

341335
Before we do anything else, let's add some styling to our app. We spend enough time staring at the computer screen as it is, so we must protect our eyesight against unstyled markup!

src/markdown/tutorial/part-1/02-building-pages.md

Lines changed: 49 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -45,20 +45,18 @@ git add app/router.js
4545

4646
## Using Route Templates
4747

48-
With that in place, we can create a new `app/templates/about.gjs` template with the following content:
48+
With that in place, we can create a new `app/templates/about.hbs` template with the following content:
4949

50-
```run:file:create lang=gjs cwd=super-rentals filename=app/templates/about.gjs
51-
<template>
52-
<div class="jumbo">
53-
<div class="right tomster"></div>
54-
<h2>About Super Rentals</h2>
55-
<p>
56-
The Super Rentals website is a delightful project created to explore Ember.
57-
By building a property rental site, we can simultaneously imagine traveling
58-
AND building Ember applications.
59-
</p>
60-
</div>
61-
</template>
50+
```run:file:create lang=handlebars cwd=super-rentals filename=app/templates/about.hbs
51+
<div class="jumbo">
52+
<div class="right tomster"></div>
53+
<h2>About Super Rentals</h2>
54+
<p>
55+
The Super Rentals website is a delightful project created to explore Ember.
56+
By building a property rental site, we can simultaneously imagine traveling
57+
AND building Ember applications.
58+
</p>
59+
</div>
6260
```
6361

6462
To see this in action, navigate to `http://localhost:4200/about`.
@@ -68,7 +66,7 @@ visit http://localhost:4200/about?deterministic
6866
```
6967

7068
```run:command hidden=true cwd=super-rentals
71-
git add app/templates/about.gjs
69+
git add app/templates/about.hbs
7270
```
7371

7472
With that, our second page is done!
@@ -92,28 +90,26 @@ Here, we added the `contact` route, but explicitly specified a path for the rout
9290
git add app/router.js
9391
```
9492

95-
Speaking of the template, let's create that as well. We'll add a `app/templates/contact.gjs` file:
93+
Speaking of the template, let's create that as well. We'll add a `app/templates/contact.hbs` file:
9694

97-
```run:file:create lang=gjs cwd=super-rentals filename=app/templates/contact.gjs
98-
<template>
99-
<div class="jumbo">
100-
<div class="right tomster"></div>
101-
<h2>Contact Us</h2>
95+
```run:file:create lang=handlebars cwd=super-rentals filename=app/templates/contact.hbs
96+
<div class="jumbo">
97+
<div class="right tomster"></div>
98+
<h2>Contact Us</h2>
99+
<p>
100+
Super Rentals Representatives would love to help you<br>
101+
choose a destination or answer any questions you may have.
102+
</p>
103+
<address>
104+
Super Rentals HQ
102105
<p>
103-
Super Rentals Representatives would love to help you<br>
104-
choose a destination or answer any questions you may have.
106+
1212 Test Address Avenue<br>
107+
Testington, OR 97233
105108
</p>
106-
<address>
107-
Super Rentals HQ
108-
<p>
109-
1212 Test Address Avenue<br>
110-
Testington, OR 97233
111-
</p>
112-
<a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
113-
114-
</address>
115-
</div>
116-
</template>
109+
<a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
110+
111+
</address>
112+
</div>
117113
```
118114

119115
Ember comes with strong *[conventions][TODO: link to conventions]* and sensible defaults&mdash;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!
@@ -125,7 +121,7 @@ visit http://localhost:4200/getting-in-touch?deterministic
125121
```
126122

127123
```run:command hidden=true cwd=super-rentals
128-
git add app/templates/contact.gjs
124+
git add app/templates/contact.hbs
129125
```
130126

131127
## Linking Pages with the `<LinkTo>` Component
@@ -136,43 +132,30 @@ Since Ember offers great support for URLs out-of-the-box, we *could* just link o
136132

137133
With Ember, we can do better than that! Instead of the plain-old `<a>` tag, Ember provides an alternative called `<LinkTo>`. For example, here is how you would use it on the pages we just created:
138134

139-
```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/index.gjs
140-
@@ -1 +1,3 @@
141-
+import { LinkTo } from '@ember/routing';
142-
+
143-
<template>
144-
@@ -5,2 +7,3 @@
145-
<p>We hope you find exactly what you're looking for in a place to stay.</p>
146-
+ <LinkTo @route="about" class="button">About Us</LinkTo>
147-
</div>
135+
```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/index.hbs
136+
@@ -4,2 +4,3 @@
137+
<p>We hope you find exactly what you're looking for in a place to stay.</p>
138+
+ <LinkTo @route="about" class="button">About Us</LinkTo>
139+
</div>
148140
```
149141

150-
```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/about.gjs
151-
@@ -1 +1,3 @@
152-
+import { LinkTo } from '@ember/routing';
153-
+
154-
<template>
155-
@@ -9,2 +11,3 @@
156-
</p>
157-
+ <LinkTo @route="contact" class="button">Contact Us</LinkTo>
158-
</div>
142+
```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/about.hbs
143+
@@ -8,2 +8,3 @@
144+
</p>
145+
+ <LinkTo @route="contact" class="button">Contact Us</LinkTo>
146+
</div>
159147
```
160148

161-
```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/contact.gjs
162-
@@ -1 +1,3 @@
163-
+import { LinkTo } from '@ember/routing';
164-
+
165-
<template>
166-
@@ -17,2 +19,3 @@
167-
</address>
168-
+ <LinkTo @route="about" class="button">About</LinkTo>
169-
</div>
149+
```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/contact.hbs
150+
@@ -16,2 +16,3 @@
151+
</address>
152+
+ <LinkTo @route="about" class="button">About</LinkTo>
153+
</div>
170154
```
171155

172-
173156
There is quite a bit going on here, so let's break it down.
174157

175-
`<LinkTo>` 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, `<LinkTo>` is imported from the `@ember/routing` package that is part of Ember.
158+
`<LinkTo>` is an example of a *[component](../../../components/introducing-components/)* in Ember&mdash;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.
176159

177160
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][TODO: link to custom tags]* to supplement the built-in ones that came with the browser.
178161

@@ -199,9 +182,9 @@ visit http://localhost:4200/getting-in-touch?deterministic
199182
```
200183

201184
```run:command hidden=true cwd=super-rentals
202-
git add app/templates/index.gjs
203-
git add app/templates/about.gjs
204-
git add app/templates/contact.gjs
185+
git add app/templates/index.hbs
186+
git add app/templates/about.hbs
187+
git add app/templates/contact.hbs
205188
```
206189

207190
We will learn more about how all of this works soon. In the meantime, go ahead and click on the link in the browser. Did you notice how snappy that was?

src/markdown/tutorial/part-1/03-automated-testing.md

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -120,17 +120,13 @@ wait #qunit-banner.qunit-pass
120120

121121
It happens really quickly though&mdash;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!
122122

123-
As much as I enjoy watching this robot hard at work, the important thing here is that the test we wrote has *[passed][TODO: link to 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 `<LinkTo>` component and see what things look like when we have *[a failing test][TODO: link to a failing test]*.
123+
As much as I enjoy watching this robot hard at work, the important thing here is that the test we wrote has *[passed][TODO: link to 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 `<LinkTo>` component and see what things look like when we have *[a failing test][TODO: link to a failing test]*.
124124

125-
```run:file:patch hidden=true cwd=super-rentals filename=app/templates/index.gjs
126-
@@ -1,3 +1 @@
127-
-import { LinkTo } from '@ember/routing';
128-
-
129-
<template>
130-
@@ -7,3 +5,2 @@ import { LinkTo } from '@ember/routing';
131-
<p>We hope you find exactly what you're looking for in a place to stay.</p>
132-
- <LinkTo @route="about" class="button">About Us</LinkTo>
133-
</div>
125+
```run:file:patch hidden=true cwd=super-rentals filename=app/templates/index.hbs
126+
@@ -4,3 +4,2 @@
127+
<p>We hope you find exactly what you're looking for in a place to stay.</p>
128+
- <LinkTo @route="about" class="button">About Us</LinkTo>
129+
</div>
134130
```
135131

136132
```run:screenshot width=1024 height=768 retina=true filename=fail.png alt="A failing test"
@@ -141,7 +137,7 @@ wait #qunit-banner.qunit-fail
141137
Don't forget to put that line back in when you are done!
142138
143139
```run:command hidden=true cwd=super-rentals
144-
git checkout app/templates/index.gjs
140+
git checkout app/templates/index.hbs
145141
ember test --path dist
146142
```
147143

0 commit comments

Comments
 (0)