wrangler 0.0.0-e043479 → 0.0.0-e09abbc

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 (208) hide show
  1. package/Cloudflare_CA.pem +18 -0
  2. package/README.md +33 -14
  3. package/bin/wrangler.js +160 -28
  4. package/kv-asset-handler.js +1 -0
  5. package/miniflare-dist/index.mjs +5354 -0
  6. package/package.json +166 -136
  7. package/src/__tests__/config-cache-without-cache-dir.test.ts +38 -0
  8. package/src/__tests__/config-cache.test.ts +42 -0
  9. package/src/__tests__/configuration.test.ts +3942 -2178
  10. package/src/__tests__/dev.test.tsx +1191 -235
  11. package/src/__tests__/guess-worker-format.test.ts +76 -57
  12. package/src/__tests__/helpers/cmd-shim.d.ts +6 -6
  13. package/src/__tests__/helpers/mock-account-id.ts +26 -22
  14. package/src/__tests__/helpers/mock-bin.ts +20 -20
  15. package/src/__tests__/helpers/mock-cfetch.ts +96 -92
  16. package/src/__tests__/helpers/mock-console.ts +59 -32
  17. package/src/__tests__/helpers/mock-dialogs.ts +121 -33
  18. package/src/__tests__/helpers/mock-http-server.ts +46 -0
  19. package/src/__tests__/helpers/mock-istty.ts +74 -0
  20. package/src/__tests__/helpers/mock-kv.ts +28 -35
  21. package/src/__tests__/helpers/mock-oauth-flow.ts +250 -0
  22. package/src/__tests__/helpers/mock-process.ts +39 -0
  23. package/src/__tests__/helpers/mock-stdin.ts +82 -77
  24. package/src/__tests__/helpers/mock-web-socket.ts +21 -21
  25. package/src/__tests__/helpers/run-in-tmp.ts +29 -20
  26. package/src/__tests__/helpers/run-wrangler.ts +8 -8
  27. package/src/__tests__/helpers/write-worker-source.ts +31 -0
  28. package/src/__tests__/helpers/write-wrangler-toml.ts +9 -9
  29. package/src/__tests__/https-options.test.ts +163 -0
  30. package/src/__tests__/index.test.ts +246 -850
  31. package/src/__tests__/init.test.ts +1992 -0
  32. package/src/__tests__/jest.setup.ts +85 -34
  33. package/src/__tests__/kv.test.ts +1402 -1139
  34. package/src/__tests__/logger.test.ts +141 -0
  35. package/src/__tests__/metrics.test.ts +445 -0
  36. package/src/__tests__/package-manager.test.ts +312 -165
  37. package/src/__tests__/pages.test.ts +1261 -0
  38. package/src/__tests__/parse.test.ts +253 -245
  39. package/src/__tests__/publish.test.ts +6611 -2079
  40. package/src/__tests__/pubsub.test.ts +367 -0
  41. package/src/__tests__/r2.test.ts +184 -149
  42. package/src/__tests__/route.test.ts +45 -0
  43. package/src/__tests__/secret.test.ts +474 -407
  44. package/src/__tests__/tail.test.ts +565 -431
  45. package/src/__tests__/test-old-node-version.js +31 -0
  46. package/src/__tests__/user.test.ts +143 -0
  47. package/src/__tests__/whoami.test.tsx +219 -75
  48. package/src/__tests__/worker-namespace.test.ts +327 -0
  49. package/src/abort.d.ts +3 -0
  50. package/src/api/dev.ts +86 -0
  51. package/src/api/index.ts +1 -0
  52. package/src/bundle-reporter.tsx +29 -0
  53. package/src/bundle.ts +196 -93
  54. package/src/cfetch/index.ts +83 -66
  55. package/src/cfetch/internal.ts +100 -84
  56. package/src/cli.ts +22 -14
  57. package/src/config/README.md +7 -7
  58. package/src/config/config.ts +223 -242
  59. package/src/config/diagnostics.ts +61 -61
  60. package/src/config/environment.ts +404 -256
  61. package/src/config/index.ts +218 -32
  62. package/src/config/validation-helpers.ts +436 -222
  63. package/src/config/validation.ts +1642 -907
  64. package/src/config-cache.ts +84 -0
  65. package/src/create-worker-preview.ts +255 -0
  66. package/src/create-worker-upload-form.ts +263 -0
  67. package/src/dev/dev-vars.ts +36 -0
  68. package/src/dev/dev.tsx +452 -0
  69. package/src/dev/local.tsx +373 -0
  70. package/src/dev/remote.tsx +386 -0
  71. package/src/dev/use-esbuild.ts +150 -0
  72. package/src/dev.tsx +576 -943
  73. package/src/dialogs.tsx +115 -57
  74. package/src/durable.ts +102 -0
  75. package/src/entry.ts +308 -37
  76. package/src/environment-variables.ts +25 -23
  77. package/src/errors.ts +11 -0
  78. package/src/faye-websocket.d.ts +6 -0
  79. package/src/generate.ts +33 -0
  80. package/src/git-client.ts +42 -0
  81. package/src/global-wrangler-config-path.ts +26 -0
  82. package/src/https-options.ts +127 -0
  83. package/src/index.tsx +1910 -2241
  84. package/src/init.ts +549 -0
  85. package/src/inspect.ts +603 -550
  86. package/src/intl-polyfill.d.ts +139 -0
  87. package/src/is-interactive.ts +12 -0
  88. package/src/kv.ts +430 -0
  89. package/src/logger.ts +73 -0
  90. package/src/metrics/index.ts +4 -0
  91. package/src/metrics/is-ci.ts +14 -0
  92. package/src/metrics/metrics-config.ts +239 -0
  93. package/src/metrics/metrics-dispatcher.ts +95 -0
  94. package/src/metrics/send-event.ts +92 -0
  95. package/src/miniflare-cli/README.md +30 -0
  96. package/src/miniflare-cli/assets.ts +543 -0
  97. package/src/miniflare-cli/enum-keys.ts +17 -0
  98. package/src/miniflare-cli/index.ts +85 -0
  99. package/src/miniflare-cli/request-context.ts +40 -0
  100. package/src/module-collection.ts +234 -146
  101. package/src/open-in-browser.ts +10 -6
  102. package/src/package-manager.ts +183 -90
  103. package/src/pages/build.tsx +204 -0
  104. package/src/pages/constants.ts +7 -0
  105. package/src/pages/deployments.tsx +106 -0
  106. package/src/pages/dev.tsx +401 -0
  107. package/src/pages/functions/buildPlugin.ts +105 -0
  108. package/src/pages/functions/buildWorker.ts +151 -0
  109. package/src/pages/functions/filepath-routing.test.ts +234 -0
  110. package/src/pages/functions/filepath-routing.ts +189 -0
  111. package/src/pages/functions/identifiers.ts +78 -0
  112. package/src/pages/functions/routes.ts +151 -0
  113. package/src/pages/index.tsx +84 -0
  114. package/src/pages/projects.tsx +163 -0
  115. package/src/pages/publish.tsx +338 -0
  116. package/src/pages/types.ts +40 -0
  117. package/src/pages/upload.tsx +396 -0
  118. package/src/pages/utils.ts +12 -0
  119. package/src/parse.ts +224 -121
  120. package/src/paths.ts +6 -6
  121. package/src/preview.ts +31 -0
  122. package/src/proxy.ts +413 -313
  123. package/src/publish.ts +773 -343
  124. package/src/pubsub/index.ts +286 -0
  125. package/src/pubsub/pubsub-commands.tsx +623 -0
  126. package/src/r2.ts +19 -19
  127. package/src/selfsigned.d.ts +29 -0
  128. package/src/sites.tsx +285 -151
  129. package/src/tail/filters.ts +108 -108
  130. package/src/tail/index.ts +217 -217
  131. package/src/tail/printing.ts +51 -46
  132. package/src/update-check.ts +19 -0
  133. package/src/user/choose-account.tsx +69 -0
  134. package/src/user/env-vars.ts +46 -0
  135. package/src/user/generate-auth-url.ts +33 -0
  136. package/src/user/generate-random-state.ts +16 -0
  137. package/src/user/index.ts +3 -0
  138. package/src/user/user.tsx +1171 -0
  139. package/src/whoami.tsx +63 -41
  140. package/src/worker-namespace.ts +206 -0
  141. package/src/worker.ts +191 -0
  142. package/src/zones.ts +76 -0
  143. package/templates/checked-fetch.js +17 -0
  144. package/templates/gitignore +171 -0
  145. package/templates/new-worker-scheduled.js +17 -0
  146. package/templates/new-worker-scheduled.ts +32 -0
  147. package/templates/new-worker.js +3 -3
  148. package/templates/new-worker.ts +18 -3
  149. package/templates/no-op-worker.js +10 -0
  150. package/templates/pages-shim.ts +9 -0
  151. package/templates/pages-template-plugin.ts +155 -0
  152. package/templates/pages-template-worker.ts +161 -0
  153. package/templates/static-asset-facade.js +38 -36
  154. package/templates/tsconfig.json +95 -95
  155. package/wrangler-dist/cli.d.ts +327 -0
  156. package/wrangler-dist/cli.js +94947 -111199
  157. package/pages/functions/buildWorker.ts +0 -62
  158. package/pages/functions/filepath-routing.test.ts +0 -123
  159. package/pages/functions/filepath-routing.ts +0 -178
  160. package/pages/functions/identifiers.ts +0 -78
  161. package/pages/functions/routes.ts +0 -151
  162. package/pages/functions/template-worker.ts +0 -130
  163. package/src/__tests__/helpers/faye-websocket.d.ts +0 -6
  164. package/src/__tests__/helpers/mock-user.ts +0 -27
  165. package/src/__tests__/logout.test.ts +0 -50
  166. package/src/__tests__/sentry.test.ts +0 -146
  167. package/src/api/form_data.ts +0 -217
  168. package/src/api/preview.ts +0 -147
  169. package/src/api/worker.ts +0 -186
  170. package/src/guess-worker-format.ts +0 -68
  171. package/src/kv.tsx +0 -339
  172. package/src/pages.tsx +0 -1045
  173. package/src/reporting.ts +0 -115
  174. package/src/user.tsx +0 -1063
  175. package/vendor/@cloudflare/kv-asset-handler/CHANGELOG.md +0 -332
  176. package/vendor/@cloudflare/kv-asset-handler/LICENSE_APACHE +0 -176
  177. package/vendor/@cloudflare/kv-asset-handler/LICENSE_MIT +0 -25
  178. package/vendor/@cloudflare/kv-asset-handler/README.md +0 -245
  179. package/vendor/@cloudflare/kv-asset-handler/dist/index.d.ts +0 -32
  180. package/vendor/@cloudflare/kv-asset-handler/dist/index.js +0 -354
  181. package/vendor/@cloudflare/kv-asset-handler/dist/mocks.d.ts +0 -13
  182. package/vendor/@cloudflare/kv-asset-handler/dist/mocks.js +0 -148
  183. package/vendor/@cloudflare/kv-asset-handler/dist/test/getAssetFromKV.d.ts +0 -1
  184. package/vendor/@cloudflare/kv-asset-handler/dist/test/getAssetFromKV.js +0 -436
  185. package/vendor/@cloudflare/kv-asset-handler/dist/test/mapRequestToAsset.d.ts +0 -1
  186. package/vendor/@cloudflare/kv-asset-handler/dist/test/mapRequestToAsset.js +0 -40
  187. package/vendor/@cloudflare/kv-asset-handler/dist/test/serveSinglePageApp.d.ts +0 -1
  188. package/vendor/@cloudflare/kv-asset-handler/dist/test/serveSinglePageApp.js +0 -42
  189. package/vendor/@cloudflare/kv-asset-handler/dist/types.d.ts +0 -26
  190. package/vendor/@cloudflare/kv-asset-handler/dist/types.js +0 -31
  191. package/vendor/@cloudflare/kv-asset-handler/package.json +0 -52
  192. package/vendor/@cloudflare/kv-asset-handler/src/index.ts +0 -296
  193. package/vendor/@cloudflare/kv-asset-handler/src/mocks.ts +0 -136
  194. package/vendor/@cloudflare/kv-asset-handler/src/test/getAssetFromKV.ts +0 -464
  195. package/vendor/@cloudflare/kv-asset-handler/src/test/mapRequestToAsset.ts +0 -33
  196. package/vendor/@cloudflare/kv-asset-handler/src/test/serveSinglePageApp.ts +0 -42
  197. package/vendor/@cloudflare/kv-asset-handler/src/types.ts +0 -39
  198. package/vendor/wrangler-mime/CHANGELOG.md +0 -289
  199. package/vendor/wrangler-mime/LICENSE +0 -21
  200. package/vendor/wrangler-mime/Mime.js +0 -97
  201. package/vendor/wrangler-mime/README.md +0 -187
  202. package/vendor/wrangler-mime/cli.js +0 -46
  203. package/vendor/wrangler-mime/index.js +0 -4
  204. package/vendor/wrangler-mime/lite.js +0 -4
  205. package/vendor/wrangler-mime/package.json +0 -52
  206. package/vendor/wrangler-mime/types/other.js +0 -1
  207. package/vendor/wrangler-mime/types/standard.js +0 -1
  208. package/wrangler-dist/cli.js.map +0 -7
package/src/proxy.ts CHANGED
@@ -1,22 +1,28 @@
1
- import { createServer } from "node:http";
1
+ import { createServer as createHttpServer } from "node:http";
2
2
  import { connect } from "node:http2";
3
+ import { createServer as createHttpsServer } from "node:https";
3
4
  import WebSocket from "faye-websocket";
5
+ import { createHttpTerminator } from "http-terminator";
4
6
  import { useEffect, useRef, useState } from "react";
5
7
  import serveStatic from "serve-static";
6
- import type { CfPreviewToken } from "./api/preview";
8
+ import { getHttpsOptions } from "./https-options";
9
+ import { logger } from "./logger";
10
+ import type { CfPreviewToken } from "./create-worker-preview";
11
+ import type { HttpTerminator } from "http-terminator";
7
12
  import type {
8
- IncomingHttpHeaders,
9
- RequestListener,
10
- IncomingMessage,
11
- ServerResponse,
12
- Server,
13
+ IncomingHttpHeaders,
14
+ RequestListener,
15
+ IncomingMessage,
16
+ ServerResponse,
17
+ Server as HttpServer,
13
18
  } from "node:http";
14
19
  import type { ClientHttp2Session, ServerHttp2Stream } from "node:http2";
20
+ import type { Server as HttpsServer } from "node:https";
15
21
  import type ws from "ws";
16
22
 
17
23
  interface IWebsocket extends ws {
18
- // Pipe implements .on("message", ...)
19
- pipe<T>(fn: T): IWebsocket;
24
+ // Pipe implements .on("message", ...)
25
+ pipe<T>(fn: T): IWebsocket;
20
26
  }
21
27
 
22
28
  /**
@@ -34,10 +40,10 @@ interface IWebsocket extends ws {
34
40
 
35
41
  /** Rewrite request headers to add the preview token. */
36
42
  function addCfPreviewTokenHeader(
37
- headers: IncomingHttpHeaders,
38
- previewTokenValue: string
43
+ headers: IncomingHttpHeaders,
44
+ previewTokenValue: string
39
45
  ) {
40
- headers["cf-workers-preview-token"] = previewTokenValue;
46
+ headers["cf-workers-preview-token"] = previewTokenValue;
41
47
  }
42
48
 
43
49
  /**
@@ -45,332 +51,426 @@ function addCfPreviewTokenHeader(
45
51
  * from the preview host to the local host.
46
52
  */
47
53
  function rewriteRemoteHostToLocalHostInHeaders(
48
- headers: IncomingHttpHeaders,
49
- remoteHost: string,
50
- localPort: number
54
+ headers: IncomingHttpHeaders,
55
+ remoteHost: string,
56
+ localPort: number,
57
+ localProtocol: "https" | "http"
51
58
  ) {
52
- for (const [name, value] of Object.entries(headers)) {
53
- // Rewrite the remote host to the local host.
54
- if (typeof value === "string" && value.includes(remoteHost)) {
55
- headers[name] = value
56
- .replaceAll(`https://${remoteHost}`, `http://localhost:${localPort}`)
57
- .replaceAll(remoteHost, `localhost:${localPort}`);
58
- }
59
- }
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
+ }
60
70
  }
61
71
 
72
+ type PreviewProxy = {
73
+ server: HttpServer | HttpsServer;
74
+ terminator: HttpTerminator;
75
+ };
76
+
62
77
  export function usePreviewServer({
63
- previewToken,
64
- publicRoot,
65
- port,
78
+ previewToken,
79
+ assetDirectory,
80
+ localProtocol,
81
+ localPort: port,
82
+ ip,
66
83
  }: {
67
- previewToken: CfPreviewToken | undefined;
68
- publicRoot: undefined | string;
69
- port: number;
84
+ previewToken: CfPreviewToken | undefined;
85
+ assetDirectory: string | undefined;
86
+ localProtocol: "https" | "http";
87
+ localPort: number;
88
+ ip: string;
70
89
  }) {
71
- /** Creates an HTTP/1 proxy that sends requests over HTTP/2. */
72
- const proxyServer = useRef<Server>();
73
- const proxy = (proxyServer.current ??= createProxyServer());
74
-
75
- /**
76
- * When we're not connected / getting a fresh token on changes,
77
- * we'd like to buffer streams/requests until we're connected.
78
- * Once connected, we can flush the buffered streams/requests.
79
- * streamBufferRef is used to buffer http/2 streams, while
80
- * requestResponseBufferRef is used to buffer http/1 requests.
81
- */
82
- const streamBufferRef = useRef<
83
- { stream: ServerHttp2Stream; headers: IncomingHttpHeaders }[]
84
- >([]);
85
- const requestResponseBufferRef = useRef<
86
- { request: IncomingMessage; response: ServerResponse }[]
87
- >([]);
88
-
89
- /**
90
- * The session doesn't last forever, and will eventually drop
91
- * (usually within 5-15 minutes). When that happens, we simply
92
- * restart the effect, effectively restarting the server. We use
93
- * a state sigil as an effect dependency to do so.
94
- */
95
- const [retryServerSetupSigil, setRetryServerSetupSigil] = useState<number>(0);
96
- function retryServerSetup() {
97
- setRetryServerSetupSigil((x) => x + 1);
98
- }
99
-
100
- useEffect(() => {
101
- // If we don't have a token, that means either we're just starting up,
102
- // or we're refreshing the token.
103
- if (!previewToken) {
104
- const cleanupListeners: (() => void)[] = [];
105
- const bufferStream = (
106
- stream: ServerHttp2Stream,
107
- headers: IncomingHttpHeaders
108
- ) => {
109
- // store the stream in a buffer so we can replay it later
110
- streamBufferRef.current.push({ stream, headers });
111
- };
112
- proxy.on("stream", bufferStream);
113
- cleanupListeners.push(() => proxy.off("stream", bufferStream));
114
-
115
- const bufferRequestResponse = (
116
- request: IncomingMessage,
117
- response: ServerResponse
118
- ) => {
119
- // store the request and response in a buffer so we can replay it later
120
- requestResponseBufferRef.current.push({ request, response });
121
- };
122
-
123
- proxy.on("request", bufferRequestResponse);
124
- cleanupListeners.push(() => proxy.off("request", bufferRequestResponse));
125
- return () => {
126
- cleanupListeners.forEach((cleanup) => cleanup());
127
- };
128
- }
129
-
130
- // We have a token. Let's proxy requests to the preview end point.
131
- const cleanupListeners: (() => void)[] = [];
132
-
133
- const assetPath = typeof publicRoot === "string" ? publicRoot : null;
134
-
135
- // create a ClientHttp2Session
136
- const remote = connect(`https://${previewToken.host}`);
137
- cleanupListeners.push(() => remote.destroy());
138
-
139
- // As mentioned above, the session may die at any point,
140
- // so we need to restart the effect.
141
- remote.on("close", retryServerSetup);
142
- cleanupListeners.push(() => remote.off("close", retryServerSetup));
143
-
144
- /** HTTP/2 -> HTTP/2 */
145
- const handleStream = createStreamHandler(previewToken, remote, port);
146
- proxy.on("stream", handleStream);
147
- cleanupListeners.push(() => proxy.off("stream", handleStream));
148
-
149
- // flush and replay buffered streams
150
- streamBufferRef.current.forEach((buffer) =>
151
- handleStream(buffer.stream, buffer.headers)
152
- );
153
- streamBufferRef.current = [];
154
-
155
- /** HTTP/1 -> HTTP/2 */
156
- const handleRequest: RequestListener = (
157
- message: IncomingMessage,
158
- response: ServerResponse
159
- ) => {
160
- const { httpVersionMajor, headers, method, url } = message;
161
- if (httpVersionMajor >= 2) {
162
- return; // Already handled by the "stream" event.
163
- }
164
- addCfPreviewTokenHeader(headers, previewToken.value);
165
- headers[":method"] = method;
166
- headers[":path"] = url;
167
- headers[":authority"] = previewToken.host;
168
- headers[":scheme"] = "https";
169
- for (const name of Object.keys(headers)) {
170
- if (HTTP1_HEADERS.has(name.toLowerCase())) {
171
- delete headers[name];
172
- }
173
- }
174
- const request = message.pipe(remote.request(headers));
175
- request.on("response", (responseHeaders) => {
176
- const status = responseHeaders[":status"] ?? 500;
177
- rewriteRemoteHostToLocalHostInHeaders(
178
- responseHeaders,
179
- previewToken.host,
180
- port
181
- );
182
- for (const name of Object.keys(responseHeaders)) {
183
- if (name.startsWith(":")) {
184
- delete responseHeaders[name];
185
- }
186
- }
187
- response.writeHead(status, responseHeaders);
188
- request.pipe(response, { end: true });
189
- });
190
- };
191
-
192
- // If an asset path is defined, check the file system
193
- // for a file first and serve if it exists.
194
- const actualHandleRequest = assetPath
195
- ? createHandleAssetsRequest(assetPath, handleRequest)
196
- : handleRequest;
197
-
198
- proxy.on("request", actualHandleRequest);
199
- cleanupListeners.push(() => proxy.off("request", actualHandleRequest));
200
-
201
- // flush and replay buffered requests
202
- requestResponseBufferRef.current.forEach(({ request, response }) =>
203
- actualHandleRequest(request, response)
204
- );
205
- requestResponseBufferRef.current = [];
206
-
207
- /** HTTP/1 -> WebSocket (over HTTP/1) */
208
- const handleUpgrade = (
209
- message: IncomingMessage,
210
- socket: WebSocket,
211
- body: Buffer
212
- ) => {
213
- const { headers, url } = message;
214
- addCfPreviewTokenHeader(headers, previewToken.value);
215
- headers["host"] = previewToken.host;
216
- const localWebsocket = new WebSocket(message, socket, body) as IWebsocket;
217
- // TODO(soon): Custom WebSocket protocol is not working?
218
- const remoteWebsocketClient = new WebSocket.Client(
219
- `wss://${previewToken.host}${url}`,
220
- [],
221
- { headers }
222
- ) as IWebsocket;
223
- localWebsocket.pipe(remoteWebsocketClient).pipe(localWebsocket);
224
- // We close down websockets whenever we refresh the token.
225
- cleanupListeners.push(() => {
226
- localWebsocket.close();
227
- remoteWebsocketClient.close();
228
- });
229
- };
230
- proxy.on("upgrade", handleUpgrade);
231
- cleanupListeners.push(() => proxy.off("upgrade", handleUpgrade));
232
-
233
- return () => {
234
- cleanupListeners.forEach((cleanup) => cleanup());
235
- };
236
- }, [
237
- previewToken,
238
- publicRoot,
239
- port,
240
- proxy,
241
- // We use a state value as a sigil to trigger reconnecting the server.
242
- // It's not used inside the effect, so react-hooks/exhaustive-deps
243
- // doesn't complain if it's not included in the dependency array.
244
- // But its presence is critical, so Do NOT remove it from the dependency list.
245
- retryServerSetupSigil,
246
- ]);
247
-
248
- // Start/stop the server whenever the
249
- // containing component is mounted/unmounted.
250
- useEffect(() => {
251
- waitForPortToBeAvailable(port, { retryPeriod: 200, timeout: 2000 })
252
- .then(() => {
253
- proxy.listen(port);
254
- console.log(`⬣ Listening at http://localhost:${port}`);
255
- })
256
- .catch((err) => {
257
- console.error(`⬣ Failed to start server: ${err}`);
258
- });
259
-
260
- return () => {
261
- proxy.close();
262
- };
263
- }, [port, proxy]);
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]);
264
339
  }
265
340
 
266
341
  function createHandleAssetsRequest(
267
- assetPath: string,
268
- handleRequest: RequestListener
342
+ assetDirectory: string,
343
+ handleRequest: RequestListener
269
344
  ) {
270
- const handleAsset = serveStatic(assetPath, {
271
- cacheControl: false,
272
- });
273
- return (request: IncomingMessage, response: ServerResponse) => {
274
- handleAsset(request, response, () => {
275
- handleRequest(request, response);
276
- });
277
- };
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
+ };
278
353
  }
279
354
 
280
355
  /** A Set of headers we want to remove from HTTP/1 requests. */
281
356
  const HTTP1_HEADERS = new Set([
282
- "host",
283
- "connection",
284
- "upgrade",
285
- "keep-alive",
286
- "proxy-connection",
287
- "transfer-encoding",
288
- "http2-settings",
357
+ "host",
358
+ "connection",
359
+ "upgrade",
360
+ "keep-alive",
361
+ "proxy-connection",
362
+ "transfer-encoding",
363
+ "http2-settings",
289
364
  ]);
290
365
 
291
- function createProxyServer() {
292
- return createServer()
293
- .on("request", function (req, res) {
294
- // log all requests
295
- console.log(
296
- new Date().toLocaleTimeString(),
297
- req.method,
298
- req.url,
299
- res.statusCode
300
- );
301
- })
302
- .on("upgrade", (req) => {
303
- // log all websocket connections
304
- console.log(
305
- new Date().toLocaleTimeString(),
306
- req.method,
307
- req.url,
308
- 101,
309
- "(WebSocket)"
310
- );
311
- })
312
- .on("error", (err) => {
313
- // log all connection errors
314
- console.error(new Date().toLocaleTimeString(), err);
315
- });
366
+ async function createProxyServer(
367
+ localProtocol: "https" | "http"
368
+ ): Promise<HttpServer | HttpsServer> {
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
+ });
316
389
  }
317
390
 
318
391
  function createStreamHandler(
319
- previewToken: CfPreviewToken,
320
- remote: ClientHttp2Session,
321
- port: number
392
+ previewToken: CfPreviewToken,
393
+ remote: ClientHttp2Session,
394
+ localPort: number,
395
+ localProtocol: "https" | "http"
322
396
  ) {
323
- return function handleStream(
324
- stream: ServerHttp2Stream,
325
- headers: IncomingHttpHeaders
326
- ) {
327
- addCfPreviewTokenHeader(headers, previewToken.value);
328
- headers[":authority"] = previewToken.host;
329
- const request = stream.pipe(remote.request(headers));
330
- request.on("response", (responseHeaders: IncomingHttpHeaders) => {
331
- rewriteRemoteHostToLocalHostInHeaders(
332
- responseHeaders,
333
- previewToken.host,
334
- port
335
- );
336
- stream.respond(responseHeaders);
337
- request.pipe(stream, { end: true });
338
- });
339
- };
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
+ };
340
415
  }
341
416
 
342
417
  /**
343
418
  * A helper function that waits for a port to be available.
344
419
  */
345
420
  export async function waitForPortToBeAvailable(
346
- port: number,
347
- options: { retryPeriod: number; timeout: number }
421
+ port: number,
422
+ options: { retryPeriod: number; timeout: number; abortSignal: AbortSignal }
348
423
  ): Promise<void> {
349
- return new Promise((resolve, reject) => {
350
- const timeout = setTimeout(() => {
351
- reject(new Error(`Timed out waiting for port ${port}`));
352
- }, options.timeout);
353
-
354
- function checkPort() {
355
- // Testing whether a port is 'available' involves simply
356
- // trying to make a server listen on that port, and retrying
357
- // until it succeeds.
358
- const server = createServer();
359
- server.on("error", (err) => {
360
- // @ts-expect-error non standard property on Error
361
- if (err.code === "EADDRINUSE") {
362
- setTimeout(checkPort, options.retryPeriod);
363
- } else {
364
- reject(err);
365
- }
366
- });
367
- server.listen(port, () => {
368
- server.close();
369
- clearTimeout(timeout);
370
- resolve();
371
- });
372
- }
373
-
374
- checkPort();
375
- });
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
+ });
376
476
  }