@whnz/frontend-experience-css 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+interface Plugin {
+    name: string;
+    setup(): void;
+}
+interface CssPluginOptions {
+    keySelectors?: string[];
+    detectWhiteScreen?: boolean;
+}
+declare function cssPlugin(options?: CssPluginOptions): Plugin;
+
+export { type CssPluginOptions, type Plugin, cssPlugin };

package/dist/index.mjs

@@ -0,0 +1,53 @@
+import { report } from '@whnz/frontend-experience-core';
+
+// src/index.ts
+function detectWhiteScreen(delay = 3e3) {
+  setTimeout(() => {
+    const elements = document.elementsFromPoint(
+      window.innerWidth / 2,
+      window.innerHeight / 2
+    );
+    const isWhite = elements.every(
+      (el) => ["HTML", "BODY"].includes(el.tagName)
+    );
+    if (isWhite) {
+      report({
+        type: "white-screen",
+        timestamp: Date.now()
+      });
+    }
+  }, delay);
+}
+function checkVisibility(selector) {
+  const el = document.querySelector(selector);
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  const visible = rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.top < window.innerHeight;
+  if (!visible) {
+    report({
+      type: "css-visibility-error",
+      timestamp: Date.now(),
+      extra: { selector }
+    });
+  }
+}
+function cssPlugin(options = {}) {
+  return {
+    name: "css",
+    setup() {
+      var _a;
+      if (options.detectWhiteScreen !== false) {
+        detectWhiteScreen();
+      }
+      if ((_a = options.keySelectors) == null ? void 0 : _a.length) {
+        requestIdleCallback(() => {
+          options.keySelectors.forEach(checkVisibility);
+        });
+      }
+    }
+  };
+}
+
+export { cssPlugin };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;AAYA,SAAS,iBAAA,CAAkB,QAAQ,GAAA,EAAM;AACvC,EAAA,UAAA,CAAW,MAAM;AACf,IAAA,MAAM,WAAW,QAAA,CAAS,iBAAA;AAAA,MACxB,OAAO,UAAA,GAAa,CAAA;AAAA,MACpB,OAAO,WAAA,GAAc;AAAA,KACvB;AAEA,IAAA,MAAM,UAAU,QAAA,CAAS,KAAA;AAAA,MAAM,CAAC,OAC9B,CAAC,MAAA,EAAQ,MAAM,CAAA,CAAE,QAAA,CAAS,GAAG,OAAO;AAAA,KACtC;AAEA,IAAA,IAAI,OAAA,EAAS;AACX,MAAA,MAAA,CAAO;AAAA,QACL,IAAA,EAAM,cAAA;AAAA,QACN,SAAA,EAAW,KAAK,GAAA;AAAI,OACrB,CAAA;AAAA,IACH;AAAA,EACF,GAAG,KAAK,CAAA;AACV;AAEA,SAAS,gBAAgB,QAAA,EAAkB;AACzC,EAAA,MAAM,EAAA,GAAK,QAAA,CAAS,aAAA,CAAc,QAAQ,CAAA;AAC1C,EAAA,IAAI,CAAC,EAAA,EAAI;AAET,EAAA,MAAM,IAAA,GAAO,GAAG,qBAAA,EAAsB;AACtC,EAAA,MAAM,OAAA,GACJ,IAAA,CAAK,KAAA,GAAQ,CAAA,IACb,IAAA,CAAK,MAAA,GAAS,CAAA,IACd,IAAA,CAAK,MAAA,GAAS,CAAA,IACd,IAAA,CAAK,GAAA,GAAM,MAAA,CAAO,WAAA;AAEpB,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAA,CAAO;AAAA,MACL,IAAA,EAAM,sBAAA;AAAA,MACN,SAAA,EAAW,KAAK,GAAA,EAAI;AAAA,MACpB,KAAA,EAAO,EAAE,QAAA;AAAS,KACnB,CAAA;AAAA,EACH;AACF;AAEO,SAAS,SAAA,CAAU,OAAA,GAA4B,EAAC,EAAW;AAChE,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,KAAA;AAAA,IACN,KAAA,GAAQ;AAvDZ,MAAA,IAAA,EAAA;AAwDM,MAAA,IAAI,OAAA,CAAQ,sBAAsB,KAAA,EAAO;AACvC,QAAA,iBAAA,EAAkB;AAAA,MACpB;AAEA,MAAA,IAAA,CAAI,EAAA,GAAA,OAAA,CAAQ,YAAA,KAAR,IAAA,GAAA,MAAA,GAAA,EAAA,CAAsB,MAAA,EAAQ;AAChC,QAAA,mBAAA,CAAoB,MAAM;AACxB,UAAA,OAAA,CAAQ,YAAA,CAAc,QAAQ,eAAe,CAAA;AAAA,QAC/C,CAAC,CAAA;AAAA,MACH;AAAA,IACF;AAAA,GACF;AACF","file":"index.mjs","sourcesContent":["import { report } from '@whnz/frontend-experience-core';\n\nexport interface Plugin {\n  name: string;\n  setup(): void;\n}\n\nexport interface CssPluginOptions {\n  keySelectors?: string[];\n  detectWhiteScreen?: boolean;\n}\n\nfunction detectWhiteScreen(delay = 3000) {\n  setTimeout(() => {\n    const elements = document.elementsFromPoint(\n      window.innerWidth / 2,\n      window.innerHeight / 2,\n    );\n\n    const isWhite = elements.every((el) =>\n      ['HTML', 'BODY'].includes(el.tagName),\n    );\n\n    if (isWhite) {\n      report({\n        type: 'white-screen',\n        timestamp: Date.now(),\n      });\n    }\n  }, delay);\n}\n\nfunction checkVisibility(selector: string) {\n  const el = document.querySelector(selector);\n  if (!el) return;\n\n  const rect = el.getBoundingClientRect();\n  const visible =\n    rect.width > 0 &&\n    rect.height > 0 &&\n    rect.bottom > 0 &&\n    rect.top < window.innerHeight;\n\n  if (!visible) {\n    report({\n      type: 'css-visibility-error',\n      timestamp: Date.now(),\n      extra: { selector },\n    });\n  }\n}\n\nexport function cssPlugin(options: CssPluginOptions = {}): Plugin {\n  return {\n    name: 'css',\n    setup() {\n      if (options.detectWhiteScreen !== false) {\n        detectWhiteScreen();\n      }\n\n      if (options.keySelectors?.length) {\n        requestIdleCallback(() => {\n          options.keySelectors!.forEach(checkVisibility);\n        });\n      }\n    },\n  };\n}\n"]}

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@whnz/frontend-experience-css",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@whnz/frontend-experience-core": "1.0.0"
+  },
+  "scripts": {
+    "build": "tsup"
+  }
+}