wrangler 0.0.0-e978986 → 0.0.0-e9e9872

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