flex-wrap-layout - npm Package Compare versions

Comparing version 0.9.2 to 0.10.0-beta.1

dist/cjs/detectWrappedElements.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.detectWrappedElements = void 0;
 // [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172)
@@ -33,3 +34,3 @@ function position(el) {
                     // There is no way to CSS style an element given a match on its next sibling
-                    // [Is there a "previous sibling" CSS selector?](http://stackoverflow.com/q/1817792)
+                    // [Is there a "previous sibling" CSS selector?](https://stackoverflow.com/q/1817792)
                     prev.classList.add(nextIsWrappedClassName);
@@ -36,0 +37,0 @@ }

dist/cjs/DevTools.js

 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DevTools = exports.useDevTools = void 0;
 const react_1 = __importStar(require("react"));
@@ -23,3 +36,3 @@ const useDetectWrappedElements_1 = require("./useDetectWrappedElements");
     const [flexFill, setFlexFill] = react_1.useState(flexFillInit);
-    const showBordersClassName = showBorders ? 'showBorders' : '';
+    const showBordersClassName = showBorders ? 'show-borders' : '';
     const flexFillClassName = flexFill ? 'flex-fill' : '';
@@ -26,0 +39,0 @@ return {

dist/cjs/index.js

 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./detectWrappedElements"));
-__export(require("./useDetectWrappedElements"));
-__export(require("./DevTools"));
+__exportStar(require("./detectWrappedElements"), exports);
+__exportStar(require("./DevTools"), exports);
+__exportStar(require("./useDetectWrappedElements"), exports);

dist/cjs/useDetectWrappedElements.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDetectWrappedElements = exports.hasChildWrappedClassName = exports.nextIsWrappedClassName = exports.wrapChildrenClassName = void 0;
 const react_1 = require("react");
@@ -16,3 +17,2 @@ const detectWrappedElements_1 = require("./detectWrappedElements");
         run();
-        // eslint-disable-next-line consistent-return
         return () => {
@@ -19,0 +19,0 @@ window.removeEventListener('resize', run);

dist/detectWrappedElements.js

@@ -0,1 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.detectWrappedElements = void 0;
 // [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172)
@@ -11,3 +14,3 @@ function position(el) {
 // [How to detect CSS flex wrap event](https://stackoverflow.com/q/40012428)
-export function detectWrappedElements(rootElement, wrapChildrenClassName, nextIsWrappedClassName, hasChildWrappedClassName) {
+function detectWrappedElements(rootElement, wrapChildrenClassName, nextIsWrappedClassName, hasChildWrappedClassName) {
     // For each child of .wrap-children
@@ -32,3 +35,3 @@ //   - find its previous sibling
                     // There is no way to CSS style an element given a match on its next sibling
-                    // [Is there a "previous sibling" CSS selector?](http://stackoverflow.com/q/1817792)
+                    // [Is there a "previous sibling" CSS selector?](https://stackoverflow.com/q/1817792)
                     prev.classList.add(nextIsWrappedClassName);
@@ -48,1 +51,2 @@ }
 }
+exports.detectWrappedElements = detectWrappedElements;

dist/DevTools.js

@@ -1,3 +0,25 @@
-import React, { useState } from 'react';
-import { useDetectWrappedElements } from './useDetectWrappedElements';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DevTools = exports.useDevTools = void 0;
+const react_1 = __importStar(require("react"));
+const useDetectWrappedElements_1 = require("./useDetectWrappedElements");
 // https://github.com/mobxjs/mobx-react-devtools/blob/6.1.1/src/Panel/styles/index.js
@@ -10,7 +32,7 @@ const panel = {
 };
-export function useDevTools(showBordersInit, detectWrappedElementsInit, flexFillInit) {
-    const [showBorders, setShowBorders] = useState(showBordersInit);
-    const [detectWrappedElements, setDetectWrappedElements] = useState(detectWrappedElementsInit);
-    const [flexFill, setFlexFill] = useState(flexFillInit);
-    const showBordersClassName = showBorders ? 'showBorders' : '';
+function useDevTools(showBordersInit, detectWrappedElementsInit, flexFillInit) {
+    const [showBorders, setShowBorders] = react_1.useState(showBordersInit);
+    const [detectWrappedElements, setDetectWrappedElements] = react_1.useState(detectWrappedElementsInit);
+    const [flexFill, setFlexFill] = react_1.useState(flexFillInit);
+    const showBordersClassName = showBorders ? 'show-borders' : '';
     const flexFillClassName = flexFill ? 'flex-fill' : '';
@@ -28,8 +50,9 @@ return {
 }
+exports.useDevTools = useDevTools;
 // https://inventingwithmonster.io/20190207-break-the-rules-of-react-hooks/
 function DetectWrappedElements({ detectWrappedElementsRef }) {
-    useDetectWrappedElements(detectWrappedElementsRef);
+    useDetectWrappedElements_1.useDetectWrappedElements(detectWrappedElementsRef);
     return null;
 }
-export function DevTools(props) {
+function DevTools(props) {
     const { detectWrappedElementsRef, context, ...otherProps } = props;
@@ -39,18 +62,19 @@ const { showBorders, setShowBorders, detectWrappedElements, setDetectWrappedElements, flexFill, setFlexFill } = context;
     // eslint-disable-next-line react/jsx-props-no-spreading
-    React.createElement("div", Object.assign({ style: { ...panel } }, otherProps),
-        detectWrappedElements && (React.createElement(DetectWrappedElements, { detectWrappedElementsRef: detectWrappedElementsRef })),
-        React.createElement("label", { title: "Dotted line: growing block, solid line: fixed block" },
-            React.createElement("input", { type: "checkbox", checked: showBorders, onChange: () => setShowBorders(!showBorders) }),
+    react_1.default.createElement("div", Object.assign({ style: { ...panel } }, otherProps),
+        detectWrappedElements && (react_1.default.createElement(DetectWrappedElements, { detectWrappedElementsRef: detectWrappedElementsRef })),
+        react_1.default.createElement("label", { title: "Dotted line: growing block, solid line: fixed block" },
+            react_1.default.createElement("input", { type: "checkbox", checked: showBorders, onChange: () => setShowBorders(!showBorders) }),
             ' ',
             "Borders"),
         '  ',
-        React.createElement("label", { title: "Make previous and next blocks grow" },
-            React.createElement("input", { type: "checkbox", checked: detectWrappedElements, onChange: () => setDetectWrappedElements(!detectWrappedElements) }),
+        react_1.default.createElement("label", { title: "Make previous and next blocks grow" },
+            react_1.default.createElement("input", { type: "checkbox", checked: detectWrappedElements, onChange: () => setDetectWrappedElements(!detectWrappedElements) }),
             ' ',
             "detectWrappedElements()"),
         '  ',
-        React.createElement("label", null,
-            React.createElement("input", { type: "checkbox", checked: flexFill, onChange: () => setFlexFill(!flexFill) }),
+        react_1.default.createElement("label", null,
+            react_1.default.createElement("input", { type: "checkbox", checked: flexFill, onChange: () => setFlexFill(!flexFill) }),
             ' ',
             ".flex-fill")));
 }
+exports.DevTools = DevTools;

dist/index.d.ts

 export * from './detectWrappedElements';
+export * from './DevTools';
 export * from './useDetectWrappedElements';
-export * from './DevTools';

dist/index.js

@@ -1,3 +0,15 @@
-export * from './detectWrappedElements';
-export * from './useDetectWrappedElements';
-export * from './DevTools';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./detectWrappedElements"), exports);
+__exportStar(require("./DevTools"), exports);
+__exportStar(require("./useDetectWrappedElements"), exports);

dist/useDetectWrappedElements.js

@@ -1,25 +0,28 @@
-import { useEffect } from 'react';
-import { detectWrappedElements } from './detectWrappedElements';
-export const wrapChildrenClassName = 'wrap-children';
-export const nextIsWrappedClassName = 'next-is-wrapped';
-export const hasChildWrappedClassName = 'has-child-wrapped';
-export function useDetectWrappedElements(ref) {
-    useEffect(() => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDetectWrappedElements = exports.hasChildWrappedClassName = exports.nextIsWrappedClassName = exports.wrapChildrenClassName = void 0;
+const react_1 = require("react");
+const detectWrappedElements_1 = require("./detectWrappedElements");
+exports.wrapChildrenClassName = 'wrap-children';
+exports.nextIsWrappedClassName = 'next-is-wrapped';
+exports.hasChildWrappedClassName = 'has-child-wrapped';
+function useDetectWrappedElements(ref) {
+    react_1.useEffect(() => {
         const rootElement = ref.current;
         function run() {
-            detectWrappedElements(rootElement, wrapChildrenClassName, nextIsWrappedClassName, hasChildWrappedClassName);
+            detectWrappedElements_1.detectWrappedElements(rootElement, exports.wrapChildrenClassName, exports.nextIsWrappedClassName, exports.hasChildWrappedClassName);
         }
         window.addEventListener('resize', run);
         run();
-        // eslint-disable-next-line consistent-return
         return () => {
             window.removeEventListener('resize', run);
-            const children = rootElement.getElementsByClassName(nextIsWrappedClassName);
+            const children = rootElement.getElementsByClassName(exports.nextIsWrappedClassName);
             // https://stackoverflow.com/q/22270664#comment33829207_22270685
             while (children.length > 0) {
-                children[0].classList.remove(nextIsWrappedClassName);
+                children[0].classList.remove(exports.nextIsWrappedClassName);
             }
-            rootElement.classList.remove(hasChildWrappedClassName);
+            rootElement.classList.remove(exports.hasChildWrappedClassName);
         };
     }, [ref]);
 }
+exports.useDetectWrappedElements = useDetectWrappedElements;

package.json

 {
   "name": "flex-wrap-layout",
-  "version": "0.9.2",
+  "version": "0.10.0-beta.1",
   "repository": {
@@ -25,7 +25,7 @@ "type": "git",
     "clean:all": "npm run clean && rm -rf node_modules package-lock.json examples/node_modules examples/package-lock.json",
-    "build:esnext": "tsc --project tsconfig.dist.json --outDir dist --module esnext --declaration true",
+    "build:esnext": "tsc --project tsconfig.dist.json --outDir dist --declaration true",
     "build:cjs": "tsc --project tsconfig.dist.json --outDir dist/cjs",
-    "build": "npm run build:esnext && npm run build:cjs",
+    "build": "npm run clean && npm run build:esnext && npm run build:cjs",
     "npm:install:examples": "cd examples && npm install",
-    "build:examples": "cd examples && ./node_modules/.bin/webpack -d",
+    "build:examples": "cd examples && ./node_modules/.bin/webpack --mode development",
     "test": "NODE_ENV=test jest --verbose",
@@ -35,6 +35,9 @@ "test:coverage": "jest --coverage",
     "tsc": "tsc",
-    "format": "prettier --write \"**/*\"",
+    "format": "prettier --write '**/*'",
     "lint": "npm run tsc && eslint . '**/*.{js,ts,tsx}' && stylelint '**/*.scss'",
+    "prepare": "husky install",
+    "precommit": "lint-staged --verbose",
     "prepush": "npm run build:esnext && npm run build:examples && npm run test && npm run test:examples",
     "prepublishOnly": "npm run clean && npm run build",
+    "publish:beta": "npm version 0.10.0-beta.1 && npm publish --tag next --dry-run",
     "npm:update": "npm run clean:all && npx npm-check-updates --upgrade && npm install"
@@ -47,29 +50,32 @@ },
   "devDependencies": {
-    "@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.1.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
-    "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.8",
-    "prettier": "^1.19.1",
-    "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.15.0",
-    "ts-jest": "^25.2.1",
-    "typescript": "^3.8.3"
+    "@testing-library/react": "^11.2.6",
+    "@types/jest": "^26.0.22",
+    "@types/react": "^17.0.3",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
+    "eslint": "^7.24.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.3.5",
+    "eslint-plugin-jest-playwright": "^0.2.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "eslint-plugin-unicorn": "^30.0.0",
+    "husky": "^6.0.0",
+    "jest": "^26.6.3",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.2.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "stylelint": "^13.12.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-twbs-bootstrap": "^2.1.0",
+    "stylelint-prettier": "^1.2.0",
+    "ts-jest": "^26.5.5",
+    "typescript": "^4.2.4"
   }
 }

README.md

 # flex-wrap-layout
 
 [![npm version](https://badge.fury.io/js/flex-wrap-layout.svg)](https://www.npmjs.com/package/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)
+[![Node.js CI](https://github.com/tkrotoff/flex-wrap-layout/workflows/Node.js%20CI/badge.svg)](https://github.com/tkrotoff/flex-wrap-layout/actions)
+[![Bundle size](https://badgen.net/bundlephobia/minzip/flex-wrap-layout)](https://bundlephobia.com/result?p=flex-wrap-layout)
 [![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
@@ -61,3 +61,3 @@ [![Airbnb Code Style](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)
 - [Boxes example](examples/Boxes.tsx)
-- [Bootstrap 4 example](examples/Bootstrap4.tsx): https://codesandbox.io/s/github/tkrotoff/flex-wrap-layout/tree/codesandbox.io/examples
+- [Bootstrap example](examples/Bootstrap.tsx): https://codesandbox.io/s/github/tkrotoff/flex-wrap-layout/tree/codesandbox.io/examples
 
@@ -67,1 +67,5 @@ ## Supported browsers
 IE 11 and evergreen browsers
+
+## Limitations
+
+This will cause reflows (layout thrashing): https://gist.github.com/paulirish/5d52fb081b3570c81e3a

src/detectWrappedElements.ts

@@ -42,3 +42,3 @@ // [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172)
           // There is no way to CSS style an element given a match on its next sibling
-          // [Is there a "previous sibling" CSS selector?](http://stackoverflow.com/q/1817792)
+          // [Is there a "previous sibling" CSS selector?](https://stackoverflow.com/q/1817792)
           prev.classList.add(nextIsWrappedClassName);
@@ -45,0 +45,0 @@ } else if (top === prevTop) {

src/index.ts

 export * from './detectWrappedElements';
+export * from './DevTools';
 export * from './useDetectWrappedElements';
-export * from './DevTools';

src/useDetectWrappedElements.ts

@@ -26,3 +26,2 @@ import React, { useEffect } from 'react';
 
-    // eslint-disable-next-line consistent-return
     return () => {
@@ -29,0 +28,0 @@ window.removeEventListener('resize', run);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

70

increased by6.06%

Worsened metrics

Total package byte prevSize

37257

decreased by-9.98%

Dev dependency count

29

increased by11.54%

Number of package files

23

decreased by-11.54%

Lines of code

623

decreased by-10.49%

No dependency changes