my blog https://overreacted.io
wip
+10
-8
+10
-8
public/untitled/index.md
+10
-8
public/untitled/index.md
···
38
38
}
39
39
```
40
40
41
-
We'll *specify* that sending HTML involves unwrapping all of these custom tags:
41
+
We'll specify that *sending* HTML involves unwrapping all of these custom tags:
42
42
43
43
```js {3}
44
44
<html>
···
100
100
101
101
Objects let us group related stuff together.
102
102
103
-
Suppose we wanted to send this HTML. First, according to what we specified earlier, we'd have to replace all custom tags like `Greeting` with their output:
103
+
Suppose we wanted to *send* this HTML. First, according to our specification for custom tags, we'd have to replace all custom tags like `Greeting` with their output:
104
104
105
-
```js
105
+
```js {3,4}
106
106
<html>
107
107
<body>
108
108
<p style={{ color: 'purple' }}>Hello, Alice</p>
···
122
122
</html>
123
123
```
124
124
125
-
But we don't *have to* turn our "imaginary" HTML into "real" HTML right away. We can stay in the imaginary land for a bit longer by turning *the entire thing* into JSON. Note how in this case, `style` can remain completely intact as an object within it:
125
+
But we don't *have to* turn our "imaginary" HTML into "real" HTML right away. We can stay in the imaginary land for a bit longer by turning *the entire thing* into JSON. Note how in this case, `style` can remain completely intact as an object within:
126
126
127
127
```js {6,10}
128
128
["html", {
···
141
141
}]
142
142
```
143
143
144
-
We can easily turn this JSON into the "real" HTML later if we want. But it's a *strictly richer* representation because it preserves objects in a way that's easy to parse.
144
+
We can *then* easily turn this JSON into the "real" HTML if we want. But JSON is a *richer* representation because it preserves objects in a way that is easy to parse.
145
145
146
-
Going forward, we'll co-evolve these two representations.
146
+
Going forward, we'll co-evolve these two different but useful representations.
147
147
148
148
---
149
149
150
150
### Async Tags
151
151
152
-
We're previously hardcoded some objects into our code:
152
+
We're previously hardcoded some objects into our HTML:
153
153
154
154
```js {3-4}
155
155
<html>
···
179
179
}
180
180
```
181
181
182
-
Actually, this looks a bit repetitive--let's have `Greeting` itself read from the disk.
182
+
Actually, this looks a bit repetitive--let's have `Greeting` itself do the `readFile`:
183
183
184
184
```js {3-4,8-10}
185
185
<html>
···
199
199
);
200
200
}
201
201
```
202
+
203
+
We'll have to amend our specification. We'll say that if a custom tag like `Greeting` is asynchronous, we'll *wait* for its output. Other than that, there'll be no difference in the final output. Both HTML and JSON will be the same as before.