grid-template-parser - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

lib/bounds.js

@@ -9,5 +9,6 @@ 'use strict';
 
-var find = function find(compare, direction, extremum, grid) {
-  return compare.apply(undefined, _toConsumableArray(Object.keys(grid).map(function (cell) {
-    return grid[cell][direction][extremum];
+var find = function find(fn, direction, extremum, _ref) {
+  var areas = _ref.areas;
+  return fn.apply(undefined, _toConsumableArray(Object.keys(areas).map(function (cell) {
+    return areas[cell][direction][extremum];
   })));
@@ -46,10 +47,2 @@ };
   return find(Math.max, 'row', 'end', grid);
-};
-
-var width = exports.width = function width(grid) {
-  return maxColumnEnd(grid) - 1;
-};
-
-var height = exports.height = function height(grid) {
-  return maxRowEnd(grid) - 1;
 };

lib/grid.js

@@ -49,3 +49,9 @@ 'use strict';
 var grid = exports.grid = function grid(template) {
-  return template.split(separator).reduce(reduceRow, []).reduce(reduceGrid, {});
+  var rows = template.split(separator).reduce(reduceRow, []);
+
+  var width = rows[0].length;
+  var height = rows.length;
+  var areas = rows.reduce(reduceGrid, {});
+
+  return { width: width, height: height, areas: areas };
 };

lib/index.js

@@ -89,14 +89,2 @@ 'use strict';
   }
-});
-Object.defineProperty(exports, 'width', {
-  enumerable: true,
-  get: function get() {
-    return _bounds.width;
-  }
-});
-Object.defineProperty(exports, 'height', {
-  enumerable: true,
-  get: function get() {
-    return _bounds.height;
-  }
 });

lib/template.js

@@ -6,18 +6,7 @@ 'use strict';
 });
-exports.template = undefined;
 
-var _bounds = require('./bounds');
 
-var matchingArea = function matchingArea(grid, r, c) {
-  return function (cell) {
-    return grid[cell].row.start <= r + 1 && grid[cell].row.end > r + 1 && grid[cell].column.start <= c + 1 && grid[cell].column.end > c + 1;
-  };
-};
-
-var defaultTemplate = function defaultTemplate(grid) {
-  var w = (0, _bounds.width)(grid);
-  var h = (0, _bounds.height)(grid);
-
-  return Array.from({ length: h }, function () {
-    return Array.from({ length: w }, function () {
+var defaultTemplate = function defaultTemplate(width, height) {
+  return Array.from({ length: height }, function () {
+    return Array.from({ length: width }, function () {
       return '.';
@@ -28,8 +17,17 @@ });
 
-var template = exports.template = function template(grid) {
-  return defaultTemplate(grid).reduce(function (acc, row, r, rows) {
+var matchingArea = function matchingArea(areas, r, c) {
+  return function (cell) {
+    return areas[cell].row.start <= r + 1 && areas[cell].row.end > r + 1 && areas[cell].column.start <= c + 1 && areas[cell].column.end > c + 1;
+  };
+};
+
+var template = exports.template = function template(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      areas = _ref.areas;
+  return defaultTemplate(width, height).reduce(function (acc, row, r, rows) {
     var separator = r < rows.length - 1 ? '\n' : '';
     var line = row.reduce(function (acc, cell, c, cells) {
       var separator = c < cells.length - 1 ? ' ' : '';
-      var area = Object.keys(grid).find(matchingArea(grid, r, c));
+      var area = Object.keys(areas).find(matchingArea(areas, r, c));
 
@@ -36,0 +34,0 @@ return '' + acc + (typeof area === 'string' ? area : cell) + separator;

package.json

 {
   "name": "grid-template-parser",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A simple CSS Grid template parser",
@@ -15,2 +15,4 @@ "main": "lib/index.js",
     "lint:flow": "flow check || exit 0",
+    "preversion": "npm test",
+    "postversion": "git push && git push --tags",
     "prepublish": "npm run lint && npm test && npm run build",
@@ -17,0 +19,0 @@ "postpublish": "npm run clean"

README.md

@@ -13,2 +13,4 @@ # grid-template-parser [![Build Status](https://travis-ci.org/anthonydugois/grid-template-parser.svg?branch=master)](https://travis-ci.org/anthonydugois/grid-template-parser)
 
+### Parse a grid template
+
 ```js
@@ -25,23 +27,508 @@ import {grid} from 'grid-template-parser';
 // → {
-//   a: {
-//     column: { start: 1, end: 4, span: 3 },
-//     row: { start: 1, end: 3, span: 2 },
+//   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},
+//     },
 //   },
-//   b: {
-//     column: { start: 4, end: 6, span: 2 },
-//     row: { start: 1, end: 3, span: 2 },
+// }
+```
+
+### Build a grid template
+
+```js
+import {template} from 'grid-template-parser';
+
+const areas = template({
+  width: 5,
+  height: 4,
+  areas: {
+    a: {
+      column: {start: 1, end: 4, span: 3},
+      row: {start: 1, end: 3, span: 2},
+    },
+    b: {
+      column: {start: 3, end: 6, span: 3},
+      row: {start: 3, end: 5, span: 2},
+    },
+  },
+});
+
+// → `"a a a . ."
+//    "a a a . ."
+//    ". . b b b"
+//    ". . b b b"`
+```
+
+An helper is provided to declare areas more intuitively. The following example is equivalent to the previous:
+
+```js
+import {template, area} from 'grid-template-parser';
+
+const a = area({
+  x: 0,
+  y: 0,
+  width: 3,
+  height: 2,
+});
+
+const b = area({
+  x: 2,
+  y: 2,
+  width: 3,
+  height: 2,
+});
+
+const areas = template({
+  width: 5,
+  height: 4,
+  areas: {a, b},
+});
+
+// → `"a a a . ."
+//    "a a a . ."
+//    ". . b b b"
+//    ". . b b b"`
+```
+
+## API
+
+### `grid(template)`
+
+Parses a grid template and returns an object representation.
+
+#### Arguments
+
+1. `template` *string* The grid template to parse.
+
+#### Returns
+
+*[Grid](#grid)* An object representation of the grid template.
+
+#### Example
+
+```js
+import {grid} from 'grid-template-parser';
+
+const areas = grid(`
+  "a a a b b"
+  "a a a b b"
+  ". . c c c"
+  "d d d d d"
+`);
+
+// → {
+//   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},
+//     },
 //   },
-//   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 },
-//   },
 // }
 ```
 
+---
+
+### `template(grid)`
+
+Builds a grid template from an object representation.
+
+#### Arguments
+
+1. `grid` *[Grid](#grid)* The grid to build.
+
+#### Returns
+
+*string* The equivalent grid template.
+
+#### Example
+
+```js
+import {template} from 'grid-template-parser';
+
+const areas = template({
+  width: 5,
+  height: 4,
+  areas: {
+    a: {
+      column: {start: 1, end: 4, span: 3},
+      row: {start: 1, end: 3, span: 2},
+    },
+    b: {
+      column: {start: 3, end: 6, span: 3},
+      row: {start: 3, end: 5, span: 2},
+    },
+  },
+});
+
+// → `"a a a . ."
+//    "a a a . ."
+//    ". . b b b"
+//    ". . b b b"`
+```
+
+---
+
+### `rect(area)`
+
+Converts an area into a rect.
+
+#### Arguments
+
+1. `area` *[Area](#area)* The area to convert.
+
+#### Returns
+
+*[Rect](#rect)* The equivalent rect.
+
+#### Example
+
+```js
+import {rect} from 'grid-template-parser';
+
+const r = rect({
+  column: {start: 1, end: 4, span: 3},
+  row: {start: 1, end: 3, span: 2},
+});
+
+// → {
+//     x: 0,
+//     y: 0,
+//     width: 3,
+//     height: 2,
+//   }
+```
+
+---
+
+### `area(rect)`
+
+Converts a rect into an area.
+
+#### Arguments
+
+1. `rect` *[Rect](#rect)* The rect to convert.
+
+#### Returns
+
+*[Area](#area)* The equivalent area.
+
+#### Example
+
+```js
+import {area} from 'grid-template-parser';
+
+const a = area({
+  x: 0,
+  y: 0,
+  width: 3,
+  height: 2,
+});
+
+// → {
+//     column: {start: 1, end: 4, span: 3},
+//     row: {start: 1, end: 3, span: 2},
+//   }
+```
+
+---
+
+### `minColumnStart(grid)`
+
+Finds the min column start of all grid areas.
+
+#### Arguments
+
+1. `grid` *[Grid](#grid)* The grid to analyze.
+
+#### Returns
+
+*number* The min column start.
+
+#### Example
+
+```js
+import {grid, minColumnStart} from 'grid-template-parser';
+
+const min = minColumnStart(grid(`
+  ". . a a a"
+  ". b b b b"
+  ". . . c c"
+`));
+
+// → 2
+```
+
+---
+
+### `maxColumnStart(grid)`
+
+Finds the max column start of all grid areas.
+
+#### Arguments
+
+1. `grid` *[Grid](#grid)* The grid to analyze.
+
+#### Returns
+
+*number* The max column start.
+
+#### Example
+
+```js
+import {grid, maxColumnStart} from 'grid-template-parser';
+
+const max = maxColumnStart(grid(`
+  ". . a a a"
+  ". b b b b"
+  ". . . c c"
+`));
+
+// → 4
+```
+
+---
+
+### `minColumnEnd(grid)`
+
+Finds the min column end of all grid areas.
+
+#### Arguments
+
+1. `grid` *[Grid](#grid)* The grid to analyze.
+
+#### Returns
+
+*number* The min column end.
+
+#### Example
+
+```js
+import {grid, minColumnEnd} from 'grid-template-parser';
+
+const min = minColumnEnd(grid(`
+  "a a . . ."
+  "b b b b ."
+  "c c c . ."
+`));
+
+// → 3
+```
+
+---
+
+### `maxColumnEnd(grid)`
+
+Finds the max column end of all grid areas.
+
+#### Arguments
+
+1. `grid` *[Grid](#grid)* The grid to analyze.
+
+#### Returns
+
+*number* The max column end.
+
+#### Example
+
+```js
+import {grid, maxColumnEnd} from 'grid-template-parser';
+
+const max = maxColumnEnd(grid(`
+  "a a . . ."
+  "b b b b ."
+  "c c c . ."
+`));
+
+// → 5
+```
+
+---
+
+### `minRowStart(grid)`
+
+Finds the min row start of all grid areas.
+
+#### Arguments
+
+1. `grid` *[Grid](#grid)* The grid to analyze.
+
+#### Returns
+
+*number* The min row start.
+
+#### Example
+
+```js
+import {grid, minRowStart} from 'grid-template-parser';
+
+const min = minRowStart(grid(`
+  ". . . ."
+  "a a . ."
+  "a a b b"
+  "a a b b"
+`));
+
+// → 2
+```
+
+---
+
+### `maxRowStart(grid)`
+
+Finds the max row start of all grid areas.
+
+#### Arguments
+
+1. `grid` *[Grid](#grid)* The grid to analyze.
+
+#### Returns
+
+*number* The max row start.
+
+#### Example
+
+```js
+import {grid, maxRowStart} from 'grid-template-parser';
+
+const max = maxRowStart(grid(`
+  ". . . ."
+  "a a . ."
+  "a a b b"
+  "a a b b"
+`));
+
+// → 3
+```
+
+---
+
+### `minRowEnd(grid)`
+
+Finds the min row end of all grid areas.
+
+#### Arguments
+
+1. `grid` *[Grid](#grid)* The grid to analyze.
+
+#### Returns
+
+*number* The min row end.
+
+#### Example
+
+```js
+import {grid, minRowEnd} from 'grid-template-parser';
+
+const min = minRowEnd(grid(`
+  "a a b b"
+  "a a b b"
+  ". . b b"
+  ". . . ."
+`));
+
+// → 3
+```
+
+---
+
+### `maxRowEnd(grid)`
+
+Finds the max row end of all grid areas.
+
+#### Arguments
+
+1. `grid` *[Grid](#grid)* The grid to analyze.
+
+#### Returns
+
+*number* The max row end.
+
+#### Example
+
+```js
+import {grid, maxRowEnd} from 'grid-template-parser';
+
+const max = maxRowEnd(grid(`
+  "a a b b"
+  "a a b b"
+  ". . b b"
+  ". . . ."
+`));
+
+// → 4
+```
+
+## Types
+
+### `Track`
+
+```js
+type Track = {
+  start: number,
+  end: number,
+  span: number,
+};
+```
+
+### `Area`
+
+```js
+type Area = {
+  row: Track,
+  column: Track,
+};
+```
+
+### `Rect`
+
+```js
+type Rect = {
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+};
+```
+
+### `Grid`
+
+```js
+type Grid = {
+  width: number,
+  height: number,
+  areas: {[key: string]: Area},
+};
+```
+
 ## License
 
 MIT

No alert changes

Improved metrics

Total package byte prevSize

17255

increased by65.36%

Number of lines in readme file

533

increased by1058.7%

Worsened metrics

Lines of code

222

decreased by-5.93%

No dependency changes