react-loading-skeleton - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

dist/index.js

@@ -8,10 +8,6 @@ 'use client';
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 /**
  * @internal
  */
-const SkeletonThemeContext = React__default["default"].createContext({});
+const SkeletonThemeContext = React.createContext({});
 
@@ -45,3 +41,3 @@ /* eslint-disable react/no-array-index-key */
     var _a, _b, _c;
-    const contextStyleOptions = React__default["default"].useContext(SkeletonThemeContext);
+    const contextStyleOptions = React.useContext(SkeletonThemeContext);
     const propsStyleOptions = { ...originalPropsStyleOptions };
@@ -88,3 +84,3 @@ // DO NOT overwrite style options from the context if `propsStyleOptions`
         }
-        const skeletonSpan = (React__default["default"].createElement("span", { className: className, style: thisStyle, key: i }, "\u200C"));
+        const skeletonSpan = (React.createElement("span", { className: className, style: thisStyle, key: i }, "\u200C"));
         if (inline) {
@@ -96,9 +92,9 @@ elements.push(skeletonSpan);
             // `width` is specified
-            elements.push(React__default["default"].createElement(React__default["default"].Fragment, { key: i },
+            elements.push(React.createElement(React.Fragment, { key: i },
                 skeletonSpan,
-                React__default["default"].createElement("br", null)));
+                React.createElement("br", null)));
         }
     }
-    return (React__default["default"].createElement("span", { className: containerClassName, "data-testid": containerTestId, "aria-live": "polite", "aria-busy": (_c = styleOptions.enableAnimation) !== null && _c !== void 0 ? _c : defaultEnableAnimation }, Wrapper
-        ? elements.map((el, i) => React__default["default"].createElement(Wrapper, { key: i }, el))
+    return (React.createElement("span", { className: containerClassName, "data-testid": containerTestId, "aria-live": "polite", "aria-busy": (_c = styleOptions.enableAnimation) !== null && _c !== void 0 ? _c : defaultEnableAnimation }, Wrapper
+        ? elements.map((el, i) => React.createElement(Wrapper, { key: i }, el))
         : elements));
@@ -108,6 +104,6 @@ }
 function SkeletonTheme({ children, ...styleOptions }) {
-    return (React__default["default"].createElement(SkeletonThemeContext.Provider, { value: styleOptions }, children));
+    return (React.createElement(SkeletonThemeContext.Provider, { value: styleOptions }, children));
 }
 
 exports.SkeletonTheme = SkeletonTheme;
-exports["default"] = Skeleton;
+exports.default = Skeleton;

dist/SkeletonTheme.d.ts

 import { ReactElement, PropsWithChildren } from 'react';
 import { SkeletonStyleProps } from './SkeletonStyleProps';
-export declare type SkeletonThemeProps = PropsWithChildren<SkeletonStyleProps>;
+export type SkeletonThemeProps = PropsWithChildren<SkeletonStyleProps>;
 export declare function SkeletonTheme({ children, ...styleOptions }: SkeletonThemeProps): ReactElement;

package.json

 {
-    "name": "react-loading-skeleton",
-    "version": "3.1.1",
-    "description": "Make beautiful, animated loading skeletons that automatically adapt to your app.",
-    "keywords": [
-        "react",
-        "loading",
-        "skeleton",
-        "progress",
-        "spinner"
+  "name": "react-loading-skeleton",
+  "version": "3.2.0",
+  "description": "Make beautiful, animated loading skeletons that automatically adapt to your app.",
+  "keywords": [
+    "react",
+    "loading",
+    "skeleton",
+    "progress",
+    "spinner"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dvtng/react-loading-skeleton.git"
+  },
+  "license": "MIT",
+  "author": "David Tang",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "yarn clean && tsc && rollup -c .config/rollup.config.mjs",
+    "clean": "rimraf dist",
+    "lint": "eslint .",
+    "lint-staged": "lint-staged --no-stash",
+    "prepack": "yarn run build",
+    "prettier": "prettier .",
+    "setup": "husky install",
+    "storybook": "start-storybook -p 8080",
+    "test": "jest --config .config/jest.config.cjs"
+  },
+  "lint-staged": {
+    "*.ts?(x)": [
+      "eslint --max-warnings 0 --fix",
+      "prettier --write"
     ],
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/dvtng/react-loading-skeleton.git"
-    },
-    "license": "MIT",
-    "author": "David Tang",
-    "sideEffects": [
-        "**/*.css"
-    ],
-    "main": "dist/index.js",
-    "module": "dist/index.mjs",
-    "types": "dist/index.d.ts",
-    "files": [
-        "dist/"
-    ],
-    "scripts": {
-        "build": "yarn clean && tsc && rollup -c .config/rollup.config.js",
-        "clean": "rimraf dist",
-        "lint": "eslint .",
-        "lint-staged": "lint-staged --no-stash",
-        "prepack": "yarn run build",
-        "prettier": "prettier .",
-        "setup": "husky install",
-        "storybook": "start-storybook -p 8080",
-        "test": "jest --config .config/jest.config.cjs"
-    },
-    "lint-staged": {
-        "*.ts?(x)": [
-            "eslint --max-warnings 0 --fix",
-            "prettier --write"
-        ],
-        "*.{md,js,cjs,yml,json}": "prettier --write"
-    },
-    "browserslist": [
-        "maintained node versions",
-        "> 0.25%",
-        "not dead",
-        "not IE 11"
-    ],
-    "devDependencies": {
-        "@babel/core": "^7.17.9",
-        "@rollup/plugin-typescript": "^8.3.1",
-        "@storybook/addon-essentials": "^6.4.21",
-        "@storybook/addon-links": "^6.4.21",
-        "@storybook/react": "^6.4.21",
-        "@swc/core": "^1.2.165",
-        "@swc/jest": "^0.2.20",
-        "@testing-library/jest-dom": "^5.16.4",
-        "@testing-library/react": "^13.0.0",
-        "@types/react": "^18.0.1",
-        "@types/react-dom": "^18.0.0",
-        "@typescript-eslint/eslint-plugin": "^5.18.0",
-        "@typescript-eslint/parser": "^5.18.0",
-        "babel-loader": "^8.2.4",
-        "eslint": "^8.13.0",
-        "eslint-config-airbnb": "^19.0.4",
-        "eslint-config-airbnb-typescript": "^17.0.0",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jest": "^26.1.4",
-        "eslint-plugin-jest-dom": "^4.0.1",
-        "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-react": "^7.29.4",
-        "eslint-plugin-react-hooks": "^4.4.0",
-        "eslint-plugin-testing-library": "^5.2.1",
-        "husky": "^7.0.4",
-        "jest": "^27.5.1",
-        "lint-staged": "^12.3.7",
-        "prettier": "^2.6.2",
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0",
-        "rimraf": "^3.0.2",
-        "rollup": "^2.70.1",
-        "rollup-plugin-copy": "^3.4.0",
-        "tslib": "^2.3.1",
-        "typescript": "^4.6.3",
-        "webpack": "^5.72.0"
-    },
-    "peerDependencies": {
-        "react": ">=16.8.0"
-    },
-    "packageManager": "yarn@3.2.0"
+    "*.{md,js,cjs,yml,json}": "prettier --write"
+  },
+  "browserslist": [
+    "> 0.25%",
+    "not dead",
+    "not IE 11"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.21.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^6.5.16",
+    "@swc/core": "^1.3.37",
+    "@swc/jest": "^0.2.24",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.2",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "@typescript-eslint/parser": "^5.54.0",
+    "babel-loader": "^9.1.2",
+    "eslint": "^8.35.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jest-dom": "^4.0.3",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^5.10.2",
+    "husky": "^8.0.3",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
+    "lint-staged": "^13.1.2",
+    "prettier": "^2.8.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rimraf": "^4.1.2",
+    "rollup": "^3.17.3",
+    "rollup-plugin-copy": "^3.4.0",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5",
+    "webpack": "^5.75.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "packageManager": "yarn@3.4.1"
 }

README.md

@@ -52,8 +52,8 @@ <div align="center">
 function BlogPost(props) {
-    return (
-        <div>
-            <h1>{props.title || <Skeleton />}</h1>
-            {props.body || <Skeleton count={10} />}
-        </div>
-    )
+  return (
+    <div>
+      <h1>{props.title || <Skeleton />}</h1>
+      {props.body || <Skeleton count={10} />}
+    </div>
+  );
 }
@@ -86,11 +86,11 @@ ```
 ```tsx
-import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 
 return (
-    <SkeletonTheme baseColor="#202020" highlightColor="#444">
-        <p>
-            <Skeleton count={3} />
-        </p>
-    </SkeletonTheme>
-)
+  <SkeletonTheme baseColor="#202020" highlightColor="#444">
+    <p>
+      <Skeleton count={3} />
+    </p>
+  </SkeletonTheme>
+);
 ```
@@ -251,27 +251,27 @@
 function Box({ children }: PropsWithChildren<unknown>) {
-    return (
-        <div
-            style={{
-                border: '1px solid #ccc',
-                display: 'block',
-                lineHeight: 2,
-                padding: '1rem',
-                marginBottom: '0.5rem',
-                width: 100,
-            }}
-        >
-            {children}
-        </div>
-    )
+  return (
+    <div
+      style={{
+        border: '1px solid #ccc',
+        display: 'block',
+        lineHeight: 2,
+        padding: '1rem',
+        marginBottom: '0.5rem',
+        width: 100,
+      }}
+    >
+      {children}
+    </div>
+  );
 }
 
 // Method 1: Use the wrapper prop
-const wrapped1 = <Skeleton wrapper={Box} count={5} />
+const wrapped1 = <Skeleton wrapper={Box} count={5} />;
 
 // Method 2: Do it "the normal way"
 const wrapped2 = (
-    <Box>
-        <Skeleton />
-    </Box>
-)
+  <Box>
+    <Skeleton />
+  </Box>
+);
 ```
@@ -286,3 +286,3 @@
 <div>
-    <Skeleton height={30} />
+  <Skeleton height={30} />
 </div>
@@ -289,0 +289,0 @@ ```

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

Lines of code

278

increased by1.09%

Worsened metrics

Total package byte prevSize

24554

decreased by-2.64%

Dev dependency count

40

increased by8.11%

No dependency changes