micell / micell Goto Github PK
View Code? Open in Web Editor NEWA collection of functions for front-end development
Home Page: https://micell.org
License: MIT License
A collection of functions for front-end development
Home Page: https://micell.org
License: MIT License
micell.classNames(1) // => ''
For example
emitter.on(['click', 'blur'], () => {
console.log('changed')
})
The roundFloat
/ceilFloat
/floorFloat
methods is similar to Math.round
/Math.ceil
/Math.floor
for integers, these are used for decimals.
Sometimes, we need to trim the fractional part to the specified length with floor round. For example:
let pi = 3.141592654
// Retain four decimal places
let displayPi = Math.floor(pi * 10000) / 10000
// => 3.1415
Using split
/reverse
/join
methods is bad. Using the below code:
function numberFormat(num) {
const abs = Math.abs(num)
const intPart = Math.floor(abs)
const intPartStr = intPart.toString()
const decimalPart= abs - intPart
const decimalPartStr = abs - intPart === 0 ? '' : num.toString().split('.')[1]
const intLen = intPartStr.length;
const start = intLen % 3
let newIntPartStr = ''
for (let i = 0; i < intLen; i++) {
newIntPartStr += intPartStr[i]
if ((i + 1 - start) % 3 === 0 && i !== intLen- 1) {
newIntPartStr += ','
}
}
return (num >= 0 ? '' : '-') + newIntPartStr + (decimalPartStr ? `.${decimalPartStr}` : '')
}
console.log(numberFormat(0))
console.log(numberFormat(0.1))
console.log(numberFormat(1.1))
console.log(numberFormat(1234))
console.log(numberFormat(1234567.1234))
console.log(numberFormat(12345678.1234))
console.log(numberFormat(123456789.1234))
console.log(numberFormat(-0))
console.log(numberFormat(-0.1))
console.log(numberFormat(-1.1))
console.log(numberFormat(-1234))
console.log(numberFormat(-1234567.1234))
console.log(numberFormat(-12345678.1234))
console.log(numberFormat(-123456789.1234))
Output:
0
0.1
1.1
1,234
1,234,567.1234
12,345,678.1234
123,456,789.1234
-0
-0.1
-1.1
-1,234
-1,234,567.1234
-12,345,678.1234
-123,456,789.1234
While, we should add benchmark to compare the performance.
It will be better the scrollTo
method returns a Promise
.
console.log(typeof Symbol('foo')) // => 'symbol'
Github dependabot alerts show the below warning message:
Dependabot can't update vulnerable dependencies without a lockfile
Dependabot can't update vulnerable dependencies for projects without a package-lock.json or yarn.lock file as the currently installed version can't be determined.
To resolve the issue add a supported lockfile (package-lock.json or yarn.lock).
View logs or learn more about troubleshooting Dependabot errors.
micell.url.parse('http://localhost:8000/zh/docs/getting-started.html')
Output error:
micell@latest:1 Uncaught TypeError: invalid url
at Object.fn [as parse] (micell@latest:1)
at <anonymous>:1:12
Pros
Cons
Maybe, it would be better to use cypress when it supports all major browsers.
isEmptyObject({}) // => true
isEmptyObject([]) // => false
isEmptyObject(0) // => false
When the script is loaded successfully, the promise is resolved. When the script is loaded unsuccessfully, the promise is rejected.
The pageWidth
method returns the width of current page. The pageHeight
method returns the height of current page.The current page is referred as the rendering document or any DOM element.
When writing base ui component, generating className property by multiple properties is common.
For example, a button component.
Without classnames
classs Button {
public get className() {
let cls = ''
cls += ` btn-${this.type}`
cls += ` btn-${this.size}`
cls += ` btn-${this.shape}`
cls += this.block ? ' btn-block' : ''
return cls
}
}
With classnames
classs Button {
public get className() {
return classnames({
[`btn-${this.type}`]: 1,
[`btn-${this.size}`]: 1,
[`btn-${this.shape}`]: 1,
'btn-block': this.block
})
}
This function is same as classnames package.
This is not a bug. This is because of the limitation of CSSStyleDeclaration object. You can see the notes section in link https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle#Notes.
The returned CSSStyleDeclaration object contains active values for CSS property longhand names. For example, border-bottom-width instead of the border-width and border shorthand property names. It is safest to query values with only longhand names like font-size. Shorthand names like font will not work with most browsers.
So, we need change the below test cases of css method.
Line 34 in babeb0e
Line 48 in babeb0e
main
branch failed. π¨I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. Iβm sure you can resolve this πͺ.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here is some links that can help you:
If those donβt help, or if this issue is reporting something you think isnβt right, you can always ask the humans behind semantic-release.
An npm token must be created and set in the NPM_TOKEN
environment variable on your CI environment.
Please make sure to create an npm token and to set it in the NPM_TOKEN
environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/
.
Good luck with your project β¨
Your semantic-release bot π¦π
The example from document is below:
const date1 = new Date(2019, 1, 10, 0, 0, 0);
const date2 = '2019-01-01 00:00:00';
diff(date1, date2);
// => 3456000000
diff(date1, date2, 'D')
// => 40
But, the actual result is below, so the order of parameters is reversed. May we modify the document to reflect the actual.
const date1 = new Date(2019, 1, 10, 0, 0, 0);
const date2 = '2019-01-01 00:00:00';
micell.date.diff(date1, date2);
// => -3456000000
micell.date.diff(date1, date2, 'D')
// => -40
micell.regex.isEmail('[email protected]');
// => false
// It should return true.
console.log(typeof BigInt(1)); // 'bigint'
At present, the last 4 versions is not enough for some browsers, such as Safari, QQ Browser, Sogou Browser and 360 Browser.
For example
isIP
-> isIp
Of course, the original name will be remain.
Maybe, it is not a bug. It would be better if the default value of digits parameter is 0
.
The below error is thrown in a Vite + vue3 project.
X [ERROR] Could not resolve "tslib"
node_modules/micell/dist/micell.esm.js:1:25:
1 β import { __assign } from 'tslib';
β΅ ~~~~~~~
You can mark the path "tslib" as external to exclude it from the bundle, which will remove this
error.
See detail in: Alex1990/little-emitter#5
console.log(micell.lang.getType(1)) // => 'Number'
console.log(micell.lang.getType(new Date()) // => 'Date'
The default theme config of vuepress supports algolia search https://vuepress.vuejs.org/theme/default-theme-config.html#algolia-search.
Then, the user will know the method added by which version.
Why?
What need to do?
Branch ts: https://github.com/micell/micell/compare/ts?expand=1
So we could use it in the browser devtools.
We can use github security feature which includes Dependabot alerts and Code scanning alerts.
Parse a timestamp number or a parsable date string or a Date
object to an object which has 'years', 'months', 'days', 'hours', 'minutes', 'seconds' and 'milliseconds' properties.
It can accept the second parameter isUTC
: if isUTC
is true
, then UTC date will be used, or local date will be used.
Same as moment's toObject.
// GMT+0800
micell.date.parse(new Date(0))
// => { years: 1970, months: 0, dates: 1, hours: 8, minutes: 0, seconds: 0, milliseconds: 0 }
micell.date.parse(new Date(0), true)
// => { years: 1970, months: 0, dates: 1, hours: 0, minutes: 0, seconds: 0, milliseconds: 0 }
Download single file or multiple files is a common requirement in web development. In tradition, opening a new tab with the file url is a choice. But, we may need download file(s) in current page.
There are two solutions to figure out this problem.
Use download attribute in <a>
tag.
Use solution like FileSaver.js.
Others:
Tracking in travis-ci/travis-ci#6301
We may need convert an uploaded image to base64. An uploaded image is a File object which is also a Blob object.
Converting a Blob object to a Uint8Array:
blob.arrayBuffer().then((arrBuf) => {
new Uint8Array(arrBuf)
})
Then, the encode method must return a promise which is resolved with the base64 string. It breaks current api.
Or, add a new encode method (base64/encodeFile) and a new decode method (base64/decodeFile).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.