wrangler 0.0.0-e151223 → 0.0.0-e1e2ee5c

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