my blog https://overreacted.io
A Chain Reaction
+689
-99
+58
app/[slug]/mdx.js
+58
app/[slug]/mdx.js
···
1
+
import * as jsx from "acorn-jsx";
2
+
import { Parser } from "acorn";
3
+
import { visit } from "unist-util-visit";
4
+
5
+
const parser = Parser.extend(jsx());
6
+
7
+
const lang = new Set(["js", "jsx", "javascript"]);
8
+
9
+
export function remarkMdxEvalCodeBlock() {
10
+
return (tree) => {
11
+
visit(tree, "code", (node, index, parent) => {
12
+
if (lang.has(node.lang) && node.meta === "eval") {
13
+
const program = parser.parse(node.value, {
14
+
ecmaVersion: 2020,
15
+
sourceType: "module",
16
+
});
17
+
const output = {
18
+
type: "mdxFlowExpression",
19
+
value: "",
20
+
data: {
21
+
estree: {
22
+
type: "Program",
23
+
body: [
24
+
{
25
+
type: "ExpressionStatement",
26
+
expression: {
27
+
type: "CallExpression",
28
+
callee: {
29
+
type: "ArrowFunctionExpression",
30
+
id: null,
31
+
expression: false,
32
+
generator: false,
33
+
async: false,
34
+
params: [],
35
+
body: {
36
+
type: "BlockStatement",
37
+
body: [
38
+
...program.body.slice(0, -1),
39
+
{
40
+
type: "ReturnStatement",
41
+
argument: program.body.at(-1),
42
+
},
43
+
],
44
+
},
45
+
},
46
+
arguments: [],
47
+
optional: false,
48
+
},
49
+
},
50
+
],
51
+
},
52
+
},
53
+
};
54
+
parent.children.splice(index, 1, output);
55
+
}
56
+
});
57
+
};
58
+
}
+26
-99
app/[slug]/page.js
+26
-99
app/[slug]/page.js
···
5
5
import { sans } from "../fonts";
6
6
import remarkSmartpants from "remark-smartypants";
7
7
import rehypePrettyCode from "rehype-pretty-code";
8
+
import { remarkMdxEvalCodeBlock } from "./mdx.js";
8
9
import overnight from "overnight/themes/Overnight-Slumber.json";
9
10
import "./markdown.css";
10
11
11
12
overnight.colors["editor.background"] = "var(--code-bg)";
12
13
13
14
export default async function PostPage({ params }) {
14
-
const file = await readFile("./public/" + params.slug + "/index.md", "utf8");
15
+
const filename = "./public/" + params.slug + "/index.md";
16
+
const file = await readFile(filename, "utf8");
15
17
let postComponents = {};
16
18
try {
17
19
postComponents = await import(
···
47
49
})}
48
50
</p>
49
51
<div className="markdown mt-10">
50
-
<Defs>
51
-
<MDXRemote
52
-
source={content}
53
-
components={{
54
-
a: Link,
55
-
Server: Server,
56
-
Client: Client,
57
-
...postComponents,
58
-
}}
59
-
options={{
60
-
mdxOptions: {
61
-
useDynamicImport: true,
62
-
remarkPlugins: [remarkSmartpants],
63
-
rehypePlugins: [
64
-
[
65
-
rehypePrettyCode,
66
-
{
67
-
theme: overnight,
68
-
},
69
-
],
52
+
<MDXRemote
53
+
source={content}
54
+
components={{
55
+
a: Link,
56
+
...postComponents,
57
+
}}
58
+
options={{
59
+
mdxOptions: {
60
+
useDynamicImport: true,
61
+
remarkPlugins: [
62
+
remarkSmartpants,
63
+
[remarkMdxEvalCodeBlock, filename],
64
+
],
65
+
rehypePlugins: [
66
+
[
67
+
rehypePrettyCode,
68
+
{
69
+
theme: overnight,
70
+
},
70
71
],
71
-
},
72
-
}}
73
-
/>
74
-
</Defs>
72
+
],
73
+
},
74
+
}}
75
+
/>
75
76
<hr />
76
77
<p>
77
78
<Link href={discussUrl}>Discuss on 𝕏</Link>
···
81
82
</div>
82
83
</article>
83
84
);
84
-
}
85
-
86
-
function Defs({ children }) {
87
-
return (
88
-
<div
89
-
style={{
90
-
"--jaggedTopPath": `polygon(${generateJaggedTopPath()})`,
91
-
"--jaggedBottomPath": `polygon(${generateJaggedBottomPath()})`,
92
-
}}
93
-
>
94
-
{children}
95
-
</div>
96
-
);
97
-
}
98
-
99
-
function Server({ children }) {
100
-
return (
101
-
<div
102
-
style={{
103
-
"--path": "var(--jaggedBottomPath)",
104
-
"--radius-bottom": 0,
105
-
"--padding-bottom": "1.2rem",
106
-
}}
107
-
>
108
-
{children}
109
-
</div>
110
-
);
111
-
}
112
-
113
-
function Client({ children, glued }) {
114
-
return (
115
-
<div
116
-
style={{
117
-
"--path": "var(--jaggedTopPath)",
118
-
"--radius-top": 0,
119
-
"--padding-top": "1.2rem",
120
-
position: "relative",
121
-
marginTop: glued ? -30 : 0,
122
-
}}
123
-
>
124
-
{children}
125
-
</div>
126
-
);
127
-
}
128
-
129
-
const jaggedSliceCount = 50;
130
-
131
-
function generateJaggedBottomPath() {
132
-
let path = [
133
-
["0%", "0%"],
134
-
["100%", "0%"],
135
-
["100%", "100%"],
136
-
];
137
-
let left = 100;
138
-
let top = 100;
139
-
for (let i = 0; i < jaggedSliceCount; i++) {
140
-
left -= 100 / jaggedSliceCount;
141
-
path.push([`${left}%`, i % 2 === 0 ? `calc(${top}% - 5px)` : `${top}%`]);
142
-
}
143
-
path.push(["0%", "100%"]);
144
-
return path.map((pair) => pair.join(" ")).join(",");
145
-
}
146
-
147
-
function generateJaggedTopPath() {
148
-
let path = [["0%", "5px"]];
149
-
let left = 0;
150
-
for (let i = 0; i < jaggedSliceCount; i++) {
151
-
left += 100 / jaggedSliceCount;
152
-
path.push([`${left}%`, i % 2 === 1 ? "5px" : "0"]);
153
-
}
154
-
path.push(["100%", "5px"]);
155
-
path.push(["100%", "100%"]);
156
-
path.push(["0%", "100%"]);
157
-
return path.map((pair) => pair.join(" ")).join(",");
158
85
}
159
86
160
87
export async function generateStaticParams() {
+605
public/a-chain-reaction/index.md
+605
public/a-chain-reaction/index.md
···
1
+
---
2
+
title: "A Chain Reaction"
3
+
date: '2023-12-11'
4
+
spoiler: "The limits of my language mean the limits of my world."
5
+
---
6
+
7
+
I wrote a bit of JSX in my editor:
8
+
9
+
```js
10
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
11
+
Hello, <i>Alice</i>!
12
+
</p>
13
+
```
14
+
15
+
Right now, this information only exists on *my* device. But with a bit of luck, it will travel through time and space to *your* device, and appear on *your* screen.
16
+
17
+
```js eval
18
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
19
+
Hello, <i>Alice</i>!
20
+
</p>
21
+
```
22
+
23
+
The fact that this works is a marvel of engineering.
24
+
25
+
Deep inside of your browser, there are pieces of code that know how to display a paragraph or draw text in italics. These pieces of code are different between different browsers, and even between different versions of the same browser. Drawing to the screen is also done differently on different operating systems.
26
+
27
+
However, because these concepts have been given agreed-upon *names* ([`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) for a paragraph, [`<i>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) for italics), I can refer to them without worrying how they *really* work on your device. I can't directly access their internal logic but I know which information I can pass to them (such as a CSS [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)). Thanks to the web standards, I can be reasonably sure my greeting will appear as I intended.
28
+
29
+
Tags like `<p>` and `<i>` let us refer to the built-in browser concepts. However, names don't *have to* refer to something built-in. For example, I'm using CSS classes like [`text-2xl`](https://tailwindcss.com/docs/font-size) and [`font-sans`](https://tailwindcss.com/docs/font-family) to style my greeting. I didn't come up with those names myself--they come from a CSS library called Tailwind. I've included it on this page which lets me use any of the CSS class names it defines.
30
+
31
+
So why do we like giving names to things?
32
+
33
+
---
34
+
35
+
I wrote `<p>` and `<i>`, and my editor recognized those names. So did your browser. If you've done some web development, you probably recognized them too, and maybe even guessed what would appear on the screen by reading the markup. In that sense, names help us start with a bit of a shared understanding.
36
+
37
+
Fundamentally, computers execute relatively basic kinds of instructions--like adding or multiplying numbers, writing stuff to memory and reading from it, or communicating with external devices like a display. Merely showing a `<p>` on your screen could involve running hundreds of thousands of such instructions.
38
+
39
+
If you saw all the instructions your computer ran to display a `<p>` on the screen, you could hardly guess what they're doing. It's like trying to figure out which song is playing by analyzing all the atoms bouncing around the room. It would seem incomprehensible! You'd need to "zoom out" to see what's going on.
40
+
41
+
To describe a complex system, or to instruct a complex system what to do, it helps to separate its behavior into layers that build on each other's concepts.
42
+
43
+
This way, people working on screen drivers can focus on how to send the right colors to the right pixels. Then people working on text rendering can focus on how each character should turn into a bunch of pixels. And that lets people like me focus on picking just the right color for my "paragraphs" and "italics".
44
+
45
+
We like names because they let us forget what's behind them.
46
+
47
+
---
48
+
49
+
I've used many names that other people came up with. Some are built into the browsers, like `<p>` and `<i>`. Some are built into the tools I'm using, like `text-2xl` and `font-sans`. These may be my building blocks, but what am *I* building?
50
+
51
+
For example, what is this?
52
+
53
+
```js
54
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
55
+
Hello, <i>Alice</i>!
56
+
</p>
57
+
```
58
+
59
+
```js eval
60
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
61
+
Hello, <i>Alice</i>!
62
+
</p>
63
+
```
64
+
65
+
From your browser's perspective, this is a paragraph with certain CSS classes (which make it large and purple) and some text inside (part of it is in italics).
66
+
67
+
But from *my* perspective, it's *a greeting for Alice.* Although my greeting *happens* to be a paragraph, most of the time I want to think about it this way instead:
68
+
69
+
```js
70
+
<Greeting person={alice} />
71
+
```
72
+
73
+
Giving this concept a name provides me with some newfound flexibility. I can now display multiple `Greeting`s without copying and pasting their markup. I can pass different data to them. If I wanted to change how all greetings look and behave, I could do it in a single place. Turning `Greeting` into its own concept lets me adjust *"which greetings to display"* separately from *"what a greeting is"*.
74
+
75
+
However, I have also introduced a problem.
76
+
77
+
Now that I've given this concept a name, the "language" in my mind is different from the "language" that your browser speaks. Your browser knows about `<p>` and `<i>`, but it has never heard of a `<Greeting>`--that's my own concept. If I wanted your browser to understand what I mean, I'd have to "translate" this piece of markup to only use the concepts that your browser already knows.
78
+
79
+
I'd need to turn this:
80
+
81
+
```js
82
+
<Greeting person={alice} />
83
+
```
84
+
85
+
into this:
86
+
87
+
```js
88
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
89
+
Hello, <i>Alice</i>!
90
+
</p>
91
+
```
92
+
93
+
How would I go about that?
94
+
95
+
---
96
+
97
+
To name something, I need to define it.
98
+
99
+
For example, `alice` does not mean anything until I define `alice`:
100
+
101
+
```js
102
+
const alice = {
103
+
firstName: 'Alice',
104
+
birthYear: 1970
105
+
};
106
+
```
107
+
108
+
Now `alice` refers to that JavaScript object.
109
+
110
+
Similarly, I need to actually *define* what my concept of a `Greeting` means.
111
+
112
+
I will define a `Greeting` for any `person` as a paragraph showing "Hello, " followed by *that* person's first name in italics, plus an exclamation mark:
113
+
114
+
```js
115
+
function Greeting({ person }) {
116
+
return (
117
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
118
+
Hello, <i>{person.firstName}</i>!
119
+
</p>
120
+
);
121
+
}
122
+
```
123
+
124
+
Unlike `alice`, I defined `Greeting` as a function. This is because *a greeting* would have to be different for every person. `Greeting` is a piece of code--it performs a *transformation* or a *translation*. It *turns* some data into some UI.
125
+
126
+
That gives me an idea for what to do with this:
127
+
128
+
```js
129
+
<Greeting person={alice} />
130
+
```
131
+
132
+
Your browser wouldn't know what a `Greeting` is--that's my own concept. But now that I wrote a definition for that concept, I can *apply* this definition to "unpack" what I meant. You see, *a greeting for a person is actually a paragraph:*
133
+
134
+
```js {3-5}
135
+
function Greeting({ person }) {
136
+
return (
137
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
138
+
Hello, <i>{person.firstName}</i>!
139
+
</p>
140
+
);
141
+
}
142
+
```
143
+
144
+
Plugging the `alice`'s data into that definition, I end up with this final JSX:
145
+
146
+
```js
147
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
148
+
Hello, <i>Alice</i>!
149
+
</p>
150
+
```
151
+
152
+
At this point I only refer to the browser's own concepts. By substituting the `Greeting` with what I defined it to be, I have "translated" it for your browser.
153
+
154
+
```js eval
155
+
function Greeting({ person }) {
156
+
return (
157
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
158
+
Hello, <i>{person.firstName}</i>!
159
+
</p>
160
+
);
161
+
}
162
+
163
+
const alice = {
164
+
firstName: 'Alice',
165
+
birthYear: 1970
166
+
};
167
+
168
+
<Greeting person={alice} />
169
+
```
170
+
171
+
Now let's teach a computer to do the same thing.
172
+
173
+
---
174
+
175
+
Take a look at what JSX is made of.
176
+
177
+
```js
178
+
const originalJSX = <Greeting person={alice} />;
179
+
console.log(originalJSX.type); // Greeting
180
+
console.log(originalJSX.props); // { firstName: 'Alice', birthYear: 1970 }
181
+
```
182
+
183
+
Under the hood, JSX constructs an object with the `type` property corresponding to the tag, and the `props` property corresponding to the JSX attributes.
184
+
185
+
You can think of `type` as being the "code" and `props` as being the "data". To get the result, you need to plug that data *into* that code like I've done earlier.
186
+
187
+
Here is a little function I wrote that does exactly that:
188
+
189
+
```js
190
+
function translateForBrowser(originalJSX) {
191
+
const { type, props } = originalJSX;
192
+
return type(props);
193
+
}
194
+
```
195
+
196
+
In this case, `type` will be `Greeting` and `props` will be `{ person: alice }`, so `translateForBrowser(<Greeting person={alice} />)` will return the result of calling `Greeting` with `{ person: alice }` as the argument.
197
+
198
+
Which, as you might recall from the previous section, would give me this:
199
+
200
+
```js
201
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
202
+
Hello, <i>Alice</i>!
203
+
</p>
204
+
```
205
+
206
+
And that's exactly what I wanted!
207
+
208
+
You can verify that feeding my original piece of JSX to `translateForBrowser` will produce the "browser JSX" that only refers to concepts like `<p>` and `<i>`.
209
+
210
+
```js {5-7}
211
+
const originalJSX = <Greeting person={alice} />;
212
+
console.log(originalJSX.type); // Greeting
213
+
console.log(originalJSX.props); // { firstName: 'Alice', birthYear: 1970 }
214
+
215
+
const browserJSX = translateForBrowser(originalJSX);
216
+
console.log(browserJSX.type); // 'p'
217
+
console.log(browserJSX.props); // { className: 'text-2xl font-sans text-purple-400 dark:text-purple-500', children: ['Hello', { type: 'i', props: { children: 'Alice' }, '!'] }
218
+
```
219
+
220
+
There are many things I could do with that "browser JSX". For example, I could turn it into an HTML string to be sent to the browser. I could also convert it into a sequence of instructions that update an already existing DOM node. For now, I won't be focusing on the different ways to use it. All that matters right now is that by the time I have the "browser JSX", there is nothing left to "translate".
221
+
222
+
It's as if my `<Greeting>` has dissolved, and `<p>` and `<i>` are the residue.
223
+
224
+
---
225
+
226
+
Let's try something a tiny bit more complex. Suppose I want to wrap my greeting inside a [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) tag so that it appears collapsed by default:
227
+
228
+
```js {1,3}
229
+
<details>
230
+
<Greeting person={alice} />
231
+
</details>
232
+
```
233
+
234
+
The browser should display it like this (click "Details" to expand it!)
235
+
236
+
```js eval
237
+
function Greeting({ person }) {
238
+
return (
239
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
240
+
Hello, <i>{person.firstName}</i>!
241
+
</p>
242
+
);
243
+
}
244
+
245
+
const alice = {
246
+
firstName: 'Alice',
247
+
birthYear: 1970
248
+
};
249
+
250
+
<details className="pb-8">
251
+
<Greeting person={alice} />
252
+
</details>
253
+
```
254
+
255
+
So now my task is now to figure out how to turn this:
256
+
257
+
```js
258
+
<details>
259
+
<Greeting person={alice} />
260
+
</details>
261
+
```
262
+
263
+
into this:
264
+
265
+
```js
266
+
<details>
267
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
268
+
Hello, <i>Alice</i>!
269
+
</p>
270
+
</details>
271
+
```
272
+
273
+
Let's see if `translateForBrowser` can already handle that.
274
+
275
+
```js {2-4,9}
276
+
const originalJSX = (
277
+
<details>
278
+
<Greeting person={alice} />
279
+
</details>
280
+
);
281
+
console.log(originalJSX.type); // 'details'
282
+
console.log(originalJSX.props); // { children: { type: Greeting, props: { person: alice } } }
283
+
284
+
const browserJSX = translateForBrowser(originalJSX);
285
+
```
286
+
287
+
You will get an error inside of the `translateForBrowser` call:
288
+
289
+
```js {3}
290
+
function translateForBrowser(originalJSX) {
291
+
const { type, props } = originalJSX;
292
+
return type(props); // 🔴 TypeError: type is not a function
293
+
}
294
+
```
295
+
296
+
What happened here? My `translateForBrowser` implementation assumed that `type`--that is, `originalJSX.type`--is always a function like `Greeting`.
297
+
298
+
However, notice that `originalJSX.type` is actually a *string* this time:
299
+
300
+
```js {6}
301
+
const originalJSX = (
302
+
<details>
303
+
<Greeting person={alice} />
304
+
</details>
305
+
);
306
+
console.log(originalJSX.type); // 'details'
307
+
console.log(originalJSX.props); // { children: { type: Greeting, props: { person: alice } } }
308
+
```
309
+
310
+
When you start a JSX tag with a lower case (like `<details>`), by convention it's assumed that you *want* a built-in tag rather than some function you defined.
311
+
312
+
Since built-in tags don't have any code associated with them (that code is somewhere inside your browser!), the `type` will be a string like `'details'`. How `<details>` work is opaque to my code--all I really know is its name.
313
+
314
+
Let's split the logic in two cases, and skip translating the built-ins for now:
315
+
316
+
```js {3,5-7}
317
+
function translateForBrowser(originalJSX) {
318
+
const { type, props } = originalJSX;
319
+
if (typeof type === 'function') {
320
+
return type(props);
321
+
} else if (typeof type === 'string') {
322
+
return originalJSX;
323
+
}
324
+
}
325
+
```
326
+
327
+
After this change, `translateForBrowser` will only attempt to call some function if the original JSX's `type` actually *is* a function like `Greeting`.
328
+
329
+
So that's the result I wanted, right?...
330
+
331
+
```js
332
+
<details>
333
+
<Greeting person={alice} />
334
+
</details>
335
+
```
336
+
337
+
Wait. What I wanted is this:
338
+
339
+
```js
340
+
<details>
341
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
342
+
Hello, <i>Alice</i>!
343
+
</p>
344
+
</details>
345
+
```
346
+
347
+
In my translation process, I want to *skip over* the `<details>` tag because its implementation is opaque to me. I can't do anything useful with it--it is fully up to the browser. However, anything *inside* of it may still need to be translated!
348
+
349
+
Let's fix `translateForBrowser` to translate any built-in tag's children:
350
+
351
+
```js {6-12}
352
+
function translateForBrowser(originalJSX) {
353
+
const { type, props } = originalJSX;
354
+
if (typeof type === 'function') {
355
+
return type(props);
356
+
} else if (typeof type === 'string') {
357
+
return {
358
+
type,
359
+
props: {
360
+
...props,
361
+
children: translateForBrowser(props.children)
362
+
}
363
+
};
364
+
}
365
+
}
366
+
```
367
+
368
+
With this change, when it meets an element like `<details>...</details>`, it will return another `<details>...</details>` tag, but the stuff *inside* of it would be translated with my function again--so the `Greeting` will be gone:
369
+
370
+
```js
371
+
<details>
372
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
373
+
Hello, <i>Alice</i>!
374
+
</p>
375
+
</details>
376
+
```
377
+
378
+
And *now* I am speaking the browser's "language" again:
379
+
380
+
```js eval
381
+
<details className="pb-8">
382
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
383
+
Hello, <i>Alice</i>!
384
+
</p>
385
+
</details>
386
+
```
387
+
388
+
The `Greeting` has been dissolved.
389
+
390
+
---
391
+
392
+
Now suppose that I try to define an `ExpandableGreeting`:
393
+
394
+
```js
395
+
function ExpandableGreeting({ person }) {
396
+
return (
397
+
<details>
398
+
<Greeting person={person} />
399
+
</details>
400
+
);
401
+
}
402
+
```
403
+
404
+
Here is my new original JSX:
405
+
406
+
```js
407
+
<ExpandableGreeting person={alice} />
408
+
```
409
+
410
+
If I run it through `translateForBrowser`, I'll get this JSX in return:
411
+
412
+
```js
413
+
<details>
414
+
<Greeting person={alice} />
415
+
</details>
416
+
```
417
+
418
+
But that's not what I wanted! It still has a `Greeting` in it, and we don't consider a piece of JSX "browser-ready" until *all* of my own concepts are gone.
419
+
420
+
This is a bug in my `translateForBrowser` function. When it calls a function like `ExpandableGreeting`, it will return its output, and not do anything else. But we need to keep on going! That returned JSX *also* needs to be translated.
421
+
422
+
Luckily, there is an easy way I can solve this. When I call a function like `ExpandableGreeting`, I can take the JSX it returned and translate *that* next:
423
+
424
+
```js {4-5}
425
+
function translateForBrowser(originalJSX) {
426
+
const { type, props } = originalJSX;
427
+
if (typeof type === 'function') {
428
+
const returnedJSX = type(props);
429
+
return translateForBrowser(returnedJSX);
430
+
} else if (typeof type === 'string') {
431
+
return {
432
+
type,
433
+
props: {
434
+
...props,
435
+
children: translateForBrowser(props.children)
436
+
}
437
+
};
438
+
}
439
+
}
440
+
```
441
+
442
+
I also need to stop the process when there's nothing left to translate, like if it receives `null` or a string. If it receives an array of things, I need to translate each of them. With these two fixes, `translateForBrowser` is complete:
443
+
444
+
```js {2-7}
445
+
function translateForBrowser(originalJSX) {
446
+
if (originalJSX == null || typeof originalJSX !== 'object') {
447
+
return originalJSX;
448
+
}
449
+
if (Array.isArray(originalJSX)) {
450
+
return originalJSX.map(translateForBrowser);
451
+
}
452
+
const { type, props } = originalJSX;
453
+
if (typeof type === 'function') {
454
+
const returnedJSX = type(props);
455
+
return translateForBrowser(returnedJSX);
456
+
} else if (typeof type === 'string') {
457
+
return {
458
+
type,
459
+
props: {
460
+
...props,
461
+
children: translateForBrowser(props.children)
462
+
}
463
+
};
464
+
}
465
+
}
466
+
```
467
+
468
+
Now, suppose that I start with this:
469
+
470
+
```js
471
+
<ExpandableGreeting person={alice} />
472
+
```
473
+
474
+
It will turn into this:
475
+
476
+
```js
477
+
<details>
478
+
<Greeting person={alice} />
479
+
</details>
480
+
```
481
+
482
+
Which will turn into this:
483
+
484
+
```js
485
+
<details>
486
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
487
+
Hello, <i>Alice</i>!
488
+
</p>
489
+
</details>
490
+
```
491
+
492
+
And at that point, the process will stop.
493
+
494
+
---
495
+
496
+
Let's see how this works one more time, with a bit of extra depth.
497
+
498
+
I'll define `WelcomePage` like this:
499
+
500
+
```js
501
+
function WelcomePage() {
502
+
return (
503
+
<section>
504
+
<h1 className="text-3xl font-sans pb-2">Welcome</h1>
505
+
<ExpandableGreeting person={alice} />
506
+
<ExpandableGreeting person={bob} />
507
+
<ExpandableGreeting person={crystal} />
508
+
</section>
509
+
);
510
+
}
511
+
```
512
+
513
+
Now let's say I start the process with this original JSX:
514
+
515
+
```js
516
+
<WelcomePage />
517
+
```
518
+
519
+
Can you retrace the sequence of transformations in your head?
520
+
521
+
Let's do it step by step together.
522
+
523
+
First, imagine `WelcomePage` dissolving, leaving behind its output:
524
+
525
+
```js {1-6}
526
+
<section>
527
+
<h1 className="text-3xl font-sans pb-2">Welcome</h1>
528
+
<ExpandableGreeting person={alice} />
529
+
<ExpandableGreeting person={bob} />
530
+
<ExpandableGreeting person={crystal} />
531
+
</section>
532
+
```
533
+
534
+
Then imagine each `ExpandableGreeting` dissolving, leaving behind *its* output:
535
+
536
+
```js {3-11}
537
+
<section>
538
+
<h1 className="text-3xl font-sans pb-2">Welcome</h1>
539
+
<details>
540
+
<Greeting person={alice} />
541
+
</details>
542
+
<details>
543
+
<Greeting person={bob} />
544
+
</details>
545
+
<details>
546
+
<Greeting person={crystal} />
547
+
</details>
548
+
</section>
549
+
```
550
+
551
+
Then imagine each `Greeting` dissolving, leaving behind *its* output:
552
+
553
+
```js {4-6,9-11,14-16}
554
+
<section>
555
+
<h1 className="text-3xl font-sans pb-2">Welcome</h1>
556
+
<details>
557
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
558
+
Hello, <i>Alice</i>!
559
+
</p>
560
+
</details>
561
+
<details>
562
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
563
+
Hello, <i>Bob</i>!
564
+
</p>
565
+
</details>
566
+
<details>
567
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
568
+
Hello, <i>Crystal</i>!
569
+
</p>
570
+
</details>
571
+
</section>
572
+
```
573
+
574
+
And now there is nothing left to "translate". All *my* concepts have dissolved.
575
+
576
+
```js eval
577
+
<section className="pb-8">
578
+
<h1 className="text-3xl font-sans pb-2">Welcome</h1>
579
+
<details>
580
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
581
+
Hello, <i>Alice</i>!
582
+
</p>
583
+
</details>
584
+
<details>
585
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
586
+
Hello, <i>Bob</i>!
587
+
</p>
588
+
</details>
589
+
<details>
590
+
<p className="text-2xl font-sans text-purple-400 dark:text-purple-500">
591
+
Hello, <i>Crystal</i>!
592
+
</p>
593
+
</details>
594
+
</section>
595
+
```
596
+
597
+
This feels like a chain reaction. You mix a bit of data and code, and it keeps transforming until there is no more code to run, and only the residue is left.
598
+
599
+
It would be nice if there was a library that could do this for us.
600
+
601
+
But wait, here's a question. These transformations have to happen *somewhere* on the way between your computer and mine. So where *do* they happen?
602
+
603
+
Do they happen on your computer?
604
+
605
+
Or do they happen on mine?