danabra.mov
my blog https://overreacted.io
wip
-262
public/untitled/index.md
-262
public/untitled/index.md
···
1
-
---
2
-
title: Imaginary HTML
3
-
date: '2025-05-01'
4
-
spoiler: Tags on both sides.
5
-
---
6
-
7
-
Here's a piece of HTML:
8
-
9
-
```js
10
-
<html>
11
-
<body>
12
-
<p>Hello, world</p>
13
-
</body>
14
-
</html>
15
-
```
16
-
17
-
Imagine this was the only piece of HTML you've ever seen in your life. If you had complete freedom, which features would you add to HTML, and in what order?
18
-
19
-
---
20
-
21
-
### Tags
22
-
23
-
Personally, I'd like to start by adding a way to define my own HTML tags.
24
-
25
-
It doesn't need to be complicated. We can just use JavaScript functions:
26
-
27
-
```js {3,7-9}
28
-
<html>
29
-
<body>
30
-
<Greeting />
31
-
</body>
32
-
</html>
33
-
34
-
function Greeting() {
35
-
return <p>Hello, world</p>
36
-
}
37
-
```
38
-
39
-
To make this work, let's say that whenever the HTML is sent over the network--that is, *serialized*--the server must replace those tags with the output they return:
40
-
41
-
```js {3}
42
-
<html>
43
-
<body>
44
-
<p>Hello, world</p>
45
-
</body>
46
-
</html>
47
-
```
48
-
49
-
When there are no functions left to call, the HTML is ready to be sent.
50
-
51
-
Neat feature, huh?
52
-
53
-
Good thing we got it in early.
54
-
55
-
It might influence how we approach everything else.
56
-
57
-
---
58
-
59
-
### Attributes
60
-
61
-
Let's support passing attributes to tags and interpolating values into the markup.
62
-
63
-
```js {3-4,9}
64
-
<html>
65
-
<body>
66
-
<Greeting name="Alice" />
67
-
<Greeting name="Bob" />
68
-
</body>
69
-
</html>
70
-
71
-
function Greeting({ name }) {
72
-
return <p>Hello, {name}</p>
73
-
}
74
-
```
75
-
76
-
Of course, there's no reason why those arguments have to be *strings*.
77
-
78
-
We might want to pass an object to `Greeting` instead:
79
-
80
-
```js {3-4,10-12}
81
-
<html>
82
-
<body>
83
-
<Greeting person={{ name: 'Alice', favoriteColor: 'purple' }} />
84
-
<Greeting person={{ name: 'Bob', favoriteColor: 'pink' }} />
85
-
</body>
86
-
</html>
87
-
88
-
function Greeting({ person }) {
89
-
return (
90
-
<p style={{ color: person.favoriteColor }}>
91
-
Hello, {person.name}
92
-
</p>
93
-
);
94
-
}
95
-
```
96
-
97
-
Objects let us group related stuff together.
98
-
99
-
According to the [earlier rule](#tags), *serializing* the HTML above would produce:
100
-
101
-
```js
102
-
<html>
103
-
<body>
104
-
<p style={{ color: 'purple' }}>Hello, Alice</p>
105
-
<p style={{ color: 'pink' }}>Hello, Bob</p>
106
-
</body>
107
-
</html>
108
-
```
109
-
110
-
Still, we haven't gotten rid of all objects.
111
-
112
-
What should we do with those `{ color: '...' }` objects?
113
-
114
-
---
115
-
116
-
### Objects
117
-
118
-
The "real" HTML we know and love has no first-class notion of objects. If we wanted to output some "real" HTML, we'd have to turn `style` into a string:
119
-
120
-
```js {3,4}
121
-
<html>
122
-
<body>
123
-
<p style="color: purple">Hello, Alice</p>
124
-
<p style="color: pink">Hello, Bob</p>
125
-
</body>
126
-
</html>
127
-
```
128
-
129
-
But if we're reimagining HTML, we don't have to abide by the same limitations. For example, we could decide that our imaginary HTML *serializes into* JSON:
130
-
131
-
```js {6,10}
132
-
["html", {
133
-
children: ["body", {
134
-
children: [
135
-
["p", {
136
-
children: "Hello, Alice",
137
-
style: { color: "purple" }
138
-
}],
139
-
["p", {
140
-
children: "Hello, Bob",
141
-
style: { color: "pink" }
142
-
}]
143
-
]
144
-
}]
145
-
}]
146
-
```
147
-
148
-
This lets us keep the `style` objects--*or any objects we might want to send*--intact.
149
-
150
-
This strange JSON representation isn't particularly interesting or useful yet. But going forward, we'll consider this representation as our primary output format. We can always generate "real" HTML *from* this representation, but not vice versa.
151
-
152
-
---
153
-
154
-
### Async Tags
155
-
156
-
We're previously hardcoded some objects into our HTML:
157
-
158
-
```js {3-4}
159
-
<html>
160
-
<body>
161
-
<Greeting person={{ name: 'Alice', favoriteColor: 'purple' }} />
162
-
<Greeting person={{ name: 'Bob', favoriteColor: 'pink' }} />
163
-
</body>
164
-
</html>
165
-
166
-
function Greeting({ person }) {
167
-
// ...
168
-
}
169
-
```
170
-
171
-
But we could grab them from somewhere else.
172
-
173
-
Let's read the data from the filesystem:
174
-
175
-
```js {3-4}
176
-
<html>
177
-
<body>
178
-
<Greeting person={JSON.parse(await readFile('./alice123.json', 'utf8'))} />
179
-
<Greeting person={JSON.parse(await readFile('./bob456.json', 'utf8'))} />
180
-
</body>
181
-
</html>
182
-
183
-
function Greeting({ person }) {
184
-
// ...
185
-
}
186
-
```
187
-
188
-
Actually, this looks a bit repetitive--let's move the `readFile` *into* the `Greeting`:
189
-
190
-
```js {3-4,8-10}
191
-
<html>
192
-
<body>
193
-
<Greeting username="alice123" />
194
-
<Greeting username="bob456" />
195
-
</body>
196
-
</html>
197
-
198
-
async function Greeting({ username }) {
199
-
const filename = `./${username.replace(/\W/g, '')}.json`;
200
-
const person = JSON.parse(await readFile(filename, 'utf8'));
201
-
return (
202
-
<p style={{ color: person.favoriteColor }}>
203
-
Hello, {person.name}
204
-
</p>
205
-
);
206
-
}
207
-
```
208
-
209
-
We'll have to slightly amend our specification to allow this. To *send* HTML, we'll have to *wait* for all custom tags to resolve (and to be replaced with their output).
210
-
211
-
The end result is still the same:
212
-
213
-
```js
214
-
["html", {
215
-
children: ["body", {
216
-
children: [
217
-
["p", {
218
-
children: "Hello, Alice",
219
-
style: { color: "purple" }
220
-
}],
221
-
["p", {
222
-
children: "Hello, Bob",
223
-
style: { color: "pink" }
224
-
}]
225
-
]
226
-
}]
227
-
}]
228
-
```
229
-
230
-
(If we wanted, we could then convert this JSON into the "real" HTML:)
231
-
232
-
```js
233
-
<html>
234
-
<body>
235
-
<p style="color: purple">Hello, Alice</p>
236
-
<p style="color: pink">Hello, Bob</p>
237
-
</body>
238
-
</html>
239
-
```
240
-
241
-
But note how our original "imaginary HTML" allowed us to *name* this concept:
242
-
243
-
```js {3-4}
244
-
<html>
245
-
<body>
246
-
<Greeting username="alice123" />
247
-
<Greeting username="bob456" />
248
-
</body>
249
-
</html>
250
-
251
-
async function Greeting({ username }) {
252
-
// ...
253
-
}
254
-
```
255
-
256
-
It allowed us to create a [self-contained abstraction](/impossible-components/#local-state-local-data) that loads its own data.
257
-
258
-
Cool beans!
259
-
260
-
---
261
-
262
-
### Event Handlers