WasmChunkLoadingRuntimeModule.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  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
  129. .map((p) => `${JSON.stringify(p.name)}: ${p.value}`)
  130. .join(",\n")
  131. ]),
  132. "};"
  133. ];
  134. } else {
  135. /** @type {Map<string, Array<{ name: string, value: string }>>} */
  136. const propertiesByModule = new Map();
  137. for (const p of properties) {
  138. let list = propertiesByModule.get(p.module);
  139. if (list === undefined) {
  140. propertiesByModule.set(p.module, (list = []));
  141. }
  142. list.push(p);
  143. }
  144. importObject = [
  145. "return {",
  146. Template.indent([
  147. Array.from(propertiesByModule, ([module, list]) =>
  148. Template.asString([
  149. `${JSON.stringify(module)}: {`,
  150. Template.indent([
  151. list
  152. .map((p) => `${JSON.stringify(p.name)}: ${p.value}`)
  153. .join(",\n")
  154. ]),
  155. "}"
  156. ])
  157. ).join(",\n")
  158. ]),
  159. "};"
  160. ];
  161. }
  162. const moduleIdStringified = JSON.stringify(chunkGraph.getModuleId(module));
  163. if (waitForInstances.size === 1) {
  164. const moduleId = [...waitForInstances.values()][0];
  165. const promise = `installedWasmModules[${JSON.stringify(moduleId)}]`;
  166. const variable = [...waitForInstances.keys()][0];
  167. return Template.asString([
  168. `${moduleIdStringified}: function() {`,
  169. Template.indent([
  170. `return promiseResolve().then(function() { return ${promise}; }).then(function(${variable}) {`,
  171. Template.indent(importObject),
  172. "});"
  173. ]),
  174. "},"
  175. ]);
  176. } else if (waitForInstances.size > 0) {
  177. const promises = Array.from(
  178. waitForInstances.values(),
  179. (id) => `installedWasmModules[${JSON.stringify(id)}]`
  180. ).join(", ");
  181. const variables = Array.from(
  182. waitForInstances.keys(),
  183. (name, i) => `${name} = array[${i}]`
  184. ).join(", ");
  185. return Template.asString([
  186. `${moduleIdStringified}: function() {`,
  187. Template.indent([
  188. `return promiseResolve().then(function() { return Promise.all([${promises}]); }).then(function(array) {`,
  189. Template.indent([`var ${variables};`, ...importObject]),
  190. "});"
  191. ]),
  192. "},"
  193. ]);
  194. }
  195. return Template.asString([
  196. `${moduleIdStringified}: function() {`,
  197. Template.indent(importObject),
  198. "},"
  199. ]);
  200. };
  201. /**
  202. * @typedef {object} WasmChunkLoadingRuntimeModuleOptions
  203. * @property {(path: string) => string} generateLoadBinaryCode
  204. * @property {boolean=} supportsStreaming
  205. * @property {boolean=} mangleImports
  206. * @property {ReadOnlyRuntimeRequirements} runtimeRequirements
  207. */
  208. class WasmChunkLoadingRuntimeModule extends RuntimeModule {
  209. /**
  210. * @param {WasmChunkLoadingRuntimeModuleOptions} options options
  211. */
  212. constructor({
  213. generateLoadBinaryCode,
  214. supportsStreaming,
  215. mangleImports,
  216. runtimeRequirements
  217. }) {
  218. super("wasm chunk loading", RuntimeModule.STAGE_ATTACH);
  219. this.generateLoadBinaryCode = generateLoadBinaryCode;
  220. this.supportsStreaming = supportsStreaming;
  221. this.mangleImports = mangleImports;
  222. this._runtimeRequirements = runtimeRequirements;
  223. }
  224. /**
  225. * @returns {string | null} runtime code
  226. */
  227. generate() {
  228. const fn = RuntimeGlobals.ensureChunkHandlers;
  229. const withHmr = this._runtimeRequirements.has(
  230. RuntimeGlobals.hmrDownloadUpdateHandlers
  231. );
  232. const compilation = /** @type {Compilation} */ (this.compilation);
  233. const { moduleGraph, outputOptions } = compilation;
  234. const chunkGraph = /** @type {ChunkGraph} */ (this.chunkGraph);
  235. const chunk = /** @type {Chunk} */ (this.chunk);
  236. const wasmModules = getAllWasmModules(moduleGraph, chunkGraph, chunk);
  237. const { mangleImports } = this;
  238. /** @type {string[]} */
  239. const declarations = [];
  240. const importObjects = wasmModules.map((module) =>
  241. generateImportObject(
  242. chunkGraph,
  243. module,
  244. mangleImports,
  245. declarations,
  246. chunk.runtime
  247. )
  248. );
  249. const chunkModuleIdMap = chunkGraph.getChunkModuleIdMap(chunk, (m) =>
  250. m.type.startsWith("webassembly")
  251. );
  252. /**
  253. * @param {string} content content
  254. * @returns {string} created import object
  255. */
  256. const createImportObject = (content) =>
  257. mangleImports
  258. ? `{ ${JSON.stringify(WebAssemblyUtils.MANGLED_MODULE)}: ${content} }`
  259. : content;
  260. const wasmModuleSrcPath = compilation.getPath(
  261. JSON.stringify(outputOptions.webassemblyModuleFilename),
  262. {
  263. hash: `" + ${RuntimeGlobals.getFullHash}() + "`,
  264. hashWithLength: (length) =>
  265. `" + ${RuntimeGlobals.getFullHash}}().slice(0, ${length}) + "`,
  266. module: {
  267. id: '" + wasmModuleId + "',
  268. hash: `" + ${JSON.stringify(
  269. chunkGraph.getChunkModuleRenderedHashMap(chunk, (m) =>
  270. m.type.startsWith("webassembly")
  271. )
  272. )}[chunkId][wasmModuleId] + "`,
  273. hashWithLength(length) {
  274. return `" + ${JSON.stringify(
  275. chunkGraph.getChunkModuleRenderedHashMap(
  276. chunk,
  277. (m) => m.type.startsWith("webassembly"),
  278. length
  279. )
  280. )}[chunkId][wasmModuleId] + "`;
  281. }
  282. },
  283. runtime: chunk.runtime
  284. }
  285. );
  286. const stateExpression = withHmr
  287. ? `${RuntimeGlobals.hmrRuntimeStatePrefix}_wasm`
  288. : undefined;
  289. return Template.asString([
  290. "// object to store loaded and loading wasm modules",
  291. `var installedWasmModules = ${
  292. stateExpression ? `${stateExpression} = ${stateExpression} || ` : ""
  293. }{};`,
  294. "",
  295. // This function is used to delay reading the installed wasm module promises
  296. // by a microtask. Sorting them doesn't help because there are edge cases where
  297. // sorting is not possible (modules splitted into different chunks).
  298. // So we not even trying and solve this by a microtask delay.
  299. "function promiseResolve() { return Promise.resolve(); }",
  300. "",
  301. Template.asString(declarations),
  302. "var wasmImportObjects = {",
  303. Template.indent(importObjects),
  304. "};",
  305. "",
  306. `var wasmModuleMap = ${JSON.stringify(
  307. chunkModuleIdMap,
  308. undefined,
  309. "\t"
  310. )};`,
  311. "",
  312. "// object with all WebAssembly.instance exports",
  313. `${RuntimeGlobals.wasmInstances} = {};`,
  314. "",
  315. "// Fetch + compile chunk loading for webassembly",
  316. `${fn}.wasm = function(chunkId, promises) {`,
  317. Template.indent([
  318. "",
  319. "var wasmModules = wasmModuleMap[chunkId] || [];",
  320. "",
  321. "wasmModules.forEach(function(wasmModuleId, idx) {",
  322. Template.indent([
  323. "var installedWasmModuleData = installedWasmModules[wasmModuleId];",
  324. "",
  325. '// a Promise means "currently loading" or "already loaded".',
  326. "if(installedWasmModuleData)",
  327. Template.indent(["promises.push(installedWasmModuleData);"]),
  328. "else {",
  329. Template.indent([
  330. "var importObject = wasmImportObjects[wasmModuleId]();",
  331. `var req = ${this.generateLoadBinaryCode(wasmModuleSrcPath)};`,
  332. "var promise;",
  333. this.supportsStreaming
  334. ? Template.asString([
  335. "if(importObject && typeof importObject.then === 'function' && typeof WebAssembly.compileStreaming === 'function') {",
  336. Template.indent([
  337. "promise = Promise.all([WebAssembly.compileStreaming(req), importObject]).then(function(items) {",
  338. Template.indent([
  339. `return WebAssembly.instantiate(items[0], ${createImportObject(
  340. "items[1]"
  341. )});`
  342. ]),
  343. "});"
  344. ]),
  345. "} else if(typeof WebAssembly.instantiateStreaming === 'function') {",
  346. Template.indent([
  347. `promise = WebAssembly.instantiateStreaming(req, ${createImportObject(
  348. "importObject"
  349. )});`
  350. ])
  351. ])
  352. : Template.asString([
  353. "if(importObject && typeof importObject.then === 'function') {",
  354. Template.indent([
  355. "var bytesPromise = req.then(function(x) { return x.arrayBuffer(); });",
  356. "promise = Promise.all([",
  357. Template.indent([
  358. "bytesPromise.then(function(bytes) { return WebAssembly.compile(bytes); }),",
  359. "importObject"
  360. ]),
  361. "]).then(function(items) {",
  362. Template.indent([
  363. `return WebAssembly.instantiate(items[0], ${createImportObject(
  364. "items[1]"
  365. )});`
  366. ]),
  367. "});"
  368. ])
  369. ]),
  370. "} else {",
  371. Template.indent([
  372. "var bytesPromise = req.then(function(x) { return x.arrayBuffer(); });",
  373. "promise = bytesPromise.then(function(bytes) {",
  374. Template.indent([
  375. `return WebAssembly.instantiate(bytes, ${createImportObject(
  376. "importObject"
  377. )});`
  378. ]),
  379. "});"
  380. ]),
  381. "}",
  382. "promises.push(installedWasmModules[wasmModuleId] = promise.then(function(res) {",
  383. Template.indent([
  384. `return ${RuntimeGlobals.wasmInstances}[wasmModuleId] = (res.instance || res).exports;`
  385. ]),
  386. "}));"
  387. ]),
  388. "}"
  389. ]),
  390. "});"
  391. ]),
  392. "};"
  393. ]);
  394. }
  395. }
  396. module.exports = WasmChunkLoadingRuntimeModule;