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

Comparing version 1.1.69 to 2.3.3

dist/index.d.ts

 /// <reference types="node" />
 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" />```
+*/
 declare class ScriptLoader extends React.Component<ScriptLoaderProps, {
@@ -7,16 +11,59 @@ delayMs: number;
     timeout: NodeJS.Timeout | null;
+    render: JSX.Element | null;
+    id: string | null;
+    renderScript: boolean;
+    updated: boolean;
 }> {
-    timeout: NodeJS.Timeout | null;
+    customOnError: Function;
+    customOnLoad: Function;
+    customOnCreate: Function;
     constructor(props: ScriptLoaderProps);
     componentDidMount(): void;
+    log(msg: string, style?: string, indent?: number): void;
+    componentDidUpdate(): void;
     componentWillUnmount(): void;
     _appendScript: () => void;
+    onError(e?: Error | Event | string): void;
+    onSuccess(e?: Error | Event | string): void;
+    onLoad(e?: Event): void;
+    onCreate(e?: Event): void;
     render(): JSX.Element;
 }
+/** @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> </>
+     * }
+     * ``
+     */
 export declare type ScriptLoaderProps = {
     delayMs?: number;
-    onCreate?: () => void;
-    onError?: (event: Event | string, source?: string, lineno?: number, colno?: number, error?: Error) => void;
+    id?: string;
+    onCreate?: (event?: Event) => void;
+    onError?: (event?: string | Event | Error, source?: string, lineno?: number, colno?: number, error?: Error) => void;
     onSuccess?: () => void;
-    onLoad?: () => void;
+    onLoad?: (event?: Event) => void;
+    debug?: boolean;
+    render?: JSX.Element;
+    renderScript?: boolean;
     src: string;
@@ -23,0 +70,0 @@ [key: string]: any;

dist/index.js

@@ -7,4 +7,10 @@ "use strict";
 const react_1 = __importDefault(require("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" />```
+*/
 class ScriptLoader extends react_1.default.Component {
-    timeout;
+    customOnError;
+    customOnLoad;
+    customOnCreate;
     constructor(props) {
@@ -15,3 +21,7 @@ super(props);
             src: props.src,
-            timeout: null
+            timeout: null,
+            render: props.render || null,
+            id: props.id || null,
+            renderScript: props.renderScript || false,
+            updated: false
         };
@@ -22,36 +32,109 @@ this.componentDidMount = this.componentDidMount.bind(this);
         this.render = this.render.bind(this);
+        this.onCreate = this.onCreate.bind(this);
+        this.onLoad = this.onLoad.bind(this);
+        this.onError = this.onError.bind(this);
+        this.onSuccess = this.onSuccess.bind(this);
     }
     componentDidMount() {
+        this.log('componentDidMount started', 'color: #ff0000; font-weight: bold;', 2);
         this.setState({
             timeout: setTimeout(this._appendScript, this.state.delayMs)
         });
+        this.log('componentDidMount exiting', 'color: #ff0000; font-weight: bold;', 2);
     }
+    log(msg, style, indent) {
+        if (this.props.debug) {
+            const indentStr = indent ? ' '.repeat(indent) : '';
+            console.log(`%c ScriptLoader debug {src: "${this.state.src}"}`, style || `color: #00ff00; font-weight: bold;`);
+            console.log(`%c ${indentStr} ${msg}`, style || `color: #00ff00; font-weight: bold;`);
+        }
+    }
+    componentDidUpdate() {
+        this.log('componentDidUpdate started', 'color: #ff0000; font-weight: bold;', 2);
+        if (this.state.updated == false) {
+            this.setState({
+                updated: true
+            });
+            this.onSuccess();
+        }
+        this.log('componentDidUpdate exiting', 'color: #ff0000; font-weight: bold;', 2);
+    }
     componentWillUnmount() {
+        this.log('componentWillUnmount started', 'color: #ff0000; font-weight: bold;', 2);
         if (this.state.timeout) {
+            this.log('Clearing Timeout...', 'color: #ff0000; font-weight: medium;', 4);
             clearTimeout(this.state.timeout);
         }
         ;
+        this.log('componentWillUnmount exiting', 'color: #ff0000; font-weight: bold;', 2);
     }
     _appendScript = () => {
-        const { onCreate, onLoad, onError, delayMs, src, ...otherProps } = this.props;
+        this.log('_appendScript started', 'color: #ff0000; font-weight: bold;', 2);
+        const { delayMs, src, id } = this.state;
+        const { otherProps, } = this.props;
         const script = document.createElement('script');
         script.src = src;
         // Add custom attributes
-        for (const [attr, value] of Object.entries(otherProps)) {
-            if (attr === 'onCreate' || attr === 'onLoad' || attr === 'onError' || attr === 'onSuccess') {
-                continue;
+        if (otherProps) {
+            for (const [attr, value] of Object.entries(otherProps)) {
+                if (attr === 'onCreate' || attr === 'onLoad' || attr === 'onError' || attr === 'onSuccess' || attr === 'debug' || attr === 'render') {
+                    continue;
+                }
+                script.setAttribute(attr, value);
             }
-            script.setAttribute(attr, value);
         }
-        script.onload = onLoad || null;
-        script.onerror = onError || null;
+        script.setAttribute('data-delayMs', delayMs.toString());
+        if (id) {
+            script.setAttribute('id', id);
+        }
+        script.onload = this.onLoad;
+        script.onerror = this.onError;
         document.body.appendChild(script);
-        if (onCreate) {
-            onCreate();
+        this.onCreate();
+        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);
+        if (onError) {
+            onError(e);
         }
-    };
+        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);
+        if (onSuccess) {
+            onSuccess();
+        }
+        this.log(`onsuccess exiting... for { src: "${this.state.src}" }`, 'color: #ff0000; font-weight: bold;', 2);
+    }
+    onLoad(e) {
+        const { onLoad } = this.props;
+        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);
+        }
+        if (onLoad) {
+            onLoad(e);
+        }
+        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);
+        if (e) {
+            this.log(`oncreate event: ${JSON.stringify(e, null, 2)}`, 'color: #ff0000; font-weight: bold;', 4);
+        }
+        if (onLoad) {
+            onLoad(e);
+        }
+        this.log(`oncreate exiting... for { src: "${this.state.src}" }`, 'color: #ff0000; font-weight: bold;', 2);
+    }
     render() {
-        return react_1.default.createElement(react_1.default.Fragment, null);
+        const { updated, render } = this.state;
+        this.log(`render called, { src: ${this.state.src}}`, 'color: #ff0000; font-weight: bold;', 2);
+        return updated && render ? render : null;
     }
 }
 exports.default = ScriptLoader;

package.json

 {
   "name": "react-script-tag-18",
-  "author": "Jose Santos <[e-mail]>",
-  "version": "1.1.69",
-  "description": "React Script Tag 18",
+  "author": "Jose Santos <[e-mail]>, Mr. Liu <[e-mail]>",
+  "version": "2.3.3",
+  "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",
   "license": "MIT HUTTENLOCHER's REVENGE",
@@ -19,3 +19,3 @@ "main": "dist/index.js",
     "dist/index.js",
-    "package-lock.js"
+    "package-lock.json"
   ],
@@ -22,0 +22,0 @@ "scripts": {

New 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

Fixed 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

Improved metrics

Total package byte prevSize

28549

94.83%

Lines of code

403

177.93%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes