wrangler 0.0.0-cd66b67 → 0.0.0-ce00a44c

package/src/dev/local.tsx

@@ -1,335 +0,0 @@
-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;
-}
-
-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,
-}: 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,
-			};
-
-			// 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...");
-			local.current = spawn(
-				"node",
-				[
-					"--experimental-vm-modules", // ensures that Miniflare can run ESM Workers
-					"--no-warnings", // hide annoying Node warnings
-					"--inspect", // start Miniflare listening for a debugger to attach
-					miniflareCLIPath,
-					optionsArg,
-					// "--log=VERBOSE", // uncomment this to Miniflare to log "everything"!
-				],
-				{
-					cwd: path.dirname(scriptPath),
-				}
-			);
-
-			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,
-	]);
-	return { inspectorUrl };
-}

package/src/dev/remote.tsx

@@ -1,288 +0,0 @@
-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 { 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 } from "../create-worker-preview";
-import type { AssetPaths } from "../sites";
-import type { ChooseAccountItem } from "../user";
-import type { CfModule, CfWorkerInit, CfScriptFormat } 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;
-}) {
-	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,
-	});
-
-	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;
-}): CfPreviewToken | undefined {
-	const {
-		name,
-		bundle,
-		format,
-		modules,
-		accountId,
-		bindings,
-		assetPaths,
-		compatibilityDate,
-		compatibilityFlags,
-		usageModel,
-		port,
-	} = props;
-	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);
-
-	useEffect(() => {
-		const abortController = new AbortController();
-		async function start() {
-			if (accountId === 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,
-			};
-			setToken(
-				await createWorkerPreview(
-					init,
-					{
-						accountId,
-						apiToken: requireApiToken(),
-					},
-					{
-						env: props.env,
-						legacyEnv: props.legacyEnv,
-						zone: props.zone,
-						host: props.host,
-						routes: props.routes,
-					},
-					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") {
-				// 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,
-	]);
-	return token;
-}