WasmChunkLoadingRuntimeModule.js 12 KB

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