react-flexr - npm Package Compare versions

Comparing version 2.2.0 to 3.0.0-beta.0

dist/cell.component.js

@@ -15,6 +15,2 @@ 'use strict';
 
-var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
-
-var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
@@ -70,5 +66,2 @@
   },
-  baseFlex: {
-    flex: 1
-  },
   flex: {
@@ -91,29 +84,48 @@ display: 'flex'
 
-  function Cell(props, context) {
+  function Cell() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
     (0, _classCallCheck3.default)(this, Cell);
 
-    var _this = (0, _possibleConstructorReturn3.default)(this, (Cell.__proto__ || (0, _getPrototypeOf2.default)(Cell)).call(this, props, context));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _initialiseProps.call(_this);
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Cell.__proto__ || (0, _getPrototypeOf2.default)(Cell)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      breakpoints: (0, _utils.getInitialBreakpoints)()
+    }, _this.handleFlexSize = function (breakpoint) {
+      var _this$props = _this.props,
+          grow = _this$props.grow,
+          size = _this$props.size;
 
-    return _this;
+      return (0, _utils.handleFlexSize)({ breakpoint: breakpoint, grow: grow, size: size });
+    }, _this.getDefinedBreakpoints = function () {
+      var breakpoints = [];
+
+      for (var i = 0, len = ERGONOMICS.length; i < len; i++) {
+        if (_this.props[ERGONOMICS[i]]) breakpoints.push(ERGONOMICS[i]);
+      }
+
+      return breakpoints;
+    }, _this.getMatchingBreakpoint = function () {
+      var definedBreakpoints = _this.getDefinedBreakpoints();
+      var breakpoint = _this.state.breakpoints ? (0, _utils.matchBreakpoints)(_this.state.breakpoints.split(','), definedBreakpoints) : _utils.findMatch.apply(null, definedBreakpoints);
+      return _this.props[breakpoint];
+    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
   }
 
   (0, _createClass3.default)(Cell, [{
-    key: 'calcWidth',
-    value: function calcWidth(size) {
-      if (typeof size === 'number') {
-        return {
-          width: size < 1 ? Math.round(size * 10000) / 100 + '%' : size + 'px'
-        };
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      if (this.state.breakpoints) {
+        var breakpoints = (0, _utils.getBreakpoints)(true);
+        if (breakpoints !== this.state.breakpoints) {
+          var definedBreakpoints = this.getDefinedBreakpoints();
+          if (definedBreakpoints.length) {
+            this.setState({ breakpoints: breakpoints });
+          }
+        }
       }
-
-      var _ref = size ? size.split('/') : [],
-          _ref2 = (0, _slicedToArray3.default)(_ref, 2),
-          numerator = _ref2[0],
-          denominator = _ref2[1];
-
-      return {
-        width: 100 / denominator * numerator + '%'
-      };
     }
@@ -123,2 +135,10 @@ }, {
     value: function render() {
+      var breakpoint = this.getMatchingBreakpoint();
+
+      if (breakpoint === 'hidden') {
+        return null;
+      }
+
+      var flexSize = this.handleFlexSize(breakpoint);
+
       var _props = this.props,
@@ -140,14 +160,5 @@ gutter = _props.gutter,
 
-      var breakpoint = this.getMatchingBreakpoint();
-
-      // Return early for performance
-      if (breakpoint === 'hidden') {
-        return null;
-      }
-
-      var flexSize = this.handleFlexSize(breakpoint);
-
       this.styles = (0, _utils.assign)({}, gutter ? { padding: '0 ' + gutter } : null, flexSize, style);
 
-      var classes = [cellStyles.base, flexSize ? null : cellStyles.baseFlex, className, flex ? cellStyles.flex : null, align ? cellStyles[align] : null].filter(Boolean).join(' ');
+      var classes = [cellStyles.base, className, flex ? cellStyles.flex : null, align ? cellStyles[align] : null].filter(Boolean).join(' ');
 
@@ -176,36 +187,3 @@ return _react2.default.createElement(
 };
-
-var _initialiseProps = function _initialiseProps() {
-  var _this2 = this;
-
-  this.handleFlexSize = function (breakpoint) {
-    var _props2 = _this2.props,
-        grow = _props2.grow,
-        size = _props2.size;
-
-    var growStyle = typeof grow === 'number' ? grow : grow === false ? 0 : undefined;
-
-    return breakpoint && breakpoint !== 'hidden' ? _this2.calcWidth(breakpoint) : size ? _this2.calcWidth(size) : growStyle !== undefined ? {
-      flex: growStyle + ' 1 auto',
-      WebkitFlex: growStyle + ' 1 auto',
-      msFlex: growStyle + ' 1 auto'
-    } : null;
-  };
-
-  this.getDefinedBreakpoints = function () {
-    var breakpoints = [];
-
-    for (var i = 0, len = ERGONOMICS.length; i < len; i++) {
-      if (_this2.props[ERGONOMICS[i]]) breakpoints.push(ERGONOMICS[i]);
-    }
-
-    return breakpoints;
-  };
-
-  this.getMatchingBreakpoint = function () {
-    return _this2.props[_utils.findMatch.apply(null, _this2.getDefinedBreakpoints())];
-  };
-};
-
 exports.default = Cell;
 module.exports = exports['default'];

dist/grid.component.js

@@ -90,9 +90,5 @@ 'use strict';
 
-  function Grid(props) {
+  function Grid() {
     (0, _classCallCheck3.default)(this, Grid);
-
-    var _this = (0, _possibleConstructorReturn3.default)(this, (Grid.__proto__ || (0, _getPrototypeOf2.default)(Grid)).call(this, props));
-
-    (0, _utils.initBreakpoints)();
-    return _this;
+    return (0, _possibleConstructorReturn3.default)(this, (Grid.__proto__ || (0, _getPrototypeOf2.default)(Grid)).apply(this, arguments));
   }
@@ -99,0 +95,0 @@

dist/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.desk = exports.portable = exports.lap = exports.palm = exports.clearBreakpoints = exports.getBreakpoints = exports.setBreakpoints = exports.findMatch = exports.findBreakpoints = exports.optimizedResize = exports.stylesheet = exports.Cell = exports.Grid = undefined;
+exports.desk = exports.portable = exports.lap = exports.palm = exports.clearBreakpoints = exports.getBreakpoints = exports.setBreakpoints = exports.findMatch = exports.findBreakpoints = exports.optimizedResize = exports.stylesheet = exports.HydrateSSR = exports.Cell = exports.Grid = undefined;
 
@@ -17,2 +17,6 @@ var _grid = require('./grid.component');
 
+var _hydrateSsr = require('./hydrate-ssr.component');
+
+var _hydrateSsr2 = _interopRequireDefault(_hydrateSsr);
+
 var _stylesheet = require('./stylesheet');
@@ -32,2 +36,3 @@
 exports.Cell = _cell2.default;
+exports.HydrateSSR = _hydrateSsr2.default;
 exports.stylesheet = _stylesheet2.default;
@@ -34,0 +39,0 @@ exports.optimizedResize = _utils.optimizedResize;

dist/utils/index.js

@@ -26,6 +26,11 @@ 'use strict';
 exports.findBreakpoints = findBreakpoints;
-exports.initBreakpoints = initBreakpoints;
 exports.findMatch = findMatch;
+exports.matchBreakpoints = matchBreakpoints;
 exports.doubleUnit = doubleUnit;
 exports.assign = assign;
+exports.getInitialBreakpoints = getInitialBreakpoints;
+exports.ssrWillHydrate = ssrWillHydrate;
+exports.ssrDidHydrate = ssrDidHydrate;
+exports.calcWidth = calcWidth;
+exports.handleFlexSize = handleFlexSize;
 
@@ -99,10 +104,2 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var initialized = false;
-function initBreakpoints() {
-  if (!initialized) {
-    initialized = true;
-    findBreakpoints();
-  }
-}
-
 var optimizedResize = exports.optimizedResize = function () {
@@ -170,2 +167,9 @@ var callbacks = new _map2.default();
 
+  return matchBreakpoints(breakpoints, arr);
+}
+
+function matchBreakpoints(breakpoints, arr) {
+  if (typeof breakpoints === 'string') {
+    breakpoints = breakpoints.split(',');
+  }
   var breakpoint = false;
@@ -240,2 +244,61 @@ if (!arr || arr.length === 0) return breakpoint;
   return to;
+}
+
+if (canUseDOM) {
+  if (window.__flexr) {
+    setBreakpoints(window.__flexr);
+  } else {
+    findBreakpoints();
+  }
+}
+
+var INITIAL_BREAKPOINT = getBreakpoints(true);
+var hydrating = false;
+
+function getInitialBreakpoints() {
+  if (!canUseDOM) {
+    return getBreakpoints(true);
+  }
+  return hydrating ? INITIAL_BREAKPOINT : null;
+}
+
+function ssrWillHydrate() {
+  hydrating = true;
+  findBreakpoints();
+}
+
+function ssrDidHydrate() {
+  hydrating = false;
+  INITIAL_BREAKPOINT = getBreakpoints(true);
+}
+
+function calcWidth(size) {
+  if (typeof size === 'number') {
+    return {
+      width: size < 1 ? Math.round(size * 10000) / 100 + '%' : size + 'px'
+    };
+  }
+
+  var _ref2 = size ? size.split('/') : [],
+      _ref3 = (0, _slicedToArray3.default)(_ref2, 2),
+      numerator = _ref3[0],
+      denominator = _ref3[1];
+
+  return {
+    width: 100 / denominator * numerator + '%'
+  };
+}
+
+function handleFlexSize(_ref4) {
+  var breakpoint = _ref4.breakpoint,
+      grow = _ref4.grow,
+      size = _ref4.size;
+
+  var growStyle = typeof grow === 'number' ? grow : grow === false ? 0 : undefined;
+
+  return breakpoint && breakpoint !== 'hidden' ? calcWidth(breakpoint) : size ? calcWidth(size) : growStyle !== undefined ? {
+    flex: growStyle + ' 1 auto',
+    WebkitFlex: growStyle + ' 1 auto',
+    msFlex: growStyle + ' 1 auto'
+  } : { flex: 1 };
 }

lib/cell.component.js

@@ -5,3 +5,13 @@ import stylesheet from './stylesheet';
 import PropTypes from 'prop-types';
-import { findMatch, settings, vertical, variables, assign } from './utils';
+import {
+  findMatch,
+  matchBreakpoints,
+  settings,
+  vertical,
+  variables,
+  assign,
+  getBreakpoints,
+  getInitialBreakpoints,
+  handleFlexSize
+} from './utils';
 
@@ -15,5 +25,2 @@ const ERGONOMICS = Object.keys(settings);
     },
-    baseFlex: {
-      flex: 1
-    },
     flex: {
@@ -36,6 +43,2 @@ display: 'flex'
 export default class Cell extends Component {
-  constructor(props, context) {
-    super(props, context);
-  }
-
   static propTypes = {
@@ -62,13 +65,16 @@ grow: PropTypes.oneOf([false, true, PropTypes.number]),
 
-  calcWidth(size) {
-    if (typeof size === 'number') {
-      return {
-        width: size < 1 ? `${Math.round(size * 10000) / 100}%` : `${size}px`
-      };
+  state = {
+    breakpoints: getInitialBreakpoints()
+  };
+
+  componentDidMount() {
+    if (this.state.breakpoints) {
+      const breakpoints = getBreakpoints(true);
+      if (breakpoints !== this.state.breakpoints) {
+        const definedBreakpoints = this.getDefinedBreakpoints();
+        if (definedBreakpoints.length) {
+          this.setState({ breakpoints });
+        }
+      }
     }
-
-    const [numerator, denominator] = size ? size.split('/') : [];
-    return {
-      width: `${100 / denominator * numerator}%`
-    };
   }
@@ -78,16 +84,3 @@
     const { grow, size } = this.props;
-    const growStyle =
-      typeof grow === 'number' ? grow : grow === false ? 0 : undefined;
-
-    return breakpoint && breakpoint !== 'hidden'
-      ? this.calcWidth(breakpoint)
-      : size
-        ? this.calcWidth(size)
-        : growStyle !== undefined
-          ? {
-              flex: `${growStyle} 1 auto`,
-              WebkitFlex: `${growStyle} 1 auto`,
-              msFlex: `${growStyle} 1 auto`
-            }
-          : null;
+    return handleFlexSize({ breakpoint, grow, size });
   };
@@ -106,6 +99,18 @@
   getMatchingBreakpoint = () => {
-    return this.props[findMatch.apply(null, this.getDefinedBreakpoints())];
+    const definedBreakpoints = this.getDefinedBreakpoints();
+    const breakpoint = this.state.breakpoints
+      ? matchBreakpoints(this.state.breakpoints.split(','), definedBreakpoints)
+      : findMatch.apply(null, definedBreakpoints);
+    return this.props[breakpoint];
   };
 
   render() {
+    const breakpoint = this.getMatchingBreakpoint();
+
+    if (breakpoint === 'hidden') {
+      return null;
+    }
+
+    const flexSize = this.handleFlexSize(breakpoint);
+
     const {
@@ -127,11 +132,2 @@ gutter,
 
-    const breakpoint = this.getMatchingBreakpoint();
-
-    // Return early for performance
-    if (breakpoint === 'hidden') {
-      return null;
-    }
-
-    const flexSize = this.handleFlexSize(breakpoint);
-
     this.styles = assign(
@@ -146,3 +142,2 @@ {},
       cellStyles.base,
-      flexSize ? null : cellStyles.baseFlex,
       className,
@@ -149,0 +144,0 @@ flex ? cellStyles.flex : null,

lib/grid.component.js

@@ -5,10 +5,3 @@ import stylesheet from './stylesheet';
 import PropTypes from 'prop-types';
-import {
-  initBreakpoints,
-  doubleUnit,
-  vertical,
-  horizontal,
-  variables,
-  assign
-} from './utils';
+import { doubleUnit, vertical, horizontal, variables, assign } from './utils';
 
@@ -47,7 +40,2 @@ const styles = StyleSheet.create(
 export default class Grid extends Component {
-  constructor(props) {
-    super(props);
-    initBreakpoints();
-  }
-
   static propTypes = {
@@ -54,0 +42,0 @@ gutter: PropTypes.string,

lib/index.js

 import Grid from './grid.component';
 import Cell from './cell.component';
+import HydrateSSR from './hydrate-ssr.component';
 import stylesheet from './stylesheet';
@@ -19,2 +20,3 @@ import {
   Cell,
+  HydrateSSR,
   stylesheet,
@@ -21,0 +23,0 @@ optimizedResize,

lib/utils/index.js

@@ -23,15 +23,17 @@ export const canUseDOM = (() =>
 
-export const matchMediaQueries = Object.keys(
-  settings
-).reduce((acc, breakpoint) => {
-  acc[breakpoint] = generateMatchMediaString(settings[breakpoint]);
-  return acc;
-}, {});
+export const matchMediaQueries = Object.keys(settings).reduce(
+  (acc, breakpoint) => {
+    acc[breakpoint] = generateMatchMediaString(settings[breakpoint]);
+    return acc;
+  },
+  {}
+);
 
-export const mediaQueries = Object.keys(
-  matchMediaQueries
-).reduce((acc, breakpoint) => {
-  acc[breakpoint] = `@media screen and ${matchMediaQueries[breakpoint]}`;
-  return acc;
-}, {});
+export const mediaQueries = Object.keys(matchMediaQueries).reduce(
+  (acc, breakpoint) => {
+    acc[breakpoint] = `@media screen and ${matchMediaQueries[breakpoint]}`;
+    return acc;
+  },
+  {}
+);
 
@@ -70,10 +72,2 @@ let breakpoints = [];
 
-let initialized = false;
-export function initBreakpoints() {
-  if (!initialized) {
-    initialized = true;
-    findBreakpoints();
-  }
-}
-
 export const optimizedResize = (function() {
@@ -134,2 +128,9 @@ const callbacks = new Map();
 export function findMatch(...arr) {
+  return matchBreakpoints(breakpoints, arr);
+}
+
+export function matchBreakpoints(breakpoints, arr) {
+  if (typeof breakpoints === 'string') {
+    breakpoints = breakpoints.split(',');
+  }
   let breakpoint = false;
@@ -201,1 +202,59 @@ if (!arr || arr.length === 0) return breakpoint;
 }
+
+if (canUseDOM) {
+  if (window.__flexr) {
+    setBreakpoints(window.__flexr);
+  } else {
+    findBreakpoints();
+  }
+}
+
+let INITIAL_BREAKPOINT = getBreakpoints(true);
+let hydrating = false;
+
+export function getInitialBreakpoints() {
+  if (!canUseDOM) {
+    return getBreakpoints(true);
+  }
+  return hydrating ? INITIAL_BREAKPOINT : null;
+}
+
+export function ssrWillHydrate() {
+  hydrating = true;
+  findBreakpoints();
+}
+
+export function ssrDidHydrate() {
+  hydrating = false;
+  INITIAL_BREAKPOINT = getBreakpoints(true);
+}
+
+export function calcWidth(size) {
+  if (typeof size === 'number') {
+    return {
+      width: size < 1 ? `${Math.round(size * 10000) / 100}%` : `${size}px`
+    };
+  }
+
+  const [numerator, denominator] = size ? size.split('/') : [];
+  return {
+    width: `${100 / denominator * numerator}%`
+  };
+}
+
+export function handleFlexSize({ breakpoint, grow, size }) {
+  const growStyle =
+    typeof grow === 'number' ? grow : grow === false ? 0 : undefined;
+
+  return breakpoint && breakpoint !== 'hidden'
+    ? calcWidth(breakpoint)
+    : size
+      ? calcWidth(size)
+      : growStyle !== undefined
+        ? {
+            flex: `${growStyle} 1 auto`,
+            WebkitFlex: `${growStyle} 1 auto`,
+            msFlex: `${growStyle} 1 auto`
+          }
+        : { flex: 1 };
+}

package.json

 {
   "name": "react-flexr",
-  "version": "2.2.0",
+  "version": "3.0.0-beta.0",
   "description": "React flexbox grid made simple.",
@@ -8,10 +8,11 @@ "main": "dist",
     "lint": "eslint lib/",
-    "test": "NODE_ENV=test mocha --compilers js:babel-register --require lib/__tests__/testdom ./lib/__tests__/*.test.js",
-    "test-build": "NODE_ENV=test mocha --require dist/__tests__/testdom ./dist/__tests__/*.test.js",
+    "test:src": "NODE_ENV=test mocha --compilers js:babel-register --require lib/__tests__/testdom ./lib/__tests__/*.test.js",
+    "test:build": "NODE_ENV=test mocha --require dist/__tests__/testdom ./dist/__tests__/*.test.js",
+    "example:ssr": "babel-node ./example/ssr.js",
     "dev": "node ./example/server.js",
     "clean": "rm -rf ./dist",
     "dist": "NODE_ENV=production babel lib --out-dir dist --copy-files",
-    "pre-release": "yarn lint && yarn test",
+    "pre-release": "yarn lint && yarn test:src",
     "extract-styles": "make extract-styles",
-    "build": "yarn clean && yarn dist && yarn test-build && yarn extract-styles"
+    "build": "yarn clean && yarn dist && yarn test:build && yarn extract-styles"
   },
@@ -28,3 +29,3 @@ "keywords": [
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.1",
+    "babel-eslint": "^8.0.2",
     "babel-loader": "^7.1.2",
@@ -40,11 +41,11 @@ "babel-plugin-add-module-exports": "^0.2.1",
     "babel-register": "^6.26.0",
-    "eslint": "^4.7.2",
-    "eslint-plugin-react": "^7.4.0",
+    "eslint": "^4.12.0",
+    "eslint-plugin-react": "^7.5.1",
     "jsdom": "^9.12.0",
     "mocha": "^3.2.0",
-    "react-dom": "^16.0.0",
-    "react-hot-loader": "^3.0.0-beta.7",
+    "react-dom": "^16.2.0",
+    "react-hot-loader": "^3.1.3",
     "semver": "^5.4.1",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.9.1"
+    "webpack": "^3.8.1",
+    "webpack-dev-server": "^2.9.5"
   },
@@ -51,0 +52,0 @@ "dependencies": {

README.md

@@ -222,4 +222,4 @@ # Flexr [![Build Status](https://travis-ci.org/kodyl/react-flexr.svg)](https://travis-ci.org/kodyl/react-flexr) [![npm version](https://badge.fury.io/js/react-flexr.svg)](http://badge.fury.io/js/react-flexr)
 
+#### `array getBreakpoints()`
 
-#### `array getCurrentBreakpoints()`
 returns an array of current breakpoints.
@@ -226,0 +226,0 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

223744

increased by3.87%

Number of package files

23

increased by9.52%

Lines of code

1031

increased by14.94%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes