@whnz/frontend-experience-css 1.0.0 → 1.0.3

package/dist/{index.mjs → index.js}

@@ -49,5 +49,5 @@ function cssPlugin(options = {}) {
 }
 
 export { cssPlugin };
-//# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.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.js","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

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

package/dist/index.mjs.map

@@ -1 +0,0 @@
-{"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"]}