Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-streaming

Package Overview
Dependencies
Maintainers
1
Versions
100
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-streaming - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

1

dist/cjs/renderToStream.d.ts

@@ -8,3 +8,2 @@ export { renderToStream };

declare type Options = {
debug?: boolean;
webStream?: boolean;

@@ -11,0 +10,0 @@ disable?: boolean;

32

dist/cjs/renderToStream.js

@@ -16,2 +16,3 @@ "use strict";

const loadNodeStreamModule_1 = require("./renderToStream/loadNodeStreamModule");
const debug = (0, utils_1.createDebugger)('react-streaming:flow');
assertReact();

@@ -33,2 +34,3 @@ const globalConfig = (globalThis.__react_streaming = globalThis

const webStream = (_b = options.webStream) !== null && _b !== void 0 ? _b : !(await (0, loadNodeStreamModule_1.nodeStreamModuleIsAvailable)());
debug(`disable === ${disable} && webStream === ${webStream}`);
let result;

@@ -42,2 +44,3 @@ if (!webStream) {

injectToStream = result.injectToStream;
debug('promise `await renderToStream()` resolved');
return result;

@@ -48,2 +51,7 @@ }

var _a;
debug('creating Node.js Stream Pipe');
let onAllReady;
const allReady = new Promise((r) => {
onAllReady = () => r();
});
let onShellReady;

@@ -57,2 +65,3 @@ const shellReady = new Promise((r) => {

const onError = (err) => {
debug('[react] onError() / onShellError()');
didError = true;

@@ -63,3 +72,4 @@ firstErr !== null && firstErr !== void 0 ? firstErr : (firstErr = err);

var _a;
if (err !== reactBug) { // Is not a React internal error (i.e. a React bug)
// Is not a React internal error (i.e. a React bug)
if (err !== reactBug) {
(_a = options.onBoundaryError) === null || _a === void 0 ? void 0 : _a.call(options, err);

@@ -73,6 +83,9 @@ }

onShellReady() {
debug('[react] onShellReady()');
onShellReady();
},
onAllReady() {
debug('[react] onAllReady()');
onShellReady();
onAllReady();
},

@@ -84,8 +97,9 @@ onShellError: onError,

const { pipeWrapper, injectToStream, streamEnd } = await (0, createPipeWrapper_1.createPipeWrapper)(pipeOriginal, {
debug: options.debug,
onReactBug(err) {
debug('react bug');
didError = true;
firstErr !== null && firstErr !== void 0 ? firstErr : (firstErr = err);
reactBug = err;
if (reactBug !== firstErr || promiseResolved) { // Only log if it wasn't used as rejection for `await renderToStream()`
// Only log if it wasn't used as rejection for `await renderToStream()`
if (reactBug !== firstErr || promiseResolved) {
console.error(reactBug);

@@ -99,3 +113,3 @@ }

if (disable)
await streamEnd;
await allReady;
if (didError)

@@ -113,2 +127,3 @@ throw firstErr;

var _a;
debug('creating Web Stream Pipe');
let didError = false;

@@ -122,3 +137,4 @@ let firstErr = null;

var _a;
if (err !== reactBug) { // Is not a React internal error (i.e. a React bug)
// Is not a React internal error (i.e. a React bug)
if (err !== reactBug) {
(_a = options.onBoundaryError) === null || _a === void 0 ? void 0 : _a.call(options, err);

@@ -136,6 +152,8 @@ }

allReady.catch((err) => {
debug('react bug');
didError = true;
firstErr = firstErr || err;
reactBug = err;
if (reactBug !== firstErr || promiseResolved) { // Only log if it wasn't used as rejection for `await renderToStream()`
// Only log if it wasn't used as rejection for `await renderToStream()`
if (reactBug !== firstErr || promiseResolved) {
console.error(reactBug);

@@ -150,3 +168,3 @@ }

throw firstErr;
const { readableWrapper, streamEnd, injectToStream } = (0, createReadableWrapper_1.createReadableWrapper)(readableOriginal, options);
const { readableWrapper, streamEnd, injectToStream } = (0, createReadableWrapper_1.createReadableWrapper)(readableOriginal);
promiseResolved = true;

@@ -153,0 +171,0 @@ return {

export { createBuffer };
declare function createBuffer(bufferParams: {
debug?: boolean;
writeChunk: null | ((_chunk: string) => void);

@@ -5,0 +4,0 @@ }): {

@@ -5,2 +5,3 @@ "use strict";

const utils_1 = require("../utils");
const debug = (0, utils_1.createDebugger)('react-streaming:buffer');
function createBuffer(bufferParams) {

@@ -10,7 +11,6 @@ const buffer = [];

let writePermission = null; // Set to `null` because React fails to hydrate if something is injected before the first react write
const DEBUG = !!bufferParams.debug;
return { injectToStream, onBeforeWrite, onBeforeEnd };
function injectToStream(chunk) {
(0, utils_1.assertUsage)(state !== 'ENDED', `Cannot inject following chunk after stream has ended: \`${chunk}\``);
DEBUG && console.log('injectToStream:', chunk);
debug('injectToStream:', chunk);
buffer.push(chunk);

@@ -38,4 +38,4 @@ flushBuffer();

function onBeforeWrite(chunk) {
DEBUG && state === 'UNSTARTED' && console.log('>>> START');
DEBUG && console.log(`react write ${!writePermission ? '' : '(writePermission)'}:`, String(chunk));
state === 'UNSTARTED' && debug('>>> START');
debug(`react write${!writePermission ? '' : ' (allowed)'}:`, String(chunk));
state = 'STREAMING';

@@ -47,7 +47,7 @@ if (writePermission) {

writePermission = false;
DEBUG && console.log('writePermission =', writePermission);
debug('writePermission =', writePermission);
setTimeout(() => {
DEBUG && console.log('>>> setTimeout()');
debug('>>> setTimeout()');
writePermission = true;
DEBUG && console.log('writePermission =', writePermission);
debug('writePermission =', writePermission);
flushBuffer();

@@ -59,9 +59,9 @@ });

writePermission = true;
DEBUG && console.log('writePermission =', writePermission);
debug('writePermission =', writePermission);
flushBuffer();
(0, utils_1.assert)(buffer.length === 0);
state = 'ENDED';
DEBUG && console.log('>>> END');
debug('>>> END');
}
}
exports.createBuffer = createBuffer;

@@ -6,4 +6,3 @@ /// <reference types="node" />

declare type Pipe = (writable: StreamNodeWritable) => void;
declare function createPipeWrapper(pipeOriginal: Pipe, { debug, onReactBug }: {
debug?: boolean;
declare function createPipeWrapper(pipeOriginal: Pipe, { onReactBug }: {
onReactBug: (err: unknown) => void;

@@ -10,0 +9,0 @@ }): Promise<{

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createPipeWrapper = void 0;
const utils_1 = require("../utils");
const createBuffer_1 = require("./createBuffer");
const loadNodeStreamModule_1 = require("./loadNodeStreamModule");
async function createPipeWrapper(pipeOriginal, { debug, onReactBug }) {
const debug = (0, utils_1.createDebugger)('react-streaming:createPipeWrapper');
async function createPipeWrapper(pipeOriginal, { onReactBug }) {
const { Writable } = await (0, loadNodeStreamModule_1.loadNodeStreamModule)();
const { pipeWrapper, streamEnd } = createPipeWrapper();
const bufferParams = {
debug,
writeChunk: null

@@ -16,13 +17,18 @@ };

function createPipeWrapper() {
debug('createPipeWrapper()');
let onEnded;
const streamEnd = new Promise(r => { onEnded = () => r(); });
const pipeWrapper = (writable) => {
const streamEnd = new Promise((r) => {
onEnded = () => r();
});
const pipeWrapper = (writableOriginal) => {
const writableProxy = new Writable({
write(chunk, encoding, callback) {
debug('write');
onBeforeWrite(chunk);
writable.write(chunk, encoding, callback);
writableOriginal.write(chunk, encoding, callback);
},
final(callback) {
debug('final');
onBeforeEnd();
writable.end();
writableOriginal.end();
onEnded();

@@ -32,6 +38,7 @@ callback();

destroy(err) {
debug(`destroy (\`!!err === ${!!err}\`)`);
// Upon React internal errors (i.e. React bugs), React destroys the stream.
if (err)
onReactBug(err);
writable.destroy(err !== null && err !== void 0 ? err : undefined);
writableOriginal.destroy(err !== null && err !== void 0 ? err : undefined);
onEnded();

@@ -41,8 +48,8 @@ }

bufferParams.writeChunk = (chunk) => {
writable.write(chunk);
writableOriginal.write(chunk);
};
writableProxy.flush = () => {
if (typeof writable.flush === 'function') {
if (typeof writableOriginal.flush === 'function') {
;
writable.flush();
writableOriginal.flush();
}

@@ -49,0 +56,0 @@ };

export { createReadableWrapper };
declare function createReadableWrapper(readableOriginal: ReadableStream, options: {
debug?: boolean;
}): {
declare function createReadableWrapper(readableOriginal: ReadableStream): {
readableWrapper: ReadableStream<any>;

@@ -6,0 +4,0 @@ streamEnd: Promise<void>;

@@ -5,5 +5,4 @@ "use strict";

const createBuffer_1 = require("./createBuffer");
function createReadableWrapper(readableOriginal, options) {
function createReadableWrapper(readableOriginal) {
const bufferParams = {
debug: !!options.debug,
writeChunk: null

@@ -13,3 +12,5 @@ };

let onEnded;
const streamEnd = new Promise(r => { onEnded = () => r(); });
const streamEnd = new Promise((r) => {
onEnded = () => r();
});
const readableWrapper = new ReadableStream({

@@ -16,0 +17,0 @@ start(controller) {

@@ -6,1 +6,5 @@ export declare function isServerSide(): boolean;

export declare function assertWarning(condition: unknown, msg: string): void;
import debug from 'debug';
export declare function createDebugger(namespace: `react-streaming:${string}`, options?: {
onlyWhenFocused?: true | string;
}): debug.Debugger['log'];
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.assertWarning = exports.assertUsage = exports.assert = exports.isClientSide = exports.isServerSide = void 0;
exports.createDebugger = exports.assertWarning = exports.assertUsage = exports.assert = exports.isClientSide = exports.isServerSide = void 0;
function isServerSide() {

@@ -38,1 +41,19 @@ return !isClientSide();

exports.assertWarning = assertWarning;
const debug_1 = __importDefault(require("debug"));
function createDebugger(namespace, options = {}) {
const DEBUG = process.env.DEBUG;
const DEBUG_FILTER = process.env.REACT_STREAMING_DEBUG_FILTER || process.env.DEBUG_FILTER;
const log = (0, debug_1.default)(namespace);
const { onlyWhenFocused } = options;
const focus = typeof onlyWhenFocused === 'string' ? onlyWhenFocused : namespace;
return (msg, ...args) => {
if (DEBUG_FILTER && !msg.includes(DEBUG_FILTER)) {
return;
}
if (onlyWhenFocused && !(DEBUG === null || DEBUG === void 0 ? void 0 : DEBUG.includes(focus))) {
return;
}
log(msg, ...args);
};
}
exports.createDebugger = createDebugger;

@@ -8,3 +8,2 @@ export { renderToStream };

declare type Options = {
debug?: boolean;
webStream?: boolean;

@@ -11,0 +10,0 @@ disable?: boolean;

@@ -10,4 +10,5 @@ export { renderToStream };

import { resolveSeoStrategy } from './renderToStream/resolveSeoStrategy';
import { assert, assertUsage } from './utils';
import { assert, assertUsage, createDebugger } from './utils';
import { nodeStreamModuleIsAvailable } from './renderToStream/loadNodeStreamModule';
const debug = createDebugger('react-streaming:flow');
assertReact();

@@ -28,2 +29,3 @@ const globalConfig = (globalThis.__react_streaming = globalThis

const webStream = (_b = options.webStream) !== null && _b !== void 0 ? _b : !(await nodeStreamModuleIsAvailable());
debug(`disable === ${disable} && webStream === ${webStream}`);
let result;

@@ -37,2 +39,3 @@ if (!webStream) {

injectToStream = result.injectToStream;
debug('promise `await renderToStream()` resolved');
return result;

@@ -42,2 +45,7 @@ }

var _a;
debug('creating Node.js Stream Pipe');
let onAllReady;
const allReady = new Promise((r) => {
onAllReady = () => r();
});
let onShellReady;

@@ -51,2 +59,3 @@ const shellReady = new Promise((r) => {

const onError = (err) => {
debug('[react] onError() / onShellError()');
didError = true;

@@ -57,3 +66,4 @@ firstErr !== null && firstErr !== void 0 ? firstErr : (firstErr = err);

var _a;
if (err !== reactBug) { // Is not a React internal error (i.e. a React bug)
// Is not a React internal error (i.e. a React bug)
if (err !== reactBug) {
(_a = options.onBoundaryError) === null || _a === void 0 ? void 0 : _a.call(options, err);

@@ -67,6 +77,9 @@ }

onShellReady() {
debug('[react] onShellReady()');
onShellReady();
},
onAllReady() {
debug('[react] onAllReady()');
onShellReady();
onAllReady();
},

@@ -78,8 +91,9 @@ onShellError: onError,

const { pipeWrapper, injectToStream, streamEnd } = await createPipeWrapper(pipeOriginal, {
debug: options.debug,
onReactBug(err) {
debug('react bug');
didError = true;
firstErr !== null && firstErr !== void 0 ? firstErr : (firstErr = err);
reactBug = err;
if (reactBug !== firstErr || promiseResolved) { // Only log if it wasn't used as rejection for `await renderToStream()`
// Only log if it wasn't used as rejection for `await renderToStream()`
if (reactBug !== firstErr || promiseResolved) {
console.error(reactBug);

@@ -93,3 +107,3 @@ }

if (disable)
await streamEnd;
await allReady;
if (didError)

@@ -107,2 +121,3 @@ throw firstErr;

var _a;
debug('creating Web Stream Pipe');
let didError = false;

@@ -116,3 +131,4 @@ let firstErr = null;

var _a;
if (err !== reactBug) { // Is not a React internal error (i.e. a React bug)
// Is not a React internal error (i.e. a React bug)
if (err !== reactBug) {
(_a = options.onBoundaryError) === null || _a === void 0 ? void 0 : _a.call(options, err);

@@ -130,6 +146,8 @@ }

allReady.catch((err) => {
debug('react bug');
didError = true;
firstErr = firstErr || err;
reactBug = err;
if (reactBug !== firstErr || promiseResolved) { // Only log if it wasn't used as rejection for `await renderToStream()`
// Only log if it wasn't used as rejection for `await renderToStream()`
if (reactBug !== firstErr || promiseResolved) {
console.error(reactBug);

@@ -144,3 +162,3 @@ }

throw firstErr;
const { readableWrapper, streamEnd, injectToStream } = createReadableWrapper(readableOriginal, options);
const { readableWrapper, streamEnd, injectToStream } = createReadableWrapper(readableOriginal);
promiseResolved = true;

@@ -147,0 +165,0 @@ return {

export { createBuffer };
declare function createBuffer(bufferParams: {
debug?: boolean;
writeChunk: null | ((_chunk: string) => void);

@@ -5,0 +4,0 @@ }): {

export { createBuffer };
import { assert, assertUsage } from '../utils';
import { assert, assertUsage, createDebugger } from '../utils';
const debug = createDebugger('react-streaming:buffer');
function createBuffer(bufferParams) {

@@ -7,7 +8,6 @@ const buffer = [];

let writePermission = null; // Set to `null` because React fails to hydrate if something is injected before the first react write
const DEBUG = !!bufferParams.debug;
return { injectToStream, onBeforeWrite, onBeforeEnd };
function injectToStream(chunk) {
assertUsage(state !== 'ENDED', `Cannot inject following chunk after stream has ended: \`${chunk}\``);
DEBUG && console.log('injectToStream:', chunk);
debug('injectToStream:', chunk);
buffer.push(chunk);

@@ -35,4 +35,4 @@ flushBuffer();

function onBeforeWrite(chunk) {
DEBUG && state === 'UNSTARTED' && console.log('>>> START');
DEBUG && console.log(`react write ${!writePermission ? '' : '(writePermission)'}:`, String(chunk));
state === 'UNSTARTED' && debug('>>> START');
debug(`react write${!writePermission ? '' : ' (allowed)'}:`, String(chunk));
state = 'STREAMING';

@@ -44,7 +44,7 @@ if (writePermission) {

writePermission = false;
DEBUG && console.log('writePermission =', writePermission);
debug('writePermission =', writePermission);
setTimeout(() => {
DEBUG && console.log('>>> setTimeout()');
debug('>>> setTimeout()');
writePermission = true;
DEBUG && console.log('writePermission =', writePermission);
debug('writePermission =', writePermission);
flushBuffer();

@@ -56,8 +56,8 @@ });

writePermission = true;
DEBUG && console.log('writePermission =', writePermission);
debug('writePermission =', writePermission);
flushBuffer();
assert(buffer.length === 0);
state = 'ENDED';
DEBUG && console.log('>>> END');
debug('>>> END');
}
}

@@ -6,4 +6,3 @@ /// <reference types="node" />

declare type Pipe = (writable: StreamNodeWritable) => void;
declare function createPipeWrapper(pipeOriginal: Pipe, { debug, onReactBug }: {
debug?: boolean;
declare function createPipeWrapper(pipeOriginal: Pipe, { onReactBug }: {
onReactBug: (err: unknown) => void;

@@ -10,0 +9,0 @@ }): Promise<{

export { createPipeWrapper };
import { createDebugger } from '../utils';
import { createBuffer } from './createBuffer';
import { loadNodeStreamModule } from './loadNodeStreamModule';
async function createPipeWrapper(pipeOriginal, { debug, onReactBug }) {
const debug = createDebugger('react-streaming:createPipeWrapper');
async function createPipeWrapper(pipeOriginal, { onReactBug }) {
const { Writable } = await loadNodeStreamModule();
const { pipeWrapper, streamEnd } = createPipeWrapper();
const bufferParams = {
debug,
writeChunk: null

@@ -14,13 +15,18 @@ };

function createPipeWrapper() {
debug('createPipeWrapper()');
let onEnded;
const streamEnd = new Promise(r => { onEnded = () => r(); });
const pipeWrapper = (writable) => {
const streamEnd = new Promise((r) => {
onEnded = () => r();
});
const pipeWrapper = (writableOriginal) => {
const writableProxy = new Writable({
write(chunk, encoding, callback) {
debug('write');
onBeforeWrite(chunk);
writable.write(chunk, encoding, callback);
writableOriginal.write(chunk, encoding, callback);
},
final(callback) {
debug('final');
onBeforeEnd();
writable.end();
writableOriginal.end();
onEnded();

@@ -30,6 +36,7 @@ callback();

destroy(err) {
debug(`destroy (\`!!err === ${!!err}\`)`);
// Upon React internal errors (i.e. React bugs), React destroys the stream.
if (err)
onReactBug(err);
writable.destroy(err !== null && err !== void 0 ? err : undefined);
writableOriginal.destroy(err !== null && err !== void 0 ? err : undefined);
onEnded();

@@ -39,8 +46,8 @@ }

bufferParams.writeChunk = (chunk) => {
writable.write(chunk);
writableOriginal.write(chunk);
};
writableProxy.flush = () => {
if (typeof writable.flush === 'function') {
if (typeof writableOriginal.flush === 'function') {
;
writable.flush();
writableOriginal.flush();
}

@@ -47,0 +54,0 @@ };

export { createReadableWrapper };
declare function createReadableWrapper(readableOriginal: ReadableStream, options: {
debug?: boolean;
}): {
declare function createReadableWrapper(readableOriginal: ReadableStream): {
readableWrapper: ReadableStream<any>;

@@ -6,0 +4,0 @@ streamEnd: Promise<void>;

export { createReadableWrapper };
import { createBuffer } from './createBuffer';
function createReadableWrapper(readableOriginal, options) {
function createReadableWrapper(readableOriginal) {
const bufferParams = {
debug: !!options.debug,
writeChunk: null

@@ -10,3 +9,5 @@ };

let onEnded;
const streamEnd = new Promise(r => { onEnded = () => r(); });
const streamEnd = new Promise((r) => {
onEnded = () => r();
});
const readableWrapper = new ReadableStream({

@@ -13,0 +14,0 @@ start(controller) {

@@ -6,1 +6,5 @@ export declare function isServerSide(): boolean;

export declare function assertWarning(condition: unknown, msg: string): void;
import debug from 'debug';
export declare function createDebugger(namespace: `react-streaming:${string}`, options?: {
onlyWhenFocused?: true | string;
}): debug.Debugger['log'];

@@ -30,1 +30,18 @@ export function isServerSide() {

}
import debug from 'debug';
export function createDebugger(namespace, options = {}) {
const DEBUG = process.env.DEBUG;
const DEBUG_FILTER = process.env.REACT_STREAMING_DEBUG_FILTER || process.env.DEBUG_FILTER;
const log = debug(namespace);
const { onlyWhenFocused } = options;
const focus = typeof onlyWhenFocused === 'string' ? onlyWhenFocused : namespace;
return (msg, ...args) => {
if (DEBUG_FILTER && !msg.includes(DEBUG_FILTER)) {
return;
}
if (onlyWhenFocused && !(DEBUG === null || DEBUG === void 0 ? void 0 : DEBUG.includes(focus))) {
return;
}
log(msg, ...args);
};
}
{
"name": "react-streaming",
"description": "React 18 Streaming. Full-fledged & Easy.",
"version": "0.2.3",
"version": "0.2.4",
"main": "./dist/cjs/index.js",

@@ -44,5 +44,7 @@ "peerDependencies": {

"devDependencies": {
"@types/debug": "4.1.7",
"@types/node": "^15.12.2",
"@types/react": "^18.0.5",
"@types/react-dom": "^18.0.1",
"debug": "4.3.4",
"react": "18.1.0",

@@ -53,5 +55,9 @@ "react-dom": "18.1.0",

},
"files": ["dist/", "*.d.ts", "*.js"],
"files": [
"dist/",
"*.d.ts",
"*.js"
],
"repository": "github:brillout/react-streaming",
"license": "MIT"
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc