modulepreload-polyfill.js ➔ getFetchOpts   F
last analyzed

Complexity

Conditions 15

Size

Total Lines 14
Code Lines 12

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 15
eloc 12
c 0
b 0
f 0
dl 0
loc 14
rs 2.9998

How to fix   Complexity   

Complexity

Complex classes like modulepreload-polyfill.js ➔ getFetchOpts often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.

Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.

1
/**
2
 The following polyfill function is meant to run in the browser and adapted from
3
 https://github.com/guybedford/es-module-shims
4
 MIT License
5
 Copyright (C) 2018-2021 Guy Bedford
6
 Permission is hereby granted, free of charge, to any person obtaining a copy
7
 of this software and associated documentation files (the "Software"), to deal
8
 in the Software without restriction, including without limitation the rights
9
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10
 copies of the Software, and to permit persons to whom the Software is
11
 furnished to do so, subject to the following conditions:
12
 The above copyright notice and this permission notice shall be included in all
13
 copies or substantial portions of the Software.
14
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
20
 */
21
22
(function() {
0 ignored issues
show
Coding Style introduced by
Expected 1 space after FUNCTION keyword; 0 found
Loading history...
23
  const relList = document.createElement('link').relList;
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 4 spaces, found 2
Loading history...
24
  if (relList && relList.supports && relList.supports('modulepreload')) {
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 4 spaces, found 2
Loading history...
25
    return;
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 8 spaces, found 4
Loading history...
26
  }
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 4 spaces, found 2
Loading history...
27
28
  for (const link of document.querySelectorAll('link[rel="modulepreload"]')) {
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 4 spaces, found 2
Loading history...
29
    processPreload(link);
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 8 spaces, found 4
Loading history...
30
  }
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 4 spaces, found 2
Loading history...
31
32
  new MutationObserver(mutations => {
0 ignored issues
show
Coding Style introduced by
The opening parenthesis of a multi-line function call should be the last content on the line.
Loading history...
Bug introduced by
The variable MutationObserver seems to be never declared. If this is a global, consider adding a /** global: MutationObserver */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
Coding Style introduced by
Line indented incorrectly; expected at least 4 spaces, found 2
Loading history...
Coding Style introduced by
Opening statement of multi-line function call not indented correctly; expected 0 spaces but found 2
Loading history...
33
    for (const mutation of mutations) {
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 8 spaces, found 4
Loading history...
Coding Style introduced by
This line of the multi-line function call does not seem to be indented correctly. Expected 6 spaces, but found 4.
Loading history...
34
      if (mutation.type !== 'childList') continue;
0 ignored issues
show
Coding Style introduced by
Inline control structures are discouraged
Loading history...
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
Coding Style introduced by
Line indented incorrectly; expected at least 12 spaces, found 6
Loading history...
35
      for (const node of mutation.addedNodes) {
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 12 spaces, found 6
Loading history...
36
        if (node.tagName === 'LINK' && node.rel === 'modulepreload')
0 ignored issues
show
Coding Style introduced by
Inline control structures are discouraged
Loading history...
Coding Style introduced by
Line indented incorrectly; expected at least 16 spaces, found 8
Loading history...
37
          processPreload(node);
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 16 spaces, found 10
Loading history...
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
38
        else if (node.querySelectorAll) {
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 16 spaces, found 8
Loading history...
39
          for (const link of node.querySelectorAll('link[rel=modulepreload]')) {
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 20 spaces, found 10
Loading history...
40
            processPreload(link);
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 24 spaces, found 12
Loading history...
41
          }
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 20 spaces, found 10
Loading history...
42
        }
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 16 spaces, found 8
Loading history...
43
      }
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 12 spaces, found 6
Loading history...
44
    }
0 ignored issues
show
Coding Style introduced by
This line of the multi-line function call does not seem to be indented correctly. Expected 6 spaces, but found 4.
Loading history...
Coding Style introduced by
Line indented incorrectly; expected 8 spaces, found 4
Loading history...
45
  }).observe(document, { childList: true, subtree: true });
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 4 spaces, found 2
Loading history...
Coding Style introduced by
For multi-line function calls, the closing parenthesis should be on a new line.

If a function call spawns multiple lines, the coding standard suggests to move the closing parenthesis to a new line:

someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
Loading history...
46
47
  function getFetchOpts (script) {
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 4 spaces, found 2
Loading history...
Coding Style introduced by
Expected 0 spaces before opening parenthesis; 1 found
Loading history...
Coding Style introduced by
Opening brace should be on a new line
Loading history...
48
    const fetchOpts = {};
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 8 spaces, found 4
Loading history...
49
    if (script.integrity)
0 ignored issues
show
Coding Style introduced by
Inline control structures are discouraged
Loading history...
Coding Style introduced by
Line indented incorrectly; expected at least 8 spaces, found 4
Loading history...
50
      fetchOpts.integrity = script.integrity;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
Coding Style introduced by
Line indented incorrectly; expected at least 8 spaces, found 6
Loading history...
51
    if (script.referrerpolicy)
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 8 spaces, found 4
Loading history...
Coding Style introduced by
Inline control structures are discouraged
Loading history...
52
      fetchOpts.referrerPolicy = script.referrerpolicy;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
Coding Style introduced by
Line indented incorrectly; expected at least 8 spaces, found 6
Loading history...
53
    if (script.crossorigin === 'use-credentials')
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 8 spaces, found 4
Loading history...
Coding Style introduced by
Inline control structures are discouraged
Loading history...
54
      fetchOpts.credentials = 'include';
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 8 spaces, found 6
Loading history...
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
55
    else if (script.crossorigin === 'anonymous')
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 8 spaces, found 4
Loading history...
Coding Style introduced by
Inline control structures are discouraged
Loading history...
56
      fetchOpts.credentials = 'omit';
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
Coding Style introduced by
Line indented incorrectly; expected at least 8 spaces, found 6
Loading history...
57
    else
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 8 spaces, found 4
Loading history...
Coding Style introduced by
Inline control structures are discouraged
Loading history...
58
      fetchOpts.credentials = 'same-origin';
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 8 spaces, found 6
Loading history...
59
    return fetchOpts;
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 8 spaces, found 4
Loading history...
60
  }
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 4 spaces, found 2
Loading history...
61
62
  function processPreload(script) {
0 ignored issues
show
Coding Style introduced by
Opening brace should be on a new line
Loading history...
Coding Style introduced by
Line indented incorrectly; expected 4 spaces, found 2
Loading history...
63
    if (script.ep) {
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 8 spaces, found 4
Loading history...
64
      // ep marker = processed
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 12 spaces, found 6
Loading history...
65
      return;
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 12 spaces, found 6
Loading history...
66
    }
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 8 spaces, found 4
Loading history...
67
    script.ep = true;
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 8 spaces, found 4
Loading history...
68
    // prepopulate the load record
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 8 spaces, found 4
Loading history...
69
    const fetchOpts = getFetchOpts(script);
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 8 spaces, found 4
Loading history...
70
    fetch(script.href, fetchOpts);
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected at least 8 spaces, found 4
Loading history...
71
  }
0 ignored issues
show
Coding Style introduced by
Line indented incorrectly; expected 4 spaces, found 2
Loading history...
72
}());
73