wrangler 0.0.0-e33bea9b → 0.0.0-e351afcf

package/src/pages/projects.tsx

@@ -1,5 +1,4 @@
 import { execSync } from "node:child_process";
-import { render } from "ink";
 import Table from "ink-table";
 import React from "react";
 import { format as timeagoFormat } from "timeago.js";
@@ -10,6 +9,7 @@ import { FatalError } from "../errors";
 import { logger } from "../logger";
 import * as metrics from "../metrics";
 import { requireAuth } from "../user";
+import { renderToString } from "../utils/render";
 import { PAGES_CONFIG_CACHE_FILENAME } from "./constants";
 import { pagesBetaWarning } from "./utils";
 import type {
@@ -44,10 +44,7 @@ export async function ListHandler() {
 		account_id: accountId,
 	});
 
-	const { unmount } = render(<Table data={data}></Table>, {
-		patchConsole: false,
-	});
-	unmount();
+	logger.log(renderToString(<Table data={data}></Table>));
 	await metrics.sendMetricsEvent("list pages projects");
 }
 

package/src/pages/upload.tsx

@@ -276,9 +276,7 @@ export const upload = async (
 	}
 
 	let counter = fileMap.size - sortedFiles.length;
-	const { rerender, unmount } = render(
-		<Progress done={counter} total={fileMap.size} />
-	);
+	const { rerender, unmount } = renderProgress(counter, fileMap.size);
 
 	const queue = new PQueue({ concurrency: BULK_UPLOAD_CONCURRENCY });
 
@@ -336,7 +334,7 @@ export const upload = async (
 			doUpload().then(
 				() => {
 					counter += bucket.files.length;
-					rerender(<Progress done={counter} total={fileMap.size} />);
+					rerender(counter, fileMap.size);
 				},
 				(error) => {
 					return Promise.reject(
@@ -437,6 +435,28 @@ function formatTime(duration: number) {
 	return `(${(duration / 1000).toFixed(2)} sec)`;
 }
 
+function renderProgress(done: number, total: number) {
+	if (isInteractive()) {
+		const { rerender, unmount } = render(
+			<Progress done={done} total={total} />
+		);
+		return {
+			// eslint-disable-next-line no-shadow
+			rerender(done: number, total: number) {
+				rerender(<Progress done={done} total={total} />);
+			},
+			unmount,
+		};
+	} else {
+		// eslint-disable-next-line no-shadow
+		const rerender = (done: number, total: number) => {
+			logger.log(`Uploading... (${done}/${total})`);
+		};
+		rerender(done, total);
+		return { rerender, unmount() {} };
+	}
+}
+
 function Progress({ done, total }: { done: number; total: number }) {
 	return (
 		<>

package/src/publish/publish.ts

@@ -12,6 +12,7 @@ import {
 import { fetchListResult, fetchResult } from "../cfetch";
 import { printBindings } from "../config";
 import { createWorkerUploadForm } from "../create-worker-upload-form";
+import { addHyphens } from "../deployments";
 import { confirm } from "../dialogs";
 import { getMigrationsToUpload } from "../durable";
 import { logger } from "../logger";
@@ -20,6 +21,7 @@ import { ParseError } from "../parse";
 import { getQueue, putConsumer } from "../queues/client";
 import { getWorkersDevSubdomain } from "../routes";
 import { syncAssets } from "../sites";
+import traverseModuleGraph from "../traverse-module-graph";
 import { identifyD1BindingsAsBeta } from "../worker";
 import { getZoneForRoute } from "../zones";
 import type { FetchError } from "../cfetch";
@@ -30,7 +32,6 @@ import type {
 	ZoneNameRoute,
 	CustomDomainRoute,
 } from "../config/environment";
-import type { DeploymentListResult } from "../deployments";
 import type { Entry } from "../entry";
 import type { PutConsumerBody } from "../queues/client";
 import type { AssetPaths } from "../sites";
@@ -335,7 +336,7 @@ See https://developers.cloudflare.com/workers/platform/compatibility-dates for m
 
 	const jsxFactory = props.jsxFactory || config.jsx_factory;
 	const jsxFragment = props.jsxFragment || config.jsx_fragment;
-	const keepVars = props.keepVars ?? config.keep_vars;
+	const keepVars = props.keepVars || config.keep_vars;
 
 	const minify = props.minify ?? config.minify;
 
@@ -401,7 +402,7 @@ See https://developers.cloudflare.com/workers/platform/compatibility-dates for m
 		: `/accounts/${accountId}/workers/scripts/${scriptName}`;
 
 	let available_on_subdomain: boolean | undefined = undefined; // we'll set this later
-	let scriptTag: string | null = null;
+	let deploymentId: string | null = null;
 
 	const { format } = props.entry;
 
@@ -463,14 +464,7 @@ See https://developers.cloudflare.com/workers/platform/compatibility-dates for m
 			resolvedEntryPointPath,
 			bundleType,
 		}: Awaited<ReturnType<typeof bundleWorker>> = props.noBundle
-			? // we can skip the whole bundling step and mock a bundle here
-			  {
-					modules: [],
-					dependencies: {},
-					resolvedEntryPointPath: props.entry.file,
-					bundleType: props.entry.format === "modules" ? "esm" : "commonjs",
-					stop: undefined,
-			  }
+			? await traverseModuleGraph(props.entry, props.rules)
 			: await bundleWorker(
 					props.entry,
 					typeof destination === "string" ? destination : destination.path,
@@ -541,6 +535,7 @@ See https://developers.cloudflare.com/workers/platform/compatibility-dates for m
 					? { binding: "__STATIC_CONTENT", id: assets.namespace }
 					: []
 			),
+			send_email: config.send_email,
 			vars: { ...config.vars, ...props.vars },
 			wasm_modules: config.wasm_modules,
 			text_blobs: {
@@ -632,7 +627,7 @@ See https://developers.cloudflare.com/workers/platform/compatibility-dates for m
 					id: string | null;
 					etag: string | null;
 					pipeline_hash: string | null;
-					tag: string | null;
+					deployment_id: string | null;
 				}>(
 					workerUrl,
 					{
@@ -649,7 +644,7 @@ See https://developers.cloudflare.com/workers/platform/compatibility-dates for m
 				);
 
 				available_on_subdomain = result.available_on_subdomain;
-				scriptTag = result.tag;
+				deploymentId = addHyphens(result.deployment_id) ?? result.deployment_id;
 
 				if (config.first_party_worker) {
 					// Print some useful information returned after publishing
@@ -839,19 +834,7 @@ See https://developers.cloudflare.com/workers/platform/compatibility-dates for m
 		logger.log("No publish targets for", workerName, formatTime(deployMs));
 	}
 
-	try {
-		const deploymentsList = await fetchResult<DeploymentListResult>(
-			`/accounts/${accountId}/workers/deployments/by-script/${scriptTag}`
-		);
-
-		logger.log("Current Deployment ID:", deploymentsList.latest.id);
-	} catch (e) {
-		if ((e as { code: number }).code === 10023) {
-			// TODO: remove this try/catch once deployments is completely rolled out
-		} else {
-			throw e;
-		}
-	}
+	logger.log("Current Deployment ID:", deploymentId);
 }
 
 export function helpIfErrorIsSizeOrScriptStartup(
@@ -1060,6 +1043,7 @@ function updateQueueConsumers(config: Config): Promise<string[]>[] {
 				max_wait_time_ms: consumer.max_batch_timeout
 					? 1000 * consumer.max_batch_timeout
 					: undefined,
+				max_concurrency: consumer.max_concurrency,
 			},
 		};
 

package/src/queues/cli/commands/consumer/add.ts

@@ -37,6 +37,11 @@ export function options(yargs: CommonYargsArgv) {
 				type: "string",
 				describe: "Queue to send messages that failed to be consumed",
 			},
+			"max-concurrency": {
+				type: "number",
+				describe:
+					"The maximum number of concurrent consumer Worker invocations. Must be a positive integer",
+			},
 		});
 }
 
@@ -55,6 +60,7 @@ export async function handler(
 			max_wait_time_ms: args.batchTimeout // API expects milliseconds
 				? 1000 * args.batchTimeout
 				: undefined,
+			max_concurrency: args.maxConcurrency,
 		},
 		dead_letter_queue: args.deadLetterQueue,
 	};

package/src/queues/client.ts

@@ -90,6 +90,7 @@ export interface ConsumerSettings {
 	batch_size?: number;
 	max_retries?: number;
 	max_wait_time_ms?: number;
+	max_concurrency?: number | null;
 }
 
 export interface ConsumerResponse extends PostConsumerBody {

package/src/secret/index.ts

@@ -100,6 +100,7 @@ export const secret = (secretYargs: CommonYargsArgv) => {
 								},
 								bindings: {
 									kv_namespaces: [],
+									send_email: [],
 									vars: {},
 									durable_objects: { bindings: [] },
 									queues: [],

package/src/sites.ts

@@ -1,6 +1,7 @@
 import assert from "node:assert";
 import { readdir, readFile, stat } from "node:fs/promises";
 import * as path from "node:path";
+import chalk from "chalk";
 import ignore from "ignore";
 import xxhash from "xxhash-wasm";
 import {
@@ -9,8 +10,10 @@ import {
 	listKVNamespaces,
 	putKVBulkKeyValue,
 	deleteKVBulkKeyValue,
+	BATCH_KEY_MAX,
+	formatNumber,
 } from "./kv/helpers";
-import { logger } from "./logger";
+import { logger, LOGGER_LEVELS } from "./logger";
 import type { Config } from "./config";
 import type { KeyValue } from "./kv/helpers";
 import type { XXHashAPI } from "xxhash-wasm";
@@ -92,6 +95,15 @@ async function createKVNamespaceIfNotAlreadyExisting(
 	};
 }
 
+const MAX_DIFF_LINES = 100;
+const MAX_BUCKET_SIZE = 98 * 1000 * 1000;
+const MAX_BUCKET_KEYS = BATCH_KEY_MAX;
+const MAX_BATCH_OPERATIONS = 5;
+
+function pluralise(count: number) {
+	return count === 1 ? "" : "s";
+}
+
 /**
  * Upload the assets found within the `dirPath` directory to the sites assets KV namespace for
  * the worker given by `scriptName`.
@@ -116,13 +128,13 @@ export async function syncAssets(
 	if (siteAssets === undefined) {
 		return { manifest: undefined, namespace: undefined };
 	}
-
 	if (dryRun) {
 		logger.log("(Note: doing a dry run, not uploading or deleting anything.)");
 		return { manifest: undefined, namespace: undefined };
 	}
 	assert(accountId, "Missing accountId");
 
+	// Create assets namespace if it doesn't exist
 	const title = `__${scriptName}-workers_sites_assets${
 		preview ? "_preview" : ""
 	}`;
@@ -131,55 +143,81 @@ export async function syncAssets(
 		title,
 		accountId
 	);
-
-	// let's get all the keys in this namespace
+	// Get all existing keys in asset namespace
+	logger.info("Fetching list of already uploaded assets...");
 	const namespaceKeysResponse = await listKVNamespaceKeys(accountId, namespace);
 	const namespaceKeys = new Set(namespaceKeysResponse.map((x) => x.name));
 
-	const manifest: Record<string, string> = {};
-
-	// A batch of uploads where each bucket has to be less than 98mb
-	const uploadBuckets: KeyValue[][] = [];
-	// The "live" bucket that we'll keep filling until it's just below 98mb
-	let uploadBucket: KeyValue[] = [];
-	// A size counter for the live bucket
-	let uploadBucketSize = 0;
-
-	const include = createPatternMatcher(siteAssets.includePatterns, false);
-	const exclude = createPatternMatcher(siteAssets.excludePatterns, true);
-	const hasher = await xxhash();
-
 	const assetDirectory = path.join(
 		siteAssets.baseDirectory,
 		siteAssets.assetDirectory
 	);
+	const include = createPatternMatcher(siteAssets.includePatterns, false);
+	const exclude = createPatternMatcher(siteAssets.excludePatterns, true);
+	const hasher = await xxhash();
+
+	// Find and validate all assets before we make any changes (can't store base64
+	// contents in memory for upload as users may have *lots* of files, and we
+	// don't want to OOM: https://github.com/cloudflare/workers-sdk/issues/2223)
+
+	const manifest: Record<string, string> = {};
+	type PathKey = [path: string, key: string];
+	// A batch of uploads where each bucket has to be less than 100 MiB and
+	// contain less than 10,000 keys (although we limit to 98 MB and 5000 keys)
+	const uploadBuckets: PathKey[][] = [];
+	// The "live" bucket we'll keep filling until it's just below the size limit
+	let uploadBucket: PathKey[] = [];
+	// Current size of the live bucket in bytes (just base64 encoded values)
+	let uploadBucketSize = 0;
+
+	let uploadCount = 0;
+	let skipCount = 0;
+
+	// Always log the first MAX_DIFF_LINES lines, then require the debug log level
+	let diffCount = 0;
+	function logDiff(line: string) {
+		const level = logger.loggerLevel;
+		if (LOGGER_LEVELS[level] >= LOGGER_LEVELS.debug) {
+			// If we're logging as debug level, we want *all* diff lines to be logged
+			// at debug level, not just the first MAX_DIFF_LINES
+			logger.debug(line);
+		} else if (diffCount < MAX_DIFF_LINES) {
+			// Otherwise, log  the first MAX_DIFF_LINES diffs at info level...
+			logger.info(line);
+		} else if (diffCount === MAX_DIFF_LINES) {
+			// ...and warn when we start to truncate it
+			const msg =
+				"   (truncating changed assets log, set `WRANGLER_LOG=debug` environment variable to see full diff)";
+			logger.info(chalk.dim(msg));
+		}
+		diffCount++;
+	}
+
+	logger.info("Building list of assets to upload...");
 	for await (const absAssetFile of getFilesInFolder(assetDirectory)) {
 		const assetFile = path.relative(assetDirectory, absAssetFile);
-		if (!include(assetFile)) {
-			continue;
-		}
-		if (exclude(assetFile)) {
-			continue;
-		}
+		if (!include(assetFile) || exclude(assetFile)) continue;
 
-		logger.log(`Reading ${assetFile}...`);
 		const content = await readFile(absAssetFile, "base64");
-		await validateAssetSize(absAssetFile, assetFile);
-		// while KV accepts files that are 25 MiB **before** b64 encoding
+		// While KV accepts files that are 25 MiB **before** b64 encoding
 		// the overall bucket size must be below 100 MB **after** b64 encoding
-		const assetSize = Buffer.from(content).length;
+		const assetSize = Buffer.byteLength(content);
+		await validateAssetSize(absAssetFile, assetFile);
 		const assetKey = hashAsset(hasher, assetFile, content);
 		validateAssetKey(assetKey);
 
-		// now put each of the files into kv
 		if (!namespaceKeys.has(assetKey)) {
-			logger.log(`Uploading as ${assetKey}...`);
-
-			// Check if adding this asset to the bucket would
-			// push it over the 98 MiB limit KV bulk API limit
-			if (uploadBucketSize + assetSize > 98 * 1000 * 1000) {
-				// If so, move the current bucket into the batch,
-				// and reset the counter/bucket
+			logDiff(
+				chalk.green(` + ${assetKey} (uploading new version of ${assetFile})`)
+			);
+
+			// Check if adding this asset to the bucket would push it over the KV
+			// bulk API limits
+			if (
+				uploadBucketSize + assetSize > MAX_BUCKET_SIZE ||
+				uploadBucket.length + 1 > MAX_BUCKET_KEYS
+			) {
+				// If so, record the current bucket and reset it
 				uploadBuckets.push(uploadBucket);
 				uploadBucketSize = 0;
 				uploadBucket = [];
@@ -187,13 +225,11 @@ export async function syncAssets(
 
 			// Update the bucket and the size counter
 			uploadBucketSize += assetSize;
-			uploadBucket.push({
-				key: assetKey,
-				value: content,
-				base64: true,
-			});
+			uploadBucket.push([absAssetFile, assetKey]);
+			uploadCount++;
 		} else {
-			logger.log(`Skipping - already uploaded.`);
+			logDiff(chalk.dim(` = ${assetKey} (already uploaded ${assetFile})`));
+			skipCount++;
 		}
 
 		// Remove the key from the set so we know what we've already uploaded
@@ -203,23 +239,99 @@ export async function syncAssets(
 		const manifestKey = urlSafe(path.relative(assetDirectory, absAssetFile));
 		manifest[manifestKey] = assetKey;
 	}
+	// Add the last (potentially only or empty) bucket to the batch
+	if (uploadBucket.length > 0) uploadBuckets.push(uploadBucket);
 
-	// Add the last (potentially only) bucket to the batch
-	uploadBuckets.push(uploadBucket);
-
-	// keys now contains all the files we're deleting
 	for (const key of namespaceKeys) {
-		logger.log(`Deleting ${key} from the asset store...`);
+		logDiff(chalk.red(` - ${key} (removing as stale)`));
+	}
+
+	// Upload new assets, with 5 concurrent uploaders
+	if (uploadCount > 0) {
+		const s = pluralise(uploadCount);
+		logger.info(`Uploading ${formatNumber(uploadCount)} new asset${s}...`);
+	}
+	if (skipCount > 0) {
+		const s = pluralise(skipCount);
+		logger.info(
+			`Skipped uploading ${formatNumber(skipCount)} existing asset${s}.`
+		);
 	}
+	let uploadedCount = 0;
+	const controller = new AbortController();
+	const uploaders = Array.from(Array(MAX_BATCH_OPERATIONS)).map(async () => {
+		while (!controller.signal.aborted) {
+			// Get the next bucket to upload. If there is none, stop this uploader.
+			// JavaScript is single(ish)-threaded, so we don't need to worry about
+			// parallel access here.
+			const nextBucket = uploadBuckets.shift();
+			if (nextBucket === undefined) break;
+
+			// Read all files in the bucket as base64
+			// TODO(perf): consider streaming the bulk upload body, rather than
+			//  buffering all base64 contents then JSON-stringifying. This probably
+			//  doesn't matter *too* much: we know buckets will be about 100MB, so
+			//  with 5 uploaders, we could load about 500MB into memory (+ extra
+			//  object keys/tags/copies/etc).
+			const bucket: KeyValue[] = [];
+			for (const [absAssetFile, assetKey] of nextBucket) {
+				bucket.push({
+					key: assetKey,
+					value: await readFile(absAssetFile, "base64"),
+					base64: true,
+				});
+				if (controller.signal.aborted) break;
+			}
 
-	// upload each bucket in parallel
-	const bucketsToPut = [];
-	for (const bucket of uploadBuckets) {
-		bucketsToPut.push(putKVBulkKeyValue(accountId, namespace, bucket));
+			// Upload the bucket to the KV namespace, suppressing logs, we do our own
+			try {
+				await putKVBulkKeyValue(
+					accountId,
+					namespace,
+					bucket,
+					/* quiet */ true,
+					controller.signal
+				);
+			} catch (e) {
+				// https://developer.mozilla.org/en-US/docs/Web/API/DOMException#error_names
+				// https://github.com/nodejs/undici/blob/a3efc9814447001a43a976f1c64adc41995df7e3/lib/core/errors.js#L89
+				if (
+					typeof e === "object" &&
+					e !== null &&
+					"name" in e &&
+					// @ts-expect-error `e.name` should be typed `unknown`, fixed in
+					//  TypeScript 4.9
+					e.name === "AbortError"
+				) {
+					break;
+				}
+				throw e;
+			}
+			uploadedCount += nextBucket.length;
+			const percent = Math.floor((100 * uploadedCount) / uploadCount);
+			logger.info(
+				`Uploaded ${percent}% [${formatNumber(
+					uploadedCount
+				)} out of ${formatNumber(uploadCount)}]`
+			);
+		}
+	});
+	try {
+		// Wait for all uploaders to complete, or one to fail
+		await Promise.all(uploaders);
+	} catch (e) {
+		// If any uploader fails, abort the others
+		logger.info(`Upload failed, aborting...`);
+		controller.abort();
+		throw e;
 	}
-	await Promise.all(bucketsToPut);
 
-	// then delete all the assets that aren't used anymore
+	// Delete stale assets
+	const deleteCount = namespaceKeys.size;
+	if (deleteCount > 0) {
+		const s = pluralise(deleteCount);
+		logger.info(`Removing ${formatNumber(deleteCount)} stale asset${s}...`);
+	}
 	await deleteKVBulkKeyValue(accountId, namespace, Array.from(namespaceKeys));
 
 	logger.log("↗️  Done syncing assets");

package/src/traverse-module-graph.ts

@@ -0,0 +1,53 @@
+import { readdir } from "node:fs/promises";
+import path from "node:path";
+import chalk from "chalk";
+import { logger } from "./logger";
+import { matchFiles, parseRules } from "./module-collection";
+import type { BundleResult } from "./bundle";
+import type { Config } from "./config";
+import type { Entry } from "./entry";
+
+async function getFiles(root: string, relativeTo: string): Promise<string[]> {
+	const files = [];
+	for (const file of await readdir(root, { withFileTypes: true })) {
+		if (file.isDirectory()) {
+			files.push(...(await getFiles(path.join(root, file.name), relativeTo)));
+		} else {
+			files.push(path.relative(relativeTo, path.join(root, file.name)));
+		}
+	}
+	return files;
+}
+
+export default async function traverseModuleGraph(
+	entry: Entry,
+	rules: Config["rules"]
+): Promise<BundleResult> {
+	const files = await getFiles(entry.moduleRoot, entry.moduleRoot);
+	const relativeEntryPoint = path.relative(entry.moduleRoot, entry.file);
+
+	const modules = (await matchFiles(files, entry.moduleRoot, parseRules(rules)))
+		.filter((m) => m.name !== relativeEntryPoint)
+		.map((m) => ({
+			...m,
+			name: m.name,
+		}));
+
+	const bundleType = entry.format === "modules" ? "esm" : "commonjs";
+
+	if (modules.length > 0) {
+		logger.info(`Uploading additional modules:`);
+		modules.forEach(({ name, type }) => {
+			logger.info(`- ${chalk.blue(name)} (${chalk.green(type ?? "")})`);
+		});
+	}
+
+	return {
+		modules,
+		dependencies: {},
+		resolvedEntryPointPath: entry.file,
+		bundleType,
+		stop: undefined,
+		sourceMapPath: undefined,
+	};
+}

package/src/user/user.ts

@@ -347,6 +347,7 @@ const Scopes = {
 		"See and change Cloudflare Pages projects, settings and deployments.",
 	"zone:read": "Grants read level access to account zone.",
 	"ssl_certs:write": "See and manage mTLS certificates for your account",
+	"constellation:write": "Manage Constellation AI projects/models",
 } as const;
 
 /**

package/src/utils/render.ts

@@ -0,0 +1,93 @@
+import { EventEmitter } from "events";
+import { render as inkRender } from "ink";
+import type { ReactElement } from "react";
+import type { WriteStream } from "tty";
+
+export function renderToString(tree: ReactElement): string {
+	const { output, cleanup } = render(tree);
+	cleanup();
+	return output;
+}
+
+// The code below is mostly copied from ink-render-string.
+// See https://github.com/zhanwang626/ink-render-string.git.
+
+// MIT License
+
+// Copyright (c) 2021 Zhan Wang
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+interface Instance {
+	output: string;
+	unmount: () => void;
+	cleanup: () => void;
+	stdout: OutputStream;
+	stderr: OutputStream;
+	frames: string[];
+}
+
+const LASTFRAME_UNDEFINED = "value of stdout.lastframe() is undefined";
+
+export class OutputStream extends EventEmitter {
+	readonly frames: string[] = [];
+	private _lastFrame?: string;
+
+	get columns(): number {
+		return this._originalStream.columns;
+	}
+	get rows(): number {
+		return this._originalStream.rows;
+	}
+
+	constructor(private _originalStream: WriteStream) {
+		super();
+	}
+
+	write = (frame: string) => {
+		this.frames.push(frame);
+		this._lastFrame = frame;
+	};
+
+	lastFrame = () => {
+		return this._lastFrame;
+	};
+}
+
+export const render = (tree: ReactElement): Instance => {
+	const stdout = new OutputStream(process.stdout);
+	const stderr = new OutputStream(process.stderr);
+
+	const instance = inkRender(tree, {
+		stdout: stdout as unknown as WriteStream,
+		stderr: stderr as unknown as WriteStream,
+		debug: true,
+		exitOnCtrlC: false,
+		patchConsole: false,
+	});
+
+	return {
+		output: stdout.lastFrame() || LASTFRAME_UNDEFINED,
+		stdout,
+		stderr,
+		cleanup: instance.cleanup,
+		unmount: instance.unmount,
+		frames: stdout.frames,
+	};
+};