{"id":11526,"library":"parse-srcset","title":"HTML5 Srcset Attribute Parser","description":"parse-srcset is a JavaScript parser for the HTML5 `srcset` attribute, designed to be spec-conformant with the WHATWG reference algorithm. It takes a `srcset` string as input and returns an array of objects, each representing a potential image source with properties like `url`, `width`, `height`, and `density`. The package is at version 1.0.2, with its last known update around 10 years ago, indicating it is no longer actively maintained. While it provides a foundational implementation for `srcset` parsing, developers seeking current specifications, ongoing support, or additional features like stringification should consider more recently updated alternatives. Its release cadence was sporadic, reflecting its early development and subsequent abandonment, distinguishing it from modern, regularly updated libraries in this domain. The library relies on an extensive test suite to ensure conformance to the W3C srcset checker, a strong point at the time of its development.","status":"abandoned","version":"1.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/albell/parse-srcset","tags":["javascript"],"install":[{"cmd":"npm install parse-srcset","lang":"bash","label":"npm"},{"cmd":"yarn add parse-srcset","lang":"bash","label":"yarn"},{"cmd":"pnpm add parse-srcset","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package (v1.0.2) is a CommonJS module. Use `require()` for Node.js environments. Attempting `import ... from` will likely result in a `TypeError` if not handled by a bundler.","wrong":"import parseSrcset from 'parse-srcset';","symbol":"parseSrcset","correct":"const parseSrcset = require('parse-srcset');"},{"note":"While this entry focuses on `parse-srcset` (albell's), a popular, actively maintained fork by Prettier exists under `@prettier/parse-srcset`. This fork uses modern ESM syntax and is recommended for new projects.","wrong":"const parseSrcset = require('parse-srcset');","symbol":"parseSrcset","correct":"import parseSrcset from '@prettier/parse-srcset';"},{"note":"Another actively maintained alternative, `srcset`, provides both parsing and stringifying functionality. Its primary parsing function is named `parse` and is typically imported as a named export.","wrong":"import parse from 'parse-srcset';","symbol":"parse","correct":"import { parse } from 'srcset';"}],"quickstart":{"code":"const parseSrcset = require('parse-srcset');\n\nconst srcsetString = 'elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x';\nconst parsed = parseSrcset(srcsetString);\n\nconsole.log('Original srcset:', srcsetString);\nconsole.log('Parsed output:');\nparsed.forEach(item => {\n  console.log(`- URL: ${item.url}, Descriptor: ${item.density || (item.width ? item.width + 'w' : '')}`);\n});\n\n// Example with width descriptors (though this old version might interpret differently)\nconst widthSrcsetString = 'image-160.jpg 160w, image-320.jpg 320w, image-640.jpg 640w';\nconst parsedWidth = parseSrcset(widthSrcsetString);\n\nconsole.log('\\nOriginal srcset (width descriptors):', widthSrcsetString);\nconsole.log('Parsed output (width descriptors):');\nparsedWidth.forEach(item => {\n  console.log(`- URL: ${item.url}, Descriptor: ${item.width ? item.width + 'w' : item.density}`);\n});","lang":"javascript","description":"This quickstart demonstrates how to parse a standard HTML `srcset` string using `require()` and then iterates through the resulting array of image source objects, logging their URLs and descriptors (density or width)."},"warnings":[{"fix":"For new projects or if encountering parsing issues with modern srcset attributes, consider using actively maintained alternatives like `@prettier/parse-srcset` or `srcset`.","message":"This package (albell/parse-srcset) is largely unmaintained, with its last release over a decade ago (v1.0.2). It may not support newer srcset syntaxes or edge cases introduced after its last update.","severity":"breaking","affected_versions":">=1.0.2"},{"fix":"In Node.js ES Module environments, use `const parseSrcset = require('parse-srcset');` or rely on bundlers like Webpack/Rollup to handle CJS-ESM interoperability. For pure ESM, prefer the `@prettier/parse-srcset` fork or the `srcset` package which offer native ESM support.","message":"The `parse-srcset` package is a CommonJS module. Directly using `import parseSrcset from 'parse-srcset'` in an ES Module context without proper transpilation or bundler configuration will likely result in runtime errors (e.g., `TypeError: parseSrcset is not a function` or issues with default exports).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Migrate to `srcset` (e.g., `npm install srcset`) or `@prettier/parse-srcset` (e.g., `npm install @prettier/parse-srcset`) for TypeScript support, active development, and potentially better performance/spec compliance.","message":"The original `parse-srcset` library lacks modern tooling and features like TypeScript declarations. While functional, its maintenance status and lack of updates mean it will not receive bug fixes or performance improvements.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Thoroughly test parsing results with various `srcset` inputs, especially those involving modern descriptors or edge cases. Consider using a more actively maintained library for guaranteed spec compliance.","message":"Older parsers might not fully align with the most recent `srcset` specifications or common browser interpretations for complex or malformed inputs, potentially leading to 'Failed parsing srcset attribute' errors or incorrect output for specific descriptors like `w` and `x` in combination.","severity":"gotcha","affected_versions":"<=1.0.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change the import statement to `const parseSrcset = require('parse-srcset');` in Node.js environments. If using a bundler, ensure it is configured to correctly handle CJS-ESM interoperability. For new projects in ESM, use `@prettier/parse-srcset` or `srcset`.","cause":"Attempting to use `import parseSrcset from 'parse-srcset';` when the package is a CommonJS module that exports the function directly (i.e., `module.exports = function(){...}`). ESM imports of CJS modules often wrap the default export under a `default` property, causing this error.","error":"TypeError: parseSrcset is not a function"},{"fix":"The `parse-srcset` package is CJS. Ensure your environment allows `require()` or use a bundler. For pure ESM projects, migrate to `@prettier/parse-srcset` or `srcset` which provide ESM compatibility.","cause":"Trying to `require()` an ES Module or importing an old CJS module into a strict ESM context where `require` is not available or explicitly disallowed.","error":"ERR_REQUIRE_ESM"},{"fix":"Verify the `srcset` string against the WHATWG HTML specification for `srcset`. If the syntax is valid according to current specs, the parser itself is outdated. Upgrade to a modern `srcset` parsing library like `@prettier/parse-srcset` or `srcset` which are actively maintained and more likely to be spec-compliant.","cause":"The input `srcset` string contains syntax or descriptors (e.g., unsupported combinations of `w` and `x` descriptors) that the older parser version (1.0.2) does not recognize or support due to potential updates in the HTML specification or browser implementations since its last release.","error":"Failed parsing 'srcset' attribute value since it has an unknown descriptor."}],"ecosystem":"npm"}