wrangler 0.0.0-e64812e → 0.0.0-e8e684c7

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