update how ads are checked to be more thorough. update minor things t…

…hroughout repo

.github/workflows/publish.yml

@@ -13,6 +13,7 @@ jobs:
   #       with:
   #         node-version: 12
   #     - run: yarn
+  #     - run: yarn build
 
   publish-npm:
     # needs: build

dev.tsconfig.json

@@ -2,7 +2,9 @@
   "compilerOptions": {
     "target": "es2017",
     "lib": [
+      // Required for async iterators/generators:
       "esnext.asynciterable",
+      // These are the defaults for "target": "es2017", but they have to be explicitly specified if we want to add anything to "lib":
       "es2017",
       "dom",
       "dom.iterable",
@@ -19,8 +21,10 @@
     "jsx": "react",
     "declaration": true,
     "sourceMap": true,
+    "inlineSources": true,
     "outDir": "./build",
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "allowJs": true
   },
   "include": ["./src/**/*.ts*"],
   "exclude": ["lib", "build", "node_modules"]

package.json

@@ -1,7 +1,7 @@
 {
   "name": "adblock-detect-react",
-  "version": "1.0.0-beta.2",
-  "description": "Provide React Hook that checks if AdBlock is enabled on the page.",
+  "version": "1.0.0",
+  "description": "Provides utilities to check if ad block is enabled on a page via both a React hook and a wrapper component.",
   "main": "lib/index.js",
   "module": "build/index.js",
   "types": "lib/index.d.ts",
@@ -17,15 +17,19 @@
   ],
   "keywords": [
     "react",
+    "hooks",
     "adblock",
+    "ad",
+    "block",
     "detect"
   ],
   "scripts": {
     "build": "concurrently yarn:build:prod yarn:build:dev",
     "build:prod": "tsc -b",
     "build:dev": "tsc -p dev.tsconfig.json",
     "clean": "rimraf lib build",
-    "rebuild": "yarn clean && yarn build"
+    "rebuild": "yarn clean && yarn build",
+    "publish:local": "yarn rebuild && yarn pack"
   },
   "devDependencies": {
     "@types/react": "^16.9.43",

src/hooks/useDetectAdBlock.ts

@@ -5,15 +5,41 @@ export const useDetectAdBlock = () => {
 
   useEffect(() => {
     const adToDetect = document.createElement("div");
-    adToDetect.innerHTML = " ";
-    adToDetect.className = "adsbox";
+    adToDetect.setAttribute(
+      "class",
+      "pub_300x250 pub_300x250m pub_728x90 text-ad textAd text_ad text_ads text-ads text-ad-links"
+    );
+    adToDetect.setAttribute(
+      "style",
+      "width: 1px ! important; height: 1px !important; position: absolute !important; left: -10000px !important; top: -1000px !important;"
+    );
     document.body.appendChild(adToDetect);
 
-    if (adToDetect?.offsetHeight === 0) {
+    if (
+      window.document.body.getAttribute("abp") !== null ||
+      adToDetect.offsetParent === null ||
+      adToDetect.offsetHeight == 0 ||
+      adToDetect.offsetLeft == 0 ||
+      adToDetect.offsetTop == 0 ||
+      adToDetect.offsetWidth == 0 ||
+      adToDetect.clientHeight == 0 ||
+      adToDetect.clientWidth == 0
+    ) {
       setAdBlockDetected(true);
+    } else if (window.getComputedStyle !== undefined) {
+      const adToDetectTemp = window.getComputedStyle(adToDetect, null);
+      if (
+        adToDetectTemp &&
+        (adToDetectTemp.getPropertyValue("display") == "none" ||
+          adToDetectTemp.getPropertyValue("visibility") == "hidden")
+      ) {
+        setAdBlockDetected(true);
+      }
     }
 
-    return adToDetect.remove();
+    return () => {
+      document.body.removeChild(adToDetect);
+    };
   }, []);
 
   return adBlockDetected;