janishutz/color-thief
1
0
Fork 0
mirror of https://github.com/janishutz/color-thief.git synced 2025-11-25 13:54:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add eslint, format

Browse Source
This commit is contained in:
Janis Hutz
2025-05-05 16:14:57 +02:00
parent 8e4cb217bb
commit bbbcb6c7a8
6 changed files with 1016 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
build/build.mjs
View File

@@ -22,7 +22,7 @@ const workingDir = path.resolve( path.dirname( '' ) );
const umdPath = path.join( workingDir, umdRelPath ); const umdPath = path.join( workingDir, umdRelPath );
const legacyPath = path.join( workingDir, legacyRelPath ); const legacyPath = path.join( workingDir, legacyRelPath );
copyFile( umdPath, legacyPath, ( err ) => { copyFile( umdPath, legacyPath, err => {
if ( err ) throw err; if ( err ) throw err;
console.log( `${ umdRelPath } copied to ${ legacyRelPath }.` ); console.log( `${ umdRelPath } copied to ${ legacyRelPath }.` );
} ); } );
@@ -32,19 +32,19 @@ const distNodeRelPath = 'dist/color-thief-node.js';
const srcNodePath = path.join( workingDir, srcNodeRelPath ); const srcNodePath = path.join( workingDir, srcNodeRelPath );
const distNodePath = path.join( workingDir, distNodeRelPath ); const distNodePath = path.join( workingDir, distNodeRelPath );
copyFile( srcNodePath, distNodePath, ( err ) => { copyFile( srcNodePath, distNodePath, err => {
if ( err ) throw err; if ( err ) throw err;
console.log( `${ srcNodeRelPath } copied to ${ distNodeRelPath }.` ); console.log( `${ srcNodeRelPath } copied to ${ distNodeRelPath }.` );
} ); } );
// Copy the .d.ts files to dist as well // Copy the .d.ts files to dist as well
copyFile( path.join( workingDir, 'built/color-thief-node.d.ts' ), path.join( workingDir, 'dist/color-thief-node.d.ts' ), ( err ) => { copyFile( path.join( workingDir, 'built/color-thief-node.d.ts' ), path.join( workingDir, 'dist/color-thief-node.d.ts' ), err => {
if ( err ) throw err; if ( err ) throw err;
console.log( 'Definitions copied (node)' ); console.log( 'Definitions copied (node)' );
} ); } );
copyFile( path.join( workingDir, 'built/color-thief.d.ts' ), path.join( workingDir, 'dist/color-thief.d.ts' ), ( err ) => { copyFile( path.join( workingDir, 'built/color-thief.d.ts' ), path.join( workingDir, 'dist/color-thief.d.ts' ), err => {
if ( err ) throw err; if ( err ) throw err;
console.log( 'Definitions copied (node)' ); console.log( 'Definitions copied (node)' );
} ); } );

162
eslint.config.mjs
View File

@@ -1,65 +1,119 @@
// @ts-check import vue from 'eslint-plugin-vue';
import eslint from '@eslint/js'; import eslint from '@eslint/js';
import tseslint from 'typescript-eslint'; import typescript from '@typescript-eslint/eslint-plugin';
import stylistic from '@stylistic/eslint-plugin'; import stylistic from '@stylistic/eslint-plugin';
import tseslint from 'typescript-eslint';
const style = {
'plugins': {
'@stylistic': stylistic,
'@stylistic/js': stylistic,
'@stylistic/ts': stylistic,
},
'rules': {
// Formatting
'@stylistic/array-bracket-newline': [ 'error', { 'multiline': true, 'minItems': 4 } ],
'@stylistic/array-bracket-spacing': [ 'error', 'always' ],
'@stylistic/array-element-newline': [ 'error', { 'multiline': true, 'minItems': 4 } ],
'@stylistic/arrow-parens': [ 'error', 'as-needed' ],
'@stylistic/arrow-spacing': [ 'error', { 'before': true, 'after': true } ],
'@stylistic/block-spacing': [ 'error', 'always' ],
'@stylistic/brace-style': [ 'error', '1tbs' ],
'@stylistic/comma-spacing': [ 'error', { 'before': false, 'after': true } ],
'@stylistic/comma-style': [ 'error', 'last' ],
'@stylistic/dot-location': [ 'error', 'property' ],
'@stylistic/eol-last': [ 'error', 'always' ],
'@stylistic/function-call-spacing': [ 'error', 'never' ],
'@stylistic/implicit-arrow-linebreak': [ 'error', 'beside' ],
'@stylistic/indent': [ 'error', 4 ],
'@stylistic/key-spacing': [ 'error', { 'beforeColon': false, 'afterColon': true } ],
'@stylistic/keyword-spacing': [ 'error', { 'before': true, 'after': true } ],
'@stylistic/lines-between-class-members': [ 'error', 'always' ],
'@stylistic/new-parens': [ 'error', 'always' ],
'@stylistic/no-extra-parens': [ 'error', 'all' ],
'@stylistic/no-extra-semi': 'error',
'@stylistic/no-floating-decimal': 'error',
'@stylistic/no-mixed-operators': 'error',
'@stylistic/no-mixed-spaces-and-tabs': 'error',
'@stylistic/no-multi-spaces': 'error',
'@stylistic/no-trailing-spaces': 'error',
'@stylistic/no-whitespace-before-property': 'error',
'@stylistic/object-curly-newline': [ 'error', { 'multiline': true, 'minProperties': 3 } ],
'@stylistic/object-curly-spacing': [ 'error', 'always' ],
'@stylistic/one-var-declaration-per-line': 'error',
'@stylistic/quote-props': [ 'error', 'always' ],
'@stylistic/quotes': [ 'error', 'single' ],
'@stylistic/rest-spread-spacing': [ 'error', 'never' ],
'@stylistic/semi': [ 'error', 'always' ],
'@stylistic/semi-spacing': [ 'error', { 'before': false, 'after': true } ],
'@stylistic/semi-style': [ 'error', 'last' ],
'@stylistic/space-before-blocks': [ 'error', 'always' ],
'@stylistic/space-before-function-paren': [ 'error', 'always' ],
'@stylistic/space-in-parens': [ 'error', 'always' ],
'@stylistic/space-infix-ops': [ 'error', { 'int32Hint': false } ],
'@stylistic/space-unary-ops': 'error',
'@stylistic/spaced-comment': [ 'error', 'always' ],
'@stylistic/switch-colon-spacing': 'error',
'@stylistic/template-curly-spacing': [ 'error', 'always' ],
'@stylistic/wrap-iife': [ 'error', 'inside' ],
'@stylistic/wrap-regex': 'error',
'@stylistic/ts/type-annotation-spacing': 'error',
}
};
/** @type {import('eslint').Linter.FlatConfig[]} */
export default tseslint.config( export default tseslint.config(
// Base JavaScript rules
eslint.configs.recommended, eslint.configs.recommended,
...tseslint.configs.recommended, ...tseslint.configs.recommended,
style,
// TypeScript support
// {
// files: ['**/*.ts', '**/*.tsx'],
// languageOptions: {
// parser: parserTs,
// parserOptions: {
// ecmaVersion: 'latest',
// sourceType: 'module',
// project: './tsconfig.json',
// ecmaFeatures: {
// jsx: true,
// },
// },
// },
// plugins: {
// '@typescript-eslint': typescript,
// },
// rules: {
// ...typescript.configs.recommended.rules,
// ...style.rules,
// },
// },
// Vue support (including TS and JSX inside SFCs)
{ {
'files': [ '**/*.vue' ],
'extends': [ 'plugin: vue/recommended' ],
'plugins': { 'plugins': {
'@stylistic/js': stylistic, 'vue-eslint-parser': vue,
'@stylistic/ts': stylistic, '@typescript-eslint': typescript,
}, },
'rules': { 'rules': {
// Formatting ...typescript.configs.recommended.rules,
'@stylistic/js/array-bracket-newline': [ 'error', { 'multiline': true, 'minItems': 4 } ], ...style.rules,
'@stylistic/js/array-bracket-spacing': [ 'error', 'always' ],
'@stylistic/js/array-element-newline': [ 'error', { 'multiline': true, 'minItems': 4 } ], // You can override any Vue or TS rules here
'@stylistic/js/arrow-parens': [ 'error', 'always' ], 'vue/html-indent': [ 'error', 4 ],
'@stylistic/js/arrow-spacing': [ 'error', { 'before': true, 'after': true } ], 'vue/html-comment-indent': [ 'error', 4 ],
'@stylistic/js/block-spacing': [ 'error', 'always' ], 'vue/script-indent': [ 'error', 4 ],
'@stylistic/js/brace-style': [ 'error', '1tbs' ], 'vue/max-attributes-per-line': [
'@stylistic/js/comma-spacing': [ 'error', { 'before': false, 'after': true } ], 'error',
'@stylistic/js/comma-style': [ 'error', 'last' ], {
'@stylistic/js/dot-location': [ 'error', 'property' ], 'singleline': 3,
'@stylistic/js/eol-last': [ 'error', 'always' ], 'multiline': { 'max': 1, 'allowFirstLine': false },
'@stylistic/js/function-call-spacing': [ 'error', 'never' ], }
'@stylistic/js/implicit-arrow-linebreak': [ 'error', 'beside' ], ],
'@stylistic/js/indent': [ 'error', 4 ], },
'@stylistic/js/key-spacing': [ 'error', { 'beforeColon': false, 'afterColon': true } ], },
'@stylistic/js/keyword-spacing': [ 'error', { 'before': true, 'after': true } ],
'@stylistic/js/lines-between-class-members': [ 'error', 'always' ],
'@stylistic/js/new-parens': [ 'error', 'always' ],
'@stylistic/js/no-extra-parens': [ 'error', 'all' ],
'@stylistic/js/no-extra-semi': 'error',
'@stylistic/js/no-floating-decimal': 'error',
'@stylistic/js/no-mixed-operators': 'error',
'@stylistic/js/no-mixed-spaces-and-tabs': 'error',
'@stylistic/js/no-multi-spaces': 'error',
'@stylistic/js/no-trailing-spaces': 'error',
'@stylistic/js/no-whitespace-before-property': 'error',
'@stylistic/js/object-curly-newline': [ 'error', { 'multiline': true, 'minProperties': 3 } ],
'@stylistic/js/object-curly-spacing': [ 'error', 'always' ],
'@stylistic/js/one-var-declaration-per-line': 'error',
'@stylistic/js/quote-props': [ 'error', 'always' ],
'@stylistic/js/quotes': [ 'error', 'single' ],
'@stylistic/js/rest-spread-spacing': [ 'error', 'never' ],
'@stylistic/js/semi': [ 'error', 'always' ],
'@stylistic/js/semi-spacing': [ 'error', { 'before': false, 'after': true } ],
'@stylistic/js/semi-style': [ 'error', 'last' ],
'@stylistic/js/space-before-blocks': [ 'error', 'always' ],
'@stylistic/js/space-before-function-paren': [ 'error', 'always' ],
'@stylistic/js/space-in-parens': [ 'error', 'always' ],
'@stylistic/js/space-infix-ops': [ 'error', { 'int32Hint': false } ],
'@stylistic/js/space-unary-ops': 'error',
'@stylistic/js/spaced-comment': [ 'error', 'always' ],
'@stylistic/js/switch-colon-spacing': 'error',
'@stylistic/js/template-curly-spacing': [ 'error', 'always' ],
'@stylistic/js/wrap-iife': [ 'error', 'inside' ],
'@stylistic/js/wrap-regex': 'error',
'@stylistic/ts/type-annotation-spacing': 'error',
}
}
); );

1142
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@@ -43,19 +43,20 @@
"lint": "eslint ./src/*" "lint": "eslint ./src/*"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.5.0", "@eslint/js": "^9.26.0",
"@stylistic/eslint-plugin": "^2.3.0", "@stylistic/eslint-plugin": "^2.13.0",
"@types/eslint__js": "^8.42.3", "@types/eslint__js": "^8.42.3",
"chai": "^5.1.1", "chai": "^5.1.1",
"chai-as-promised": "^8.0.0", "chai-as-promised": "^8.0.0",
"cypress": "^13.12.0", "cypress": "^13.12.0",
"eslint": "^8.57.0", "eslint": "^8.57.0",
"eslint-plugin-vue": "^10.1.0",
"http-server": "^14.1.1", "http-server": "^14.1.1",
"microbundle": "^0.15.1", "microbundle": "^0.15.1",
"mocha": "^10.5.2", "mocha": "^10.5.2",
"mustache": "^4.2.0", "mustache": "^4.2.0",
"typescript": "^5.5.2", "typescript": "^5.5.2",
"typescript-eslint": "^7.14.1" "typescript-eslint": "^7.18.0"
}, },
"dependencies": { "dependencies": {
"@lokesh.dhakar/quantize": "^1.3.0", "@lokesh.dhakar/quantize": "^1.3.0",

20
src/color-thief-node.ts
View File

@@ -41,10 +41,10 @@ const createPixelArray = ( pixels: number[], pixelCount: number, quality: number
for ( let i = 0; i < pixelCount; i = i + quality ) { for ( let i = 0; i < pixelCount; i = i + quality ) {
const offset = i * 4; const offset = i * 4;
const r = pixels[ offset + 0 ]; const r = pixels[offset + 0];
const g = pixels[ offset + 1 ]; const g = pixels[offset + 1];
const b = pixels[ offset + 2 ]; const b = pixels[offset + 2];
const a = pixels[ offset + 3 ]; const a = pixels[offset + 3];
// If pixel is mostly opaque and not white // If pixel is mostly opaque and not white
if ( typeof a === 'undefined' || a >= 125 ) { if ( typeof a === 'undefined' || a >= 125 ) {
@@ -99,8 +99,8 @@ const loadImg = ( img: string ): Promise<ndarray.NdArray<Uint8Array>> => {
return new Promise( ( resolve, reject ) => { return new Promise( ( resolve, reject ) => {
sharp( img ) sharp( img )
.toBuffer() .toBuffer()
.then( ( buffer ) => sharp( buffer ).metadata() .then( buffer => sharp( buffer ).metadata()
.then( ( metadata ) => ( { buffer, 'format': metadata.format } ) ) ) .then( metadata => ( { buffer, 'format': metadata.format } ) ) )
.then( ( { buffer, format } ) => getPixels( buffer, format ) ) .then( ( { buffer, format } ) => getPixels( buffer, format ) )
.then( resolve ) .then( resolve )
.catch( reject ); .catch( reject );
@@ -118,10 +118,10 @@ const loadImg = ( img: string ): Promise<ndarray.NdArray<Uint8Array>> => {
const getColor = ( img: string, quality: number = 10 ): Promise<ColorThiefResult> => { const getColor = ( img: string, quality: number = 10 ): Promise<ColorThiefResult> => {
return new Promise( ( resolve, reject ) => { return new Promise( ( resolve, reject ) => {
getPalette( img, 5, quality ) getPalette( img, 5, quality )
.then( ( palette ) => { .then( palette => {
resolve( palette[0] ); resolve( palette[0] );
} ) } )
.catch( ( err ) => { .catch( err => {
reject( err ); reject( err );
} ); } );
} ); } );
@@ -144,7 +144,7 @@ const getPalette = ( img: string, colorCount: number = 10, quality: number = 10
return new Promise( ( resolve, reject ) => { return new Promise( ( resolve, reject ) => {
loadImg( img ) loadImg( img )
.then( ( imgData ) => { .then( imgData => {
const pixelCount = imgData.shape[0] * imgData.shape[1]; const pixelCount = imgData.shape[0] * imgData.shape[1];
const pixelArray = createPixelArray( const pixelArray = createPixelArray(
Array.from( imgData.data ), Array.from( imgData.data ),
@@ -157,7 +157,7 @@ const getPalette = ( img: string, colorCount: number = 10, quality: number = 10
resolve( palette ); resolve( palette );
} ) } )
.catch( ( err ) => { .catch( err => {
reject( err ); reject( err );
} ); } );
} ); } );

18
src/color-thief.ts Normal file → Executable file
View File

@@ -152,9 +152,9 @@ class ColorThief {
* @deprecated since Version 3.0, use getImageDataFromURL instead * @deprecated since Version 3.0, use getImageDataFromURL instead
*/ */
getImageData ( imageUrl: string, callback: ( data: string ) => void ): void { getImageData ( imageUrl: string, callback: ( data: string ) => void ): void {
fetch( imageUrl ).then( ( res ) => { fetch( imageUrl ).then( res => {
if ( res.status === 200 ) { if ( res.status === 200 ) {
res.arrayBuffer().then( ( response ) => { res.arrayBuffer().then( response => {
const uInt8Array = new Uint8Array( response ); const uInt8Array = new Uint8Array( response );
const binaryString = new Array( uInt8Array.length ); const binaryString = new Array( uInt8Array.length );
for ( let i = 0; i < uInt8Array.length; i++ ) { for ( let i = 0; i < uInt8Array.length; i++ ) {
@@ -174,9 +174,9 @@ class ColorThief {
*/ */
getImageDataFromURL ( imageUrl: string ): Promise<string> { getImageDataFromURL ( imageUrl: string ): Promise<string> {
return new Promise( ( resolve, reject ) => { return new Promise( ( resolve, reject ) => {
fetch( imageUrl ).then( ( res ) => { fetch( imageUrl ).then( res => {
if ( res.status === 200 ) { if ( res.status === 200 ) {
res.arrayBuffer().then( ( response ) => { res.arrayBuffer().then( response => {
const uInt8Array = new Uint8Array( response ); const uInt8Array = new Uint8Array( response );
const binaryString = new Array( uInt8Array.length ); const binaryString = new Array( uInt8Array.length );
for ( let i = 0; i < uInt8Array.length; i++ ) { for ( let i = 0; i < uInt8Array.length; i++ ) {
@@ -205,11 +205,11 @@ class ColorThief {
getColorAsync ( imageUrl: string, callback: ( data: ColorThiefResult, img: HTMLImageElement ) => void, quality: number | null ): void { getColorAsync ( imageUrl: string, callback: ( data: ColorThiefResult, img: HTMLImageElement ) => void, quality: number | null ): void {
// eslint-disable-next-line @typescript-eslint/no-this-alias // eslint-disable-next-line @typescript-eslint/no-this-alias
const thief = this; const thief = this;
this.getImageDataFromURL( imageUrl ).then( ( imageData ) => { this.getImageDataFromURL( imageUrl ).then( imageData => {
const sourceImage = document.createElement( 'img' ); const sourceImage = document.createElement( 'img' );
sourceImage.addEventListener( 'load', () => { sourceImage.addEventListener( 'load', () => {
const palette = thief.getPalette( sourceImage, 5, quality ); const palette = thief.getPalette( sourceImage, 5, quality );
callback( palette[ 0 ], sourceImage ); callback( palette[0], sourceImage );
} ); } );
sourceImage.src = imageData; sourceImage.src = imageData;
} ); } );
@@ -227,14 +227,14 @@ class ColorThief {
return new Promise( ( resolve, reject ) => { return new Promise( ( resolve, reject ) => {
// eslint-disable-next-line @typescript-eslint/no-this-alias // eslint-disable-next-line @typescript-eslint/no-this-alias
const thief = this; const thief = this;
this.getImageDataFromURL( imageUrl ).then( ( imageData ) => { this.getImageDataFromURL( imageUrl ).then( imageData => {
const sourceImage = document.createElement( 'img' ); const sourceImage = document.createElement( 'img' );
sourceImage.addEventListener( 'load', () => { sourceImage.addEventListener( 'load', () => {
const palette = thief.getPalette( sourceImage, 5, quality ); const palette = thief.getPalette( sourceImage, 5, quality );
resolve( { 'color': palette[ 0 ], 'img': sourceImage } ); resolve( { 'color': palette[0], 'img': sourceImage } );
} ); } );
sourceImage.src = imageData; sourceImage.src = imageData;
} ).catch( ( e ) => { } ).catch( e => {
reject( e ); reject( e );
} ); } );
} ); } );