WasmChunkLoadingRuntimeModule.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  1. /*
  2. MIT License http://www.opensource.org/licenses/mit-license.php
  3. */
  4. "use strict";
  5. const RuntimeGlobals = require("../RuntimeGlobals");
  6. const RuntimeModule = require("../RuntimeModule");
  7. const Template = require("../Template");
  8. const { compareModulesByIdentifier } = require("../util/comparators");
  9. const WebAssemblyUtils = require("./WebAssemblyUtils");
  10. /** @typedef {import("@webassemblyjs/ast").Signature} Signature */
  11. /** @typedef {import("../Chunk")} Chunk */
  12. /** @typedef {import("../ChunkGraph")} ChunkGraph */
  13. /** @typedef {import("../ChunkGraph").ModuleId} ModuleId */
  14. /** @typedef {import("../Compilation")} Compilation */
  15. /** @typedef {import("../Module")} Module */
  16. /** @typedef {import("../Module").ReadOnlyRuntimeRequirements} ReadOnlyRuntimeRequirements */
  17. /** @typedef {import("../ModuleGraph")} ModuleGraph */
  18. /** @typedef {import("../util/runtime").RuntimeSpec} RuntimeSpec */
  19. // TODO webpack 6 remove the whole folder
  20. // Get all wasm modules
  21. /**
  22. * @param {ModuleGraph} moduleGraph the module graph
  23. * @param {ChunkGraph} chunkGraph the chunk graph
  24. * @param {Chunk} chunk the chunk
  25. * @returns {Module[]} all wasm modules
  26. */
  27. const getAllWasmModules = (moduleGraph, chunkGraph, chunk) => {
  28. const wasmModules = chunk.getAllAsyncChunks();
  29. /** @type {Module[]} */
  30. const array = [];
  31. for (const chunk of wasmModules) {
  32. for (const m of chunkGraph.getOrderedChunkModulesIterable(
  33. chunk,
  34. compareModulesByIdentifier
  35. )) {
  36. if (m.type.startsWith("webassembly")) {
  37. array.push(m);
  38. }
  39. }
  40. }
  41. return array;
  42. };
  43. /** @typedef {string[]} Declarations */
  44. /**
  45. * generates the import object function for a module
  46. * @param {ChunkGraph} chunkGraph the chunk graph
  47. * @param {Module} module the module
  48. * @param {boolean | undefined} mangle mangle imports
  49. * @param {Declarations} declarations array where declarations are pushed to
  50. * @param {RuntimeSpec} runtime the runtime
  51. * @returns {string} source code
  52. */
  53. const generateImportObject = (
  54. chunkGraph,
  55. module,
  56. mangle,
  57. declarations,
  58. runtime
  59. ) => {
  60. const moduleGraph = chunkGraph.moduleGraph;
  61. /** @type {Map<string, ModuleId>} */
  62. const waitForInstances = new Map();
  63. /** @type {{ module: string, name: string, value: string }[]} */
  64. const properties = [];
  65. const usedWasmDependencies = WebAssemblyUtils.getUsedDependencies(
  66. moduleGraph,
  67. module,
  68. mangle
  69. );
  70. for (const usedDep of usedWasmDependencies) {
  71. const dep = usedDep.dependency;
  72. const importedModule = moduleGraph.getModule(dep);
  73. const exportName = dep.name;
  74. const usedName =
  75. importedModule &&
  76. moduleGraph
  77. .getExportsInfo(importedModule)
  78. .getUsedName(exportName, runtime);
  79. const description = dep.description;
  80. const direct = dep.onlyDirectImport;
  81. const module = usedDep.module;
  82. const name = usedDep.name;
  83. if (direct) {
  84. const instanceVar = `m${waitForInstances.size}`;
  85. waitForInstances.set(
  86. instanceVar,
  87. /** @type {ModuleId} */
  88. (chunkGraph.getModuleId(/** @type {Module} */ (importedModule)))
  89. );
  90. properties.push({
  91. module,
  92. name,
  93. value: `${instanceVar}[${JSON.stringify(usedName)}]`
  94. });
  95. } else {
  96. const params =
  97. /** @type {Signature} */
  98. (description.signature).params.map(
  99. (param, k) => `p${k}${param.valtype}`
  100. );
  101. const mod = `${RuntimeGlobals.moduleCache}[${JSON.stringify(
  102. chunkGraph.getModuleId(/** @type {Module} */ (importedModule))
  103. )}]`;
  104. const modExports = `${mod}.exports`;
  105. const cache = `wasmImportedFuncCache${declarations.length}`;
  106. declarations.push(`var ${cache};`);
  107. const modCode =
  108. /** @type {Module} */
  109. (importedModule).type.startsWith("webassembly")
  110. ? `${mod} ? ${modExports}[${JSON.stringify(usedName)}] : `
  111. : "";
  112. properties.push({
  113. module,
  114. name,
  115. value: Template.asString([
  116. `${modCode}function(${params}) {`,
  117. Template.indent([
  118. `if(${cache} === undefined) ${cache} = ${modExports};`,
  119. `return ${cache}[${JSON.stringify(usedName)}](${params});`
  120. ]),
  121. "}"
  122. ])
  123. });
  124. }
  125. }
  126. /** @type {string[]} */
  127. let importObject;
  128. if (mangle) {
  129. importObject = [
  130. "return {",
  131. Template.indent([
  132. properties
  133. .map((p) => `${JSON.stringify(p.name)}: ${p.value}`)
  134. .join(",\n")
  135. ]),
  136. "};"
  137. ];
  138. } else {
  139. /** @type {Map<string, { name: string, value: string }[]>} */
  140. const propertiesByModule = new Map();
  141. for (const p of properties) {
  142. let list = propertiesByModule.get(p.module);
  143. if (list === undefined) {
  144. propertiesByModule.set(p.module, (list = []));
  145. }
  146. list.push(p);
  147. }
  148. importObject = [
  149. "return {",
  150. Template.indent([
  151. Array.from(propertiesByModule, ([module, list]) =>
  152. Template.asString([
  153. `${JSON.stringify(module)}: {`,
  154. Template.indent([
  155. list
  156. .map((p) => `${JSON.stringify(p.name)}: ${p.value}`)
  157. .join(",\n")
  158. ]),
  159. "}"
  160. ])
  161. ).join(",\n")
  162. ]),
  163. "};"
  164. ];
  165. }
  166. const moduleIdStringified = JSON.stringify(chunkGraph.getModuleId(module));
  167. if (waitForInstances.size === 1) {
  168. const moduleId = [...waitForInstances.values()][0];
  169. const promise = `installedWasmModules[${JSON.stringify(moduleId)}]`;
  170. const variable = [...waitForInstances.keys()][0];
  171. return Template.asString([
  172. `${moduleIdStringified}: function() {`,
  173. Template.indent([
  174. `return promiseResolve().then(function() { return ${promise}; }).then(function(${variable}) {`,
  175. Template.indent(importObject),
  176. "});"
  177. ]),
  178. "},"
  179. ]);
  180. } else if (waitForInstances.size > 0) {
  181. const promises = Array.from(
  182. waitForInstances.values(),
  183. (id) => `installedWasmModules[${JSON.stringify(id)}]`
  184. ).join(", ");
  185. const variables = Array.from(
  186. waitForInstances.keys(),
  187. (name, i) => `${name} = array[${i}]`
  188. ).join(", ");
  189. return Template.asString([
  190. `${moduleIdStringified}: function() {`,
  191. Template.indent([
  192. `return promiseResolve().then(function() { return Promise.all([${promises}]); }).then(function(array) {`,
  193. Template.indent([`var ${variables};`, ...importObject]),
  194. "});"
  195. ]),
  196. "},"
  197. ]);
  198. }
  199. return Template.asString([
  200. `${moduleIdStringified}: function() {`,
  201. Template.indent(importObject),
  202. "},"
  203. ]);
  204. };
  205. /**
  206. * @typedef {object} WasmChunkLoadingRuntimeModuleOptions
  207. * @property {(path: string) => string} generateLoadBinaryCode
  208. * @property {boolean=} supportsStreaming
  209. * @property {boolean=} mangleImports
  210. * @property {ReadOnlyRuntimeRequirements} runtimeRequirements
  211. */
  212. class WasmChunkLoadingRuntimeModule extends RuntimeModule {
  213. /**
  214. * @param {WasmChunkLoadingRuntimeModuleOptions} options options
  215. */
  216. constructor({
  217. generateLoadBinaryCode,
  218. supportsStreaming,
  219. mangleImports,
  220. runtimeRequirements
  221. }) {
  222. super("wasm chunk loading", RuntimeModule.STAGE_ATTACH);
  223. this.generateLoadBinaryCode = generateLoadBinaryCode;
  224. this.supportsStreaming = supportsStreaming;
  225. this.mangleImports = mangleImports;
  226. this._runtimeRequirements = runtimeRequirements;
  227. }
  228. /**
  229. * @returns {string | null} runtime code
  230. */
  231. generate() {
  232. const fn = RuntimeGlobals.ensureChunkHandlers;
  233. const withHmr = this._runtimeRequirements.has(
  234. RuntimeGlobals.hmrDownloadUpdateHandlers
  235. );
  236. const compilation = /** @type {Compilation} */ (this.compilation);
  237. const { moduleGraph, outputOptions } = compilation;
  238. const chunkGraph = /** @type {ChunkGraph} */ (this.chunkGraph);
  239. const chunk = /** @type {Chunk} */ (this.chunk);
  240. const wasmModules = getAllWasmModules(moduleGraph, chunkGraph, chunk);
  241. const { mangleImports } = this;
  242. /** @type {Declarations} */
  243. const declarations = [];
  244. const importObjects = wasmModules.map((module) =>
  245. generateImportObject(
  246. chunkGraph,
  247. module,
  248. mangleImports,
  249. declarations,
  250. chunk.runtime
  251. )
  252. );
  253. const chunkModuleIdMap = chunkGraph.getChunkModuleIdMap(chunk, (m) =>
  254. m.type.startsWith("webassembly")
  255. );
  256. /**
  257. * @param {string} content content
  258. * @returns {string} created import object
  259. */
  260. const createImportObject = (content) =>
  261. mangleImports
  262. ? `{ ${JSON.stringify(WebAssemblyUtils.MANGLED_MODULE)}: ${content} }`
  263. : content;
  264. const wasmModuleSrcPath = compilation.getPath(
  265. JSON.stringify(outputOptions.webassemblyModuleFilename),
  266. {
  267. hash: `" + ${RuntimeGlobals.getFullHash}() + "`,
  268. hashWithLength: (length) =>
  269. `" + ${RuntimeGlobals.getFullHash}}().slice(0, ${length}) + "`,
  270. module: {
  271. id: '" + wasmModuleId + "',
  272. hash: `" + ${JSON.stringify(
  273. chunkGraph.getChunkModuleRenderedHashMap(chunk, (m) =>
  274. m.type.startsWith("webassembly")
  275. )
  276. )}[chunkId][wasmModuleId] + "`,
  277. hashWithLength(length) {
  278. return `" + ${JSON.stringify(
  279. chunkGraph.getChunkModuleRenderedHashMap(
  280. chunk,
  281. (m) => m.type.startsWith("webassembly"),
  282. length
  283. )
  284. )}[chunkId][wasmModuleId] + "`;
  285. }
  286. },
  287. runtime: chunk.runtime
  288. }
  289. );
  290. const stateExpression = withHmr
  291. ? `${RuntimeGlobals.hmrRuntimeStatePrefix}_wasm`
  292. : undefined;
  293. return Template.asString([
  294. "// object to store loaded and loading wasm modules",
  295. `var installedWasmModules = ${
  296. stateExpression ? `${stateExpression} = ${stateExpression} || ` : ""
  297. }{};`,
  298. "",
  299. // This function is used to delay reading the installed wasm module promises
  300. // by a microtask. Sorting them doesn't help because there are edge cases where
  301. // sorting is not possible (modules splitted into different chunks).
  302. // So we not even trying and solve this by a microtask delay.
  303. "function promiseResolve() { return Promise.resolve(); }",
  304. "",
  305. Template.asString(declarations),
  306. "var wasmImportObjects = {",
  307. Template.indent(importObjects),
  308. "};",
  309. "",
  310. `var wasmModuleMap = ${JSON.stringify(
  311. chunkModuleIdMap,
  312. undefined,
  313. "\t"
  314. )};`,
  315. "",
  316. "// object with all WebAssembly.instance exports",
  317. `${RuntimeGlobals.wasmInstances} = {};`,
  318. "",
  319. "// Fetch + compile chunk loading for webassembly",
  320. `${fn}.wasm = function(chunkId, promises) {`,
  321. Template.indent([
  322. "",
  323. "var wasmModules = wasmModuleMap[chunkId] || [];",
  324. "",
  325. "wasmModules.forEach(function(wasmModuleId, idx) {",
  326. Template.indent([
  327. "var installedWasmModuleData = installedWasmModules[wasmModuleId];",
  328. "",
  329. '// a Promise means "currently loading" or "already loaded".',
  330. "if(installedWasmModuleData)",
  331. Template.indent(["promises.push(installedWasmModuleData);"]),
  332. "else {",
  333. Template.indent([
  334. "var importObject = wasmImportObjects[wasmModuleId]();",
  335. `var req = ${this.generateLoadBinaryCode(wasmModuleSrcPath)};`,
  336. "var promise;",
  337. this.supportsStreaming
  338. ? Template.asString([
  339. "if(importObject && typeof importObject.then === 'function' && typeof WebAssembly.compileStreaming === 'function') {",
  340. Template.indent([
  341. "promise = Promise.all([WebAssembly.compileStreaming(req), importObject]).then(function(items) {",
  342. Template.indent([
  343. `return WebAssembly.instantiate(items[0], ${createImportObject(
  344. "items[1]"
  345. )});`
  346. ]),
  347. "});"
  348. ]),
  349. "} else if(typeof WebAssembly.instantiateStreaming === 'function') {",
  350. Template.indent([
  351. `promise = WebAssembly.instantiateStreaming(req, ${createImportObject(
  352. "importObject"
  353. )});`
  354. ])
  355. ])
  356. : Template.asString([
  357. "if(importObject && typeof importObject.then === 'function') {",
  358. Template.indent([
  359. "var bytesPromise = req.then(function(x) { return x.arrayBuffer(); });",
  360. "promise = Promise.all([",
  361. Template.indent([
  362. "bytesPromise.then(function(bytes) { return WebAssembly.compile(bytes); }),",
  363. "importObject"
  364. ]),
  365. "]).then(function(items) {",
  366. Template.indent([
  367. `return WebAssembly.instantiate(items[0], ${createImportObject(
  368. "items[1]"
  369. )});`
  370. ]),
  371. "});"
  372. ])
  373. ]),
  374. "} else {",
  375. Template.indent([
  376. "var bytesPromise = req.then(function(x) { return x.arrayBuffer(); });",
  377. "promise = bytesPromise.then(function(bytes) {",
  378. Template.indent([
  379. `return WebAssembly.instantiate(bytes, ${createImportObject(
  380. "importObject"
  381. )});`
  382. ]),
  383. "});"
  384. ]),
  385. "}",
  386. "promises.push(installedWasmModules[wasmModuleId] = promise.then(function(res) {",
  387. Template.indent([
  388. `return ${RuntimeGlobals.wasmInstances}[wasmModuleId] = (res.instance || res).exports;`
  389. ]),
  390. "}));"
  391. ]),
  392. "}"
  393. ]),
  394. "});"
  395. ]),
  396. "};"
  397. ]);
  398. }
  399. }
  400. module.exports = WasmChunkLoadingRuntimeModule;