@expandorg/components - npm Package Compare versions

Comparing version 0.2.50 to 0.2.51

index.js

@@ -30,3 +30,3 @@ // @flow
 
-import { JsScript, withScript } from './src/components/JsScript';
+import { JsScript, withScript, useScript } from './src/components/JsScript';
 import Portal from './src/components/Portal';
@@ -41,2 +41,3 @@ import Panel from './src/components/Panel';
   withServices,
+  useService,
 } from './src/components/ServiceProvider';
@@ -80,2 +81,3 @@
   JsScript,
+  useScript,
   Portal,
@@ -92,2 +94,3 @@ Panel,
   withServices,
+  useService,
   clickOutside,
@@ -94,0 +97,0 @@ deferVisibleRender,

package.json

 {
   "name": "@expandorg/components",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "description": "expand UI components library",
@@ -35,3 +35,3 @@ "main": "index.js",
   },
-  "gitHead": "68f08e5fad8ba7b19d759dbec6d44e57308c637e"
+  "gitHead": "02732a4294512d1e0aeb929ad1f16b3123dc1782"
 }

src/components/JsScript/index.js

 // flow
 import JsScript from './JsScript';
 import withScript from './withScript';
+import useScript from './useScript';
 
-export { JsScript, withScript };
+export { JsScript, useScript, withScript };

src/components/JsScript/JsScript.js

@@ -1,60 +0,24 @@
-import { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import { withServices } from '../ServiceProvider';
+import useScript from './useScript';
 
-class JsScript extends Component {
-  static propTypes = {
-    src: PropTypes.string.isRequired,
-    async: PropTypes.bool,
-    defer: PropTypes.bool,
-    disable: PropTypes.bool,
-    services: PropTypes.shape({
-      resolve: PropTypes.func,
-    }).isRequired,
-  };
+export default function JsScript({ src, async, defer, disable, children }) {
+  const jsLoaded = useScript(src, disable, async, defer);
+  return children({ jsLoaded });
+}
 
-  static defaultProps = {
-    async: true,
-    defer: false,
-    disable: false,
-  };
+JsScript.propTypes = {
+  src: PropTypes.string.isRequired,
+  async: PropTypes.bool,
+  defer: PropTypes.bool,
+  disable: PropTypes.bool,
+  services: PropTypes.shape({
+    resolve: PropTypes.func,
+  }).isRequired,
+};
 
-  constructor(props) {
-    super(props);
-    const jsScripts = props.services.resolve('jsScripts');
-    this.state = {
-      jsLoaded: jsScripts.isLoaded(props.src),
-    };
-  }
-
-  componentDidMount() {
-    const { src, async, defer, disable, services } = this.props;
-    if (!disable) {
-      const jsScripts = services.resolve('jsScripts');
-      this.unsubsribe = jsScripts.addScript(src, async, defer, this.handleLoad);
-    }
-  }
-
-  componentWillUnmount() {
-    const { disable } = this.props;
-    if (!disable && this.unsubsribe) {
-      this.unsubsribe();
-    }
-  }
-
-  handleLoad = () => {
-    this.setState({ jsLoaded: true });
-  };
-
-  render() {
-    const { children } = this.props;
-    if (!children) {
-      return null;
-    }
-    const { jsLoaded } = this.state;
-    return children({ jsLoaded });
-  }
-}
-
-export default withServices(JsScript);
+JsScript.defaultProps = {
+  async: true,
+  defer: false,
+  disable: false,
+};

src/components/ServiceProvider/index.js

@@ -6,3 +6,10 @@ // @flow
 import withServices from './withServices';
+import useService from './useService';
 
-export { ServiceProvider, ServicesContext, ServiceLocator, withServices };
+export {
+  ServiceProvider,
+  ServicesContext,
+  ServiceLocator,
+  withServices,
+  useService,
+};

No alert changes

Improved metrics

Total package byte prevSize

181766

increased by0.09%

Number of package files

174

increased by1.16%

Lines of code

3265

increased by0.28%

No dependency changes