You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: app/docs/md/get-started/tutorial.md
+8-7Lines changed: 8 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -198,7 +198,7 @@ export async function get (req) {
198
198
```
199
199
200
200
This file handles GET requests requests so the exported function is called `get`.
201
-
If we start the developement server (`npm start`) and navigate to `https://localhost:3333` we see the JSON output for our list of tasks.
201
+
If we start the development server (`npm start`) and navigate to `https://localhost:3333` we see the JSON output for our list of tasks.
202
202
203
203
Instead of a static list of tasks we want to store them in out database.
204
204
The code to read to and from the database would result in duplication across multiple api files so lets build a data access layer to group those functions.
@@ -350,7 +350,7 @@ If the HTTP request is for `application/json` data the `todo` that was created i
350
350
But if the request was for `text/html` then the `location` property causes a 302 redirect to `/` to be sent.
351
351
This will cause the browser to redirect back to the root to show the updated list of tasks.
352
352
353
-
The `index.mjs` handler we built first retured only static data.
353
+
The `index.mjs` handler we built first returned only static data.
354
354
Update it with the following to serve the list of tasks from the database.
355
355
356
356
```javascript
@@ -848,7 +848,7 @@ export default function TodoFooter({html,state}){
848
848
```
849
849
850
850
In order to support the filtering query parameters used in the links above we need to update the `/app/api/index.mjs` to filter the list accordingly.
851
-
The query parameters for the api can be pulled from the `req.query`propety.
851
+
The query parameters for the api can be pulled from the `req.query`property.
852
852
853
853
```javascript
854
854
import { getTodos } from'../models/todos.mjs'
@@ -1074,7 +1074,7 @@ The header component uses the Web Component lifecycle hooks to add the code for
1074
1074
Notice that this component extends `CustomElement` instead of `HTMLElement`.
1075
1075
This class extends the platform `HTMLElement` to add Enhance custom element expansion, style scoping, and slot expansion to the client.
1076
1076
For more details check out the docs for [Enhance Components Folder](/docs/conventions/components).
1077
-
This will allow us to add new task direcly in the client with JavaScript and the CustomElement will expand the component markup as needed.
1077
+
This will allow us to add new task directly in the client with JavaScript and the CustomElement will expand the component markup as needed.
1078
1078
1079
1079
### Browser folder
1080
1080
This component uses `API` imported from '../browser/api.mjs'.
@@ -1105,7 +1105,7 @@ The clientside API includes:
1105
1105
- `../browser/api.mjs`
1106
1106
1107
1107
It looks a bit complicated but the basic pattern is that the API function wraps the methods for interacting with the serverside api.
1108
-
When an api.create() is called it passes the form values and sends them to a worker to communciate with the server on a different thread.
1108
+
When an api.create() is called it passes the form values and sends them to a worker to communicate with the server on a different thread.
1109
1109
When the server is updated and sends its results component that has subscribed to the update gets notified.
1110
1110
For more details check out the [Enhance client side state Management](https://begin.com/blog/posts/2023-11-30-clientside-state-management) blog post on begin.com.
1111
1111
@@ -1582,7 +1582,8 @@ This is almost always the most performant option.
1582
1582
The other option is to use a DOM diffing library that responds to any changes in the component and rerenders it.
1583
1583
We will do this using `@enhance/morphdom-mixin` from Enhance (`npm i @enhance/morphdom-mixin`).
1584
1584
1585
-
This mixin will add morphdom to monitor for any chance in attributes and then rerender the components.
1585
+
This mixin will add MorphDOM to monitor for any chance in attributes and then rerender the components.
0 commit comments