index.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603
  1. "use strict";
  2. const {
  3. validate
  4. } = require("schema-utils");
  5. const mime = require("mime-types");
  6. const middleware = require("./middleware");
  7. const getFilenameFromUrl = require("./utils/getFilenameFromUrl");
  8. const setupHooks = require("./utils/setupHooks");
  9. const setupWriteToDisk = require("./utils/setupWriteToDisk");
  10. const setupOutputFileSystem = require("./utils/setupOutputFileSystem");
  11. const ready = require("./utils/ready");
  12. const schema = require("./options.json");
  13. const noop = () => {};
  14. /** @typedef {import("schema-utils/declarations/validate").Schema} Schema */
  15. /** @typedef {import("webpack").Compiler} Compiler */
  16. /** @typedef {import("webpack").MultiCompiler} MultiCompiler */
  17. /** @typedef {import("webpack").Configuration} Configuration */
  18. /** @typedef {import("webpack").Stats} Stats */
  19. /** @typedef {import("webpack").MultiStats} MultiStats */
  20. /** @typedef {import("fs").ReadStream} ReadStream */
  21. /**
  22. * @typedef {Object} ExtendedServerResponse
  23. * @property {{ webpack?: { devMiddleware?: Context<IncomingMessage, ServerResponse> } }} [locals]
  24. */
  25. /** @typedef {import("http").IncomingMessage} IncomingMessage */
  26. /** @typedef {import("http").ServerResponse & ExtendedServerResponse} ServerResponse */
  27. /**
  28. * @callback NextFunction
  29. * @param {any} [err]
  30. * @return {void}
  31. */
  32. /**
  33. * @typedef {NonNullable<Configuration["watchOptions"]>} WatchOptions
  34. */
  35. /**
  36. * @typedef {Compiler["watching"]} Watching
  37. */
  38. /**
  39. * @typedef {ReturnType<MultiCompiler["watch"]>} MultiWatching
  40. */
  41. /**
  42. * @typedef {import("webpack").OutputFileSystem & { createReadStream?: import("fs").createReadStream, statSync: import("fs").statSync, readFileSync: import("fs").readFileSync }} OutputFileSystem
  43. */
  44. /** @typedef {ReturnType<Compiler["getInfrastructureLogger"]>} Logger */
  45. /**
  46. * @callback Callback
  47. * @param {Stats | MultiStats} [stats]
  48. */
  49. /**
  50. * @typedef {Object} ResponseData
  51. * @property {Buffer | ReadStream} data
  52. * @property {number} byteLength
  53. */
  54. /**
  55. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  56. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  57. * @callback ModifyResponseData
  58. * @param {RequestInternal} req
  59. * @param {ResponseInternal} res
  60. * @param {Buffer | ReadStream} data
  61. * @param {number} byteLength
  62. * @return {ResponseData}
  63. */
  64. /**
  65. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  66. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  67. * @typedef {Object} Context
  68. * @property {boolean} state
  69. * @property {Stats | MultiStats | undefined} stats
  70. * @property {Callback[]} callbacks
  71. * @property {Options<RequestInternal, ResponseInternal>} options
  72. * @property {Compiler | MultiCompiler} compiler
  73. * @property {Watching | MultiWatching | undefined} watching
  74. * @property {Logger} logger
  75. * @property {OutputFileSystem} outputFileSystem
  76. */
  77. /**
  78. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  79. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  80. * @typedef {WithoutUndefined<Context<RequestInternal, ResponseInternal>, "watching">} FilledContext
  81. */
  82. /** @typedef {Record<string, string | number> | Array<{ key: string, value: number | string }>} NormalizedHeaders */
  83. /**
  84. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  85. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  86. * @typedef {NormalizedHeaders | ((req: RequestInternal, res: ResponseInternal, context: Context<RequestInternal, ResponseInternal>) => void | undefined | NormalizedHeaders) | undefined} Headers
  87. */
  88. /**
  89. * @template {IncomingMessage} [RequestInternal = IncomingMessage]
  90. * @template {ServerResponse} [ResponseInternal = ServerResponse]
  91. * @typedef {Object} Options
  92. * @property {{[key: string]: string}} [mimeTypes]
  93. * @property {string | undefined} [mimeTypeDefault]
  94. * @property {boolean | ((targetPath: string) => boolean)} [writeToDisk]
  95. * @property {string[]} [methods]
  96. * @property {Headers<RequestInternal, ResponseInternal>} [headers]
  97. * @property {NonNullable<Configuration["output"]>["publicPath"]} [publicPath]
  98. * @property {Configuration["stats"]} [stats]
  99. * @property {boolean} [serverSideRender]
  100. * @property {OutputFileSystem} [outputFileSystem]
  101. * @property {boolean | string} [index]
  102. * @property {ModifyResponseData<RequestInternal, ResponseInternal>} [modifyResponseData]
  103. * @property {"weak" | "strong"} [etag]
  104. * @property {boolean} [lastModified]
  105. * @property {boolean | number | string | { maxAge?: number, immutable?: boolean }} [cacheControl]
  106. * @property {boolean} [cacheImmutable]
  107. */
  108. /**
  109. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  110. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  111. * @callback Middleware
  112. * @param {RequestInternal} req
  113. * @param {ResponseInternal} res
  114. * @param {NextFunction} next
  115. * @return {Promise<void>}
  116. */
  117. /** @typedef {import("./utils/getFilenameFromUrl").Extra} Extra */
  118. /**
  119. * @callback GetFilenameFromUrl
  120. * @param {string} url
  121. * @param {Extra=} extra
  122. * @returns {string | undefined}
  123. */
  124. /**
  125. * @callback WaitUntilValid
  126. * @param {Callback} callback
  127. */
  128. /**
  129. * @callback Invalidate
  130. * @param {Callback} callback
  131. */
  132. /**
  133. * @callback Close
  134. * @param {(err: Error | null | undefined) => void} callback
  135. */
  136. /**
  137. * @template {IncomingMessage} RequestInternal
  138. * @template {ServerResponse} ResponseInternal
  139. * @typedef {Object} AdditionalMethods
  140. * @property {GetFilenameFromUrl} getFilenameFromUrl
  141. * @property {WaitUntilValid} waitUntilValid
  142. * @property {Invalidate} invalidate
  143. * @property {Close} close
  144. * @property {Context<RequestInternal, ResponseInternal>} context
  145. */
  146. /**
  147. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  148. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  149. * @typedef {Middleware<RequestInternal, ResponseInternal> & AdditionalMethods<RequestInternal, ResponseInternal>} API
  150. */
  151. /**
  152. * @template T
  153. * @template {keyof T} K
  154. * @typedef {Omit<T, K> & Partial<T>} WithOptional
  155. */
  156. /**
  157. * @template T
  158. * @template {keyof T} K
  159. * @typedef {T & { [P in K]: NonNullable<T[P]> }} WithoutUndefined
  160. */
  161. /**
  162. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  163. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  164. * @param {Compiler | MultiCompiler} compiler
  165. * @param {Options<RequestInternal, ResponseInternal>} [options]
  166. * @returns {API<RequestInternal, ResponseInternal>}
  167. */
  168. function wdm(compiler, options = {}) {
  169. validate( /** @type {Schema} */schema, options, {
  170. name: "Dev Middleware",
  171. baseDataPath: "options"
  172. });
  173. const {
  174. mimeTypes
  175. } = options;
  176. if (mimeTypes) {
  177. const {
  178. types
  179. } = mime;
  180. // mimeTypes from user provided options should take priority
  181. // over existing, known types
  182. // @ts-ignore
  183. mime.types = {
  184. ...types,
  185. ...mimeTypes
  186. };
  187. }
  188. /**
  189. * @type {WithOptional<Context<RequestInternal, ResponseInternal>, "watching" | "outputFileSystem">}
  190. */
  191. const context = {
  192. state: false,
  193. // eslint-disable-next-line no-undefined
  194. stats: undefined,
  195. callbacks: [],
  196. options,
  197. compiler,
  198. logger: compiler.getInfrastructureLogger("webpack-dev-middleware")
  199. };
  200. setupHooks(context);
  201. if (options.writeToDisk) {
  202. setupWriteToDisk(context);
  203. }
  204. setupOutputFileSystem(context);
  205. // Start watching
  206. if ( /** @type {Compiler} */context.compiler.watching) {
  207. context.watching = /** @type {Compiler} */context.compiler.watching;
  208. } else {
  209. /**
  210. * @param {Error | null | undefined} error
  211. */
  212. const errorHandler = error => {
  213. if (error) {
  214. // TODO: improve that in future
  215. // For example - `writeToDisk` can throw an error and right now it is ends watching.
  216. // We can improve that and keep watching active, but it is require API on webpack side.
  217. // Let's implement that in webpack@5 because it is rare case.
  218. context.logger.error(error);
  219. }
  220. };
  221. if (Array.isArray( /** @type {MultiCompiler} */context.compiler.compilers)) {
  222. const c = /** @type {MultiCompiler} */context.compiler;
  223. const watchOptions = c.compilers.map(childCompiler => childCompiler.options.watchOptions || {});
  224. context.watching = compiler.watch(watchOptions, errorHandler);
  225. } else {
  226. const c = /** @type {Compiler} */context.compiler;
  227. const watchOptions = c.options.watchOptions || {};
  228. context.watching = compiler.watch(watchOptions, errorHandler);
  229. }
  230. }
  231. const filledContext = /** @type {FilledContext<RequestInternal, ResponseInternal>} */
  232. context;
  233. const instance = /** @type {API<RequestInternal, ResponseInternal>} */
  234. middleware(filledContext);
  235. // API
  236. instance.getFilenameFromUrl = (url, extra) => getFilenameFromUrl(filledContext, url, extra);
  237. instance.waitUntilValid = (callback = noop) => {
  238. ready(filledContext, callback);
  239. };
  240. instance.invalidate = (callback = noop) => {
  241. ready(filledContext, callback);
  242. filledContext.watching.invalidate();
  243. };
  244. instance.close = (callback = noop) => {
  245. filledContext.watching.close(callback);
  246. };
  247. instance.context = filledContext;
  248. return instance;
  249. }
  250. /**
  251. * @template S
  252. * @template O
  253. * @typedef {Object} HapiPluginBase
  254. * @property {(server: S, options: O) => void | Promise<void>} register
  255. */
  256. /**
  257. * @template S
  258. * @template O
  259. * @typedef {HapiPluginBase<S, O> & { pkg: { name: string }, multiple: boolean }} HapiPlugin
  260. */
  261. /**
  262. * @typedef {Options & { compiler: Compiler | MultiCompiler }} HapiOptions
  263. */
  264. /**
  265. * @template HapiServer
  266. * @template {HapiOptions} HapiOptionsInternal
  267. * @returns {HapiPlugin<HapiServer, HapiOptionsInternal>}
  268. */
  269. function hapiWrapper() {
  270. return {
  271. pkg: {
  272. name: "webpack-dev-middleware"
  273. },
  274. // Allow to have multiple middleware
  275. multiple: true,
  276. register(server, options) {
  277. const {
  278. compiler,
  279. ...rest
  280. } = options;
  281. if (!compiler) {
  282. throw new Error("The compiler options is required.");
  283. }
  284. const devMiddleware = wdm(compiler, rest);
  285. // @ts-ignore
  286. if (!server.decorations.server.includes("webpackDevMiddleware")) {
  287. // @ts-ignore
  288. server.decorate("server", "webpackDevMiddleware", devMiddleware);
  289. }
  290. // @ts-ignore
  291. server.ext("onRequest", (request, h) => new Promise((resolve, reject) => {
  292. let isFinished = false;
  293. /**
  294. * @param {string | Buffer} [data]
  295. */
  296. // eslint-disable-next-line no-param-reassign
  297. request.raw.res.send = data => {
  298. isFinished = true;
  299. request.raw.res.end(data);
  300. };
  301. /**
  302. * @param {string | Buffer} [data]
  303. */
  304. // eslint-disable-next-line no-param-reassign
  305. request.raw.res.finish = data => {
  306. isFinished = true;
  307. request.raw.res.end(data);
  308. };
  309. devMiddleware(request.raw.req, request.raw.res, error => {
  310. if (error) {
  311. reject(error);
  312. return;
  313. }
  314. if (!isFinished) {
  315. resolve(request);
  316. }
  317. });
  318. }).then(() => h.continue).catch(error => {
  319. throw error;
  320. }));
  321. }
  322. };
  323. }
  324. wdm.hapiWrapper = hapiWrapper;
  325. /**
  326. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  327. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  328. * @param {Compiler | MultiCompiler} compiler
  329. * @param {Options<RequestInternal, ResponseInternal>} [options]
  330. * @returns {(ctx: any, next: Function) => Promise<void> | void}
  331. */
  332. function koaWrapper(compiler, options) {
  333. const devMiddleware = wdm(compiler, options);
  334. /**
  335. * @param {{ req: RequestInternal, res: ResponseInternal & import("./utils/compatibleAPI").ExpectedServerResponse, status: number, body: string | Buffer | import("fs").ReadStream | { message: string }, state: Object }} ctx
  336. * @param {Function} next
  337. * @returns {Promise<void>}
  338. */
  339. const wrapper = async function webpackDevMiddleware(ctx, next) {
  340. const {
  341. req,
  342. res
  343. } = ctx;
  344. res.locals = ctx.state;
  345. let {
  346. status
  347. } = ctx;
  348. /**
  349. * @returns {number} code
  350. */
  351. res.getStatusCode = () => status;
  352. /**
  353. * @param {number} statusCode status code
  354. */
  355. res.setStatusCode = statusCode => {
  356. status = statusCode;
  357. // eslint-disable-next-line no-param-reassign
  358. ctx.status = statusCode;
  359. };
  360. res.getReadyReadableStreamState = () => "open";
  361. try {
  362. await new Promise(
  363. /**
  364. * @param {(value: void) => void} resolve
  365. * @param {(reason?: any) => void} reject
  366. */
  367. (resolve, reject) => {
  368. /**
  369. * @param {import("fs").ReadStream} stream readable stream
  370. */
  371. res.stream = stream => {
  372. // eslint-disable-next-line no-param-reassign
  373. ctx.body = stream;
  374. };
  375. /**
  376. * @param {string | Buffer} data data
  377. */
  378. res.send = data => {
  379. // eslint-disable-next-line no-param-reassign
  380. ctx.body = data;
  381. };
  382. /**
  383. * @param {string | Buffer} [data] data
  384. */
  385. res.finish = data => {
  386. // eslint-disable-next-line no-param-reassign
  387. ctx.status = status;
  388. res.end(data);
  389. };
  390. devMiddleware(req, res, err => {
  391. if (err) {
  392. reject(err);
  393. return;
  394. }
  395. resolve();
  396. });
  397. });
  398. } catch (err) {
  399. // eslint-disable-next-line no-param-reassign
  400. ctx.status = /** @type {Error & { statusCode: number }} */err.statusCode || /** @type {Error & { status: number }} */err.status || 500;
  401. // eslint-disable-next-line no-param-reassign
  402. ctx.body = {
  403. message: /** @type {Error} */err.message
  404. };
  405. }
  406. await next();
  407. };
  408. wrapper.devMiddleware = devMiddleware;
  409. return wrapper;
  410. }
  411. wdm.koaWrapper = koaWrapper;
  412. /**
  413. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  414. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  415. * @param {Compiler | MultiCompiler} compiler
  416. * @param {Options<RequestInternal, ResponseInternal>} [options]
  417. * @returns {(ctx: any, next: Function) => Promise<void> | void}
  418. */
  419. function honoWrapper(compiler, options) {
  420. const devMiddleware = wdm(compiler, options);
  421. /**
  422. * @param {{ env: any, body: any, json: any, status: any, set:any, req: RequestInternal & import("./utils/compatibleAPI").ExpectedIncomingMessage & { header: (name: string) => string }, res: ResponseInternal & import("./utils/compatibleAPI").ExpectedServerResponse & { headers: any, status: any } }} c
  423. * @param {Function} next
  424. * @returns {Promise<void>}
  425. */
  426. // eslint-disable-next-line consistent-return
  427. const wrapper = async function webpackDevMiddleware(c, next) {
  428. const {
  429. req,
  430. res
  431. } = c;
  432. c.set("webpack", {
  433. devMiddleware: devMiddleware.context
  434. });
  435. /**
  436. * @returns {string | undefined}
  437. */
  438. req.getMethod = () => c.req.method;
  439. /**
  440. * @param {string} name
  441. * @returns {string | string[] | undefined}
  442. */
  443. req.getHeader = name => c.req.header(name);
  444. /**
  445. * @returns {string | undefined}
  446. */
  447. req.getURL = () => c.req.url;
  448. let {
  449. status
  450. } = c.res;
  451. /**
  452. * @returns {number} code
  453. */
  454. res.getStatusCode = () => status;
  455. /**
  456. * @param {number} code
  457. */
  458. res.setStatusCode = code => {
  459. status = code;
  460. };
  461. /**
  462. * @param {string} name header name
  463. */
  464. res.getHeader = name => c.res.headers.get(name);
  465. /**
  466. * @param {string} name
  467. * @param {string | number | Readonly<string[]>} value
  468. */
  469. res.setHeader = (name, value) => {
  470. c.res.headers.append(name, value);
  471. return c.res;
  472. };
  473. /**
  474. * @param {string} name
  475. */
  476. res.removeHeader = name => {
  477. c.res.headers.delete(name);
  478. };
  479. /**
  480. * @returns {string[]}
  481. */
  482. res.getResponseHeaders = () => Array.from(c.res.headers.keys());
  483. /**
  484. * @returns {ServerResponse}
  485. */
  486. res.getOutgoing = () => c.env.outgoing;
  487. res.setState = () => {
  488. // Do nothing, because we set it before
  489. };
  490. res.getReadyReadableStreamState = () => "readable";
  491. res.getHeadersSent = () => c.env.outgoing.headersSent;
  492. let body;
  493. try {
  494. await new Promise(
  495. /**
  496. * @param {(value: void) => void} resolve
  497. * @param {(reason?: any) => void} reject
  498. */
  499. (resolve, reject) => {
  500. /**
  501. * @param {import("fs").ReadStream} stream readable stream
  502. */
  503. res.stream = stream => {
  504. body = stream;
  505. // responseHandler(stream);
  506. };
  507. /**
  508. * @param {string | Buffer} data data
  509. */
  510. res.send = data => {
  511. body = data;
  512. };
  513. /**
  514. * @param {string | Buffer} [data] data
  515. */
  516. res.finish = data => {
  517. body = typeof data !== "undefined" ? data : null;
  518. };
  519. devMiddleware(req, res, err => {
  520. if (err) {
  521. reject(err);
  522. return;
  523. }
  524. resolve();
  525. });
  526. });
  527. } catch (err) {
  528. c.status(500);
  529. return c.json({
  530. message: /** @type {Error} */err.message
  531. });
  532. }
  533. if (typeof body !== "undefined") {
  534. return c.body(body, status);
  535. }
  536. await next();
  537. };
  538. wrapper.devMiddleware = devMiddleware;
  539. return wrapper;
  540. }
  541. wdm.honoWrapper = honoWrapper;
  542. module.exports = wdm;