wrangler 0.0.0-e2b7352 → 0.0.0-e305903a

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