flex-wrap-layout - npm Package Compare versions

Comparing version 0.9.1 to 0.9.2

CHANGELOG.md

@@ -1,6 +0,10 @@
-## v0.9.1 (2020/02/24)
+## 0.9.2 (2020/03/18)
 
+- Update npm packages
+
+## 0.9.1 (2020/02/24)
+
 - DevTools accepts div props
 
-## v0.9.0 (2020/02/24)
+## 0.9.0 (2020/02/24)
 
@@ -10,3 +14,3 @@ - Rework everything: exposes `useDetectWrappedElements()`, `detectWrappedElements()` and `DevTools`
 
-## v0.2.1 (2020/01/31)
+## 0.2.1 (2020/01/31)
 
@@ -16,3 +20,3 @@ - Fix remove .next-is-wrapped
 
-## v0.2.0 (2020/01/30)
+## 0.2.0 (2020/01/30)
 
@@ -22,3 +26,3 @@ - Replace `.wrapped` by `.next-is-wrapped ~ *`
 
-## v0.1.2 (2020/01/30)
+## 0.1.2 (2020/01/30)
 
@@ -29,7 +33,7 @@ - Update npm packages
 
-## v0.1.1 (2019/03/25)
+## 0.1.1 (2019/03/25)
 
 - Fix crash when testing with Jest
 
-## v0.1.0 (2019/03/25)
+## 0.1.0 (2019/03/25)
 
@@ -41,4 +45,4 @@ - Modernize build system
 
-## v0.0.2 (2017/09/12)
+## 0.0.2 (2017/09/12)
 
 First release

dist/cjs/detectWrappedElements.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// See [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172)
+// [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172)
 function position(el) {
@@ -12,3 +12,3 @@ const { top, left } = el.getBoundingClientRect();
 }
-// See [How to detect CSS flex wrap event](https://stackoverflow.com/q/40012428)
+// [How to detect CSS flex wrap event](https://stackoverflow.com/q/40012428)
 function detectWrappedElements(rootElement, wrapChildrenClassName, nextIsWrappedClassName, hasChildWrappedClassName) {
@@ -34,3 +34,3 @@ // For each child of .wrap-children
                     // There is no way to CSS style an element given a match on its next sibling
-                    // See [Is there a "previous sibling" CSS selector?](http://stackoverflow.com/q/1817792)
+                    // [Is there a "previous sibling" CSS selector?](http://stackoverflow.com/q/1817792)
                     prev.classList.add(nextIsWrappedClassName);
@@ -46,3 +46,3 @@ }
     // IE does not support toggle() second argument
-    // See https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility
     //rootEl.classList.toggle(hasChildWrappedClassName, containsChildNextIsWrapped);
@@ -49,0 +49,0 @@ rootElement.classList[containsChildNextIsWrapped ? 'add' : 'remove'](hasChildWrappedClassName);

dist/cjs/DevTools.js

@@ -12,3 +12,3 @@ "use strict";
 const useDetectWrappedElements_1 = require("./useDetectWrappedElements");
-// See https://github.com/mobxjs/mobx-react-devtools/blob/6.1.1/src/Panel/styles/index.js
+// https://github.com/mobxjs/mobx-react-devtools/blob/6.1.1/src/Panel/styles/index.js
 const panel = {
@@ -15,0 +15,0 @@ display: 'inline-block',

dist/cjs/useDetectWrappedElements.js

@@ -20,3 +20,3 @@ "use strict";
             const children = rootElement.getElementsByClassName(exports.nextIsWrappedClassName);
-            // See https://stackoverflow.com/q/22270664#comment33829207_22270685
+            // https://stackoverflow.com/q/22270664#comment33829207_22270685
             while (children.length > 0) {
@@ -23,0 +23,0 @@ children[0].classList.remove(exports.nextIsWrappedClassName);

dist/cjs/useDetectWrappedElements.test.js

@@ -14,3 +14,3 @@ "use strict";
 // ["jsdom doesn't do any rendering, so getBoundingClientRect() always returns 0,0,0,0"](https://github.com/jsdom/jsdom/issues/1590#issuecomment-243228840)
-// See also [Implement a layout engine](https://github.com/jsdom/jsdom/issues/1322)
+// [Implement a layout engine](https://github.com/jsdom/jsdom/issues/1322)
 const mockWindowGetComputedStyle = (style) => (window.getComputedStyle = () => style);
@@ -17,0 +17,0 @@ const mockGetBoundingClientRect = (el, rect) =>

dist/detectWrappedElements.js

@@ -1,2 +0,2 @@
-// See [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172)
+// [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172)
 function position(el) {
@@ -10,3 +10,3 @@ const { top, left } = el.getBoundingClientRect();
 }
-// See [How to detect CSS flex wrap event](https://stackoverflow.com/q/40012428)
+// [How to detect CSS flex wrap event](https://stackoverflow.com/q/40012428)
 export function detectWrappedElements(rootElement, wrapChildrenClassName, nextIsWrappedClassName, hasChildWrappedClassName) {
@@ -32,3 +32,3 @@ // For each child of .wrap-children
                     // There is no way to CSS style an element given a match on its next sibling
-                    // See [Is there a "previous sibling" CSS selector?](http://stackoverflow.com/q/1817792)
+                    // [Is there a "previous sibling" CSS selector?](http://stackoverflow.com/q/1817792)
                     prev.classList.add(nextIsWrappedClassName);
@@ -44,5 +44,5 @@ }
     // IE does not support toggle() second argument
-    // See https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility
     //rootEl.classList.toggle(hasChildWrappedClassName, containsChildNextIsWrapped);
     rootElement.classList[containsChildNextIsWrapped ? 'add' : 'remove'](hasChildWrappedClassName);
 }

dist/DevTools.js

 import React, { useState } from 'react';
 import { useDetectWrappedElements } from './useDetectWrappedElements';
-// See https://github.com/mobxjs/mobx-react-devtools/blob/6.1.1/src/Panel/styles/index.js
+// https://github.com/mobxjs/mobx-react-devtools/blob/6.1.1/src/Panel/styles/index.js
 const panel = {
@@ -5,0 +5,0 @@ display: 'inline-block',

dist/useDetectWrappedElements.js

@@ -18,3 +18,3 @@ import { useEffect } from 'react';
             const children = rootElement.getElementsByClassName(nextIsWrappedClassName);
-            // See https://stackoverflow.com/q/22270664#comment33829207_22270685
+            // https://stackoverflow.com/q/22270664#comment33829207_22270685
             while (children.length > 0) {
@@ -21,0 +21,0 @@ children[0].classList.remove(nextIsWrappedClassName);

dist/useDetectWrappedElements.test.js

@@ -5,3 +5,3 @@ import React, { useRef } from 'react';
 // ["jsdom doesn't do any rendering, so getBoundingClientRect() always returns 0,0,0,0"](https://github.com/jsdom/jsdom/issues/1590#issuecomment-243228840)
-// See also [Implement a layout engine](https://github.com/jsdom/jsdom/issues/1322)
+// [Implement a layout engine](https://github.com/jsdom/jsdom/issues/1322)
 const mockWindowGetComputedStyle = (style) => (window.getComputedStyle = () => style);
@@ -8,0 +8,0 @@ const mockGetBoundingClientRect = (el, rect) =>

package.json

 {
   "name": "flex-wrap-layout",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "repository": {
@@ -45,9 +45,9 @@ "type": "git",
   "devDependencies": {
-    "@testing-library/react": "^9.4.1",
-    "@types/jest": "^25.1.3",
-    "@types/react": "^16.9.22",
-    "@typescript-eslint/eslint-plugin": "^2.20.0",
-    "@typescript-eslint/parser": "^2.20.0",
+    "@testing-library/react": "^10.0.1",
+    "@types/jest": "^25.1.4",
+    "@types/react": "^16.9.23",
+    "@typescript-eslint/eslint-plugin": "^2.24.0",
+    "@typescript-eslint/parser": "^2.24.0",
     "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-airbnb": "^18.1.0",
     "eslint-config-prettier": "^6.10.0",
@@ -57,18 +57,18 @@ "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^2.4.0",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^2.5.0",
     "husky": "^4.2.3",
     "jest": "^25.1.0",
-    "lint-staged": "^10.0.7",
+    "lint-staged": "^10.0.8",
     "prettier": "^1.19.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "stylelint": "^13.2.0",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "stylelint": "^13.2.1",
     "stylelint-config-airbnb": "0.0.0",
     "stylelint-config-recommended-scss": "^4.2.0",
     "stylelint-order": "^4.0.0",
-    "stylelint-scss": "^3.14.2",
+    "stylelint-scss": "^3.15.0",
     "ts-jest": "^25.2.1",
-    "typescript": "^3.8.2"
+    "typescript": "^3.8.3"
   }
 }

README.md

@@ -5,2 +5,5 @@ # flex-wrap-layout
 [![Build status](https://github.com/tkrotoff/flex-wrap-layout/workflows/Node.js%20CI/badge.svg)](https://github.com/tkrotoff/flex-wrap-layout/actions)
+[![npm bundle size](https://img.shields.io/bundlephobia/min/flex-wrap-layout.svg)](https://bundlephobia.com/result?p=flex-wrap-layout)
+[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+[![Airbnb Code Style](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)
 
@@ -59,3 +62,3 @@ Detects flex-wrap via JavaScript ([unfortunately not possible in CSS](https://stackoverflow.com/q/40012428)).
 - [Boxes example](examples/Boxes.tsx)
-- [Bootstrap 4 example](examples/Bootstrap4.tsx)
+- [Bootstrap 4 example](examples/Bootstrap4.tsx): https://codesandbox.io/s/github/tkrotoff/flex-wrap-layout/tree/codesandbox.io/examples
 
@@ -62,0 +65,0 @@ ## Supported browsers

src/detectWrappedElements.ts

@@ -1,2 +0,2 @@
-// See [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172)
+// [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172)
 function position(el: Element) {
@@ -11,3 +11,3 @@ const { top, left } = el.getBoundingClientRect();
 
-// See [How to detect CSS flex wrap event](https://stackoverflow.com/q/40012428)
+// [How to detect CSS flex wrap event](https://stackoverflow.com/q/40012428)
 export function detectWrappedElements(
@@ -43,3 +43,3 @@ rootElement: HTMLElement,
           // There is no way to CSS style an element given a match on its next sibling
-          // See [Is there a "previous sibling" CSS selector?](http://stackoverflow.com/q/1817792)
+          // [Is there a "previous sibling" CSS selector?](http://stackoverflow.com/q/1817792)
           prev.classList.add(nextIsWrappedClassName);
@@ -57,5 +57,5 @@ } else if (top === prevTop) {
   // IE does not support toggle() second argument
-  // See https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility
+  // https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility
   //rootEl.classList.toggle(hasChildWrappedClassName, containsChildNextIsWrapped);
   rootElement.classList[containsChildNextIsWrapped ? 'add' : 'remove'](hasChildWrappedClassName);
 }

src/useDetectWrappedElements.ts

@@ -31,3 +31,3 @@ import React, { useEffect } from 'react';
       const children = rootElement.getElementsByClassName(nextIsWrappedClassName);
-      // See https://stackoverflow.com/q/22270664#comment33829207_22270685
+      // https://stackoverflow.com/q/22270664#comment33829207_22270685
       while (children.length > 0) {
@@ -34,0 +34,0 @@ children[0].classList.remove(nextIsWrappedClassName);

No alert changes

Improved metrics

Total package byte prevSize

41389

0.96%

Number of lines in readme file

66

4.76%

No dependency changes