zx-sml v0.9.4

zx-sml

zx-sml is some static method library, which contains toSnakeCase, splitValue, getLocalStorage, formatDate, createElement, classNames and other methods.

zx-sml/docgen is some tool functions used in the Nodejs environment, which contains getCommentsData, outputFile, mkdirSync and other methods. It is mainly used to obtain the comment information in the code, and then output it as a Markdown file.

Install

NPM Install

npm install zx-sml

Yarn add

yarn add zx-sml

pnpm install

pnpm i zx-sml

Usage

import { formatDate } from 'zx-sml'

formatDate('2020-12-04', 'yyyy/MM/dd W')
// 2020/12/04 Fri

zx-sml/docgen

A document generator that read the comments in the code and automatically generate MarkDown documents, docs.

const { log, outputFile } = require('zx-sml/docgen');

log('hello docgen')

outputFile(path.resolve(__dirname, './src'), path.resolve(__dirname, './docs/README.md'));

Methods

$$(selector, doc)

Get the DOM elements that matches selector

• @returns HTMLElement[]

$(selector, doc)

Get the DOM element that matches selector

• @returns HTMLElement | null

base64ToBlob(base64, type)

base64 to blob data

• @returns Blob

classNames(...args)

Merge css class names. NOTE: Duplicate names will not be removed.

classNames({ active: true, zero: 0 }, ['text-center'], 'flex', 0)
// 'active text-center flex 0'

• @returns string

clearLocalStorage()

Removing all the localStorage items.

• @returns void

clearSessionStorage()

Removing all the sessionStorage items.

• @returns void

createBlobURL(blob)

creates a string containing a URL representing the object given in the parameter.

• @returns string

createElement(tag, attrs, children)

create an element

• @returns HTMLElement

createUrlForGetRequest(url, params)

Create full URL for GET request

createUrlForGetRequest('api/user', { age: 18 })
// 'api/user?age=18'
createUrlForGetRequest('api/user?class=a', { age: 18 })
// 'api/user?class=a&age=18'

• @returns string

fileToBase64(file)

read file to base64 string

• @returns Promise<string>

formatBytes(bytes, useDecimal, decimalPlaces)

Digital Information Sizes Calculator

• @returns object {unit: string, text: string, value: number, bytes: number}

formatDate(date, format, langPackage)

Date format, see date-utils-2020 for details

// timestamp
formatDate( 20210101 , 'yyyy-MM-dd hh:mm:ss') // 1970-01-01 14:36:50
// yyyyMMdd
formatDate('20210101', 'yyyy-MM-dd hh:mm:ss') // 2021-01-01 00:00:00

• @returns string

formatKeys(obj, isCamelCase)

Format the key of the object, using the toSnakeCase or toCamelCase method.

formatObjKeys({lineHeight: 1.5}) // {'line-height': 1.5}
formatObjKeys({lineHeight: 1.5, childObj: {maxWidth: 100}})
// {'line-height': 1.5, 'child-obj': {'max-width': 100}}
formatObjKeys({'line-height': 1.5}, true) // {lineHeight: 1.5}
formatObjKeys({'line-height': 1.5, 'child-obj': {'max-width': 100}}, true)
// {lineHeight: 1.5, childObj: {maxWidth: 100}}

• @returns object

getLocalStorage(key, def)

Reading the localStorage item.

• @returns any Any object the value of the key. If the key does not exist, def is returned.

getMaxZIndex(defaultZIndex)

Get the max zIndex value in the document

• @returns number

getScrollableParents(el, scrollDirection)

Get scrollable parent elements

• @returns HTMLElement[]

getSessionStorage(key, def)

Reading the sessionStorage item.

• @returns any Any object the value of the key. If the key does not exist, def is returned.

getStyleValue(el, attr, needNumber)

Get the value of CSSStyleDeclaration or CSSStyleDeclaration[attr]

• @returns string | number | CSSStyleDeclaration | CSSRule | ((index: number) => string) | ((property: string, value: string/null, priority?: string) => void) | null

isArray(input)

determines whether the passed value is an Array

• @returns boolean

isElement(el)

determines whether the el is an Element

• @returns boolean

isNumber(input)

Determine whether it is a valid number.

isNumber(10) // true
isNumber(-10.02) // true

isNumber(NaN) // false
isNumber(null) // false
isNumber(undefined) // false

• @returns boolean

isNumberLike(input)

Determine if input is a string number

• @returns boolean

isObject(input)

determines whether the passed value is an object

• @returns boolean

joinUrl(...args)

format url,

joinUrl('https://a.com/', '/news', 'detail/100001/?x=9')
// https://a.com/news/detail/100001?x=9

• @returns string

randomId(prefix, suffix)

Generate a random string id.

• @returns string Like this prefix-xxxxx-xxxxx-xxxxxxxxxx-suffix

randomStr(length)

Generate a random string with a maximum length of 1000.

• @returns string

removeLocalStorage(key)

Removing the localStorage item.

• @returns void

removeSessionStorage(key)

Removing the sessionStorage item.

• @returns void

setLocalStorage(key, value)

It's accesses the current domain's localStorage object and adds a value to it using localStorage.setItem().

• @returns void

setSessionStorage(key, value)

It's accesses the current domain's sessionStorage object and adds a value to it using sessionStorage.setItem().

• @returns void

slice(arrayLike, offset)

Convert pseudo-array to array

slice({ length: 2, 0: 100, 1: 100 }) // [100, 100]

• @returns array T[]

splitBase64(base64)

split base64 data

• @returns { type: string; data: string }

splitValue(input)

Split an attribute value into number and suffix unit. Returns [0, ''] if the string does not start with a number or -number.

splitValue('100px') // [100, 'px']
splitValue(100) // [100, '']
splitValue('2.5rem') // [2.5, 'rem']
splitValue('-2.5rem') // [-2.5, 'rem']
splitValue('50%') // [50, '%']
splitValue('1,600円') // [1600, '円']
splitValue(',1,600円') // [0, '']
splitValue('0000,600円') // [0, ',600円']

• @returns [number, string]

toCamelCase(input, isFirstCapitalLetter)

Format string as camel case

toCamelCase('hello_world') // helloWorld
toCamelCase('hello-world') // helloWorld
toCamelCase('hello world') // helloWorld
toCamelCase('hello-world', true) // HelloWorld

• @returns string

toCssValue(value, unit)

toCssValue('10 20') // 10px 20px
toCssValue('10') // 10px
toCssValue(' 25em 10px 0 8') // 25em 10px 0px 8px

• @returns string

toDate(input)

Convert input to Date, please click date-utils-2020 for details

• @returns Date | null

toNumber(input, isStrictMode, defaultValue?: number)

Convert any type to number.

toNumber('1.3rem') // 1.3
toNumber('1.3rem', true) // 0
toNumber('-12px') // -12
toNumber('-12px', true) // 0
toNumber('1,000,999Yan') // 1000999
toNumber('1,000,999', true) // 0

• @returns number

toSnakeCase(input, connectSymbol)

Format string as snake case

toSnakeCase('helloWorld') // hello-world
toSnakeCase('HelloWorld') // hello-world
toSnakeCase('helloWorld', '_') // hello_world
toSnakeCase('helloWorld', ' ') // hello world

• @returns string

toStrStyles(...styles)

Convert styles object to string. When the properties are the same, the previous object properties will be overwritten

toStrStyles({'line-height': 1.5, width: '50%'})
// `line-height:1.5;width:'50%'`
toStrStyles({lineHeight: 1.5, width: '50%'})
// `line-height:1.5;width:50%`
toStrStyles({ lineHeight: 1.5, width: '50%' }, { 'line-height': '24px' })
// line-height:24px;width:50%

• @returns string

Types

FormatDateLangPackage

The function formatDate(date, format, langPackage) args langPackage's interface. ILangPackage

type FormatDateLangPackage = ILangPackage

GetStyleValueReturnType<T, N>

type of getStyleValue return

type GetStyleValueReturnType<T, N> = T extends undefined
  ? CSSStyleDeclaration
  : N extends true
  ? number
  : string

ScrollDirection

type of scroll direction, x-axis/y-axis

type ScrollDirection = 'x' | 'y'

ILangPackage

The function formatDate(date, format, langPackage) args langPackage's interface.

interface ILangPackage {
  // Starting on sunday. For example ['周日', '周一', ..., '周六']
  weeks: string[],
  [key: string]: any
}

License

MIT License © 2022-Present Capricorncd.