diff --git a/.editorconfig b/.editorconfig index 8f9d77e..1c6314a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -7,9 +7,6 @@ charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true -[{package.json,*.yml}] +[*.yml] indent_style = space indent_size = 2 - -[*.md] -trim_trailing_whitespace = false diff --git a/.gitattributes b/.gitattributes index 176a458..6313b56 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1 +1 @@ -* text=auto +* text=auto eol=lf diff --git a/.gitignore b/.gitignore index 3c3629e..239ecff 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules +yarn.lock diff --git a/.jshintrc b/.jshintrc deleted file mode 100644 index 9fe1be2..0000000 --- a/.jshintrc +++ /dev/null @@ -1,12 +0,0 @@ -{ - "node": true, - "esnext": true, - "bitwise": true, - "curly": true, - "immed": true, - "newcap": true, - "noarg": true, - "undef": true, - "unused": "vars", - "strict": true -} diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..43c97e7 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +package-lock=false diff --git a/.travis.yml b/.travis.yml index dedfc07..f98fed0 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,5 @@ -sudo: false language: node_js node_js: - - 'iojs' - - '0.12' - - '0.10' + - '12' + - '10' + - '8' diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 0000000..4297286 --- /dev/null +++ b/index.d.ts @@ -0,0 +1,50 @@ +declare namespace srcset { + interface SrcSetDefinition { + url: string; + width?: number; + height?: number; + density?: number; + } +} + +declare const srcset: { + /** + Parse the HTML `` [srcset](http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/) attribute. + + @param srcset - A srcset string. + + @example + ``` + import srcset = require('srcset'); + + console.log(srcset.parse('banner-HD.jpg 2x, banner-phone.jpg 100w')); + // [ + // { url: 'banner-HD.jpg', density: 2 }, + // { url: 'banner-phone.jpg', width: 100 } + // ] + ``` + */ + parse(srcset: string): srcset.SrcSetDefinition[]; + + /** + Stringify `SrcSetDefinition`s. + + @returns A srcset string. + + @example + ``` + import srcset = require('srcset'); + + const stringified = srcset.stringify([ + { url: 'banner-HD.jpg', density: 2 }, + { url: 'banner-phone.jpg', width: 100 }, + { url: 'banner-phone-HD.jpg', width: 100, density: 2 } + ]); + console.log(stringified); + // banner-HD.jpg 2x, banner-phone.jpg 100w, banner-phone-HD.jpg 100w 2x + ``` + */ + stringify(srcSetDefinitions: srcset.SrcSetDefinition[]): string; +}; + +export = srcset; diff --git a/index.js b/index.js index bd38a27..06ac782 100644 --- a/index.js +++ b/index.js @@ -1,63 +1,71 @@ 'use strict'; -var numberIsNan = require('number-is-nan'); -var arrayUniq = require('array-uniq'); -var reInt = /^\d+$/; +const arrayUniq = require('array-uniq'); -function deepUnique(arr) { - return arr.sort().filter(function (el, i) { - return JSON.stringify(el) !== JSON.stringify(arr[i - 1]); +const integerRegex = /^\d+$/; + +function deepUnique(array) { + return array.sort().filter((element, index) => { + return JSON.stringify(element) !== JSON.stringify(array[index - 1]); }); } -exports.parse = function (str) { - return deepUnique(str.split(',').map(function (el) { - var ret = {}; +exports.parse = string => { + return deepUnique( + string.split(',').map(part => { + const result = {}; - el.trim().split(/\s+/).forEach(function (el, i) { - if (i === 0) { - return ret.url = el; - } + part + .trim() + .split(/\s+/) + .forEach((element, index) => { + if (index === 0) { + result.url = element; + return; + } - var value = el.substring(0, el.length - 1); - var postfix = el[el.length - 1]; - var intVal = parseInt(value, 10); - var floatVal = parseFloat(value); - - if (postfix === 'w' && reInt.test(value)) { - ret.width = intVal; - } else if (postfix === 'h' && reInt.test(value)) { - ret.height = intVal; - } else if (postfix === 'x' && !numberIsNan(floatVal)) { - ret.density = floatVal; - } else { - throw new Error('Invalid srcset descriptor: ' + el + '.'); - } - }); + const value = element.substring(0, element.length - 1); + const postfix = element[element.length - 1]; + const integerValue = parseInt(value, 10); + const floatValue = parseFloat(value); - return ret; - })); -} + if (postfix === 'w' && integerRegex.test(value)) { + result.width = integerValue; + } else if (postfix === 'h' && integerRegex.test(value)) { + result.height = integerValue; + } else if (postfix === 'x' && !Number.isNaN(floatValue)) { + result.density = floatValue; + } else { + throw new Error('Invalid srcset descriptor: ' + element + '.'); + } + }); + + return result; + }) + ); +}; -exports.stringify = function (arr) { - return arrayUniq(arr.map(function (el) { - if (!el.url) { - throw new Error('URL is required.'); - } +exports.stringify = array => { + return arrayUniq( + array.map(element => { + if (!element.url) { + throw new Error('URL is required.'); + } - var ret = [el.url]; + const result = [element.url]; - if (el.width) { - ret.push(el.width + 'w'); - } + if (element.width) { + result.push(element.width + 'w'); + } - if (el.height) { - ret.push(el.height + 'h'); - } + if (element.height) { + result.push(element.height + 'h'); + } - if (el.density) { - ret.push(el.density + 'x'); - } + if (element.density) { + result.push(element.density + 'x'); + } - return ret.join(' '); - })).join(', '); -} + return result.join(' '); + }) + ).join(', '); +}; diff --git a/index.test-d.ts b/index.test-d.ts new file mode 100644 index 0000000..4f535d1 --- /dev/null +++ b/index.test-d.ts @@ -0,0 +1,13 @@ +import {expectType, expectError} from 'tsd'; +import srcset = require('.'); + +const parsed = srcset.parse('banner-HD.jpg 2x, banner-phone.jpg 100w'); +expectType(parsed); + +parsed.push({url: 'banner-phone-HD.jpg'}); +parsed.push({url: 'banner-phone-HD.jpg', width: 100}); +parsed.push({url: 'banner-phone-HD.jpg', height: 100}); +parsed.push({url: 'banner-phone-HD.jpg', density: 2}); +expectError(parsed.push({})); + +expectType(srcset.stringify(parsed)); diff --git a/license b/license index 654d0bf..e7af2f7 100644 --- a/license +++ b/license @@ -1,21 +1,9 @@ -The MIT License (MIT) +MIT License Copyright (c) Sindre Sorhus (sindresorhus.com) -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: -The above copyright notice and this permission notice shall be included in -all copies or substantial portions of the Software. +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/package.json b/package.json index 28858d0..10bd06e 100644 --- a/package.json +++ b/package.json @@ -1,41 +1,43 @@ { - "name": "srcset", - "version": "1.0.0", - "description": "Parse and stringify the HTML srcset attribute", - "keywords": [ - "html", - "attribute", - "image", - "img", - "src", - "parse", - "stringify", - "srcset", - "responsive", - "picture", - "element" - ], - "author": { - "name": "Sindre Sorhus", - "email": "sindresorhus@gmail.com", - "url": "sindresorhus.com" - }, - "repository": "sindresorhus/srcset", - "scripts": { - "test": "mocha" - }, - "dependencies": { - "array-uniq": "^1.0.2", - "number-is-nan": "^1.0.0" - }, - "devDependencies": { - "mocha": "*" - }, - "engines": { - "node": ">=0.10.0" - }, - "license": "MIT", - "files": [ - "index.js" - ] + "name": "srcset", + "version": "1.0.0", + "description": "Parse and stringify the HTML srcset attribute", + "license": "MIT", + "repository": "sindresorhus/srcset", + "author": { + "name": "Sindre Sorhus", + "email": "sindresorhus@gmail.com", + "url": "sindresorhus.com" + }, + "engines": { + "node": ">=8" + }, + "scripts": { + "test": "xo && ava && tsd" + }, + "files": [ + "index.js", + "index.d.ts" + ], + "keywords": [ + "html", + "attribute", + "image", + "img", + "src", + "parse", + "stringify", + "srcset", + "responsive", + "picture", + "element" + ], + "dependencies": { + "array-uniq": "^2.1.0" + }, + "devDependencies": { + "ava": "^1.4.1", + "tsd": "^0.7.2", + "xo": "^0.24.0" + } } diff --git a/readme.md b/readme.md index f5543fc..5b8fb65 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,6 @@ # srcset [![Build Status](https://travis-ci.org/sindresorhus/srcset.svg?branch=master)](https://travis-ci.org/sindresorhus/srcset) -> Parse and stringify the HTML `` [srcset](http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/) attribute. +> Parse and stringify the HTML `` [srcset](https://www.smashingmagazine.com/2013/08/webkit-implements-srcset-and-why-its-a-good-thing/) attribute. Useful if you're creating a polyfill, build-tool, etc. @@ -8,7 +8,7 @@ Useful if you're creating a polyfill, build-tool, etc. ## Install ``` -$ npm install --save srcset +$ npm install srcset ``` @@ -25,9 +25,9 @@ How an image with `srcset` might look like: Then have some fun with it: ```js -var srcset = require('srcset'); +const srcset = require('srcset'); -var parsed = srcset.parse('banner-HD.jpg 2x, banner-phone.jpg 100w'); +const parsed = srcset.parse('banner-HD.jpg 2x, banner-phone.jpg 100w'); console.log(parsed); /* [ @@ -38,7 +38,7 @@ console.log(parsed); parsed.push({ url: 'banner-phone-HD.jpg', width: 100, density: 2 }); -var stringified = srcset.stringify(parsed); +const stringified = srcset.stringify(parsed); console.log(stringified); /* banner-HD.jpg 2x, banner-phone.jpg 100w, banner-phone-HD.jpg 100w 2x @@ -59,4 +59,4 @@ Accepts an array of objects with the possible properties: `url` (required), `wid ## License -MIT © [Sindre Sorhus](http://sindresorhus.com) +MIT © [Sindre Sorhus](https://sindresorhus.com) diff --git a/test.js b/test.js index 8b2ca3a..7f82460 100644 --- a/test.js +++ b/test.js @@ -1,30 +1,27 @@ -'use strict'; -var assert = require('assert'); -var srcset = require('./'); +import test from 'ava'; +import srcset from '.'; -describe('.parse()', function () { - it('should parse srcset', function () { - var fixture = ' banner-HD.jpeg 2x, banner-HD.jpeg 2x, banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x '; - var expected = [ - { url: 'banner-HD.jpeg', density: 2 }, - { url: 'banner-phone.jpeg', width: 100 }, - { url: 'banner-phone-HD.jpeg', width: 100, density: 2 } - ]; - var actual = srcset.parse(fixture); - assert.deepEqual(actual, expected); - }); +test('.parse() should parse srcset', t => { + const fixture = + ' banner-HD.jpeg 2x, banner-HD.jpeg 2x, banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x '; + + t.deepEqual(srcset.parse(fixture), [ + {url: 'banner-HD.jpeg', density: 2}, + {url: 'banner-phone.jpeg', width: 100}, + {url: 'banner-phone-HD.jpeg', width: 100, density: 2} + ]); }); -describe('.stringify()', function () { - it('should stringify srcset', function () { - var fixture = [ - { url: 'banner-HD.jpeg', density: 2 }, - { url: 'banner-HD.jpeg', density: 2 }, - { url: 'banner-phone.jpeg', width: 100 }, - { url: 'banner-phone-HD.jpeg', width: 100, density: 2 } - ]; - var expected = 'banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x'; - var actual = srcset.stringify(fixture); - assert.deepEqual(actual, expected); - }); +test('.stringify() should stringify srcset', t => { + const fixture = [ + {url: 'banner-HD.jpeg', density: 2}, + {url: 'banner-HD.jpeg', density: 2}, + {url: 'banner-phone.jpeg', width: 100}, + {url: 'banner-phone-HD.jpeg', width: 100, density: 2} + ]; + + t.deepEqual( + srcset.stringify(fixture), + 'banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x' + ); });