react-alp-loading-bar 3.1.0 → 4.0.0

package/.eslintrc.json

@@ -1,5 +1,5 @@
 {
   "root": true,
-  "extends": ["@pob/eslint-config/root", "@pob/eslint-config-node"],
+  "extends": ["@pob/eslint-config/root-module"],
   "ignorePatterns": ["*.d.ts", "/dist"]
 }

package/CHANGELOG.md

@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0](https://github.com/christophehurpeau/alp/compare/react-alp-loading-bar@3.1.3...react-alp-loading-bar@4.0.0) (2022-01-02)
+
+
+### Bug Fixes
+
+* update nightingale and fix tests ([3691716](https://github.com/christophehurpeau/alp/commit/36917162d0ee3dccc07384caf018b7760d98b744))
+
+
+### Features
+
+* use ESM and drop node 12 ([f45054e](https://github.com/christophehurpeau/alp/commit/f45054e931eea88451d183722797eba057511236))
+
+
+### BREAKING CHANGES
+
+* requires node 14 and ESM
+
+
+
+
+
+## [3.1.3](https://github.com/christophehurpeau/alp/compare/react-alp-loading-bar@3.1.2...react-alp-loading-bar@3.1.3) (2021-04-10)
+
+**Note:** Version bump only for package react-alp-loading-bar
+
+
+
+
+
+## [3.1.2](https://github.com/christophehurpeau/alp/compare/react-alp-loading-bar@3.1.1...react-alp-loading-bar@3.1.2) (2021-03-28)
+
+**Note:** Version bump only for package react-alp-loading-bar
+
+
+
+
+
+## [3.1.1](https://github.com/christophehurpeau/alp/compare/react-alp-loading-bar@3.1.0...react-alp-loading-bar@3.1.1) (2021-03-28)
+
+**Note:** Version bump only for package react-alp-loading-bar
+
+
+
+
+
 # [3.1.0](https://github.com/christophehurpeau/alp/compare/react-alp-loading-bar@3.0.2...react-alp-loading-bar@3.1.0) (2021-03-21)
 
 

package/dist/index-browser.es.js

@@ -96,10 +96,10 @@ var LoadingBar = /*#__PURE__*/function (_PureComponent) {
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
-    clearTimeout(this.fadeOffTimeout);
-    clearTimeout(this.resetTimeout);
-    clearTimeout(this.first20Timeout);
-    clearInterval(this.progressTimer);
+    if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);
+    if (this.resetTimeout) clearTimeout(this.resetTimeout);
+    if (this.first20Timeout) clearTimeout(this.first20Timeout);
+    if (this.progressTimer) clearInterval(this.progressTimer);
   };
 
   _proto.getWebsocket = function getWebsocket() {
@@ -110,8 +110,8 @@ var LoadingBar = /*#__PURE__*/function (_PureComponent) {
   _proto.showBar = function showBar() {
     var _this3 = this;
 
-    clearTimeout(this.fadeOffTimeout);
-    clearTimeout(this.resetTimeout);
+    if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);
+    if (this.resetTimeout) clearTimeout(this.resetTimeout);
     this.first20Timeout = setTimeout(function () {
       _this3.setState({
         progress: 20
@@ -130,8 +130,8 @@ var LoadingBar = /*#__PURE__*/function (_PureComponent) {
   _proto.hideBar = function hideBar() {
     var _this4 = this;
 
-    clearTimeout(this.first20Timeout);
-    clearInterval(this.progressTimer);
+    if (this.first20Timeout) clearTimeout(this.first20Timeout);
+    if (this.progressTimer) clearInterval(this.progressTimer);
     this.fadeOffTimeout = setTimeout(function () {
       _this4.setState({
         progress: 100
@@ -167,5 +167,5 @@ var LoadingBar = /*#__PURE__*/function (_PureComponent) {
 
 LoadingBar.contextType = ReactAlpContext;
 
-export default LoadingBar;
+export { LoadingBar as default };
 //# sourceMappingURL=index-browser.es.js.map

package/dist/index-browser.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index-browser.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { PureComponent } from 'react';\nimport ReactAlpContext from 'react-alp-context';\n\n/*\nExample with antd:\nimport { Progress } from 'antd';\n\nconst LoadingBarComponent = ({ progress }) => (\n  <Progress\n    type=\"line\"\n    status=\"active\"\n    percent={progress}\n    showInfo={false}\n  />\n);\n*/\n\n/* number between 0 and 1 */\nconst random = (): number => Math.ceil(Math.random() * 100) / 100;\n\n/**\n * around:\n * at 100ms 20%\n * at 1s 40%\n * at 2s 60%\n * at 3s 80%\n */\nconst calculatePercent = (percent: number): number => {\n  if (percent < 60) return percent + random() * 10 + 5;\n  if (percent < 70) return percent + random() * 10 + 3;\n  else if (percent < 80) return percent + random() + 5;\n  else if (percent < 90) return percent + random() + 1;\n  else if (percent < 95) return percent + 0.1;\n  else return percent;\n};\n\ninterface LoadingBarProps {\n  LoadingBarComponent: React.ComponentType<{ progress: number }>;\n}\n\ninterface LoadingBarState {\n  loading: boolean;\n  hidden: boolean;\n  progress: number;\n}\n\ninterface WebsocketInterface {\n  isConnected: () => boolean;\n  on: (event: 'connect' | 'disconnect', callback: () => unknown) => void;\n}\n\nexport default class LoadingBar extends PureComponent<\n  LoadingBarProps,\n  LoadingBarState\n> {\n  static contextType = ReactAlpContext;\n\n  context!: React.ContextType<typeof ReactAlpContext>;\n\n  state = {\n    loading: true,\n    hidden: true,\n    progress: 1,\n  };\n\n  fadeOffTimeout?: any;\n\n  resetTimeout?: any;\n\n  first20Timeout?: any;\n\n  progressTimer?: any;\n\n  componentDidMount(): void {\n    const websocket = this.getWebsocket();\n    if (websocket.isConnected()) {\n      this.setState((prevState) => ({\n        loading: false,\n        progress: 100,\n        hidden: prevState.hidden || prevState.progress === 100,\n      }));\n    }\n    websocket.on('connect', () => {\n      this.setState({ loading: false });\n    });\n    websocket.on('disconnect', () => {\n      this.setState({ loading: true, progress: 1, hidden: false });\n    });\n  }\n\n  componentDidUpdate(\n    prevProps: LoadingBarProps,\n    prevState: LoadingBarState,\n  ): void {\n    if (this.state.loading !== prevState.loading) {\n      if (this.state.loading) {\n        this.showBar();\n      } else {\n        this.hideBar();\n      }\n    }\n  }\n\n  componentWillUnmount(): void {\n    clearTimeout(this.fadeOffTimeout);\n    clearTimeout(this.resetTimeout);\n    clearTimeout(this.first20Timeout);\n    clearInterval(this.progressTimer);\n  }\n\n  getWebsocket(): WebsocketInterface {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return\n    return this.context.app.websocket;\n  }\n\n  private showBar(): void {\n    clearTimeout(this.fadeOffTimeout);\n    clearTimeout(this.resetTimeout);\n\n    this.first20Timeout = setTimeout(() => {\n      this.setState({ progress: 20 });\n    }, 100);\n\n    this.progressTimer = setInterval(() => {\n      this.setState((prevState) => {\n        const newValue = calculatePercent(prevState.progress);\n        return { progress: newValue };\n      });\n    }, 500);\n  }\n\n  private hideBar(): void {\n    clearTimeout(this.first20Timeout);\n    clearInterval(this.progressTimer);\n\n    this.fadeOffTimeout = setTimeout(() => {\n      this.setState({\n        progress: 100,\n      });\n    }, 500);\n\n    this.resetTimeout = setTimeout(() => {\n      this.setState({\n        hidden: true,\n        progress: 1,\n      });\n    }, 1000);\n  }\n\n  render(): ReactElement {\n    const LoadingBarComponent = this.props.LoadingBarComponent;\n\n    return (\n      <div\n        hidden={this.state.hidden}\n        style={{\n          position: 'fixed',\n          top: 0,\n          left: 0,\n          right: 0,\n          zIndex: 4,\n          pointerEvents: 'none',\n        }}\n      >\n        <LoadingBarComponent progress={this.state.progress} />\n      </div>\n    );\n  }\n}\n"],"names":["random","Math","ceil","calculatePercent","percent","LoadingBar","state","loading","hidden","progress","componentDidMount","websocket","getWebsocket","isConnected","setState","prevState","on","componentDidUpdate","prevProps","showBar","hideBar","componentWillUnmount","clearTimeout","fadeOffTimeout","resetTimeout","first20Timeout","clearInterval","progressTimer","context","app","setTimeout","setInterval","newValue","render","LoadingBarComponent","props","position","top","left","right","zIndex","pointerEvents","PureComponent","contextType","ReactAlpContext"],"mappings":"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"}
+{"version":3,"file":"index-browser.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { PureComponent } from 'react';\nimport ReactAlpContext from 'react-alp-context';\n\n/*\nExample with antd:\nimport { Progress } from 'antd';\n\nconst LoadingBarComponent = ({ progress }) => (\n  <Progress\n    type=\"line\"\n    status=\"active\"\n    percent={progress}\n    showInfo={false}\n  />\n);\n*/\n\n/* number between 0 and 1 */\nconst random = (): number => Math.ceil(Math.random() * 100) / 100;\n\n/**\n * around:\n * at 100ms 20%\n * at 1s 40%\n * at 2s 60%\n * at 3s 80%\n */\nconst calculatePercent = (percent: number): number => {\n  if (percent < 60) return percent + random() * 10 + 5;\n  if (percent < 70) return percent + random() * 10 + 3;\n  else if (percent < 80) return percent + random() + 5;\n  else if (percent < 90) return percent + random() + 1;\n  else if (percent < 95) return percent + 0.1;\n  else return percent;\n};\n\ninterface LoadingBarProps {\n  LoadingBarComponent: React.ComponentType<{ progress: number }>;\n}\n\ninterface LoadingBarState {\n  loading: boolean;\n  hidden: boolean;\n  progress: number;\n}\n\ninterface WebsocketInterface {\n  isConnected: () => boolean;\n  on: (event: 'connect' | 'disconnect', callback: () => unknown) => void;\n}\n\nexport default class LoadingBar extends PureComponent<\n  LoadingBarProps,\n  LoadingBarState\n> {\n  static contextType = ReactAlpContext;\n\n  state = {\n    loading: true,\n    hidden: true,\n    progress: 1,\n  };\n\n  fadeOffTimeout?: ReturnType<typeof setTimeout>;\n\n  resetTimeout?: ReturnType<typeof setTimeout>;\n\n  first20Timeout?: ReturnType<typeof setTimeout>;\n\n  progressTimer?: ReturnType<typeof setTimeout>;\n\n  componentDidMount(): void {\n    const websocket = this.getWebsocket();\n    if (websocket.isConnected()) {\n      this.setState((prevState) => ({\n        loading: false,\n        progress: 100,\n        hidden: prevState.hidden || prevState.progress === 100,\n      }));\n    }\n    websocket.on('connect', () => {\n      this.setState({ loading: false });\n    });\n    websocket.on('disconnect', () => {\n      this.setState({ loading: true, progress: 1, hidden: false });\n    });\n  }\n\n  componentDidUpdate(\n    prevProps: LoadingBarProps,\n    prevState: LoadingBarState,\n  ): void {\n    if (this.state.loading !== prevState.loading) {\n      if (this.state.loading) {\n        this.showBar();\n      } else {\n        this.hideBar();\n      }\n    }\n  }\n\n  componentWillUnmount(): void {\n    if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n    if (this.resetTimeout) clearTimeout(this.resetTimeout);\n    if (this.first20Timeout) clearTimeout(this.first20Timeout);\n    if (this.progressTimer) clearInterval(this.progressTimer);\n  }\n\n  getWebsocket(): WebsocketInterface {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return\n    return this.context.app.websocket;\n  }\n\n  private showBar(): void {\n    if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n    if (this.resetTimeout) clearTimeout(this.resetTimeout);\n\n    this.first20Timeout = setTimeout(() => {\n      this.setState({ progress: 20 });\n    }, 100);\n\n    this.progressTimer = setInterval(() => {\n      this.setState((prevState) => {\n        const newValue = calculatePercent(prevState.progress);\n        return { progress: newValue };\n      });\n    }, 500);\n  }\n\n  private hideBar(): void {\n    if (this.first20Timeout) clearTimeout(this.first20Timeout);\n    if (this.progressTimer) clearInterval(this.progressTimer);\n\n    this.fadeOffTimeout = setTimeout(() => {\n      this.setState({\n        progress: 100,\n      });\n    }, 500);\n\n    this.resetTimeout = setTimeout(() => {\n      this.setState({\n        hidden: true,\n        progress: 1,\n      });\n    }, 1000);\n  }\n\n  render(): ReactElement {\n    const LoadingBarComponent = this.props.LoadingBarComponent;\n\n    return (\n      <div\n        hidden={this.state.hidden}\n        style={{\n          position: 'fixed',\n          top: 0,\n          left: 0,\n          right: 0,\n          zIndex: 4,\n          pointerEvents: 'none',\n        }}\n      >\n        <LoadingBarComponent progress={this.state.progress} />\n      </div>\n    );\n  }\n}\n"],"names":["random","Math","ceil","calculatePercent","percent","LoadingBar","state","loading","hidden","progress","componentDidMount","websocket","getWebsocket","isConnected","setState","prevState","on","componentDidUpdate","prevProps","showBar","hideBar","componentWillUnmount","fadeOffTimeout","clearTimeout","resetTimeout","first20Timeout","progressTimer","clearInterval","context","app","setTimeout","setInterval","newValue","render","LoadingBarComponent","props","position","top","left","right","zIndex","pointerEvents","PureComponent","contextType","ReactAlpContext"],"mappings":"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"}

package/dist/index-browsermodern.es.js

@@ -33,14 +33,12 @@ const calculatePercent = percent => {
 };
 
 class LoadingBar extends PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      loading: true,
-      hidden: true,
-      progress: 1
-    };
-  }
+  static contextType = ReactAlpContext;
+  state = {
+    loading: true,
+    hidden: true,
+    progress: 1
+  };
 
   componentDidMount() {
     const websocket = this.getWebsocket();
@@ -78,10 +76,10 @@ class LoadingBar extends PureComponent {
   }
 
   componentWillUnmount() {
-    clearTimeout(this.fadeOffTimeout);
-    clearTimeout(this.resetTimeout);
-    clearTimeout(this.first20Timeout);
-    clearInterval(this.progressTimer);
+    if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);
+    if (this.resetTimeout) clearTimeout(this.resetTimeout);
+    if (this.first20Timeout) clearTimeout(this.first20Timeout);
+    if (this.progressTimer) clearInterval(this.progressTimer);
   }
 
   getWebsocket() {
@@ -90,8 +88,8 @@ class LoadingBar extends PureComponent {
   }
 
   showBar() {
-    clearTimeout(this.fadeOffTimeout);
-    clearTimeout(this.resetTimeout);
+    if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);
+    if (this.resetTimeout) clearTimeout(this.resetTimeout);
     this.first20Timeout = setTimeout(() => {
       this.setState({
         progress: 20
@@ -108,8 +106,8 @@ class LoadingBar extends PureComponent {
   }
 
   hideBar() {
-    clearTimeout(this.first20Timeout);
-    clearInterval(this.progressTimer);
+    if (this.first20Timeout) clearTimeout(this.first20Timeout);
+    if (this.progressTimer) clearInterval(this.progressTimer);
     this.fadeOffTimeout = setTimeout(() => {
       this.setState({
         progress: 100
@@ -141,7 +139,6 @@ class LoadingBar extends PureComponent {
   }
 
 }
-LoadingBar.contextType = ReactAlpContext;
 
-export default LoadingBar;
+export { LoadingBar as default };
 //# sourceMappingURL=index-browsermodern.es.js.map

package/dist/index-browsermodern.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index-browsermodern.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { PureComponent } from 'react';\nimport ReactAlpContext from 'react-alp-context';\n\n/*\nExample with antd:\nimport { Progress } from 'antd';\n\nconst LoadingBarComponent = ({ progress }) => (\n  <Progress\n    type=\"line\"\n    status=\"active\"\n    percent={progress}\n    showInfo={false}\n  />\n);\n*/\n\n/* number between 0 and 1 */\nconst random = (): number => Math.ceil(Math.random() * 100) / 100;\n\n/**\n * around:\n * at 100ms 20%\n * at 1s 40%\n * at 2s 60%\n * at 3s 80%\n */\nconst calculatePercent = (percent: number): number => {\n  if (percent < 60) return percent + random() * 10 + 5;\n  if (percent < 70) return percent + random() * 10 + 3;\n  else if (percent < 80) return percent + random() + 5;\n  else if (percent < 90) return percent + random() + 1;\n  else if (percent < 95) return percent + 0.1;\n  else return percent;\n};\n\ninterface LoadingBarProps {\n  LoadingBarComponent: React.ComponentType<{ progress: number }>;\n}\n\ninterface LoadingBarState {\n  loading: boolean;\n  hidden: boolean;\n  progress: number;\n}\n\ninterface WebsocketInterface {\n  isConnected: () => boolean;\n  on: (event: 'connect' | 'disconnect', callback: () => unknown) => void;\n}\n\nexport default class LoadingBar extends PureComponent<\n  LoadingBarProps,\n  LoadingBarState\n> {\n  static contextType = ReactAlpContext;\n\n  context!: React.ContextType<typeof ReactAlpContext>;\n\n  state = {\n    loading: true,\n    hidden: true,\n    progress: 1,\n  };\n\n  fadeOffTimeout?: any;\n\n  resetTimeout?: any;\n\n  first20Timeout?: any;\n\n  progressTimer?: any;\n\n  componentDidMount(): void {\n    const websocket = this.getWebsocket();\n    if (websocket.isConnected()) {\n      this.setState((prevState) => ({\n        loading: false,\n        progress: 100,\n        hidden: prevState.hidden || prevState.progress === 100,\n      }));\n    }\n    websocket.on('connect', () => {\n      this.setState({ loading: false });\n    });\n    websocket.on('disconnect', () => {\n      this.setState({ loading: true, progress: 1, hidden: false });\n    });\n  }\n\n  componentDidUpdate(\n    prevProps: LoadingBarProps,\n    prevState: LoadingBarState,\n  ): void {\n    if (this.state.loading !== prevState.loading) {\n      if (this.state.loading) {\n        this.showBar();\n      } else {\n        this.hideBar();\n      }\n    }\n  }\n\n  componentWillUnmount(): void {\n    clearTimeout(this.fadeOffTimeout);\n    clearTimeout(this.resetTimeout);\n    clearTimeout(this.first20Timeout);\n    clearInterval(this.progressTimer);\n  }\n\n  getWebsocket(): WebsocketInterface {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return\n    return this.context.app.websocket;\n  }\n\n  private showBar(): void {\n    clearTimeout(this.fadeOffTimeout);\n    clearTimeout(this.resetTimeout);\n\n    this.first20Timeout = setTimeout(() => {\n      this.setState({ progress: 20 });\n    }, 100);\n\n    this.progressTimer = setInterval(() => {\n      this.setState((prevState) => {\n        const newValue = calculatePercent(prevState.progress);\n        return { progress: newValue };\n      });\n    }, 500);\n  }\n\n  private hideBar(): void {\n    clearTimeout(this.first20Timeout);\n    clearInterval(this.progressTimer);\n\n    this.fadeOffTimeout = setTimeout(() => {\n      this.setState({\n        progress: 100,\n      });\n    }, 500);\n\n    this.resetTimeout = setTimeout(() => {\n      this.setState({\n        hidden: true,\n        progress: 1,\n      });\n    }, 1000);\n  }\n\n  render(): ReactElement {\n    const LoadingBarComponent = this.props.LoadingBarComponent;\n\n    return (\n      <div\n        hidden={this.state.hidden}\n        style={{\n          position: 'fixed',\n          top: 0,\n          left: 0,\n          right: 0,\n          zIndex: 4,\n          pointerEvents: 'none',\n        }}\n      >\n        <LoadingBarComponent progress={this.state.progress} />\n      </div>\n    );\n  }\n}\n"],"names":["random","Math","ceil","calculatePercent","percent","LoadingBar","PureComponent","state","loading","hidden","progress","componentDidMount","websocket","getWebsocket","isConnected","setState","prevState","on","componentDidUpdate","prevProps","showBar","hideBar","componentWillUnmount","clearTimeout","fadeOffTimeout","resetTimeout","first20Timeout","clearInterval","progressTimer","context","app","setTimeout","setInterval","newValue","render","LoadingBarComponent","props","position","top","left","right","zIndex","pointerEvents","contextType","ReactAlpContext"],"mappings":"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"}
+{"version":3,"file":"index-browsermodern.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { PureComponent } from 'react';\nimport ReactAlpContext from 'react-alp-context';\n\n/*\nExample with antd:\nimport { Progress } from 'antd';\n\nconst LoadingBarComponent = ({ progress }) => (\n  <Progress\n    type=\"line\"\n    status=\"active\"\n    percent={progress}\n    showInfo={false}\n  />\n);\n*/\n\n/* number between 0 and 1 */\nconst random = (): number => Math.ceil(Math.random() * 100) / 100;\n\n/**\n * around:\n * at 100ms 20%\n * at 1s 40%\n * at 2s 60%\n * at 3s 80%\n */\nconst calculatePercent = (percent: number): number => {\n  if (percent < 60) return percent + random() * 10 + 5;\n  if (percent < 70) return percent + random() * 10 + 3;\n  else if (percent < 80) return percent + random() + 5;\n  else if (percent < 90) return percent + random() + 1;\n  else if (percent < 95) return percent + 0.1;\n  else return percent;\n};\n\ninterface LoadingBarProps {\n  LoadingBarComponent: React.ComponentType<{ progress: number }>;\n}\n\ninterface LoadingBarState {\n  loading: boolean;\n  hidden: boolean;\n  progress: number;\n}\n\ninterface WebsocketInterface {\n  isConnected: () => boolean;\n  on: (event: 'connect' | 'disconnect', callback: () => unknown) => void;\n}\n\nexport default class LoadingBar extends PureComponent<\n  LoadingBarProps,\n  LoadingBarState\n> {\n  static contextType = ReactAlpContext;\n\n  state = {\n    loading: true,\n    hidden: true,\n    progress: 1,\n  };\n\n  fadeOffTimeout?: ReturnType<typeof setTimeout>;\n\n  resetTimeout?: ReturnType<typeof setTimeout>;\n\n  first20Timeout?: ReturnType<typeof setTimeout>;\n\n  progressTimer?: ReturnType<typeof setTimeout>;\n\n  componentDidMount(): void {\n    const websocket = this.getWebsocket();\n    if (websocket.isConnected()) {\n      this.setState((prevState) => ({\n        loading: false,\n        progress: 100,\n        hidden: prevState.hidden || prevState.progress === 100,\n      }));\n    }\n    websocket.on('connect', () => {\n      this.setState({ loading: false });\n    });\n    websocket.on('disconnect', () => {\n      this.setState({ loading: true, progress: 1, hidden: false });\n    });\n  }\n\n  componentDidUpdate(\n    prevProps: LoadingBarProps,\n    prevState: LoadingBarState,\n  ): void {\n    if (this.state.loading !== prevState.loading) {\n      if (this.state.loading) {\n        this.showBar();\n      } else {\n        this.hideBar();\n      }\n    }\n  }\n\n  componentWillUnmount(): void {\n    if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n    if (this.resetTimeout) clearTimeout(this.resetTimeout);\n    if (this.first20Timeout) clearTimeout(this.first20Timeout);\n    if (this.progressTimer) clearInterval(this.progressTimer);\n  }\n\n  getWebsocket(): WebsocketInterface {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return\n    return this.context.app.websocket;\n  }\n\n  private showBar(): void {\n    if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n    if (this.resetTimeout) clearTimeout(this.resetTimeout);\n\n    this.first20Timeout = setTimeout(() => {\n      this.setState({ progress: 20 });\n    }, 100);\n\n    this.progressTimer = setInterval(() => {\n      this.setState((prevState) => {\n        const newValue = calculatePercent(prevState.progress);\n        return { progress: newValue };\n      });\n    }, 500);\n  }\n\n  private hideBar(): void {\n    if (this.first20Timeout) clearTimeout(this.first20Timeout);\n    if (this.progressTimer) clearInterval(this.progressTimer);\n\n    this.fadeOffTimeout = setTimeout(() => {\n      this.setState({\n        progress: 100,\n      });\n    }, 500);\n\n    this.resetTimeout = setTimeout(() => {\n      this.setState({\n        hidden: true,\n        progress: 1,\n      });\n    }, 1000);\n  }\n\n  render(): ReactElement {\n    const LoadingBarComponent = this.props.LoadingBarComponent;\n\n    return (\n      <div\n        hidden={this.state.hidden}\n        style={{\n          position: 'fixed',\n          top: 0,\n          left: 0,\n          right: 0,\n          zIndex: 4,\n          pointerEvents: 'none',\n        }}\n      >\n        <LoadingBarComponent progress={this.state.progress} />\n      </div>\n    );\n  }\n}\n"],"names":["random","Math","ceil","calculatePercent","percent","LoadingBar","PureComponent","contextType","ReactAlpContext","state","loading","hidden","progress","componentDidMount","websocket","getWebsocket","isConnected","setState","prevState","on","componentDidUpdate","prevProps","showBar","hideBar","componentWillUnmount","fadeOffTimeout","clearTimeout","resetTimeout","first20Timeout","progressTimer","clearInterval","context","app","setTimeout","setInterval","newValue","render","LoadingBarComponent","props","position","top","left","right","zIndex","pointerEvents"],"mappings":";;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AACA,MAAMA,MAAM,GAAG,MAAcC,IAAI,CAACC,IAAL,CAAUD,IAAI,CAACD,MAAL,KAAgB,GAA1B,IAAiC,GAA9D;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMG,gBAAgB,GAAIC,OAAD,IAA6B;AACpD,MAAIA,OAAO,GAAG,EAAd,EAAkB,OAAOA,OAAO,GAAGJ,MAAM,KAAK,EAArB,GAA0B,CAAjC;AAClB,MAAII,OAAO,GAAG,EAAd,EAAkB,OAAOA,OAAO,GAAGJ,MAAM,KAAK,EAArB,GAA0B,CAAjC,CAAlB,KACK,IAAII,OAAO,GAAG,EAAd,EAAkB,OAAOA,OAAO,GAAGJ,MAAM,EAAhB,GAAqB,CAA5B,CAAlB,KACA,IAAII,OAAO,GAAG,EAAd,EAAkB,OAAOA,OAAO,GAAGJ,MAAM,EAAhB,GAAqB,CAA5B,CAAlB,KACA,IAAII,OAAO,GAAG,EAAd,EAAkB,OAAOA,OAAO,GAAG,GAAjB,CAAlB,KACA,OAAOA,OAAP;AACN,CAPD;;AAwBe,MAAMC,UAAN,SAAyBC,aAAzB,CAGb;AACkB,SAAXC,WAAW,GAAGC,eAAH;AAElBC,EAAAA,KAAK,GAAG;AACNC,IAAAA,OAAO,EAAE,IADH;AAENC,IAAAA,MAAM,EAAE,IAFF;AAGNC,IAAAA,QAAQ,EAAE;AAHJ,GAAH;;AAcLC,EAAAA,iBAAiB,GAAS;AACxB,UAAMC,SAAS,GAAG,KAAKC,YAAL,EAAlB;;AACA,QAAID,SAAS,CAACE,WAAV,EAAJ,EAA6B;AAC3B,WAAKC,QAAL,CAAeC,SAAD,KAAgB;AAC5BR,QAAAA,OAAO,EAAE,KADmB;AAE5BE,QAAAA,QAAQ,EAAE,GAFkB;AAG5BD,QAAAA,MAAM,EAAEO,SAAS,CAACP,MAAV,IAAoBO,SAAS,CAACN,QAAV,KAAuB;AAHvB,OAAhB,CAAd;AAKD;;AACDE,IAAAA,SAAS,CAACK,EAAV,CAAa,SAAb,EAAwB,MAAM;AAC5B,WAAKF,QAAL,CAAc;AAAEP,QAAAA,OAAO,EAAE;AAAX,OAAd;AACD,KAFD;AAGAI,IAAAA,SAAS,CAACK,EAAV,CAAa,YAAb,EAA2B,MAAM;AAC/B,WAAKF,QAAL,CAAc;AAAEP,QAAAA,OAAO,EAAE,IAAX;AAAiBE,QAAAA,QAAQ,EAAE,CAA3B;AAA8BD,QAAAA,MAAM,EAAE;AAAtC,OAAd;AACD,KAFD;AAGD;;AAEDS,EAAAA,kBAAkB,CAChBC,SADgB,EAEhBH,SAFgB,EAGV;AACN,QAAI,KAAKT,KAAL,CAAWC,OAAX,KAAuBQ,SAAS,CAACR,OAArC,EAA8C;AAC5C,UAAI,KAAKD,KAAL,CAAWC,OAAf,EAAwB;AACtB,aAAKY,OAAL;AACD,OAFD,MAEO;AACL,aAAKC,OAAL;AACD;AACF;AACF;;AAEDC,EAAAA,oBAAoB,GAAS;AAC3B,QAAI,KAAKC,cAAT,EAAyBC,YAAY,CAAC,KAAKD,cAAN,CAAZ;AACzB,QAAI,KAAKE,YAAT,EAAuBD,YAAY,CAAC,KAAKC,YAAN,CAAZ;AACvB,QAAI,KAAKC,cAAT,EAAyBF,YAAY,CAAC,KAAKE,cAAN,CAAZ;AACzB,QAAI,KAAKC,aAAT,EAAwBC,aAAa,CAAC,KAAKD,aAAN,CAAb;AACzB;;AAEDd,EAAAA,YAAY,GAAuB;AACjC;AACA,WAAO,KAAKgB,OAAL,CAAaC,GAAb,CAAiBlB,SAAxB;AACD;;AAEOQ,EAAAA,OAAO,GAAS;AACtB,QAAI,KAAKG,cAAT,EAAyBC,YAAY,CAAC,KAAKD,cAAN,CAAZ;AACzB,QAAI,KAAKE,YAAT,EAAuBD,YAAY,CAAC,KAAKC,YAAN,CAAZ;AAEvB,SAAKC,cAAL,GAAsBK,UAAU,CAAC,MAAM;AACrC,WAAKhB,QAAL,CAAc;AAAEL,QAAAA,QAAQ,EAAE;AAAZ,OAAd;AACD,KAF+B,EAE7B,GAF6B,CAAhC;AAIA,SAAKiB,aAAL,GAAqBK,WAAW,CAAC,MAAM;AACrC,WAAKjB,QAAL,CAAeC,SAAD,IAAe;AAC3B,cAAMiB,QAAQ,GAAGhC,gBAAgB,CAACe,SAAS,CAACN,QAAX,CAAjC;AACA,eAAO;AAAEA,UAAAA,QAAQ,EAAEuB;AAAZ,SAAP;AACD,OAHD;AAID,KAL+B,EAK7B,GAL6B,CAAhC;AAMD;;AAEOZ,EAAAA,OAAO,GAAS;AACtB,QAAI,KAAKK,cAAT,EAAyBF,YAAY,CAAC,KAAKE,cAAN,CAAZ;AACzB,QAAI,KAAKC,aAAT,EAAwBC,aAAa,CAAC,KAAKD,aAAN,CAAb;AAExB,SAAKJ,cAAL,GAAsBQ,UAAU,CAAC,MAAM;AACrC,WAAKhB,QAAL,CAAc;AACZL,QAAAA,QAAQ,EAAE;AADE,OAAd;AAGD,KAJ+B,EAI7B,GAJ6B,CAAhC;AAMA,SAAKe,YAAL,GAAoBM,UAAU,CAAC,MAAM;AACnC,WAAKhB,QAAL,CAAc;AACZN,QAAAA,MAAM,EAAE,IADI;AAEZC,QAAAA,QAAQ,EAAE;AAFE,OAAd;AAID,KAL6B,EAK3B,IAL2B,CAA9B;AAMD;;AAEDwB,EAAAA,MAAM,GAAiB;AACrB,UAAMC,mBAAmB,GAAG,KAAKC,KAAL,CAAWD,mBAAvC;AAEA,wBACE;AACE,MAAA,MAAM,EAAE,KAAK5B,KAAL,CAAWE,MADrB;AAEE,MAAA,KAAK,EAAE;AACL4B,QAAAA,QAAQ,EAAE,OADL;AAELC,QAAAA,GAAG,EAAE,CAFA;AAGLC,QAAAA,IAAI,EAAE,CAHD;AAILC,QAAAA,KAAK,EAAE,CAJF;AAKLC,QAAAA,MAAM,EAAE,CALH;AAMLC,QAAAA,aAAa,EAAE;AANV;AAFT,oBAWE,oBAAC,mBAAD;AAAqB,MAAA,QAAQ,EAAE,KAAKnC,KAAL,CAAWG;AAA1C,MAXF,CADF;AAeD;;AA/GD;;;;"}

package/dist/{index-node12.mjs → index-node14.mjs}

@@ -33,14 +33,12 @@ const calculatePercent = percent => {
 };
 
 class LoadingBar extends PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      loading: true,
-      hidden: true,
-      progress: 1
-    };
-  }
+  static contextType = ReactAlpContext;
+  state = {
+    loading: true,
+    hidden: true,
+    progress: 1
+  };
 
   componentDidMount() {
     const websocket = this.getWebsocket();
@@ -78,10 +76,10 @@ class LoadingBar extends PureComponent {
   }
 
   componentWillUnmount() {
-    clearTimeout(this.fadeOffTimeout);
-    clearTimeout(this.resetTimeout);
-    clearTimeout(this.first20Timeout);
-    clearInterval(this.progressTimer);
+    if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);
+    if (this.resetTimeout) clearTimeout(this.resetTimeout);
+    if (this.first20Timeout) clearTimeout(this.first20Timeout);
+    if (this.progressTimer) clearInterval(this.progressTimer);
   }
 
   getWebsocket() {
@@ -90,8 +88,8 @@ class LoadingBar extends PureComponent {
   }
 
   showBar() {
-    clearTimeout(this.fadeOffTimeout);
-    clearTimeout(this.resetTimeout);
+    if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);
+    if (this.resetTimeout) clearTimeout(this.resetTimeout);
     this.first20Timeout = setTimeout(() => {
       this.setState({
         progress: 20
@@ -108,8 +106,8 @@ class LoadingBar extends PureComponent {
   }
 
   hideBar() {
-    clearTimeout(this.first20Timeout);
-    clearInterval(this.progressTimer);
+    if (this.first20Timeout) clearTimeout(this.first20Timeout);
+    if (this.progressTimer) clearInterval(this.progressTimer);
     this.fadeOffTimeout = setTimeout(() => {
       this.setState({
         progress: 100
@@ -141,7 +139,6 @@ class LoadingBar extends PureComponent {
   }
 
 }
-LoadingBar.contextType = ReactAlpContext;
 
-export default LoadingBar;
-//# sourceMappingURL=index-node12.mjs.map
+export { LoadingBar as default };
+//# sourceMappingURL=index-node14.mjs.map

package/dist/index-node14.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-node14.mjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { PureComponent } from 'react';\nimport ReactAlpContext from 'react-alp-context';\n\n/*\nExample with antd:\nimport { Progress } from 'antd';\n\nconst LoadingBarComponent = ({ progress }) => (\n  <Progress\n    type=\"line\"\n    status=\"active\"\n    percent={progress}\n    showInfo={false}\n  />\n);\n*/\n\n/* number between 0 and 1 */\nconst random = (): number => Math.ceil(Math.random() * 100) / 100;\n\n/**\n * around:\n * at 100ms 20%\n * at 1s 40%\n * at 2s 60%\n * at 3s 80%\n */\nconst calculatePercent = (percent: number): number => {\n  if (percent < 60) return percent + random() * 10 + 5;\n  if (percent < 70) return percent + random() * 10 + 3;\n  else if (percent < 80) return percent + random() + 5;\n  else if (percent < 90) return percent + random() + 1;\n  else if (percent < 95) return percent + 0.1;\n  else return percent;\n};\n\ninterface LoadingBarProps {\n  LoadingBarComponent: React.ComponentType<{ progress: number }>;\n}\n\ninterface LoadingBarState {\n  loading: boolean;\n  hidden: boolean;\n  progress: number;\n}\n\ninterface WebsocketInterface {\n  isConnected: () => boolean;\n  on: (event: 'connect' | 'disconnect', callback: () => unknown) => void;\n}\n\nexport default class LoadingBar extends PureComponent<\n  LoadingBarProps,\n  LoadingBarState\n> {\n  static contextType = ReactAlpContext;\n\n  state = {\n    loading: true,\n    hidden: true,\n    progress: 1,\n  };\n\n  fadeOffTimeout?: ReturnType<typeof setTimeout>;\n\n  resetTimeout?: ReturnType<typeof setTimeout>;\n\n  first20Timeout?: ReturnType<typeof setTimeout>;\n\n  progressTimer?: ReturnType<typeof setTimeout>;\n\n  componentDidMount(): void {\n    const websocket = this.getWebsocket();\n    if (websocket.isConnected()) {\n      this.setState((prevState) => ({\n        loading: false,\n        progress: 100,\n        hidden: prevState.hidden || prevState.progress === 100,\n      }));\n    }\n    websocket.on('connect', () => {\n      this.setState({ loading: false });\n    });\n    websocket.on('disconnect', () => {\n      this.setState({ loading: true, progress: 1, hidden: false });\n    });\n  }\n\n  componentDidUpdate(\n    prevProps: LoadingBarProps,\n    prevState: LoadingBarState,\n  ): void {\n    if (this.state.loading !== prevState.loading) {\n      if (this.state.loading) {\n        this.showBar();\n      } else {\n        this.hideBar();\n      }\n    }\n  }\n\n  componentWillUnmount(): void {\n    if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n    if (this.resetTimeout) clearTimeout(this.resetTimeout);\n    if (this.first20Timeout) clearTimeout(this.first20Timeout);\n    if (this.progressTimer) clearInterval(this.progressTimer);\n  }\n\n  getWebsocket(): WebsocketInterface {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return\n    return this.context.app.websocket;\n  }\n\n  private showBar(): void {\n    if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n    if (this.resetTimeout) clearTimeout(this.resetTimeout);\n\n    this.first20Timeout = setTimeout(() => {\n      this.setState({ progress: 20 });\n    }, 100);\n\n    this.progressTimer = setInterval(() => {\n      this.setState((prevState) => {\n        const newValue = calculatePercent(prevState.progress);\n        return { progress: newValue };\n      });\n    }, 500);\n  }\n\n  private hideBar(): void {\n    if (this.first20Timeout) clearTimeout(this.first20Timeout);\n    if (this.progressTimer) clearInterval(this.progressTimer);\n\n    this.fadeOffTimeout = setTimeout(() => {\n      this.setState({\n        progress: 100,\n      });\n    }, 500);\n\n    this.resetTimeout = setTimeout(() => {\n      this.setState({\n        hidden: true,\n        progress: 1,\n      });\n    }, 1000);\n  }\n\n  render(): ReactElement {\n    const LoadingBarComponent = this.props.LoadingBarComponent;\n\n    return (\n      <div\n        hidden={this.state.hidden}\n        style={{\n          position: 'fixed',\n          top: 0,\n          left: 0,\n          right: 0,\n          zIndex: 4,\n          pointerEvents: 'none',\n        }}\n      >\n        <LoadingBarComponent progress={this.state.progress} />\n      </div>\n    );\n  }\n}\n"],"names":["random","Math","ceil","calculatePercent","percent","LoadingBar","PureComponent","contextType","ReactAlpContext","state","loading","hidden","progress","componentDidMount","websocket","getWebsocket","isConnected","setState","prevState","on","componentDidUpdate","prevProps","showBar","hideBar","componentWillUnmount","fadeOffTimeout","clearTimeout","resetTimeout","first20Timeout","progressTimer","clearInterval","context","app","setTimeout","setInterval","newValue","render","LoadingBarComponent","props","position","top","left","right","zIndex","pointerEvents"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import type { ReactElement } from 'react';
 import React, { PureComponent } from 'react';
-import ReactAlpContext from 'react-alp-context';
 interface LoadingBarProps {
     LoadingBarComponent: React.ComponentType<{
         progress: number;
@@ -17,16 +16,15 @@ interface WebsocketInterface {
 }
 export default class LoadingBar extends PureComponent<LoadingBarProps, LoadingBarState> {
     static contextType: React.Context<import("alp-types").Context>;
-    context: React.ContextType<typeof ReactAlpContext>;
     state: {
         loading: boolean;
         hidden: boolean;
         progress: number;
     };
-    fadeOffTimeout?: any;
-    resetTimeout?: any;
-    first20Timeout?: any;
-    progressTimer?: any;
+    fadeOffTimeout?: ReturnType<typeof setTimeout>;
+    resetTimeout?: ReturnType<typeof setTimeout>;
+    first20Timeout?: ReturnType<typeof setTimeout>;
+    progressTimer?: ReturnType<typeof setTimeout>;
     componentDidMount(): void;
     componentDidUpdate(prevProps: LoadingBarProps, prevState: LoadingBarState): void;
     componentWillUnmount(): void;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAmChD,UAAU,eAAe;IACvB,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAChE;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,kBAAkB;IAC1B,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,KAAK,IAAI,CAAC;CACxE;AAED,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,aAAa,CACnD,eAAe,EACf,eAAe,CAChB;IACC,MAAM,CAAC,WAAW,6CAAmB;IAErC,OAAO,EAAG,KAAK,CAAC,WAAW,CAAC,OAAO,eAAe,CAAC,CAAC;IAEpD,KAAK;;;;MAIH;IAEF,cAAc,CAAC,EAAE,GAAG,CAAC;IAErB,YAAY,CAAC,EAAE,GAAG,CAAC;IAEnB,cAAc,CAAC,EAAE,GAAG,CAAC;IAErB,aAAa,CAAC,EAAE,GAAG,CAAC;IAEpB,iBAAiB,IAAI,IAAI;IAiBzB,kBAAkB,CAChB,SAAS,EAAE,eAAe,EAC1B,SAAS,EAAE,eAAe,GACzB,IAAI;IAUP,oBAAoB,IAAI,IAAI;IAO5B,YAAY,IAAI,kBAAkB;IAKlC,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,OAAO;IAkBf,MAAM,IAAI,YAAY;CAmBvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAoC7C,UAAU,eAAe;IACvB,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAChE;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,kBAAkB;IAC1B,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,KAAK,IAAI,CAAC;CACxE;AAED,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,aAAa,CACnD,eAAe,EACf,eAAe,CAChB;IACC,MAAM,CAAC,WAAW,6CAAmB;IAErC,KAAK;;;;MAIH;IAEF,cAAc,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IAE/C,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IAE7C,cAAc,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IAE/C,aAAa,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IAE9C,iBAAiB,IAAI,IAAI;IAiBzB,kBAAkB,CAChB,SAAS,EAAE,eAAe,EAC1B,SAAS,EAAE,eAAe,GACzB,IAAI;IAUP,oBAAoB,IAAI,IAAI;IAO5B,YAAY,IAAI,kBAAkB;IAKlC,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,OAAO;IAkBf,MAAM,IAAI,YAAY;CAmBvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-alp-loading-bar",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "loading bar",
   "keywords": [],
   "author": "Christophe Hurpeau <christophe@hurpeau.com> (https://christophe.hurpeau.com)",
@@ -11,64 +11,44 @@
     "directory": "packages/react-alp-loading-bar"
   },
   "homepage": "https://github.com/christophehurpeau/alp",
+  "type": "module",
   "engines": {
-    "node": ">=12.10.0"
+    "node": "^14.13.1 || >=16.0.0"
   },
   "browserslist": [
+    "defaults",
     "> 0.2%",
-    "Firefox ESR",
-    "last 2 Chrome versions",
-    "last 2 iOS versions",
-    "last 2 Edge versions",
-    "last 2 Safari versions",
     "not ie < 12",
-    "not ios_saf < 10",
-    "not dead",
-    "not op_mini all"
+    "not safari < 10",
+    "not ios_saf < 10"
   ],
-  "main": "./index.js",
+  "main": "./dist/index-node14.mjs",
   "types": "./dist/index.d.ts",
   "module": "./dist/index-browser.es.js",
   "browser": "./dist/index-browser.es.js",
   "exports": {
+    "./package.json": "./package.json",
     ".": {
       "node": {
-        "development": {
-          "import": "./dist/index-node12-dev.mjs",
-          "require": "./dist/index-node12-dev.cjs.js"
-        },
-        "import": "./dist/index-node12.mjs",
-        "require": "./dist/index-node12.cjs.js"
+        "import": "./dist/index-node14.mjs"
       },
       "browser": {
         "browser:modern": {
-          "development": {
-            "import": "./dist/index-browsermodern-dev.es.js"
-          },
           "import": "./dist/index-browsermodern.es.js"
         },
-        "development": {
-          "import": "./dist/index-browser-dev.es.js",
-          "require": "./dist/index-browser-dev.cjs.js"
-        },
-        "import": "./dist/index-browser.es.js",
-        "require": "./dist/index-browser.cjs.js"
+        "import": "./dist/index-browser.es.js"
       }
     }
   },
-  "module:node": "./dist/index-node12.mjs",
-  "module:node-dev": "./dist/index-node12-dev.mjs",
-  "module:browser": "./dist/index-browser.es.js",
-  "module:browser-dev": "./dist/index-browser-dev.es.js",
+  "module:node": "./dist/index-node14.mjs",
   "module:modern-browsers": "./dist/index-browsermodern.es.js",
-  "module:modern-browsers-dev": "./dist/index-browsermodern-dev.es.js",
   "sideEffects": false,
   "scripts": {
     "build": "pob-build && yarn run build:definitions",
     "build:definitions": "tsc -p tsconfig.build.json",
-    "clean": "rm -Rf docs dist test/node6 coverage",
+    "clean": "rm -Rf dist",
     "lint": "yarn run lint:eslint",
-    "lint:eslint": "yarn --cwd ../.. run eslint --ext .js,.mjs,.ts,.tsx --report-unused-disable-directives --quiet packages/react-alp-loading-bar",
+    "lint:eslint": "cd ../.. && yarn run eslint --report-unused-disable-directives --resolve-plugins-relative-to . --quiet packages/react-alp-loading-bar",
     "watch": "pob-watch"
   },
   "prettier": {
@@ -80,9 +60,8 @@
     "babelEnvs": [
       {
         "target": "node",
-        "version": "12",
+        "version": "14",
         "formats": [
-          "cjs",
           "es"
         ]
       },
@@ -96,7 +75,6 @@
       {
         "target": "browser",
         "formats": [
-          "cjs",
           "es"
         ]
       }
@@ -107,22 +85,21 @@
     "jsx": true
   },
   "peerDependencies": {
-    "react": "^16.8.6"
+    "react": "^17.0.2"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
+    "@babel/runtime": "^7.16.7",
     "alp-types": "^3.0.0",
-    "react-alp-context": "^3.1.0"
+    "react-alp-context": "4.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.13.10",
-    "@babel/preset-env": "7.13.10",
-    "@babel/preset-react": "7.12.13",
-    "babel-preset-latest-node": "5.5.1",
+    "@babel/core": "7.16.7",
+    "@babel/preset-env": "7.16.7",
+    "@babel/preset-react": "7.16.7",
     "babel-preset-modern-browsers": "15.0.2",
-    "pob-babel": "26.8.0",
-    "react": "16.14.0",
-    "rollup": "2.42.1"
+    "pob-babel": "29.6.1",
+    "react": "17.0.2",
+    "typescript": "4.5.4"
   },
-  "gitHead": "d9c572787f260784bc8972c22a6cee3ef4520589"
+  "gitHead": "854189ce2307f42363e81bcf7862c5f1deced54a"
 }

package/rollup.config.mjs

@@ -0,0 +1,3 @@
+import createRollupConfig from 'pob-babel/createRollupConfig.js';
+
+export default createRollupConfig({});

package/src/.eslintrc.json

@@ -9,5 +9,22 @@
     "@pob/eslint-config-typescript",
     "@pob/eslint-config-typescript-react"
   ],
-  "ignorePatterns": ["*.d.ts"]
+  "ignorePatterns": ["*.d.ts"],
+  "overrides": [
+    {
+      "files": ["**/*.test.{ts,tsx}", "__tests__/**/*.{ts,tsx}"],
+      "extends": ["@pob/eslint-config-typescript/test"],
+      "env": {
+        "jest": true
+      },
+      "rules": {
+        "import/no-extraneous-dependencies": [
+          "error",
+          {
+            "devDependencies": true
+          }
+        ]
+      }
+    }
+  ]
 }

package/src/index.tsx

@@ -56,21 +56,19 @@ export default class LoadingBar extends PureComponent<
 > {
   static contextType = ReactAlpContext;
 
-  context!: React.ContextType<typeof ReactAlpContext>;
-
   state = {
     loading: true,
     hidden: true,
     progress: 1,
   };
 
-  fadeOffTimeout?: any;
+  fadeOffTimeout?: ReturnType<typeof setTimeout>;
 
-  resetTimeout?: any;
+  resetTimeout?: ReturnType<typeof setTimeout>;
 
-  first20Timeout?: any;
+  first20Timeout?: ReturnType<typeof setTimeout>;
 
-  progressTimer?: any;
+  progressTimer?: ReturnType<typeof setTimeout>;
 
   componentDidMount(): void {
     const websocket = this.getWebsocket();
@@ -103,10 +101,10 @@ export default class LoadingBar extends PureComponent<
   }
 
   componentWillUnmount(): void {
-    clearTimeout(this.fadeOffTimeout);
-    clearTimeout(this.resetTimeout);
-    clearTimeout(this.first20Timeout);
-    clearInterval(this.progressTimer);
+    if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);
+    if (this.resetTimeout) clearTimeout(this.resetTimeout);
+    if (this.first20Timeout) clearTimeout(this.first20Timeout);
+    if (this.progressTimer) clearInterval(this.progressTimer);
   }
 
   getWebsocket(): WebsocketInterface {
@@ -115,8 +113,8 @@ export default class LoadingBar extends PureComponent<
   }
 
   private showBar(): void {
-    clearTimeout(this.fadeOffTimeout);
-    clearTimeout(this.resetTimeout);
+    if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);
+    if (this.resetTimeout) clearTimeout(this.resetTimeout);
 
     this.first20Timeout = setTimeout(() => {
       this.setState({ progress: 20 });
@@ -131,8 +129,8 @@ export default class LoadingBar extends PureComponent<
   }
 
   private hideBar(): void {
-    clearTimeout(this.first20Timeout);
-    clearInterval(this.progressTimer);
+    if (this.first20Timeout) clearTimeout(this.first20Timeout);
+    if (this.progressTimer) clearInterval(this.progressTimer);
 
     this.fadeOffTimeout = setTimeout(() => {
       this.setState({