wrangler 2.0.12 → 2.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (149) hide show
  1. package/README.md +7 -1
  2. package/bin/wrangler.js +111 -57
  3. package/miniflare-dist/index.mjs +9 -2
  4. package/package.json +156 -154
  5. package/src/__tests__/config-cache-without-cache-dir.test.ts +38 -0
  6. package/src/__tests__/config-cache.test.ts +30 -24
  7. package/src/__tests__/configuration.test.ts +3935 -3476
  8. package/src/__tests__/dev.test.tsx +1128 -979
  9. package/src/__tests__/guess-worker-format.test.ts +68 -68
  10. package/src/__tests__/helpers/cmd-shim.d.ts +6 -6
  11. package/src/__tests__/helpers/faye-websocket.d.ts +4 -4
  12. package/src/__tests__/helpers/mock-account-id.ts +24 -24
  13. package/src/__tests__/helpers/mock-bin.ts +20 -20
  14. package/src/__tests__/helpers/mock-cfetch.ts +92 -92
  15. package/src/__tests__/helpers/mock-console.ts +49 -39
  16. package/src/__tests__/helpers/mock-dialogs.ts +94 -71
  17. package/src/__tests__/helpers/mock-http-server.ts +30 -30
  18. package/src/__tests__/helpers/mock-istty.ts +65 -18
  19. package/src/__tests__/helpers/mock-kv.ts +26 -26
  20. package/src/__tests__/helpers/mock-oauth-flow.ts +223 -228
  21. package/src/__tests__/helpers/mock-process.ts +39 -0
  22. package/src/__tests__/helpers/mock-stdin.ts +82 -77
  23. package/src/__tests__/helpers/mock-web-socket.ts +21 -21
  24. package/src/__tests__/helpers/run-in-tmp.ts +27 -27
  25. package/src/__tests__/helpers/run-wrangler.ts +8 -8
  26. package/src/__tests__/helpers/write-worker-source.ts +16 -16
  27. package/src/__tests__/helpers/write-wrangler-toml.ts +9 -9
  28. package/src/__tests__/https-options.test.ts +104 -104
  29. package/src/__tests__/index.test.ts +239 -234
  30. package/src/__tests__/init.test.ts +1605 -1250
  31. package/src/__tests__/jest.setup.ts +63 -33
  32. package/src/__tests__/kv.test.ts +1128 -1011
  33. package/src/__tests__/logger.test.ts +100 -74
  34. package/src/__tests__/package-manager.test.ts +303 -303
  35. package/src/__tests__/pages.test.ts +1152 -652
  36. package/src/__tests__/parse.test.ts +252 -252
  37. package/src/__tests__/publish.test.ts +6371 -5622
  38. package/src/__tests__/pubsub.test.ts +367 -0
  39. package/src/__tests__/r2.test.ts +133 -133
  40. package/src/__tests__/route.test.ts +18 -18
  41. package/src/__tests__/secret.test.ts +382 -377
  42. package/src/__tests__/tail.test.ts +530 -530
  43. package/src/__tests__/user.test.ts +123 -111
  44. package/src/__tests__/whoami.test.tsx +198 -117
  45. package/src/__tests__/worker-namespace.test.ts +327 -0
  46. package/src/abort.d.ts +1 -1
  47. package/src/api/dev.ts +49 -0
  48. package/src/api/index.ts +1 -0
  49. package/src/bundle-reporter.tsx +29 -0
  50. package/src/bundle.ts +157 -149
  51. package/src/cfetch/index.ts +80 -80
  52. package/src/cfetch/internal.ts +90 -83
  53. package/src/cli.ts +21 -7
  54. package/src/config/config.ts +204 -195
  55. package/src/config/diagnostics.ts +61 -61
  56. package/src/config/environment.ts +390 -357
  57. package/src/config/index.ts +206 -193
  58. package/src/config/validation-helpers.ts +366 -366
  59. package/src/config/validation.ts +1573 -1376
  60. package/src/config-cache.ts +79 -41
  61. package/src/create-worker-preview.ts +206 -136
  62. package/src/create-worker-upload-form.ts +247 -238
  63. package/src/dev/dev-vars.ts +13 -13
  64. package/src/dev/dev.tsx +329 -307
  65. package/src/dev/local.tsx +304 -275
  66. package/src/dev/remote.tsx +366 -224
  67. package/src/dev/use-esbuild.ts +126 -91
  68. package/src/dev.tsx +538 -0
  69. package/src/dialogs.tsx +97 -97
  70. package/src/durable.ts +87 -87
  71. package/src/entry.ts +234 -228
  72. package/src/environment-variables.ts +23 -23
  73. package/src/errors.ts +6 -6
  74. package/src/generate.ts +33 -0
  75. package/src/git-client.ts +42 -0
  76. package/src/https-options.ts +79 -79
  77. package/src/index.tsx +1775 -2763
  78. package/src/init.ts +549 -0
  79. package/src/inspect.ts +593 -593
  80. package/src/intl-polyfill.d.ts +123 -123
  81. package/src/is-interactive.ts +12 -0
  82. package/src/kv.ts +277 -277
  83. package/src/logger.ts +46 -39
  84. package/src/miniflare-cli/enum-keys.ts +8 -8
  85. package/src/miniflare-cli/index.ts +42 -31
  86. package/src/miniflare-cli/request-context.ts +18 -18
  87. package/src/module-collection.ts +212 -212
  88. package/src/open-in-browser.ts +4 -6
  89. package/src/package-manager.ts +123 -123
  90. package/src/pages/build.tsx +202 -0
  91. package/src/pages/constants.ts +7 -0
  92. package/src/pages/deployments.tsx +101 -0
  93. package/src/pages/dev.tsx +964 -0
  94. package/src/pages/functions/buildPlugin.ts +105 -0
  95. package/src/pages/functions/buildWorker.ts +151 -0
  96. package/{pages → src/pages}/functions/filepath-routing.test.ts +113 -113
  97. package/src/pages/functions/filepath-routing.ts +189 -0
  98. package/src/pages/functions/identifiers.ts +78 -0
  99. package/src/pages/functions/routes.ts +151 -0
  100. package/src/pages/index.tsx +84 -0
  101. package/src/pages/projects.tsx +157 -0
  102. package/src/pages/publish.tsx +335 -0
  103. package/src/pages/types.ts +40 -0
  104. package/src/pages/upload.tsx +384 -0
  105. package/src/pages/utils.ts +12 -0
  106. package/src/parse.ts +202 -138
  107. package/src/paths.ts +6 -6
  108. package/src/preview.ts +31 -0
  109. package/src/proxy.ts +400 -402
  110. package/src/publish.ts +667 -621
  111. package/src/pubsub/index.ts +286 -0
  112. package/src/pubsub/pubsub-commands.tsx +577 -0
  113. package/src/r2.ts +19 -19
  114. package/src/selfsigned.d.ts +23 -23
  115. package/src/sites.tsx +271 -225
  116. package/src/tail/filters.ts +108 -108
  117. package/src/tail/index.ts +217 -217
  118. package/src/tail/printing.ts +45 -45
  119. package/src/update-check.ts +11 -11
  120. package/src/user/choose-account.tsx +60 -0
  121. package/src/user/env-vars.ts +46 -0
  122. package/src/user/generate-auth-url.ts +33 -0
  123. package/src/user/generate-random-state.ts +16 -0
  124. package/src/user/index.ts +3 -0
  125. package/src/user/user.tsx +1161 -0
  126. package/src/whoami.tsx +61 -42
  127. package/src/worker-namespace.ts +190 -0
  128. package/src/worker.ts +110 -100
  129. package/src/zones.ts +39 -36
  130. package/templates/checked-fetch.js +17 -0
  131. package/templates/new-worker-scheduled.js +3 -3
  132. package/templates/new-worker-scheduled.ts +15 -15
  133. package/templates/new-worker.js +3 -3
  134. package/templates/new-worker.ts +15 -15
  135. package/templates/no-op-worker.js +10 -0
  136. package/templates/pages-template-plugin.ts +155 -0
  137. package/templates/pages-template-worker.ts +161 -0
  138. package/templates/static-asset-facade.js +31 -31
  139. package/templates/tsconfig.json +95 -95
  140. package/wrangler-dist/cli.js +55383 -54138
  141. package/pages/functions/buildPlugin.ts +0 -105
  142. package/pages/functions/buildWorker.ts +0 -151
  143. package/pages/functions/filepath-routing.ts +0 -189
  144. package/pages/functions/identifiers.ts +0 -78
  145. package/pages/functions/routes.ts +0 -156
  146. package/pages/functions/template-plugin.ts +0 -147
  147. package/pages/functions/template-worker.ts +0 -143
  148. package/src/pages.tsx +0 -2093
  149. package/src/user.tsx +0 -1214
package/src/proxy.ts CHANGED
@@ -10,19 +10,19 @@ import { logger } from "./logger";
10
10
  import type { CfPreviewToken } from "./create-worker-preview";
11
11
  import type { HttpTerminator } from "http-terminator";
12
12
  import type {
13
- IncomingHttpHeaders,
14
- RequestListener,
15
- IncomingMessage,
16
- ServerResponse,
17
- Server as HttpServer,
13
+ IncomingHttpHeaders,
14
+ RequestListener,
15
+ IncomingMessage,
16
+ ServerResponse,
17
+ Server as HttpServer,
18
18
  } from "node:http";
19
19
  import type { ClientHttp2Session, ServerHttp2Stream } from "node:http2";
20
20
  import type { Server as HttpsServer } from "node:https";
21
21
  import type ws from "ws";
22
22
 
23
23
  interface IWebsocket extends ws {
24
- // Pipe implements .on("message", ...)
25
- pipe<T>(fn: T): IWebsocket;
24
+ // Pipe implements .on("message", ...)
25
+ pipe<T>(fn: T): IWebsocket;
26
26
  }
27
27
 
28
28
  /**
@@ -40,10 +40,10 @@ interface IWebsocket extends ws {
40
40
 
41
41
  /** Rewrite request headers to add the preview token. */
42
42
  function addCfPreviewTokenHeader(
43
- headers: IncomingHttpHeaders,
44
- previewTokenValue: string
43
+ headers: IncomingHttpHeaders,
44
+ previewTokenValue: string
45
45
  ) {
46
- headers["cf-workers-preview-token"] = previewTokenValue;
46
+ headers["cf-workers-preview-token"] = previewTokenValue;
47
47
  }
48
48
 
49
49
  /**
@@ -51,428 +51,426 @@ function addCfPreviewTokenHeader(
51
51
  * from the preview host to the local host.
52
52
  */
53
53
  function rewriteRemoteHostToLocalHostInHeaders(
54
- headers: IncomingHttpHeaders,
55
- remoteHost: string,
56
- localPort: number,
57
- localProtocol: "https" | "http"
54
+ headers: IncomingHttpHeaders,
55
+ remoteHost: string,
56
+ localPort: number,
57
+ localProtocol: "https" | "http"
58
58
  ) {
59
- for (const [name, value] of Object.entries(headers)) {
60
- // Rewrite the remote host to the local host.
61
- if (typeof value === "string" && value.includes(remoteHost)) {
62
- headers[name] = value
63
- .replaceAll(
64
- `https://${remoteHost}`,
65
- `${localProtocol}://localhost:${localPort}`
66
- )
67
- .replaceAll(remoteHost, `localhost:${localPort}`);
68
- }
69
- }
59
+ for (const [name, value] of Object.entries(headers)) {
60
+ // Rewrite the remote host to the local host.
61
+ if (typeof value === "string" && value.includes(remoteHost)) {
62
+ headers[name] = value
63
+ .replaceAll(
64
+ `https://${remoteHost}`,
65
+ `${localProtocol}://localhost:${localPort}`
66
+ )
67
+ .replaceAll(remoteHost, `localhost:${localPort}`);
68
+ }
69
+ }
70
70
  }
71
71
 
72
72
  type PreviewProxy = {
73
- server: HttpServer | HttpsServer;
74
- terminator: HttpTerminator;
73
+ server: HttpServer | HttpsServer;
74
+ terminator: HttpTerminator;
75
75
  };
76
76
 
77
77
  export function usePreviewServer({
78
- previewToken,
79
- publicRoot,
80
- localProtocol,
81
- localPort: port,
82
- ip,
78
+ previewToken,
79
+ assetDirectory,
80
+ localProtocol,
81
+ localPort: port,
82
+ ip,
83
83
  }: {
84
- previewToken: CfPreviewToken | undefined;
85
- publicRoot: string | undefined;
86
- localProtocol: "https" | "http";
87
- localPort: number;
88
- ip: string;
84
+ previewToken: CfPreviewToken | undefined;
85
+ assetDirectory: string | undefined;
86
+ localProtocol: "https" | "http";
87
+ localPort: number;
88
+ ip: string;
89
89
  }) {
90
- /** Creates an HTTP/1 proxy that sends requests over HTTP/2. */
91
- const [proxy, setProxy] = useState<PreviewProxy>();
92
-
93
- /**
94
- * Create the instance of the local proxy server that will pass on
95
- * requests to the preview worker.
96
- */
97
- useEffect(() => {
98
- if (proxy === undefined) {
99
- createProxyServer(localProtocol)
100
- .then((server) => {
101
- setProxy({
102
- server,
103
- terminator: createHttpTerminator({
104
- server,
105
- gracefulTerminationTimeout: 0,
106
- }),
107
- });
108
- })
109
- .catch(async (err) => {
110
- logger.error("Failed to create proxy server:", err);
111
- });
112
- }
113
- }, [proxy, localProtocol]);
114
-
115
- /**
116
- * When we're not connected / getting a fresh token on changes,
117
- * we'd like to buffer streams/requests until we're connected.
118
- * Once connected, we can flush the buffered streams/requests.
119
- * streamBufferRef is used to buffer http/2 streams, while
120
- * requestResponseBufferRef is used to buffer http/1 requests.
121
- */
122
- const streamBufferRef = useRef<
123
- { stream: ServerHttp2Stream; headers: IncomingHttpHeaders }[]
124
- >([]);
125
- const requestResponseBufferRef = useRef<
126
- { request: IncomingMessage; response: ServerResponse }[]
127
- >([]);
128
-
129
- /**
130
- * The session doesn't last forever, and will eventually drop
131
- * (usually within 5-15 minutes). When that happens, we simply
132
- * restart the effect, effectively restarting the server. We use
133
- * a state sigil as an effect dependency to do so.
134
- */
135
- const [retryServerSetupSigil, setRetryServerSetupSigil] = useState<number>(0);
136
- function retryServerSetup() {
137
- setRetryServerSetupSigil((x) => x + 1);
138
- }
139
-
140
- useEffect(() => {
141
- if (proxy === undefined) {
142
- return;
143
- }
144
-
145
- // If we don't have a token, that means either we're just starting up,
146
- // or we're refreshing the token.
147
- if (!previewToken) {
148
- const cleanupListeners: (() => void)[] = [];
149
- const bufferStream = (
150
- stream: ServerHttp2Stream,
151
- headers: IncomingHttpHeaders
152
- ) => {
153
- // store the stream in a buffer so we can replay it later
154
- streamBufferRef.current.push({ stream, headers });
155
- };
156
- proxy.server.on("stream", bufferStream);
157
- cleanupListeners.push(() => proxy.server.off("stream", bufferStream));
158
-
159
- const bufferRequestResponse = (
160
- request: IncomingMessage,
161
- response: ServerResponse
162
- ) => {
163
- // store the request and response in a buffer so we can replay it later
164
- requestResponseBufferRef.current.push({ request, response });
165
- };
166
-
167
- proxy.server.on("request", bufferRequestResponse);
168
- cleanupListeners.push(() =>
169
- proxy.server.off("request", bufferRequestResponse)
170
- );
171
- return () => {
172
- cleanupListeners.forEach((cleanup) => cleanup());
173
- };
174
- }
175
-
176
- // We have a token. Let's proxy requests to the preview end point.
177
- const cleanupListeners: (() => void)[] = [];
178
-
179
- const assetPath = typeof publicRoot === "string" ? publicRoot : null;
180
-
181
- // create a ClientHttp2Session
182
- const remote = connect(`https://${previewToken.host}`);
183
- cleanupListeners.push(() => remote.destroy());
184
-
185
- // As mentioned above, the session may die at any point,
186
- // so we need to restart the effect.
187
- remote.on("close", retryServerSetup);
188
- cleanupListeners.push(() => remote.off("close", retryServerSetup));
189
-
190
- /** HTTP/2 -> HTTP/2 */
191
- const handleStream = createStreamHandler(
192
- previewToken,
193
- remote,
194
- port,
195
- localProtocol
196
- );
197
- proxy.server.on("stream", handleStream);
198
- cleanupListeners.push(() => proxy.server.off("stream", handleStream));
199
-
200
- // flush and replay buffered streams
201
- streamBufferRef.current.forEach((buffer) =>
202
- handleStream(buffer.stream, buffer.headers)
203
- );
204
- streamBufferRef.current = [];
205
-
206
- /** HTTP/1 -> HTTP/2 */
207
- const handleRequest: RequestListener = (
208
- message: IncomingMessage,
209
- response: ServerResponse
210
- ) => {
211
- const { httpVersionMajor, headers, method, url } = message;
212
- if (httpVersionMajor >= 2) {
213
- return; // Already handled by the "stream" event.
214
- }
215
- addCfPreviewTokenHeader(headers, previewToken.value);
216
- headers[":method"] = method;
217
- headers[":path"] = url;
218
- headers[":authority"] = previewToken.host;
219
- headers[":scheme"] = "https";
220
- for (const name of Object.keys(headers)) {
221
- if (HTTP1_HEADERS.has(name.toLowerCase())) {
222
- delete headers[name];
223
- }
224
- }
225
- const request = message.pipe(remote.request(headers));
226
- request.on("response", (responseHeaders) => {
227
- const status = responseHeaders[":status"] ?? 500;
228
-
229
- // log all requests to terminal
230
- logger.log(new Date().toLocaleTimeString(), method, url, status);
231
-
232
- rewriteRemoteHostToLocalHostInHeaders(
233
- responseHeaders,
234
- previewToken.host,
235
- port,
236
- localProtocol
237
- );
238
- for (const name of Object.keys(responseHeaders)) {
239
- if (name.startsWith(":")) {
240
- delete responseHeaders[name];
241
- }
242
- }
243
- response.writeHead(status, responseHeaders);
244
- request.pipe(response, { end: true });
245
- });
246
- };
247
-
248
- // If an asset path is defined, check the file system
249
- // for a file first and serve if it exists.
250
- const actualHandleRequest = assetPath
251
- ? createHandleAssetsRequest(assetPath, handleRequest)
252
- : handleRequest;
253
-
254
- proxy.server.on("request", actualHandleRequest);
255
- cleanupListeners.push(() =>
256
- proxy.server.off("request", actualHandleRequest)
257
- );
258
-
259
- // flush and replay buffered requests
260
- requestResponseBufferRef.current.forEach(({ request, response }) =>
261
- actualHandleRequest(request, response)
262
- );
263
- requestResponseBufferRef.current = [];
264
-
265
- /** HTTP/1 -> WebSocket (over HTTP/1) */
266
- const handleUpgrade = (
267
- message: IncomingMessage,
268
- socket: WebSocket,
269
- body: Buffer
270
- ) => {
271
- const { headers, url } = message;
272
- addCfPreviewTokenHeader(headers, previewToken.value);
273
- headers["host"] = previewToken.host;
274
- const localWebsocket = new WebSocket(message, socket, body) as IWebsocket;
275
- // TODO(soon): Custom WebSocket protocol is not working?
276
- const remoteWebsocketClient = new WebSocket.Client(
277
- `wss://${previewToken.host}${url}`,
278
- [],
279
- { headers }
280
- ) as IWebsocket;
281
- localWebsocket.pipe(remoteWebsocketClient).pipe(localWebsocket);
282
- // We close down websockets whenever we refresh the token.
283
- cleanupListeners.push(() => {
284
- localWebsocket.close();
285
- remoteWebsocketClient.close();
286
- });
287
- };
288
- proxy.server.on("upgrade", handleUpgrade);
289
- cleanupListeners.push(() => proxy.server.off("upgrade", handleUpgrade));
290
-
291
- return () => {
292
- cleanupListeners.forEach((cleanup) => cleanup());
293
- };
294
- }, [
295
- previewToken,
296
- publicRoot,
297
- port,
298
- localProtocol,
299
- proxy,
300
- // We use a state value as a sigil to trigger reconnecting the server.
301
- // It's not used inside the effect, so react-hooks/exhaustive-deps
302
- // doesn't complain if it's not included in the dependency array.
303
- // But its presence is critical, so Do NOT remove it from the dependency list.
304
- retryServerSetupSigil,
305
- ]);
306
-
307
- // Start/stop the server whenever the
308
- // containing component is mounted/unmounted.
309
- useEffect(() => {
310
- const abortController = new AbortController();
311
- if (proxy === undefined) {
312
- return;
313
- }
314
-
315
- waitForPortToBeAvailable(port, {
316
- retryPeriod: 200,
317
- timeout: 2000,
318
- abortSignal: abortController.signal,
319
- })
320
- .then(() => {
321
- proxy.server.on("listening", () => {
322
- logger.log(`⬣ Listening at ${localProtocol}://${ip}:${port}`);
323
- });
324
- proxy.server.listen(port, ip);
325
- })
326
- .catch((err) => {
327
- if ((err as { code: string }).code !== "ABORT_ERR") {
328
- logger.error(`Failed to start server: ${err}`);
329
- }
330
- });
331
-
332
- return () => {
333
- abortController.abort();
334
- // Running `proxy.server.close()` does not close open connections, preventing the process from exiting.
335
- // So we use this `terminator` to close all the connections and force the server to shutdown.
336
- proxy.terminator
337
- .terminate()
338
- .catch(() => logger.error("Failed to terminate the proxy server."));
339
- };
340
- }, [port, ip, proxy, localProtocol]);
90
+ /** Creates an HTTP/1 proxy that sends requests over HTTP/2. */
91
+ const [proxy, setProxy] = useState<PreviewProxy>();
92
+
93
+ /**
94
+ * Create the instance of the local proxy server that will pass on
95
+ * requests to the preview worker.
96
+ */
97
+ useEffect(() => {
98
+ if (proxy === undefined) {
99
+ createProxyServer(localProtocol)
100
+ .then((server) => {
101
+ setProxy({
102
+ server,
103
+ terminator: createHttpTerminator({
104
+ server,
105
+ gracefulTerminationTimeout: 0,
106
+ }),
107
+ });
108
+ })
109
+ .catch(async (err) => {
110
+ logger.error("Failed to create proxy server:", err);
111
+ });
112
+ }
113
+ }, [proxy, localProtocol]);
114
+
115
+ /**
116
+ * When we're not connected / getting a fresh token on changes,
117
+ * we'd like to buffer streams/requests until we're connected.
118
+ * Once connected, we can flush the buffered streams/requests.
119
+ * streamBufferRef is used to buffer http/2 streams, while
120
+ * requestResponseBufferRef is used to buffer http/1 requests.
121
+ */
122
+ const streamBufferRef = useRef<
123
+ { stream: ServerHttp2Stream; headers: IncomingHttpHeaders }[]
124
+ >([]);
125
+ const requestResponseBufferRef = useRef<
126
+ { request: IncomingMessage; response: ServerResponse }[]
127
+ >([]);
128
+
129
+ /**
130
+ * The session doesn't last forever, and will eventually drop
131
+ * (usually within 5-15 minutes). When that happens, we simply
132
+ * restart the effect, effectively restarting the server. We use
133
+ * a state sigil as an effect dependency to do so.
134
+ */
135
+ const [retryServerSetupSigil, setRetryServerSetupSigil] = useState<number>(0);
136
+ function retryServerSetup() {
137
+ setRetryServerSetupSigil((x) => x + 1);
138
+ }
139
+
140
+ useEffect(() => {
141
+ if (proxy === undefined) {
142
+ return;
143
+ }
144
+
145
+ // If we don't have a token, that means either we're just starting up,
146
+ // or we're refreshing the token.
147
+ if (!previewToken) {
148
+ const cleanupListeners: (() => void)[] = [];
149
+ const bufferStream = (
150
+ stream: ServerHttp2Stream,
151
+ headers: IncomingHttpHeaders
152
+ ) => {
153
+ // store the stream in a buffer so we can replay it later
154
+ streamBufferRef.current.push({ stream, headers });
155
+ };
156
+ proxy.server.on("stream", bufferStream);
157
+ cleanupListeners.push(() => proxy.server.off("stream", bufferStream));
158
+
159
+ const bufferRequestResponse = (
160
+ request: IncomingMessage,
161
+ response: ServerResponse
162
+ ) => {
163
+ // store the request and response in a buffer so we can replay it later
164
+ requestResponseBufferRef.current.push({ request, response });
165
+ };
166
+
167
+ proxy.server.on("request", bufferRequestResponse);
168
+ cleanupListeners.push(() =>
169
+ proxy.server.off("request", bufferRequestResponse)
170
+ );
171
+ return () => {
172
+ cleanupListeners.forEach((cleanup) => cleanup());
173
+ };
174
+ }
175
+
176
+ // We have a token. Let's proxy requests to the preview end point.
177
+ const cleanupListeners: (() => void)[] = [];
178
+
179
+ // create a ClientHttp2Session
180
+ const remote = connect(`https://${previewToken.host}`);
181
+ cleanupListeners.push(() => remote.destroy());
182
+
183
+ // As mentioned above, the session may die at any point,
184
+ // so we need to restart the effect.
185
+ remote.on("close", retryServerSetup);
186
+ cleanupListeners.push(() => remote.off("close", retryServerSetup));
187
+
188
+ /** HTTP/2 -> HTTP/2 */
189
+ const handleStream = createStreamHandler(
190
+ previewToken,
191
+ remote,
192
+ port,
193
+ localProtocol
194
+ );
195
+ proxy.server.on("stream", handleStream);
196
+ cleanupListeners.push(() => proxy.server.off("stream", handleStream));
197
+
198
+ // flush and replay buffered streams
199
+ streamBufferRef.current.forEach((buffer) =>
200
+ handleStream(buffer.stream, buffer.headers)
201
+ );
202
+ streamBufferRef.current = [];
203
+
204
+ /** HTTP/1 -> HTTP/2 */
205
+ const handleRequest: RequestListener = (
206
+ message: IncomingMessage,
207
+ response: ServerResponse
208
+ ) => {
209
+ const { httpVersionMajor, headers, method, url } = message;
210
+ if (httpVersionMajor >= 2) {
211
+ return; // Already handled by the "stream" event.
212
+ }
213
+ addCfPreviewTokenHeader(headers, previewToken.value);
214
+ headers[":method"] = method;
215
+ headers[":path"] = url;
216
+ headers[":authority"] = previewToken.host;
217
+ headers[":scheme"] = "https";
218
+ for (const name of Object.keys(headers)) {
219
+ if (HTTP1_HEADERS.has(name.toLowerCase())) {
220
+ delete headers[name];
221
+ }
222
+ }
223
+ const request = message.pipe(remote.request(headers));
224
+ request.on("response", (responseHeaders) => {
225
+ const status = responseHeaders[":status"] ?? 500;
226
+
227
+ // log all requests to terminal
228
+ logger.log(new Date().toLocaleTimeString(), method, url, status);
229
+
230
+ rewriteRemoteHostToLocalHostInHeaders(
231
+ responseHeaders,
232
+ previewToken.host,
233
+ port,
234
+ localProtocol
235
+ );
236
+ for (const name of Object.keys(responseHeaders)) {
237
+ if (name.startsWith(":")) {
238
+ delete responseHeaders[name];
239
+ }
240
+ }
241
+ response.writeHead(status, responseHeaders);
242
+ request.pipe(response, { end: true });
243
+ });
244
+ };
245
+
246
+ // If an asset path is defined, check the file system
247
+ // for a file first and serve if it exists.
248
+ const actualHandleRequest = assetDirectory
249
+ ? createHandleAssetsRequest(assetDirectory, handleRequest)
250
+ : handleRequest;
251
+
252
+ proxy.server.on("request", actualHandleRequest);
253
+ cleanupListeners.push(() =>
254
+ proxy.server.off("request", actualHandleRequest)
255
+ );
256
+
257
+ // flush and replay buffered requests
258
+ requestResponseBufferRef.current.forEach(({ request, response }) =>
259
+ actualHandleRequest(request, response)
260
+ );
261
+ requestResponseBufferRef.current = [];
262
+
263
+ /** HTTP/1 -> WebSocket (over HTTP/1) */
264
+ const handleUpgrade = (
265
+ message: IncomingMessage,
266
+ socket: WebSocket,
267
+ body: Buffer
268
+ ) => {
269
+ const { headers, url } = message;
270
+ addCfPreviewTokenHeader(headers, previewToken.value);
271
+ headers["host"] = previewToken.host;
272
+ const localWebsocket = new WebSocket(message, socket, body) as IWebsocket;
273
+ // TODO(soon): Custom WebSocket protocol is not working?
274
+ const remoteWebsocketClient = new WebSocket.Client(
275
+ `wss://${previewToken.host}${url}`,
276
+ [],
277
+ { headers }
278
+ ) as IWebsocket;
279
+ localWebsocket.pipe(remoteWebsocketClient).pipe(localWebsocket);
280
+ // We close down websockets whenever we refresh the token.
281
+ cleanupListeners.push(() => {
282
+ localWebsocket.close();
283
+ remoteWebsocketClient.close();
284
+ });
285
+ };
286
+ proxy.server.on("upgrade", handleUpgrade);
287
+ cleanupListeners.push(() => proxy.server.off("upgrade", handleUpgrade));
288
+
289
+ return () => {
290
+ cleanupListeners.forEach((cleanup) => cleanup());
291
+ };
292
+ }, [
293
+ previewToken,
294
+ assetDirectory,
295
+ port,
296
+ localProtocol,
297
+ proxy,
298
+ // We use a state value as a sigil to trigger reconnecting the server.
299
+ // It's not used inside the effect, so react-hooks/exhaustive-deps
300
+ // doesn't complain if it's not included in the dependency array.
301
+ // But its presence is critical, so Do NOT remove it from the dependency list.
302
+ retryServerSetupSigil,
303
+ ]);
304
+
305
+ // Start/stop the server whenever the
306
+ // containing component is mounted/unmounted.
307
+ useEffect(() => {
308
+ const abortController = new AbortController();
309
+ if (proxy === undefined) {
310
+ return;
311
+ }
312
+
313
+ waitForPortToBeAvailable(port, {
314
+ retryPeriod: 200,
315
+ timeout: 2000,
316
+ abortSignal: abortController.signal,
317
+ })
318
+ .then(() => {
319
+ proxy.server.on("listening", () => {
320
+ logger.log(`⬣ Listening at ${localProtocol}://${ip}:${port}`);
321
+ });
322
+ proxy.server.listen(port, ip);
323
+ })
324
+ .catch((err) => {
325
+ if ((err as { code: string }).code !== "ABORT_ERR") {
326
+ logger.error(`Failed to start server: ${err}`);
327
+ }
328
+ });
329
+
330
+ return () => {
331
+ abortController.abort();
332
+ // Running `proxy.server.close()` does not close open connections, preventing the process from exiting.
333
+ // So we use this `terminator` to close all the connections and force the server to shutdown.
334
+ proxy.terminator
335
+ .terminate()
336
+ .catch(() => logger.error("Failed to terminate the proxy server."));
337
+ };
338
+ }, [port, ip, proxy, localProtocol]);
341
339
  }
342
340
 
343
341
  function createHandleAssetsRequest(
344
- assetPath: string,
345
- handleRequest: RequestListener
342
+ assetDirectory: string,
343
+ handleRequest: RequestListener
346
344
  ) {
347
- const handleAsset = serveStatic(assetPath, {
348
- cacheControl: false,
349
- });
350
- return (request: IncomingMessage, response: ServerResponse) => {
351
- handleAsset(request, response, () => {
352
- handleRequest(request, response);
353
- });
354
- };
345
+ const handleAsset = serveStatic(assetDirectory, {
346
+ cacheControl: false,
347
+ });
348
+ return (request: IncomingMessage, response: ServerResponse) => {
349
+ handleAsset(request, response, () => {
350
+ handleRequest(request, response);
351
+ });
352
+ };
355
353
  }
356
354
 
357
355
  /** A Set of headers we want to remove from HTTP/1 requests. */
358
356
  const HTTP1_HEADERS = new Set([
359
- "host",
360
- "connection",
361
- "upgrade",
362
- "keep-alive",
363
- "proxy-connection",
364
- "transfer-encoding",
365
- "http2-settings",
357
+ "host",
358
+ "connection",
359
+ "upgrade",
360
+ "keep-alive",
361
+ "proxy-connection",
362
+ "transfer-encoding",
363
+ "http2-settings",
366
364
  ]);
367
365
 
368
366
  async function createProxyServer(
369
- localProtocol: "https" | "http"
367
+ localProtocol: "https" | "http"
370
368
  ): Promise<HttpServer | HttpsServer> {
371
- const server: HttpServer | HttpsServer =
372
- localProtocol === "https"
373
- ? createHttpsServer(await getHttpsOptions())
374
- : createHttpServer();
375
-
376
- return server
377
- .on("upgrade", (req) => {
378
- // log all websocket connections
379
- logger.log(
380
- new Date().toLocaleTimeString(),
381
- req.method,
382
- req.url,
383
- 101,
384
- "(WebSocket)"
385
- );
386
- })
387
- .on("error", (err) => {
388
- // log all connection errors
389
- logger.error(new Date().toLocaleTimeString(), err);
390
- });
369
+ const server: HttpServer | HttpsServer =
370
+ localProtocol === "https"
371
+ ? createHttpsServer(await getHttpsOptions())
372
+ : createHttpServer();
373
+
374
+ return server
375
+ .on("upgrade", (req) => {
376
+ // log all websocket connections
377
+ logger.log(
378
+ new Date().toLocaleTimeString(),
379
+ req.method,
380
+ req.url,
381
+ 101,
382
+ "(WebSocket)"
383
+ );
384
+ })
385
+ .on("error", (err) => {
386
+ // log all connection errors
387
+ logger.error(new Date().toLocaleTimeString(), err);
388
+ });
391
389
  }
392
390
 
393
391
  function createStreamHandler(
394
- previewToken: CfPreviewToken,
395
- remote: ClientHttp2Session,
396
- localPort: number,
397
- localProtocol: "https" | "http"
392
+ previewToken: CfPreviewToken,
393
+ remote: ClientHttp2Session,
394
+ localPort: number,
395
+ localProtocol: "https" | "http"
398
396
  ) {
399
- return function handleStream(
400
- stream: ServerHttp2Stream,
401
- headers: IncomingHttpHeaders
402
- ) {
403
- addCfPreviewTokenHeader(headers, previewToken.value);
404
- headers[":authority"] = previewToken.host;
405
- const request = stream.pipe(remote.request(headers));
406
- request.on("response", (responseHeaders: IncomingHttpHeaders) => {
407
- rewriteRemoteHostToLocalHostInHeaders(
408
- responseHeaders,
409
- previewToken.host,
410
- localPort,
411
- localProtocol
412
- );
413
- stream.respond(responseHeaders);
414
- request.pipe(stream, { end: true });
415
- });
416
- };
397
+ return function handleStream(
398
+ stream: ServerHttp2Stream,
399
+ headers: IncomingHttpHeaders
400
+ ) {
401
+ addCfPreviewTokenHeader(headers, previewToken.value);
402
+ headers[":authority"] = previewToken.host;
403
+ const request = stream.pipe(remote.request(headers));
404
+ request.on("response", (responseHeaders: IncomingHttpHeaders) => {
405
+ rewriteRemoteHostToLocalHostInHeaders(
406
+ responseHeaders,
407
+ previewToken.host,
408
+ localPort,
409
+ localProtocol
410
+ );
411
+ stream.respond(responseHeaders);
412
+ request.pipe(stream, { end: true });
413
+ });
414
+ };
417
415
  }
418
416
 
419
417
  /**
420
418
  * A helper function that waits for a port to be available.
421
419
  */
422
420
  export async function waitForPortToBeAvailable(
423
- port: number,
424
- options: { retryPeriod: number; timeout: number; abortSignal: AbortSignal }
421
+ port: number,
422
+ options: { retryPeriod: number; timeout: number; abortSignal: AbortSignal }
425
423
  ): Promise<void> {
426
- return new Promise((resolve, reject) => {
427
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
428
- options.abortSignal.addEventListener("abort", () => {
429
- const abortError = new Error("waitForPortToBeAvailable() aborted");
430
- (abortError as Error & { code: string }).code = "ABORT_ERR";
431
- doReject(abortError);
432
- });
433
-
434
- const timeout = setTimeout(() => {
435
- doReject(new Error(`Timed out waiting for port ${port}`));
436
- }, options.timeout);
437
-
438
- const interval = setInterval(checkPort, options.retryPeriod);
439
- checkPort();
440
-
441
- function doResolve() {
442
- clearTimeout(timeout);
443
- clearInterval(interval);
444
- resolve();
445
- }
446
-
447
- function doReject(err: unknown) {
448
- clearInterval(interval);
449
- clearTimeout(timeout);
450
- reject(err);
451
- }
452
-
453
- function checkPort() {
454
- // Testing whether a port is 'available' involves simply
455
- // trying to make a server listen on that port, and retrying
456
- // until it succeeds.
457
- const server = createHttpServer();
458
- const terminator = createHttpTerminator({
459
- server,
460
- gracefulTerminationTimeout: 0, // default 1000
461
- });
462
-
463
- server.on("error", (err) => {
464
- // @ts-expect-error non standard property on Error
465
- if (err.code !== "EADDRINUSE") {
466
- doReject(err);
467
- }
468
- });
469
- server.listen(port, () =>
470
- terminator
471
- .terminate()
472
- .then(doResolve, () =>
473
- logger.error("Failed to terminate the port checker.")
474
- )
475
- );
476
- }
477
- });
424
+ return new Promise((resolve, reject) => {
425
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
426
+ options.abortSignal.addEventListener("abort", () => {
427
+ const abortError = new Error("waitForPortToBeAvailable() aborted");
428
+ (abortError as Error & { code: string }).code = "ABORT_ERR";
429
+ doReject(abortError);
430
+ });
431
+
432
+ const timeout = setTimeout(() => {
433
+ doReject(new Error(`Timed out waiting for port ${port}`));
434
+ }, options.timeout);
435
+
436
+ const interval = setInterval(checkPort, options.retryPeriod);
437
+ checkPort();
438
+
439
+ function doResolve() {
440
+ clearTimeout(timeout);
441
+ clearInterval(interval);
442
+ resolve();
443
+ }
444
+
445
+ function doReject(err: unknown) {
446
+ clearInterval(interval);
447
+ clearTimeout(timeout);
448
+ reject(err);
449
+ }
450
+
451
+ function checkPort() {
452
+ // Testing whether a port is 'available' involves simply
453
+ // trying to make a server listen on that port, and retrying
454
+ // until it succeeds.
455
+ const server = createHttpServer();
456
+ const terminator = createHttpTerminator({
457
+ server,
458
+ gracefulTerminationTimeout: 0, // default 1000
459
+ });
460
+
461
+ server.on("error", (err) => {
462
+ // @ts-expect-error non standard property on Error
463
+ if (err.code !== "EADDRINUSE") {
464
+ doReject(err);
465
+ }
466
+ });
467
+ server.listen(port, () =>
468
+ terminator
469
+ .terminate()
470
+ .then(doResolve, () =>
471
+ logger.error("Failed to terminate the port checker.")
472
+ )
473
+ );
474
+ }
475
+ });
478
476
  }