Skip to content

Commit 3df909d

Browse files
evilebottnawievilebottnawi
authored
feat: support script:src attributes
1 parent 1a20a19 commit 3df909d

File tree

10 files changed

+742
-457
lines changed

10 files changed

+742
-457
lines changed

‎README.md

Lines changed: 72 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -53,18 +53,18 @@ You may need to specify loaders for images in your configuration (recommended `f
5353

5454
## Options
5555

56-
| Name | Type | Default | Description |
57-
| :-------------------------------: | :-----------------: | :-------------------------------------------------------------------------------------------------------------------: | :--------------------------------------- |
58-
| **[`attributes`](#attributes)** | `{Boolean\/Array}` | `[':srcset', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src', 'object:data']` | Enables/Disables attributes handling |
59-
| **[`root`](#root)** | `{String}` | `undefiend` | Allow to handle root-relative attributes |
60-
| **[`interpolate`](#interpolate)** | `{Boolean}` | `false` | Allow to use expressions in HTML syntax |
61-
| **[`minimize`](#minimize)** | `{Boolean\|Object}` | `true` in production mode, otherwise `false` | Tell `html-loader` to minimize HTML |
62-
| **[`esModule`](#esmodule)** | `{Boolean}` | `false` | Use ES modules syntax |
56+
| Name | Type | Default | Description |
57+
| :-------------------------------: | :-----------------: | :---------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------- |
58+
| **[`attributes`](#attributes)** | `{Boolean\/Array}` | `[':srcset', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src', 'object:data', 'script:src']` | Enables/Disables attributes handling |
59+
| **[`root`](#root)** | `{String}` | `undefiend` | Allow to handle root-relative attributes |
60+
| **[`interpolate`](#interpolate)** | `{Boolean}` | `false` | Allow to use expressions in HTML syntax |
61+
| **[`minimize`](#minimize)** | `{Boolean\|Object}` | `true` in production mode, otherwise `false` | Tell `html-loader` to minimize HTML |
62+
| **[`esModule`](#esmodule)** | `{Boolean}` | `false` | Use ES modules syntax |
6363

6464
### `attributes`
6565

6666
Type: `Boolean|Array`
67-
Default: `[':srcset', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src', 'input:src', 'object:data']`
67+
Default: `[':srcset', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src', 'input:src', 'object:data', 'script:src']`
6868

6969
#### `Boolean`
7070

@@ -331,6 +331,70 @@ require('html-loader?-attributes!./file.html');
331331
data-src=data:image/png;base64,...>'
332332
```
333333

334+
### Process `script` and `link` tags
335+
336+
**script.file.js**
337+
338+
```js
339+
console.log(document);
340+
```
341+
342+
**style.file.css**
343+
344+
```css
345+
a {
346+
color: red;
347+
}
348+
```
349+
350+
```html
351+
<!DOCTYPE html>
352+
<html>
353+
<head>
354+
<meta charset="UTF-8" />
355+
<title>Title of the document</title>
356+
<link rel="stylesheet" type="text/css" href="./style.file.css" />
357+
</head>
358+
<body>
359+
Content of the document......
360+
<script src="./script.file.js"></script>
361+
</body>
362+
</html>
363+
```
364+
365+
**webpack.config.js**
366+
367+
```js
368+
module.exports = {
369+
module: {
370+
rules: [
371+
{
372+
test: /\.html$/i,
373+
use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'],
374+
},
375+
{
376+
test: /\.js$/i,
377+
exclude: /\.file.js$/i,
378+
loader: 'babel-loader',
379+
},
380+
{
381+
test: /\.file.js$/i,
382+
loader: 'file-loader',
383+
},
384+
{
385+
test: /\.css$/i,
386+
exclude: /\.file.css$/i,
387+
loader: 'css-loader',
388+
},
389+
{
390+
test: /\.file.css$/i,
391+
loader: 'file-loader',
392+
},
393+
],
394+
},
395+
};
396+
```
397+
334398
### 'Root-relative' URLs
335399

336400
With the same configuration as above:

‎src/plugins/attribute-plugin.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -440,6 +440,7 @@ export default (options) =>
440440
'source:src',
441441
'input:src',
442442
'object:data',
443+
'script:src',
443444
]
444445
: options.attributes;
445446

‎test/__snapshots__/attributes-option.test.js.snap

Lines changed: 259 additions & 164 deletions
Large diffs are not rendered by default.

‎test/__snapshots__/esModule-option.test.js.snap

Lines changed: 102 additions & 72 deletions
Large diffs are not rendered by default.

‎test/__snapshots__/loader.test.js.snap

Lines changed: 34 additions & 24 deletions
Large diffs are not rendered by default.

‎test/__snapshots__/minimize-option.test.js.snap

Lines changed: 171 additions & 138 deletions
Large diffs are not rendered by default.

‎test/__snapshots__/root-option.test.js.snap

Lines changed: 68 additions & 48 deletions
Large diffs are not rendered by default.

‎test/fixtures/script.file.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function foo(arg) {
2+
return arg;
3+
}
4+
5+
foo(1);

‎test/fixtures/simple.html

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ <h2>An Ordered HTML List</h2>
4343
<img SRC="image.png">
4444
<IMG SRC="image.png">
4545

46-
<script src="script.js"></script>
46+
<script src="./script.file.js"></script>
4747

4848
<custom-element custom-src="image.png" />
4949
<custom-img custom-src="image.png"/></custom-element>
@@ -104,7 +104,7 @@ <h2>An Ordered HTML List</h2>
104104
<input type="image" src="image.png" alt="Submit">
105105
</form>
106106

107-
<script src="script.js"></script>
107+
<script src="https://domain.org/script.js"></script>
108108

109109
<audio controls>
110110
<source src="example.ogg" type="audio/ogg">
@@ -134,7 +134,16 @@ <h2>An Ordered HTML List</h2>
134134

135135
<![CDATA[<img src="image.png">]]><img src="image.png">
136136

137-
<link type="stylesheet" href="style.css">
137+
<link rel="stylesheet" type="text/css" href="./style.css">
138+
<link rel="icon" href="./image.png" sizes="16x16">
139+
<link rel="apple-touch-icon" href="./image.png">
140+
<link rel="apple-touch-startup-image" href="./image.png">
141+
<link rel="shortlink" type="text/html" href="http://flic.kr/p/6XuLyD">
142+
<link type="text/css" href="./style.css">
143+
<link rel="pingback" href="http://bob.example.net/xmlrpcserver">
144+
<a rel="author" href="./simple.html">link text</a>
145+
146+
<a href="tel:1-408-555-5555">Call me</a>
138147

139148
<!----><img src="image.png">-->
140149
<!--><img src="image.png">-->

‎test/helpers/getCompiler.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,24 @@ export default (fixture, loaderOptions = {}, config = {}) => {
3232
loader: 'file-loader',
3333
options: { name: '[name].[ext]' },
3434
},
35+
{
36+
test: /\.file.css$/i,
37+
rules: [
38+
{
39+
loader: 'file-loader',
40+
options: { name: '[name].[ext]' },
41+
},
42+
],
43+
},
44+
{
45+
test: /\.file.js$/i,
46+
rules: [
47+
{
48+
loader: 'file-loader',
49+
options: { name: '[name].[ext]' },
50+
},
51+
],
52+
},
3553
],
3654
},
3755
resolve: {

0 commit comments

Comments
 (0)