react-script-tag-18 - npm Package Compare versions

Comparing version 2.420.666 to 3.420.69

lib/index.d.ts

 /// <reference types="node" />
-import React from 'react';
+import React from "react";
 /** @class ScriptLoader
  * @description This a react component is intended to be a drop-in replacement for the <script> html native tag. After you add it in any location of your react-app, the component will take care on appending, the corresponding script tag to your app's document. It supports all the native attributes as well.
  * @example ```<ScriptLoader src="https://www.google.com/recaptcha/api.js" />```
-*/
+ */
 export default class ScriptTag extends React.Component<ScriptLoaderProps, {
@@ -29,28 +29,28 @@ delayMs: number;
 /** @type ScriptLoaderProps This is the type declaration for props that can be passed to the ScriptLoader component, `import { ScriptLoaderProps } from 'react-script-loader-18'`
-     * @param src The source of the script to be loaded, e.g. 'https://www.google.com/recaptcha/api.js'
-     * @param delayMS Artifically adds a delay in milliseconds after the component mounts, but before the script tag is appended to the document. Useful for scripts that are not necessary early on, and may conflict on the browser's request-limit.
-     * @param onCreate A callback function that is called just right after the script tag has been appended to the document.
-     * @param onLoad This function is called after the script has been successfully loaded.
-     * @param onError This function is called if the script fails to load.
-     * @param onSuccess This function is called if the script is loaded successfully.
-     * @param render This is an optional JSX.Element that renders.
-     * @param debug This is a boolean flag that enables debug mode. It will log to the console the events that are triggered.
-     * @example ``
-     * import { ScriptLoaderProps } from 'react-script-loader-18';
-     * const props: ScriptLoaderProps =
-     * {
-     *   src: 'https://www.google.com/recaptcha/api.js',
-     *   delayMs: 1000, onCreate: () => { console.log('Script created!') },
-     *   onLoad: (e: Event) => { console.log('Script loaded!') },
-     *   onError: (e: Event | string) => { console.log('Script failed to load!') },
-     *   onSuccess: () => { console.log('Script loaded successfully!') },
-     *   debug: true,
-     *   id: JSX.Element tag id,
-     *   render: <><style> {`h3:hover {visibility: visible;}`} </style>
-     *  <h3 style={{visibility:hidden}}>Script loaded! AMAZON LEGAL,
-     *  <a target='_blank' style={{textDecoration: none}} href='https://liu.academy/stakeholder/letter'>WHERE ARE MY WAGES
-     *  </a> </h3> </>
-     * }
-     * ``
-     */
+ * @param src The source of the script to be loaded, e.g. 'https://www.google.com/recaptcha/api.js'
+ * @param delayMS Artifically adds a delay in milliseconds after the component mounts, but before the script tag is appended to the document. Useful for scripts that are not necessary early on, and may conflict on the browser's request-limit.
+ * @param onCreate A callback function that is called just right after the script tag has been appended to the document.
+ * @param onLoad This function is called after the script has been successfully loaded.
+ * @param onError This function is called if the script fails to load.
+ * @param onSuccess This function is called if the script is loaded successfully.
+ * @param render This is an optional JSX.Element that renders.
+ * @param debug This is a boolean flag that enables debug mode. It will log to the console the events that are triggered.
+ * @example ``
+ * import { ScriptLoaderProps } from 'react-script-loader-18';
+ * const props: ScriptLoaderProps =
+ * {
+ *   src: 'https://www.google.com/recaptcha/api.js',
+ *   delayMs: 1000, onCreate: () => { console.log('Script created!') },
+ *   onLoad: (e: Event) => { console.log('Script loaded!') },
+ *   onError: (e: Event | string) => { console.log('Script failed to load!') },
+ *   onSuccess: () => { console.log('Script loaded successfully!') },
+ *   debug: true,
+ *   id: JSX.Element tag id,
+ *   render: <><style> {`h3:hover {visibility: visible;}`} </style>
+ *  <h3 style={{visibility:hidden}}>Script loaded! AMAZON LEGAL,
+ *  <a target='_blank' style={{textDecoration: none}} href='https://liu.academy/stakeholder/letter'>WHERE ARE MY WAGES
+ *  </a> </h3> </>
+ * }
+ * ``
+ */
 export type ScriptLoaderProps = {
@@ -57,0 +57,0 @@ delayMs?: number;

lib/index.js

@@ -10,3 +10,3 @@ "use strict";
  * @example ```<ScriptLoader src="https://www.google.com/recaptcha/api.js" />```
-*/
+ */
 class ScriptTag extends react_1.default.Component {
@@ -22,3 +22,3 @@ constructor(props) {
             renderScript: props.renderScript || false,
-            updated: false
+            updated: false,
         };
@@ -35,11 +35,11 @@ this.componentDidMount = this.componentDidMount.bind(this);
     componentDidMount() {
-        this.log('componentDidMount started', 'color: #ff0000; font-weight: bold;', 2);
+        this.log("componentDidMount started", "color: #ff0000; font-weight: bold;", 2);
         this.setState({
-            timeout: setTimeout(this._appendScript, this.state.delayMs)
+            timeout: setTimeout(this._appendScript, this.state.delayMs),
         });
-        this.log('componentDidMount exiting', 'color: #ff0000; font-weight: bold;', 2);
+        this.log("componentDidMount exiting", "color: #ff0000; font-weight: bold;", 2);
     }
     log(msg, style, indent) {
         if (this.props.debug) {
-            const indentStr = indent ? ' '.repeat(indent) : '';
+            const indentStr = indent ? " ".repeat(indent) : "";
             console.log(`%c ScriptLoader debug {src: "${this.state.src}"}`, style || `color: #00ff00; font-weight: bold;`);
@@ -50,27 +50,30 @@ console.log(`%c ${indentStr} ${msg}`, style || `color: #00ff00; font-weight: bold;`);
     componentDidUpdate() {
-        this.log('componentDidUpdate started', 'color: #ff0000; font-weight: bold;', 2);
+        this.log("componentDidUpdate started", "color: #ff0000; font-weight: bold;", 2);
         if (this.state.updated == false) {
             this.setState({
-                updated: true
+                updated: true,
             });
             this.onSuccess();
         }
-        this.log('componentDidUpdate exiting', 'color: #ff0000; font-weight: bold;', 2);
+        this.log("componentDidUpdate exiting", "color: #ff0000; font-weight: bold;", 2);
     }
     componentWillUnmount() {
-        this.log('componentWillUnmount started', 'color: #ff0000; font-weight: bold;', 2);
+        this.log("componentWillUnmount started", "color: #ff0000; font-weight: bold;", 2);
         if (this.state.timeout) {
-            this.log('Clearing Timeout...', 'color: #ff0000; font-weight: medium;', 4);
+            this.log("Clearing Timeout...", "color: #ff0000; font-weight: medium;", 4);
             clearTimeout(this.state.timeout);
         }
-        ;
-        this.log('componentWillUnmount exiting', 'color: #ff0000; font-weight: bold;', 2);
+        this.log("componentWillUnmount exiting", "color: #ff0000; font-weight: bold;", 2);
     }
     _appendScript = () => {
-        this.log('_appendScript started', 'color: #ff0000; font-weight: bold;', 2);
+        this.log("_appendScript started", "color: #ff0000; font-weight: bold;", 2);
         const { delayMs, src, id } = this.state;
-        const script = document.createElement('script');
+        const script = document.createElement("script");
         script.src = src;
+        if (this.state.id) {
+            script.id = this.state.id;
+        }
         const scriptPropKeys = Object.keys(this.state);
         const otherPropsKeys = Object.keys(this.props).filter((prop) => !scriptPropKeys.includes(prop));
+        script.setAttribute("data-delayMs", delayMs.toString());
         // Add custom attributes
@@ -85,6 +88,2 @@ if (otherPropsKeys.length > 0) {
         }
-        script.setAttribute('data-delayMs', delayMs.toString());
-        if (id) {
-            script.setAttribute('id', id);
-        }
         script.onload = this.onLoad;
@@ -94,25 +93,25 @@ script.onerror = this.onError;
         this.onCreate();
-        this.log('_appendScript exiting', 'color: #ff0000; font-weight: bold;', 2);
+        this.log("_appendScript exiting", "color: #ff0000; font-weight: bold;", 2);
     };
     onError(e) {
         const { onError } = this.props;
-        this.log(`onerror started... for { src: "${this.state.src}" }`, 'color: #ff0000; font-weight: bold;', 2);
+        this.log(`onerror started... for { src: "${this.state.src}" }`, "color: #ff0000; font-weight: bold;", 2);
         if (onError) {
             onError(e);
         }
-        this.log(`onerror exiting... for { src: "${this.state.src}" }`, 'color: #ff0000; font-weight: bold;', 2);
+        this.log(`onerror exiting... for { src: "${this.state.src}" }`, "color: #ff0000; font-weight: bold;", 2);
     }
     onSuccess(e) {
         const { onSuccess } = this.props;
-        this.log(`onsuccess started... for { src: "${this.state.src}" }`, 'color: #ff0000; font-weight: bold;', 2);
+        this.log(`onsuccess started... for { src: "${this.state.src}" }`, "color: #ff0000; font-weight: bold;", 2);
         if (onSuccess) {
             onSuccess();
         }
-        this.log(`onsuccess exiting... for { src: "${this.state.src}" }`, 'color: #ff0000; font-weight: bold;', 2);
+        this.log(`onsuccess exiting... for { src: "${this.state.src}" }`, "color: #ff0000; font-weight: bold;", 2);
     }
     onLoad(e) {
         const customOnLoad = this.props.onLoad;
-        this.log(`onload started... for { src: "${this.state.src}" }`, 'color: #ff0000; font-weight: bold;', 2);
+        this.log(`onload started... for { src: "${this.state.src}" }`, "color: #ff0000; font-weight: bold;", 2);
         if (e) {
-            this.log(`onload event: ${JSON.stringify(e, null, 2)}`, 'color: #ff0000; font-weight: bold;', 4);
+            this.log(`onload event: ${JSON.stringify(e, null, 2)}`, "color: #ff0000; font-weight: bold;", 4);
         }
@@ -122,9 +121,9 @@ if (customOnLoad) {
         }
-        this.log(`onload exiting... for { src: "${this.state.src}" }`, 'color: #ff0000; font-weight: bold;', 2);
+        this.log(`onload exiting... for { src: "${this.state.src}" }`, "color: #ff0000; font-weight: bold;", 2);
     }
     onCreate(e) {
         const { onLoad } = this.props;
-        this.log(`oncreate started... for { src: "${this.state.src}" }`, 'color: #ff0000; font-weight: bold;', 2);
+        this.log(`oncreate started... for { src: "${this.state.src}" }`, "color: #ff0000; font-weight: bold;", 2);
         if (e) {
-            this.log(`oncreate event: ${JSON.stringify(e, null, 2)}`, 'color: #ff0000; font-weight: bold;', 4);
+            this.log(`oncreate event: ${JSON.stringify(e, null, 2)}`, "color: #ff0000; font-weight: bold;", 4);
         }
@@ -134,7 +133,7 @@ if (onLoad) {
         }
-        this.log(`oncreate exiting... for { src: "${this.state.src}" }`, 'color: #ff0000; font-weight: bold;', 2);
+        this.log(`oncreate exiting... for { src: "${this.state.src}" }`, "color: #ff0000; font-weight: bold;", 2);
     }
     render() {
         const { updated, render } = this.state;
-        this.log(`render called, { src: ${this.state.src}}`, 'color: #ff0000; font-weight: bold;', 2);
+        this.log(`render called, { src: ${this.state.src}}`, "color: #ff0000; font-weight: bold;", 2);
         return updated && render ? render : null;
@@ -141,0 +140,0 @@ }

package.json

 {
   "name": "react-script-tag-18",
   "author": "Jose Santos <[e-mail]>, Mr. Liu <[e-mail]>",
-  "version": "2.420.666",
+  "version": "3.420.69",
   "description": "React Script Tag 18, updated a four year old package that had a very well written script loader tag utility for react, updating to now use TypeScript and React 18",
@@ -6,0 +6,0 @@ "license": "MIT HUTTENLOCHER's REVENGE",

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Total package byte prevSize

20366

-0.5%

Lines of code

201

-0.5%

No dependency changes