@etsoo/shared 1.1.84 → 1.1.86

package/README.md

@@ -32,6 +32,15 @@ $ yarn add @etsoo/shared
 ## storage
 Storage interface and browser storage implementation
 
+## ContentDisposition
+Content disposition of HTTP
+
+|Name|Description|
+|---:|---|
+|static parse|Parse header value|
+|Methods||
+|format|Format to standard output|
+
 ## EColor
 Etsoo implmented Color
 
@@ -182,6 +191,7 @@ DOM/window related utilities
 |detectedCountry|Current detected country|
 |detectedCulture|Current detected culture|
 |dimensionEqual|Check two rectangles equality|
+|downloadFile|Download file from API fetch response body|
 |fileToDataURL|File to data URL|
 |formDataToObject|Form data to object|
 |getCulture|Get the available culture definition|

package/__tests__/ContentDisposition.ts

@@ -0,0 +1,24 @@
+import { ContentDisposition } from '../src/types/ContentDisposition';
+
+test('Tests for parse', () => {
+    const cd1 = ContentDisposition.parse(
+        "attachment; filename=__PDF.pdf; filename*=UTF-8''%E6%B5%8B%E8%AF%95PDF.pdf"
+    );
+
+    const cd2 = ContentDisposition.parse(
+        `attachment; filename="__PDF.pdf"; filename*="UTF-8''%E6%B5%8B%E8%AF%95PDF.pdf"`
+    );
+
+    expect(cd1?.type).toBe(cd2?.type);
+    expect(cd1?.filename).toBe(cd2?.filename);
+    expect(cd1?.filename).toBe('测试PDF.pdf');
+});
+
+test('Tests for format', () => {
+    const cd1 = new ContentDisposition('form-data', 'a-b.jpg', 'file');
+    expect(cd1.format()).toBe(`form-data; name="file"; filename="a-b.jpg"`);
+    const cd2 = new ContentDisposition('attachment', '测试PDF.pdf');
+    expect(cd2.format()).toBe(
+        `attachment; filename="__PDF.pdf"; filename*="UTF-8''%E6%B5%8B%E8%AF%95PDF.pdf"`
+    );
+});

package/lib/cjs/DomUtils.d.ts

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 import { DataTypes } from './DataTypes';
 import { FormDataFieldValue, IFormData } from './types/FormData';
 /**
@@ -50,6 +51,13 @@ export declare namespace DomUtils {
      * @param d2 Dimension 2
      */
     function dimensionEqual(d1?: DOMRect, d2?: DOMRect): boolean;
+    /**
+     * Download file from API fetch response body
+     * @param data Data
+     * @param suggestedName Suggested file name
+     * @param autoDetect Auto detect, false will use link click way
+     */
+    function downloadFile(data: ReadableStream | Blob, suggestedName?: string, autoDetect?: boolean): Promise<void>;
     /**
      * File to data URL
      * @param file File

package/lib/cjs/DomUtils.js

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DomUtils = void 0;
+/// <reference lib="dom" />
 const DataTypes_1 = require("./DataTypes");
 if (typeof navigator === 'undefined') {
     // Test mock only
@@ -231,6 +232,48 @@ var DomUtils;
         return false;
     }
     DomUtils.dimensionEqual = dimensionEqual;
+    /**
+     * Download file from API fetch response body
+     * @param data Data
+     * @param suggestedName Suggested file name
+     * @param autoDetect Auto detect, false will use link click way
+     */
+    function downloadFile(data, suggestedName, autoDetect = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                if (autoDetect && 'showSaveFilePicker' in globalThis) {
+                    const handle = yield globalThis.showSaveFilePicker({
+                        suggestedName
+                    });
+                    const stream = yield handle.createWritable();
+                    if (data instanceof Blob) {
+                        data.stream().pipeTo(stream);
+                    }
+                    else {
+                        yield data.pipeTo(stream);
+                    }
+                }
+                else {
+                    const url = window.URL.createObjectURL(data instanceof Blob
+                        ? data
+                        : yield new Response(data).blob());
+                    const a = document.createElement('a');
+                    a.style.display = 'none';
+                    a.href = url;
+                    if (suggestedName)
+                        a.download = suggestedName;
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    window.URL.revokeObjectURL(url);
+                }
+            }
+            catch (e) {
+                console.log(e);
+            }
+        });
+    }
+    DomUtils.downloadFile = downloadFile;
     /**
      * File to data URL
      * @param file File

package/lib/cjs/index.d.ts

@@ -1,3 +1,4 @@
+export * from './types/ContentDisposition';
 export * from './types/DelayedExecutorType';
 export * from './types/EColor';
 export * from './types/EHistory';

package/lib/cjs/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types/ContentDisposition"), exports);
 __exportStar(require("./types/DelayedExecutorType"), exports);
 __exportStar(require("./types/EColor"), exports);
 __exportStar(require("./types/EHistory"), exports);

package/lib/cjs/types/ContentDisposition.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Content disposition of HTTP
+ * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition
+ */
+export declare class ContentDisposition {
+    readonly type: string;
+    readonly filename: string;
+    readonly name?: string | undefined;
+    constructor(type: 'inline' | 'attachment', filename: string);
+    constructor(type: 'form-data', filename: string, name: string);
+    /**
+     * Format to standard output
+     * @returns Result
+     */
+    format(): string;
+    /**
+     * Parse header value
+     * @param header Content-Disposition header value
+     * @returns Object
+     */
+    static parse(header: string | undefined | null): ContentDisposition | undefined;
+}

package/lib/cjs/types/ContentDisposition.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentDisposition = void 0;
+const Utils_1 = require("../Utils");
+/**
+ * Content disposition of HTTP
+ * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition
+ */
+class ContentDisposition {
+    constructor(type, filename, name) {
+        this.type = type;
+        this.filename = filename;
+        this.name = name;
+    }
+    /**
+     * Format to standard output
+     * @returns Result
+     */
+    format() {
+        const items = [this.type];
+        if (this.name)
+            items.push(`name="${this.name}"`);
+        const filename1 = this.filename.replace(/[^a-zA-Z0-9\.-]/g, '_');
+        items.push(`filename="${filename1}"`);
+        if (filename1 != this.filename)
+            items.push(`filename*="UTF-8''${encodeURIComponent(this.filename)}"`);
+        return items.join('; ');
+    }
+    /**
+     * Parse header value
+     * @param header Content-Disposition header value
+     * @returns Object
+     */
+    static parse(header) {
+        if (!header)
+            return undefined;
+        const parts = header.trim().split(/\s*;\s*/g);
+        const len = parts.length;
+        if (len < 2)
+            return undefined;
+        const type = parts[0];
+        let name;
+        let filename = '';
+        for (let i = 1; i < len; i++) {
+            const part = parts[i];
+            let [field, value] = part.split(/\s*=\s*/g);
+            // case-insensitive
+            field = field.toLowerCase();
+            // Remove quotes
+            value = Utils_1.Utils.trim(value, '"');
+            if (field === 'name') {
+                name = value;
+            }
+            else if (field === 'filename') {
+                if (filename === '')
+                    filename = value;
+            }
+            else if (field === 'filename*') {
+                const pos = value.indexOf("''");
+                filename =
+                    pos == -1
+                        ? value
+                        : decodeURIComponent(value.substring(pos + 2));
+            }
+        }
+        if (type === 'form-data') {
+            return new ContentDisposition(type, filename, name !== null && name !== void 0 ? name : 'file');
+        }
+        if (type === 'inline' || type === 'attachment') {
+            return new ContentDisposition(type, filename);
+        }
+        return undefined;
+    }
+}
+exports.ContentDisposition = ContentDisposition;

package/lib/mjs/DomUtils.d.ts

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 import { DataTypes } from './DataTypes';
 import { FormDataFieldValue, IFormData } from './types/FormData';
 /**
@@ -50,6 +51,13 @@ export declare namespace DomUtils {
      * @param d2 Dimension 2
      */
     function dimensionEqual(d1?: DOMRect, d2?: DOMRect): boolean;
+    /**
+     * Download file from API fetch response body
+     * @param data Data
+     * @param suggestedName Suggested file name
+     * @param autoDetect Auto detect, false will use link click way
+     */
+    function downloadFile(data: ReadableStream | Blob, suggestedName?: string, autoDetect?: boolean): Promise<void>;
     /**
      * File to data URL
      * @param file File

package/lib/mjs/DomUtils.js

@@ -7,6 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+/// <reference lib="dom" />
 import { DataTypes } from './DataTypes';
 if (typeof navigator === 'undefined') {
     // Test mock only
@@ -228,6 +229,48 @@ export var DomUtils;
         return false;
     }
     DomUtils.dimensionEqual = dimensionEqual;
+    /**
+     * Download file from API fetch response body
+     * @param data Data
+     * @param suggestedName Suggested file name
+     * @param autoDetect Auto detect, false will use link click way
+     */
+    function downloadFile(data, suggestedName, autoDetect = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                if (autoDetect && 'showSaveFilePicker' in globalThis) {
+                    const handle = yield globalThis.showSaveFilePicker({
+                        suggestedName
+                    });
+                    const stream = yield handle.createWritable();
+                    if (data instanceof Blob) {
+                        data.stream().pipeTo(stream);
+                    }
+                    else {
+                        yield data.pipeTo(stream);
+                    }
+                }
+                else {
+                    const url = window.URL.createObjectURL(data instanceof Blob
+                        ? data
+                        : yield new Response(data).blob());
+                    const a = document.createElement('a');
+                    a.style.display = 'none';
+                    a.href = url;
+                    if (suggestedName)
+                        a.download = suggestedName;
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    window.URL.revokeObjectURL(url);
+                }
+            }
+            catch (e) {
+                console.log(e);
+            }
+        });
+    }
+    DomUtils.downloadFile = downloadFile;
     /**
      * File to data URL
      * @param file File

package/lib/mjs/index.d.ts

@@ -1,3 +1,4 @@
+export * from './types/ContentDisposition';
 export * from './types/DelayedExecutorType';
 export * from './types/EColor';
 export * from './types/EHistory';

package/lib/mjs/index.js

@@ -1,3 +1,4 @@
+export * from './types/ContentDisposition';
 export * from './types/DelayedExecutorType';
 export * from './types/EColor';
 export * from './types/EHistory';

package/lib/mjs/types/ContentDisposition.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Content disposition of HTTP
+ * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition
+ */
+export declare class ContentDisposition {
+    readonly type: string;
+    readonly filename: string;
+    readonly name?: string | undefined;
+    constructor(type: 'inline' | 'attachment', filename: string);
+    constructor(type: 'form-data', filename: string, name: string);
+    /**
+     * Format to standard output
+     * @returns Result
+     */
+    format(): string;
+    /**
+     * Parse header value
+     * @param header Content-Disposition header value
+     * @returns Object
+     */
+    static parse(header: string | undefined | null): ContentDisposition | undefined;
+}

package/lib/mjs/types/ContentDisposition.js

@@ -0,0 +1,71 @@
+import { Utils } from '../Utils';
+/**
+ * Content disposition of HTTP
+ * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition
+ */
+export class ContentDisposition {
+    constructor(type, filename, name) {
+        this.type = type;
+        this.filename = filename;
+        this.name = name;
+    }
+    /**
+     * Format to standard output
+     * @returns Result
+     */
+    format() {
+        const items = [this.type];
+        if (this.name)
+            items.push(`name="${this.name}"`);
+        const filename1 = this.filename.replace(/[^a-zA-Z0-9\.-]/g, '_');
+        items.push(`filename="${filename1}"`);
+        if (filename1 != this.filename)
+            items.push(`filename*="UTF-8''${encodeURIComponent(this.filename)}"`);
+        return items.join('; ');
+    }
+    /**
+     * Parse header value
+     * @param header Content-Disposition header value
+     * @returns Object
+     */
+    static parse(header) {
+        if (!header)
+            return undefined;
+        const parts = header.trim().split(/\s*;\s*/g);
+        const len = parts.length;
+        if (len < 2)
+            return undefined;
+        const type = parts[0];
+        let name;
+        let filename = '';
+        for (let i = 1; i < len; i++) {
+            const part = parts[i];
+            let [field, value] = part.split(/\s*=\s*/g);
+            // case-insensitive
+            field = field.toLowerCase();
+            // Remove quotes
+            value = Utils.trim(value, '"');
+            if (field === 'name') {
+                name = value;
+            }
+            else if (field === 'filename') {
+                if (filename === '')
+                    filename = value;
+            }
+            else if (field === 'filename*') {
+                const pos = value.indexOf("''");
+                filename =
+                    pos == -1
+                        ? value
+                        : decodeURIComponent(value.substring(pos + 2));
+            }
+        }
+        if (type === 'form-data') {
+            return new ContentDisposition(type, filename, name !== null && name !== void 0 ? name : 'file');
+        }
+        if (type === 'inline' || type === 'attachment') {
+            return new ContentDisposition(type, filename);
+        }
+        return undefined;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/shared",
-    "version": "1.1.84",
+    "version": "1.1.86",
     "description": "TypeScript shared utilities and functions",
     "main": "lib/cjs/index.js",
     "module": "lib/mjs/index.js",
@@ -54,13 +54,8 @@
     },
     "homepage": "https://github.com/ETSOO/Shared#readme",
     "devDependencies": {
-        "@types/jest": "^29.2.4",
+        "@types/jest": "^29.2.5",
         "@types/lodash.isequal": "^4.5.6",
-        "@typescript-eslint/eslint-plugin": "^5.47.0",
-        "@typescript-eslint/parser": "^5.47.0",
-        "eslint": "^8.30.0",
-        "eslint-config-airbnb-base": "^15.0.0",
-        "eslint-plugin-import": "^2.26.0",
         "jest": "^29.3.1",
         "jest-environment-jsdom": "^29.3.1",
         "ts-jest": "^29.0.3",

package/src/DomUtils.ts

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 import { DataTypes } from './DataTypes';
 import { FormDataFieldValue, IFormData } from './types/FormData';
 
@@ -270,6 +271,53 @@ export namespace DomUtils {
         return false;
     }
 
+    /**
+     * Download file from API fetch response body
+     * @param data Data
+     * @param suggestedName Suggested file name
+     * @param autoDetect Auto detect, false will use link click way
+     */
+    export async function downloadFile(
+        data: ReadableStream | Blob,
+        suggestedName?: string,
+        autoDetect: boolean = true
+    ) {
+        try {
+            if (autoDetect && 'showSaveFilePicker' in globalThis) {
+                const handle = await (globalThis as any).showSaveFilePicker({
+                    suggestedName
+                });
+
+                const stream = await handle.createWritable();
+
+                if (data instanceof Blob) {
+                    data.stream().pipeTo(stream);
+                } else {
+                    await data.pipeTo(stream);
+                }
+            } else {
+                const url = window.URL.createObjectURL(
+                    data instanceof Blob
+                        ? data
+                        : await new Response(data).blob()
+                );
+
+                const a = document.createElement('a');
+                a.style.display = 'none';
+                a.href = url;
+                if (suggestedName) a.download = suggestedName;
+
+                document.body.appendChild(a);
+                a.click();
+                a.remove();
+
+                window.URL.revokeObjectURL(url);
+            }
+        } catch (e) {
+            console.log(e);
+        }
+    }
+
     /**
      * File to data URL
      * @param file File

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from './types/ContentDisposition';
 export * from './types/DelayedExecutorType';
 export * from './types/EColor';
 export * from './types/EHistory';

package/src/types/ContentDisposition.ts

@@ -0,0 +1,81 @@
+import { Utils } from '../Utils';
+
+/**
+ * Content disposition of HTTP
+ * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition
+ */
+export class ContentDisposition {
+    constructor(type: 'inline' | 'attachment', filename: string);
+    constructor(type: 'form-data', filename: string, name: string);
+    constructor(
+        public readonly type: string,
+        public readonly filename: string,
+        public readonly name?: string
+    ) {}
+
+    /**
+     * Format to standard output
+     * @returns Result
+     */
+    format() {
+        const items = [this.type];
+        if (this.name) items.push(`name="${this.name}"`);
+        const filename1 = this.filename.replace(/[^a-zA-Z0-9\.-]/g, '_');
+        items.push(`filename="${filename1}"`);
+        if (filename1 != this.filename)
+            items.push(
+                `filename*="UTF-8''${encodeURIComponent(this.filename)}"`
+            );
+        return items.join('; ');
+    }
+
+    /**
+     * Parse header value
+     * @param header Content-Disposition header value
+     * @returns Object
+     */
+    static parse(header: string | undefined | null) {
+        if (!header) return undefined;
+
+        const parts = header.trim().split(/\s*;\s*/g);
+        const len = parts.length;
+        if (len < 2) return undefined;
+
+        const type = parts[0];
+        let name: string | undefined;
+        let filename: string = '';
+
+        for (let i = 1; i < len; i++) {
+            const part = parts[i];
+            let [field, value] = part.split(/\s*=\s*/g);
+
+            // case-insensitive
+            field = field.toLowerCase();
+
+            // Remove quotes
+            value = Utils.trim(value, '"');
+
+            if (field === 'name') {
+                name = value;
+            } else if (field === 'filename') {
+                if (filename === '') filename = value;
+            } else if (field === 'filename*') {
+                const pos = value.indexOf("''");
+                filename =
+                    pos == -1
+                        ? value
+                        : decodeURIComponent(value.substring(pos + 2));
+            }
+        }
+
+        if (type === 'form-data') {
+            return new ContentDisposition(type, filename, name ?? 'file');
+        }
+
+        if (type === 'inline' || type === 'attachment') {
+            return new ContentDisposition(type, filename);
+        }
+
+        return undefined;
+    }
+}