Registry / grid-template-parser

grid-template-parser

library0.3.2jsnpmunverified

The `grid-template-parser` package provides utilities for converting CSS Grid `grid-template-areas` strings into structured JavaScript objects and vice-versa. It is currently at version 0.3.2, indicating it's in an early development or maintenance phase, with no explicit release cadence defined. The library offers distinct functions like `grid` for parsing a template string into a coordinate-based object representation and `template` for constructing a template string from such an object. Additionally, helper functions like `area` and `rect` simplify defining grid areas using x/y coordinates and converting between area definitions and rect objects. Its core differentiator is this bidirectional mapping functionality, specifically targeting `grid-template-areas` syntax for programmatic manipulation in JavaScript applications.

npm install grid-template-parser

github ↗package ↗

INSTALL

IMPORT

SIG · GRID-TEMPLATE-PARS

grid-template-parser

javascriptv0.3.2

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.

grid

✓ import { grid } from 'grid-template-parser';

✗ const grid = require('grid-template-parser');

Primary function for parsing template strings. Uses named export.

template

✓ import { template } from 'grid-template-parser';

✗ const { template } = require('grid-template-parser');

Primary function for building template strings from object representation. Uses named export.

area

✓ import { area } from 'grid-template-parser';

✗ const area = gridTemplateParser.area;

Helper function for intuitively defining grid areas with x, y, width, height. Uses named export.

rect

✓ import { rect } from 'grid-template-parser';

✗ import * as gtp from 'grid-template-parser'; const r = gtp.rect;

Helper function to convert an area definition to a rect object. Uses named export.

Demonstrates parsing a CSS Grid template string into a structured JavaScript object representation with dimensions and area definitions.

import { grid } from 'grid-template-parser'; const gridTemplateString = ` "a a a b b" "a a a b b" ". . c c c" "d d d d d" `; const areas = grid(gridTemplateString); console.log(areas); /* Expected Output: { width: 5, height: 4, areas: { a: { column: {start: 1, end: 4, span: 3}, row: {start: 1, end: 3, span: 2}, }, b: { column: {start: 4, end: 6, span: 2}, row: {start: 1, end: 3, span: 2}, }, c: { column: {start: 3, end: 6, span: 3}, row: {start: 3, end: 4, span: 1}, }, d: { column: {start: 1, end: 6, span: 5}, row: {start: 4, end: 5, span: 1}, }, }, }*/

Debug

Known issues

gotchaThe `grid` function output (column/row start/end) uses 1-based indexing, while the `area` helper function takes 0-based `x` and `y` coordinates. This can lead to off-by-one errors if not carefully managed when translating between representations.

fix

Be mindful of coordinate systems. `column.start` and `row.start` in the `grid` output are 1-based. When using the `area` helper, `x` and `y` are 0-based indices for the grid cells.

affects: >=0.1.0

breakingAs the package is pre-1.0.0 (currently 0.3.2), minor version updates (`0.x.0` to `0.y.0`) may introduce breaking changes to the API or data structures without prior deprecation warnings, following the spirit of semver where `0.y.z` can break `0.x.z`.

fix

Always pin the exact version (`0.3.2`) in your `package.json` to avoid unexpected breakage, and thoroughly review the changelog when updating minor versions (`npm install grid-template-parser@0.x.y`).

affects: >=0.1.0

gotchaInput validation for malformed grid template strings or invalid object representations might be minimal. Providing incorrect input could lead to unexpected parsing results or runtime errors rather than explicit validation messages.

fix

Ensure that grid template strings follow the CSS `grid-template-areas` specification and that object structures passed to `template` are correctly formed according to the library's expected schema. Implement client-side validation if user input is involved.

affects: >=0.1.0

Errors

Common errors & fixes

TypeError: grid is not a function

Attempting to import `grid` using a CommonJS `require` statement or not destructuring the named export correctly.

fix

Use ESM import syntax: `import { grid } from 'grid-template-parser';` Ensure your environment supports ESM or use a bundler like Webpack/Rollup.

ReferenceError: area is not defined

The `area` helper function was used without being explicitly imported from the package.

fix

Add `area` to your named imports: `import { template, area } from 'grid-template-parser';`

Error: Invalid grid template format

The input string provided to the `grid()` function does not conform to the expected `grid-template-areas` syntax, potentially due to unmatched quotes, inconsistent row lengths, or invalid characters.

fix

Review the input grid template string to ensure it is correctly formatted according to CSS `grid-template-areas` rules, specifically ensuring all rows have the same number of columns and area names are correctly quoted.

Upgrade

Version history

0.3.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

5 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/anthonydugois/grid-template-parser ↗

packagehttps://www.npmjs.com/package/grid-template-parser ↗