sculp-js 0.0.1

package/lib/es/string.js

@@ -0,0 +1,124 @@
+/*!
+ * sculp-js v0.0.1
+ * (c) 2023-2023 chandq
+ * Released under the MIT License.
+ */
+
+/**
+ * 将字符串转换为驼峰格式
+ * @param {string} string
+ * @param {boolean} [bigger] 是否大写第一个字母
+ * @returns {string}
+ */
+const stringCamelCase = (string, bigger) => {
+    let string2 = string;
+    if (bigger) {
+        string2 = string.replace(/^./, origin => origin.toUpperCase());
+    }
+    const HUMP_RE = /[\s_-](.)/g;
+    return string2.replace(HUMP_RE, (orign, char) => char.toUpperCase());
+};
+/**
+ * 将字符串转换为连字格式
+ * @param {string} string
+ * @param {string} [separator] 分隔符，默认是"-"（短横线）
+ * @returns {string}
+ */
+const stringKebabCase = (string, separator = '-') => {
+    const string2 = string.replace(/^./, origin => origin.toLowerCase());
+    return string2.replace(/[A-Z]/g, origin => `${separator}${origin.toLowerCase()}`);
+};
+const STRING_ARABIC_NUMERALS = '0123456789';
+const STRING_LOWERCASE_ALPHA = 'abcdefghijklmnopqrstuvwxyz';
+const STRING_UPPERCASE_ALPHA = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+const placeholderRE = /%[%sdo]/g;
+/**
+ * 字符串格式化
+ * @example
+ * ```js
+ * stringFormat("My name is %s.", "zhangsan")
+ * // => "My name is zhangsan."
+ * ```
+ * @param {string} string 字符串模板，使用 %s 表示字符串，%d 表示数值，%o 表示对象，%% 表示百分号，参考 console.log
+ * @param args
+ * @returns {string}
+ */
+const stringFormat = (string, ...args) => {
+    let index = 0;
+    const result = string.replace(placeholderRE, (origin) => {
+        const arg = args[index++];
+        switch (origin) {
+            case '%%':
+                index--;
+                return '%';
+            default:
+            case '%s':
+                return String(arg);
+            case '%d':
+                return String(Number(arg));
+            case '%o':
+                return JSON.stringify(arg);
+        }
+    });
+    return [result, ...args.splice(index).map(String)].join(' ');
+};
+const ev = (expression, data) => {
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-implied-eval,@typescript-eslint/no-unsafe-return
+        return new Function('with(arguments[0]){' +
+            /****/ `if(arguments[0].${expression} === undefined)throw "";` +
+            /****/
+            /****/ `return String(arguments[0].${expression})` +
+            '}')(data);
+    }
+    catch (err) {
+        throw new SyntaxError(`无法执行表达式：${expression}`);
+    }
+};
+const templateRE = /\${(.*?)}/g;
+/**
+ * 字符串赋值
+ * @example
+ * ```js
+ * stringAssign('My name is ${user}.', { user: 'zhangsan' });
+ * // => "My name is zhangsan."
+ * ```
+ * @param {string} template
+ * @param {AnyObject} data
+ * @returns {string}
+ */
+const stringAssign = (template, data) => {
+    return template.replace(templateRE, (origin, expression) => ev(expression, data));
+};
+/**
+ * 字符串编码 HTML
+ * @example
+ * ```js
+ * stringEscapeHtml('<b>You & Me speak "xixi"</b>')
+ * // => "&lt;b&gt;You &amp; Me speak &quot;xixi&quot;&lt;/b&gt;"
+ * ```
+ * @param {string} html
+ * @returns {string}
+ */
+const stringEscapeHtml = (html) => {
+    const htmlCharRE = /[&<>"]/g;
+    const htmlCharReplacements = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;'
+    };
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return html.replace(htmlCharRE, $0 => htmlCharReplacements[$0]);
+};
+/**
+ * 字符串填充
+ * @param {number} length
+ * @param {string} value
+ * @returns {string}
+ */
+const stringFill = (length, value = ' ') => new Array(length).fill(value).join('');
+
+export { STRING_ARABIC_NUMERALS, STRING_LOWERCASE_ALPHA, STRING_UPPERCASE_ALPHA, stringAssign, stringCamelCase, stringEscapeHtml, stringFill, stringFormat, stringKebabCase };

package/lib/es/type.js

@@ -0,0 +1,28 @@
+/*!
+ * sculp-js v0.0.1
+ * (c) 2023-2023 chandq
+ * Released under the MIT License.
+ */
+
+const typeIs = (any) => Object.prototype.toString.call(any).slice(8, -1);
+// 基本数据类型判断
+const isString = (any) => typeof any === 'string';
+const isBoolean = (any) => typeof any === 'boolean';
+const isSymbol = (any) => typeof any === 'symbol';
+const isBigInt = (any) => typeof any === 'bigint';
+const isNumber = (any) => typeof any === 'number' && !Number.isNaN(any);
+const isUndefined = (any) => typeof any === 'undefined';
+const isNull = (any) => any === null;
+const isPrimitive = (any) => any === null || typeof any !== 'object';
+// 复合数据类型判断
+const isObject = (any) => typeIs(any) === 'Object';
+const isArray = (any) => Array.isArray(any);
+// eslint-disable-next-line @typescript-eslint/ban-types
+const isFunction = (any) => typeof any === 'function';
+// 对象类型判断
+const isNaN = (any) => Number.isNaN(any);
+const isDate = (any) => typeIs(any) === 'Date';
+const isError = (any) => typeIs(any) === 'Error';
+const isRegExp = (any) => typeIs(any) === 'RegExp';
+
+export { typeIs as default, isArray, isBigInt, isBoolean, isDate, isError, isFunction, isNaN, isNull, isNumber, isObject, isPrimitive, isRegExp, isString, isSymbol, isUndefined };

package/lib/es/url.js

@@ -0,0 +1,79 @@
+/*!
+ * sculp-js v0.0.1
+ * (c) 2023-2023 chandq
+ * Released under the MIT License.
+ */
+
+import { pathJoin } from './path.js';
+import { qsParse, qsStringify } from './qs.js';
+
+const anchorEl = document.createElement('a');
+/**
+ * url 解析
+ * @param {string} url
+ * @returns {Url}
+ */
+const urlParse = (url) => {
+    anchorEl.href = url;
+    const { protocol, username, password, host, port, hostname, hash, search, pathname: _pathname } = anchorEl;
+    // fix: ie 浏览器下，解析出来的 pathname 是没有 / 根的
+    const pathname = pathJoin('/', _pathname);
+    const auth = username && password ? `${username}:${password}` : '';
+    const query = search.replace(/^\?/, '');
+    const searchParams = qsParse(query);
+    const path = `${pathname}${search}`;
+    return {
+        protocol,
+        auth,
+        username,
+        password,
+        host,
+        port,
+        hostname,
+        hash,
+        search,
+        searchParams,
+        query,
+        pathname,
+        path,
+        href: url
+    };
+};
+/**
+ * url 字符化，url 对象里的 searchParams 会覆盖 url 原有的查询参数
+ * @param {Url} url
+ * @returns {string}
+ */
+const urlStringify = (url) => {
+    const { protocol, auth, host, pathname, searchParams, hash } = url;
+    const authorize = auth ? `${auth}@` : '';
+    const querystring = qsStringify(searchParams);
+    const search = querystring ? `?${querystring}` : '';
+    let hashstring = hash.replace(/^#/, '');
+    hashstring = hashstring ? '#' + hashstring : '';
+    return `${protocol}//${authorize}${host}${pathname}${search}${hashstring}`;
+};
+/**
+ * 设置 url 查询参数
+ * @param {string} url
+ * @param {AnyObject} setter
+ * @returns {string}
+ */
+const urlSetParams = (url, setter) => {
+    const p = urlParse(url);
+    Object.assign(p.searchParams, setter);
+    return urlStringify(p);
+};
+/**
+ * 删除 url 查询参数
+ * @param {string} url
+ * @param {string[]} removeKeys
+ * @returns {string}
+ */
+const urlDelParams = (url, removeKeys) => {
+    const p = urlParse(url);
+    removeKeys.forEach(key => delete p.searchParams[key]);
+    return urlStringify(p);
+};
+
+export { urlDelParams, urlParse, urlSetParams, urlStringify };

package/lib/es/watermark.js

@@ -0,0 +1,89 @@
+/*!
+ * sculp-js v0.0.1
+ * (c) 2023-2023 chandq
+ * Released under the MIT License.
+ */
+
+/*
+ * @created: Saturday, 2020-04-18 14:38:23
+ * @author: chendq
+ * ---------
+ * @desc 网页加水印的工具类
+ */
+/**
+ * canvas 实现 watermark
+ * @param {ICanvasWM} canvasWM
+ */
+const genCanvasWM = (canvasWM) => {
+    const { container = document.body, width = '300px', height = '200px', textAlign = 'center', textBaseline = 'middle', font = '20px PingFangSC-Medium,PingFang SC', 
+    // fontWeight = 500,
+    fillStyle = 'rgba(189, 177, 167, .3)', content = '请勿外传', rotate = 30, zIndex = 2147483647 } = canvasWM;
+    // 仅限主页面添加水印
+    if (!location.pathname.includes('/home')) {
+        return;
+    }
+    const args = canvasWM;
+    const canvas = document.createElement('canvas');
+    canvas.setAttribute('width', width);
+    canvas.setAttribute('height', height);
+    const ctx = canvas.getContext('2d');
+    ctx.textAlign = textAlign;
+    ctx.textBaseline = textBaseline;
+    ctx.font = font;
+    // ctx!.fontWeight = fontWeight;
+    ctx.fillStyle = fillStyle;
+    ctx.rotate((Math.PI / 180) * rotate);
+    ctx.fillText(content, parseFloat(width) / 4, parseFloat(height) / 2);
+    const base64Url = canvas.toDataURL();
+    const __wm = document.querySelector('.__wm');
+    const watermarkDiv = __wm || document.createElement('div');
+    const styleStr = `opacity: 1 !important; display: block !important; visibility: visible !important;         position:absolute;          left:0; top:0;         width:100%;          height:100%;          z-index:${zIndex};          pointer-events:none;          background-repeat:repeat;          background-image:url('${base64Url}')`;
+    watermarkDiv.setAttribute('style', styleStr);
+    watermarkDiv.classList.add('__wm');
+    watermarkDiv.classList.add('nav-height');
+    if (!__wm) {
+        container.style.position = 'relative';
+        container.appendChild(watermarkDiv);
+    }
+    const getMutableStyle = (ele) => {
+        const computedStle = getComputedStyle(ele);
+        return {
+            opacity: computedStle.getPropertyValue('opacity'),
+            zIndex: computedStle.getPropertyValue('z-index'),
+            display: computedStle.getPropertyValue('display'),
+            visibility: computedStle.getPropertyValue('visibility')
+        };
+    };
+    //@ts-ignore
+    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+    if (MutationObserver) {
+        let mo = new MutationObserver(function () {
+            const __wm = document.querySelector('.__wm'); // 只在__wm元素变动才重新调用 __canvasWM
+            if (!__wm) {
+                // 避免一直触发
+                // console.log('regenerate watermark by delete::')
+                mo.disconnect();
+                mo = null;
+                genCanvasWM(JSON.parse(JSON.stringify(args)));
+            }
+            else {
+                const { opacity, zIndex, display, visibility } = getMutableStyle(__wm);
+                if ((__wm && __wm.getAttribute('style') !== styleStr) ||
+                    !__wm ||
+                    !(opacity === '1' && zIndex === '2147483647' && display === 'block' && visibility === 'visible')) {
+                    // 避免一直触发
+                    // console.log('regenerate watermark by inline style changed ::')
+                    mo.disconnect();
+                    mo = null;
+                    container.removeChild(__wm);
+                    genCanvasWM(JSON.parse(JSON.stringify(args)));
+                }
+            }
+        });
+        mo.observe(container, { attributes: true, subtree: true, childList: true });
+    }
+};
+// 调用
+// __canvasWM({ content: 'QQMusicFE' })
+
+export { genCanvasWM };