├── .gitignore ├── .vscode └── settings.json ├── _code.styl ├── _deps.css ├── docs ├── assets │ ├── Ika_Compact_VAR.384d6ec2.woff2 │ ├── Ika_VAR.8c45cb33.woff2 │ ├── Ika_VAR_Italic.1eac7b7f.woff2 │ ├── abort-server.e87a3f36.png │ ├── abort.4accac27.png │ ├── alert-output.59dde5ca.png │ ├── alert.b6124ec8.png │ ├── alibaba.99a834f3.png │ ├── als.a592218e.png │ ├── async-context.2360f480.png │ ├── bloomberg.4ffcc6f7.png │ ├── bun.6395a2d7.svg │ ├── bytedance.039c017e.png │ ├── chrome.c24bb399.svg │ ├── chromium.6b58ab47.png │ ├── cloudflare.8c06e3a1.jpg │ ├── deno.ce7e91d4.svg │ ├── edge.8f192af5.png │ ├── event1.f8d1fe83.png │ ├── event2.40f221cc.png │ ├── fastly.2af8f59f.png │ ├── fetch-standard.ac2b2be7.png │ ├── firefox.a215097d.png │ ├── formData.536bad41.png │ ├── h3.47aba8c6.png │ ├── hono.fe0ed368.png │ ├── ie6.3feacc2f.jpg │ ├── index.016b87a5.js │ ├── index.2b9e5b42.css │ ├── js.48d02175.png │ ├── jsc.987c0559.jpg │ ├── nitro.ca99e92b.png │ ├── node-fetch.891221d5.png │ ├── node.c716a3d9.png │ ├── react-streams.6625a33a.png │ ├── req2.560305ef.png │ ├── request.4965cadf.png │ ├── rewriter.728ccbb8.png │ ├── ryan-async.92f7dcb7.png │ ├── safari.9d723a4b.png │ ├── security.3582845a.jpg │ ├── server-grid.679c7ba0.png │ ├── solid-start.25a9617a.png │ ├── spidermonkey.8303ed62.png │ ├── srvx.0c34f844.png │ ├── streaming.ad7212b6.mp4 │ ├── tanstack.576329a8.png │ ├── tc39.de2fa905.svg │ ├── unenv-apis.eb9eb75c.png │ ├── unenv-cf.f0826209.png │ ├── unenv-deno.caf54f2d.png │ ├── unjs.33b221eb.png │ ├── v8.6966a77a.png │ ├── vinxi.0cd23c72.png │ ├── w3c.2c649c57.png │ ├── whatwg.02c8530d.png │ └── wintergc.68ce46e7.png └── index.html ├── fonts ├── Ika_Compact_VAR.woff2 ├── Ika_VAR.ttf ├── Ika_VAR.woff2 └── Ika_VAR_Italic.woff2 ├── go.ts ├── https: └── wesbos.github.io │ └── Wes Bos - next-gen-server-js.txt ├── icons ├── abort-server.png ├── abort.png ├── alert-output.png ├── alert.png ├── alibaba.png ├── als.png ├── async-context.png ├── bloomberg.png ├── bun.svg ├── bytedance.png ├── chrome.svg ├── chromium.png ├── cloudflare.jpg ├── deno.svg ├── denoreq.png ├── edge.png ├── event1.png ├── event2.png ├── fastly.png ├── fetch-standard.png ├── firefox.png ├── formData.png ├── ie6.jpg ├── js.png ├── jsc.jpg ├── node-fetch.png ├── node.png ├── react-streams.png ├── req2.png ├── request.png ├── requests.png ├── rewriter.png ├── ryah.jpg ├── ryan-async.png ├── safari.png ├── security.jpg ├── spidermonkey.png ├── stream-replace.png ├── streams.png ├── tc39.svg ├── v8.png ├── w3c.png ├── whatwg.png ├── wintergc.png └── worker-tools.png ├── index.html ├── p5.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── prism.css ├── prism.js ├── readme.md ├── slides.html ├── slides.js ├── ss ├── Screen Shot 2022-10-19 at 4.23.09 PM.png ├── add-missing.png ├── any1.png ├── any2.png ├── any3.png ├── any4.png ├── any5.png ├── basic.png ├── bun.png ├── custom-type.png ├── date-fns.png ├── deno.png ├── edge-case.png ├── edge2.png ├── export-to-constant.mp4 ├── func-using.png ├── func.png ├── func2.png ├── h3.png ├── harry.png ├── hono.png ├── im.png ├── jsdoc.png ├── jsdoc2.png ├── libs.png ├── method.png ├── missing.png ├── move-to-new.png ├── nitro.png ├── npm.png ├── object-typing.png ├── oops.png ├── prisma.png ├── prisma2.png ├── react.png ├── sammy.png ├── server-grid.png ├── servers.png ├── solid-start.png ├── srvx.png ├── streaming.mp4 ├── string-array.png ├── tanstack.png ├── types-as-comments.png ├── unenv-apis.png ├── unenv-cf.png ├── unenv-deno.png ├── unjs.png └── vinxi.png ├── styles.css ├── vanta └── trunk.js └── waves ├── SiteTracking-ERC2K4FD.js ├── chunk-3R5WIEPD.js ├── chunk-6UBWOGX3.js ├── chunk-FSZRLV7Q.js ├── chunk-XVNU34J2.js └── wave.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store 3 | talk.js 4 | talk.md 5 | .cache/ 6 | dist/ 7 | .parcel-cache 8 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.enabledLanguageIds": [ 3 | "c", 4 | "cpp", 5 | "csharp", 6 | "go", 7 | "handlebars", 8 | "jade", 9 | "javascript", 10 | "javascriptreact", 11 | "json", 12 | "latex", 13 | "markdown", 14 | "php", 15 | "plaintext", 16 | "python", 17 | "restructuredtext", 18 | "text", 19 | "typescript", 20 | "typescriptreact", 21 | "yml" 22 | ] 23 | } -------------------------------------------------------------------------------- /_code.styl: -------------------------------------------------------------------------------- 1 | // Cobalt2 Prettyify Styles by Wes Bos 2 | 3 | pre .str, code .str { color: #39D905; } /* string - green */ 4 | pre .kwd, code .kwd { color: yellow; } /* keyword - dark pink */ 5 | pre .com, code .com { color: #0088FF; font-style: italic; } /* comment - gray */ 6 | pre .typ, code .typ { color: #0088FF; } /* type - light blue */ 7 | pre .lit, code .lit { color: #0088FF; } /* literal - blue */ 8 | pre .pun, code .pun { color: #FF9D00; } /* punctuation - white */ 9 | pre .pln, code .pln { color: #fff; } /* plaintext - white */ 10 | pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */ 11 | pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */ 12 | pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */ 13 | pre .dec, code .dec { color: #3387CC; } /* decimal - blue */ 14 | 15 | pre.prettyprint, code.prettyprint { 16 | background-color: #193549 17 | border-radius: 2px; 18 | border 0 19 | font-size 55px 20 | line-height 1.7 21 | text-align left 22 | } 23 | 24 | code 25 | background none 26 | font-family 'Operator Mono', monospace; 27 | font-weight 400 28 | 29 | pre.prettyprint { 30 | width: 95%; 31 | margin: 1em auto; 32 | padding: 10px; 33 | white-space: pre-wrap; 34 | border 3px solid #1F4662 35 | } 36 | 37 | 38 | /* Specify class=linenums on a pre to get line numbering */ 39 | ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */ 40 | li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none } 41 | /* Alternate shading for lines */ 42 | li.L1,li.L3,li.L5,li.L7,li.L9 { } 43 | 44 | @media print { 45 | pre .str, code .str { color: #060; } 46 | pre .kwd, code .kwd { color: #006; font-weight: bold; } 47 | pre .com, code .com { color: #600; font-style: italic; } 48 | pre .typ, code .typ { color: #404; font-weight: bold; } 49 | pre .lit, code .lit { color: #044; } 50 | pre .pun, code .pun { color: #440; } 51 | pre .pln, code .pln { color: #000; } 52 | pre .tag, code .tag { color: #006; font-weight: bold; } 53 | pre .atn, code .atn { color: #404; } 54 | pre .atv, code .atv { color: #060; } 55 | } 56 | -------------------------------------------------------------------------------- /_deps.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | --yellow: #ffc600; 4 | } 5 | 6 | * { 7 | box-sizing: border-box ; 8 | } 9 | 10 | body { 11 | margin: 0; 12 | padding: 0; 13 | display: block !important; 14 | height: 100%; 15 | min-height: 740px; 16 | overflow-x: hidden; 17 | overflow-y: auto; 18 | } 19 | 20 | .slides { 21 | width: 100%; 22 | height: 100%; 23 | left: 0; 24 | top: 0; 25 | position: absolute; 26 | transform: translate3d(0, 0, 0); 27 | } 28 | 29 | /* 30 | Slide Widths 31 | */ 32 | 33 | .slides { 34 | /* Just for dev */ 35 | transform: scale(0.5); 36 | } 37 | 38 | .slides > article { 39 | display: block; 40 | position: absolute; 41 | overflow: hidden; 42 | --w: 1920px; 43 | --h: 1080px; 44 | width: var(--w); 45 | height: var(--h); 46 | margin-left: calc((var(--w) / 2) * -1); 47 | margin-top: calc((var(--h) / 2) * -1); 48 | left: 50%; 49 | top: 50%; 50 | padding: 20px; 51 | transition: all 0.3s ease-out; 52 | justify-content: center; 53 | align-items: center; 54 | flex-direction: column; 55 | & > iframe { 56 | height: 100%; 57 | } 58 | &.side { 59 | align-content: center; 60 | &.current { 61 | display: grid !important; 62 | } 63 | & h2 { 64 | font-size: 50px; 65 | } 66 | grid-gap: 50px; 67 | grid-template-columns: 1.2fr 1fr; 68 | & h2 { 69 | grid-column: 1 / -1; 70 | } 71 | & pre { 72 | background: none; 73 | border: 0; 74 | box-shadow: none; 75 | } 76 | & code { 77 | line-height: 1.3; 78 | border: 0; 79 | white-space: pre-wrap; 80 | text-align: left; 81 | font-family: "Operator Mono", courier; 82 | color: white; 83 | font-size: 40px; 84 | font-weight: 300; 85 | } 86 | } 87 | & > * { 88 | /* display: flex; 89 | clear: both; 90 | flex-wrap: wrap; 91 | place-items: center; 92 | gap: 20px; */ 93 | } 94 | & > img { 95 | min-width: 0; 96 | display: block; 97 | margin: 0 auto; 98 | } 99 | & > style { 100 | display: none; 101 | } 102 | } 103 | 104 | .slide-area { 105 | z-index: 1000; 106 | position: absolute; 107 | left: 0; 108 | top: 0; 109 | width: 150px; 110 | height: 100%; 111 | left: 0; 112 | top: 0; 113 | cursor: pointer; 114 | tap-highlight-color: transparent; 115 | } 116 | #prev-slide-area { 117 | } 118 | #next-slide-area { 119 | right: 0; 120 | left: auto; 121 | } 122 | .slides.layout-widescreen #prev-slide-area, 123 | .slides.layout-faux-widescreen #prev-slide-area { 124 | margin-left: -650px; 125 | } 126 | .slides.layout-widescreen #next-slide-area, 127 | .slides.layout-faux-widescreen #next-slide-area { 128 | margin-left: 500px; 129 | } 130 | 131 | /* Slides */ 132 | 133 | .slides > article { 134 | display: none; 135 | text-align: center; 136 | } 137 | .slides > article.far-past { 138 | display: block; 139 | transform: translate(-4000px); 140 | display: none; 141 | } 142 | .slides > article.past { 143 | display: flex; 144 | transform: scale(0.5) translate(-(w + (0)) px); 145 | opacity: 0.3; 146 | display: none; 147 | } 148 | .slides > article.current { 149 | display: flex; 150 | transform: translate(0); 151 | z-index: 10; 152 | gap: 100px; 153 | } 154 | .slides > article.next { 155 | display: flex; 156 | transform: scale(0.5) translate((w + (0)) px); 157 | opacity: 0.3; 158 | display: none; 159 | } 160 | .slides > article.far-next { 161 | display: flex; 162 | transform: translate(4000px); 163 | display: none; 164 | } 165 | 166 | /* Styles for slides */ 167 | 168 | .blue { 169 | color: rgb(0, 102, 204); 170 | } 171 | .yellow { 172 | color: rgb(255, 211, 25); 173 | } 174 | .green { 175 | color: #29e254; 176 | } 177 | .red { 178 | color: rgb(255, 0, 0); 179 | } 180 | .black { 181 | color: black; 182 | } 183 | .white { 184 | color: white; 185 | } 186 | 187 | a { 188 | color: var(--yellow); 189 | } 190 | 191 | p { 192 | margin: 0; 193 | padding: 0; 194 | } 195 | p:first-child { 196 | margin-top: 0; 197 | } 198 | h1 { 199 | font-size: 60px; 200 | padding: 0; 201 | margin: 0; 202 | color: white; 203 | } 204 | 205 | h2 { 206 | font-size: 45px; 207 | padding: 0; 208 | margin: 0; 209 | font-weight: 600; 210 | color: white; 211 | } 212 | 213 | h2 a { 214 | text-decoration: none; 215 | } 216 | 217 | h3 { 218 | font-size: 20px; 219 | line-height: 36px; 220 | padding: 0 0 10px 0; 221 | margin: 0; 222 | padding-right: 40px; 223 | font-weight: 600; 224 | color: #eaeaea; 225 | } 226 | 227 | .half { 228 | width: 350px; 229 | float: left; 230 | } 231 | 232 | .button:hover { 233 | color: #fff; 234 | background: #392c44; 235 | } 236 | 237 | pre.half { 238 | width: 400px; 239 | font-size: 17px; 240 | } 241 | 242 | p.small { 243 | color: #000; 244 | font-size: 18px; 245 | } 246 | article.fill h3 { 247 | background: rgba(255, 255, 255, 0.75); 248 | padding-top: 0.2em; 249 | padding-bottom: 0.3em; 250 | margin-top: -0.2em; 251 | margin-left: -60px; 252 | padding-left: 60px; 253 | margin-right: -60px; 254 | padding-right: 60px; 255 | } 256 | 257 | h4 { 258 | margin: 0; 259 | } 260 | 261 | .center { 262 | text-align: center; 263 | } 264 | 265 | .center h3 { 266 | font-size: 100px; 267 | margin-top: 220px; 268 | } 269 | ul { 270 | list-style: none; 271 | margin: 0; 272 | padding: 0; 273 | 274 | margin-top: 40px; 275 | 276 | margin-left: 0.75em; 277 | } 278 | ul:first-child { 279 | margin-top: 0; 280 | } 281 | ul ul { 282 | margin-top: 0.5em; 283 | } 284 | li { 285 | padding: 0; 286 | margin: 0; 287 | 288 | margin-bottom: 0.5em; 289 | } 290 | 291 | pre { 292 | font-size: 20px; 293 | line-height: 28px; 294 | padding: 5px 10px; 295 | 296 | margin-top: 20px; 297 | margin-bottom: 20px; 298 | 299 | color: black; 300 | background: rgb(240, 240, 240); 301 | border: 1px solid rgb(224, 224, 224); 302 | box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1); 303 | 304 | overflow: hidden; 305 | } 306 | 307 | code { 308 | font-size: 95%; 309 | font-family: "operator mono", "Courier New", monospace; 310 | display: inline-block; 311 | background: rgba(0, 0, 0, 0.05); 312 | border-radius: 20px; 313 | padding: 0 10px; 314 | font-weight: 300; 315 | text-transform: none; 316 | } 317 | 318 | iframe { 319 | width: 100%; 320 | height: 620px; 321 | background: white; 322 | border: 1px solid rgb(192, 192, 192); 323 | margin: -1px; 324 | /*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/ 325 | } 326 | 327 | img { 328 | max-width: 100%; 329 | max-height: 570px; 330 | } 331 | 332 | h3 + iframe { 333 | margin-top: 40px; 334 | height: 540px; 335 | } 336 | 337 | article.fill iframe { 338 | position: absolute; 339 | left: 0; 340 | top: 0; 341 | width: 100%; 342 | height: 100%; 343 | 344 | border: 0; 345 | margin: 0; 346 | border-radius: 10px; 347 | z-index: -1; 348 | } 349 | 350 | article.fill img { 351 | z-index: -1; 352 | } 353 | img.centered { 354 | margin: 0 auto; 355 | display: block; 356 | } 357 | 358 | table { 359 | width: 100%; 360 | border-collapse: collapse; 361 | margin-top: 40px; 362 | } 363 | th { 364 | font-weight: 600; 365 | text-align: left; 366 | } 367 | td, 368 | th { 369 | border: 1px solid rgb(224, 224, 224); 370 | padding: 5px 10px; 371 | vertical-align: top; 372 | } 373 | 374 | .source { 375 | position: absolute; 376 | left: 60px; 377 | top: 644px; 378 | padding-right: 175px; 379 | font-size: 15px; 380 | line-height: 18px; 381 | } 382 | 383 | q { 384 | display: block; 385 | font-size: 60px; 386 | line-height: 72px; 387 | 388 | margin-left: 20px; 389 | 390 | margin-top: 100px; 391 | margin-right: 150px; 392 | } 393 | q::before { 394 | content: "“"; 395 | 396 | position: absolute; 397 | display: inline-block; 398 | margin-left: -2.1em; 399 | width: 2em; 400 | text-align: right; 401 | 402 | font-size: 90px; 403 | color: rgb(192, 192, 192); 404 | } 405 | q::after { 406 | content: "”"; 407 | 408 | position: absolute; 409 | margin-left: 0.1em; 410 | 411 | font-size: 90px; 412 | color: rgb(192, 192, 192); 413 | } 414 | div.author { 415 | text-align: right; 416 | font-size: 40px; 417 | 418 | margin-top: 20px; 419 | margin-right: 150px; 420 | } 421 | div.author::before { 422 | content: "—"; 423 | } 424 | 425 | /* Size variants */ 426 | 427 | article.smaller p, 428 | article.smaller ul { 429 | font-size: 20px; 430 | line-height: 24px; 431 | } 432 | article.smaller table { 433 | font-size: 20px; 434 | line-height: 24px; 435 | } 436 | article.smaller pre { 437 | font-size: 15px; 438 | line-height: 20px; 439 | } 440 | article.smaller q { 441 | font-size: 40px; 442 | line-height: 48px; 443 | } 444 | article.smaller q::before, 445 | article.smaller q::after { 446 | font-size: 60px; 447 | } 448 | 449 | /* Builds */ 450 | 451 | .build > * { 452 | transition: opacity 0.2s ease-in-out 0.2s; 453 | } 454 | 455 | .to-build { 456 | opacity: 0; 457 | } 458 | 459 | .twitter-tweet { 460 | transform: scale(3.2) !important; 461 | } 462 | -------------------------------------------------------------------------------- /docs/assets/Ika_Compact_VAR.384d6ec2.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/Ika_Compact_VAR.384d6ec2.woff2 -------------------------------------------------------------------------------- /docs/assets/Ika_VAR.8c45cb33.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/Ika_VAR.8c45cb33.woff2 -------------------------------------------------------------------------------- /docs/assets/Ika_VAR_Italic.1eac7b7f.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/Ika_VAR_Italic.1eac7b7f.woff2 -------------------------------------------------------------------------------- /docs/assets/abort-server.e87a3f36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/abort-server.e87a3f36.png -------------------------------------------------------------------------------- /docs/assets/abort.4accac27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/abort.4accac27.png -------------------------------------------------------------------------------- /docs/assets/alert-output.59dde5ca.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/alert-output.59dde5ca.png -------------------------------------------------------------------------------- /docs/assets/alert.b6124ec8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/alert.b6124ec8.png -------------------------------------------------------------------------------- /docs/assets/alibaba.99a834f3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/alibaba.99a834f3.png -------------------------------------------------------------------------------- /docs/assets/als.a592218e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/als.a592218e.png -------------------------------------------------------------------------------- /docs/assets/async-context.2360f480.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/async-context.2360f480.png -------------------------------------------------------------------------------- /docs/assets/bloomberg.4ffcc6f7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/bloomberg.4ffcc6f7.png -------------------------------------------------------------------------------- /docs/assets/bun.6395a2d7.svg: -------------------------------------------------------------------------------- 1 | Bun Logo -------------------------------------------------------------------------------- /docs/assets/bytedance.039c017e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/bytedance.039c017e.png -------------------------------------------------------------------------------- /docs/assets/chrome.c24bb399.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/assets/chromium.6b58ab47.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/chromium.6b58ab47.png -------------------------------------------------------------------------------- /docs/assets/cloudflare.8c06e3a1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/cloudflare.8c06e3a1.jpg -------------------------------------------------------------------------------- /docs/assets/deno.ce7e91d4.svg: -------------------------------------------------------------------------------- 1 | Deno logo -------------------------------------------------------------------------------- /docs/assets/edge.8f192af5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/edge.8f192af5.png -------------------------------------------------------------------------------- /docs/assets/event1.f8d1fe83.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/event1.f8d1fe83.png -------------------------------------------------------------------------------- /docs/assets/event2.40f221cc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/event2.40f221cc.png -------------------------------------------------------------------------------- /docs/assets/fastly.2af8f59f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/fastly.2af8f59f.png -------------------------------------------------------------------------------- /docs/assets/fetch-standard.ac2b2be7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/fetch-standard.ac2b2be7.png -------------------------------------------------------------------------------- /docs/assets/firefox.a215097d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/firefox.a215097d.png -------------------------------------------------------------------------------- /docs/assets/formData.536bad41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/formData.536bad41.png -------------------------------------------------------------------------------- /docs/assets/h3.47aba8c6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/h3.47aba8c6.png -------------------------------------------------------------------------------- /docs/assets/hono.fe0ed368.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/hono.fe0ed368.png -------------------------------------------------------------------------------- /docs/assets/ie6.3feacc2f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/ie6.3feacc2f.jpg -------------------------------------------------------------------------------- /docs/assets/index.016b87a5.js: -------------------------------------------------------------------------------- 1 | (function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))s(o);new MutationObserver(o=>{for(const n of o)if(n.type==="childList")for(const r of n.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&s(r)}).observe(document,{childList:!0,subtree:!0});function i(o){const n={};return o.integrity&&(n.integrity=o.integrity),o.referrerpolicy&&(n.referrerPolicy=o.referrerpolicy),o.crossorigin==="use-credentials"?n.credentials="include":o.crossorigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function s(o){if(o.ep)return;o.ep=!0;const n=i(o);fetch(o.href,n)}})();let L=["far-past","past","current","next","far-next"],U=15,a,c;typeof document<"u"&&!("classList"in document.createElement("a"))&&function(e){let t="classList",i="prototype",s=(e.HTMLElement||e.Element)[i],o=Object;if(strTrim=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},arrIndexOf=Array[i].indexOf||function(n){for(let r=0,f=this.length;r=c.length?null:c[e]}function p(e,t){let i=y(e);if(!!i){t&&i.classList.add(t);for(let s in L)t!=L[s]&&i.classList.remove(L[s])}}function A(){for(let e=0;e{Q(a-2)},301),w(a-1),w(a+2),d()&&X(c[a]),ne()}function j(){let e=c[a].querySelectorAll(".to-build");return e.length?(e[0].classList.remove("to-build"),d()&&X(e[0]),!0):!1}function C(){a>0&&(a--,A())}function x(){j()||a1?W():(touchDX=e.touches[0].pageX-touchStartX,touchDY=e.touches[0].pageY-touchStartY)}function I(e){let t=Math.abs(touchDX),i=Math.abs(touchDY);t>U&&i0?C():x()),W()}function W(){document.body.removeEventListener("touchmove",V,!0),document.body.removeEventListener("touchend",I,!0)}function Q(e){let t=y(e);if(!t)return;let i=t.getElementsByTagName("iframe");for(var s=0,o;o=i[s];s++)_(o)}function w(e){let t=y(e);if(!t)return;let i=t.getElementsByTagName("iframe");for(var s=0,o;o=i[s];s++)Z(o)}function _(e){e.src="about:blank"}function Z(e){let t=e._src;e.src!=t&&t!="about:blank"&&(e.src=t)}function ee(){let e=document.querySelectorAll("iframe");for(var t=0,i;i=e[t];t++)i._src=i.src,_(i);w(a),w(a+1),w(a+2)}function te(){var e=document.createElement("div");e.className="slide-area",e.id="prev-slide-area",e.addEventListener("click",C,!1),document.querySelector("section.slides").appendChild(e);var e=document.createElement("div");e.className="slide-area",e.id="next-slide-area",e.addEventListener("click",x,!1),document.querySelector("section.slides").appendChild(e),document.body.addEventListener("touchstart",J,!1)}function d(){return!(typeof cvox>"u")}function X(e){if(!d())return;cvox.ChromeVox.navigationManager.switchToStrategy(cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM,0,!0),cvox.ChromeVox.navigationManager.syncToNode(e),cvox.ChromeVoxUserCommands.finishNavCommand("");let t=e;for(;t.firstChild;)t=t.firstChild;cvox.ChromeVox.navigationManager.syncToNode(t)}function ie(){if(!!d()){if(cvox.ChromeVox.navigationManager.switchToStrategy(cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM,0,!0),cvox.ChromeVox.navigationManager.next(!0),!cvox.DomUtil.isDescendantOfNode(cvox.ChromeVox.navigationManager.getCurrentNode(),c[a])){let e=c[a];for(;e.firstChild;)e=e.firstChild;cvox.ChromeVox.navigationManager.syncToNode(e),cvox.ChromeVox.navigationManager.next(!0)}cvox.ChromeVoxUserCommands.finishNavCommand("")}}function se(){if(!!d()){if(cvox.ChromeVox.navigationManager.switchToStrategy(cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM,0,!0),cvox.ChromeVox.navigationManager.previous(!0),!cvox.DomUtil.isDescendantOfNode(cvox.ChromeVox.navigationManager.getCurrentNode(),c[a])){let e=c[a];for(;e.lastChild;)e=e.lastChild;cvox.ChromeVox.navigationManager.syncToNode(e),cvox.ChromeVox.navigationManager.previous(!0)}cvox.ChromeVoxUserCommands.finishNavCommand("")}}function oe(){let e=parseInt(location.hash.substr(1));e?a=e-1:a=0}function ne(){location.replace(`#${a+1}`)}function re(e){switch(e.keyCode){case 39:case 13:case 32:case 34:x(),e.preventDefault();break;case 37:case 8:case 33:C(),e.preventDefault();break;case 40:d()?ie():x(),e.preventDefault();break;case 38:d()?se():C(),e.preventDefault();break}}function ae(){document.addEventListener("keydown",re,!1)}function ce(){for(var e=a,t;t=c[e];e++){let o=t.querySelectorAll(".build > *");for(var i=0,s;s=o[i];i++)s.classList&&s.classList.add("to-build")}}function D(){c=document.querySelectorAll("section.slides > article"),ee(),ae(),A(),te(),ce(),document.body.classList.add("loaded")}function le(){oe(),window._DCL?D():document.addEventListener("DOMContentLoaded",D,!1)}if(!window._DEBUG&&document.location.href.indexOf("?debug")!==-1){document.addEventListener("DOMContentLoaded",function(){window._DCL=!0},!1),window._DEBUG=!0;let e=document.createElement("script");e.type="text/javascript",e.src="../slides.js";let t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t),t.parentNode.removeChild(t)}else le();Number.prototype.clamp=function(e,t){return Math.min(Math.max(this,e),t)};function he(){return typeof navigator<"u"?/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)||window.innerWidth<600:null}const ue=e=>document.querySelector(e),k=e=>typeof e=="number"?"#"+("00000"+e.toString(16)).slice(-6):e;function Y(e){for(;e.children&&e.children.length>0;)Y(e.children[0]),e.remove(e.children[0]);e.geometry&&e.geometry.dispose(),e.material&&(Object.keys(e.material).forEach(t=>{!e.material[t]||e.material[t]!==null&&typeof e.material[t].dispose=="function"&&e.material[t].dispose()}),e.material.dispose())}const b=typeof window=="object";let E=b&&window.THREE||{};b&&!window.VANTA&&(window.VANTA={});const l=b&&window.VANTA||{};l.register=(e,t)=>l[e]=i=>new t(i);l.version="0.5.24";const S=function(){return Array.prototype.unshift.call(arguments,"[VANTA]"),console.error.apply(this,arguments)};l.VantaBase=class{constructor(t={}){if(!b)return!1;l.current=this,this.windowMouseMoveWrapper=this.windowMouseMoveWrapper.bind(this),this.windowTouchWrapper=this.windowTouchWrapper.bind(this),this.windowGyroWrapper=this.windowGyroWrapper.bind(this),this.resize=this.resize.bind(this),this.animationLoop=this.animationLoop.bind(this),this.restart=this.restart.bind(this);const i=typeof this.getDefaultOptions=="function"?this.getDefaultOptions():this.defaultOptions;if(this.options=Object.assign({mouseControls:!0,touchControls:!0,gyroControls:!1,minHeight:200,minWidth:200,scale:1,scaleMobile:1},i),(t instanceof HTMLElement||typeof t=="string")&&(t={el:t}),Object.assign(this.options,t),this.options.THREE&&(E=this.options.THREE),this.el=this.options.el,this.el==null)S('Instance needs "el" param!');else if(!(this.options.el instanceof HTMLElement)){const o=this.el;if(this.el=ue(o),!this.el){S("Cannot find element",o);return}}this.prepareEl(),this.initThree(),this.setSize();try{this.init()}catch(o){S("Init error",o),this.renderer&&this.renderer.domElement&&this.el.removeChild(this.renderer.domElement),this.options.backgroundColor&&(console.log("[VANTA] Falling back to backgroundColor"),this.el.style.background=k(this.options.backgroundColor));return}this.initMouse(),this.resize(),this.animationLoop();const s=window.addEventListener;s("resize",this.resize),window.requestAnimationFrame(this.resize),this.options.mouseControls&&(s("scroll",this.windowMouseMoveWrapper),s("mousemove",this.windowMouseMoveWrapper)),this.options.touchControls&&(s("touchstart",this.windowTouchWrapper),s("touchmove",this.windowTouchWrapper)),this.options.gyroControls&&s("deviceorientation",this.windowGyroWrapper)}setOptions(t={}){Object.assign(this.options,t),this.triggerMouseMove()}prepareEl(){let t,i;if(typeof Node<"u"&&Node.TEXT_NODE)for(t=0;t=0&&o>=0&&s<=i.width&&o<=i.height&&(this.mouseX=s,this.mouseY=o,this.options.mouseEase||this.triggerMouseMove(s,o))}windowTouchWrapper(t){const i=this.getCanvasRect();if(!i)return!1;if(t.touches.length===1){const s=t.touches[0].clientX-i.left,o=t.touches[0].clientY-i.top;s>=0&&o>=0&&s<=i.width&&o<=i.height&&(this.mouseX=s,this.mouseY=o,this.options.mouseEase||this.triggerMouseMove(s,o))}}windowGyroWrapper(t){const i=this.getCanvasRect();if(!i)return!1;const s=Math.round(t.alpha*2)-i.left,o=Math.round(t.beta*2)-i.top;s>=0&&o>=0&&s<=i.width&&o<=i.height&&(this.mouseX=s,this.mouseY=o,this.options.mouseEase||this.triggerMouseMove(s,o))}triggerMouseMove(t,i){t===void 0&&i===void 0&&(this.options.mouseEase?(t=this.mouseEaseX,i=this.mouseEaseY):(t=this.mouseX,i=this.mouseY)),this.uniforms&&(this.uniforms.iMouse.value.x=t/this.scale,this.uniforms.iMouse.value.y=i/this.scale);const s=t/this.width,o=i/this.height;typeof this.onMouseMove=="function"&&this.onMouseMove(s,o)}setSize(){this.scale||(this.scale=1),he()&&this.options.scaleMobile?this.scale=this.options.scaleMobile:this.options.scale&&(this.scale=this.options.scale),this.width=Math.max(this.el.offsetWidth,this.options.minWidth),this.height=Math.max(this.el.offsetHeight,this.options.minHeight)}initMouse(){(!this.mouseX&&!this.mouseY||this.mouseX===this.options.minWidth/2&&this.mouseY===this.options.minHeight/2)&&(this.mouseX=this.width/2,this.mouseY=this.height/2,this.triggerMouseMove(this.mouseX,this.mouseY))}resize(){this.setSize(),this.camera&&(this.camera.aspect=this.width/this.height,typeof this.camera.updateProjectionMatrix=="function"&&this.camera.updateProjectionMatrix()),this.renderer&&(this.renderer.setSize(this.width,this.height),this.renderer.setPixelRatio(window.devicePixelRatio/this.scale)),typeof this.onResize=="function"&&this.onResize()}isOnScreen(){const t=this.el.offsetHeight,i=this.el.getBoundingClientRect(),s=window.pageYOffset||(document.documentElement||document.body.parentNode||document.body).scrollTop,o=i.top+s,n=o-window.innerHeight,r=o+t;return n<=s&&s<=r}animationLoop(){this.t||(this.t=0),this.t2||(this.t2=0);const t=performance.now();if(this.prevNow){let i=(t-this.prevNow)/16.666666666666668;i=Math.max(.2,Math.min(i,5)),this.t+=i,this.t2+=(this.options.speed||1)*i,this.uniforms&&(this.uniforms.iTime.value=this.t2*.016667)}return this.prevNow=t,this.options.mouseEase&&(this.mouseEaseX=this.mouseEaseX||this.mouseX||0,this.mouseEaseY=this.mouseEaseY||this.mouseY||0,Math.abs(this.mouseEaseX-this.mouseX)+Math.abs(this.mouseEaseY-this.mouseY)>.1&&(this.mouseEaseX+=(this.mouseX-this.mouseEaseX)*.05,this.mouseEaseY+=(this.mouseY-this.mouseEaseY)*.05,this.triggerMouseMove(this.mouseEaseX,this.mouseEaseY))),(this.isOnScreen()||this.options.forceAnimate)&&(typeof this.onUpdate=="function"&&this.onUpdate(),this.scene&&this.camera&&(this.renderer.render(this.scene,this.camera),this.renderer.setClearColor(this.options.backgroundColor,this.options.backgroundAlpha)),this.fps&&this.fps.update&&this.fps.update(),typeof this.afterRender=="function"&&this.afterRender()),this.req=window.requestAnimationFrame(this.animationLoop)}restart(){if(this.scene)for(;this.scene.children.length;)this.scene.remove(this.scene.children[0]);typeof this.onRestart=="function"&&this.onRestart(),this.init()}init(){typeof this.onInit=="function"&&this.onInit()}destroy(){typeof this.onDestroy=="function"&&this.onDestroy();const t=window.removeEventListener;t("touchstart",this.windowTouchWrapper),t("touchmove",this.windowTouchWrapper),t("scroll",this.windowMouseMoveWrapper),t("mousemove",this.windowMouseMoveWrapper),t("deviceorientation",this.windowGyroWrapper),t("resize",this.resize),window.cancelAnimationFrame(this.req);const i=this.scene;i&&i.children&&Y(i),this.renderer&&(this.renderer.domElement&&this.el.removeChild(this.renderer.domElement),this.renderer=null,this.scene=null),l.current===this&&(l.current=null)}};const de=l.VantaBase;let R=typeof window=="object"&&window.p5;class fe extends de{constructor(t){R=t.p5||R,super(t),this.mode="p5"}initP5(t){const i=this,s=t.createCanvas(i.width,i.height);s.parent(i.el),i.applyCanvasStyles(t.canvas,{background:k(i.options.backgroundColor)}),i.p5renderer=s,i.p5canvas=t.canvas,i.p5=t}restart(){this.p5&&typeof this.p5=="object"&&this.p5.remove(),super.restart()}destroy(){this.p5&&typeof this.p5=="object"&&this.p5.remove(),super.destroy()}resize(){super.resize(),this.p5&&this.p5.resizeCanvas&&this.p5.resizeCanvas(this.width,this.height)}}let N=typeof window=="object"&&window.p5;class z extends fe{static initClass(){this.prototype.p5=!0,this.prototype.defaultOptions={color:9979487,backgroundColor:2237478,spacing:0,chaos:1}}constructor(t){N=t.p5||N,super(t)}onInit(){const t=this;let i=function(s){let o=20,n=0,r=3,f=.2,g=.12,M=20,H=s.random(1e4),O=s.random(1e4),T=s.random(1e4);s.setup=function(){t.initP5(s),s.strokeWeight(1),s.stroke(k(t.options.color)),s.smooth(),s.noFill()},s.draw=function(){s.clear(),s.translate(s.width/2,s.height/2),q()};function q(){O-=.02,T+=5e-5;for(let h=0;he.startsWith("--")).map(e=>[e.replace("--",""),P.getPropertyValue(e)]));me({el:"#trunk",mouseControls:!0,touchControls:!0,gyroControls:!1,minHeight:500,minWidth:500,scale:2,scaleMobile:1,color:6776154,backgroundColor:"transparent",spacing:8,chaos:1});async function pe(e){for(;document.querySelector(e)===null;)await new Promise(t=>requestAnimationFrame(t));return document.querySelector(e)}async function ge(){const e=await pe("#trunk canvas.p5Canvas");navigator.userAgent.toLowerCase().indexOf("firefox")>-1?(document.body.classList.add("firefox"),B(e)):G(e)}async function G(e){const t=e.toDataURL();document.documentElement.style.setProperty("--image",`url(${t})`),requestAnimationFrame(()=>G(e))}async function B(e){e.toBlob(async t=>{const i=URL.createObjectURL(t);document.documentElement.style.setProperty("--image",`url(${i})`),requestAnimationFrame(()=>B(e))})}ge(); 2 | -------------------------------------------------------------------------------- /docs/assets/index.2b9e5b42.css: -------------------------------------------------------------------------------- 1 | html{height:100%;--yellow: #ffc600}*{box-sizing:border-box}body{margin:0;padding:0;display:block!important;height:100%;min-height:740px;overflow-x:hidden;overflow-y:auto}.slides{width:100%;height:100%;left:0;top:0;position:absolute;transform:translateZ(0)}.slides{transform:scale(.5)}.slides>article{display:block;position:absolute;overflow:hidden;--w: 1920px;--h: 1080px;width:var(--w);height:var(--h);margin-left:calc((var(--w) / 2) * -1);margin-top:calc((var(--h) / 2) * -1);left:50%;top:50%;padding:20px;transition:all .3s ease-out;justify-content:center;align-items:center;flex-direction:column}.slides>article>iframe{height:100%}.slides>article.side{align-content:center;grid-gap:50px;grid-template-columns:1.2fr 1fr}.slides>article.side.current{display:grid!important}.slides>article.side h2{font-size:50px}.slides>article.side h2{grid-column:1 / -1}.slides>article.side pre{background:none;border:0;box-shadow:none}.slides>article.side code{line-height:1.3;border:0;white-space:pre-wrap;text-align:left;font-family:Operator Mono,courier;color:#fff;font-size:40px;font-weight:300}.slides>article>img{min-width:0;display:block;margin:0 auto}.slides>article>style{display:none}.slide-area{z-index:1000;position:absolute;width:150px;height:100%;left:0;top:0;cursor:pointer;tap-highlight-color:transparent}#next-slide-area{right:0;left:auto}.slides.layout-widescreen #prev-slide-area,.slides.layout-faux-widescreen #prev-slide-area{margin-left:-650px}.slides.layout-widescreen #next-slide-area,.slides.layout-faux-widescreen #next-slide-area{margin-left:500px}.slides>article{display:none;text-align:center}.slides>article.far-past{display:block;transform:translate(-4000px);display:none}.slides>article.past{display:flex;transform:scale(.5) translate(-(w + (0)) px);opacity:.3;display:none}.slides>article.current{display:flex;transform:translate(0);z-index:10;gap:100px}.slides>article.next{display:flex;transform:scale(.5) translate((w + (0)) px);opacity:.3;display:none}.slides>article.far-next{display:flex;transform:translate(4000px);display:none}.blue{color:#06c}.yellow{color:#ffd319}.green{color:#29e254}.red{color:red}.black{color:#000}.white{color:#fff}a{color:var(--yellow)}p{margin:0;padding:0}p:first-child{margin-top:0}h1{font-size:60px;padding:0;margin:0;color:#fff}h2{font-size:45px;padding:0;margin:0;font-weight:600;color:#fff}h2 a{text-decoration:none}h3{font-size:20px;line-height:36px;padding:0 40px 10px 0;margin:0;font-weight:600;color:#eaeaea}.half{width:350px;float:left}.button:hover{color:#fff;background:#392c44}pre.half{width:400px;font-size:17px}p.small{color:#000;font-size:18px}article.fill h3{background:rgba(255,255,255,.75);margin-top:-.2em;margin-left:-60px;padding:.2em 60px .3em;margin-right:-60px}h4{margin:0}.center{text-align:center}.center h3{font-size:100px;margin-top:220px}ul{list-style:none;padding:0;margin:40px 0 0 .75em}ul:first-child{margin-top:0}ul ul{margin-top:.5em}li{padding:0;margin:0 0 .5em}pre{font-size:20px;line-height:28px;padding:5px 10px;margin-top:20px;margin-bottom:20px;color:#000;background:rgb(240,240,240);border:1px solid rgb(224,224,224);box-shadow:inset 0 2px 6px #0000001a;overflow:hidden}code{font-size:95%;font-family:operator mono,Courier New,monospace;display:inline-block;background:rgba(0,0,0,.05);border-radius:20px;padding:0 10px;font-weight:300;text-transform:none}iframe{width:100%;height:620px;background:white;border:1px solid rgb(192,192,192);margin:-1px}img{max-width:100%;max-height:570px}h3+iframe{margin-top:40px;height:540px}article.fill iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;margin:0;border-radius:10px;z-index:-1}article.fill img{z-index:-1}img.centered{margin:0 auto;display:block}table{width:100%;border-collapse:collapse;margin-top:40px}th{font-weight:600;text-align:left}td,th{border:1px solid rgb(224,224,224);padding:5px 10px;vertical-align:top}.source{position:absolute;left:60px;top:644px;padding-right:175px;font-size:15px;line-height:18px}q{display:block;font-size:60px;line-height:72px;margin-left:20px;margin-top:100px;margin-right:150px}q:before{content:"\201c";position:absolute;display:inline-block;margin-left:-2.1em;width:2em;text-align:right;font-size:90px;color:silver}q:after{content:"\201d";position:absolute;margin-left:.1em;font-size:90px;color:silver}div.author{text-align:right;font-size:40px;margin-top:20px;margin-right:150px}div.author:before{content:"\2014"}article.smaller p,article.smaller ul{font-size:20px;line-height:24px}article.smaller table{font-size:20px;line-height:24px}article.smaller pre{font-size:15px;line-height:20px}article.smaller q{font-size:40px;line-height:48px}article.smaller q:before,article.smaller q:after{font-size:60px}.build>*{transition:opacity .2s ease-in-out .2s}.to-build{opacity:0}.twitter-tweet{transform:scale(3.2)!important}:root{--color1: #ff00fa;--color2: #0ff;--color3: #240066;--color-vanilla: #fffcee;--color-black: #191919;--i: .05;--noCalc: calc(var(--i) * 2);--fogColor: hsl(calc(243 + var(--i) * 255), 100%, 68%);--sickGradient: radial-gradient( farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100% );--coolGradient: linear-gradient( 115deg, var(--color1) 11% 11%, var(--color2) 101% 101%, var(--color3) 100% );--gradColor1: hsl(50, 100%, 68%);--gradColor2: hsl(200, 100%, 68%);--startColor: hsl(0, 100%, 66%);--rainbow: linear-gradient( to right in hsl longer hue, var(--startColor) 0% 100% );--gradient: linear-gradient( 125deg, var(--gradColor1) 0%, var(--gradColor2) 100% );--yellow: #ffc600}mark{background:var(--yellow)}body{color:var(--color-black);background-image:var(--image);background-color:var(--color-vanilla);background-position:center;background-repeat:no-repeat;font-family:Ika VAR;overflow:hidden}body.firefox{background-image:none}@font-face{src:url(/next-gen-server-js/assets/Ika_Compact_VAR.384d6ec2.woff2) format("woff2-variations");font-family:Ika Compact VAR;font-style:normal}@font-face{src:url(/next-gen-server-js/assets/Ika_VAR.8c45cb33.woff2) format("woff2-variations");font-family:Ika VAR;font-style:normal}@font-face{src:url(/next-gen-server-js/assets/Ika_VAR_Italic.1eac7b7f.woff2) format("woff2-variations");font-family:Ika VAR;font-style:italic}.slides>article{background:#fffceef0;border:0;border:5px solid var(--color-black)}#trunk{width:100vw;height:100vh;position:absolute;z-index:1;display:none}h1,h2,h3,h4,h5,h6{font-weight:900;letter-spacing:-.02em;line-height:1;font-stretch:condensed;color:var(--color-black);-webkit-background-clip:text;color:transparent;position:relative;z-index:2;background-image:var(--image);background-color:var(--color-black);background-size:cover;background-position:center;background-attachment:fixed}p,li{font-family:Ika VAR;font-weight:700;letter-spacing:-.05em;font-size:50px}p{margin:20px 0}h1{font-size:250px}h2{font-size:200px}h3{font-size:150px}h4{font-size:70px}img.fit{width:100%;height:100%;object-fit:contain;max-height:none}img.wide{width:100%;height:auto}.slides>article.current.grid,.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:50px!important;place-items:center;width:100%;justify-content:center}:is(.slides > article.current.grid,.grid) img{max-width:200px}:is(.slides > article.current.grid,.grid) h1,:is(.slides > article.current.grid,.grid) h2{grid-column:1 / -1;height:100%}:is(.slides > article.current.grid,.grid)>*:not(style){display:initial}article:has(> img:only-child){padding:0}article:has(> img:only-child) img{width:100%;height:100%;max-height:none;object-fit:contain}article:has(h2 + img):not(:has(:nth-child(3))){gap:50px}article:has(> :is(h1,h2,h3,h4,h4,h5,h6):only-child){padding:5rem}.columns{display:flex;align-items:center;gap:100px}.balance{text-wrap:balance} 2 | -------------------------------------------------------------------------------- /docs/assets/js.48d02175.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/js.48d02175.png -------------------------------------------------------------------------------- /docs/assets/jsc.987c0559.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/jsc.987c0559.jpg -------------------------------------------------------------------------------- /docs/assets/nitro.ca99e92b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/nitro.ca99e92b.png -------------------------------------------------------------------------------- /docs/assets/node-fetch.891221d5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/node-fetch.891221d5.png -------------------------------------------------------------------------------- /docs/assets/node.c716a3d9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/node.c716a3d9.png -------------------------------------------------------------------------------- /docs/assets/react-streams.6625a33a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/react-streams.6625a33a.png -------------------------------------------------------------------------------- /docs/assets/req2.560305ef.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/req2.560305ef.png -------------------------------------------------------------------------------- /docs/assets/request.4965cadf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/request.4965cadf.png -------------------------------------------------------------------------------- /docs/assets/rewriter.728ccbb8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/rewriter.728ccbb8.png -------------------------------------------------------------------------------- /docs/assets/ryan-async.92f7dcb7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/ryan-async.92f7dcb7.png -------------------------------------------------------------------------------- /docs/assets/safari.9d723a4b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/safari.9d723a4b.png -------------------------------------------------------------------------------- /docs/assets/security.3582845a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/security.3582845a.jpg -------------------------------------------------------------------------------- /docs/assets/server-grid.679c7ba0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/server-grid.679c7ba0.png -------------------------------------------------------------------------------- /docs/assets/solid-start.25a9617a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/solid-start.25a9617a.png -------------------------------------------------------------------------------- /docs/assets/spidermonkey.8303ed62.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/spidermonkey.8303ed62.png -------------------------------------------------------------------------------- /docs/assets/srvx.0c34f844.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/srvx.0c34f844.png -------------------------------------------------------------------------------- /docs/assets/streaming.ad7212b6.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/streaming.ad7212b6.mp4 -------------------------------------------------------------------------------- /docs/assets/tanstack.576329a8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/tanstack.576329a8.png -------------------------------------------------------------------------------- /docs/assets/tc39.de2fa905.svg: -------------------------------------------------------------------------------- 1 | Artboard 1 2 | -------------------------------------------------------------------------------- /docs/assets/unenv-apis.eb9eb75c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/unenv-apis.eb9eb75c.png -------------------------------------------------------------------------------- /docs/assets/unenv-cf.f0826209.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/unenv-cf.f0826209.png -------------------------------------------------------------------------------- /docs/assets/unenv-deno.caf54f2d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/unenv-deno.caf54f2d.png -------------------------------------------------------------------------------- /docs/assets/unjs.33b221eb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/unjs.33b221eb.png -------------------------------------------------------------------------------- /docs/assets/v8.6966a77a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/v8.6966a77a.png -------------------------------------------------------------------------------- /docs/assets/vinxi.0cd23c72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/vinxi.0cd23c72.png -------------------------------------------------------------------------------- /docs/assets/w3c.2c649c57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/w3c.2c649c57.png -------------------------------------------------------------------------------- /docs/assets/whatwg.02c8530d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/whatwg.02c8530d.png -------------------------------------------------------------------------------- /docs/assets/wintergc.68ce46e7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/docs/assets/wintergc.68ce46e7.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |

Next-Gen
Serverside
JavaScript!

21 |
22 | 23 |
24 |

25 | Hi, I'm
Wes Bos 26 |

27 |

Hamilton, On 🇨🇦

28 |

@wesbos on 𝕏, gram, tok, tube and suits

29 |
30 |
31 |
32 |
33 |

Web
Dev
Courses

34 |
35 |
+
36 |
37 | 40 |

syntax.fm × @syntaxfm × sentry

41 |
42 |
43 |
44 | 45 |
46 |

What is this talk about?

47 |

Server Side JavaScript

48 | 49 |
50 | 51 |
52 |

JavaScript Runtimes

53 |

Engines + APIS === Runtime

54 |
55 | 56 |
57 | 68 |

69 | V8 → 72 |

73 |

Spider Monkey →

74 |

JavaScriptCore →

75 |
76 | 77 |
78 |
79 |
80 | 81 |

Node.js

82 |
83 |

→

84 | 85 |
86 |
87 | 88 |
89 |
90 |
91 | 92 |

Deno

93 |

[Deno Deploy, Netlify Edge, Supabase Edge]

94 |
95 |

→

96 | 97 |
98 |
99 | 100 |
101 |
102 |
103 | 104 |

Cloudflare
Workers

105 |

[Workerd]

106 |
107 |

→

108 | 109 |
110 |
111 |
112 |
113 |
114 | 115 |

Bun

116 |
117 |

→

118 | 119 |
120 |
121 | 122 |
123 |
124 |
125 | 126 |

Fastly
Compute
@edge

127 |
128 |

→

129 | 130 |
131 |
132 |
133 |
134 |
135 | 136 |

Alibaba
Edge
Compute

137 |
138 |

→

139 | 140 |
141 |
142 |
143 |
144 |
145 | 148 |

llrt

149 |
150 |

→

151 | 155 |
156 |

*experimental*

157 |
158 | 159 |
160 |
161 | 162 | 163 |
164 |
165 | 166 |
167 |

So if my math is correct...

168 |
169 | 170 |
171 |

3 Browser JS Runtimes

172 |
173 | 174 | 175 | 176 |
177 |
178 | 179 |
180 |

6+ Server JS Runtimes

181 |
182 | 183 | 184 | 185 | 186 | 187 | 188 |
189 |
190 | 191 |
192 | 193 |
194 | 195 |
196 |

197 | The next generation of server JS we write will be 198 | standards based. 199 |

200 |
201 |
202 |

203 | Yes, run it anywhere, but it also means we have 204 | interchangable + composable layers 205 |

206 |
207 | 208 |
209 |

Should you care?

210 |

maybe. You should care about the standards

211 |
212 | 213 |
214 |

WHY

215 |

Why do we have so many runtimes?

216 |
217 | 218 |
219 |

Better

220 |
    221 |
  • TS out of the Box
    • 222 |
  • A push for Standard APIs
    • 223 |
  • ESM Spec
    • 224 |
  • Easy wins (dotenv, prompt, JSX, etc..)
    • 225 |
  • A Joy to work with
    • 226 |
227 |
228 | 229 |
230 |

Faster

231 |
    232 |
  • "cold starts"
    • 233 |
  • "Rust"
    • 234 |
  • "WASM"
    • 235 |
  • "Async"
    • 236 |
237 |
238 | 239 |
240 |

Faster - Cheaper?

241 |
    242 |
  • At scale, faster is a lot cheaper
    • 243 |
  • CPU Time vs Wall Time
    • 244 |
245 | 255 |
256 | 257 |
258 |

Stronger

259 | 260 |
261 | 262 |
263 |

Server Kinds

264 |
265 | 266 |
267 |

Traditional VM / Long Running Server

268 |
    269 |
  • Always running
    • 270 |
  • Maintain Memory
    • 271 |
  • Scaling up via Memory/CPU
    • 272 |
  • Scaling up via more servers
    • 273 | 274 |
275 |
276 | 277 |
278 |

Serverless Functions

279 |
    280 |
  • Only Run in short bursts when needed
    • 281 |
  • Scale up by running more
    • 282 |
  • Pay for what you need
    • 283 |
284 | 285 |
286 | 287 |
288 |

Edge Functions

289 |
    290 |
  • Run closer to your user
    • 291 |
  • Can run in-between / intercept requests
    • 292 |
  • Limited API
    • 293 |
  • Not 100% node compat (close!)
    • 294 |
295 | 296 | 297 |
298 | 299 |
300 |

What's a poor dev to do? Support 6+ Runtimes?!

301 |

well, ya. But also no.

302 |
303 | 304 |
305 | 306 |
307 | 308 |
309 |

Web Standards

310 |
311 |
312 | 317 |

TC39

318 |

Async + Await, esm, const, arrow functions

319 |
320 |
321 | 326 |

W3C

327 |

WebRTC, Streams API, Web Components

328 |
329 |
330 | 335 |

WHATWG

336 |

Fetch, Service Workers, Resize Observer

337 |
338 |
339 |
340 | 341 |
342 | 343 |
344 | 345 |
346 | 347 |
348 | 349 |
350 | 351 |
352 | 353 |
354 |

Browser JS is Server JS

355 |

JS is JS

356 |

We don't need different ways to do the same thing

357 |

Let's look at some of those standards

358 |
359 | 360 |
361 |

Fetch

362 |

Web Request + Web Response are life

363 |
364 | 365 |
366 |

In the Browser, We send Requests

367 | 368 |
369 |
370 |

On the Server, we handle them!

371 | 372 |
373 | 374 |
375 | 376 |
377 | 378 |
379 |

Node

380 |

Not Native, But:

381 |

382 | Hono.js, H3, @whatwg-node/server, Fastify Plugin, Next.js Routes, 383 | Sveltekit, Astro + more 384 |

385 |
386 | 387 |
388 |

Web Streams

389 |

Blow Chunks as you have em

390 |
391 | 392 |
393 | 394 | 402 |
403 |
404 | 405 |
406 | 407 |
408 | 409 |
410 | 411 |
412 | 413 |
414 | 415 |
416 |

Events!

417 |

Listen for events on anything!

418 |
419 | 420 |
421 | 422 |
423 | 424 |
425 | 426 | 427 | 428 |
429 | 430 |
431 |

Form Data

432 |
433 | 434 |
435 | 436 |
437 | 438 |
439 |

Web Workers

440 |
    441 |
  • Multi Threaded / Parallel
    • 442 |
  • CPU intensive tasks
    • 443 |
  • Non-blocking
    • 444 |
445 |
446 | 447 | 463 | 464 |
465 |

alert()
prompt()
confirm()

466 |
467 | 468 |
469 | 470 |
471 |
472 | 473 |
474 | 475 | 478 | 479 |
480 |

Async
Local
Storage

481 |

Really cool new API

482 |
483 | 484 |
485 | 486 |
487 | 488 |
489 | 490 |
491 | 492 |
493 | 494 |
495 | 496 |
497 |

Developer Ecosystem

498 |

The tooling is standardizing on standards

499 |
500 | 501 |
502 | 503 |
504 | 505 |
506 |

unenv

507 |
508 | 509 |
510 | 511 |
512 | 513 |
514 | 515 |
516 | 517 |
518 |

Deno, Bun, Cloudflare, Node

519 | 520 |
521 | 522 |
523 | 524 |
525 | 526 |
527 | 528 |
529 |
530 |

Think of these as standards based Express that can run anywhere.

531 |

HMR, Routing, Middlware, Caching, Web Sockets, Assets

532 |
533 |
534 | 535 |
536 | 537 |
538 | 539 |
540 | 541 |
542 | 543 |
544 | 545 |
546 |

Vite + Nitro = Vinxi

547 |
548 | 549 |
550 |

Build your own Framework

551 |

Any JS LIb + Standard Server = Metaframework

552 |
553 | 554 |
555 | 556 |
557 |
558 | 559 |
560 | 561 | 565 | 566 |
567 |
    568 |
  • ✅ Routing
    • 569 |
  • ✅ RPC
    • 570 |
  • ✅ Data Loaders
    • 571 |
  • ✅ Middleware
    • 572 |
  • ✅ API Endpoints
    • 573 |
  • ✅ Server Rendering
    • 574 |
  • ✅ Streaming
    • 575 |
  • ✅ caching
    • 576 |
  • + More.
    • 577 |
578 |
579 | 580 |
581 |

Tanstack Start

582 |

Client: Vite, Tanstack Query, Tanstack Router

583 |

Server: Vinxi → Nitro → H3 → srvx

584 |
585 | 586 |
587 |

import { DOMParser, parseHTML } from 'linkedom/worker';

588 |

JSDom Alternative. Works everywhere

589 |
590 | 591 |
592 |

HTMLRewriter

593 |
    594 |
  • Cloudflare Invented
    • 595 |
  • Re-implemented everywhere
    • 596 |
  • Not a standard
    • 597 |
598 |
599 | 600 |
601 | 602 |
603 | 604 | 610 | 615 | 616 |
617 |

So much more!

618 |
619 | 620 |
621 |

This ins't write once work everywhere

622 |

At least not yet...

623 |
624 | 625 |
626 |

627 | It is a set of standardized APIs and an 628 | ecosystem of tools that work together 629 |

630 | 631 |
632 | 633 | 639 |
640 |

641 | Future Server JS isn't about making it work everywhere. 642 |

643 |

644 | It's about building with standards, enjoying the huge 645 | ecosystem's best tools and having the choice for it to 646 | run anywhere. 647 |

648 |
649 | 650 |
651 |

Thanks

652 |

@wesbos

653 |
654 |
655 | 656 | 657 | -------------------------------------------------------------------------------- /fonts/Ika_Compact_VAR.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/fonts/Ika_Compact_VAR.woff2 -------------------------------------------------------------------------------- /fonts/Ika_VAR.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/fonts/Ika_VAR.ttf -------------------------------------------------------------------------------- /fonts/Ika_VAR.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/fonts/Ika_VAR.woff2 -------------------------------------------------------------------------------- /fonts/Ika_VAR_Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/fonts/Ika_VAR_Italic.woff2 -------------------------------------------------------------------------------- /go.ts: -------------------------------------------------------------------------------- 1 | // import { SessionsWave } from "./waves/wave"; 2 | import FOG from "vanta/src/vanta.fog"; 3 | // import TRUNK from "vanta/src/vanta.trunk"; 4 | import TRUNK from "./vanta/trunk"; 5 | // const x = new SessionsWave(); 6 | // x.connect(); 7 | 8 | // import svg from './icons/bun.svg?raw' 9 | 10 | // Get colors from body 11 | const body = document.querySelector("body"); 12 | const color1 = getComputedStyle(document.documentElement).getPropertyValue( 13 | "--fogColor1" 14 | ); 15 | const color3 = getComputedStyle(document.documentElement).getPropertyValue( 16 | "--fogColor3" 17 | ); 18 | const color5 = getComputedStyle(document.documentElement).getPropertyValue( 19 | "--fogColor5" 20 | ); 21 | 22 | const computedStyle = getComputedStyle(document.documentElement); 23 | const cssVariables = Object.fromEntries( 24 | Object.values(computedStyle) 25 | .filter((key) => key.startsWith(`--`)) 26 | .map((key) => { 27 | return [key.replace(`--`, ''), computedStyle.getPropertyValue(key)]; 28 | }) 29 | ); 30 | 31 | function hexToNumber(hex = '#ffc600') { 32 | return `0x${parseInt(hex.replace("#", ""), 16).toString(16)}`; 33 | } 34 | 35 | // FOG({ 36 | // el: "#fog", 37 | // mouseControls: true, 38 | // touchControls: true, 39 | // gyroControls: false, 40 | // minHeight: 200.0, 41 | // minWidth: 200.0, 42 | // blurFactor: 0.8, 43 | // highlightColor: 0x6900ff, 44 | // midtoneColor: 0xff7ee9, 45 | // // lowlightColor: 0xbada55, 46 | // lowlightColor: 0xffc600, 47 | // baseColor: 0x2f52d9, 48 | // speed: 2.5, 49 | // }); 50 | 51 | 52 | TRUNK({ 53 | el: "#trunk", 54 | mouseControls: true, 55 | touchControls: true, 56 | gyroControls: false, 57 | minHeight: 500.0, 58 | minWidth: 500.0, 59 | scale: 2.0, 60 | scaleMobile: 1.0, 61 | // color: 0xff009e, 62 | color: 0x67655a, 63 | backgroundColor: `transparent`, 64 | spacing: 8.0, 65 | chaos: 1, 66 | }); 67 | 68 | // Convert the canvas to an image 69 | async function waitForSelector(selector) { 70 | while (document.querySelector(selector) === null) { 71 | await new Promise((resolve) => requestAnimationFrame(resolve)); 72 | } 73 | return document.querySelector(selector); 74 | } 75 | 76 | async function go() { 77 | const canvas = await waitForSelector("#trunk canvas.p5Canvas"); 78 | // In firefox we use blob, in chrome we use dataURL 79 | if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { 80 | document.body.classList.add('firefox'); 81 | paintBlob(canvas); 82 | } else { 83 | paint(canvas); 84 | } 85 | } 86 | 87 | function wait(ms) { 88 | return new Promise((resolve) => setTimeout(resolve, ms)); 89 | } 90 | 91 | async function paint(canvas) { 92 | const image = canvas.toDataURL(); 93 | document.documentElement.style.setProperty( 94 | "--image", 95 | `url(${image})` 96 | ); 97 | requestAnimationFrame(() => paint(canvas)); 98 | } 99 | 100 | 101 | async function paintBlob(canvas) { 102 | // const image = canvas.toDataURL(); 103 | canvas.toBlob(async (blob) => { 104 | // console.count(blob); 105 | const image = URL.createObjectURL(blob); 106 | document.documentElement.style.setProperty( 107 | "--image", 108 | `url(${image})` 109 | ); 110 | requestAnimationFrame(() => paintBlob(canvas)); 111 | }); 112 | } 113 | go(); 114 | -------------------------------------------------------------------------------- /https:/wesbos.github.io/Wes Bos - next-gen-server-js.txt: -------------------------------------------------------------------------------- 1 | Slides are browser based. Must run in chrome. I will connect my own computer. https://wesbos.github.io/next-gen-server-js/#1 2 | -------------------------------------------------------------------------------- /icons/abort-server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/abort-server.png -------------------------------------------------------------------------------- /icons/abort.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/abort.png -------------------------------------------------------------------------------- /icons/alert-output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/alert-output.png -------------------------------------------------------------------------------- /icons/alert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/alert.png -------------------------------------------------------------------------------- /icons/alibaba.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/alibaba.png -------------------------------------------------------------------------------- /icons/als.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/als.png -------------------------------------------------------------------------------- /icons/async-context.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/async-context.png -------------------------------------------------------------------------------- /icons/bloomberg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/bloomberg.png -------------------------------------------------------------------------------- /icons/bun.svg: -------------------------------------------------------------------------------- 1 | Bun Logo -------------------------------------------------------------------------------- /icons/bytedance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/bytedance.png -------------------------------------------------------------------------------- /icons/chrome.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/chromium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/chromium.png -------------------------------------------------------------------------------- /icons/cloudflare.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/cloudflare.jpg -------------------------------------------------------------------------------- /icons/deno.svg: -------------------------------------------------------------------------------- 1 | Deno logo -------------------------------------------------------------------------------- /icons/denoreq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/denoreq.png -------------------------------------------------------------------------------- /icons/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/edge.png -------------------------------------------------------------------------------- /icons/event1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/event1.png -------------------------------------------------------------------------------- /icons/event2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/event2.png -------------------------------------------------------------------------------- /icons/fastly.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/fastly.png -------------------------------------------------------------------------------- /icons/fetch-standard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/fetch-standard.png -------------------------------------------------------------------------------- /icons/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/firefox.png -------------------------------------------------------------------------------- /icons/formData.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/formData.png -------------------------------------------------------------------------------- /icons/ie6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/ie6.jpg -------------------------------------------------------------------------------- /icons/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/js.png -------------------------------------------------------------------------------- /icons/jsc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/jsc.jpg -------------------------------------------------------------------------------- /icons/node-fetch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/node-fetch.png -------------------------------------------------------------------------------- /icons/node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/node.png -------------------------------------------------------------------------------- /icons/react-streams.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/react-streams.png -------------------------------------------------------------------------------- /icons/req2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/req2.png -------------------------------------------------------------------------------- /icons/request.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/request.png -------------------------------------------------------------------------------- /icons/requests.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/requests.png -------------------------------------------------------------------------------- /icons/rewriter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/rewriter.png -------------------------------------------------------------------------------- /icons/ryah.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/ryah.jpg -------------------------------------------------------------------------------- /icons/ryan-async.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/ryan-async.png -------------------------------------------------------------------------------- /icons/safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/safari.png -------------------------------------------------------------------------------- /icons/security.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/security.jpg -------------------------------------------------------------------------------- /icons/spidermonkey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/spidermonkey.png -------------------------------------------------------------------------------- /icons/stream-replace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/stream-replace.png -------------------------------------------------------------------------------- /icons/streams.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/streams.png -------------------------------------------------------------------------------- /icons/tc39.svg: -------------------------------------------------------------------------------- 1 | Artboard 1 2 | -------------------------------------------------------------------------------- /icons/v8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/v8.png -------------------------------------------------------------------------------- /icons/w3c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/w3c.png -------------------------------------------------------------------------------- /icons/whatwg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/whatwg.png -------------------------------------------------------------------------------- /icons/wintergc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/wintergc.png -------------------------------------------------------------------------------- /icons/worker-tools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/icons/worker-tools.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |

Next-Gen
Serverside
JavaScript!

19 |
20 | 21 |
22 |

23 | Hi, I'm
Wes Bos 24 |

25 |

Hamilton, On 🇨🇦

26 |

@wesbos on 𝕏, gram, tok, tube and suits

27 |
28 |
29 |
30 |
31 |

Web
Dev
Courses

32 |
33 |
+
34 |
35 | 38 |

syntax.fm × @syntaxfm × sentry

39 |
40 |
41 |
42 | 43 |
44 |

What is this talk about?

45 |

Server Side JavaScript

46 | 47 |
48 | 49 |
50 |

JavaScript Runtimes

51 |

Engines + APIS === Runtime

52 |
53 | 54 |
55 | 66 |

67 | V8 → 70 |

71 |

Spider Monkey →

72 |

JavaScriptCore →

73 |
74 | 75 |
76 |
77 |
78 | 79 |

Node.js

80 |
81 |

→

82 | 83 |
84 |
85 | 86 |
87 |
88 |
89 | 90 |

Deno

91 |

[Deno Deploy, Netlify Edge, Supabase Edge]

92 |
93 |

→

94 | 95 |
96 |
97 | 98 |
99 |
100 |
101 | 102 |

Cloudflare
Workers

103 |

[Workerd]

104 |
105 |

→

106 | 107 |
108 |
109 |
110 |
111 |
112 | 113 |

Bun

114 |
115 |

→

116 | 117 |
118 |
119 | 120 |
121 |
122 |
123 | 124 |

Fastly
Compute
@edge

125 |
126 |

→

127 | 128 |
129 |
130 |
131 |
132 |
133 | 134 |

Alibaba
Edge
Compute

135 |
136 |

→

137 | 138 |
139 |
140 |
141 |
142 |
143 | 146 |

llrt

147 |
148 |

→

149 | 153 |
154 |

*experimental*

155 |
156 | 157 |
158 |
159 | 160 | 161 |
162 |
163 | 164 |
165 |

So if my math is correct...

166 |
167 | 168 |
169 |

3 Browser JS Runtimes

170 |
171 | 172 | 173 | 174 |
175 |
176 | 177 |
178 |

6+ Server JS Runtimes

179 |
180 | 181 | 182 | 183 | 184 | 185 | 186 |
187 |
188 | 189 |
190 | 191 |
192 | 193 |
194 |

195 | The next generation of server JS we write will be 196 | standards based. 197 |

198 |
199 |
200 |

201 | Yes, run it anywhere, but it also means we have 202 | interchangable + composable layers 203 |

204 |
205 | 206 |
207 |

Should you care?

208 |

maybe. You should care about the standards

209 |
210 | 211 |
212 |

WHY

213 |

Why do we have so many runtimes?

214 |
215 | 216 |
217 |

Better

218 |
    219 |
  • TS out of the Box
    • 220 |
  • A push for Standard APIs
    • 221 |
  • ESM Spec
    • 222 |
  • Easy wins (dotenv, prompt, JSX, etc..)
    • 223 |
  • A Joy to work with
    • 224 |
225 |
226 | 227 |
228 |

Faster

229 |
    230 |
  • "cold starts"
    • 231 |
  • "Rust"
    • 232 |
  • "WASM"
    • 233 |
  • "Async"
    • 234 |
235 |
236 | 237 |
238 |

Faster - Cheaper?

239 |
    240 |
  • At scale, faster is a lot cheaper
    • 241 |
  • CPU Time vs Wall Time
    • 242 |
243 | 253 |
254 | 255 |
256 |

Stronger

257 | 258 |
259 | 260 |
261 |

Server Kinds

262 |
263 | 264 |
265 |

Traditional VM / Long Running Server

266 |
    267 |
  • Always running
    • 268 |
  • Maintain Memory
    • 269 |
  • Scaling up via Memory/CPU
    • 270 |
  • Scaling up via more servers
    • 271 | 272 |
273 |
274 | 275 |
276 |

Serverless Functions

277 |
    278 |
  • Only Run in short bursts when needed
    • 279 |
  • Scale up by running more
    • 280 |
  • Pay for what you need
    • 281 |
282 | 283 |
284 | 285 |
286 |

Edge Functions

287 |
    288 |
  • Run closer to your user
    • 289 |
  • Can run in-between / intercept requests
    • 290 |
  • Limited API
    • 291 |
  • Not 100% node compat (close!)
    • 292 |
293 | 294 | 295 |
296 | 297 |
298 |

What's a poor dev to do? Support 6+ Runtimes?!

299 |

well, ya. But also no.

300 |
301 | 302 |
303 | 304 |
305 | 306 |
307 |

Web Standards

308 |
309 |
310 | 315 |

TC39

316 |

Async + Await, esm, const, arrow functions

317 |
318 |
319 | 324 |

W3C

325 |

WebRTC, Streams API, Web Components

326 |
327 |
328 | 333 |

WHATWG

334 |

Fetch, Service Workers, Resize Observer

335 |
336 |
337 |
338 | 339 |
340 | 341 |
342 | 343 |
344 | 345 |
346 | 347 |
348 | 349 |
350 | 351 |
352 |

Browser JS is Server JS

353 |

JS is JS

354 |

We don't need different ways to do the same thing

355 |

Let's look at some of those standards

356 |
357 | 358 |
359 |

Fetch

360 |

Web Request + Web Response are life

361 |
362 | 363 |
364 |

In the Browser, We send Requests

365 | 366 |
367 |
368 |

On the Server, we handle them!

369 | 370 |
371 | 372 |
373 | 374 |
375 | 376 |
377 |

Node

378 |

Not Native, But:

379 |

380 | Hono.js, H3, @whatwg-node/server, Fastify Plugin, Next.js Routes, 381 | Sveltekit, Astro + more 382 |

383 |
384 | 385 |
386 |

Web Streams

387 |

Blow Chunks as you have em

388 |
389 | 390 |
391 | 392 | 400 |
401 |
402 | 403 |
404 | 405 |
406 | 407 |
408 | 409 |
410 | 411 |
412 | 413 |
414 |

Events!

415 |

Listen for events on anything!

416 |
417 | 418 |
419 | 420 |
421 | 422 |
423 | 424 | 425 | 426 |
427 | 428 |
429 |

Form Data

430 |
431 | 432 |
433 | 434 |
435 | 436 |
437 |

Web Workers

438 |
    439 |
  • Multi Threaded / Parallel
    • 440 |
  • CPU intensive tasks
    • 441 |
  • Non-blocking
    • 442 |
443 |
444 | 445 | 461 | 462 |
463 |

alert()
prompt()
confirm()

464 |
465 | 466 |
467 | 468 |
469 |
470 | 471 |
472 | 473 | 476 | 477 |
478 |

Async
Local
Storage

479 |

Really cool new API

480 |
481 | 482 |
483 | 484 |
485 | 486 |
487 | 488 |
489 | 490 |
491 | 492 |
493 | 494 |
495 |

Developer Ecosystem

496 |

The tooling is standardizing on standards

497 |
498 | 499 |
500 | 501 |
502 | 503 |
504 |

unenv

505 |
506 | 507 |
508 | 509 |
510 | 511 |
512 | 513 |
514 | 515 |
516 |

Deno, Bun, Cloudflare, Node

517 | 518 |
519 | 520 |
521 | 522 |
523 | 524 |
525 | 526 |
527 |
528 |

Think of these as standards based Express that can run anywhere.

529 |

HMR, Routing, Middlware, Caching, Web Sockets, Assets

530 |
531 |
532 | 533 |
534 | 535 |
536 | 537 |
538 | 539 |
540 | 541 |
542 | 543 |
544 |

Vite + Nitro = Vinxi

545 |
546 | 547 |
548 |

Build your own Framework

549 |

Any JS LIb + Standard Server = Metaframework

550 |
551 | 552 |
553 | 554 |
555 |
556 | 557 |
558 | 559 | 563 | 564 |
565 |
    566 |
  • ✅ Routing
    • 567 |
  • ✅ RPC
    • 568 |
  • ✅ Data Loaders
    • 569 |
  • ✅ Middleware
    • 570 |
  • ✅ API Endpoints
    • 571 |
  • ✅ Server Rendering
    • 572 |
  • ✅ Streaming
    • 573 |
  • ✅ caching
    • 574 |
  • + More.
    • 575 |
576 |
577 | 578 |
579 |

Tanstack Start

580 |

Client: Vite, Tanstack Query, Tanstack Router

581 |

Server: Vinxi → Nitro → H3 → srvx

582 |
583 | 584 |
585 |

import { DOMParser, parseHTML } from 'linkedom/worker';

586 |

JSDom Alternative. Works everywhere

587 |
588 | 589 |
590 |

HTMLRewriter

591 |
    592 |
  • Cloudflare Invented
    • 593 |
  • Re-implemented everywhere
    • 594 |
  • Not a standard
    • 595 |
596 |
597 | 598 |
599 | 600 |
601 | 602 | 608 | 613 | 614 |
615 |

So much more!

616 |
617 | 618 |
619 |

This ins't write once work everywhere

620 |

At least not yet...

621 |
622 | 623 |
624 |

625 | It is a set of standardized APIs and an 626 | ecosystem of tools that work together 627 |

628 | 629 |
630 | 631 | 637 |
638 |

639 | Future Server JS isn't about making it work everywhere. 640 |

641 |

642 | It's about building with standards, enjoying the huge 643 | ecosystem's best tools and having the choice for it to 644 | run anywhere. 645 |

646 |
647 | 648 |
649 |

Thanks

650 |

@wesbos

651 |
652 |
653 | 654 | 655 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "syntax-live", 3 | "version": "1.0.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "syntax-live", 9 | "version": "1.0.0", 10 | "license": "ISC", 11 | "dependencies": { 12 | "date-fns": "^2.29.3", 13 | "postcss-nesting": "^11.2.2", 14 | "three": "^0.151.3", 15 | "three.js": "^0.77.1", 16 | "vanta": "^0.5.24", 17 | "vite": "^3.1.8" 18 | } 19 | }, 20 | "node_modules/@csstools/selector-specificity": { 21 | "version": "2.2.0", 22 | "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz", 23 | "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==", 24 | "engines": { 25 | "node": "^14 || ^16 || >=18" 26 | }, 27 | "funding": { 28 | "type": "opencollective", 29 | "url": "https://opencollective.com/csstools" 30 | }, 31 | "peerDependencies": { 32 | "postcss-selector-parser": "^6.0.10" 33 | } 34 | }, 35 | "node_modules/@esbuild/android-arm": { 36 | "version": "0.15.18", 37 | "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.18.tgz", 38 | "integrity": "sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==", 39 | "cpu": [ 40 | "arm" 41 | ], 42 | "optional": true, 43 | "os": [ 44 | "android" 45 | ], 46 | "engines": { 47 | "node": ">=12" 48 | } 49 | }, 50 | "node_modules/@esbuild/linux-loong64": { 51 | "version": "0.15.18", 52 | "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.18.tgz", 53 | "integrity": "sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==", 54 | "cpu": [ 55 | "loong64" 56 | ], 57 | "optional": true, 58 | "os": [ 59 | "linux" 60 | ], 61 | "engines": { 62 | "node": ">=12" 63 | } 64 | }, 65 | "node_modules/cssesc": { 66 | "version": "3.0.0", 67 | "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", 68 | "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", 69 | "bin": { 70 | "cssesc": "bin/cssesc" 71 | }, 72 | "engines": { 73 | "node": ">=4" 74 | } 75 | }, 76 | "node_modules/date-fns": { 77 | "version": "2.29.3", 78 | "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", 79 | "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==", 80 | "engines": { 81 | "node": ">=0.11" 82 | }, 83 | "funding": { 84 | "type": "opencollective", 85 | "url": "https://opencollective.com/date-fns" 86 | } 87 | }, 88 | "node_modules/esbuild": { 89 | "version": "0.15.18", 90 | "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.18.tgz", 91 | "integrity": "sha512-x/R72SmW3sSFRm5zrrIjAhCeQSAWoni3CmHEqfQrZIQTM3lVCdehdwuIqaOtfC2slvpdlLa62GYoN8SxT23m6Q==", 92 | "hasInstallScript": true, 93 | "bin": { 94 | "esbuild": "bin/esbuild" 95 | }, 96 | "engines": { 97 | "node": ">=12" 98 | }, 99 | "optionalDependencies": { 100 | "@esbuild/android-arm": "0.15.18", 101 | "@esbuild/linux-loong64": "0.15.18", 102 | "esbuild-android-64": "0.15.18", 103 | "esbuild-android-arm64": "0.15.18", 104 | "esbuild-darwin-64": "0.15.18", 105 | "esbuild-darwin-arm64": "0.15.18", 106 | "esbuild-freebsd-64": "0.15.18", 107 | "esbuild-freebsd-arm64": "0.15.18", 108 | "esbuild-linux-32": "0.15.18", 109 | "esbuild-linux-64": "0.15.18", 110 | "esbuild-linux-arm": "0.15.18", 111 | "esbuild-linux-arm64": "0.15.18", 112 | "esbuild-linux-mips64le": "0.15.18", 113 | "esbuild-linux-ppc64le": "0.15.18", 114 | "esbuild-linux-riscv64": "0.15.18", 115 | "esbuild-linux-s390x": "0.15.18", 116 | "esbuild-netbsd-64": "0.15.18", 117 | "esbuild-openbsd-64": "0.15.18", 118 | "esbuild-sunos-64": "0.15.18", 119 | "esbuild-windows-32": "0.15.18", 120 | "esbuild-windows-64": "0.15.18", 121 | "esbuild-windows-arm64": "0.15.18" 122 | } 123 | }, 124 | "node_modules/esbuild-android-64": { 125 | "version": "0.15.18", 126 | "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.15.18.tgz", 127 | "integrity": "sha512-wnpt3OXRhcjfIDSZu9bnzT4/TNTDsOUvip0foZOUBG7QbSt//w3QV4FInVJxNhKc/ErhUxc5z4QjHtMi7/TbgA==", 128 | "cpu": [ 129 | "x64" 130 | ], 131 | "optional": true, 132 | "os": [ 133 | "android" 134 | ], 135 | "engines": { 136 | "node": ">=12" 137 | } 138 | }, 139 | "node_modules/esbuild-android-arm64": { 140 | "version": "0.15.18", 141 | "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.15.18.tgz", 142 | "integrity": "sha512-G4xu89B8FCzav9XU8EjsXacCKSG2FT7wW9J6hOc18soEHJdtWu03L3TQDGf0geNxfLTtxENKBzMSq9LlbjS8OQ==", 143 | "cpu": [ 144 | "arm64" 145 | ], 146 | "optional": true, 147 | "os": [ 148 | "android" 149 | ], 150 | "engines": { 151 | "node": ">=12" 152 | } 153 | }, 154 | "node_modules/esbuild-darwin-64": { 155 | "version": "0.15.18", 156 | "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.18.tgz", 157 | "integrity": "sha512-2WAvs95uPnVJPuYKP0Eqx+Dl/jaYseZEUUT1sjg97TJa4oBtbAKnPnl3b5M9l51/nbx7+QAEtuummJZW0sBEmg==", 158 | "cpu": [ 159 | "x64" 160 | ], 161 | "optional": true, 162 | "os": [ 163 | "darwin" 164 | ], 165 | "engines": { 166 | "node": ">=12" 167 | } 168 | }, 169 | "node_modules/esbuild-darwin-arm64": { 170 | "version": "0.15.18", 171 | "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.18.tgz", 172 | "integrity": "sha512-tKPSxcTJ5OmNb1btVikATJ8NftlyNlc8BVNtyT/UAr62JFOhwHlnoPrhYWz09akBLHI9nElFVfWSTSRsrZiDUA==", 173 | "cpu": [ 174 | "arm64" 175 | ], 176 | "optional": true, 177 | "os": [ 178 | "darwin" 179 | ], 180 | "engines": { 181 | "node": ">=12" 182 | } 183 | }, 184 | "node_modules/esbuild-freebsd-64": { 185 | "version": "0.15.18", 186 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.18.tgz", 187 | "integrity": "sha512-TT3uBUxkteAjR1QbsmvSsjpKjOX6UkCstr8nMr+q7zi3NuZ1oIpa8U41Y8I8dJH2fJgdC3Dj3CXO5biLQpfdZA==", 188 | "cpu": [ 189 | "x64" 190 | ], 191 | "optional": true, 192 | "os": [ 193 | "freebsd" 194 | ], 195 | "engines": { 196 | "node": ">=12" 197 | } 198 | }, 199 | "node_modules/esbuild-freebsd-arm64": { 200 | "version": "0.15.18", 201 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.18.tgz", 202 | "integrity": "sha512-R/oVr+X3Tkh+S0+tL41wRMbdWtpWB8hEAMsOXDumSSa6qJR89U0S/PpLXrGF7Wk/JykfpWNokERUpCeHDl47wA==", 203 | "cpu": [ 204 | "arm64" 205 | ], 206 | "optional": true, 207 | "os": [ 208 | "freebsd" 209 | ], 210 | "engines": { 211 | "node": ">=12" 212 | } 213 | }, 214 | "node_modules/esbuild-linux-32": { 215 | "version": "0.15.18", 216 | "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.15.18.tgz", 217 | "integrity": "sha512-lphF3HiCSYtaa9p1DtXndiQEeQDKPl9eN/XNoBf2amEghugNuqXNZA/ZovthNE2aa4EN43WroO0B85xVSjYkbg==", 218 | "cpu": [ 219 | "ia32" 220 | ], 221 | "optional": true, 222 | "os": [ 223 | "linux" 224 | ], 225 | "engines": { 226 | "node": ">=12" 227 | } 228 | }, 229 | "node_modules/esbuild-linux-64": { 230 | "version": "0.15.18", 231 | "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.18.tgz", 232 | "integrity": "sha512-hNSeP97IviD7oxLKFuii5sDPJ+QHeiFTFLoLm7NZQligur8poNOWGIgpQ7Qf8Balb69hptMZzyOBIPtY09GZYw==", 233 | "cpu": [ 234 | "x64" 235 | ], 236 | "optional": true, 237 | "os": [ 238 | "linux" 239 | ], 240 | "engines": { 241 | "node": ">=12" 242 | } 243 | }, 244 | "node_modules/esbuild-linux-arm": { 245 | "version": "0.15.18", 246 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.15.18.tgz", 247 | "integrity": "sha512-UH779gstRblS4aoS2qpMl3wjg7U0j+ygu3GjIeTonCcN79ZvpPee12Qun3vcdxX+37O5LFxz39XeW2I9bybMVA==", 248 | "cpu": [ 249 | "arm" 250 | ], 251 | "optional": true, 252 | "os": [ 253 | "linux" 254 | ], 255 | "engines": { 256 | "node": ">=12" 257 | } 258 | }, 259 | "node_modules/esbuild-linux-arm64": { 260 | "version": "0.15.18", 261 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.18.tgz", 262 | "integrity": "sha512-54qr8kg/6ilcxd+0V3h9rjT4qmjc0CccMVWrjOEM/pEcUzt8X62HfBSeZfT2ECpM7104mk4yfQXkosY8Quptug==", 263 | "cpu": [ 264 | "arm64" 265 | ], 266 | "optional": true, 267 | "os": [ 268 | "linux" 269 | ], 270 | "engines": { 271 | "node": ">=12" 272 | } 273 | }, 274 | "node_modules/esbuild-linux-mips64le": { 275 | "version": "0.15.18", 276 | "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.18.tgz", 277 | "integrity": "sha512-Mk6Ppwzzz3YbMl/ZZL2P0q1tnYqh/trYZ1VfNP47C31yT0K8t9s7Z077QrDA/guU60tGNp2GOwCQnp+DYv7bxQ==", 278 | "cpu": [ 279 | "mips64el" 280 | ], 281 | "optional": true, 282 | "os": [ 283 | "linux" 284 | ], 285 | "engines": { 286 | "node": ">=12" 287 | } 288 | }, 289 | "node_modules/esbuild-linux-ppc64le": { 290 | "version": "0.15.18", 291 | "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.18.tgz", 292 | "integrity": "sha512-b0XkN4pL9WUulPTa/VKHx2wLCgvIAbgwABGnKMY19WhKZPT+8BxhZdqz6EgkqCLld7X5qiCY2F/bfpUUlnFZ9w==", 293 | "cpu": [ 294 | "ppc64" 295 | ], 296 | "optional": true, 297 | "os": [ 298 | "linux" 299 | ], 300 | "engines": { 301 | "node": ">=12" 302 | } 303 | }, 304 | "node_modules/esbuild-linux-riscv64": { 305 | "version": "0.15.18", 306 | "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.18.tgz", 307 | "integrity": "sha512-ba2COaoF5wL6VLZWn04k+ACZjZ6NYniMSQStodFKH/Pu6RxzQqzsmjR1t9QC89VYJxBeyVPTaHuBMCejl3O/xg==", 308 | "cpu": [ 309 | "riscv64" 310 | ], 311 | "optional": true, 312 | "os": [ 313 | "linux" 314 | ], 315 | "engines": { 316 | "node": ">=12" 317 | } 318 | }, 319 | "node_modules/esbuild-linux-s390x": { 320 | "version": "0.15.18", 321 | "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.18.tgz", 322 | "integrity": "sha512-VbpGuXEl5FCs1wDVp93O8UIzl3ZrglgnSQ+Hu79g7hZu6te6/YHgVJxCM2SqfIila0J3k0csfnf8VD2W7u2kzQ==", 323 | "cpu": [ 324 | "s390x" 325 | ], 326 | "optional": true, 327 | "os": [ 328 | "linux" 329 | ], 330 | "engines": { 331 | "node": ">=12" 332 | } 333 | }, 334 | "node_modules/esbuild-netbsd-64": { 335 | "version": "0.15.18", 336 | "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.18.tgz", 337 | "integrity": "sha512-98ukeCdvdX7wr1vUYQzKo4kQ0N2p27H7I11maINv73fVEXt2kyh4K4m9f35U1K43Xc2QGXlzAw0K9yoU7JUjOg==", 338 | "cpu": [ 339 | "x64" 340 | ], 341 | "optional": true, 342 | "os": [ 343 | "netbsd" 344 | ], 345 | "engines": { 346 | "node": ">=12" 347 | } 348 | }, 349 | "node_modules/esbuild-openbsd-64": { 350 | "version": "0.15.18", 351 | "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.18.tgz", 352 | "integrity": "sha512-yK5NCcH31Uae076AyQAXeJzt/vxIo9+omZRKj1pauhk3ITuADzuOx5N2fdHrAKPxN+zH3w96uFKlY7yIn490xQ==", 353 | "cpu": [ 354 | "x64" 355 | ], 356 | "optional": true, 357 | "os": [ 358 | "openbsd" 359 | ], 360 | "engines": { 361 | "node": ">=12" 362 | } 363 | }, 364 | "node_modules/esbuild-sunos-64": { 365 | "version": "0.15.18", 366 | "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.15.18.tgz", 367 | "integrity": "sha512-On22LLFlBeLNj/YF3FT+cXcyKPEI263nflYlAhz5crxtp3yRG1Ugfr7ITyxmCmjm4vbN/dGrb/B7w7U8yJR9yw==", 368 | "cpu": [ 369 | "x64" 370 | ], 371 | "optional": true, 372 | "os": [ 373 | "sunos" 374 | ], 375 | "engines": { 376 | "node": ">=12" 377 | } 378 | }, 379 | "node_modules/esbuild-windows-32": { 380 | "version": "0.15.18", 381 | "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.15.18.tgz", 382 | "integrity": "sha512-o+eyLu2MjVny/nt+E0uPnBxYuJHBvho8vWsC2lV61A7wwTWC3jkN2w36jtA+yv1UgYkHRihPuQsL23hsCYGcOQ==", 383 | "cpu": [ 384 | "ia32" 385 | ], 386 | "optional": true, 387 | "os": [ 388 | "win32" 389 | ], 390 | "engines": { 391 | "node": ">=12" 392 | } 393 | }, 394 | "node_modules/esbuild-windows-64": { 395 | "version": "0.15.18", 396 | "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.18.tgz", 397 | "integrity": "sha512-qinug1iTTaIIrCorAUjR0fcBk24fjzEedFYhhispP8Oc7SFvs+XeW3YpAKiKp8dRpizl4YYAhxMjlftAMJiaUw==", 398 | "cpu": [ 399 | "x64" 400 | ], 401 | "optional": true, 402 | "os": [ 403 | "win32" 404 | ], 405 | "engines": { 406 | "node": ">=12" 407 | } 408 | }, 409 | "node_modules/esbuild-windows-arm64": { 410 | "version": "0.15.18", 411 | "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.18.tgz", 412 | "integrity": "sha512-q9bsYzegpZcLziq0zgUi5KqGVtfhjxGbnksaBFYmWLxeV/S1fK4OLdq2DFYnXcLMjlZw2L0jLsk1eGoB522WXQ==", 413 | "cpu": [ 414 | "arm64" 415 | ], 416 | "optional": true, 417 | "os": [ 418 | "win32" 419 | ], 420 | "engines": { 421 | "node": ">=12" 422 | } 423 | }, 424 | "node_modules/fsevents": { 425 | "version": "2.3.2", 426 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", 427 | "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", 428 | "hasInstallScript": true, 429 | "optional": true, 430 | "os": [ 431 | "darwin" 432 | ], 433 | "engines": { 434 | "node": "^8.16.0 || ^10.6.0 || >=11.0.0" 435 | } 436 | }, 437 | "node_modules/function-bind": { 438 | "version": "1.1.1", 439 | "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", 440 | "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" 441 | }, 442 | "node_modules/has": { 443 | "version": "1.0.3", 444 | "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", 445 | "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", 446 | "dependencies": { 447 | "function-bind": "^1.1.1" 448 | }, 449 | "engines": { 450 | "node": ">= 0.4.0" 451 | } 452 | }, 453 | "node_modules/is-core-module": { 454 | "version": "2.12.0", 455 | "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.0.tgz", 456 | "integrity": "sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==", 457 | "dependencies": { 458 | "has": "^1.0.3" 459 | }, 460 | "funding": { 461 | "url": "https://github.com/sponsors/ljharb" 462 | } 463 | }, 464 | "node_modules/nanoid": { 465 | "version": "3.3.6", 466 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", 467 | "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", 468 | "funding": [ 469 | { 470 | "type": "github", 471 | "url": "https://github.com/sponsors/ai" 472 | } 473 | ], 474 | "bin": { 475 | "nanoid": "bin/nanoid.cjs" 476 | }, 477 | "engines": { 478 | "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" 479 | } 480 | }, 481 | "node_modules/path-parse": { 482 | "version": "1.0.7", 483 | "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", 484 | "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" 485 | }, 486 | "node_modules/picocolors": { 487 | "version": "1.0.0", 488 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", 489 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" 490 | }, 491 | "node_modules/postcss": { 492 | "version": "8.4.23", 493 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz", 494 | "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==", 495 | "funding": [ 496 | { 497 | "type": "opencollective", 498 | "url": "https://opencollective.com/postcss/" 499 | }, 500 | { 501 | "type": "tidelift", 502 | "url": "https://tidelift.com/funding/github/npm/postcss" 503 | }, 504 | { 505 | "type": "github", 506 | "url": "https://github.com/sponsors/ai" 507 | } 508 | ], 509 | "dependencies": { 510 | "nanoid": "^3.3.6", 511 | "picocolors": "^1.0.0", 512 | "source-map-js": "^1.0.2" 513 | }, 514 | "engines": { 515 | "node": "^10 || ^12 || >=14" 516 | } 517 | }, 518 | "node_modules/postcss-nesting": { 519 | "version": "11.2.2", 520 | "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.2.2.tgz", 521 | "integrity": "sha512-aOTiUniAB1bcPE6GGiynWRa6PZFPhOTAm5q3q5cem6QeSijIHHkWr6gs65ukCZMXeak8yXeZVbBJET3VM+HlhA==", 522 | "dependencies": { 523 | "@csstools/selector-specificity": "^2.0.0", 524 | "postcss-selector-parser": "^6.0.10" 525 | }, 526 | "engines": { 527 | "node": "^14 || ^16 || >=18" 528 | }, 529 | "funding": { 530 | "type": "opencollective", 531 | "url": "https://opencollective.com/csstools" 532 | }, 533 | "peerDependencies": { 534 | "postcss": "^8.4" 535 | } 536 | }, 537 | "node_modules/postcss-selector-parser": { 538 | "version": "6.0.11", 539 | "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz", 540 | "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==", 541 | "dependencies": { 542 | "cssesc": "^3.0.0", 543 | "util-deprecate": "^1.0.2" 544 | }, 545 | "engines": { 546 | "node": ">=4" 547 | } 548 | }, 549 | "node_modules/resolve": { 550 | "version": "1.22.2", 551 | "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", 552 | "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==", 553 | "dependencies": { 554 | "is-core-module": "^2.11.0", 555 | "path-parse": "^1.0.7", 556 | "supports-preserve-symlinks-flag": "^1.0.0" 557 | }, 558 | "bin": { 559 | "resolve": "bin/resolve" 560 | }, 561 | "funding": { 562 | "url": "https://github.com/sponsors/ljharb" 563 | } 564 | }, 565 | "node_modules/rollup": { 566 | "version": "2.79.1", 567 | "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", 568 | "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", 569 | "bin": { 570 | "rollup": "dist/bin/rollup" 571 | }, 572 | "engines": { 573 | "node": ">=10.0.0" 574 | }, 575 | "optionalDependencies": { 576 | "fsevents": "~2.3.2" 577 | } 578 | }, 579 | "node_modules/source-map-js": { 580 | "version": "1.0.2", 581 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", 582 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", 583 | "engines": { 584 | "node": ">=0.10.0" 585 | } 586 | }, 587 | "node_modules/supports-preserve-symlinks-flag": { 588 | "version": "1.0.0", 589 | "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", 590 | "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", 591 | "engines": { 592 | "node": ">= 0.4" 593 | }, 594 | "funding": { 595 | "url": "https://github.com/sponsors/ljharb" 596 | } 597 | }, 598 | "node_modules/three": { 599 | "version": "0.151.3", 600 | "resolved": "https://registry.npmjs.org/three/-/three-0.151.3.tgz", 601 | "integrity": "sha512-+vbuqxFy8kzLeO5MgpBHUvP/EAiecaDwDuOPPDe6SbrZr96kccF0ktLngXc7xA7bzyd3N0t2f6mw3Z9y6JCojQ==" 602 | }, 603 | "node_modules/three.js": { 604 | "version": "0.77.1", 605 | "resolved": "https://registry.npmjs.org/three.js/-/three.js-0.77.1.tgz", 606 | "integrity": "sha512-lVMYlBXhhHlZtsF+cQdev6WCm2fSWs3I+A6Z63j6TBmkVXOYgdo9AUCRemfsw5mllqWx23VubJ5Qt8/uWKQpJA==", 607 | "dependencies": { 608 | "three": "0.77.0" 609 | } 610 | }, 611 | "node_modules/three.js/node_modules/three": { 612 | "version": "0.77.0", 613 | "resolved": "https://registry.npmjs.org/three/-/three-0.77.0.tgz", 614 | "integrity": "sha512-YWEp8ahs2l+6fAFVbanLVQoSBwVq5jDct3nZdBSHHXb5I/w5oy/LCMAzIOAguKWclRqcjR4W1BeP5QBnftGbpA==", 615 | "engines": { 616 | "node": "*" 617 | } 618 | }, 619 | "node_modules/util-deprecate": { 620 | "version": "1.0.2", 621 | "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", 622 | "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" 623 | }, 624 | "node_modules/vanta": { 625 | "version": "0.5.24", 626 | "resolved": "https://registry.npmjs.org/vanta/-/vanta-0.5.24.tgz", 627 | "integrity": "sha512-fvieEbHy1ZS23zrcX+topzqAgA4Uct1enngOEWLFBgs9TtOf6RDFOYatH7KSVdrABzQDMCQ5myQy+nTSZZwLzg==" 628 | }, 629 | "node_modules/vite": { 630 | "version": "3.2.6", 631 | "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.6.tgz", 632 | "integrity": "sha512-nTXTxYVvaQNLoW5BQ8PNNQ3lPia57gzsQU/Khv+JvzKPku8kNZL6NMUR/qwXhMG6E+g1idqEPanomJ+VZgixEg==", 633 | "dependencies": { 634 | "esbuild": "^0.15.9", 635 | "postcss": "^8.4.18", 636 | "resolve": "^1.22.1", 637 | "rollup": "^2.79.1" 638 | }, 639 | "bin": { 640 | "vite": "bin/vite.js" 641 | }, 642 | "engines": { 643 | "node": "^14.18.0 || >=16.0.0" 644 | }, 645 | "optionalDependencies": { 646 | "fsevents": "~2.3.2" 647 | }, 648 | "peerDependencies": { 649 | "@types/node": ">= 14", 650 | "less": "*", 651 | "sass": "*", 652 | "stylus": "*", 653 | "sugarss": "*", 654 | "terser": "^5.4.0" 655 | }, 656 | "peerDependenciesMeta": { 657 | "@types/node": { 658 | "optional": true 659 | }, 660 | "less": { 661 | "optional": true 662 | }, 663 | "sass": { 664 | "optional": true 665 | }, 666 | "stylus": { 667 | "optional": true 668 | }, 669 | "sugarss": { 670 | "optional": true 671 | }, 672 | "terser": { 673 | "optional": true 674 | } 675 | } 676 | } 677 | } 678 | } 679 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "syntax-live", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "slides.js", 6 | "directories": { 7 | "example": "examples" 8 | }, 9 | "scripts": { 10 | "start": "vite . --port 6969", 11 | "build": "vite build --out-dir docs --base=/next-gen-server-js/" 12 | }, 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "date-fns": "^2.29.3", 17 | "postcss-nesting": "^11.2.2", 18 | "three": "^0.151.3", 19 | "three.js": "^0.77.1", 20 | "vanta": "^0.5.24", 21 | "vite": "^3.1.8" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require("postcss-nesting")], 3 | }; 4 | -------------------------------------------------------------------------------- /prism.css: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.15.0 2 | https://prismjs.com/download.html#themes=prism-funky&languages=markup+css+clike+javascript+css-extras */ 3 | /** 4 | * prism.js Funky theme 5 | * Based on “Polyfilling the gaps” talk slides http://lea.verou.me/polyfilling-the-gaps/ 6 | * @author Lea Verou 7 | */ 8 | 9 | code[class*="language-"], 10 | pre[class*="language-"] { 11 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 12 | text-align: left; 13 | white-space: pre; 14 | word-spacing: normal; 15 | word-break: normal; 16 | word-wrap: normal; 17 | line-height: 1.5; 18 | 19 | -moz-tab-size: 4; 20 | -o-tab-size: 4; 21 | tab-size: 4; 22 | 23 | -webkit-hyphens: none; 24 | -moz-hyphens: none; 25 | -ms-hyphens: none; 26 | hyphens: none; 27 | } 28 | 29 | /* Code blocks */ 30 | pre[class*="language-"] { 31 | padding: .4em .8em; 32 | margin: .5em 0; 33 | overflow: auto; 34 | background: url('data:image/svg+xml;charset=utf-8,%0D%0A%0D%0A%0D%0A<%2Fsvg>'); 35 | background-size: 1em 1em; 36 | } 37 | 38 | code[class*="language-"] { 39 | background: black; 40 | color: white; 41 | box-shadow: -.3em 0 0 .3em black, .3em 0 0 .3em black; 42 | } 43 | 44 | /* Inline code */ 45 | :not(pre) > code[class*="language-"] { 46 | padding: .2em; 47 | border-radius: .3em; 48 | box-shadow: none; 49 | white-space: normal; 50 | } 51 | 52 | .token.comment, 53 | .token.prolog, 54 | .token.doctype, 55 | .token.cdata { 56 | color: #aaa; 57 | } 58 | 59 | .token.punctuation { 60 | color: #999; 61 | } 62 | 63 | .namespace { 64 | opacity: .7; 65 | } 66 | 67 | .token.property, 68 | .token.tag, 69 | .token.boolean, 70 | .token.number, 71 | .token.constant, 72 | .token.symbol { 73 | color: #0cf; 74 | } 75 | 76 | .token.selector, 77 | .token.attr-name, 78 | .token.string, 79 | .token.char, 80 | .token.builtin { 81 | color: yellow; 82 | } 83 | 84 | .token.operator, 85 | .token.entity, 86 | .token.url, 87 | .language-css .token.string, 88 | .toke.variable, 89 | .token.inserted { 90 | color: yellowgreen; 91 | } 92 | 93 | .token.atrule, 94 | .token.attr-value, 95 | .token.keyword { 96 | color: deeppink; 97 | } 98 | 99 | .token.regex, 100 | .token.important { 101 | color: orange; 102 | } 103 | 104 | .token.important, 105 | .token.bold { 106 | font-weight: bold; 107 | } 108 | .token.italic { 109 | font-style: italic; 110 | } 111 | 112 | .token.entity { 113 | cursor: help; 114 | } 115 | 116 | .token.deleted { 117 | color: red; 118 | } 119 | 120 | -------------------------------------------------------------------------------- /prism.js: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.15.0 2 | https://prismjs.com/download.html#themes=prism-funky&languages=markup+css+clike+javascript+css-extras */ 3 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-([\w-]+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof r?new r(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof s)){if(m&&b!=t.length-1){h.lastIndex=k;var _=h.exec(e);if(!_)break;for(var j=_.index+(d?_[1].length:0),P=_.index+_[0].length,A=b,x=k,O=t.length;O>A&&(P>x||!t[A].type&&!t[A-1].greedy);++A)x+=t[A].length,j>=x&&(++b,k=x);if(t[b]instanceof s)continue;I=A-b,w=e.slice(k,x),_.index-=k}else{h.lastIndex=0;var _=h.exec(w),I=1}if(_){d&&(p=_[1]?_[1].length:0);var j=_.index+p,_=_[0].slice(p),P=j+_.length,N=w.slice(0,j),S=w.slice(P),C=[b,I];N&&(++b,k+=N.length,C.push(N));var E=new s(u,f?n.tokenize(_,f):_,y,_,m);if(C.push(E),S&&C.push(S),Array.prototype.splice.apply(t,C),1!=I&&n.matchGrammar(e,t,r,b,k,!0,u),i)break}else if(i)break}}}}},tokenize:function(e,t){var r=[e],a=t.rest;if(a){for(var l in a)t[l]=a[l];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var r=n.hooks.all;r[e]=r[e]||[],r[e].push(t)},run:function(e,t){var r=n.hooks.all[e];if(r&&r.length)for(var a,l=0;a=r[l++];)a(t)}}},r=n.Token=function(e,t,n,r,a){this.type=e,this.content=t,this.alias=n,this.length=0|(r||"").length,this.greedy=!!a};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return r.stringify(n,t,e)}).join("");var l={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o=Object.keys(l.attributes).map(function(e){return e+'="'+(l.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+l.tag+' class="'+l.classes.join(" ")+'"'+(o?" "+o:"")+">"+l.content+""},!_self.document)return _self.addEventListener?(n.disableWorkerMessageHandler||_self.addEventListener("message",function(e){var t=JSON.parse(e.data),r=t.language,a=t.code,l=t.immediateClose;_self.postMessage(n.highlight(a,n.languages[r],r)),l&&_self.close()},!1),_self.Prism):_self.Prism;var a=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return a&&(n.filename=a.src,n.manual||a.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); 4 | Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; 5 | Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.languages.css,Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css",greedy:!0}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)); 6 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(?:true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/}; 7 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,"function":/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})\]]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"},constant:/\b[A-Z][A-Z\d_]*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\${[^}]+}/,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}}}),Prism.languages.javascript["template-string"].inside.interpolation.inside.rest=Prism.languages.javascript,Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript",greedy:!0}}),Prism.languages.js=Prism.languages.javascript; 8 | Prism.languages.css.selector={pattern:/[^{}\s][^{}]*(?=\s*\{)/,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+(?:\(.*\))?/,"class":/\.[-:.\w]+/,id:/#[-:.\w]+/,attribute:/\[[^\]]+\]/}},Prism.languages.insertBefore("css","function",{hexcode:/#[\da-f]{3,8}/i,entity:/\\[\da-f]{1,8}/i,number:/[\d%.]+/}); 9 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Next Gen Server JS 2 | 3 | A talk. Use your arrow keys 4 | 5 | 6 | -------------------------------------------------------------------------------- /slides.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tasty TypeScript 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 |

Tasty
TypeScript!

16 |

It's pretty good!

17 |
18 | 19 |
20 |

Hi, I'm
Wes Bos

21 |

Hamilton, On 🇨🇦

22 |

@wesbos Tweet, tok and gram

23 |
24 |
25 |

Trice Weekly!

26 |
27 | 28 |
29 | 32 |
33 | 34 |
35 |
36 |

What is TypeScript?

37 |

TypeScript is JavaScript with a Type system added on top.

38 | 39 |

It's not really a new language, it's just JavaScript plus some descriptions about what your data looks like. 40 |

41 | 42 |

They really should have called it DescriptiveJavaScript!

43 |
44 |
45 | 46 |
47 |

First, What are Types?

48 |
49 | 50 |
51 |

Types describe the type of data in your application.

52 |
53 |

Wes, you just used the word to describe the word.

54 |
55 |
56 | 57 |
58 | 59 |
60 |

An array of strings, not really that complex 😆

61 |
62 | 63 |
64 | 65 |
66 | 67 |
68 | 69 |
70 | 71 |
72 | 73 |
74 |

But why?
What good is this extra typing?

75 |
76 | 77 |
78 |

TypeScript
Benefits

79 |
80 | 81 |
82 |

TypeScript has two main benefits:

83 | 84 |
    85 |
  1. code authoring experience
    (more fun!)
    2. 86 |
  2. More resiliant codebase(less bugs!)
    3. 87 |
88 | 89 |

Let's break these down into some real world examples

90 |
91 | 92 |
93 |

Benefit #1

94 |

Amazing Autocomplete & Developer Productivity

95 |
96 | 97 |
98 |
99 |
100 | 101 |
102 |

Benefit #2

103 |

Error Detection

104 |
105 | 106 |
107 |
108 |
109 | 110 | 111 |
112 |

Benefit #3

113 |

Library
Typing

114 |
115 |
116 |
117 | 118 |

npm i @types/react

119 |
120 | 121 |
122 | 123 |
124 |

Benefit #4

125 |

Database
Typing

126 |
127 | 128 |
129 |
130 | 131 |
132 |

Benefit #5

133 |

Refactoring
is a breeze

134 |
135 | 136 |
137 | 138 |
139 |
140 | 141 | 142 |
143 |

Benefit #6

144 |

Edge case detection

145 |
146 |
147 |
148 | 149 |
150 |

Some important Concepts in TS

151 |
152 | 153 |
154 |

any vs unknown

155 |
156 | 157 |
158 |
159 |
160 |
161 |
162 | 163 |
164 |

Implicit vs Explict

165 |

Kind of important to know

166 |
167 | 168 |
169 |

Lots of things in TypeScript don't need to be typed.

170 |

They can be implied.

171 |
172 | 173 |
174 |
175 | 176 |
177 |
    178 |
  • Implicit is OK for private and local variables.
    • 179 |
  • It's good to let things be inferred when possible
    • 180 |
  • Explicit for function inputs and outputs
    • 181 |
  • Explicit for anything exported or public
    • 182 |
183 |
184 | 185 |
186 |

Tooling

187 |
188 | 189 |
190 |

Type Checking
and
Compiling to JS

191 |
192 | 193 |
194 |

TSC

195 |

Type Checks ✅

196 |

Compiles to JS ✅

197 |
198 | 199 |
200 |

SWC

201 |

Type Checks ❌

202 |

Compiles to JS ✅

203 |

Rust Based

204 |

Fast as heck

205 |
206 | 207 |
208 |

esbuild

209 |

Type Checks ❌

210 |

Compiles to JS ✅

211 |

Go Based

212 |

Fast as heck

213 |
214 | 215 |
216 |

vite

217 |

uses esbuild

218 |

Does everything

219 |

dev server, live reloader, bundler, css, frameworks..

220 |
221 | 222 |
223 |

parcel

224 |

uses swc

225 |

Does everything

226 |

dev server, live reloader, bundler, css, frameworks..

227 |
228 | 229 |
230 |

What to use?

231 |

For most projects, use vite or parcel

232 |

Tooling is SO GOOD right now

233 |
234 | 235 |
236 |

serverside

237 |
238 | 239 |
240 |

Node

241 |

tsx uses esbuild

242 |

ts-node uses tsc. Also has a --swc

243 |
244 | 245 |
246 | 247 |
248 | 249 |
250 | 251 |
252 | 253 |
254 |

Do we even need TypeScript?

255 | 256 |
257 | 258 |
259 |

JSDoc

260 | 261 |
262 |
263 | 264 |
265 | 266 |
267 | 268 |
269 | 270 |
271 |

Neat, eh?

272 |

Thanks

273 |
274 | 275 | 276 |
277 | 278 | 279 | 280 | -------------------------------------------------------------------------------- /slides.js: -------------------------------------------------------------------------------- 1 | let PERMANENT_URL_PREFIX = window.location.origin + window.location.pathname; 2 | // var PERMANENT_URL_PREFIX = window.location.href.split('/index.html')[0] + '/' 3 | 4 | let SLIDE_CLASSES = ['far-past', 'past', 'current', 'next', 'far-next']; 5 | 6 | let PM_TOUCH_SENSITIVITY = 15; 7 | 8 | let curSlide; 9 | let slideEls; 10 | 11 | /* ---------------------------------------------------------------------- */ 12 | /* classList polyfill by Eli Grey 13 | * (http://purl.eligrey.com/github/classList.js/blob/master/classList.js) */ 14 | 15 | if (typeof document !== 'undefined' && !('classList' in document.createElement('a'))) { 16 | 17 | (function(view) { 18 | let classListProp = 'classList', 19 | protoProp = 'prototype', 20 | elemCtrProto = (view.HTMLElement || view.Element)[protoProp], 21 | objCtr = Object; 22 | (strTrim = 23 | String[protoProp].trim || 24 | function() { 25 | return this.replace(/^\s+|\s+$/g, ''); 26 | }), 27 | (arrIndexOf = 28 | Array[protoProp].indexOf || 29 | function(item) { 30 | for (let i = 0, len = this.length; i < len; i++) { 31 | if (i in this && this[i] === item) { 32 | return i; 33 | } 34 | } 35 | return -1; 36 | }), 37 | // Vendors: please allow content code to instantiate DOMExceptions 38 | (DOMEx = function(type, message) { 39 | this.name = type; 40 | this.code = DOMException[type]; 41 | this.message = message; 42 | }), 43 | (checkTokenAndGetIndex = function(classList, token) { 44 | if (token === '') { 45 | throw new DOMEx('SYNTAX_ERR', 'An invalid or illegal string was specified'); 46 | } 47 | if (/\s/.test(token)) { 48 | throw new DOMEx('INVALID_CHARACTER_ERR', 'String contains an invalid character'); 49 | } 50 | return arrIndexOf.call(classList, token); 51 | }), 52 | (ClassList = function(elem) { 53 | let trimmedClasses = strTrim.call(elem.className), 54 | classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []; 55 | for (let i = 0, len = classes.length; i < len; i++) { 56 | this.push(classes[i]); 57 | } 58 | this._updateClassName = function() { 59 | elem.className = this.toString(); 60 | }; 61 | }), 62 | (classListProto = ClassList[protoProp] = []), 63 | (classListGetter = function() { 64 | return new ClassList(this); 65 | }); 66 | // Most DOMException implementations don't allow calling DOMException's toString() 67 | // on non-DOMExceptions. Error's toString() is sufficient here. 68 | DOMEx[protoProp] = Error[protoProp]; 69 | classListProto.item = function(i) { 70 | return this[i] || null; 71 | }; 72 | classListProto.contains = function(token) { 73 | token += ''; 74 | return checkTokenAndGetIndex(this, token) !== -1; 75 | }; 76 | classListProto.add = function(token) { 77 | token += ''; 78 | if (checkTokenAndGetIndex(this, token) === -1) { 79 | this.push(token); 80 | this._updateClassName(); 81 | } 82 | }; 83 | classListProto.remove = function(token) { 84 | token += ''; 85 | let index = checkTokenAndGetIndex(this, token); 86 | if (index !== -1) { 87 | this.splice(index, 1); 88 | this._updateClassName(); 89 | } 90 | }; 91 | classListProto.toggle = function(token) { 92 | token += ''; 93 | if (checkTokenAndGetIndex(this, token) === -1) { 94 | this.add(token); 95 | } else { 96 | this.remove(token); 97 | } 98 | }; 99 | classListProto.toString = function() { 100 | return this.join(' '); 101 | }; 102 | 103 | if (objCtr.defineProperty) { 104 | let classListPropDesc = { 105 | get: classListGetter, 106 | enumerable: true, 107 | configurable: true, 108 | }; 109 | try { 110 | objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); 111 | } catch (ex) { 112 | // IE 8 doesn't support enumerable:true 113 | if (ex.number === -0x7ff5ec54) { 114 | classListPropDesc.enumerable = false; 115 | objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); 116 | } 117 | } 118 | } else if (objCtr[protoProp].__defineGetter__) { 119 | elemCtrProto.__defineGetter__(classListProp, classListGetter); 120 | } 121 | })(self); 122 | } 123 | /* ---------------------------------------------------------------------- */ 124 | 125 | /* Slide movement */ 126 | 127 | function getSlideEl(no) { 128 | if ((no < 0) || (no >= slideEls.length)) { 129 | return null; 130 | } 131 | return slideEls[no]; 132 | 133 | } 134 | 135 | function updateSlideClass(slideNo, className) { 136 | let el = getSlideEl(slideNo); 137 | 138 | if (!el) { 139 | return; 140 | } 141 | 142 | if (className) { 143 | el.classList.add(className); 144 | } 145 | 146 | for (let i in SLIDE_CLASSES) { 147 | if (className != SLIDE_CLASSES[i]) { 148 | el.classList.remove(SLIDE_CLASSES[i]); 149 | } 150 | } 151 | } 152 | 153 | function updateSlides() { 154 | for (let i = 0; i < slideEls.length; i++) { 155 | switch (i) { 156 | case curSlide - 2: 157 | updateSlideClass(i, 'far-past'); 158 | break; 159 | case curSlide - 1: 160 | updateSlideClass(i, 'past'); 161 | break; 162 | case curSlide: 163 | updateSlideClass(i, 'current'); 164 | break; 165 | case curSlide + 1: 166 | updateSlideClass(i, 'next'); 167 | break; 168 | case curSlide + 2: 169 | updateSlideClass(i, 'far-next'); 170 | break; 171 | default: 172 | updateSlideClass(i); 173 | break; 174 | } 175 | } 176 | 177 | triggerLeaveEvent(curSlide - 1); 178 | triggerEnterEvent(curSlide); 179 | 180 | window.setTimeout(() => { 181 | // Hide after the slide 182 | disableSlideFrames(curSlide - 2); 183 | }, 301); 184 | 185 | enableSlideFrames(curSlide - 1); 186 | enableSlideFrames(curSlide + 2); 187 | 188 | if (isChromeVoxActive()) { 189 | speakAndSyncToNode(slideEls[curSlide]); 190 | } 191 | 192 | updateHash(); 193 | } 194 | 195 | function buildNextItem() { 196 | let toBuild = slideEls[curSlide].querySelectorAll('.to-build'); 197 | 198 | if (!toBuild.length) { 199 | return false; 200 | } 201 | 202 | toBuild[0].classList.remove('to-build'); 203 | 204 | if (isChromeVoxActive()) { 205 | speakAndSyncToNode(toBuild[0]); 206 | } 207 | 208 | return true; 209 | } 210 | 211 | function prevSlide() { 212 | if (curSlide > 0) { 213 | curSlide--; 214 | updateSlides(); 215 | } 216 | } 217 | 218 | function nextSlide() { 219 | if (buildNextItem()) { 220 | return; 221 | } 222 | 223 | if (curSlide < slideEls.length - 1) { 224 | curSlide++; 225 | updateSlides(); 226 | } 227 | } 228 | 229 | function triggerEnterEvent(no) { 230 | let el = getSlideEl(no); 231 | if (!el) { 232 | return; 233 | } 234 | 235 | let onEnter = el.getAttribute('onslideenter'); 236 | if (onEnter) { 237 | new Function(onEnter).call(el); 238 | } 239 | 240 | let evt = document.createEvent('Event'); 241 | evt.initEvent('slideenter', true, true); 242 | evt.slideNumber = no + 1; // Make it readable 243 | 244 | el.dispatchEvent(evt); 245 | } 246 | 247 | function triggerLeaveEvent(no) { 248 | let el = getSlideEl(no); 249 | if (!el) { 250 | return; 251 | } 252 | 253 | let onLeave = el.getAttribute('onslideleave'); 254 | if (onLeave) { 255 | new Function(onLeave).call(el); 256 | } 257 | 258 | let evt = document.createEvent('Event'); 259 | evt.initEvent('slideleave', true, true); 260 | evt.slideNumber = no + 1; // Make it readable 261 | 262 | el.dispatchEvent(evt); 263 | } 264 | 265 | /* Touch events */ 266 | 267 | function handleTouchStart(event) { 268 | if (event.touches.length == 1) { 269 | touchDX = 0; 270 | touchDY = 0; 271 | 272 | touchStartX = event.touches[0].pageX; 273 | touchStartY = event.touches[0].pageY; 274 | 275 | document.body.addEventListener('touchmove', handleTouchMove, true); 276 | document.body.addEventListener('touchend', handleTouchEnd, true); 277 | } 278 | } 279 | 280 | function handleTouchMove(event) { 281 | if (event.touches.length > 1) { 282 | cancelTouch(); 283 | } else { 284 | touchDX = event.touches[0].pageX - touchStartX; 285 | touchDY = event.touches[0].pageY - touchStartY; 286 | } 287 | } 288 | 289 | function handleTouchEnd(event) { 290 | let dx = Math.abs(touchDX); 291 | let dy = Math.abs(touchDY); 292 | 293 | if (dx > PM_TOUCH_SENSITIVITY && dy < dx * 2 / 3) { 294 | if (touchDX > 0) { 295 | prevSlide(); 296 | } else { 297 | nextSlide(); 298 | } 299 | } 300 | 301 | cancelTouch(); 302 | } 303 | 304 | function cancelTouch() { 305 | document.body.removeEventListener('touchmove', handleTouchMove, true); 306 | document.body.removeEventListener('touchend', handleTouchEnd, true); 307 | } 308 | 309 | /* Preloading frames */ 310 | 311 | function disableSlideFrames(no) { 312 | let el = getSlideEl(no); 313 | if (!el) { 314 | return; 315 | } 316 | 317 | let frames = el.getElementsByTagName('iframe'); 318 | for (var i = 0, frame; (frame = frames[i]); i++) { 319 | disableFrame(frame); 320 | } 321 | } 322 | 323 | function enableSlideFrames(no) { 324 | let el = getSlideEl(no); 325 | if (!el) { 326 | return; 327 | } 328 | 329 | let frames = el.getElementsByTagName('iframe'); 330 | for (var i = 0, frame; (frame = frames[i]); i++) { 331 | enableFrame(frame); 332 | } 333 | } 334 | 335 | function disableFrame(frame) { 336 | frame.src = 'about:blank'; 337 | } 338 | 339 | function enableFrame(frame) { 340 | let src = frame._src; 341 | 342 | if (frame.src != src && src != 'about:blank') { 343 | frame.src = src; 344 | } 345 | } 346 | 347 | function setupFrames() { 348 | let frames = document.querySelectorAll('iframe'); 349 | for (var i = 0, frame; (frame = frames[i]); i++) { 350 | frame._src = frame.src; 351 | disableFrame(frame); 352 | } 353 | 354 | enableSlideFrames(curSlide); 355 | enableSlideFrames(curSlide + 1); 356 | enableSlideFrames(curSlide + 2); 357 | } 358 | 359 | function setupInteraction() { 360 | /* Clicking and tapping */ 361 | 362 | var el = document.createElement('div'); 363 | el.className = 'slide-area'; 364 | el.id = 'prev-slide-area'; 365 | el.addEventListener('click', prevSlide, false); 366 | document.querySelector('section.slides').appendChild(el); 367 | 368 | var el = document.createElement('div'); 369 | el.className = 'slide-area'; 370 | el.id = 'next-slide-area'; 371 | el.addEventListener('click', nextSlide, false); 372 | document.querySelector('section.slides').appendChild(el); 373 | 374 | /* Swiping */ 375 | 376 | document.body.addEventListener('touchstart', handleTouchStart, false); 377 | } 378 | 379 | /* ChromeVox support */ 380 | 381 | function isChromeVoxActive() { 382 | if (typeof (cvox) == 'undefined') { 383 | return false; 384 | } 385 | return true; 386 | 387 | } 388 | 389 | function speakAndSyncToNode(node) { 390 | if (!isChromeVoxActive()) { 391 | return; 392 | } 393 | 394 | cvox.ChromeVox.navigationManager.switchToStrategy(cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true); 395 | cvox.ChromeVox.navigationManager.syncToNode(node); 396 | cvox.ChromeVoxUserCommands.finishNavCommand(''); 397 | let target = node; 398 | while (target.firstChild) { 399 | target = target.firstChild; 400 | } 401 | cvox.ChromeVox.navigationManager.syncToNode(target); 402 | } 403 | 404 | function speakNextItem() { 405 | if (!isChromeVoxActive()) { 406 | return; 407 | } 408 | 409 | cvox.ChromeVox.navigationManager.switchToStrategy(cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true); 410 | cvox.ChromeVox.navigationManager.next(true); 411 | if (!cvox.DomUtil.isDescendantOfNode(cvox.ChromeVox.navigationManager.getCurrentNode(), slideEls[curSlide])) { 412 | let target = slideEls[curSlide]; 413 | while (target.firstChild) { 414 | target = target.firstChild; 415 | } 416 | cvox.ChromeVox.navigationManager.syncToNode(target); 417 | cvox.ChromeVox.navigationManager.next(true); 418 | } 419 | cvox.ChromeVoxUserCommands.finishNavCommand(''); 420 | } 421 | 422 | function speakPrevItem() { 423 | if (!isChromeVoxActive()) { 424 | return; 425 | } 426 | 427 | cvox.ChromeVox.navigationManager.switchToStrategy(cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true); 428 | cvox.ChromeVox.navigationManager.previous(true); 429 | if (!cvox.DomUtil.isDescendantOfNode(cvox.ChromeVox.navigationManager.getCurrentNode(), slideEls[curSlide])) { 430 | let target = slideEls[curSlide]; 431 | while (target.lastChild) { 432 | target = target.lastChild; 433 | } 434 | cvox.ChromeVox.navigationManager.syncToNode(target); 435 | cvox.ChromeVox.navigationManager.previous(true); 436 | } 437 | cvox.ChromeVoxUserCommands.finishNavCommand(''); 438 | } 439 | 440 | /* Hash functions */ 441 | 442 | function getCurSlideFromHash() { 443 | let slideNo = parseInt(location.hash.substr(1)); 444 | 445 | if (slideNo) { 446 | curSlide = slideNo - 1; 447 | } else { 448 | curSlide = 0; 449 | } 450 | } 451 | 452 | function updateHash() { 453 | location.replace(`#${ curSlide + 1}`); 454 | } 455 | 456 | /* Event listeners */ 457 | 458 | function handleBodyKeyDown(event) { 459 | switch (event.keyCode) { 460 | case 39: // right arrow 461 | case 13: // Enter 462 | case 32: // space 463 | case 34: // PgDn 464 | nextSlide(); 465 | event.preventDefault(); 466 | break; 467 | 468 | case 37: // left arrow 469 | case 8: // Backspace 470 | case 33: // PgUp 471 | prevSlide(); 472 | event.preventDefault(); 473 | break; 474 | 475 | case 40: // down arrow 476 | if (isChromeVoxActive()) { 477 | speakNextItem(); 478 | } else { 479 | nextSlide(); 480 | } 481 | event.preventDefault(); 482 | break; 483 | 484 | case 38: // up arrow 485 | if (isChromeVoxActive()) { 486 | speakPrevItem(); 487 | } else { 488 | prevSlide(); 489 | } 490 | event.preventDefault(); 491 | break; 492 | } 493 | } 494 | 495 | function addEventListeners() { 496 | document.addEventListener('keydown', handleBodyKeyDown, false); 497 | } 498 | 499 | /* Initialization */ 500 | 501 | function addPrettify() { 502 | return; 503 | } 504 | 505 | function addFontStyle() { 506 | return; // NONONONON 507 | } 508 | 509 | function addGeneralStyle() { 510 | var el = document.createElement('link'); 511 | el.rel = 'stylesheet'; 512 | el.type = 'text/css'; 513 | el.href = `${PERMANENT_URL_PREFIX }styles.css`; 514 | document.body.appendChild(el); 515 | 516 | var el = document.createElement('meta'); 517 | el.name = 'viewport'; 518 | el.content = 'width=1100,height=750'; 519 | document.querySelector('head').appendChild(el); 520 | 521 | var el = document.createElement('meta'); 522 | el.name = 'apple-mobile-web-app-capable'; 523 | el.content = 'yes'; 524 | document.querySelector('head').appendChild(el); 525 | } 526 | 527 | function makeBuildLists() { 528 | for (var i = curSlide, slide; (slide = slideEls[i]); i++) { 529 | let items = slide.querySelectorAll('.build > *'); 530 | for (var j = 0, item; (item = items[j]); j++) { 531 | if (item.classList) { 532 | item.classList.add('to-build'); 533 | } 534 | } 535 | } 536 | } 537 | 538 | function handleDomLoaded() { 539 | slideEls = document.querySelectorAll('section.slides > article'); 540 | 541 | setupFrames(); 542 | 543 | addFontStyle(); 544 | // addGeneralStyle(); do it myself 545 | addPrettify(); 546 | addEventListeners(); 547 | 548 | updateSlides(); 549 | 550 | setupInteraction(); 551 | makeBuildLists(); 552 | 553 | document.body.classList.add('loaded'); 554 | } 555 | 556 | function initialize() { 557 | getCurSlideFromHash(); 558 | 559 | if (window._DEBUG) { 560 | PERMANENT_URL_PREFIX = '../'; 561 | } 562 | 563 | if (window._DCL) { 564 | handleDomLoaded(); 565 | } else { 566 | document.addEventListener('DOMContentLoaded', handleDomLoaded, false); 567 | } 568 | } 569 | 570 | // If ?debug exists then load the script relative instead of absolute 571 | if (!window._DEBUG && document.location.href.indexOf('?debug') !== -1) { 572 | document.addEventListener( 573 | 'DOMContentLoaded', 574 | function() { 575 | // Avoid missing the DomContentLoaded event 576 | window['_DCL'] = true; 577 | }, 578 | false 579 | ); 580 | 581 | window._DEBUG = true; 582 | let script = document.createElement('script'); 583 | script.type = 'text/javascript'; 584 | script.src = '../slides.js'; 585 | let s = document.getElementsByTagName('script')[0]; 586 | s.parentNode.insertBefore(script, s); 587 | 588 | // Remove this script 589 | s.parentNode.removeChild(s); 590 | } else { 591 | initialize(); 592 | } 593 | -------------------------------------------------------------------------------- /ss/Screen Shot 2022-10-19 at 4.23.09 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/Screen Shot 2022-10-19 at 4.23.09 PM.png -------------------------------------------------------------------------------- /ss/add-missing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/add-missing.png -------------------------------------------------------------------------------- /ss/any1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/any1.png -------------------------------------------------------------------------------- /ss/any2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/any2.png -------------------------------------------------------------------------------- /ss/any3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/any3.png -------------------------------------------------------------------------------- /ss/any4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/any4.png -------------------------------------------------------------------------------- /ss/any5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/any5.png -------------------------------------------------------------------------------- /ss/basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/basic.png -------------------------------------------------------------------------------- /ss/bun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/bun.png -------------------------------------------------------------------------------- /ss/custom-type.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/custom-type.png -------------------------------------------------------------------------------- /ss/date-fns.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/date-fns.png -------------------------------------------------------------------------------- /ss/deno.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/deno.png -------------------------------------------------------------------------------- /ss/edge-case.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/edge-case.png -------------------------------------------------------------------------------- /ss/edge2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/edge2.png -------------------------------------------------------------------------------- /ss/export-to-constant.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/export-to-constant.mp4 -------------------------------------------------------------------------------- /ss/func-using.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/func-using.png -------------------------------------------------------------------------------- /ss/func.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/func.png -------------------------------------------------------------------------------- /ss/func2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/func2.png -------------------------------------------------------------------------------- /ss/h3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/h3.png -------------------------------------------------------------------------------- /ss/harry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/harry.png -------------------------------------------------------------------------------- /ss/hono.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/hono.png -------------------------------------------------------------------------------- /ss/im.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/im.png -------------------------------------------------------------------------------- /ss/jsdoc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/jsdoc.png -------------------------------------------------------------------------------- /ss/jsdoc2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/jsdoc2.png -------------------------------------------------------------------------------- /ss/libs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/libs.png -------------------------------------------------------------------------------- /ss/method.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/method.png -------------------------------------------------------------------------------- /ss/missing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/missing.png -------------------------------------------------------------------------------- /ss/move-to-new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/move-to-new.png -------------------------------------------------------------------------------- /ss/nitro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/nitro.png -------------------------------------------------------------------------------- /ss/npm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/npm.png -------------------------------------------------------------------------------- /ss/object-typing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/object-typing.png -------------------------------------------------------------------------------- /ss/oops.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/oops.png -------------------------------------------------------------------------------- /ss/prisma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/prisma.png -------------------------------------------------------------------------------- /ss/prisma2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/prisma2.png -------------------------------------------------------------------------------- /ss/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/react.png -------------------------------------------------------------------------------- /ss/sammy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/sammy.png -------------------------------------------------------------------------------- /ss/server-grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/server-grid.png -------------------------------------------------------------------------------- /ss/servers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/servers.png -------------------------------------------------------------------------------- /ss/solid-start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/solid-start.png -------------------------------------------------------------------------------- /ss/srvx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/srvx.png -------------------------------------------------------------------------------- /ss/streaming.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/streaming.mp4 -------------------------------------------------------------------------------- /ss/string-array.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/string-array.png -------------------------------------------------------------------------------- /ss/tanstack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/tanstack.png -------------------------------------------------------------------------------- /ss/types-as-comments.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/types-as-comments.png -------------------------------------------------------------------------------- /ss/unenv-apis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/unenv-apis.png -------------------------------------------------------------------------------- /ss/unenv-cf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/unenv-cf.png -------------------------------------------------------------------------------- /ss/unenv-deno.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/unenv-deno.png -------------------------------------------------------------------------------- /ss/unjs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/unjs.png -------------------------------------------------------------------------------- /ss/vinxi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/next-gen-server-js/d468631b2e7b776f2571182a2ffb3210f611e606/ss/vinxi.png -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import "_deps.css"; 2 | 3 | :root { 4 | --color1: #ff00fa; 5 | --color2: #0ff; 6 | --color3: #240066; 7 | --color-vanilla: #fffcee; 8 | --color-black: #191919; 9 | --i: 0.05; 10 | --noCalc: calc(var(--i) * 2); 11 | --fogColor: hsl(calc(243 + var(--i) * 255), 100%, 68%); 12 | --sickGradient: radial-gradient( 13 | farthest-corner circle at 50% 115% in oklch, 14 | oklch(80% 0.3 34) 0%, 15 | oklch(90% 0.3 200) 100% 16 | ); 17 | --coolGradient: linear-gradient( 18 | 115deg, 19 | var(--color1) 11% 11%, 20 | var(--color2) 101% 101%, 21 | var(--color3) 100% 22 | ); 23 | --gradColor1: hsl(50, 100%, 68%); 24 | --gradColor2: hsl(200, 100%, 68%); 25 | /* --rainbow: linear-gradient(to right in hsl longer hue, red 0% 100%); */ 26 | --startColor: hsl(0, 100%, 66%); 27 | --rainbow: linear-gradient( 28 | to right in hsl longer hue, 29 | var(--startColor) 0% 100% 30 | ); 31 | --gradient: linear-gradient( 32 | 125deg, 33 | var(--gradColor1) 0%, 34 | var(--gradColor2) 100% 35 | ); 36 | --yellow: #ffc600; 37 | } 38 | 39 | mark { 40 | background: var(--yellow); 41 | } 42 | 43 | body { 44 | color: var(--color-black); 45 | background-image: var(--image); 46 | background-color: var(--color-vanilla); 47 | background-position: center; 48 | background-repeat: no-repeat; 49 | font-family: "Ika VAR"; 50 | overflow: hidden; 51 | } 52 | 53 | body.firefox { 54 | background-image: none; 55 | } 56 | 57 | @font-face { 58 | src: url("./fonts/Ika_Compact_VAR.woff2") format("woff2-variations"); 59 | font-family: "Ika Compact VAR"; 60 | font-style: normal; 61 | } 62 | 63 | @font-face { 64 | src: url("./fonts/Ika_VAR.woff2") format("woff2-variations"); 65 | font-family: "Ika VAR"; 66 | font-style: normal; 67 | } 68 | 69 | @font-face { 70 | src: url("./fonts/Ika_VAR_Italic.woff2") format("woff2-variations"); 71 | font-family: "Ika VAR"; 72 | font-style: italic; 73 | } 74 | 75 | .slides { 76 | & > article { 77 | background: #fffceef0; 78 | border: 0; 79 | /* border-radius: 50px; */ 80 | border: 5px solid var(--color-black); 81 | } 82 | } 83 | 84 | #trunk { 85 | width: 100vw; 86 | height: 100vh; 87 | position: absolute; 88 | z-index: 1; 89 | display: none; 90 | } 91 | 92 | /* Text */ 93 | 94 | h1, 95 | h2, 96 | h3, 97 | h4, 98 | h5, 99 | h6 { 100 | font-weight: 900; 101 | letter-spacing: -0.02em; 102 | line-height: 1; 103 | font-stretch: condensed; 104 | color: var(--color-black); 105 | -webkit-background-clip: text; 106 | color: transparent; 107 | position: relative; 108 | z-index: 2; 109 | background-image: var(--image); 110 | background-color: var(--color-black); 111 | /* background-blend-mode: difference; */ 112 | background-size: cover; 113 | background-position: center; 114 | background-attachment: fixed; 115 | } 116 | 117 | p, 118 | li { 119 | font-family: "Ika VAR"; 120 | font-weight: 700; 121 | letter-spacing: -0.05em; 122 | font-size: 50px; 123 | } 124 | 125 | p { 126 | margin: 20px 0; 127 | } 128 | 129 | h1 { 130 | font-size: 250px; 131 | } 132 | h2 { 133 | font-size: 200px; 134 | } 135 | h3 { 136 | font-size: 150px; 137 | } 138 | h4 { 139 | font-size: 70px; 140 | } 141 | 142 | img.fit { 143 | width: 100%; 144 | height: 100%; 145 | object-fit: contain; 146 | max-height: none; 147 | } 148 | 149 | img.wide { 150 | width: 100%; 151 | height: auto; 152 | } 153 | 154 | .slides > article.current.grid, 155 | .grid { 156 | display: grid; 157 | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 158 | gap: 50px !important; 159 | place-items: center; 160 | width: 100%; 161 | justify-content: center; 162 | & img { 163 | max-width: 200px; 164 | } 165 | & h1, 166 | & h2 { 167 | grid-column: 1 / -1; 168 | height: 100%; 169 | } 170 | & > *:not(style) { 171 | display: initial; 172 | } 173 | } 174 | 175 | /* 176 |
177 | 178 |
179 | */ 180 | article:has(> img:only-child) { 181 | padding: 0; 182 | & img { 183 | width: 100%; 184 | height: 100%; 185 | max-height: none; 186 | object-fit: contain; 187 | } 188 | } 189 | 190 | /* 191 |
192 |

193 | 194 |
195 | */ 196 | article:has(h2 + img):not(:has(:nth-child(3))) { 197 | gap: 50px; 198 | } 199 | 200 | /* 201 | Selects Slide Layouts that look like this: 202 |
203 | 204 |
205 | */ 206 | article:has(> :is(h1, h2, h3, h4, h4, h5, h6):only-child) { 207 | padding: 5rem; 208 | } 209 | 210 | .columns { 211 | display: flex; 212 | align-items: center; 213 | gap: 100px; 214 | } 215 | 216 | .balance { 217 | text-wrap: balance; 218 | } 219 | -------------------------------------------------------------------------------- /vanta/trunk.js: -------------------------------------------------------------------------------- 1 | // Original effect by Kjetil Midtgarden Golid 2 | // https://github.com/kgolid/p5ycho/blob/master/trunk/sketch.js 3 | 4 | import P5Base, { VANTA } from "../node_modules/vanta/src/_p5Base.js"; 5 | import { color2Hex, mobileCheck } from "../node_modules/vanta/src/helpers.js"; 6 | 7 | let p5 = typeof window == "object" && window.p5; 8 | 9 | class Effect extends P5Base { 10 | static initClass() { 11 | this.prototype.p5 = true; 12 | this.prototype.defaultOptions = { 13 | color: 0x98465f, 14 | backgroundColor: 0x222426, 15 | spacing: 0, 16 | chaos: 1, 17 | // speed: 1, 18 | }; 19 | } 20 | constructor(userOptions) { 21 | p5 = userOptions.p5 || p5; 22 | super(userOptions); 23 | } 24 | onInit() { 25 | const t = this; 26 | let sketch = function (p) { 27 | // let rings = mobileCheck() ? 35 : 55; 28 | let rings = 20; 29 | let dim_init = 0; // how big the first ring is 30 | let dim_delta = 3; // how much each ring grows 31 | 32 | let chaos_init = 0.2; 33 | let chaos_delta = 0.12; 34 | let chaos_mag = 20; 35 | 36 | let ox = p.random(10000); 37 | let oy = p.random(10000); 38 | let oz = p.random(10000); 39 | 40 | p.setup = function () { 41 | t.initP5(p); // sets bg too 42 | p.strokeWeight(1); 43 | p.stroke(color2Hex(t.options.color)); 44 | p.smooth(); 45 | p.noFill(); 46 | // p.noLoop() 47 | }; 48 | 49 | p.draw = function () { 50 | p.clear(); 51 | p.translate(p.width / 2, p.height / 2); 52 | display(); 53 | }; 54 | 55 | function display() { 56 | //ox+=0.04 57 | oy -= 0.02; 58 | oz += 0.00005; 59 | for (let i = 0; i < rings; i++) { 60 | p.beginShape(); 61 | for (let angle = 0; angle < 360; angle++) { 62 | let radian = p.radians(angle); 63 | let radius = 64 | t.options.chaos * 65 | chaos_mag * 66 | getNoiseWithTime(radian, chaos_delta * i + chaos_init, oz) + 67 | (dim_delta * i + dim_init) + 68 | (i * t.options.spacing || 0); 69 | p.vertex(radius * p.cos(radian), radius * p.sin(radian)); 70 | } 71 | p.endShape(p.CLOSE); 72 | } 73 | } 74 | 75 | // function getNoise (radian, dim){ 76 | // let r = radian % p.TWO_PI; 77 | // if(r < 0.0){r += p.TWO_PI;} 78 | // return p.noise(ox + p.cos(r) * dim, oy + p.sin(r) * dim); 79 | // } 80 | 81 | function getNoiseWithTime(radian, dim, time) { 82 | let r = radian % p.TWO_PI; 83 | if (r < 0.0) { 84 | r += p.TWO_PI; 85 | } 86 | return p.noise(ox + p.cos(r) * dim, oy + p.sin(r) * dim, oz + time); 87 | } 88 | }; 89 | this.p5 = new p5(sketch); 90 | } 91 | } 92 | Effect.initClass(); 93 | export default VANTA.register("TRUNK", Effect); 94 | -------------------------------------------------------------------------------- /waves/SiteTracking-ERC2K4FD.js: -------------------------------------------------------------------------------- 1 | // import{c as a}from"./chunk-JHVW6NMQ.js";import{a as i}from"./chunk-6UBWOGX3.js";import"./chunk-FSZRLV7Q.js";var n=class{constructor(){this.messageBuffer=[];this.mode="buffering";window.addEventListener("message",({data:e})=>{e.type===a.SANDBOX_INITIALIZED&&this.handleSandboxInitialization()}),this.checkSandboxInitialization()}setExperimentTreatment(e){this.sendMessage({type:a.SET_EXPERIMENT_TREATMENT,payload:e})}trackPage(e){this.sendMessage({type:a.TRACK_PAGE,payload:e})}trackEvent(e){e.url||(e.url=location.pathname+location.search),this.sendMessage({type:a.TRACK_EVENT,payload:e})}handleSandboxInitialization(){let e=this.getIframeElement();e?(this.sandboxWindow=e.contentWindow,this.mode="passthrough",this.flushBuffer()):i.error("Could not attach tracking properly")}sendMessage(e){this.sandboxWindow&&this.mode==="passthrough"?this.sandboxWindow.postMessage(e,"*"):(this.messageBuffer.push(e),this.checkSandboxInitialization())}checkSandboxInitialization(){if(this.sandboxWindow&&this.mode==="passthrough")return;let e=this.getIframeElement();e&&e.contentWindow.postMessage({type:a.CHECK_SANDBOX_INITIALIZATION,payload:{}})}getIframeElement(){return document.querySelector("iframe.TrackingSandbox")}flushBuffer(){this.messageBuffer.forEach(e=>{this.sendMessage(e)}),this.messageBuffer=[]}};var t=new n;var p={setExperimentTreatment:t.setExperimentTreatment.bind(t),trackPage:t.trackPage.bind(t),trackEvent:t.trackEvent.bind(t)};export{p as SiteTracking}; 2 | 3 | export const SiteTracking = {} 4 | -------------------------------------------------------------------------------- /waves/chunk-6UBWOGX3.js: -------------------------------------------------------------------------------- 1 | var r=class{warn(e,...o){throw new Error("Not implmeneted!")}info(e,...o){throw new Error("Not implmeneted!")}error(e,...o){throw new Error("Not implmeneted!")}table(e,...o){throw new Error("Not implmeneted!")}};var a=class extends r{info(){}warn(){}error(){}table(){}};var L=new a;export{L as a}; 2 | -------------------------------------------------------------------------------- /waves/chunk-FSZRLV7Q.js: -------------------------------------------------------------------------------- 1 | var q=Object.create;var f=Object.defineProperty,r=Object.defineProperties,s=Object.getOwnPropertyDescriptor,t=Object.getOwnPropertyDescriptors,u=Object.getOwnPropertyNames,g=Object.getOwnPropertySymbols,v=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,x=Math.pow,m=(a,b,c)=>b in a?f(a,b,{enumerable:!0,configurable:!0,writable:!0,value:c}):a[b]=c,y=(a,b)=>{for(var c in b||(b={}))j.call(b,c)&&m(a,c,b[c]);if(g)for(var c of g(b))l.call(b,c)&&m(a,c,b[c]);return a},z=(a,b)=>r(a,t(b)),n=a=>f(a,"__esModule",{value:!0});var A=(a,b)=>{var c={};for(var d in a)j.call(a,d)&&b.indexOf(d)<0&&(c[d]=a[d]);if(a!=null&&g)for(var d of g(a))b.indexOf(d)<0&&l.call(a,d)&&(c[d]=a[d]);return c};var B=(a,b)=>()=>(b||a((b={exports:{}}).exports,b),b.exports),C=(a,b)=>{n(a);for(var c in b)f(a,c,{get:b[c],enumerable:!0})},w=(a,b,c)=>{if(b&&typeof b=="object"||typeof b=="function")for(let d of u(b))!j.call(a,d)&&d!=="default"&&f(a,d,{get:()=>b[d],enumerable:!(c=s(b,d))||c.enumerable});return a},D=a=>w(n(f(a!=null?q(v(a)):{},"default",a&&a.__esModule&&"default"in a?{get:()=>a.default,enumerable:!0}:{value:a,enumerable:!0})),a);var E=(a,b,c)=>new Promise((d,k)=>{var o=e=>{try{h(c.next(e))}catch(i){k(i)}},p=e=>{try{h(c.throw(e))}catch(i){k(i)}},h=e=>e.done?d(e.value):Promise.resolve(e.value).then(o,p);h((c=c.apply(a,b)).next())});export{x as a,y as b,z as c,A as d,B as e,C as f,D as g,E as h}; 2 | -------------------------------------------------------------------------------- /waves/chunk-XVNU34J2.js: -------------------------------------------------------------------------------- 1 | import{a as f}from"./chunk-6UBWOGX3.js";import{h as m}from"./chunk-FSZRLV7Q.js";function A(c,e){let r=new RegExp(`${e}.(\\S+)`,"g"),t=c.match(r);if(t&&t.length)return t[0].split(".")[1]}function F(c,e){let r=e.el.querySelectorAll(`[data-js-target*="${c}."]`);for(let o of r){let s=o;if(s.dataset.jsTarget){let i=s.dataset.jsTarget.split(" ").filter(a=>a.includes(`${c}.`)).map(a=>a.split(".")[1]);for(let a of i)e[a]=o}}let t,n=Array.from(e.el.querySelectorAll(`[data-js-target-list*="${c}."]`)).reduce((o,s)=>{let i=s;return t=A(i.dataset.jsTargetList,c),t&&(o[t]?o[t].push(i):o[t]=[i]),o},{});Object.keys(n).forEach(o=>{e[o]=n[o]})}function D(c){return c.sort((e,r)=>e.el===r.el?0:e.el.compareDocumentPosition(r.el)&Node.DOCUMENT_POSITION_PRECEDING?1:-1)}var u=class{static get allDependencies(){return[...this.dependencies,...this.optionalDependencies]}constructor(e){this.__childControllers=e}__initMemembers(e,r){this.el=r,this.__domId=e,F(e,this)}connect(){return m(this,null,function*(){})}disconnect(){}reconnect(){return this.disconnect(),this.__initMemembers(this.__domId,this.el),this.connect()}childController(e){if(!this.constructor.allDependencies.includes(e))throw new Error(`Cannot search for unregistered dependency ${e.name}`);for(let t of this.__childControllers)if(t instanceof e)return t}childControllers(e){if(!this.constructor.allDependencies.includes(e))throw new Error(`Cannot search for unregistered dependency ${e.name}`);let t=[];for(let n of this.__childControllers)n instanceof e&&t.push(n);return D(t)}trackEvent(e){return m(this,null,function*(){var r;e.url=(r=e.url)!=null?r:window.location.href;try{(yield import("./SiteTracking-ERC2K4FD.js")).SiteTracking.trackEvent(e)}catch(t){let n;if(e.legacy)n=`Cannot track legacy interactions for ${e.source}.`;else{let{category:o,label:s}=e;n=`Cannot track interactions for ${o}: ${s}.`}f.warn(`Failed to load Tracking. ${n}`,t)}})}};u.dependencies=[],u.optionalDependencies=[];var w=class{constructor(e){this.__instancesByControllerAndDomNode=new Map;this.__registry=e}__controllersFromString(e){var t;let r=new Set;return(t=e==null?void 0:e.split(" "))==null||t.forEach(n=>{let o=this.__registry.controllersById.get(n);o&&r.add(o)}),r}__controllersForNode(e){return this.__controllersFromString(e.dataset.jsController)}nodesForController(e,r){let n=`[data-js-controller~=${this.__registry.idForController(r)}]`,o=new Set;e.matches(n)&&o.add(e);for(let s of e.querySelectorAll(n))o.add(s);return o}instanceForNode(e,r){let t=this.__instancesByControllerAndDomNode.get(e);if(t)return t.get(r)}setNodeInstance(e,r){let t=e.constructor,n=this.__instancesByControllerAndDomNode.get(t);n||(n=new Map,this.__instancesByControllerAndDomNode.set(t,n)),n.set(r,e)}removeNodeInstance(e){let r=e.constructor,t=this.__instancesByControllerAndDomNode.get(r);t||(t=new Map,this.__instancesByControllerAndDomNode.set(r,t));for(let[n,o]of t.entries())o===e&&t.delete(n)}observeDOM(e,{onControllerNodesAdded:r,onControllerNodesRemoved:t}){let n=new MutationObserver(o=>{let s=new Set,i=new Set;for(let a of o){for(let l of a.addedNodes)if(l instanceof HTMLElement){let d=new Set(l.querySelectorAll("[data-js-controller]"));l.matches("[data-js-controller]")&&d.add(l),d.forEach(_=>{this.__controllersForNode(_).forEach(p=>{s.add([_,p])})})}for(let l of Array.from(a.removedNodes))if(l instanceof HTMLElement){let d=new Set(l.querySelectorAll("[data-js-controller]"));l.matches("[data-js-controller]")&&d.add(l),d.forEach(_=>{this.__controllersForNode(_).forEach(p=>{var C;let y=(C=this.__instancesByControllerAndDomNode.get(p))==null?void 0:C.get(_);y&&i.add(y)})})}if(a.type==="attributes"){let l=a.target;if(l instanceof HTMLElement){let d=this.__controllersForNode(l);this.__controllersFromString(a.oldValue).forEach(p=>{var y;if(!d.has(p)){let C=(y=this.__instancesByControllerAndDomNode.get(p))==null?void 0:y.get(l);C&&i.add(C)}}),d.forEach(p=>{var y;((y=this.__instancesByControllerAndDomNode.get(p))==null?void 0:y.has(l))||s.add([l,p])})}}}s.size>0&&r(s),i.size>0&&t(i)});return n.observe(e,{attributes:!0,attributeFilter:["data-js-controller"],attributeOldValue:!0,subtree:!0,childList:!0}),()=>n.disconnect()}};var g={ToRoots:"ToRoots",ToLeaves:"ToLeaves"},h=class{constructor(){this.__verticies=new Map}add(e){let r=this.__verticies.get(e);return r||(r={value:e,dependsOn:new Set,dependedOnBy:new Set},this.__verticies.set(e,r)),r}vertex(e){let r=this.__verticies.get(e);if(!r)throw new Error("Vertex not found in DAG!");return r}*walk(e,r,t=new Set,n=[]){let o=this.__verticies.get(e);if(!o||t.has(e))return;let s=r===g.ToRoots;n.push(e),t.add(e),s||(yield[o,n]);let i=s?o.dependedOnBy:o.dependsOn;for(let a of i)yield*this.walk(a,r,t,n);s&&(yield[o,n]),n.pop()}addEdge(e,r){if(e===r)return;let t=this.add(e),n=this.add(r);if(!n.dependedOnBy.has(e)){for(let[o,s]of this.walk(e,g.ToRoots))if(o.value===r)throw new Error(`Circular dependency detected: ${s.join(" -> ")}`);n.dependedOnBy.add(e),t.dependsOn.add(r)}}};var M=class{constructor(){this.__controllersById=new Map;this.__idsByController=new Map;this.__classHierarchy=new h}get controllersById(){return this.__controllersById}register(e,r){if(this.__controllersById.has(e))throw new Error(`A controller is already registered with id "${e}"`);if(this.__idsByController.has(r)){let t=this.__idsByController.get(r);if(t)throw new Error(`Attempted to register a controller under two names "${e}" and "${t}"`)}this.__classHierarchy.add(r);for(let t of this.__controllersById.values())Object.getPrototypeOf(t)===r?this.__classHierarchy.addEdge(r,t):Object.getPrototypeOf(r)===t&&this.__classHierarchy.addEdge(t,r);this.__controllersById.set(e,r),this.__idsByController.set(r,e)}withSubclasses(e){let r=new Set;for(let[t]of this.__classHierarchy.walk(e,g.ToLeaves))r.add(t.value);return r}idForController(e){let r=this.__idsByController.get(e);if(!r)throw new Error(`Cannot get id for unregistered controller ${e.name}`);return r}};var T=class{constructor(){this.__requiredDependencyGraph=new h;this.__optionalDependencyGraph=new h}register(e){this.__requiredDependencyGraph.add(e),this.__optionalDependencyGraph.add(e);for(let r of e.dependencies)this.__requiredDependencyGraph.addEdge(e,r),this.register(r);for(let r of e.optionalDependencies)this.__optionalDependencyGraph.addEdge(e,r),this.register(r)}dependencies(e){let r=this.__requiredDependencyGraph.vertex(e),t=[...r.dependsOn].map(o=>({dependency:o,required:!0})),n=[...this.__optionalDependencyGraph.vertex(e).dependsOn].filter(o=>!r.dependsOn.has(o)).map(o=>({dependency:o,required:!1}));return new Set([...t,...n])}};var S=class{constructor(e,r){this.__dependencyManager=new T;this.__connectPromises=new Map;this.__domManager=e,this.__registry=r}__initChildren(e,r){return m(this,null,function*(){let t=[];for(let{dependency:s,required:i}of this.__dependencyManager.dependencies(e)){let a=[];for(let l of this.__registry.withSubclasses(s))a.push(this.initController(l,r));t.push({required:i,dependency:s,promises:a})}let o=(yield Promise.all(t.map(({promises:s})=>Promise.all(s)))).reduce((s,i)=>[...s,new Set([...i].reduce((a,l)=>[...a,...l],[]))],[]);return o.forEach((s,i)=>{if(t[i].required&&s.size<=0)throw new Error(`Missing required child Controller "${t[i].dependency.name}" for Controller "${e.name}"`)}),new Set(o.reduce((s,i)=>[...s,...i],[]))})}initController(e,r){return m(this,null,function*(){if(!r)throw new Error("Missing node for controller!");this.__dependencyManager.register(e);let t=this.__domManager.nodesForController(r,e),n=this.__registry.idForController(e),o=new Set,s=[];for(let l of t)s.push([l,this.__initChildren(e,l)]);let i=new Map;(yield Promise.all(s.map(([,l])=>l))).forEach((l,d)=>{i.set(s[d][0],l)});let a=[];for(let l of t){let d=this.__domManager.instanceForNode(e,l);if(d){o.add(d);let _=this.__connectPromises.get(d);_&&a.push(_)}else{d=new e(i.get(l)||new Set),o.add(d),this.__domManager.setNodeInstance(d,l),d.__initMemembers(n,l);let _=d.connect();a.push(Promise.resolve().then(()=>_))}}yield Promise.all(a);for(let l of o)this.__connectPromises.delete(l);return o})}destructController(e){e.disconnect(),this.__domManager.removeNodeInstance(e)}};function v(c){return Promise.all(c.map(e=>e.then(r=>({status:"fulfilled",value:r})).catch(r=>({status:"rejected",reason:r}))))}var E=class{constructor(e){this.__registry=new M;this.__domManager=new w(this.__registry);this.__instanceManager=new S(this.__domManager,this.__registry);this.__started=!1;this.__onNodesAdded=e=>{this.__initControllers(e)};this.__onNodesRemoved=e=>{for(let r of e)this.__instanceManager.destructController(r)};this.__rootNode=e}register(e,r){return m(this,null,function*(){this.__registry.register(e,r),this.__started&&(yield this.__startController(r,this.__rootNode))})}start(){return m(this,null,function*(){this.__started=!0,this.__domManager.observeDOM(this.__rootNode,{onControllerNodesAdded:this.__onNodesAdded,onControllerNodesRemoved:this.__onNodesRemoved}),yield this.__initControllers(new Set([...this.__registry.controllersById.values()].map(e=>[this.__rootNode,e])))})}__initControllers(e){return m(this,null,function*(){let r=[];for(let[n,o]of e)r.push(this.__startController(o,n));(yield v(r)).forEach(n=>{n.status==="rejected"&&f.error(n.reason)})})}__startController(e,r){return this.__instanceManager.initController(e,r)}},G=new E(document.documentElement);export{u as a,G as b}; 2 | --------------------------------------------------------------------------------