Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Fixes a few typos in DOCS.md #1136

Merged
merged 1 commit into from
Jun 27, 2024
Merged
Changes from all commits
Commits
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
21 changes: 10 additions & 11 deletions DOCS.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ const ArgUsingResource = (someArg) => {

#### Reactivity

function-based resources are _implicitly_ reactive,
in that there is no ceramony required by the consumer to make them reactive
Function-based resources are _implicitly_ reactive,
in that there is no ceremony required by the consumer to make them reactive
or update in response to changes in reactive source-data.

For example, consider a resource that doubles a number (this is over engineered, and you wouldn't want a resource for doubling a number)
Expand Down Expand Up @@ -188,7 +188,7 @@ But this is not feature-complete! We still need to handle cleanup to prevent mem
- setInterval(() => (time.current = new Date()), 1_000);
+ let interval = setInterval(() => (time.current = new Date()), 1_000);
+
+ on.cleanup(() => clearInteral(interval))
+ on.cleanup(() => clearInterval(interval))

return time.current;
```
Expand All @@ -197,7 +197,7 @@ Now when the `resource` updates or is torn down, won't leave a bunch of `setInte

Lastly, adding in locale-aware formatting with [`Intl.DateTimeFormat`][mdn-DateTimeFormat].
```diff
on.cleanup(() => clearInteral(interval))
on.cleanup(() => clearInterval(interval))

- return time.current;
+ return new Intl.DateTimeFormat('en-US', {
Expand All @@ -210,7 +210,7 @@ Lastly, adding in locale-aware formatting with [`Intl.DateTimeFormat`][mdn-DateT


However, there is a goofy behavior with this implementation.
By accessing `time.current`, we end up consuming tracaked data within the `resource`
By accessing `time.current`, we end up consuming tracked data within the `resource`
callback function. When `setInterval` updates `time.current`, the reactivity system
detects that "tracked data that was consumed in the `resource` callback has changed,
and must re-evaluate".
Expand All @@ -223,7 +223,7 @@ To solve this, we need to enclose access to the tracked data via an arrow functi
let time = new TrackedObject({ current: new Date() });
let interval = setInterval(() => (time.current = new Date()), 1_000);

on.cleanup(() => clearInteral(interval))
on.cleanup(() => clearInterval(interval))

- return new Intl.DateTimeFormat('en-US', { /* ... ✂️ ...*/ });
+ let formatter = new Intl.DateTimeFormat('en-US', { /* ... ✂️ ...*/ });
Expand All @@ -243,7 +243,7 @@ function Clock(locale = 'en-US') {
let time = new TrackedObject({ current: new Date() });
let interval = setInterval(() => (time.current = new Date()), 1_000);

on.cleanup(() => clearInteral(interval))
on.cleanup(() => clearInterval(interval))

let formatter = new Intl.DateTimeFormat(locale, { /* ... ✂️ ...*/ });

Expand All @@ -265,7 +265,7 @@ function Clock(locale = 'en-US') {
let time = new TrackedObject({ current: new Date() });
let interval = setInterval(() => (time.current = new Date()), 1_000);

on.cleanup(() => clearInteral(interval))
on.cleanup(() => clearInterval(interval))

let formatter = new Intl.DateTimeFormat(locale, { /* ... ✂️ ...*/ });

Expand All @@ -283,7 +283,7 @@ resourceFactory(Clock);
</details>

Up until now, all we've needed in the template for these clocks to work is to have `{{clock}}` in our template.
But becasue we now need to pass data to a function, we need to invoke that function. The `resourceFactory` utility handles some framework-wiring so that the `Clock` function can immediately invoke the `resource` function.
But because we now need to pass data to a function, we need to invoke that function. The `resourceFactory` utility handles some framework-wiring so that the `Clock` function can immediately invoke the `resource` function.

```hbs
{{ (Clock 'en-GB') }}
Expand Down Expand Up @@ -321,7 +321,7 @@ if (typeof locale === 'function') {
let time = new TrackedObject({ current: new Date() });
let interval = setInterval(() => (time.current = new Date()), 1_000);

on.cleanup(() => clearInteral(interval))
on.cleanup(() => clearInterval(interval))

let formatter = new Intl.DateTimeFormat(currentLocale, { /* ... ✂️ ...*/ });

Expand Down Expand Up @@ -355,4 +355,3 @@ class {
[🔝 back to top](#authoring-resources)

See: Cookbook entry, [`fetch` with `AbortController`](https://github.com/NullVoxPopuli/ember-resources/blob/main/docs/docs/cookbook/fetch-with-AbortController.md#using-resource-1)

Loading