Skip to content
This repository has been archived by the owner on Mar 17, 2021. It is now read-only.

feat: limit option can be boolean #181

Merged
merged 1 commit into from Jun 5, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
23 changes: 20 additions & 3 deletions README.md
Expand Up @@ -91,16 +91,18 @@ For example, to set the quality option of a responsive-loader above use:

### `limit`

Type: `Number`
Type: `Number|Boolean`
Default: `undefined`

The limit can be specified via loader options and defaults to no limit.

#### `Number`

A `Number` specifying the maximum size of a file in bytes. If the file size is
**equal** or **greater** than the limit [`file-loader`](https://github.com/webpack-contrib/file-loader)
will be used (by default) and all query parameters are passed to it.
Using an alternative to `file-loader` is enabled via the `fallback` option.

The limit can be specified via loader options and defaults to no limit.

```js
// webpack.config.js
{
Expand All @@ -111,6 +113,21 @@ The limit can be specified via loader options and defaults to no limit.
}
```

#### `Boolean`

Enable or disable transform files into base64.

```js
// webpack.config.js
{
loader: 'url-loader',
options: {
// Disable transformation to base64
limit: false
}
}
```

### `mimetype`

Type: `String`
Expand Down
17 changes: 13 additions & 4 deletions src/index.js
Expand Up @@ -11,17 +11,26 @@ import mime from 'mime';
import normalizeFallback from './utils/normalizeFallback';
import schema from './options.json';

function shouldTransform(limit, size) {
if (typeof limit === 'boolean') {
return limit;
}

if (typeof limit === 'number') {
return size <= parseInt(limit, 10);
}

return true;
}

export default function loader(src) {
// Loader Options
const options = getOptions(this) || {};

validateOptions(schema, options, 'URL Loader');

// Set limit for resource inlining (file size)
const limit = options.limit ? parseInt(options.limit, 10) : options.limit;

// No limit or within the specified limit
if ((!limit && typeof limit !== 'number') || src.length <= limit) {
if (shouldTransform(options.limit, src.length)) {
const file = this.resourcePath;
// Get MIME type
const mimetype = options.mimetype || mime.getType(file);
Expand Down
2 changes: 1 addition & 1 deletion src/options.json
Expand Up @@ -2,7 +2,7 @@
"type": "object",
"properties": {
"limit": {
"type": ["number"]
"type": ["boolean", "number"]
},
"mimetype": {
"type": "string"
Expand Down
20 changes: 12 additions & 8 deletions test/__snapshots__/limit-option.test.js.snap

Large diffs are not rendered by default.

11 changes: 2 additions & 9 deletions test/__snapshots__/validate-options.test.js.snap
Expand Up @@ -3,25 +3,18 @@
exports[`validation 1`] = `
"URL Loader Invalid Options

options.limit should be number
options.limit should be boolean,number
"
`;

exports[`validation 2`] = `
"URL Loader Invalid Options

options.limit should be number
"
`;

exports[`validation 3`] = `
"URL Loader Invalid Options

options.mimetype should be string
"
`;

exports[`validation 4`] = `
exports[`validation 3`] = `
"URL Loader Invalid Options

options.fallback should be string
Expand Down
48 changes: 40 additions & 8 deletions test/limit-option.test.js
@@ -1,7 +1,7 @@
import webpack from './helpers/compiler';

describe('limit option', () => {
it('{undefined}', async () => {
it('not specify', async () => {
const config = {
loader: {
test: /\.png$/,
Expand All @@ -15,7 +15,7 @@ describe('limit option', () => {
expect(source).toMatchSnapshot();
});

it('{Number} (0)', async () => {
it('0 ({Number})', async () => {
// Image size is 6777
const config = {
loader: {
Expand All @@ -32,7 +32,7 @@ describe('limit option', () => {
expect(source).toMatchSnapshot();
});

it('{Number} (0.1)', async () => {
it('0.1 ({Number})', async () => {
// Image size is 6777
const config = {
loader: {
Expand All @@ -49,7 +49,7 @@ describe('limit option', () => {
expect(source).toMatchSnapshot();
});

it('{Number} (6776)', async () => {
it('6776 ({Number})', async () => {
// Image size is 6777
const config = {
loader: {
Expand All @@ -66,7 +66,7 @@ describe('limit option', () => {
expect(source).toMatchSnapshot();
});

it('{Number} (6777)', async () => {
it('6777 ({Number})', async () => {
// Image size is 6777
const config = {
loader: {
Expand All @@ -83,7 +83,7 @@ describe('limit option', () => {
expect(source).toMatchSnapshot();
});

it('{Number} (6778)', async () => {
it('6778 ({Number})', async () => {
// Image size is 6777
const config = {
loader: {
Expand All @@ -100,7 +100,7 @@ describe('limit option', () => {
expect(source).toMatchSnapshot();
});

it('{Number} (Number.MAX_SAFE_INTEGER)', async () => {
it('Number.MAX_SAFE_INTEGER ({Number})', async () => {
const config = {
loader: {
test: /\.png$/,
Expand All @@ -116,7 +116,7 @@ describe('limit option', () => {
expect(source).toMatchSnapshot();
});

it('{Number} (Number.MIN_SAFE_INTEGER)', async () => {
it('Number.MIN_SAFE_INTEGER ({Number})', async () => {
const config = {
loader: {
test: /\.png$/,
Expand All @@ -131,4 +131,36 @@ describe('limit option', () => {

expect(source).toMatchSnapshot();
});

it('true ({Boolean})', async () => {
const config = {
loader: {
test: /\.png$/,
options: {
limit: true,
},
},
};

const stats = await webpack('fixture.js', config);
const [{ source }] = stats.toJson().modules;

expect(source).toMatchSnapshot();
});

it('false ({Boolean})', async () => {
const config = {
loader: {
test: /\.png$/,
options: {
limit: false,
},
},
};

const stats = await webpack('fixture.js', config);
const [{ source }] = stats.toJson().modules;

expect(source).toMatchSnapshot();
});
});
2 changes: 1 addition & 1 deletion test/validate-options.test.js
Expand Up @@ -18,8 +18,8 @@ it('validation', async () => {
expect(() => validate({ unknown: 'unknown' })).not.toThrow();

expect(() => validate({ limit: 8192 })).not.toThrow();
expect(() => validate({ limit: true })).not.toThrow();
expect(() => validate({ limit: '8192' })).toThrowErrorMatchingSnapshot();
expect(() => validate({ limit: true })).toThrowErrorMatchingSnapshot();

expect(() => validate({ mimetype: 'image/png' })).not.toThrow();
expect(() => validate({ mimetype: true })).toThrowErrorMatchingSnapshot();
Expand Down