my blog https://overreacted.io
consistency
+18
-18
+18
-18
public/functional-html/index.md
+18
-18
public/functional-html/index.md
···
340
340
This ambiguity is also reflected in the fact that `JSON.stringify` will omit it:
341
341
342
342
```js
343
-
['button', {
344
-
children: 'Like'
343
+
["button", {
344
+
children: "Like"
345
345
// No onClick here :(
346
346
}]
347
347
```
···
359
359
For that to work, we'd need to know which `<script>` tag to send and which function inside of that file is the click handler. We could encode it like this:
360
360
361
361
```js {3}
362
-
['button', {
363
-
children: 'Like',
364
-
onClick: '/src/bundle.js#onLike'
362
+
["button", {
363
+
children: "Like",
364
+
onClick: "/src/bundle.js#onLike"
365
365
}]
366
366
```
367
367
···
444
444
The `'use client'` directive says: "when you import me, you don't get the real thing; you only get an address of that thing, something that lets you *refer* to it."
445
445
446
446
```js {3}
447
-
['button', {
448
-
children: 'Like',
449
-
onClick: '/src/bundle.js#onLike'
447
+
["button", {
448
+
children: "Like",
449
+
onClick: "/src/bundle.js#onLike"
450
450
}]
451
451
```
452
452
···
465
465
Another common pattern is to keep `onLike` on the server and make it *callable* by the client--for example, via a POST `fetch()` call. We could encode it like this:
466
466
467
467
```js {3}
468
-
['button', {
469
-
children: 'Like',
470
-
onClick: '/api?fn=onLike'
468
+
["button", {
469
+
children: "Like",
470
+
onClick: "/api?fn=onLike"
471
471
}]
472
472
```
473
473
···
511
511
The `'use server'` directive says: "when you try to serialize this function, turn it into a Server Reference--an address that the client can use to call this function."
512
512
513
513
```js {3}
514
-
['button', {
515
-
children: 'Like',
516
-
onClick: '/api?fn=onLike'
514
+
["button", {
515
+
children: "Like",
516
+
onClick: "/api?fn=onLike"
517
517
}]
518
518
```
519
519
···
569
569
By the rules we've established earlier, during serialization, the server must run all functions that it encounters as tags. However, a Client Reference is not a function:
570
570
571
571
```js {1}
572
-
['/src/bundle.js#LikeButton', {
573
-
color: 'purple'
572
+
["/src/bundle.js#LikeButton", {
573
+
color: "purple"
574
574
}]
575
575
```
576
576
···
609
609
No matter which strategy we choose, all the necessary information is in the JSON:
610
610
611
611
```js
612
-
['/src/bundle.js#LikeButton', {
613
-
color: 'purple'
612
+
["/src/bundle.js#LikeButton", {
613
+
color: "purple"
614
614
}]
615
615
```
616
616