Add's a slow process to the Kitchen Sink demo #73
Conversation
| `, | ||
| styleUrls: ['./leaky-faucet.component.css'] | ||
| }) | ||
|
|
There was a problem hiding this comment.
Shouldn't have line breaks here
|
|
||
|
|
||
| export class LeakyFaucetComponent { | ||
|
|
There was a problem hiding this comment.
Line breaks after opening braces are not standard and should be avoided (don't adhere to lint / standard rules)
kitchen-sink-demo/src/main.ts
Outdated
| import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; | ||
|
|
||
| import { AppModule } from './app/app.module'; | ||
| import { environment } from './environments/environment'; | ||
|
|
||
| // @todo: how to not include in prod bundle? | ||
| import { auguryBootstrap } from '../../../augury-labs/packages/core/dist'; // '@augury/core'; |
There was a problem hiding this comment.
I'm not a fan of using a relative import like this considering this is a completely different project it's using. It actually feels more like this sort of test might be better placed in augury-labs. At a minimal we should use the new delivery model then @santiago-elustondo and I came up with instead of this old approach.
This requires 3 file changes
main.augury.ts (new)
angular.json (update transform to use this on new build config option)
package.json (optional - add new serve option with new build config option)
|
|
||
| status = 'not leaking'; | ||
| drip = 'start the drip'; | ||
| start = 'Start'; |
There was a problem hiding this comment.
Variable name start doesn't make much sense since it can change to stop. Perhaps this is the state?
| <p>{{ status }}</p> | ||
| <button type="button" class="btn btn-danger" | ||
| (click)="toggleLeak()"> | ||
| {{ start }} leaking ( calls a recursive function using setTimeout) |
| <div> | ||
| <p>{{ status }}</p> | ||
| <button type="button" class="btn btn-danger" | ||
| (click)="toggleLeak()"> |
There was a problem hiding this comment.
In this case, I would probably keep this (click) on the previous line. Unless your going to add a new line for every attribute.
| @Component({ | ||
| selector: 'leaky-faucet', | ||
| template: ` | ||
| <div> |
There was a problem hiding this comment.
Indent the template content so it's not inline with the attributes:
template: `
<div>
keneasson
force-pushed
the
leaky-faucet
branch
2 times, most recently
from
baab1ee
to
887c406
Compare
| </div> | ||
| ` | ||
| }) | ||
|
|
There was a problem hiding this comment.
Normally we don't leave gaps between the component decorator and the class
| this.drip = ' fixed '; | ||
| this.stopLeak(); | ||
| }, | ||
| this.dripRate ); |
There was a problem hiding this comment.
Don't line break here. Just start using prettier to format and I'll unlikely have to comment on small stuff like this ;)
kitchen-sink-demo/src/main.ts
Outdated
| @@ -1,14 +1,13 @@ | |||
| import { enableProdMode } from '@angular/core'; | |||
There was a problem hiding this comment.
Now that we are using main.augury.ts these changes should probably be reverted.
kitchen-sink-demo/src/main.augury.ts
Outdated
| import { environment } from './environments/environment'; | ||
|
|
||
| // @todo: how to not include in prod bundle? | ||
| import { auguryBootstrap } from '../../../augury-labs/packages/core/dist'; // '@augury/core'; |
There was a problem hiding this comment.
We should look at using optional npm packages instead of using relative paths here.
keneasson
force-pushed
the
leaky-faucet
branch
from
bde4d42
to
2be2210
Compare
keneasson
force-pushed
the
leaky-faucet
branch
from
2be2210
to
cb3a333
Compare
sumitarora
force-pushed
the
master
branch
2 times, most recently
from
39e6968
to
cf9766b
Compare
For testing the new Augury-labs Red/Green indicator. Uses settimeout recursively to simulate a slow component.