[add] Base64 encoder & decoder with Unicode support (#30)

Co-authored-by: TechQuery <[email protected]>

Author: Copilot

package.json

@@ -1,6 +1,6 @@
 {
     "name": "web-utility",
-    "version": "4.5.1",
+    "version": "4.5.3",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "Web front-end toolkit based on TypeScript",
@@ -36,20 +36,20 @@
         "@parcel/transformer-typescript-types": "~2.15.4",
         "@peculiar/webcrypto": "^1.5.0",
         "@types/jest": "^29.5.14",
-        "@types/node": "^22.17.0",
+        "@types/node": "^22.18.0",
         "@webcomponents/webcomponentsjs": "^2.8.0",
-        "core-js": "^3.44.0",
+        "core-js": "^3.45.1",
         "husky": "^9.1.7",
         "intersection-observer": "^0.12.2",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
-        "lint-staged": "^16.1.4",
+        "lint-staged": "^16.1.5",
         "open-cli": "^8.0.0",
         "parcel": "~2.15.4",
         "prettier": "^3.6.2",
         "ts-jest": "^29.4.1",
-        "typedoc": "^0.28.9",
-        "typedoc-plugin-mdn-links": "^5.0.7",
+        "typedoc": "^0.28.11",
+        "typedoc-plugin-mdn-links": "^5.0.9",
         "typescript": "~5.9.2"
     },
     "pnpm": {

pnpm-lock.yaml

@@ -1,6 +1,12 @@
 import { URLData } from './URL';
 import { HTMLProps, HTMLField, CSSStyles, CSSObject } from './DOM-type';
-import { Constructor, isEmpty, assertInheritance, toHyphenCase } from './data';
+import {
+    Constructor,
+    isEmpty,
+    assertInheritance,
+    toHyphenCase,
+    likeArray
+} from './data';
 import { toJSValue } from './parser';
 
 export const XMLNamespace = {
@@ -35,11 +41,9 @@ export function elementTypeOf(tagName: string) {
         : 'xml';
 }
 
-export function isHTMLElementClass<T extends Constructor<HTMLElement>>(
+export const isHTMLElementClass = <T extends Constructor<HTMLElement>>(
     Class: any
-): Class is T {
-    return assertInheritance(Class, HTMLElement);
-}
+): Class is T => assertInheritance(Class, HTMLElement);
 
 const nameMap = new WeakMap<Constructor<HTMLElement>, string>();
 
@@ -92,11 +96,10 @@ export function parseDOM(HTML: string) {
     });
 }
 
-export function stringifyDOM(node: Node) {
-    return new XMLSerializer()
+export const stringifyDOM = (node: Node) =>
+    new XMLSerializer()
         .serializeToString(node)
         .replace(/ xmlns="http:\/\/www.w3.org\/1999\/xhtml"/g, '');
-}
 
 export function* walkDOM<T extends Node = Node>(
     root: Node,
@@ -253,12 +256,12 @@ export interface ScrollEvent {
     links: (HTMLAnchorElement | HTMLAreaElement)[];
 }
 
-export function watchScroll(
+export const watchScroll = (
     box: HTMLElement,
     handler: (event: ScrollEvent) => any,
     depth = 6
-) {
-    return Array.from(
+) =>
+    Array.from(
         box.querySelectorAll<HTMLHeadingElement>(
             Array.from(new Array(depth), (_, index) => `h${++index}`) + ''
         ),
@@ -288,8 +291,6 @@ export function watchScroll(
             };
         }
     );
-}
-
 export function watchVisible(
     root: Element,
     handler: (visible: boolean) => any
@@ -314,9 +315,10 @@ export function watchVisible(
 export function formToJSON<T extends object = URLData<File>>(
     form: HTMLFormElement | HTMLFieldSetElement
 ) {
-    const data = {} as T;
+    const { elements } = form,
+        data = {} as T;
 
-    for (const field of form.elements) {
+    for (const field of elements) {
         let { name, value, checked, defaultValue, selectedOptions, files } =
             field as HTMLField;
         const type = (field as HTMLField).type as string;
@@ -333,8 +335,9 @@ export function formToJSON<T extends object = URLData<File>>(
             case 'radio':
             case 'checkbox':
                 if (checked)
-                    parsedValue = defaultValue ? toJSValue(defaultValue) : true;
-                else continue;
+                    parsedValue = !defaultValue || toJSValue(defaultValue);
+                else if (likeArray(elements.namedItem(name))) continue;
+                else parsedValue = false;
                 break;
             case 'select-multiple':
                 parsedValue = Array.from(selectedOptions, ({ value }) =>

source/DOM.ts

@@ -1,17 +1,16 @@
 import { isEmpty, likeArray, makeArray } from './data';
 import { parseJSON } from './parser';
 
-export function isXDomain(URI: string) {
-    return new URL(URI, document.baseURI).origin !== location.origin;
-}
+export const isXDomain = (URI: string) =>
+    new URL(URI, document.baseURI).origin !== location.origin;
 
 export type JSONValue = number | boolean | string | null;
 export interface URLData<E = unknown> {
     [key: string]: JSONValue | JSONValue[] | URLData | URLData[] | E;
 }
 
 export function parseURLData(
-    raw = globalThis.location?.search,
+    raw = globalThis.location?.search || '',
     toBuiltIn = true
 ): URLData {
     const rawData = raw
@@ -54,25 +53,21 @@ export function buildURLData(map: string[][] | Record<string, any>) {
     return new URLSearchParams(list);
 }
 
-export async function blobOf(URI: string | URL) {
-    return (await fetch(URI + '')).blob();
-}
+export const blobOf = async (URI: string | URL) =>
+    (await fetch(URI + '')).blob();
 
 const DataURI = /^data:(.+?\/(.+?))?(;base64)?,([\s\S]+)/;
 /**
  * Blob logic forked from axes's
  *
- * @see http://www.cnblogs.com/axes/p/4603984.html
+ * @see {@link http://www.cnblogs.com/axes/p/4603984.html}
  */
 export function blobFrom(URI: string) {
     var [_, type, __, base64, data] = DataURI.exec(URI) || [];
 
     data = base64 ? atob(data) : data;
 
-    const aBuffer = new ArrayBuffer(data.length);
-    const uBuffer = new Uint8Array(aBuffer);
-
-    for (let i = 0; data[i]; i++) uBuffer[i] = data.charCodeAt(i);
+    const aBuffer = Uint8Array.from(data, char => char.charCodeAt(0));
 
     return new Blob([aBuffer], { type });
 }

source/URL.ts

@@ -16,26 +16,21 @@ export type PickData<T> = Omit<T, TypeKeys<T, Function>>;
 
 export type DataKeys<T> = Exclude<keyof T, TypeKeys<T, Function>>;
 
-export function likeNull(value?: any) {
-    return !(value != null) || Number.isNaN(value);
-}
+export const likeNull = (value?: any) =>
+    !(value != null) || Number.isNaN(value);
 
-export function isEmpty(value?: any) {
-    return (
-        likeNull(value) ||
-        (typeof value === 'object' ? !Object.keys(value).length : value === '')
-    );
-}
+export const isEmpty = (value?: any) =>
+    likeNull(value) ||
+    (typeof value === 'object' ? !Object.keys(value).length : value === '');
 
 /**
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag}
  */
 export const classNameOf = (data: any): string =>
     Object.prototype.toString.call(data).slice(8, -1);
 
-export function assertInheritance(Sub: Function, Super: Function) {
-    return Sub.prototype instanceof Super;
-}
+export const assertInheritance = (Sub: Function, Super: Function) =>
+    Sub.prototype instanceof Super;
 
 export function proxyPrototype<T extends object>(
     target: T,
@@ -62,29 +57,24 @@ export function proxyPrototype<T extends object>(
     Object.setPrototypeOf(target, prototypeProxy);
 }
 
-export function isUnsafeNumeric(raw: string) {
-    return (
-        /^[\d.]+$/.test(raw) &&
-        raw.localeCompare(Number.MAX_SAFE_INTEGER + '', undefined, {
-            numeric: true
-        }) > 0
-    );
-}
+export const isUnsafeNumeric = (raw: string) =>
+    /^[\d.]+$/.test(raw) &&
+    raw.localeCompare(Number.MAX_SAFE_INTEGER + '', undefined, {
+        numeric: true
+    }) > 0;
 
-export function byteLength(raw: string) {
-    return raw.replace(/[^\u0021-\u007e\uff61-\uffef]/g, 'xx').length;
-}
+export const byteLength = (raw: string) =>
+    raw.replace(/[^\u0021-\u007e\uff61-\uffef]/g, 'xx').length;
 
 export type HyphenCase<T extends string> = T extends `${infer L}${infer R}`
     ? `${L extends Uppercase<L> ? `-${Lowercase<L>}` : L}${HyphenCase<R>}`
     : T;
-export function toHyphenCase(raw: string) {
-    return raw.replace(
+export const toHyphenCase = (raw: string) =>
+    raw.replace(
         /[A-Z]+|[^A-Za-z][A-Za-z]/g,
         (match, offset) =>
             `${offset ? '-' : ''}${(match[1] || match[0]).toLowerCase()}`
     );
-}
 
 export type CamelCase<
     Raw extends string,
@@ -94,23 +84,40 @@ export type CamelCase<
         ? `${Capitalize<L>}${Capitalize<CamelCase<R>>}`
         : `${Capitalize<Raw>}`
 >;
-export function toCamelCase(raw: string, large = false) {
-    return raw.replace(/^[A-Za-z]|[^A-Za-z][A-Za-z]/g, (match, offset) =>
+export const toCamelCase = (raw: string, large = false) =>
+    raw.replace(/^[A-Za-z]|[^A-Za-z][A-Za-z]/g, (match, offset) =>
         offset || large
             ? (match[1] || match[0]).toUpperCase()
             : match.toLowerCase()
     );
-}
 
-export function uniqueID() {
-    return (Date.now() + parseInt((Math.random() + '').slice(2))).toString(36);
-}
+export const uniqueID = () =>
+    (Date.now() + parseInt((Math.random() + '').slice(2))).toString(36);
 
-export function objectFrom<V, K extends string>(values: V[], keys: K[]) {
-    return Object.fromEntries(
+/**
+ * Encode string to Base64 with Unicode support
+ *
+ * @param input - String to encode
+ * @returns Base64 encoded string
+ */
+export const encodeBase64 = (input: string) =>
+    btoa(String.fromCharCode(...new TextEncoder().encode(input)));
+
+/**
+ * Decode Base64 string with Unicode support
+ *
+ * @param input - Base64 encoded string to decode
+ * @returns Decoded Unicode string
+ */
+export const decodeBase64 = (input: string) =>
+    new TextDecoder().decode(
+        Uint8Array.from(atob(input), char => char.charCodeAt(0))
+    );
+
+export const objectFrom = <V, K extends string>(values: V[], keys: K[]) =>
+    Object.fromEntries(
         values.map((value, index) => [keys[index], value])
     ) as Record<K, V>;
-}
 
 export enum DiffStatus {
     Old = -1,

source/data.ts

@@ -181,7 +181,7 @@ object-fit: contain;`);
     it('should convert a Form to JSON', () => {
         document.body.innerHTML = `
         <form>
-            <input type="checkbox" name="switch" checked>
+            <input type="checkbox" name="switch">
 
             <input type="checkbox" name="list" value="01" checked>
             <input type="checkbox" name="list" value="02">
@@ -215,7 +215,7 @@ object-fit: contain;`);
 
         expect(data).toEqual(
             expect.objectContaining({
-                switch: true,
+                switch: false,
                 list: ['01', '03'],
                 array: [2, 3],
                 test: { example: '123', other: 2 },

test/DOM.spec.ts

@@ -1,3 +1,4 @@
+import './polyfill';
 import 'core-js/proposals/promise-with-resolvers';
 import {
     likeNull,
@@ -8,6 +9,8 @@ import {
     byteLength,
     toHyphenCase,
     toCamelCase,
+    encodeBase64,
+    decodeBase64,
     objectFrom,
     DiffStatus,
     diffKeys,
@@ -103,6 +106,35 @@ describe('Data', () => {
         expect(toCamelCase('Small Camel')).toBe('smallCamel');
     });
 
+    it('should encode and decode Base64 with Unicode support', () => {
+        // Test basic ASCII
+        const ascii = 'Hello World';
+        expect(decodeBase64(encodeBase64(ascii))).toBe(ascii);
+
+        // Test Unicode characters
+        const unicode = 'Hello 世界 🌍 😀';
+        expect(decodeBase64(encodeBase64(unicode))).toBe(unicode);
+
+        // Test various Unicode ranges
+        const emoji = '🚀🎉🌟💖';
+        expect(decodeBase64(encodeBase64(emoji))).toBe(emoji);
+
+        // Test mathematical symbols
+        const math = '∑∏∫∆∇∂';
+        expect(decodeBase64(encodeBase64(math))).toBe(math);
+
+        // Test empty string
+        expect(decodeBase64(encodeBase64(''))).toBe('');
+
+        // Test known Base64 encoding
+        expect(encodeBase64('Hello')).toBe('SGVsbG8=');
+        expect(decodeBase64('SGVsbG8=')).toBe('Hello');
+
+        // Test known Unicode encoding
+        expect(encodeBase64('世界')).toBe('5LiW55WM');
+        expect(decodeBase64('5LiW55WM')).toBe('世界');
+    });
+
     it('should build an Object with Key & Value arrays', () => {
         expect(objectFrom([1, '2'], ['x', 'y'])).toStrictEqual({
             x: 1,

test/data.spec.ts

@@ -1,9 +1,9 @@
 import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';
-import { TextEncoder } from 'util';
+import { TextEncoder, TextDecoder } from 'util';
 import { Crypto } from '@peculiar/webcrypto';
 import 'intersection-observer';
 
-const polyfill = { TextEncoder, crypto: new Crypto() };
+const polyfill = { TextEncoder, TextDecoder, crypto: new Crypto() };
 
 for (const [key, value] of Object.entries(polyfill))
     Object.defineProperty(globalThis, key, { value });