index.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630
  1. "use strict";
  2. const mime = require("mime-types");
  3. const {
  4. validate
  5. } = require("schema-utils");
  6. const middleware = require("./middleware");
  7. const schema = require("./options.json");
  8. const getFilenameFromUrl = require("./utils/getFilenameFromUrl");
  9. const ready = require("./utils/ready");
  10. const setupHooks = require("./utils/setupHooks");
  11. const setupOutputFileSystem = require("./utils/setupOutputFileSystem");
  12. const setupWriteToDisk = require("./utils/setupWriteToDisk");
  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 locals
  24. */
  25. /** @typedef {import("http").IncomingMessage} IncomingMessage */
  26. /** @typedef {import("http").ServerResponse & ExtendedServerResponse} ServerResponse */
  27. // eslint-disable-next-line jsdoc/no-restricted-syntax
  28. /**
  29. * @callback NextFunction
  30. * @param {any=} err error
  31. * @returns {void}
  32. */
  33. /**
  34. * @typedef {NonNullable<Configuration["watchOptions"]>} WatchOptions
  35. */
  36. /**
  37. * @typedef {Compiler["watching"]} Watching
  38. */
  39. /**
  40. * @typedef {ReturnType<MultiCompiler["watch"]>} MultiWatching
  41. */
  42. /**
  43. * @typedef {import("webpack").OutputFileSystem & { createReadStream?: import("fs").createReadStream, statSync: import("fs").statSync, readFileSync: import("fs").readFileSync }} OutputFileSystem
  44. */
  45. /** @typedef {ReturnType<Compiler["getInfrastructureLogger"]>} Logger */
  46. /**
  47. * @callback Callback
  48. * @param {(Stats | MultiStats)=} stats
  49. */
  50. /**
  51. * @typedef {object} ResponseData
  52. * @property {Buffer | ReadStream} data data
  53. * @property {number} byteLength byte length
  54. */
  55. /**
  56. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  57. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  58. * @callback ModifyResponseData
  59. * @param {RequestInternal} req req
  60. * @param {ResponseInternal} res res
  61. * @param {Buffer | ReadStream} data data
  62. * @param {number} byteLength byte length
  63. * @returns {ResponseData}
  64. */
  65. /**
  66. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  67. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  68. * @typedef {object} Context
  69. * @property {boolean} state state
  70. * @property {Stats | MultiStats | undefined} stats stats
  71. * @property {Callback[]} callbacks callbacks
  72. * @property {Options<RequestInternal, ResponseInternal>} options options
  73. * @property {Compiler | MultiCompiler} compiler compiler
  74. * @property {Watching | MultiWatching | undefined} watching watching
  75. * @property {Logger} logger logger
  76. * @property {OutputFileSystem} outputFileSystem output file system
  77. */
  78. /**
  79. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  80. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  81. * @typedef {WithoutUndefined<Context<RequestInternal, ResponseInternal>, "watching">} FilledContext
  82. */
  83. /** @typedef {Record<string, string | number> | Array<{ key: string, value: number | string }>} NormalizedHeaders */
  84. /**
  85. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  86. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  87. * @typedef {NormalizedHeaders | ((req: RequestInternal, res: ResponseInternal, context: Context<RequestInternal, ResponseInternal>) => void | undefined | NormalizedHeaders) | undefined} Headers
  88. */
  89. /**
  90. * @template {IncomingMessage} [RequestInternal = IncomingMessage]
  91. * @template {ServerResponse} [ResponseInternal = ServerResponse]
  92. * @typedef {object} Options
  93. * @property {{ [key: string]: string }=} mimeTypes mime types
  94. * @property {(string | undefined)=} mimeTypeDefault mime type default
  95. * @property {(boolean | ((targetPath: string) => boolean))=} writeToDisk write to disk
  96. * @property {string[]=} methods methods
  97. * @property {Headers<RequestInternal, ResponseInternal>=} headers headers
  98. * @property {NonNullable<Configuration["output"]>["publicPath"]=} publicPath public path
  99. * @property {Configuration["stats"]=} stats stats
  100. * @property {boolean=} serverSideRender is server side render
  101. * @property {OutputFileSystem=} outputFileSystem output file system
  102. * @property {(boolean | string)=} index index
  103. * @property {ModifyResponseData<RequestInternal, ResponseInternal>=} modifyResponseData modify response data
  104. * @property {"weak" | "strong"=} etag options to generate etag header
  105. * @property {boolean=} lastModified options to generate last modified header
  106. * @property {(boolean | number | string | { maxAge?: number, immutable?: boolean })=} cacheControl options to generate cache headers
  107. * @property {boolean=} cacheImmutable is cache immutable
  108. */
  109. /**
  110. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  111. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  112. * @callback Middleware
  113. * @param {RequestInternal} req
  114. * @param {ResponseInternal} res
  115. * @param {NextFunction} next
  116. * @returns {Promise<void>}
  117. */
  118. /** @typedef {import("./utils/getFilenameFromUrl").Extra} Extra */
  119. /**
  120. * @callback GetFilenameFromUrl
  121. * @param {string} url
  122. * @param {Extra=} extra
  123. * @returns {string | undefined}
  124. */
  125. /**
  126. * @callback WaitUntilValid
  127. * @param {Callback} callback
  128. */
  129. /**
  130. * @callback Invalidate
  131. * @param {Callback} callback
  132. */
  133. /**
  134. * @callback Close
  135. * @param {(err: Error | null | undefined) => void} callback
  136. */
  137. /**
  138. * @template {IncomingMessage} RequestInternal
  139. * @template {ServerResponse} ResponseInternal
  140. * @typedef {object} AdditionalMethods
  141. * @property {GetFilenameFromUrl} getFilenameFromUrl get filename from url
  142. * @property {WaitUntilValid} waitUntilValid wait until valid
  143. * @property {Invalidate} invalidate invalidate
  144. * @property {Close} close close
  145. * @property {Context<RequestInternal, ResponseInternal>} context context
  146. */
  147. /**
  148. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  149. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  150. * @typedef {Middleware<RequestInternal, ResponseInternal> & AdditionalMethods<RequestInternal, ResponseInternal>} API
  151. */
  152. /**
  153. * @template T
  154. * @template {keyof T} K
  155. * @typedef {Omit<T, K> & Partial<T>} WithOptional
  156. */
  157. /**
  158. * @template T
  159. * @template {keyof T} K
  160. * @typedef {T & { [P in K]: NonNullable<T[P]> }} WithoutUndefined
  161. */
  162. /**
  163. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  164. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  165. * @param {Compiler | MultiCompiler} compiler compiler
  166. * @param {Options<RequestInternal, ResponseInternal>=} options options
  167. * @returns {API<RequestInternal, ResponseInternal>} webpack dev middleware
  168. */
  169. function wdm(compiler, options = {}) {
  170. validate(/** @type {Schema} */schema, options, {
  171. name: "Dev Middleware",
  172. baseDataPath: "options"
  173. });
  174. const {
  175. mimeTypes
  176. } = options;
  177. if (mimeTypes) {
  178. const {
  179. types
  180. } = mime;
  181. // mimeTypes from user provided options should take priority
  182. // over existing, known types
  183. // @ts-expect-error
  184. mime.types = {
  185. ...types,
  186. ...mimeTypes
  187. };
  188. }
  189. /**
  190. * @type {WithOptional<Context<RequestInternal, ResponseInternal>, "watching" | "outputFileSystem">}
  191. */
  192. const context = {
  193. state: false,
  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 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 compilers = /** @type {MultiCompiler} */context.compiler;
  223. const watchOptions = compilers.compilers.map(childCompiler => childCompiler.options.watchOptions || {});
  224. context.watching = compiler.watch(watchOptions, errorHandler);
  225. } else {
  226. const oneCompiler = /** @type {Compiler} */context.compiler;
  227. const watchOptions = oneCompiler.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 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>} hapi wrapper
  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-expect-error
  286. if (!server.decorations.server.includes("webpackDevMiddleware")) {
  287. // @ts-expect-error
  288. server.decorate("server", "webpackDevMiddleware", devMiddleware);
  289. }
  290. // @ts-expect-error
  291. // eslint-disable-next-line id-length
  292. server.ext("onRequest", (request, h) => new Promise((resolve, reject) => {
  293. let isFinished = false;
  294. /**
  295. * @param {(string | Buffer)=} data
  296. */
  297. request.raw.res.send = data => {
  298. isFinished = true;
  299. request.raw.res.end(data);
  300. };
  301. /**
  302. * @param {(string | Buffer)=} data
  303. */
  304. request.raw.res.finish = data => {
  305. isFinished = true;
  306. request.raw.res.end(data);
  307. };
  308. devMiddleware(request.raw.req, request.raw.res, error => {
  309. if (error) {
  310. reject(error);
  311. return;
  312. }
  313. if (!isFinished) {
  314. resolve(request);
  315. }
  316. });
  317. }).then(() => h.continue).catch(error => {
  318. throw error;
  319. }));
  320. }
  321. };
  322. }
  323. wdm.hapiWrapper = hapiWrapper;
  324. // eslint-disable-next-line jsdoc/no-restricted-syntax
  325. /**
  326. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  327. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  328. * @param {Compiler | MultiCompiler} compiler compiler
  329. * @param {Options<RequestInternal, ResponseInternal>=} options options
  330. * @returns {(ctx: any, next: Function) => Promise<void> | void} kow wrapper
  331. */
  332. function koaWrapper(compiler, options) {
  333. const devMiddleware = wdm(compiler, options);
  334. // eslint-disable-next-line jsdoc/no-restricted-syntax
  335. /**
  336. * @param {{req: RequestInternal, res: ResponseInternal & import("./utils/compatibleAPI").ExpectedServerResponse, status: number, body: string | Buffer | import("fs").ReadStream | {message: string}, state: object}} ctx context
  337. * @param {Function} next next
  338. * @returns {Promise<void>}
  339. */
  340. async function webpackDevMiddleware(ctx, next) {
  341. const {
  342. req,
  343. res
  344. } = ctx;
  345. res.locals = ctx.state;
  346. let {
  347. status
  348. } = ctx;
  349. /**
  350. * @returns {number} code
  351. */
  352. res.getStatusCode = () => status;
  353. /**
  354. * @param {number} statusCode status code
  355. */
  356. res.setStatusCode = statusCode => {
  357. status = statusCode;
  358. ctx.status = statusCode;
  359. };
  360. let isFinished = false;
  361. let needNext = false;
  362. try {
  363. await new Promise(
  364. /**
  365. * @param {(value: void) => void} resolve resolve
  366. * @param {(reason?: Error) => void} reject reject
  367. */
  368. (resolve, reject) => {
  369. /**
  370. * @param {import("fs").ReadStream} stream readable stream
  371. */
  372. res.stream = stream => {
  373. ctx.body = stream;
  374. isFinished = true;
  375. resolve();
  376. };
  377. /**
  378. * @param {string | Buffer} data data
  379. */
  380. res.send = data => {
  381. ctx.body = data;
  382. isFinished = true;
  383. resolve();
  384. };
  385. /**
  386. * @param {(string | Buffer)=} data data
  387. */
  388. res.finish = data => {
  389. ctx.status = status;
  390. res.end(data);
  391. isFinished = true;
  392. resolve();
  393. };
  394. devMiddleware(req, res, err => {
  395. if (err) {
  396. reject(err);
  397. return;
  398. }
  399. needNext = true;
  400. if (!isFinished) {
  401. resolve();
  402. }
  403. });
  404. });
  405. } catch (err) {
  406. ctx.status = /** @type {Error & { statusCode: number }} */err.statusCode || /** @type {Error & { status: number }} */err.status || 500;
  407. ctx.body = {
  408. message: /** @type {Error} */err.message
  409. };
  410. }
  411. if (needNext) {
  412. await next();
  413. }
  414. }
  415. webpackDevMiddleware.devMiddleware = devMiddleware;
  416. return webpackDevMiddleware;
  417. }
  418. wdm.koaWrapper = koaWrapper;
  419. // eslint-disable-next-line jsdoc/no-restricted-syntax
  420. /**
  421. * @template {IncomingMessage} [RequestInternal=IncomingMessage]
  422. * @template {ServerResponse} [ResponseInternal=ServerResponse]
  423. * @param {Compiler | MultiCompiler} compiler compiler
  424. * @param {Options<RequestInternal, ResponseInternal>=} options options
  425. * @returns {(ctx: any, next: Function) => Promise<void> | void} hono wrapper
  426. */
  427. function honoWrapper(compiler, options) {
  428. const devMiddleware = wdm(compiler, options);
  429. // eslint-disable-next-line jsdoc/no-restricted-syntax
  430. /**
  431. * @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 } }} context context
  432. * @param {Function} next next function
  433. * @returns {Promise<void>}
  434. */
  435. async function webpackDevMiddleware(context, next) {
  436. const {
  437. req,
  438. res
  439. } = context;
  440. context.set("webpack", {
  441. devMiddleware: devMiddleware.context
  442. });
  443. /**
  444. * @returns {string | undefined} method
  445. */
  446. req.getMethod = () => context.req.method;
  447. /**
  448. * @param {string} name name
  449. * @returns {string | string[] | undefined} header value
  450. */
  451. req.getHeader = name => context.req.header(name);
  452. /**
  453. * @returns {string | undefined} URL
  454. */
  455. req.getURL = () => context.req.url;
  456. let {
  457. status
  458. } = context.res;
  459. /**
  460. * @returns {number} code code
  461. */
  462. res.getStatusCode = () => status;
  463. /**
  464. * @param {number} code code
  465. */
  466. res.setStatusCode = code => {
  467. status = code;
  468. };
  469. /**
  470. * @param {string} name header name
  471. * @returns {string | string[] | undefined} header
  472. */
  473. res.getHeader = name => context.res.headers.get(name);
  474. // eslint-disable-next-line jsdoc/no-restricted-syntax
  475. /**
  476. * @param {string} name header name
  477. * @param {string | number | Readonly<string[]>} value value
  478. * @returns {ResponseInternal & import("./utils/compatibleAPI").ExpectedServerResponse & { headers: any, status: any }} response
  479. */
  480. res.setHeader = (name, value) => {
  481. context.res.headers.append(name, value);
  482. return context.res;
  483. };
  484. /**
  485. * @param {string} name header name
  486. */
  487. res.removeHeader = name => {
  488. context.res.headers.delete(name);
  489. };
  490. /**
  491. * @returns {string[]} response headers
  492. */
  493. res.getResponseHeaders = () => [...context.res.headers.keys()];
  494. /**
  495. * @returns {ServerResponse} server response
  496. */
  497. res.getOutgoing = () => context.env.outgoing;
  498. res.setState = () => {
  499. // Do nothing, because we set it before
  500. };
  501. res.getHeadersSent = () => context.env.outgoing.headersSent;
  502. let body;
  503. let isFinished = false;
  504. try {
  505. await new Promise(
  506. /**
  507. * @param {(value: void) => void} resolve resolve
  508. * @param {(reason?: Error) => void} reject reject
  509. */
  510. (resolve, reject) => {
  511. /**
  512. * @param {import("fs").ReadStream} stream readable stream
  513. */
  514. res.stream = stream => {
  515. body = stream;
  516. isFinished = true;
  517. resolve();
  518. };
  519. /**
  520. * @param {string | Buffer} data data
  521. */
  522. res.send = data => {
  523. // Hono sets `Content-Length` by default
  524. context.res.headers.delete("Content-Length");
  525. body = data;
  526. isFinished = true;
  527. resolve();
  528. };
  529. /**
  530. * @param {(string | Buffer)=} data data
  531. */
  532. res.finish = data => {
  533. const isDataExist = typeof data !== "undefined";
  534. // Hono sets `Content-Length` by default
  535. if (isDataExist) {
  536. context.res.headers.delete("Content-Length");
  537. }
  538. body = isDataExist ? data : null;
  539. isFinished = true;
  540. resolve();
  541. };
  542. devMiddleware(req, res, err => {
  543. if (err) {
  544. reject(err);
  545. return;
  546. }
  547. if (!isFinished) {
  548. resolve();
  549. }
  550. });
  551. });
  552. } catch (err) {
  553. context.status(500);
  554. return context.json({
  555. message: /** @type {Error} */err.message
  556. });
  557. }
  558. if (typeof body !== "undefined") {
  559. return context.body(body, status);
  560. }
  561. await next();
  562. }
  563. webpackDevMiddleware.devMiddleware = devMiddleware;
  564. return webpackDevMiddleware;
  565. }
  566. wdm.honoWrapper = honoWrapper;
  567. module.exports = wdm;