@allurereport/web-commons 3.0.0-beta.10

package/README.md

@@ -0,0 +1,25 @@
+# Allure Web Commons
+
+[<img src="https://allurereport.org/public/img/allure-report.svg" height="85px" alt="Allure Report logo" align="right" />](https://allurereport.org "Allure Report")
+
+- Learn more about Allure Report at https://allurereport.org
+- 📚 [Documentation](https://allurereport.org/docs/) – discover official documentation for Allure Report
+- ❓ [Questions and Support](https://github.com/orgs/allure-framework/discussions/categories/questions-support) – get help from the team and community
+- 📢 [Official announcements](https://github.com/orgs/allure-framework/discussions/categories/announcements) – be in touch with the latest updates
+- 💬 [General Discussion ](https://github.com/orgs/allure-framework/discussions/categories/general-discussion) – engage in casual conversations, share insights and ideas with the community
+
+---
+
+## Overview
+
+The package includes utilities which are used in web-implementations of Allure reports.
+
+## Install
+
+Use your favorite package manager to install the package:
+
+```shell
+npm add @allurereport/web-commons
+yarn add @allurereport/web-commons
+pnpm add @allurereport/web-commons
+```

package/dist/attachments.d.ts

@@ -0,0 +1,20 @@
+export interface Attachments {
+    id?: string;
+    ext?: string;
+    contentType?: string;
+    text?: string;
+    src?: string;
+    img?: string;
+}
+export declare const fetchAttachment: (id: string, ext: string, contentType?: string) => Promise<Attachments | null>;
+export declare const blobAttachment: (id: string, ext: string, contentType: string) => Promise<Blob>;
+export declare const downloadAttachment: (id: string, ext: string, contentType: string) => Promise<void>;
+export declare const openAttachmentInNewTab: (id: string, ext: string, contentType: string) => Promise<void>;
+export declare const attachmentType: (type?: string) => {
+    type: string;
+    icon: string;
+} | {
+    type: null;
+    icon: string;
+};
+export declare const restrictedContentTypes: string[];

package/dist/attachments.js

@@ -0,0 +1,141 @@
+import { fetchReportAttachment } from "./data.js";
+const fetchFromUrl = async ({ id, ext, contentType }) => {
+    const fileName = `${id || "-"}${ext || ""}`;
+    return fetchReportAttachment(`data/attachments/${fileName}?attachment`, contentType);
+};
+export const fetchAttachment = async (id, ext, contentType) => {
+    if (!id && !ext) {
+        return null;
+    }
+    const response = await fetchFromUrl({ id, ext, contentType });
+    const fileType = attachmentType(contentType);
+    switch (fileType.type) {
+        case "svg":
+        case "image": {
+            const blob = await response.blob();
+            const img = URL.createObjectURL(blob);
+            return { img, id };
+        }
+        case "uri":
+        case "code":
+        case "html":
+        case "table":
+        case "text": {
+            const text = await response.text();
+            return { text };
+        }
+        case "video": {
+            const blob = await response.blob();
+            const src = URL.createObjectURL(blob);
+            return { src, id, contentType };
+        }
+        default:
+            return null;
+    }
+};
+export const blobAttachment = async (id, ext, contentType) => {
+    const response = await fetchFromUrl({ id, ext, contentType });
+    return await response.blob();
+};
+export const downloadAttachment = async (id, ext, contentType) => {
+    if (!id && !ext) {
+        return;
+    }
+    const fileName = `${id}${ext}`;
+    const blob = await blobAttachment(id, ext, contentType);
+    const linkUrl = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = linkUrl;
+    link.download = fileName;
+    link.click();
+    URL.revokeObjectURL(linkUrl);
+};
+export const openAttachmentInNewTab = async (id, ext, contentType) => {
+    if (!id && !ext) {
+        return;
+    }
+    const blob = await blobAttachment(id, ext, contentType);
+    const linkUrl = URL.createObjectURL(blob);
+    globalThis.open(linkUrl, "_blank");
+};
+export const attachmentType = (type) => {
+    switch (type) {
+        case "image/bmp":
+        case "image/gif":
+        case "image/tiff":
+        case "image/jpeg":
+        case "image/jpg":
+        case "image/png":
+        case "image/*":
+            return {
+                type: "image",
+                icon: "file",
+            };
+        case "text/xml":
+        case "application/xml":
+        case "application/json":
+        case "text/json":
+        case "text/yaml":
+        case "application/yaml":
+        case "application/x-yaml":
+        case "text/x-yaml":
+        case "text/css":
+            return {
+                type: "code",
+                icon: "file",
+            };
+        case "text/plain":
+        case "text/*":
+            return {
+                type: "text",
+                icon: "txt",
+            };
+        case "text/html":
+            return {
+                type: "html",
+                icon: "file",
+            };
+        case "text/csv":
+            return {
+                type: "table",
+                icon: "csv",
+            };
+        case "text/tab-separated-values":
+            return {
+                type: "table",
+                icon: "table",
+            };
+        case "image/svg+xml":
+            return {
+                type: "svg",
+                icon: "file",
+            };
+        case "video/mp4":
+        case "video/ogg":
+        case "video/webm":
+            return {
+                type: "video",
+                icon: "file",
+            };
+        case "text/uri-list":
+            return {
+                type: "uri",
+                icon: "list",
+            };
+        case "application/x-tar":
+        case "application/x-gtar":
+        case "application/x-bzip2":
+        case "application/gzip":
+        case "application/zip":
+            return {
+                type: "archive",
+                icon: "file",
+            };
+        default:
+            return {
+                type: null,
+                icon: "file",
+            };
+    }
+};
+export const restrictedContentTypes = ["application/gzip"];

package/dist/data.d.ts

@@ -0,0 +1,11 @@
+export declare const ALLURE_LIVE_RELOAD_HASH_STORAGE_KEY = "__allure_report_live_reload_hash__";
+export declare const createReportDataScript: (reportFiles?: {
+    name: string;
+    value: string;
+}[]) => string;
+export declare const ensureReportDataReady: () => Promise<unknown>;
+export declare const loadReportData: (name: string) => Promise<string>;
+export declare const reportDataUrl: (path: string, contentType?: string) => Promise<string>;
+export declare const fetchReportJsonData: <T>(path: string) => Promise<T>;
+export declare const fetchReportAttachment: (path: string, contentType?: string) => Promise<Response>;
+export declare const getReportOptions: <T>() => T;

package/dist/data.js

@@ -0,0 +1,81 @@
+export const ALLURE_LIVE_RELOAD_HASH_STORAGE_KEY = "__allure_report_live_reload_hash__";
+export const createReportDataScript = (reportFiles = []) => {
+    if (reportFiles.length === 0) {
+        return `
+      <script async>
+        window.allureReportDataReady = true;
+      </script>
+    `;
+    }
+    const reportFilesDeclaration = reportFiles.map(({ name, value }) => `d('${name}','${value}')`).join(",");
+    return `
+    <script async>
+      window.allureReportDataReady = false;
+      window.allureReportData = window.allureReportData || {};
+
+      function d(name, value){
+        return new Promise(function (resolve) {
+          window.allureReportData[name] = value;
+
+          return resolve(true);
+        });
+      }
+    </script>
+    <script defer>
+      Promise.allSettled([${reportFilesDeclaration}])
+        .then(function(){
+          window.allureReportDataReady = true;
+        })
+    </script>
+  `;
+};
+export const ensureReportDataReady = () => new Promise((resolve) => {
+    const waitForReady = () => {
+        if (globalThis.allureReportDataReady) {
+            return resolve(true);
+        }
+        setTimeout(waitForReady, 30);
+    };
+    waitForReady();
+});
+export const loadReportData = async (name) => {
+    await ensureReportDataReady();
+    return new Promise((resolve, reject) => {
+        if (globalThis.allureReportData[name]) {
+            return resolve(globalThis.allureReportData[name]);
+        }
+        else {
+            return reject(new Error(`Data "${name}" not found!`));
+        }
+    });
+};
+export const reportDataUrl = async (path, contentType = "application/octet-stream") => {
+    if (globalThis.allureReportData) {
+        const dataKey = path.replace(/\?attachment$/, "");
+        const value = await loadReportData(dataKey);
+        return `data:${contentType};base64,${value}`;
+    }
+    const baseEl = globalThis.document.head.querySelector("base")?.href ?? "https://localhost";
+    const url = new URL(path, baseEl);
+    const liveReloadHash = globalThis.localStorage.getItem(ALLURE_LIVE_RELOAD_HASH_STORAGE_KEY);
+    if (liveReloadHash) {
+        url.searchParams.set("live_reload_hash", liveReloadHash);
+    }
+    return url.pathname + url.search + url.hash;
+};
+export const fetchReportJsonData = async (path) => {
+    const url = await reportDataUrl(path);
+    const res = await globalThis.fetch(url);
+    if (!res.ok) {
+        throw new Error(`Failed to fetch ${url}, response status: ${res.status}`);
+    }
+    const data = res.json();
+    return data;
+};
+export const fetchReportAttachment = async (path, contentType) => {
+    const url = await reportDataUrl(path, contentType);
+    return globalThis.fetch(url);
+};
+export const getReportOptions = () => {
+    return globalThis.allureReportOptions;
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./data.js";
+export * from "./static.js";
+export * from "./attachments.js";

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from "./data.js";
+export * from "./static.js";
+export * from "./attachments.js";

package/dist/static.d.ts

@@ -0,0 +1,8 @@
+export declare const createScriptTag: (src: string, options?: {
+    async?: false;
+    defer?: false;
+}) => string;
+export declare const createStylesLinkTag: (src: string) => string;
+export declare const createFontLinkTag: (src: string) => string;
+export declare const createFaviconLinkTag: (src: string) => string;
+export declare const createBaseUrlScript: () => string;

package/dist/static.js

@@ -0,0 +1,25 @@
+export const createScriptTag = (src, options) => {
+    return `<script ${options?.async ? "async" : ""} ${options?.defer ? "defer" : ""} src="${src}"></script>`;
+};
+export const createStylesLinkTag = (src) => {
+    return `<link rel="stylesheet" type="text/css" href="${src}">`;
+};
+export const createFontLinkTag = (src) => {
+    return `<link rel="preload" href="${src}" as="font" type="font/woff" crossorigin /> `;
+};
+export const createFaviconLinkTag = (src) => {
+    return `<link rel="icon" href="${src}">`;
+};
+export const createBaseUrlScript = () => {
+    return `
+    <script>
+      const { origin, pathname } = window.location; 
+      const url = new URL(pathname, origin);
+      const baseEl = document.createElement("base");
+      
+      baseEl.href = url.toString();
+      
+      window.document.head.appendChild(baseEl);
+    </script>
+  `;
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@allurereport/web-commons",
+  "version": "3.0.0-beta.10",
+  "description": "Collection of utilities used across the web Allure reports",
+  "keywords": [
+    "allure",
+    "testing"
+  ],
+  "repository": "https://github.com/allure-framework/allure3",
+  "license": "Apache-2.0",
+  "author": "Qameta Software",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "run clean && tsc --project ./tsconfig.json",
+    "clean": "rimraf ./dist"
+  },
+  "dependencies": {
+    "@allurereport/core-api": "3.0.0-beta.10"
+  },
+  "devDependencies": {
+    "@stylistic/eslint-plugin": "^2.6.1",
+    "@types/eslint": "^8.56.11",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@vitest/runner": "^2.1.8",
+    "allure-js-commons": "^3.0.9",
+    "allure-vitest": "^3.0.9",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsdoc": "^50.0.0",
+    "eslint-plugin-n": "^17.10.1",
+    "eslint-plugin-no-null": "^1.0.2",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "rimraf": "^6.0.1",
+    "tslib": "^2.7.0",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.8"
+  }
+}