WasmChunkLoadingRuntimeModule.js 12 KB

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