Registry / serialization / metaviewport-parser

metaviewport-parser

JSON →
library0.3.0jsnpmunverified

The `metaviewport-parser` library, currently at version 0.3.0, provides a robust parser and interpreter for the `content` attribute within HTML `<meta name="viewport">` declarations. It implements the algorithms specified in the W3C CSS Device Adaption specification, enabling developers to programmatically analyze and understand how viewport configurations affect rendering. The library offers `parseMetaViewPortContent` to break down the attribute string into valid, unknown, and invalid properties, and `getRenderingDataFromViewport` to interpret these properties against supplied browser dimensions to calculate initial width, height, zoom, and user-scalability. As a pre-1.0 package, its API should be considered experimental and may undergo changes. Its key differentiator is strict adherence to web standards for accurate viewport parsing, making it valuable for server-side rendering, testing tools, or dynamic content adaptation logic.

serializationweb-framework
npm install metaviewport-parser
github ↗package ↗
INSTALL
IMPORT
SIG · METAVIEWPORT-PARSE
M
metaviewport-parser
serializationjavascriptv0.3.0
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

metaviewport-parser (module)
✓ const metaparser = require('metaviewport-parser');
✗ import metaparser from 'metaviewport-parser';
This package is primarily designed for CommonJS environments. For ESM, direct `import` statements might lead to issues or require a transpiler/wrapper.
parseMetaViewPortContent
✓ const { parseMetaViewPortContent } = require('metaviewport-parser');
✗ import { parseMetaViewPortContent } from 'metaviewport-parser';
The functions are exported as properties of the main CommonJS module object. Direct named imports from ESM are not natively supported.
getRenderingDataFromViewport
✓ const { getRenderingDataFromViewport } = require('metaviewport-parser');
✗ import { getRenderingDataFromViewport } from 'metaviewport-parser';
Similar to `parseMetaViewPortContent`, this function is accessed as a property of the CommonJS module export.

Demonstrates parsing a meta viewport content string and interpreting its valid properties into rendering data based on provided device dimensions.

const metaparser = require('metaviewport-parser'); // Example 1: Basic width=device-width const contentAttr1 = "width=device-width"; const viewport1 = metaparser.parseMetaViewPortContent(contentAttr1); const renderingData1 = metaparser.getRenderingDataFromViewport(viewport1.validProperties, { deviceWidth: 320, deviceHeight: 480, maxZoom: 4, minZoom: 0.25 }); console.log('Rendering Data 1:', renderingData1); // Expected: { zoom: null, width: 320, height: 480, userZoom: "zoom" } // Example 2: Initial scale and user-scalable=no const contentAttr2 = "initial-scale=1,user-scalable=no"; const viewport2 = metaparser.parseMetaViewPortContent(contentAttr2); const renderingData2 = metaparser.getRenderingDataFromViewport(viewport2.validProperties, { deviceWidth: 320, deviceHeight: 480, maxZoom: 4, minZoom: 0.25 }); console.log('Rendering Data 2:', renderingData2); // Expected: { zoom: 1, width: 320, height: 480, userZoom: "fixed" } // Example 3: Invalid property value const contentAttr3 = "width=foo,initial-scale=1"; const viewport3 = metaparser.parseMetaViewPortContent(contentAttr3); console.log('Viewport with invalid prop:', viewport3); // Expected: { validProperties: {'initial-scale': 1}, unknownProperties: {}, invalidValues: {'width': 'foo'} }
Debug
Known issues
breakingAs a package in a 0.x.x version, the API is not considered stable. Minor version increments may introduce breaking changes without adherence to semantic versioning for major versions.
fix
Always review the changelog when updating minor versions. Consider pinning to exact patch versions if stability is critical.
affects: >=0.1.0
gotchaThe library is primarily developed for CommonJS environments as indicated by `require()` in examples. Using it directly with ESM `import` syntax in Node.js or browser modules might require a bundler/transpiler configuration.
fix
For ESM projects, consider using a CommonJS wrapper or a bundler like Webpack/Rollup that can handle CJS modules. Alternatively, use dynamic `import('metaviewport-parser')` if available in your runtime.
affects: >=0.1.0
gotchaThe `getRenderingDataFromViewport` function requires specific browser dimension parameters (`deviceWidth`, `deviceHeight`, `maxZoom`, `minZoom`). Incorrect or missing parameters will lead to inaccurate rendering data calculations.
fix
Ensure all required parameters are passed as the second argument to `getRenderingDataFromViewport` and accurately reflect the target browser's environment.
affects: >=0.1.0
Errors
Common errors & fixes
ReferenceError: require is not defined
Attempting to use `require()` in an ECMAScript Module (ESM) context without proper configuration or a bundler.
fix
If running in a Node.js ESM project, ensure your file uses `.cjs` extension for CommonJS, or use `import()` dynamic import with `const metaparser = await import('metaviewport-parser');`.
TypeError: metaparser.parseMetaViewPortContent is not a function
This usually indicates an incorrect import, where the `metaparser` variable does not correctly reference the exported object from the module.
fix
Ensure you are using `const metaparser = require('metaviewport-parser');` or a similar CommonJS-compatible import that correctly assigns the module's exports to `metaparser`.
Upgrade
Version history
0.3.0latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
12 hits · last 30 days
node
12
Resources
githubhttps://github.com/dontcallmedom/metaviewport-parser ↗
packagehttps://www.npmjs.com/package/metaviewport-parser ↗
metaviewport-parser — npm install metaviewport-parser · libregistry