| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width"/> | |
| </head> | |
| <body style="height: 300vh"> | |
| <svg style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);" | |
| width="655" height="209" viewBox="0 0 655 209" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M653 207V62C653 28.8629 626.228 2 593.091 2C519.318 2 391.639 2 292.675 2C270.583 2 252.717 19.9124 252.717 42.0038C252.717 63.5378 252.717 81.7221 252.717 81.7221C252.717 81.7221 252.717 81.7221 252.717 81.7221V167C252.717 189.091 234.808 207 212.717 207H2" | |
| stroke="#EAECF0" stroke-width="4" stroke-linecap="round"/> |
| import fs from "fs"; | |
| import path from "path"; | |
| import { pathToFileURL, fileURLToPath } from "url"; | |
| import { builtinModules } from "module"; | |
| import { init, parse } from "es-module-lexer"; | |
| import { moduleResolve } from "import-meta-resolve"; | |
| /** | |
| * @param {string} specifier | |
| * @returns {boolean} |
| import { z } from "zod"; | |
| import { zodToTs, printNode } from "zod-to-ts"; | |
| // Replace with your `openai` thing | |
| import { openai } from "../openai.server"; | |
| import endent from "endent"; | |
| function createJSONCompletion<T extends z.ZodType>({ | |
| prompt, | |
| schema_name, |
| export const h=(t,p,...c)=>({t,p,c,k:p&&p.key}) | |
| export const render=(e,d,t=d.t||(d.t={}),p,r,c,m,y)=> | |
| // arrays | |
| e.map?e.map((e,p)=>render(e,d,t.o&&t.o[p])): | |
| // components | |
| e.t.call?(e.i=render((render.c=e).t(Object.assign({children:e.c},e.p),e.s=t.s||{},t=> | |
| render(Object.assign(e.s,t)&&e,d,e)),t.i||d,t&&t.i||{}),d.t=t=e):( | |
| // create notes | |
| m=t.d||(e.t?document.createElement(e.t):new Text(e.p)), | |
| // diff props |
%GetOptimizationStatus return a set of bitwise flags instead of a single value,
to access the value, you need to take the binary representation of the returned value.
Now, for example, if 65 is returned, the binary representation is the following:
(65).toString(2).padStart(12, '0');
// 000001000001Each binary digit acts as a boolean with the following meaning:
| function logger(strings,...values) { | |
| var str = ""; | |
| for (let i = 0; i < strings.length; i++) { | |
| if (i > 0) { | |
| if (values[i-1] && typeof values[i-1] == "object") { | |
| if (values[i-1] instanceof Error) { | |
| if (values[i-1].stack) { | |
| str += values[i-1].stack; | |
| continue; | |
| } |
| /** | |
| * @author ebidel@ (Eric Bidelman) | |
| * License Apache-2.0 | |
| */ | |
| // Prints the bytes cached by service worker. Breaks out each cache | |
| // overall in-memory bytes used by the Cache Storage API for the site. | |
| async function getCacheStoragesAssetTotalSize() { | |
| // Note: opaque (i.e. cross-domain, without CORS) responses in the cache will return a size of 0. |
The proposal you’re about to read is not just a proposal. We have a working implementation of almost everything we discussed here. We encourage you to checkout and build our branch: our fork, with the relevant branch selected. Building and using the implementation will give you a better understanding of what using it as a developer is like.
Our implementation ended up differing from the proposal on some minor points. As our last action item before making a PR, we’re writing documentation on what we did. While I loathe pointing to tests in lieu of documentation, they will be helpful until we complete writing docs: the unit tests.
This repo also contains a bundled version of npm that has a new command, asset. You can read the documentation for and goals of that comma
tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.
A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.
But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.
How do we solve this with React?
A tiny (265 byte) utility to create state machine components using two pure functions.
The API is a single function that accepts 2 pure functions as arguments:
