@ttoss/react-hooks 1.21.14

package/README.md

@@ -0,0 +1,41 @@
+# @ttoss/hooks
+
+## 📚 About
+
+<strong> @ttoss/hooks</strong> is a easiest way to use Util Hooks in your React application.
+
+## 🚀 Getting Started
+
+### Install @ttoss/hooks
+
+```shell
+$ yarn add @ttoss/hooks
+# or
+$ npm install @ttoss/hooks
+```
+
+## 📄 Examples of use
+
+```tsx
+import React from 'react';
+
+import { useScript } from '@ttoss/hooks';
+
+export const Component = () => {
+  const url = 'https://your-domain.com/bundle-api.js';
+
+  const { status } = useScript(url);
+
+  return <div>{status === 'ready' ? 'Ok' : 'Loading'}</div>;
+};
+```
+
+## 📘 Types
+
+```ts
+type ScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
+
+const useScript: (src: string) => {
+  status: ScriptStatus;
+};
+```

package/dist/esm/index.js

@@ -0,0 +1,52 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+
+// tsup.inject.js
+import * as React from "react";
+
+// src/useScript.ts
+import * as React2 from "react";
+var useScript = src => {
+  const [status, setStatus] = React2.useState(src ? "loading" : "idle");
+  React2.useEffect(() => {
+    if (!src) {
+      setStatus("idle");
+      return;
+    }
+    let script = document.querySelector(`script[src="${src}"]`);
+    if (!script) {
+      script = document.createElement("script");
+      script.src = src;
+      script.async = true;
+      script.setAttribute("data-status", "loading");
+      document.body.appendChild(script);
+      const setAttributeFromEvent = event => {
+        if (script) {
+          script.setAttribute("data-status", event.type === "load" ? "ready" : "error");
+        }
+      };
+      script.addEventListener("load", setAttributeFromEvent);
+      script.addEventListener("error", setAttributeFromEvent);
+    } else {
+      setStatus(script.getAttribute("data-status") || "error");
+    }
+    const setStateFromEvent = event => {
+      setStatus(event.type === "load" ? "ready" : "error");
+    };
+    script.addEventListener("load", setStateFromEvent);
+    script.addEventListener("error", setStateFromEvent);
+    return () => {
+      if (script) {
+        script.removeEventListener("load", setStateFromEvent);
+        script.removeEventListener("error", setStateFromEvent);
+      }
+    };
+  },
+  /**
+   * Only re-run effect if script src changes.
+   */
+  [src]);
+  return {
+    status
+  };
+};
+export { useScript };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+type ScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
+/**
+ * https://usehooks.com/useScript/
+ *
+ * @param src: string - the url of the script to load.
+ * @returns status: Status
+ */
+declare const useScript: (src: string) => {
+    status: ScriptStatus;
+};
+
+export { ScriptStatus, useScript };

package/dist/index.js

@@ -0,0 +1,97 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  useScript: () => useScript
+});
+module.exports = __toCommonJS(src_exports);
+
+// tsup.inject.js
+var React = __toESM(require("react"));
+
+// src/useScript.ts
+var React2 = __toESM(require("react"));
+var useScript = src => {
+  const [status, setStatus] = React2.useState(src ? "loading" : "idle");
+  React2.useEffect(() => {
+    if (!src) {
+      setStatus("idle");
+      return;
+    }
+    let script = document.querySelector(`script[src="${src}"]`);
+    if (!script) {
+      script = document.createElement("script");
+      script.src = src;
+      script.async = true;
+      script.setAttribute("data-status", "loading");
+      document.body.appendChild(script);
+      const setAttributeFromEvent = event => {
+        if (script) {
+          script.setAttribute("data-status", event.type === "load" ? "ready" : "error");
+        }
+      };
+      script.addEventListener("load", setAttributeFromEvent);
+      script.addEventListener("error", setAttributeFromEvent);
+    } else {
+      setStatus(script.getAttribute("data-status") || "error");
+    }
+    const setStateFromEvent = event => {
+      setStatus(event.type === "load" ? "ready" : "error");
+    };
+    script.addEventListener("load", setStateFromEvent);
+    script.addEventListener("error", setStateFromEvent);
+    return () => {
+      if (script) {
+        script.removeEventListener("load", setStateFromEvent);
+        script.removeEventListener("error", setStateFromEvent);
+      }
+    };
+  },
+  /**
+   * Only re-run effect if script src changes.
+   */
+  [src]);
+  return {
+    status
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useScript
+});

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@ttoss/react-hooks",
+  "version": "1.21.14",
+  "description": "React hooks.",
+  "license": "UNLICENSED",
+  "author": "ttoss",
+  "contributors": [
+    "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "jest"
+  },
+  "typings": "dist/index.d.ts",
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@ttoss/config": "^1.29.4",
+    "@ttoss/test-utils": "^1.21.3",
+    "@types/react": "^18.0.35",
+    "jest": "^29.5.0",
+    "tsup": "^6.7.0"
+  },
+  "keywords": [
+    "React",
+    "hooks"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "81c9da91988b338a6449d84b4dfc183ccf9ed941"
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { useScript, ScriptStatus } from './useScript';

package/src/useScript.ts

@@ -0,0 +1,107 @@
+import * as React from 'react';
+
+export type ScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
+
+/**
+ * https://usehooks.com/useScript/
+ *
+ * @param src: string - the url of the script to load.
+ * @returns status: Status
+ */
+export const useScript = (src: string) => {
+  /**
+   * Keep track of script status ("idle", "loading", "ready", "error")
+   */
+  const [status, setStatus] = React.useState<ScriptStatus>(
+    src ? 'loading' : 'idle'
+  );
+
+  React.useEffect(
+    () => {
+      /**
+       * Allow falsy src value if waiting on other data needed for
+       * constructing the script URL passed to this hook.
+       */
+      if (!src) {
+        setStatus('idle');
+        return;
+      }
+
+      /**
+       * Fetch existing script element by src.
+       * It may have been added by another instance of this hook.
+       */
+      let script: HTMLScriptElement | null = document.querySelector(
+        `script[src="${src}"]`
+      );
+
+      if (!script) {
+        /**
+         * Create script element and set its src.
+         */
+        script = document.createElement('script');
+        script.src = src;
+        script.async = true;
+        script.setAttribute('data-status', 'loading');
+
+        /**
+         * Add script to document body
+         */
+        document.body.appendChild(script);
+
+        /**
+         * Store status in attribute on script.
+         * This can be read by other instances of this hook.
+         */
+        const setAttributeFromEvent = (event: any) => {
+          if (script) {
+            script.setAttribute(
+              'data-status',
+              event.type === 'load' ? 'ready' : 'error'
+            );
+          }
+        };
+        script.addEventListener('load', setAttributeFromEvent);
+        script.addEventListener('error', setAttributeFromEvent);
+      } else {
+        /**
+         * Grab existing script status from attribute and set to state.
+         */
+        setStatus(
+          (script.getAttribute('data-status') as ScriptStatus) || 'error'
+        );
+      }
+
+      /**
+       * Script event handler to update status in state
+       * Note: Even if the script already exists we still need to add
+       * event handlers to update the state for *this* hook instance.
+       */
+      const setStateFromEvent = (event: any) => {
+        setStatus(event.type === 'load' ? 'ready' : 'error');
+      };
+
+      /**
+       * Add event listeners.
+       */
+      script.addEventListener('load', setStateFromEvent);
+      script.addEventListener('error', setStateFromEvent);
+
+      /**
+       * Remove event listeners on cleanup.
+       */
+      return () => {
+        if (script) {
+          script.removeEventListener('load', setStateFromEvent);
+          script.removeEventListener('error', setStateFromEvent);
+        }
+      };
+    },
+    /**
+     * Only re-run effect if script src changes.
+     */
+    [src]
+  );
+
+  return { status };
+};