wrangler 0.0.0-e0d2f35 → 0.0.0-e178d6fb

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 (215) hide show
  1. package/Cloudflare_CA.pem +18 -0
  2. package/README.md +33 -14
  3. package/bin/wrangler.js +159 -27
  4. package/kv-asset-handler.js +1 -0
  5. package/miniflare-dist/index.mjs +5354 -0
  6. package/package.json +166 -129
  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__/{clipboardy-mock.js → helpers/clipboardy-mock.js} +0 -0
  13. package/src/__tests__/helpers/cmd-shim.d.ts +11 -0
  14. package/src/__tests__/helpers/mock-account-id.ts +48 -0
  15. package/src/__tests__/helpers/mock-bin.ts +36 -0
  16. package/src/__tests__/helpers/mock-cfetch.ts +211 -0
  17. package/src/__tests__/helpers/mock-console.ts +97 -0
  18. package/src/__tests__/helpers/mock-dialogs.ts +153 -0
  19. package/src/__tests__/helpers/mock-http-server.ts +46 -0
  20. package/src/__tests__/helpers/mock-istty.ts +74 -0
  21. package/src/__tests__/helpers/mock-kv.ts +33 -0
  22. package/src/__tests__/helpers/mock-oauth-flow.ts +250 -0
  23. package/src/__tests__/helpers/mock-process.ts +39 -0
  24. package/src/__tests__/helpers/mock-stdin.ts +108 -0
  25. package/src/__tests__/helpers/mock-web-socket.ts +29 -0
  26. package/src/__tests__/helpers/run-in-tmp.ts +38 -0
  27. package/src/__tests__/helpers/run-wrangler.ts +16 -0
  28. package/src/__tests__/helpers/write-worker-source.ts +31 -0
  29. package/src/__tests__/helpers/write-wrangler-toml.ts +17 -0
  30. package/src/__tests__/https-options.test.ts +163 -0
  31. package/src/__tests__/index.test.ts +259 -421
  32. package/src/__tests__/init.test.ts +1992 -0
  33. package/src/__tests__/jest.setup.ts +105 -14
  34. package/src/__tests__/kv.test.ts +1420 -973
  35. package/src/__tests__/logger.test.ts +141 -0
  36. package/src/__tests__/metrics.test.ts +445 -0
  37. package/src/__tests__/package-manager.test.ts +353 -0
  38. package/src/__tests__/pages.test.ts +1261 -0
  39. package/src/__tests__/parse.test.ts +330 -0
  40. package/src/__tests__/publish.test.ts +6639 -1174
  41. package/src/__tests__/pubsub.test.ts +367 -0
  42. package/src/__tests__/r2.test.ts +233 -0
  43. package/src/__tests__/route.test.ts +45 -0
  44. package/src/__tests__/secret.test.ts +489 -203
  45. package/src/__tests__/tail.test.ts +698 -0
  46. package/src/__tests__/test-old-node-version.js +31 -0
  47. package/src/__tests__/user.test.ts +143 -0
  48. package/src/__tests__/version.test.ts +35 -0
  49. package/src/__tests__/whoami.test.tsx +222 -93
  50. package/src/__tests__/worker-namespace.test.ts +327 -0
  51. package/src/abort.d.ts +3 -0
  52. package/src/api/dev.ts +86 -0
  53. package/src/api/index.ts +1 -0
  54. package/src/bundle-reporter.tsx +29 -0
  55. package/src/bundle.ts +236 -0
  56. package/src/cfetch/index.ts +88 -78
  57. package/src/cfetch/internal.ts +124 -46
  58. package/src/cli.ts +24 -6
  59. package/src/config/README.md +107 -0
  60. package/src/config/config.ts +251 -0
  61. package/src/config/diagnostics.ts +80 -0
  62. package/src/config/environment.ts +453 -0
  63. package/src/config/index.ts +238 -0
  64. package/src/config/validation-helpers.ts +584 -0
  65. package/src/config/validation.ts +1754 -0
  66. package/src/config-cache.ts +84 -0
  67. package/src/create-worker-preview.ts +257 -0
  68. package/src/create-worker-upload-form.ts +263 -0
  69. package/src/dev/dev-vars.ts +36 -0
  70. package/src/dev/dev.tsx +452 -0
  71. package/src/dev/local.tsx +373 -0
  72. package/src/dev/remote.tsx +386 -0
  73. package/src/dev/use-esbuild.ts +150 -0
  74. package/src/dev.tsx +580 -817
  75. package/src/dialogs.tsx +117 -59
  76. package/src/durable.ts +102 -0
  77. package/src/entry.ts +328 -0
  78. package/src/environment-variables.ts +35 -0
  79. package/src/errors.ts +11 -0
  80. package/src/faye-websocket.d.ts +6 -0
  81. package/src/generate.ts +33 -0
  82. package/src/git-client.ts +42 -0
  83. package/src/global-wrangler-config-path.ts +26 -0
  84. package/src/https-options.ts +127 -0
  85. package/src/index.tsx +1978 -2051
  86. package/src/init.ts +549 -0
  87. package/src/inspect.ts +610 -543
  88. package/src/intl-polyfill.d.ts +139 -0
  89. package/src/is-interactive.ts +12 -0
  90. package/src/kv.ts +430 -0
  91. package/src/logger.ts +73 -0
  92. package/src/metrics/index.ts +4 -0
  93. package/src/metrics/is-ci.ts +14 -0
  94. package/src/metrics/metrics-config.ts +239 -0
  95. package/src/metrics/metrics-dispatcher.ts +95 -0
  96. package/src/metrics/send-event.ts +92 -0
  97. package/src/miniflare-cli/README.md +30 -0
  98. package/src/miniflare-cli/assets.ts +543 -0
  99. package/src/miniflare-cli/enum-keys.ts +17 -0
  100. package/src/miniflare-cli/index.ts +85 -0
  101. package/src/miniflare-cli/request-context.ts +40 -0
  102. package/src/module-collection.ts +247 -52
  103. package/src/open-in-browser.ts +17 -0
  104. package/src/package-manager.ts +219 -0
  105. package/src/pages/build.tsx +204 -0
  106. package/src/pages/constants.ts +7 -0
  107. package/src/pages/deployments.tsx +106 -0
  108. package/src/pages/dev.tsx +401 -0
  109. package/src/pages/functions/buildPlugin.ts +105 -0
  110. package/src/pages/functions/buildWorker.ts +151 -0
  111. package/src/pages/functions/filepath-routing.test.ts +234 -0
  112. package/src/pages/functions/filepath-routing.ts +189 -0
  113. package/src/pages/functions/identifiers.ts +78 -0
  114. package/src/pages/functions/routes.ts +151 -0
  115. package/src/pages/index.tsx +84 -0
  116. package/src/pages/projects.tsx +163 -0
  117. package/src/pages/publish.tsx +338 -0
  118. package/src/pages/types.ts +40 -0
  119. package/src/pages/upload.tsx +396 -0
  120. package/src/pages/utils.ts +12 -0
  121. package/src/parse.ts +286 -0
  122. package/src/paths.ts +26 -0
  123. package/src/preview.ts +31 -0
  124. package/src/proxy.ts +421 -315
  125. package/src/publish.ts +776 -393
  126. package/src/pubsub/index.ts +286 -0
  127. package/src/pubsub/pubsub-commands.tsx +623 -0
  128. package/src/r2.ts +50 -0
  129. package/src/selfsigned.d.ts +29 -0
  130. package/src/sites.tsx +293 -161
  131. package/src/tail/filters.ts +279 -0
  132. package/src/tail/index.ts +299 -0
  133. package/src/tail/printing.ts +67 -0
  134. package/src/update-check.ts +19 -0
  135. package/src/user/choose-account.tsx +69 -0
  136. package/src/user/env-vars.ts +46 -0
  137. package/src/user/generate-auth-url.ts +33 -0
  138. package/src/user/generate-random-state.ts +16 -0
  139. package/src/user/index.ts +3 -0
  140. package/src/user/user.tsx +1171 -0
  141. package/src/whoami.tsx +63 -41
  142. package/src/worker-namespace.ts +206 -0
  143. package/src/worker.ts +191 -0
  144. package/src/zones.ts +76 -0
  145. package/templates/checked-fetch.js +17 -0
  146. package/templates/gitignore +171 -0
  147. package/templates/new-worker-scheduled.js +17 -0
  148. package/templates/new-worker-scheduled.ts +32 -0
  149. package/templates/new-worker.js +15 -0
  150. package/templates/new-worker.ts +30 -0
  151. package/templates/no-op-worker.js +10 -0
  152. package/templates/pages-shim.ts +9 -0
  153. package/templates/pages-template-plugin.ts +155 -0
  154. package/templates/pages-template-worker.ts +161 -0
  155. package/templates/static-asset-facade.js +49 -0
  156. package/templates/tsconfig.json +105 -0
  157. package/wrangler-dist/cli.d.ts +327 -0
  158. package/wrangler-dist/cli.js +91375 -92119
  159. package/pages/functions/buildWorker.ts +0 -62
  160. package/pages/functions/filepath-routing.test.ts +0 -39
  161. package/pages/functions/filepath-routing.ts +0 -228
  162. package/pages/functions/identifiers.ts +0 -78
  163. package/pages/functions/routes.ts +0 -158
  164. package/pages/functions/template-worker.ts +0 -136
  165. package/src/__tests__/logout.test.ts +0 -64
  166. package/src/__tests__/mock-cfetch.ts +0 -173
  167. package/src/__tests__/mock-console.ts +0 -34
  168. package/src/__tests__/mock-dialogs.ts +0 -65
  169. package/src/__tests__/mock-kv.ts +0 -40
  170. package/src/__tests__/mock-user.ts +0 -27
  171. package/src/__tests__/run-in-tmp.ts +0 -29
  172. package/src/__tests__/run-wrangler.ts +0 -8
  173. package/src/api/form_data.ts +0 -135
  174. package/src/api/preview.ts +0 -128
  175. package/src/api/worker.ts +0 -155
  176. package/src/config.ts +0 -641
  177. package/src/kv.tsx +0 -276
  178. package/src/pages.tsx +0 -1043
  179. package/src/tail.tsx +0 -73
  180. package/src/user.tsx +0 -1019
  181. package/static-asset-facade.js +0 -47
  182. package/vendor/@cloudflare/kv-asset-handler/CHANGELOG.md +0 -332
  183. package/vendor/@cloudflare/kv-asset-handler/LICENSE_APACHE +0 -176
  184. package/vendor/@cloudflare/kv-asset-handler/LICENSE_MIT +0 -25
  185. package/vendor/@cloudflare/kv-asset-handler/README.md +0 -245
  186. package/vendor/@cloudflare/kv-asset-handler/dist/index.d.ts +0 -32
  187. package/vendor/@cloudflare/kv-asset-handler/dist/index.js +0 -354
  188. package/vendor/@cloudflare/kv-asset-handler/dist/mocks.d.ts +0 -13
  189. package/vendor/@cloudflare/kv-asset-handler/dist/mocks.js +0 -148
  190. package/vendor/@cloudflare/kv-asset-handler/dist/test/getAssetFromKV.d.ts +0 -1
  191. package/vendor/@cloudflare/kv-asset-handler/dist/test/getAssetFromKV.js +0 -436
  192. package/vendor/@cloudflare/kv-asset-handler/dist/test/mapRequestToAsset.d.ts +0 -1
  193. package/vendor/@cloudflare/kv-asset-handler/dist/test/mapRequestToAsset.js +0 -40
  194. package/vendor/@cloudflare/kv-asset-handler/dist/test/serveSinglePageApp.d.ts +0 -1
  195. package/vendor/@cloudflare/kv-asset-handler/dist/test/serveSinglePageApp.js +0 -42
  196. package/vendor/@cloudflare/kv-asset-handler/dist/types.d.ts +0 -26
  197. package/vendor/@cloudflare/kv-asset-handler/dist/types.js +0 -31
  198. package/vendor/@cloudflare/kv-asset-handler/package.json +0 -52
  199. package/vendor/@cloudflare/kv-asset-handler/src/index.ts +0 -296
  200. package/vendor/@cloudflare/kv-asset-handler/src/mocks.ts +0 -136
  201. package/vendor/@cloudflare/kv-asset-handler/src/test/getAssetFromKV.ts +0 -464
  202. package/vendor/@cloudflare/kv-asset-handler/src/test/mapRequestToAsset.ts +0 -33
  203. package/vendor/@cloudflare/kv-asset-handler/src/test/serveSinglePageApp.ts +0 -42
  204. package/vendor/@cloudflare/kv-asset-handler/src/types.ts +0 -39
  205. package/vendor/wrangler-mime/CHANGELOG.md +0 -289
  206. package/vendor/wrangler-mime/LICENSE +0 -21
  207. package/vendor/wrangler-mime/Mime.js +0 -97
  208. package/vendor/wrangler-mime/README.md +0 -187
  209. package/vendor/wrangler-mime/cli.js +0 -46
  210. package/vendor/wrangler-mime/index.js +0 -4
  211. package/vendor/wrangler-mime/lite.js +0 -4
  212. package/vendor/wrangler-mime/package.json +0 -52
  213. package/vendor/wrangler-mime/types/other.js +0 -1
  214. package/vendor/wrangler-mime/types/standard.js +0 -1
  215. package/wrangler-dist/cli.js.map +0 -7
package/src/proxy.ts CHANGED
@@ -1,17 +1,29 @@
1
+ import { createServer as createHttpServer } from "node:http";
1
2
  import { connect } from "node:http2";
2
- import type { ClientHttp2Session, ServerHttp2Stream } from "node:http2";
3
- import { createServer } from "node:http";
4
- import type {
5
- IncomingHttpHeaders,
6
- RequestListener,
7
- IncomingMessage,
8
- ServerResponse,
9
- Server,
10
- } from "node:http";
3
+ import { createServer as createHttpsServer } from "node:https";
11
4
  import WebSocket from "faye-websocket";
12
- import serveStatic from "serve-static";
13
- import type { CfPreviewToken } from "./api/preview";
5
+ import { createHttpTerminator } from "http-terminator";
14
6
  import { useEffect, useRef, useState } from "react";
7
+ import serveStatic from "serve-static";
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";
12
+ import type {
13
+ IncomingHttpHeaders,
14
+ RequestListener,
15
+ IncomingMessage,
16
+ ServerResponse,
17
+ Server as HttpServer,
18
+ } from "node:http";
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 { useEffect, useRef, useState } from "react";
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
  }