123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442 |
- /*
- MIT License http://www.opensource.org/licenses/mit-license.php
- Author Tobias Koppers @sokra
- */
- "use strict";
- const { SyncWaterfallHook } = require("tapable");
- const Compilation = require("../Compilation");
- const RuntimeGlobals = require("../RuntimeGlobals");
- const RuntimeModule = require("../RuntimeModule");
- const Template = require("../Template");
- const compileBooleanMatcher = require("../util/compileBooleanMatcher");
- const { chunkHasCss } = require("./CssModulesPlugin");
- /** @typedef {import("../Chunk")} Chunk */
- /**
- * @typedef {Object} JsonpCompilationPluginHooks
- * @property {SyncWaterfallHook<[string, Chunk]>} createStylesheet
- */
- /** @type {WeakMap<Compilation, JsonpCompilationPluginHooks>} */
- const compilationHooksMap = new WeakMap();
- class CssLoadingRuntimeModule extends RuntimeModule {
- /**
- * @param {Compilation} compilation the compilation
- * @returns {JsonpCompilationPluginHooks} hooks
- */
- static getCompilationHooks(compilation) {
- if (!(compilation instanceof Compilation)) {
- throw new TypeError(
- "The 'compilation' argument must be an instance of Compilation"
- );
- }
- let hooks = compilationHooksMap.get(compilation);
- if (hooks === undefined) {
- hooks = {
- createStylesheet: new SyncWaterfallHook(["source", "chunk"])
- };
- compilationHooksMap.set(compilation, hooks);
- }
- return hooks;
- }
- constructor(runtimeRequirements, runtimeOptions) {
- super("css loading", 10);
- this._runtimeRequirements = runtimeRequirements;
- this.runtimeOptions = runtimeOptions;
- }
- /**
- * @returns {string} runtime code
- */
- generate() {
- const { compilation, chunk, _runtimeRequirements } = this;
- const {
- chunkGraph,
- runtimeTemplate,
- outputOptions: {
- crossOriginLoading,
- uniqueName,
- chunkLoadTimeout: loadTimeout
- }
- } = compilation;
- const fn = RuntimeGlobals.ensureChunkHandlers;
- const conditionMap = chunkGraph.getChunkConditionMap(
- chunk,
- (chunk, chunkGraph) =>
- !!chunkGraph.getChunkModulesIterableBySourceType(chunk, "css")
- );
- const hasCssMatcher = compileBooleanMatcher(conditionMap);
- const withLoading =
- _runtimeRequirements.has(RuntimeGlobals.ensureChunkHandlers) &&
- hasCssMatcher !== false;
- const withHmr = _runtimeRequirements.has(
- RuntimeGlobals.hmrDownloadUpdateHandlers
- );
- const initialChunkIdsWithCss = new Set();
- const initialChunkIdsWithoutCss = new Set();
- for (const c of chunk.getAllInitialChunks()) {
- (chunkHasCss(c, chunkGraph)
- ? initialChunkIdsWithCss
- : initialChunkIdsWithoutCss
- ).add(c.id);
- }
- if (!withLoading && !withHmr && initialChunkIdsWithCss.size === 0) {
- return null;
- }
- const { createStylesheet } =
- CssLoadingRuntimeModule.getCompilationHooks(compilation);
- const stateExpression = withHmr
- ? `${RuntimeGlobals.hmrRuntimeStatePrefix}_css`
- : undefined;
- const code = Template.asString([
- "link = document.createElement('link');",
- uniqueName
- ? 'link.setAttribute("data-webpack", uniqueName + ":" + key);'
- : "",
- "link.setAttribute(loadingAttribute, 1);",
- 'link.rel = "stylesheet";',
- "link.href = url;",
- crossOriginLoading
- ? crossOriginLoading === "use-credentials"
- ? 'link.crossOrigin = "use-credentials";'
- : Template.asString([
- "if (link.src.indexOf(window.location.origin + '/') !== 0) {",
- Template.indent(
- `link.crossOrigin = ${JSON.stringify(crossOriginLoading)};`
- ),
- "}"
- ])
- : ""
- ]);
- const cc = str => str.charCodeAt(0);
- return Template.asString([
- "// object to store loaded and loading chunks",
- "// undefined = chunk not loaded, null = chunk preloaded/prefetched",
- "// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded",
- `var installedChunks = ${
- stateExpression ? `${stateExpression} = ${stateExpression} || ` : ""
- }{${Array.from(
- initialChunkIdsWithoutCss,
- id => `${JSON.stringify(id)}:0`
- ).join(",")}};`,
- "",
- uniqueName
- ? `var uniqueName = ${JSON.stringify(
- runtimeTemplate.outputOptions.uniqueName
- )};`
- : "// data-webpack is not used as build has no uniqueName",
- `var loadCssChunkData = ${runtimeTemplate.basicFunction(
- "target, link, chunkId",
- [
- `var data, token = "", token2, exports = {}, exportsWithId = [], exportsWithDashes = [], ${
- withHmr ? "moduleIds = [], " : ""
- }i = 0, cc = 1;`,
- "try { if(!link) link = loadStylesheet(chunkId); data = link.sheet.cssRules; data = data[data.length - 1].style; } catch(e) { data = getComputedStyle(document.head); }",
- `data = data.getPropertyValue(${
- uniqueName
- ? runtimeTemplate.concatenation(
- "--webpack-",
- { expr: "uniqueName" },
- "-",
- { expr: "chunkId" }
- )
- : runtimeTemplate.concatenation("--webpack-", { expr: "chunkId" })
- });`,
- "if(!data) return [];",
- "for(; cc; i++) {",
- Template.indent([
- "cc = data.charCodeAt(i);",
- `if(cc == ${cc("(")}) { token2 = token; token = ""; }`,
- `else if(cc == ${cc(
- ")"
- )}) { exports[token2.replace(/^_/, "")] = token.replace(/^_/, ""); token = ""; }`,
- `else if(cc == ${cc("/")} || cc == ${cc(
- "%"
- )}) { token = token.replace(/^_/, ""); exports[token] = token; exportsWithId.push(token); if(cc == ${cc(
- "%"
- )}) exportsWithDashes.push(token); token = ""; }`,
- `else if(!cc || cc == ${cc(
- ","
- )}) { token = token.replace(/^_/, ""); exportsWithId.forEach(${runtimeTemplate.expressionFunction(
- `exports[x] = ${
- uniqueName
- ? runtimeTemplate.concatenation(
- { expr: "uniqueName" },
- "-",
- { expr: "token" },
- "-",
- { expr: "exports[x]" }
- )
- : runtimeTemplate.concatenation({ expr: "token" }, "-", {
- expr: "exports[x]"
- })
- }`,
- "x"
- )}); exportsWithDashes.forEach(${runtimeTemplate.expressionFunction(
- `exports[x] = "--" + exports[x]`,
- "x"
- )}); ${
- RuntimeGlobals.makeNamespaceObject
- }(exports); target[token] = (${runtimeTemplate.basicFunction(
- "exports, module",
- `module.exports = exports;`
- )}).bind(null, exports); ${
- withHmr ? "moduleIds.push(token); " : ""
- }token = ""; exports = {}; exportsWithId.length = 0; }`,
- `else if(cc == ${cc("\\")}) { token += data[++i] }`,
- `else { token += data[i]; }`
- ]),
- "}",
- `${
- withHmr ? `if(target == ${RuntimeGlobals.moduleFactories}) ` : ""
- }installedChunks[chunkId] = 0;`,
- withHmr ? "return moduleIds;" : ""
- ]
- )}`,
- 'var loadingAttribute = "data-webpack-loading";',
- `var loadStylesheet = ${runtimeTemplate.basicFunction(
- "chunkId, url, done" + (withHmr ? ", hmr" : ""),
- [
- 'var link, needAttach, key = "chunk-" + chunkId;',
- withHmr ? "if(!hmr) {" : "",
- 'var links = document.getElementsByTagName("link");',
- "for(var i = 0; i < links.length; i++) {",
- Template.indent([
- "var l = links[i];",
- `if(l.rel == "stylesheet" && (${
- withHmr
- ? 'l.href.startsWith(url) || l.getAttribute("href").startsWith(url)'
- : 'l.href == url || l.getAttribute("href") == url'
- }${
- uniqueName
- ? ' || l.getAttribute("data-webpack") == uniqueName + ":" + key'
- : ""
- })) { link = l; break; }`
- ]),
- "}",
- "if(!done) return link;",
- withHmr ? "}" : "",
- "if(!link) {",
- Template.indent([
- "needAttach = true;",
- createStylesheet.call(code, this.chunk)
- ]),
- "}",
- `var onLinkComplete = ${runtimeTemplate.basicFunction(
- "prev, event",
- Template.asString([
- "link.onerror = link.onload = null;",
- "link.removeAttribute(loadingAttribute);",
- "clearTimeout(timeout);",
- 'if(event && event.type != "load") link.parentNode.removeChild(link)',
- "done(event);",
- "if(prev) return prev(event);"
- ])
- )};`,
- "if(link.getAttribute(loadingAttribute)) {",
- Template.indent([
- `var timeout = setTimeout(onLinkComplete.bind(null, undefined, { type: 'timeout', target: link }), ${loadTimeout});`,
- "link.onerror = onLinkComplete.bind(null, link.onerror);",
- "link.onload = onLinkComplete.bind(null, link.onload);"
- ]),
- "} else onLinkComplete(undefined, { type: 'load', target: link });", // We assume any existing stylesheet is render blocking
- withHmr ? "hmr ? document.head.insertBefore(link, hmr) :" : "",
- "needAttach && document.head.appendChild(link);",
- "return link;"
- ]
- )};`,
- initialChunkIdsWithCss.size > 2
- ? `${JSON.stringify(
- Array.from(initialChunkIdsWithCss)
- )}.forEach(loadCssChunkData.bind(null, ${
- RuntimeGlobals.moduleFactories
- }, 0));`
- : initialChunkIdsWithCss.size > 0
- ? `${Array.from(
- initialChunkIdsWithCss,
- id =>
- `loadCssChunkData(${
- RuntimeGlobals.moduleFactories
- }, 0, ${JSON.stringify(id)});`
- ).join("")}`
- : "// no initial css",
- "",
- withLoading
- ? Template.asString([
- `${fn}.css = ${runtimeTemplate.basicFunction("chunkId, promises", [
- "// css chunk loading",
- `var installedChunkData = ${RuntimeGlobals.hasOwnProperty}(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;`,
- '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([
- hasCssMatcher === true
- ? "if(true) { // all chunks have CSS"
- : `if(${hasCssMatcher("chunkId")}) {`,
- Template.indent([
- "// setup Promise in chunk cache",
- `var promise = new Promise(${runtimeTemplate.expressionFunction(
- `installedChunkData = installedChunks[chunkId] = [resolve, reject]`,
- "resolve, reject"
- )});`,
- "promises.push(installedChunkData[2] = promise);",
- "",
- "// start chunk loading",
- `var url = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
- "// create error before stack unwound to get useful stacktrace later",
- "var error = new Error();",
- `var loadingEnded = ${runtimeTemplate.basicFunction(
- "event",
- [
- `if(${RuntimeGlobals.hasOwnProperty}(installedChunks, chunkId)) {`,
- Template.indent([
- "installedChunkData = installedChunks[chunkId];",
- "if(installedChunkData !== 0) installedChunks[chunkId] = undefined;",
- "if(installedChunkData) {",
- Template.indent([
- 'if(event.type !== "load") {',
- Template.indent([
- "var errorType = event && event.type;",
- "var realSrc = event && event.target && event.target.src;",
- "error.message = 'Loading css chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realSrc + ')';",
- "error.name = 'ChunkLoadError';",
- "error.type = errorType;",
- "error.request = realSrc;",
- "installedChunkData[1](error);"
- ]),
- "} else {",
- Template.indent([
- `loadCssChunkData(${RuntimeGlobals.moduleFactories}, link, chunkId);`,
- "installedChunkData[0]();"
- ]),
- "}"
- ]),
- "}"
- ]),
- "}"
- ]
- )};`,
- "var link = loadStylesheet(chunkId, url, loadingEnded);"
- ]),
- "} else installedChunks[chunkId] = 0;"
- ]),
- "}"
- ]),
- "}"
- ])};`
- ])
- : "// no chunk loading",
- "",
- withHmr
- ? Template.asString([
- "var oldTags = [];",
- "var newTags = [];",
- `var applyHandler = ${runtimeTemplate.basicFunction("options", [
- `return { dispose: ${runtimeTemplate.basicFunction(
- "",
- []
- )}, apply: ${runtimeTemplate.basicFunction("", [
- "var moduleIds = [];",
- `newTags.forEach(${runtimeTemplate.expressionFunction(
- "info[1].sheet.disabled = false",
- "info"
- )});`,
- "while(oldTags.length) {",
- Template.indent([
- "var oldTag = oldTags.pop();",
- "if(oldTag.parentNode) oldTag.parentNode.removeChild(oldTag);"
- ]),
- "}",
- "while(newTags.length) {",
- Template.indent([
- `var info = newTags.pop();`,
- `var chunkModuleIds = loadCssChunkData(${RuntimeGlobals.moduleFactories}, info[1], info[0]);`,
- `chunkModuleIds.forEach(${runtimeTemplate.expressionFunction(
- "moduleIds.push(id)",
- "id"
- )});`
- ]),
- "}",
- "return moduleIds;"
- ])} };`
- ])}`,
- `var cssTextKey = ${runtimeTemplate.returningFunction(
- `Array.from(link.sheet.cssRules, ${runtimeTemplate.returningFunction(
- "r.cssText",
- "r"
- )}).join()`,
- "link"
- )}`,
- `${
- RuntimeGlobals.hmrDownloadUpdateHandlers
- }.css = ${runtimeTemplate.basicFunction(
- "chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList",
- [
- "applyHandlers.push(applyHandler);",
- `chunkIds.forEach(${runtimeTemplate.basicFunction("chunkId", [
- `var filename = ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
- `var url = ${RuntimeGlobals.publicPath} + filename;`,
- "var oldTag = loadStylesheet(chunkId, url);",
- "if(!oldTag) return;",
- `promises.push(new Promise(${runtimeTemplate.basicFunction(
- "resolve, reject",
- [
- `var link = loadStylesheet(chunkId, url + (url.indexOf("?") < 0 ? "?" : "&") + "hmr=" + Date.now(), ${runtimeTemplate.basicFunction(
- "event",
- [
- 'if(event.type !== "load") {',
- Template.indent([
- "var errorType = event && event.type;",
- "var realSrc = event && event.target && event.target.src;",
- "error.message = 'Loading css hot update chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realSrc + ')';",
- "error.name = 'ChunkLoadError';",
- "error.type = errorType;",
- "error.request = realSrc;",
- "reject(error);"
- ]),
- "} else {",
- Template.indent([
- "try { if(cssTextKey(oldTag) == cssTextKey(link)) { if(link.parentNode) link.parentNode.removeChild(link); return resolve(); } } catch(e) {}",
- "var factories = {};",
- "loadCssChunkData(factories, link, chunkId);",
- `Object.keys(factories).forEach(${runtimeTemplate.expressionFunction(
- "updatedModulesList.push(id)",
- "id"
- )})`,
- "link.sheet.disabled = true;",
- "oldTags.push(oldTag);",
- "newTags.push([chunkId, link]);",
- "resolve();"
- ]),
- "}"
- ]
- )}, oldTag);`
- ]
- )}));`
- ])});`
- ]
- )}`
- ])
- : "// no hmr"
- ]);
- }
- }
- module.exports = CssLoadingRuntimeModule;
|