wrangler 0.0.0-e9ab55a → 0.0.0-ea7ee45

package/src/dev/local.tsx

@@ -0,0 +1,350 @@
+import { spawn } from "node:child_process";
+import { realpathSync } from "node:fs";
+import { writeFile } from "node:fs/promises";
+import path from "node:path";
+import { useState, useEffect, useRef } from "react";
+import onExit from "signal-exit";
+import useInspector from "../inspect";
+import { logger } from "../logger";
+import { DEFAULT_MODULE_RULES } from "../module-collection";
+import { waitForPortToBeAvailable } from "../proxy";
+import type { Config } from "../config";
+import type { AssetPaths } from "../sites";
+import type { CfWorkerInit, CfScriptFormat } from "../worker";
+import type { EsbuildBundle } from "./use-esbuild";
+import type { MiniflareOptions } from "miniflare";
+
+interface LocalProps {
+	name: string | undefined;
+	bundle: EsbuildBundle | undefined;
+	format: CfScriptFormat | undefined;
+	compatibilityDate: string;
+	compatibilityFlags: string[] | undefined;
+	bindings: CfWorkerInit["bindings"];
+	assetPaths: AssetPaths | undefined;
+	isWorkersSite: boolean;
+	port: number;
+	ip: string;
+	rules: Config["rules"];
+	inspectorPort: number;
+	enableLocalPersistence: boolean;
+	crons: Config["triggers"]["crons"];
+	localProtocol: "http" | "https";
+	localUpstream: string | undefined;
+	inspect: boolean | undefined;
+	onReady: (() => void) | undefined;
+	logLevel: "none" | "error" | "log" | "warn" | "debug" | undefined;
+}
+
+export function Local(props: LocalProps) {
+	const { inspectorUrl } = useLocalWorker(props);
+	useInspector({
+		inspectorUrl,
+		port: props.inspectorPort,
+		logToTerminal: false,
+	});
+	return null;
+}
+
+function useLocalWorker({
+	name: workerName,
+	bundle,
+	format,
+	compatibilityDate,
+	compatibilityFlags,
+	bindings,
+	assetPaths,
+	isWorkersSite,
+	port,
+	rules,
+	enableLocalPersistence,
+	ip,
+	crons,
+	localProtocol,
+	localUpstream,
+	inspect,
+	onReady,
+	logLevel,
+}: LocalProps) {
+	// TODO: pass vars via command line
+	const local = useRef<ReturnType<typeof spawn>>();
+	const removeSignalExitListener = useRef<() => void>();
+	const [inspectorUrl, setInspectorUrl] = useState<string | undefined>();
+	// if we're using local persistence for data, we should use the cwd
+	// as an explicit path, or else it'll use the temp dir
+	// which disappears when dev ends
+	const localPersistencePath = enableLocalPersistence
+		? // Maybe we could make the path configurable as well?
+		  path.join(process.cwd(), "wrangler-local-state")
+		: // We otherwise choose null, but choose true later
+		  // so that it's persisted in the temp dir across a dev session
+		  // even when we change source and reload
+		  null;
+	useEffect(() => {
+		const abortController = new AbortController();
+		async function startLocalWorker() {
+			if (!bundle || !format) return;
+
+			// port for the worker
+			await waitForPortToBeAvailable(port, {
+				retryPeriod: 200,
+				timeout: 2000,
+				abortSignal: abortController.signal,
+			});
+
+			if (bindings.services && bindings.services.length > 0) {
+				throw new Error(
+					"⎔ Service bindings are not yet supported in local mode."
+				);
+			}
+
+			// In local mode, we want to copy all referenced modules into
+			// the output bundle directory before starting up
+			for (const module of bundle.modules) {
+				await writeFile(
+					path.join(path.dirname(bundle.path), module.name),
+					module.content
+				);
+			}
+
+			const scriptPath = realpathSync(bundle.path);
+
+			// the wasm_modules/text_blobs/data_blobs bindings are
+			// relative to process.cwd(), but the actual worker bundle
+			// is in the temp output directory; so we rewrite the paths to be absolute,
+			// letting miniflare resolve them correctly
+
+			// wasm
+			const wasmBindings: Record<string, string> = {};
+			for (const [name, filePath] of Object.entries(
+				bindings.wasm_modules || {}
+			)) {
+				wasmBindings[name] = path.join(process.cwd(), filePath);
+			}
+
+			// text
+			const textBlobBindings: Record<string, string> = {};
+			for (const [name, filePath] of Object.entries(
+				bindings.text_blobs || {}
+			)) {
+				textBlobBindings[name] = path.join(process.cwd(), filePath);
+			}
+
+			// data
+			const dataBlobBindings: Record<string, string> = {};
+			for (const [name, filePath] of Object.entries(
+				bindings.data_blobs || {}
+			)) {
+				dataBlobBindings[name] = path.join(process.cwd(), filePath);
+			}
+
+			if (format === "service-worker") {
+				for (const { type, name } of bundle.modules) {
+					if (type === "compiled-wasm") {
+						// In service-worker format, .wasm modules are referenced by global identifiers,
+						// so we convert it here.
+						// This identifier has to be a valid JS identifier, so we replace all non alphanumeric
+						// characters with an underscore.
+						const identifier = name.replace(/[^a-zA-Z0-9_$]/g, "_");
+						wasmBindings[identifier] = name;
+					} else if (type === "text") {
+						// In service-worker format, text modules are referenced by global identifiers,
+						// so we convert it here.
+						// This identifier has to be a valid JS identifier, so we replace all non alphanumeric
+						// characters with an underscore.
+						const identifier = name.replace(/[^a-zA-Z0-9_$]/g, "_");
+						textBlobBindings[identifier] = name;
+					} else if (type === "buffer") {
+						// In service-worker format, data blobs are referenced by global identifiers,
+						// so we convert it here.
+						// This identifier has to be a valid JS identifier, so we replace all non alphanumeric
+						// characters with an underscore.
+						const identifier = name.replace(/[^a-zA-Z0-9_$]/g, "_");
+						dataBlobBindings[identifier] = name;
+					}
+				}
+			}
+
+			const upstream =
+				typeof localUpstream === "string"
+					? `${localProtocol}://${localUpstream}`
+					: undefined;
+
+			const options: MiniflareOptions = {
+				name: workerName,
+				port,
+				scriptPath,
+				https: localProtocol === "https",
+				host: ip,
+				modules: format === "modules",
+				modulesRules: (rules || [])
+					.concat(DEFAULT_MODULE_RULES)
+					.map(({ type, globs: include, fallthrough }) => ({
+						type,
+						include,
+						fallthrough,
+					})),
+				compatibilityDate,
+				compatibilityFlags,
+				kvNamespaces: bindings.kv_namespaces?.map((kv) => kv.binding),
+				durableObjects: Object.fromEntries(
+					(bindings.durable_objects?.bindings ?? []).map<[string, string]>(
+						(value) => [value.name, value.class_name]
+					)
+				),
+				...(localPersistencePath
+					? {
+							kvPersist: path.join(localPersistencePath, "kv"),
+							durableObjectsPersist: path.join(localPersistencePath, "do"),
+							cachePersist: path.join(localPersistencePath, "cache"),
+					  }
+					: {
+							// We mark these as true, so that they'll
+							// persist in the temp directory.
+							// This means they'll persist across a dev session,
+							// even if we change source and reload,
+							// and be deleted when the dev session ends
+							durableObjectsPersist: true,
+							cachePersist: true,
+							kvPersist: true,
+					  }),
+
+				sitePath: assetPaths?.assetDirectory
+					? path.join(assetPaths.baseDirectory, assetPaths.assetDirectory)
+					: undefined,
+				siteInclude: assetPaths?.includePatterns.length
+					? assetPaths?.includePatterns
+					: undefined,
+				siteExclude: assetPaths?.excludePatterns.length
+					? assetPaths.excludePatterns
+					: undefined,
+				bindings: bindings.vars,
+				wasmBindings,
+				textBlobBindings,
+				dataBlobBindings,
+				sourceMap: true,
+				logUnhandledRejections: true,
+				crons,
+				upstream,
+				disableLogs: logLevel === "none",
+			};
+
+			// The path to the Miniflare CLI assumes that this file is being run from
+			// `wrangler-dist` and that the CLI is found in `miniflare-dist`.
+			// If either of those paths change this line needs updating.
+			const miniflareCLIPath = path.resolve(
+				__dirname,
+				"../miniflare-dist/index.mjs"
+			);
+			const optionsArg = JSON.stringify(options, null);
+
+			logger.log("⎔ Starting a local server...");
+			const localServerOptions = [
+				"--experimental-vm-modules", // ensures that Miniflare can run ESM Workers
+				"--no-warnings", // hide annoying Node warnings
+				miniflareCLIPath,
+				optionsArg,
+				// "--log=VERBOSE", // uncomment this to Miniflare to log "everything"!
+			];
+			if (inspect) {
+				localServerOptions.push("--inspect"); // start Miniflare listening for a debugger to attach
+			}
+			// spawn isn't technically synchronous here
+			local.current = spawn("node", localServerOptions, {
+				cwd: path.dirname(scriptPath),
+			});
+			//TODO: instead of being lucky with spawn's timing, have miniflare-cli notify wrangler that it's ready in packages/wrangler/src/miniflare-cli/index.ts, after the mf.startScheduler promise resolves
+			if (onReady) {
+				await new Promise((resolve) => setTimeout(resolve, 200));
+				onReady();
+			}
+
+			local.current.on("close", (code) => {
+				if (code) {
+					logger.log(`Miniflare process exited with code ${code}`);
+				}
+			});
+
+			local.current.stdout?.on("data", (data: Buffer) => {
+				process.stdout.write(data);
+			});
+
+			// parse the node inspector url (which may be received in chunks) from stderr
+			let stderrData = "";
+			let inspectorUrlFound = false;
+			local.current.stderr?.on("data", (data: Buffer) => {
+				if (!inspectorUrlFound) {
+					stderrData += data.toString();
+					const matches =
+						/Debugger listening on (ws:\/\/127\.0\.0\.1:\d+\/[A-Za-z0-9-]+)[\r|\n]/.exec(
+							stderrData
+						);
+					if (matches) {
+						inspectorUrlFound = true;
+						setInspectorUrl(matches[1]);
+					}
+				}
+
+				process.stderr.write(data);
+			});
+
+			local.current.on("exit", (code) => {
+				if (code) {
+					logger.error(`Miniflare process exited with code ${code}`);
+				}
+			});
+
+			local.current.on("error", (error: Error) => {
+				logger.error(`Miniflare process failed to spawn`);
+				logger.error(error);
+			});
+
+			removeSignalExitListener.current = onExit((_code, _signal) => {
+				logger.log("⎔ Shutting down local server.");
+				local.current?.kill();
+				local.current = undefined;
+			});
+		}
+
+		startLocalWorker().catch((err) => {
+			logger.error("local worker:", err);
+		});
+
+		return () => {
+			abortController.abort();
+			if (local.current) {
+				logger.log("⎔ Shutting down local server.");
+				local.current?.kill();
+				local.current = undefined;
+				removeSignalExitListener.current && removeSignalExitListener.current();
+				removeSignalExitListener.current = undefined;
+			}
+		};
+	}, [
+		bundle,
+		workerName,
+		format,
+		port,
+		ip,
+		bindings.durable_objects?.bindings,
+		bindings.kv_namespaces,
+		bindings.vars,
+		bindings.services,
+		compatibilityDate,
+		compatibilityFlags,
+		localPersistencePath,
+		assetPaths,
+		isWorkersSite,
+		rules,
+		bindings.wasm_modules,
+		bindings.text_blobs,
+		bindings.data_blobs,
+		crons,
+		localProtocol,
+		localUpstream,
+		inspect,
+		logLevel,
+		onReady,
+	]);
+	return { inspectorUrl };
+}

package/src/dev/remote.tsx

@@ -0,0 +1,367 @@
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import React, { useState, useEffect, useRef } from "react";
+import { useErrorHandler } from "react-error-boundary";
+import { printBundleSize } from "../bundle-reporter";
+import {
+	createPreviewSession,
+	createWorkerPreview,
+} from "../create-worker-preview";
+import useInspector from "../inspect";
+import { logger } from "../logger";
+import { usePreviewServer } from "../proxy";
+import { syncAssets } from "../sites";
+import { ChooseAccount, getAccountChoices, requireApiToken } from "../user";
+import type { Route } from "../config/environment";
+import type {
+	CfPreviewToken,
+	CfPreviewSession,
+} from "../create-worker-preview";
+import type { AssetPaths } from "../sites";
+import type { ChooseAccountItem } from "../user";
+import type {
+	CfModule,
+	CfWorkerInit,
+	CfScriptFormat,
+	CfAccount,
+	CfWorkerContext,
+} from "../worker";
+import type { EsbuildBundle } from "./use-esbuild";
+
+export function Remote(props: {
+	name: string | undefined;
+	bundle: EsbuildBundle | undefined;
+	format: CfScriptFormat | undefined;
+	isWorkersSite: boolean;
+	assetPaths: AssetPaths | undefined;
+	port: number;
+	ip: string;
+	localProtocol: "https" | "http";
+	inspectorPort: number;
+	accountId: string | undefined;
+	bindings: CfWorkerInit["bindings"];
+	compatibilityDate: string;
+	compatibilityFlags: string[] | undefined;
+	usageModel: "bundled" | "unbound" | undefined;
+	env: string | undefined;
+	legacyEnv: boolean | undefined;
+	zone: string | undefined;
+	host: string | undefined;
+	routes: Route[] | undefined;
+	onReady?: () => void;
+}) {
+	const [accountId, setAccountId] = useState(props.accountId);
+	const accountChoicesRef = useRef<Promise<ChooseAccountItem[]>>();
+	const [accountChoices, setAccountChoices] = useState<ChooseAccountItem[]>();
+
+	const previewToken = useWorker({
+		name: props.name,
+		bundle: props.bundle,
+		format: props.format,
+		modules: props.bundle ? props.bundle.modules : [],
+		accountId,
+		bindings: props.bindings,
+		assetPaths: props.assetPaths,
+		isWorkersSite: props.isWorkersSite,
+		port: props.port,
+		compatibilityDate: props.compatibilityDate,
+		compatibilityFlags: props.compatibilityFlags,
+		usageModel: props.usageModel,
+		env: props.env,
+		legacyEnv: props.legacyEnv,
+		zone: props.zone,
+		host: props.host,
+		routes: props.routes,
+		onReady: props.onReady,
+	});
+
+	usePreviewServer({
+		previewToken,
+		assetDirectory: props.isWorkersSite
+			? undefined
+			: props.assetPaths?.assetDirectory,
+		localProtocol: props.localProtocol,
+		localPort: props.port,
+		ip: props.ip,
+	});
+
+	useInspector({
+		inspectorUrl: previewToken ? previewToken.inspectorUrl.href : undefined,
+		port: props.inspectorPort,
+		logToTerminal: true,
+	});
+
+	const errorHandler = useErrorHandler();
+
+	// This effect handles the async step of fetching the available accounts for the current user.
+	// If only one account is available then it is just used by calling `setAccountId()`.
+	useEffect(() => {
+		if (accountChoicesRef.current !== undefined) {
+			return;
+		}
+		accountChoicesRef.current = getAccountChoices();
+		accountChoicesRef.current.then(
+			(accounts) => {
+				if (accounts.length === 1) {
+					setAccountId(accounts[0].id);
+				} else {
+					setAccountChoices(accounts);
+				}
+			},
+			(err) => {
+				errorHandler(err);
+			}
+		);
+	});
+
+	// If we have not already chosen an account and there are multiple accounts available
+	// allow the users to select one.
+	return accountId === undefined && accountChoices !== undefined ? (
+		<ChooseAccount
+			accounts={accountChoices}
+			onSelect={(selectedAccountId) => setAccountId(selectedAccountId)}
+			onError={(err) => errorHandler(err)}
+		></ChooseAccount>
+	) : null;
+}
+
+export function useWorker(props: {
+	name: string | undefined;
+	bundle: EsbuildBundle | undefined;
+	format: CfScriptFormat | undefined;
+	modules: CfModule[];
+	accountId: string | undefined;
+	bindings: CfWorkerInit["bindings"];
+	assetPaths: AssetPaths | undefined;
+	isWorkersSite: boolean;
+	port: number;
+	compatibilityDate: string | undefined;
+	compatibilityFlags: string[] | undefined;
+	usageModel: "bundled" | "unbound" | undefined;
+	env: string | undefined;
+	legacyEnv: boolean | undefined;
+	zone: string | undefined;
+	host: string | undefined;
+	routes: Route[] | undefined;
+	onReady?: () => void;
+}): CfPreviewToken | undefined {
+	const {
+		name,
+		bundle,
+		format,
+		modules,
+		accountId,
+		bindings,
+		assetPaths,
+		compatibilityDate,
+		compatibilityFlags,
+		usageModel,
+		port,
+		onReady,
+	} = props;
+	const [session, setSession] = useState<CfPreviewSession | undefined>();
+	const [token, setToken] = useState<CfPreviewToken | undefined>();
+
+	// This is the most reliable way to detect whether
+	// something's "happened" in our system; We make a ref and
+	// mark it once we log our initial message. Refs are vars!
+	const startedRef = useRef(false);
+
+	// This effect sets up the preview session
+	useEffect(() => {
+		const abortController = new AbortController();
+		async function start() {
+			if (accountId === undefined) {
+				return;
+			}
+
+			const workerAccount: CfAccount = {
+				accountId,
+				apiToken: requireApiToken(),
+			};
+
+			const workerCtx: CfWorkerContext = {
+				env: props.env,
+				legacyEnv: props.legacyEnv,
+				zone: props.zone,
+				host: props.host,
+				routes: props.routes,
+			};
+
+			setSession(
+				await createPreviewSession(
+					workerAccount,
+					workerCtx,
+					abortController.signal
+				)
+			);
+		}
+		start().catch((err) => {
+			// we want to log the error, but not end the process
+			// since it could recover after the developer fixes whatever's wrong
+			if ((err as { code: string }).code !== "ABORT_ERR") {
+				logger.error("Error while creating remote dev session:", err);
+			}
+		});
+
+		return () => {
+			abortController.abort();
+		};
+	}, [
+		accountId,
+		props.env,
+		props.host,
+		props.legacyEnv,
+		props.routes,
+		props.zone,
+	]);
+
+	// This effect uses the session to upload the worker and create a preview
+	useEffect(() => {
+		const abortController = new AbortController();
+		async function start() {
+			if (accountId === undefined) {
+				return;
+			}
+			if (session === undefined) {
+				return;
+			}
+			setToken(undefined); // reset token in case we're re-running
+
+			if (!bundle || !format) return;
+
+			if (!startedRef.current) {
+				startedRef.current = true;
+			} else {
+				logger.log("⎔ Detected changes, restarted server.");
+			}
+
+			const content = await readFile(bundle.path, "utf-8");
+
+			// TODO: For Dev we could show the reporter message in the interactive box.
+			void printBundleSize(
+				{ name: path.basename(bundle.path), content: content },
+				modules
+			);
+
+			const assets = await syncAssets(
+				accountId,
+				// When we're using the newer service environments, we wouldn't
+				// have added the env name on to the script name. However, we must
+				// include it in the kv namespace name regardless (since there's no
+				// concept of service environments for kv namespaces yet).
+				name + (!props.legacyEnv && props.env ? `-${props.env}` : ""),
+				props.isWorkersSite ? assetPaths : undefined,
+				true,
+				false
+			); // TODO: cancellable?
+
+			const init: CfWorkerInit = {
+				name,
+				main: {
+					name: path.basename(bundle.path),
+					type: format === "modules" ? "esm" : "commonjs",
+					content,
+				},
+				modules: modules.concat(
+					assets.manifest
+						? {
+								name: "__STATIC_CONTENT_MANIFEST",
+								content: JSON.stringify(assets.manifest),
+								type: "text",
+						  }
+						: []
+				),
+				bindings: {
+					...bindings,
+					kv_namespaces: (bindings.kv_namespaces || []).concat(
+						assets.namespace
+							? { binding: "__STATIC_CONTENT", id: assets.namespace }
+							: []
+					),
+					text_blobs: {
+						...bindings.text_blobs,
+						...(assets.manifest &&
+							format === "service-worker" && {
+								__STATIC_CONTENT_MANIFEST: "__STATIC_CONTENT_MANIFEST",
+							}),
+					},
+				},
+				migrations: undefined, // no migrations in dev
+				compatibility_date: compatibilityDate,
+				compatibility_flags: compatibilityFlags,
+				usage_model: usageModel,
+			};
+
+			const workerAccount: CfAccount = {
+				accountId,
+				apiToken: requireApiToken(),
+			};
+
+			const workerCtx: CfWorkerContext = {
+				env: props.env,
+				legacyEnv: props.legacyEnv,
+				zone: props.zone,
+				host: props.host,
+				routes: props.routes,
+			};
+
+			setToken(
+				await createWorkerPreview(
+					init,
+					workerAccount,
+					workerCtx,
+					session,
+					abortController.signal
+				)
+			);
+			onReady?.();
+		}
+		start().catch((err) => {
+			// we want to log the error, but not end the process
+			// since it could recover after the developer fixes whatever's wrong
+			if ((err as { code: string }).code !== "ABORT_ERR") {
+				// instead of logging the raw API error to the user,
+				// give them friendly instructions
+				// for error 10063 (workers.dev subdomain required)
+				if (err.code === 10063) {
+					const errorMessage =
+						"Error: You need to register a workers.dev subdomain before running the dev command in remote mode";
+					const solutionMessage =
+						"You can either enable local mode by pressing l, or register a workers.dev subdomain here:";
+					const onboardingLink = `https://dash.cloudflare.com/${accountId}/workers/onboarding`;
+					logger.error(
+						`${errorMessage}\n${solutionMessage}\n${onboardingLink}`
+					);
+				} else {
+					logger.error("Error on remote worker:", err);
+				}
+			}
+		});
+
+		return () => {
+			abortController.abort();
+		};
+	}, [
+		name,
+		bundle,
+		format,
+		accountId,
+		port,
+		assetPaths,
+		props.isWorkersSite,
+		compatibilityDate,
+		compatibilityFlags,
+		usageModel,
+		bindings,
+		modules,
+		props.env,
+		props.legacyEnv,
+		props.zone,
+		props.host,
+		props.routes,
+		session,
+		onReady,
+	]);
+	return token;
+}