You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

616 lines
19 KiB

/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
"use strict";
const { SyncWaterfallHook } = require("tapable");
const Template = require("../Template");
class JsonpMainTemplatePlugin {
apply(mainTemplate) {
const needChunkOnDemandLoadingCode = chunk => {
for (const chunkGroup of chunk.groupsIterable) {
if (chunkGroup.getNumberOfChildren() > 0) return true;
}
return false;
};
const needChunkLoadingCode = chunk => {
for (const chunkGroup of chunk.groupsIterable) {
if (chunkGroup.chunks.length > 1) return true;
if (chunkGroup.getNumberOfChildren() > 0) return true;
}
return false;
};
const needEntryDeferringCode = chunk => {
for (const chunkGroup of chunk.groupsIterable) {
if (chunkGroup.chunks.length > 1) return true;
}
return false;
};
const needPrefetchingCode = chunk => {
const allPrefetchChunks = chunk.getChildIdsByOrdersMap(true).prefetch;
return allPrefetchChunks && Object.keys(allPrefetchChunks).length;
};
// TODO webpack 5, no adding to .hooks, use WeakMap and static methods
["jsonpScript", "linkPreload", "linkPrefetch"].forEach(hook => {
if (!mainTemplate.hooks[hook]) {
mainTemplate.hooks[hook] = new SyncWaterfallHook([
"source",
"chunk",
"hash"
]);
}
});
const getScriptSrcPath = (hash, chunk, chunkIdExpression) => {
const chunkFilename = mainTemplate.outputOptions.chunkFilename;
const chunkMaps = chunk.getChunkMaps();
return mainTemplate.getAssetPath(JSON.stringify(chunkFilename), {
hash: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`,
hashWithLength: length =>
`" + ${mainTemplate.renderCurrentHashCode(hash, length)} + "`,
chunk: {
id: `" + ${chunkIdExpression} + "`,
hash: `" + ${JSON.stringify(
chunkMaps.hash
)}[${chunkIdExpression}] + "`,
hashWithLength(length) {
const shortChunkHashMap = Object.create(null);
for (const chunkId of Object.keys(chunkMaps.hash)) {
if (typeof chunkMaps.hash[chunkId] === "string") {
shortChunkHashMap[chunkId] = chunkMaps.hash[chunkId].substr(
0,
length
);
}
}
return `" + ${JSON.stringify(
shortChunkHashMap
)}[${chunkIdExpression}] + "`;
},
name: `" + (${JSON.stringify(
chunkMaps.name
)}[${chunkIdExpression}]||${chunkIdExpression}) + "`,
contentHash: {
javascript: `" + ${JSON.stringify(
chunkMaps.contentHash.javascript
)}[${chunkIdExpression}] + "`
},
contentHashWithLength: {
javascript: length => {
const shortContentHashMap = {};
const contentHash = chunkMaps.contentHash.javascript;
for (const chunkId of Object.keys(contentHash)) {
if (typeof contentHash[chunkId] === "string") {
shortContentHashMap[chunkId] = contentHash[chunkId].substr(
0,
length
);
}
}
return `" + ${JSON.stringify(
shortContentHashMap
)}[${chunkIdExpression}] + "`;
}
}
},
contentHashType: "javascript"
});
};
mainTemplate.hooks.localVars.tap(
"JsonpMainTemplatePlugin",
(source, chunk, hash) => {
const extraCode = [];
if (needChunkLoadingCode(chunk)) {
extraCode.push(
"",
"// object to store loaded and loading chunks",
"// undefined = chunk not loaded, null = chunk preloaded/prefetched",
"// Promise = chunk loading, 0 = chunk loaded",
"var installedChunks = {",
Template.indent(
chunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(",\n")
),
"};",
"",
needEntryDeferringCode(chunk)
? needPrefetchingCode(chunk)
? "var deferredModules = [], deferredPrefetch = [];"
: "var deferredModules = [];"
: ""
);
}
if (needChunkOnDemandLoadingCode(chunk)) {
extraCode.push(
"",
"// script path function",
"function jsonpScriptSrc(chunkId) {",
Template.indent([
`return ${mainTemplate.requireFn}.p + ${getScriptSrcPath(
hash,
chunk,
"chunkId"
)}`
]),
"}"
);
}
if (extraCode.length === 0) return source;
return Template.asString([source, ...extraCode]);
}
);
mainTemplate.hooks.jsonpScript.tap(
"JsonpMainTemplatePlugin",
(_, chunk, hash) => {
const crossOriginLoading =
mainTemplate.outputOptions.crossOriginLoading;
const chunkLoadTimeout = mainTemplate.outputOptions.chunkLoadTimeout;
const jsonpScriptType = mainTemplate.outputOptions.jsonpScriptType;
return Template.asString([
"var script = document.createElement('script');",
"var onScriptComplete;",
jsonpScriptType
? `script.type = ${JSON.stringify(jsonpScriptType)};`
: "",
"script.charset = 'utf-8';",
`script.timeout = ${chunkLoadTimeout / 1000};`,
`if (${mainTemplate.requireFn}.nc) {`,
Template.indent(
`script.setAttribute("nonce", ${mainTemplate.requireFn}.nc);`
),
"}",
"script.src = jsonpScriptSrc(chunkId);",
crossOriginLoading
? Template.asString([
"if (script.src.indexOf(window.location.origin + '/') !== 0) {",
Template.indent(
`script.crossOrigin = ${JSON.stringify(crossOriginLoading)};`
),
"}"
])
: "",
"// create error before stack unwound to get useful stacktrace later",
"var error = new Error();",
"onScriptComplete = function (event) {",
Template.indent([
"// avoid mem leaks in IE.",
"script.onerror = script.onload = null;",
"clearTimeout(timeout);",
"var chunk = installedChunks[chunkId];",
"if(chunk !== 0) {",
Template.indent([
"if(chunk) {",
Template.indent([
"var errorType = event && (event.type === 'load' ? 'missing' : event.type);",
"var realSrc = event && event.target && event.target.src;",
"error.message = 'Loading chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realSrc + ')';",
"error.name = 'ChunkLoadError';",
"error.type = errorType;",
"error.request = realSrc;",
"chunk[1](error);"
]),
"}",
"installedChunks[chunkId] = undefined;"
]),
"}"
]),
"};",
"var timeout = setTimeout(function(){",
Template.indent([
"onScriptComplete({ type: 'timeout', target: script });"
]),
`}, ${chunkLoadTimeout});`,
"script.onerror = script.onload = onScriptComplete;"
]);
}
);
mainTemplate.hooks.linkPreload.tap(
"JsonpMainTemplatePlugin",
(_, chunk, hash) => {
const crossOriginLoading =
mainTemplate.outputOptions.crossOriginLoading;
const jsonpScriptType = mainTemplate.outputOptions.jsonpScriptType;
return Template.asString([
"var link = document.createElement('link');",
jsonpScriptType
? `link.type = ${JSON.stringify(jsonpScriptType)};`
: "",
"link.charset = 'utf-8';",
`if (${mainTemplate.requireFn}.nc) {`,
Template.indent(
`link.setAttribute("nonce", ${mainTemplate.requireFn}.nc);`
),
"}",
'link.rel = "preload";',
'link.as = "script";',
"link.href = jsonpScriptSrc(chunkId);",
crossOriginLoading
? Template.asString([
"if (link.href.indexOf(window.location.origin + '/') !== 0) {",
Template.indent(
`link.crossOrigin = ${JSON.stringify(crossOriginLoading)};`
),
"}"
])
: ""
]);
}
);
mainTemplate.hooks.linkPrefetch.tap(
"JsonpMainTemplatePlugin",
(_, chunk, hash) => {
const crossOriginLoading =
mainTemplate.outputOptions.crossOriginLoading;
return Template.asString([
"var link = document.createElement('link');",
crossOriginLoading
? `link.crossOrigin = ${JSON.stringify(crossOriginLoading)};`
: "",
`if (${mainTemplate.requireFn}.nc) {`,
Template.indent(
`link.setAttribute("nonce", ${mainTemplate.requireFn}.nc);`
),
"}",
'link.rel = "prefetch";',
'link.as = "script";',
"link.href = jsonpScriptSrc(chunkId);"
]);
}
);
mainTemplate.hooks.requireEnsure.tap(
"JsonpMainTemplatePlugin load",
(source, chunk, hash) => {
return Template.asString([
source,
"",
"// JSONP chunk loading for javascript",
"",
"var installedChunkData = installedChunks[chunkId];",
'if(installedChunkData !== 0) { // 0 means "already installed".',
Template.indent([
"",
'// a Promise means "currently loading".',
"if(installedChunkData) {",
Template.indent(["promises.push(installedChunkData[2]);"]),
"} else {",
Template.indent([
"// setup Promise in chunk cache",
"var promise = new Promise(function(resolve, reject) {",
Template.indent([
"installedChunkData = installedChunks[chunkId] = [resolve, reject];"
]),
"});",
"promises.push(installedChunkData[2] = promise);",
"",
"// start chunk loading",
mainTemplate.hooks.jsonpScript.call("", chunk, hash),
"document.head.appendChild(script);"
]),
"}"
]),
"}"
]);
}
);
mainTemplate.hooks.requireEnsure.tap(
{
name: "JsonpMainTemplatePlugin preload",
stage: 10
},
(source, chunk, hash) => {
const chunkMap = chunk.getChildIdsByOrdersMap().preload;
if (!chunkMap || Object.keys(chunkMap).length === 0) return source;
return Template.asString([
source,
"",
"// chunk preloadng for javascript",
"",
`var chunkPreloadMap = ${JSON.stringify(chunkMap, null, "\t")};`,
"",
"var chunkPreloadData = chunkPreloadMap[chunkId];",
"if(chunkPreloadData) {",
Template.indent([
"chunkPreloadData.forEach(function(chunkId) {",
Template.indent([
"if(installedChunks[chunkId] === undefined) {",
Template.indent([
"installedChunks[chunkId] = null;",
mainTemplate.hooks.linkPreload.call("", chunk, hash),
"document.head.appendChild(link);"
]),
"}"
]),
"});"
]),
"}"
]);
}
);
mainTemplate.hooks.requireExtensions.tap(
"JsonpMainTemplatePlugin",
(source, chunk) => {
if (!needChunkOnDemandLoadingCode(chunk)) return source;
return Template.asString([
source,
"",
"// on error function for async loading",
`${mainTemplate.requireFn}.oe = function(err) { console.error(err); throw err; };`
]);
}
);
mainTemplate.hooks.bootstrap.tap(
"JsonpMainTemplatePlugin",
(source, chunk, hash) => {
if (needChunkLoadingCode(chunk)) {
const withDefer = needEntryDeferringCode(chunk);
const withPrefetch = needPrefetchingCode(chunk);
return Template.asString([
source,
"",
"// install a JSONP callback for chunk loading",
"function webpackJsonpCallback(data) {",
Template.indent([
"var chunkIds = data[0];",
"var moreModules = data[1];",
withDefer ? "var executeModules = data[2];" : "",
withPrefetch ? "var prefetchChunks = data[3] || [];" : "",
'// add "moreModules" to the modules object,',
'// then flag all "chunkIds" as loaded and fire callback',
"var moduleId, chunkId, i = 0, resolves = [];",
"for(;i < chunkIds.length; i++) {",
Template.indent([
"chunkId = chunkIds[i];",
"if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {",
Template.indent("resolves.push(installedChunks[chunkId][0]);"),
"}",
"installedChunks[chunkId] = 0;"
]),
"}",
"for(moduleId in moreModules) {",
Template.indent([
"if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {",
Template.indent(
mainTemplate.renderAddModule(
hash,
chunk,
"moduleId",
"moreModules[moduleId]"
)
),
"}"
]),
"}",
"if(parentJsonpFunction) parentJsonpFunction(data);",
withPrefetch
? withDefer
? "deferredPrefetch.push.apply(deferredPrefetch, prefetchChunks);"
: Template.asString([
"// chunk prefetching for javascript",
"prefetchChunks.forEach(function(chunkId) {",
Template.indent([
"if(installedChunks[chunkId] === undefined) {",
Template.indent([
"installedChunks[chunkId] = null;",
mainTemplate.hooks.linkPrefetch.call("", chunk, hash),
"document.head.appendChild(link);"
]),
"}"
]),
"});"
])
: "",
"while(resolves.length) {",
Template.indent("resolves.shift()();"),
"}",
withDefer
? Template.asString([
"",
"// add entry modules from loaded chunk to deferred list",
"deferredModules.push.apply(deferredModules, executeModules || []);",
"",
"// run deferred modules when all chunks ready",
"return checkDeferredModules();"
])
: ""
]),
"};",
withDefer
? Template.asString([
"function checkDeferredModules() {",
Template.indent([
"var result;",
"for(var i = 0; i < deferredModules.length; i++) {",
Template.indent([
"var deferredModule = deferredModules[i];",
"var fulfilled = true;",
"for(var j = 1; j < deferredModule.length; j++) {",
Template.indent([
"var depId = deferredModule[j];",
"if(installedChunks[depId] !== 0) fulfilled = false;"
]),
"}",
"if(fulfilled) {",
Template.indent([
"deferredModules.splice(i--, 1);",
"result = " +
mainTemplate.requireFn +
"(" +
mainTemplate.requireFn +
".s = deferredModule[0]);"
]),
"}"
]),
"}",
withPrefetch
? Template.asString([
"if(deferredModules.length === 0) {",
Template.indent([
"// chunk prefetching for javascript",
"deferredPrefetch.forEach(function(chunkId) {",
Template.indent([
"if(installedChunks[chunkId] === undefined) {",
Template.indent([
"installedChunks[chunkId] = null;",
mainTemplate.hooks.linkPrefetch.call(
"",
chunk,
hash
),
"document.head.appendChild(link);"
]),
"}"
]),
"});",
"deferredPrefetch.length = 0;"
]),
"}"
])
: "",
"return result;"
]),
"}"
])
: ""
]);
}
return source;
}
);
mainTemplate.hooks.beforeStartup.tap(
"JsonpMainTemplatePlugin",
(source, chunk, hash) => {
if (needChunkLoadingCode(chunk)) {
var jsonpFunction = mainTemplate.outputOptions.jsonpFunction;
var globalObject = mainTemplate.outputOptions.globalObject;
return Template.asString([
`var jsonpArray = ${globalObject}[${JSON.stringify(
jsonpFunction
)}] = ${globalObject}[${JSON.stringify(jsonpFunction)}] || [];`,
"var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);",
"jsonpArray.push = webpackJsonpCallback;",
"jsonpArray = jsonpArray.slice();",
"for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);",
"var parentJsonpFunction = oldJsonpFunction;",
"",
source
]);
}
return source;
}
);
mainTemplate.hooks.afterStartup.tap(
"JsonpMainTemplatePlugin",
(source, chunk, hash) => {
const prefetchChunks = chunk.getChildIdsByOrders().prefetch;
if (
needChunkLoadingCode(chunk) &&
prefetchChunks &&
prefetchChunks.length
) {
return Template.asString([
source,
`webpackJsonpCallback([[], {}, 0, ${JSON.stringify(
prefetchChunks
)}]);`
]);
}
return source;
}
);
mainTemplate.hooks.startup.tap(
"JsonpMainTemplatePlugin",
(source, chunk, hash) => {
if (needEntryDeferringCode(chunk)) {
if (chunk.hasEntryModule()) {
const entries = [chunk.entryModule].filter(Boolean).map(m =>
[m.id].concat(
Array.from(chunk.groupsIterable)[0]
.chunks.filter(c => c !== chunk)
.map(c => c.id)
)
);
return Template.asString([
"// add entry module to deferred list",
`deferredModules.push(${entries
.map(e => JSON.stringify(e))
.join(", ")});`,
"// run deferred modules when ready",
"return checkDeferredModules();"
]);
} else {
return Template.asString([
"// run deferred modules from other chunks",
"checkDeferredModules();"
]);
}
}
return source;
}
);
mainTemplate.hooks.hotBootstrap.tap(
"JsonpMainTemplatePlugin",
(source, chunk, hash) => {
const globalObject = mainTemplate.outputOptions.globalObject;
const hotUpdateChunkFilename =
mainTemplate.outputOptions.hotUpdateChunkFilename;
const hotUpdateMainFilename =
mainTemplate.outputOptions.hotUpdateMainFilename;
const crossOriginLoading =
mainTemplate.outputOptions.crossOriginLoading;
const hotUpdateFunction = mainTemplate.outputOptions.hotUpdateFunction;
const currentHotUpdateChunkFilename = mainTemplate.getAssetPath(
JSON.stringify(hotUpdateChunkFilename),
{
hash: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`,
hashWithLength: length =>
`" + ${mainTemplate.renderCurrentHashCode(hash, length)} + "`,
chunk: {
id: '" + chunkId + "'
}
}
);
const currentHotUpdateMainFilename = mainTemplate.getAssetPath(
JSON.stringify(hotUpdateMainFilename),
{
hash: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`,
hashWithLength: length =>
`" + ${mainTemplate.renderCurrentHashCode(hash, length)} + "`
}
);
const runtimeSource = Template.getFunctionContent(
require("./JsonpMainTemplate.runtime")
)
.replace(/\/\/\$semicolon/g, ";")
.replace(/\$require\$/g, mainTemplate.requireFn)
.replace(
/\$crossOriginLoading\$/g,
crossOriginLoading ? JSON.stringify(crossOriginLoading) : "null"
)
.replace(/\$hotMainFilename\$/g, currentHotUpdateMainFilename)
.replace(/\$hotChunkFilename\$/g, currentHotUpdateChunkFilename)
.replace(/\$hash\$/g, JSON.stringify(hash));
return `${source}
function hotDisposeChunk(chunkId) {
delete installedChunks[chunkId];
}
var parentHotUpdateCallback = ${globalObject}[${JSON.stringify(
hotUpdateFunction
)}];
${globalObject}[${JSON.stringify(hotUpdateFunction)}] = ${runtimeSource}`;
}
);
mainTemplate.hooks.hash.tap("JsonpMainTemplatePlugin", hash => {
hash.update("jsonp");
hash.update("6");
});
}
}
module.exports = JsonpMainTemplatePlugin;