flex-wrap-layout - npm Package Compare versions

Comparing version 0.12.0 to 0.13.0

dist/cjs/detectWrappedElements.js

@@ -6,3 +6,3 @@ "use strict";
     const { top } = el.getBoundingClientRect();
-    const { marginTop } = window.getComputedStyle(el);
+    const { marginTop } = getComputedStyle(el);
     return top - parseInt(marginTop, 10);
@@ -35,4 +35,4 @@ }
     const containsChildNextIsWrapped = rootElement.getElementsByClassName(nextIsWrappedClassName).length > 0;
-    rootElement.classList[containsChildNextIsWrapped ? 'add' : 'remove'](hasChildWrappedClassName);
+    rootElement.classList.toggle(hasChildWrappedClassName, containsChildNextIsWrapped);
 }
 exports.detectWrappedElements = detectWrappedElements;

dist/cjs/DevTools.js

 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const useDetectWrappedElements_1 = require("./useDetectWrappedElements");
@@ -60,19 +38,4 @@ const panel = {
     const { showBorders, setShowBorders, detectWrappedElements, setDetectWrappedElements, flexFill, setFlexFill } = context;
-    return (react_1.default.createElement("div", { 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_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_1.default.createElement("label", null,
-            react_1.default.createElement("input", { type: "checkbox", checked: flexFill, onChange: () => setFlexFill(!flexFill) }),
-            ' ',
-            ".flex-fill")));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { ...panel }, ...otherProps, children: [detectWrappedElements && ((0, jsx_runtime_1.jsx)(DetectWrappedElements, { detectWrappedElementsRef: detectWrappedElementsRef })), (0, jsx_runtime_1.jsxs)("label", { title: "Dotted line: growing block, solid line: fixed block", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: showBorders, onChange: () => setShowBorders(!showBorders) }), ' ', "Borders"] }), '  ', (0, jsx_runtime_1.jsxs)("label", { title: "Make previous and next blocks grow", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: detectWrappedElements, onChange: () => setDetectWrappedElements(!detectWrappedElements) }), ' ', "detectWrappedElements()"] }), '  ', (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: flexFill, onChange: () => setFlexFill(!flexFill) }), ' ', ".flex-fill"] })] }));
 }
 exports.DevTools = DevTools;

dist/cjs/forceDetectWrappedElements.js

@@ -5,13 +5,4 @@ "use strict";
 function forceDetectWrappedElements() {
-    try {
-        window.dispatchEvent(new Event('resize'));
-    }
-    catch {
-        const event = document.createEvent('Event');
-        const bubbles = false;
-        const cancelable = false;
-        event.initEvent('resize', bubbles, cancelable);
-        window.dispatchEvent(event);
-    }
+    dispatchEvent(new Event('resize'));
 }
 exports.forceDetectWrappedElements = forceDetectWrappedElements;

dist/detectWrappedElements.js

 function getTopPosition(el) {
     const { top } = el.getBoundingClientRect();
-    const { marginTop } = window.getComputedStyle(el);
+    const { marginTop } = getComputedStyle(el);
     return top - parseInt(marginTop, 10);
@@ -31,3 +31,3 @@ }
     const containsChildNextIsWrapped = rootElement.getElementsByClassName(nextIsWrappedClassName).length > 0;
-    rootElement.classList[containsChildNextIsWrapped ? 'add' : 'remove'](hasChildWrappedClassName);
+    rootElement.classList.toggle(hasChildWrappedClassName, containsChildNextIsWrapped);
 }

dist/DevTools.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 interface DevToolsContext {
@@ -20,8 +20,8 @@ showBordersClassName: string;
     showBorders: boolean;
-    setShowBorders: React.Dispatch<React.SetStateAction<boolean>>;
+    setShowBorders: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     detectWrappedElements: boolean;
-    setDetectWrappedElements: React.Dispatch<React.SetStateAction<boolean>>;
+    setDetectWrappedElements: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     flexFillClassName: string;
     flexFill: boolean;
-    setFlexFill: React.Dispatch<React.SetStateAction<boolean>>;
+    setFlexFill: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };
@@ -28,0 +28,0 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {

dist/DevTools.js

@@ -1,2 +0,3 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { useDetectWrappedElements } from './useDetectWrappedElements';
@@ -33,18 +34,3 @@ const panel = {
     const { showBorders, setShowBorders, detectWrappedElements, setDetectWrappedElements, flexFill, setFlexFill } = context;
-    return (React.createElement("div", { 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) }),
-            ' ',
-            "Borders"),
-        '  ',
-        React.createElement("label", { title: "Make previous and next blocks grow" },
-            React.createElement("input", { type: "checkbox", checked: detectWrappedElements, onChange: () => setDetectWrappedElements(!detectWrappedElements) }),
-            ' ',
-            "detectWrappedElements()"),
-        '  ',
-        React.createElement("label", null,
-            React.createElement("input", { type: "checkbox", checked: flexFill, onChange: () => setFlexFill(!flexFill) }),
-            ' ',
-            ".flex-fill")));
+    return (_jsxs("div", { style: { ...panel }, ...otherProps, children: [detectWrappedElements && (_jsx(DetectWrappedElements, { detectWrappedElementsRef: detectWrappedElementsRef })), _jsxs("label", { title: "Dotted line: growing block, solid line: fixed block", children: [_jsx("input", { type: "checkbox", checked: showBorders, onChange: () => setShowBorders(!showBorders) }), ' ', "Borders"] }), '  ', _jsxs("label", { title: "Make previous and next blocks grow", children: [_jsx("input", { type: "checkbox", checked: detectWrappedElements, onChange: () => setDetectWrappedElements(!detectWrappedElements) }), ' ', "detectWrappedElements()"] }), '  ', _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: flexFill, onChange: () => setFlexFill(!flexFill) }), ' ', ".flex-fill"] })] }));
 }

dist/forceDetectWrappedElements.js

 export function forceDetectWrappedElements() {
-    try {
-        window.dispatchEvent(new Event('resize'));
-    }
-    catch {
-        const event = document.createEvent('Event');
-        const bubbles = false;
-        const cancelable = false;
-        event.initEvent('resize', bubbles, cancelable);
-        window.dispatchEvent(event);
-    }
+    dispatchEvent(new Event('resize'));
 }

dist/useDetectWrappedElements.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 export declare const wrapChildrenClassName = "wrap-children";
@@ -3,0 +3,0 @@ export declare const nextIsWrappedClassName = "next-is-wrapped";

package.json

 {
   "name": "flex-wrap-layout",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Experiments with flexbox layout",
@@ -42,36 +42,36 @@ "repository": "github:tkrotoff/flex-wrap-layout",
   "peerDependencies": {
-    "react": ">=16.8"
+    "react": ">=16.14"
   },
   "devDependencies": {
-    "@testing-library/react": "^13.3.0",
-    "@types/jest": "^28.1.4",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.30.5",
-    "@typescript-eslint/parser": "^5.30.5",
-    "eslint": "^8.19.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.4.0",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
+    "eslint": "^8.36.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.5.3",
-    "eslint-plugin-jsx-a11y": "^6.6.0",
-    "eslint-plugin-playwright": "^0.9.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-playwright": "^0.12.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-unicorn": "^43.0.1",
-    "husky": "^8.0.1",
-    "jest": "^28.1.2",
-    "jest-environment-jsdom": "^28.1.2",
-    "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-unicorn": "^46.0.0",
+    "husky": "^8.0.3",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "lint-staged": "^13.2.0",
+    "prettier": "^2.8.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "stylelint": "^14.9.1",
-    "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-twbs-bootstrap": "^4.0.0",
+    "stylelint": "^14.16.1",
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-config-twbs-bootstrap": "^7.0.0",
     "stylelint-prettier": "^2.0.0",
-    "ts-jest": "^28.0.5",
-    "typescript": "^4.7.4"
+    "ts-jest": "^29.0.5",
+    "typescript": "^4.9.5"
   }
 }

README.md

@@ -28,4 +28,3 @@ # flex-wrap-layout
 ```JS
-import React, { useRef } from 'react';
-import ReactDOM from 'react-dom';
+import { useRef } from 'react';
 
@@ -54,4 +53,2 @@ import { useDetectWrappedElements, wrapChildrenClassName } from 'flex-wrap-layout';
 }
-
-ReactDOM.render(<MyComponent />, document.getElementById('app'));
 ```
@@ -65,8 +62,4 @@
 
-## Supported browsers
-
-IE 11 and evergreen browsers
-
 ## Limitations
 
 This will cause reflows (layout thrashing): https://gist.github.com/paulirish/5d52fb081b3570c81e3a

src/detectWrappedElements.ts

 // [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172)
 function getTopPosition(el: Element) {
   const { top } = el.getBoundingClientRect();
-  const { marginTop } = window.getComputedStyle(el);
+  const { marginTop } = getComputedStyle(el);
   return top - parseInt(marginTop, 10);
@@ -55,6 +55,3 @@ }
 
-  // IE does not support toggle() second argument
-  // https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility
-  //rootEl.classList.toggle(hasChildWrappedClassName, containsChildNextIsWrapped);
-  rootElement.classList[containsChildNextIsWrapped ? 'add' : 'remove'](hasChildWrappedClassName);
+  rootElement.classList.toggle(hasChildWrappedClassName, containsChildNextIsWrapped);
 }

src/forceDetectWrappedElements.ts

 export function forceDetectWrappedElements() {
-  try {
-    // https://stackoverflow.com/q/1818474
-    window.dispatchEvent(new Event('resize'));
-  } catch {
-    // FIXME Event constructor is not supported by IE
-    // https://github.com/zloirock/core-js/issues/354
-    // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#polyfill
-    // https://github.com/lifaon74/events-polyfill/blob/bc989dc00fb90a42ae9c012c309d48710dec2589/event-constructor-polyfill.js#L11-L28
-    // https://github.com/kumarharsh/custom-event-polyfill/blob/v1.0.7/polyfill.js
-    // http://youmightnotneedjquery.com/#trigger_native
-    const event = document.createEvent('Event');
-    const bubbles = false; // Default is false for new Event()
-    const cancelable = false; // Default is false for new Event()
-    event.initEvent('resize', bubbles, cancelable);
-    window.dispatchEvent(event);
-  }
+  // https://stackoverflow.com/q/1818474
+  dispatchEvent(new Event('resize'));
 }

src/useDetectWrappedElements.ts

@@ -1,2 +0,2 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
@@ -3,0 +3,0 @@ import { detectWrappedElements } from './detectWrappedElements';

No alert changes

Worsened metrics

Total package byte prevSize

31455

decreased by-8.69%

Lines of code

530

decreased by-13.26%

Number of lines in readme file

63

decreased by-10%

No dependency changes