8,037 Matching Annotations
  1. Feb 2023
    1. js const wss = new WebSocketStream(url); const { readable } = await wss.connection; const reader = readable.getReader(); while (true) { const { value, done } = await reader.read(); if (done) break; await process(value); } done();


      js const wss = new WebSocketStream(url); const { writable } = await wss.connection; const writer = writable.getWriter(); for await (const message of messages) { await writer.write(message); }


      js const controller = new AbortController(); const wss = new WebSocketStream(url, { signal: controller.signal }); setTimeout(() => controller.abort(), 1000);

    1. ```js const supportsRequestStreams = (() => { let duplexAccessed = false;

      const hasContentType = new Request('', { body: new ReadableStream(), method: 'POST', get duplex() { duplexAccessed = true; return 'half'; }, }).headers.has('Content-Type');

      return duplexAccessed && !hasContentType; })();

      if (supportsRequestStreams) { // … } else { // … } ```

    1. ```js /* * Fetch and process the stream / async function process() { // Retrieve NDJSON from the server const response = await fetch('http://localhost:3000/request');

      const results = response.body // From bytes to text: .pipeThrough(new TextDecoderStream()) // Buffer until newlines: .pipeThrough(splitStream('\n')) // Parse chunks as JSON: .pipeThrough(parseJSON());

      // Loop through the results and write to the DOM writeToDOM(results.getReader()); }

      /* * Read through the results and write to the DOM * @param {object} reader / function writeToDOM(reader) { reader.read().then(({ value, done }) => { if (done) { console.log("The stream was already closed!");

      } else {
        // Build up the values
        let result = document.createElement('div');
        result.innerHTML =
          `<div>ID: ${value.id} - Phone: ${value.phone} - Result: $
              {value.result}</div><br>`;
      
        // Prepend to the target
        targetDiv.insertBefore(result, targetDiv.firstChild);
      
        // Recursively call
        writeToDOM(reader);
      }
      

      }, e => console.error("The stream became errored and cannot be read from!", e) ); } ```

    1. Node.js

      js import { renderToPipeableStream } from "react-dom/server.node"; import React from "react"; import http from "http"; const App = () => ( <html> <body> <h1>Hello World</h1> <p>This is an example.</p> </body> </html> ); var didError = false; http .createServer(function (req, res) { const stream = renderToPipeableStream(<App />, { onShellReady() { res.statusCode = didError ? 500 : 200; res.setHeader("Content-type", "text/html"); res.setHeader("Cache-Control", "no-transform"); stream.pipe(res); }, onShellError(error) { res.statusCode = 500; res.send( '<!doctype html><p>Loading...</p><script src="clientrender.js"></script>', ); }, onAllReady() { }, onError(err) { didError = true; console.error(err); }, }); }) .listen(3000);

      Deno

      ```js import { renderToReadableStream } from "https://esm.run/react-dom/server"; import * as React from "https://esm.run/react";

      const App = () => ( <html> <body>

      Hello World

      This is an example.

      </body> </html> );

      const headers = { headers: { "Content-Type": "text/html", "Cache-Control": "no-transform", }, };

      Deno.serve( async (req) => { return new Response(await renderToReadableStream(<App />), headers); }, { port: 3000 }, ); ```

      Bun

      ```js import { renderToReadableStream } from "react-dom/server"; const headers = { headers: { "Content-Type": "text/html", }, };

      const App = () => ( <html> <body>

      Hello World

      This is an example.

      </body> </html> );

      Bun.serve({ port: 3000, async fetch(req) { return new Response(await renderToReadableStream(<App />), headers); }, }); ```

    1. <table><tbody><tr class="evn"><td> XPath </td><td> JSONPath </td><td> Description </td></tr> <tr class="odd"><td> / </td><td> $ </td><td class="lft">the root object/element </td></tr> <tr class="evn"><td> . </td><td> @ </td><td class="lft">the current object/element </td></tr> <tr class="odd"><td> / </td><td> . or [] </td><td class="lft">child operator </td></tr> <tr class="evn"><td> .. </td><td> n/a </td><td class="lft">parent operator </td></tr> <tr class="odd"><td> // </td><td> .. </td><td class="lft">recursive descent. JSONPath borrows this syntax from E4X. </td></tr> <tr class="evn"><td> * </td><td> * </td><td class="lft">wildcard. All objects/elements regardless their names. </td></tr> <tr class="odd"><td> @ </td><td> n/a </td><td class="lft">attribute access. JSON structures don't have attributes. </td></tr> <tr class="evn"><td> [] </td><td> [] </td><td class="lft">subscript operator. XPath uses it to iterate over element collections and for predicates. In Javascript and JSON it is the native array operator. </td></tr> <tr class="odd"><td> | </td><td> [,] </td><td class="lft">Union operator in XPath results in a combination of node sets. JSONPath allows alternate names or array indices as a set. </td></tr> <tr class="evn"><td> n/a </td><td> [start:end:step] </td><td class="lft">array slice operator borrowed from ES4. </td></tr> <tr class="odd"><td> [] </td><td> ?() </td><td class="lft">applies a filter (script) expression. </td></tr> <tr class="evn"><td> n/a </td><td> () </td><td class="lft">script expression, using the underlying script engine. </td></tr> <tr class="odd"><td> () </td><td> n/a </td><td class="lft">grouping in Xpath </td></tr></tbody></table>
    1. If you search on the internet about, performances of proxy, some people say that it's a tool for development and should not be used in production
    1. I resolved this by changing the imports from @remix-run/node to @remix-run/cloudflare

      diff - import { json } from "@remix-run/node"; + import { json } from "@remix-run/cloudflare";

    1. You may opt-out of the telemetry by setting Storybook's configuration element disableTelemetry to true, using the --disable-telemetry flag, or setting the environment variableSTORYBOOK_DISABLE_TELEMETRY to 1.