Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

docs(toh): fix code-example format and Dart code excerpt #2907

Merged
merged 2 commits into from
Dec 1, 2016
Merged

docs(toh): fix code-example format and Dart code excerpt #2907

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
30513b3
ensure HeroesComponent renaming doesn't show router
chalin Nov 29, 2016
982c362
use code-example format consistent with the rest of the docs
chalin Nov 29, 2016
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
6 changes: 5 additions & 1 deletion public/docs/_examples/toh-5/dart/lib/heroes_component.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,11 @@ class HeroesComponent implements OnInit {
Hero selectedHero;

// #docregion renaming
HeroesComponent(this._heroService, this._router);
HeroesComponent(this._heroService,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's OK to terminate an arg list with a ","? (Seems like it should be, but not sure whether all the SDKs the pubspec allows actually support this.)

Copy link
Contributor

@wardbell wardbell Nov 29, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's technically OK in TS although misleading. It would read like this:

 HeroesComponent(this._heroService,
                  );

That's pretty awful in all kinds of ways. There should be another way to convey the message.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The trade-off is to enable plaster /* ... */ in the code excerpt, or to leave it as is. IMHO, even if a particular SDK doesn't support it, readers should understand that the code excerpt is suggestive, given that the heading is "lib/heroes_component.dart (showing renamings only)". Use of plaster just makes it too cluttered.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@wardbell - btw, this is only for the Dart code excerpt.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Btw, I was trying to avoid having a heroes_component_1.dart file (which would be another way of solving this).

// #enddocregion renaming
this._router
// #docregion renaming
);
// #enddocregion renaming

Future<Null> getHeroes() async {
Expand Down
2 changes: 1 addition & 1 deletion public/docs/dart/latest/tutorial/toh-pt1.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ include ../_util-fns
## Keep the app compiling and running
We want to start the Dart compiler, have it watch for changes, and start our server. We'll do this by typing

code-example(language="bash").
code-example(language="sh" class="code-shell").
pub serve

:marked
Expand Down
6 changes: 3 additions & 3 deletions public/docs/dart/latest/tutorial/toh-pt2.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ include ../_util-fns
### Keep the app compiling and running
We want to start the Dart compiler, have it watch for changes, and start our server. We'll do this by typing

code-example(language="bash").
code-example(language="sh" class="code-shell").
pub serve

:marked
Expand Down Expand Up @@ -157,7 +157,7 @@ code-example(language="bash").

:marked
Focus on the event binding
code-example(format="." language="bash").
code-example.
(click)="onSelect(hero)"
:marked
The parentheses identify the `<li>` element’s `click` event as the target.
Expand Down Expand Up @@ -204,7 +204,7 @@ code-example(language="bash").
The `selectedHero` is `undefined`.
That’s why we'll see the following error in the browser’s console:

code-example(language="html").
code-example(format="nocode").
EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]

:marked
Expand Down
8 changes: 4 additions & 4 deletions public/docs/dart/latest/tutorial/toh-pt3.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ include ../_util-fns
### Keep the app compiling and running
We want to start the Dart compiler, have it watch for changes, and start our server. We'll do this by typing

code-example(language="bash").
code-example(language="sh" class="code-shell").
pub serve

:marked
Expand Down Expand Up @@ -122,7 +122,7 @@ code-example(language="bash").

We will soon update the `AppComponent` template so that it binds its `selectedHero` property
to the `hero` property of our `HeroDetailComponent`. The binding *might* look like this:
code-example(format=".").
code-example(language="html").
&lt;my-hero-detail [hero]="selectedHero">&lt;/my-hero-detail>
:marked
Notice that the `hero` property is the ***target*** of a property binding &mdash; it's in square brackets to the left of the (=).
Expand Down Expand Up @@ -156,15 +156,15 @@ code-example(format=".").
:marked
Find the location in the template where we removed the *Hero Detail* content
and add an element tag that represents the `HeroDetailComponent`.
code-example(format=".").
code-example(language="html").
&lt;my-hero-detail>&lt;/my-hero-detail>
.l-sub-section
:marked
*my-hero-detail* is the name we set as the `selector` in the `HeroDetailComponent` metadata.
:marked
The two components won't coordinate until we bind the `selectedHero` property of the `AppComponent`
to the `HeroDetailComponent` element's `hero` property like this:
code-example(format=".").
code-example(language="html").
&lt;my-hero-detail [hero]="selectedHero">&lt;/my-hero-detail>
:marked
The `AppComponent`’s template should now look like this
Expand Down
2 changes: 1 addition & 1 deletion public/docs/dart/latest/tutorial/toh-pt4.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ include ../_util-fns
Open a terminal/console window.
Start the Dart compiler, watch for changes, and start our server by entering the command:

code-example(language="bash").
code-example(language="sh" class="code-shell").
pub serve

:marked
Expand Down
2 changes: 1 addition & 1 deletion public/docs/dart/latest/tutorial/toh-pt5.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ block keep-app-running
Open a terminal/console window.
Start the Dart compiler, watch for changes, and start our server by entering the command:

code-example(language="bash").
code-example(language="sh" class="code-shell").
pub serve

block app-comp-v1
Expand Down
2 changes: 1 addition & 1 deletion public/docs/dart/latest/tutorial/toh-pt6.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ block start-server-and-watch
Open a terminal/console window.
Start the Dart compiler, watch for changes, and start our server by entering the command:

code-example(language="bash").
code-example(language="sh" class="code-shell").
pub serve

block http-library
Expand Down
4 changes: 2 additions & 2 deletions public/docs/ts/_cache/tutorial/toh-pt5.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ block keep-app-running
Open a terminal/console window and enter the following command to
start the TypeScript compiler, start the server, and watch for changes:

code-example(language="bash").
code-example(language="sh" class="code-shell").
npm start

:marked
Expand Down Expand Up @@ -438,7 +438,7 @@ code-example(language="html").
We *can* add the hero's `id` to the URL. When routing to the hero whose `id` is 11,
we could expect to see an URL such as this:

code-example(format='').
code-example(format="nocode").
/detail/11

:marked
Expand Down
2 changes: 1 addition & 1 deletion public/docs/ts/_cache/tutorial/toh-pt6.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ block start-server-and-watch
Open a terminal/console window and enter the following command to
start the TypeScript compiler, start the server, and watch for changes:

code-example(language="bash").
code-example(language="sh" class="code-shell").
npm start

:marked
Expand Down
6 changes: 3 additions & 3 deletions public/docs/ts/latest/tutorial/toh-pt2.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ include ../_util-fns
### Keep the app transpiling and running
We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing

code-example(language="bash").
code-example(language="sh" class="code-shell").
npm start

:marked
Expand Down Expand Up @@ -161,7 +161,7 @@ code-example(language="bash").

:marked
Focus on the event binding
code-example(format="." language="bash").
code-example.
(click)="onSelect(hero)"
:marked
The parenthesis identify the `<li>` element’s `click` event as the target.
Expand Down Expand Up @@ -209,7 +209,7 @@ code-example(language="bash").
The `selectedHero` is `undefined`.
That’s why we'll see the following error in the browser’s console:

code-example(language="html").
code-example(format="nocode").
EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]

:marked
Expand Down
8 changes: 4 additions & 4 deletions public/docs/ts/latest/tutorial/toh-pt3.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ include ../_util-fns
### Keep the app transpiling and running
We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing

code-example(language="bash").
code-example(language="sh" class="code-shell").
npm start

:marked
Expand Down Expand Up @@ -124,7 +124,7 @@ code-example(language="bash").

We will soon update the `AppComponent` template so that it binds its `selectedHero` property
to the `hero` property of our `HeroDetailComponent`. The binding *might* look like this:
code-example(format=".").
code-example(language="html").
&lt;my-hero-detail [hero]="selectedHero">&lt;/my-hero-detail>
:marked
Notice that the `hero` property is the ***target*** of a property binding &mdash; it's in square brackets to the left of the (=).
Expand Down Expand Up @@ -169,15 +169,15 @@ code-example(format=".").
Now that the application knows about our `HeroDetailComponent`,
find the location in the `AppComponent` template where we removed the *Hero Detail* content
and add an element tag that represents the `HeroDetailComponent`.
code-example(format=".").
code-example(language="html").
&lt;my-hero-detail>&lt;/my-hero-detail>
.l-sub-section
:marked
*my-hero-detail* is the name we set as the `selector` in the `HeroDetailComponent` metadata.
:marked
The two components won't coordinate until we bind the `selectedHero` property of the `AppComponent`
to the `HeroDetailComponent` element's `hero` property like this:
code-example(format=".")
code-example(language="html").
&lt;my-hero-detail [hero]="selectedHero">&lt;/my-hero-detail>
:marked
The `AppComponent`’s template should now look like this
Expand Down
2 changes: 1 addition & 1 deletion public/docs/ts/latest/tutorial/toh-pt4.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ include ../_util-fns
Open a terminal/console window.
Start the TypeScript compiler, watch for changes, and start our server by entering the command:

code-example(language="bash").
code-example(language="sh" class="code-shell").
npm start

:marked
Expand Down
4 changes: 2 additions & 2 deletions public/docs/ts/latest/tutorial/toh-pt5.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ block keep-app-running
Open a terminal/console window and enter the following command to
start the TypeScript compiler, start the server, and watch for changes:

code-example(language="bash").
code-example(language="sh" class="code-shell").
npm start

:marked
Expand Down Expand Up @@ -438,7 +438,7 @@ code-example(language="html").
We *can* add the hero's `id` to the URL. When routing to the hero whose `id` is 11,
we could expect to see an URL such as this:

code-example(format='').
code-example(format="nocode").
/detail/11

:marked
Expand Down
2 changes: 1 addition & 1 deletion public/docs/ts/latest/tutorial/toh-pt6.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ block start-server-and-watch
Open a terminal/console window and enter the following command to
start the TypeScript compiler, start the server, and watch for changes:

code-example(language="bash").
code-example(language="sh" class="code-shell").
npm start

:marked
Expand Down