react-tads-widget - npm Package Compare versions

Comparing version 0.0.17 to 0.0.18

lib/index.cjs.js

@@ -1,2 +0,2 @@
-"use strict";var e=require("react");const t="https://w.tads.me/widget.js",o=(e,o)=>{const r=document.querySelector(`script[src="${t}"]`);if(r)return r;const d=document.createElement("script");return d.src=t,d.async=!0,d.addEventListener("load",e),d.addEventListener("error",o),document.body.appendChild(d),d};async function r(){return await console.log("widget script installed"),window.tadstele=!0,!0}exports.TadsWidget=({id:t,debug:d,onShowReward:n,onClickReward:s,onAdsNotFound:i})=>{const[a,c]=e.useState({isLoaded:!1,isError:!1,isShown:!1});return e.useEffect((()=>{if(a.isShown)return;let e;a.isShown=!0;var l,w;return l=()=>{const e=window.tads.init({widgetId:t,debug:d,onShowReward:n,onClickReward:s,onAdsNotFound:i});!window.tads.controllers&&(window.tads.controllers={}),window.tads.controllers[t]=e,e.loadAd().then((t=>"STATIC"===t.type&&e.showAd())).catch((e=>{console.log(e)}))},w=()=>{console.error("Failed to load Tads script.")},window.tads?l():(e=o((()=>{c((e=>({...e,isLoaded:!0,isError:!1}))),console.log("setScriptState isLoaded true")}),(()=>{c((e=>({...e,isLoaded:!1,isError:!0})))})),a.isLoaded&&l(),a.isError&&w(),e.addEventListener("load",l),e.addEventListener("error",w)),window.tadstele||r(),()=>{e&&(e.removeEventListener("load",(()=>{})),e.removeEventListener("error",(()=>{})),e.remove(),c({isLoaded:!1,isError:!1,isShown:!1}))}}),[t,d,n,s,i]),e.createElement("div",{id:`tads-container-${t}`})},exports.TadsWidgetProvider=t=>(e.useEffect((()=>{!async function(){await r()}(),(()=>{const e=document.createElement("link");e.rel="preconnect",e.href="https://api.tads.me",document.head.appendChild(e)})(),o((()=>{console.log("script load")}),(()=>{console.error("script error")}))}),[]),e.createElement(e.Fragment,null,t.children)),exports.renderTadsWidget=({id:e})=>{if(window.tads.controllers[e]){window.tads.controllers[e].showAd().catch((e=>{console.log(e)}))}};
+"use strict";var e=require("react");const o="https://w.tads.me/widget.js",r=(e,r)=>{const t=document.querySelector(`script[src="${o}"]`);if(t)return t;const d=document.createElement("script");return d.src=o,d.async=!0,d.addEventListener("load",e),d.addEventListener("error",r),document.body.appendChild(d),d};exports.TadsWidget=({id:o,debug:t,type:d="STATIC",onShowReward:n,onClickReward:s,onAdsNotFound:i})=>{const[a,c]=e.useState({isLoaded:!1,isError:!1,isShown:!1});return e.useEffect((()=>{if(a.isShown)return;let e;c((e=>({...e,isShown:!0})));var l,w;return l=()=>{window.tads.controllers||(window.tads.controllers={});const e=window.tads.init({widgetId:o,type:d.toUpperCase(),debug:t,onShowReward:n,onClickReward:s,onAdsNotFound:i});window.tads.controllers[o]=e,"STATIC"===d.toUpperCase()&&e.loadAd().then((o=>"STATIC"===o.type&&e.showAd())).catch(console.log)},w=()=>{console.error("Failed to load Tads script.")},window.tads?l():(e=r((()=>c((e=>({...e,isLoaded:!0,isError:!1})))),(()=>c((e=>({...e,isLoaded:!1,isError:!0}))))),a.isLoaded&&l(),a.isError&&w(),e.addEventListener("load",l),e.addEventListener("error",w)),()=>{e&&(e.removeEventListener("load",(()=>{})),e.removeEventListener("error",(()=>{})),e.remove(),c({isLoaded:!1,isError:!1,isShown:!1}))}}),[o,t,d,n,s,i]),e.createElement("div",{id:`tads-container-${o}`})},exports.TadsWidgetProvider=o=>(e.useEffect((()=>{(()=>{const e=document.createElement("link");e.rel="preconnect",e.href="https://api.tads.me",document.head.appendChild(e)})(),r((()=>{console.log("script load")}),(()=>{console.error("script error")}))}),[]),e.createElement(e.Fragment,null,o.children)),exports.renderTadsWidget=({id:e,type:o="fullscreen"})=>{if(!window.tads||!window.tads.controllers)return void console.warn("Tads not initialized");const r=window.tads.controllers[e];r?"function"==typeof r.showAd?r.showAd().catch((r=>{console.error(`Error while showing ${o} ad for widget ${e}:`,r)})):console.warn(`showAd is not available for widget ID: ${e}`):console.warn(`No ad controller found for widget ID: ${e}`)};
 //# sourceMappingURL=index.cjs.js.map

lib/index.esm.js

@@ -1,2 +0,2 @@
-import e,{useState as o,useEffect as t}from"react";const r="https://w.tads.me/widget.js",n=(e,o)=>{const t=document.querySelector(`script[src="${r}"]`);if(t)return t;const n=document.createElement("script");return n.src=r,n.async=!0,n.addEventListener("load",e),n.addEventListener("error",o),document.body.appendChild(n),n};async function d(){return await console.log("widget script installed"),window.tadstele=!0,!0}const s=({id:e})=>{if(window.tads.controllers[e]){window.tads.controllers[e].showAd().catch((e=>{console.log(e)}))}},i=({id:r,debug:s,onShowReward:i,onClickReward:a,onAdsNotFound:c})=>{const[l,w]=o({isLoaded:!1,isError:!1,isShown:!1});return t((()=>{if(l.isShown)return;let e;l.isShown=!0;var o,t;return o=()=>{const e=window.tads.init({widgetId:r,debug:s,onShowReward:i,onClickReward:a,onAdsNotFound:c});!window.tads.controllers&&(window.tads.controllers={}),window.tads.controllers[r]=e,e.loadAd().then((o=>"STATIC"===o.type&&e.showAd())).catch((e=>{console.log(e)}))},t=()=>{console.error("Failed to load Tads script.")},window.tads?o():(e=n((()=>{w((e=>({...e,isLoaded:!0,isError:!1}))),console.log("setScriptState isLoaded true")}),(()=>{w((e=>({...e,isLoaded:!1,isError:!0})))})),l.isLoaded&&o(),l.isError&&t(),e.addEventListener("load",o),e.addEventListener("error",t)),window.tadstele||d(),()=>{e&&(e.removeEventListener("load",(()=>{})),e.removeEventListener("error",(()=>{})),e.remove(),w({isLoaded:!1,isError:!1,isShown:!1}))}}),[r,s,i,a,c]),e.createElement("div",{id:`tads-container-${r}`})},a=o=>(t((()=>{!async function(){await d()}(),(()=>{const e=document.createElement("link");e.rel="preconnect",e.href="https://api.tads.me",document.head.appendChild(e)})(),n((()=>{console.log("script load")}),(()=>{console.error("script error")}))}),[]),e.createElement(e.Fragment,null,o.children));export{i as TadsWidget,a as TadsWidgetProvider,s as renderTadsWidget};
+import e,{useState as o,useEffect as r}from"react";const t="https://w.tads.me/widget.js",n=(e,o)=>{const r=document.querySelector(`script[src="${t}"]`);if(r)return r;const n=document.createElement("script");return n.src=t,n.async=!0,n.addEventListener("load",e),n.addEventListener("error",o),document.body.appendChild(n),n},d=({id:e,type:o="fullscreen"})=>{if(!window.tads||!window.tads.controllers)return void console.warn("Tads not initialized");const r=window.tads.controllers[e];r?"function"==typeof r.showAd?r.showAd().catch((r=>{console.error(`Error while showing ${o} ad for widget ${e}:`,r)})):console.warn(`showAd is not available for widget ID: ${e}`):console.warn(`No ad controller found for widget ID: ${e}`)},s=({id:t,debug:d,type:s="STATIC",onShowReward:i,onClickReward:a,onAdsNotFound:c})=>{const[l,w]=o({isLoaded:!1,isError:!1,isShown:!1});return r((()=>{if(l.isShown)return;let e;w((e=>({...e,isShown:!0})));var o,r;return o=()=>{window.tads.controllers||(window.tads.controllers={});const e=window.tads.init({widgetId:t,type:s.toUpperCase(),debug:d,onShowReward:i,onClickReward:a,onAdsNotFound:c});window.tads.controllers[t]=e,"STATIC"===s.toUpperCase()&&e.loadAd().then((o=>"STATIC"===o.type&&e.showAd())).catch(console.log)},r=()=>{console.error("Failed to load Tads script.")},window.tads?o():(e=n((()=>w((e=>({...e,isLoaded:!0,isError:!1})))),(()=>w((e=>({...e,isLoaded:!1,isError:!0}))))),l.isLoaded&&o(),l.isError&&r(),e.addEventListener("load",o),e.addEventListener("error",r)),()=>{e&&(e.removeEventListener("load",(()=>{})),e.removeEventListener("error",(()=>{})),e.remove(),w({isLoaded:!1,isError:!1,isShown:!1}))}}),[t,d,s,i,a,c]),e.createElement("div",{id:`tads-container-${t}`})},i=o=>(r((()=>{(()=>{const e=document.createElement("link");e.rel="preconnect",e.href="https://api.tads.me",document.head.appendChild(e)})(),n((()=>{console.log("script load")}),(()=>{console.error("script error")}))}),[]),e.createElement(e.Fragment,null,o.children));export{s as TadsWidget,i as TadsWidgetProvider,d as renderTadsWidget};
 //# sourceMappingURL=index.esm.js.map

package.json

 {
   "name": "react-tads-widget",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "A React component for displaying ads using tAds",
@@ -9,2 +9,9 @@ "main": "lib/index.cjs.js",
   "type": "module",
+  "exports": {
+    ".": {
+      "import": "./lib/index.esm.js",
+      "require": "./lib/index.cjs.js",
+      "types": "./types/TadsWidget.d.ts"
+    }
+  },
   "scripts": {
@@ -11,0 +18,0 @@ "dev": "cross-env NODE_ENV=development rollup -c -w",

README.md

@@ -44,3 +44,3 @@ # React TADS Widget
         <div className="container">
-            <TadsWidget id="unique-widget-id" debug={false} onClickReward={rewardUserByClick} onAdsNotFound={onAdsNotFound} />
+            <TadsWidget id="unique-widget-id" type="static" debug={false} onClickReward={rewardUserByClick} onAdsNotFound={onAdsNotFound} />
         </div>
@@ -69,3 +69,3 @@ );
     const showFullScreen = () => {
-        renderTadsWidget({ id: 'unique-widget-id' })
+        renderTadsWidget({ id: 'unique-widget-id', type: 'fullscreen' })
     }
@@ -77,3 +77,3 @@
 
-            <TadsWidget id="unique-widget-id" debug={false} onAdsNotFound={onAdsNotFound} onShowReward={rewardUserByShow} />
+            <TadsWidget id="unique-widget-id" type="fullscreen" debug={false} onAdsNotFound={onAdsNotFound} onShowReward={rewardUserByShow} />
         </div>
@@ -88,8 +88,11 @@ );
 
-| Param         |          | Type     | Default | Description                                                                                                             |
-| ------------- | -------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------- |
-| id            | required | string   |         | Your widget id, which you get from manager of tAds                                                                      |
-| debug         | optional | boolean  | false   | flag which you can use for development mode (it doesn't collect data in your ads account and doesn't requests real ads) |
-| onShowReward  | optional | function | null    | callback which will be called after user watches ad                                                                     |
-| onClickReward | optional | function | null    | callback which will be called after user clicks ad                                                                      |
-| onAdsNotFound | optional | function | null    | callback which will be called if we don't find ads for user                                                             |
+| Param         |          | Type     |  Default | Description                                                                                                             |
+| ------------- | -------- | -------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
+| id            | required | string   |          | Your widget id, which you get from manager of tAds                                                                      |
+| type          | required | string   |  static  | Type of your widget. It can be 'static', 'fullscreen', etc. See docs to check all available types.                      |
+| debug         | optional | boolean  |  false   | flag which you can use for development mode (it doesn't collect data in your ads account and doesn't requests real ads) |
+| onShowReward  | optional | function |  null    | callback which will be called after user watches ad                                                                     |
+| onClickReward | optional | function |  null    | callback which will be called after user clicks ad                                                                      |
+| onAdsNotFound | optional | function |  null    | callback which will be called if we don't find ads for user                                                             |
+
+Read more about integration in our docs for publisher https://docs.tads.me/getting-started/publishers

src/TadsWidget.js

@@ -35,22 +35,28 @@ import React, { useEffect, useState } from 'react'
 
-async function addTelemetreeScript() {
-  await console.log('widget script installed')
+export const renderTadsWidget = ({ id, type = 'fullscreen' }) => {
+  if (!window.tads || !window.tads.controllers) {
+    console.warn('Tads not initialized')
+    return
+  }
 
-  window.tadstele = true
+  const adController = window.tads.controllers[id]
 
-  return true
-}
+  if (!adController) {
+    console.warn(`No ad controller found for widget ID: ${id}`)
+    return
+  }
 
-export const renderTadsWidget = ({ id }) => {
-  if (window.tads.controllers[id]) {
-    const adController = window.tads.controllers[id]
+  if (typeof adController.showAd !== 'function') {
+    console.warn(`showAd is not available for widget ID: ${id}`)
+    return
+  }
 
-    adController.showAd().catch(result => {
-      console.log(result) // user got error during loading ad
-      // do nothing or whatever you want
+  adController
+    .showAd()
+    .catch(err => {
+      console.error(`Error while showing ${type} ad for widget ${id}:`, err)
     })
-  }
 }
 
-export const TadsWidget = ({ id, debug, onShowReward, onClickReward, onAdsNotFound }) => {
+export const TadsWidget = ({ id, debug, type = 'STATIC', onShowReward, onClickReward, onAdsNotFound }) => {
   const [scriptState, setScriptState] = useState({
@@ -63,10 +69,7 @@ isLoaded: false,
   useEffect(() => {
-    if (scriptState.isShown) {
-      return
-    }
-    scriptState.isShown = true
+    if (scriptState.isShown) return
+    setScriptState(s => ({ ...s, isShown: true }))
 
     let widgetScript
 
-    // Функция для вставки скрипта на страницу
     const insertScript = (onLoad, onError) => {
@@ -77,17 +80,8 @@ if (window.tads) {
         widgetScript = getScript(
-          () => {
-            setScriptState(x => ({ ...x, isLoaded: true, isError: false }))
-            console.log('setScriptState isLoaded true')
-          },
-          () => {
-            setScriptState(x => ({ ...x, isLoaded: false, isError: true }))
-          }
+          () => setScriptState(x => ({ ...x, isLoaded: true, isError: false })),
+          () => setScriptState(x => ({ ...x, isLoaded: false, isError: true }))
         )
 
-        if (scriptState.isLoaded) {
-          onLoad()
-        }
-        if (scriptState.isError) {
-          onError()
-        }
+        if (scriptState.isLoaded) onLoad()
+        if (scriptState.isError) onError()
 
@@ -99,3 +93,2 @@ widgetScript.addEventListener('load', onLoad)
 
-    // Обработка ошибок при загрузке скрипта
     const handleScriptError = () => {
@@ -105,7 +98,9 @@ console.error('Failed to load Tads script.')
 
-    // Вставка скрипта tads
     insertScript(() => {
+      if (!window.tads.controllers) window.tads.controllers = {}
+
       const adController = window.tads.init({
         widgetId: id,
-        debug: debug,
+        type: type.toUpperCase(),
+        debug,
         onShowReward,
@@ -116,20 +111,13 @@ onClickReward,
 
-      !window.tads.controllers && (window.tads.controllers = {})
       window.tads.controllers[id] = adController
 
-      adController
-        .loadAd()
-        .then(data => data.type === 'STATIC' && adController.showAd())
-        .catch(result => {
-          console.log(result) // user got error during loading ad
-          // do nothing or whatever you want
-        })
+      // Только для STATIC вызываем loadAd заранее
+      if (type.toUpperCase() === 'STATIC') {
+        adController
+          .loadAd()
+          .then(data => data.type === 'STATIC' && adController.showAd())
+          .catch(console.log)
+      }
     }, handleScriptError)
 
-    // Вставка телеметрии если еще не была установлена провайдером
-    if (!window.tadstele) {
-      addTelemetreeScript()
-    }
-
-    // Функция очистки для удаления скрипта при размонтировании компонента
     return () => {
@@ -139,12 +127,7 @@ if (widgetScript) {
         widgetScript.removeEventListener('error', () => {})
-        widgetScript.remove() // Удаляем скрипт из DOM
-
-        setScriptState({
-          isLoaded: false,
-          isError: false,
-          isShown: false
-        })
+        widgetScript.remove()
+        setScriptState({ isLoaded: false, isError: false, isShown: false })
       }
     }
-  }, [id, debug, onShowReward, onClickReward, onAdsNotFound])
+  }, [id, debug, type, onShowReward, onClickReward, onAdsNotFound])
 
@@ -156,8 +139,2 @@ return <div id={`tads-container-${id}`}></div>
   useEffect(() => {
-    async function addScripts() {
-      await addTelemetreeScript()
-    }
-
-    addScripts()
-
     addPreconnect()
@@ -164,0 +141,0 @@

types/TadsWidget.d.ts

@@ -14,2 +14,3 @@ declare module "react-tads-widget" {
         id: string;
+        type?: string;
     }
@@ -16,0 +17,0 @@

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

3

-25%

Number of lines in readme file

94

2.17%

Worsened metrics

Total package byte prevSize

34466

-2.6%

Lines of code

309

-5.79%

No dependency changes