Fix Coding Style using Wp Eslint Configuration

fix #34

Author: widoz

.eslintignore

@@ -0,0 +1,9 @@
+vendor
+node_modules
+build
+
+.psalm
+.github
+
+./coverage
+./sources/server

.eslintrc.js

@@ -1,14 +1,15 @@
-const baseConfiguration = require('@wordpress/scripts/config/.eslintrc.js');
-
 module.exports = {
-	...baseConfiguration,
-	ignorePatterns: [
-		...(baseConfiguration.ignorePatterns ?? []),
-		'**/sources/server/**/*.js',
-	],
+	extends: [ 'plugin:@wordpress/eslint-plugin/recommended' ],
+	ignorePatterns: [ '**/sources/server/**/*.js' ],
 	rules: {
-		...baseConfiguration.rules,
-		'@typescript-eslint/array-type': ['error', { default: 'generic' }],
+		'@wordpress/dependency-group': 'error',
+		'@wordpress/i18n-text-domain': [
+			'error',
+			{
+				allowedTextDomain: 'wp-entities-search',
+			},
+		],
+		'@typescript-eslint/array-type': [ 'error', { default: 'generic' } ],
 	},
 	settings: {
 		'import/resolver': {

.github/workflows/js-qa.yml

@@ -31,9 +31,6 @@ jobs:
       - name: Install
         run: yarn install
 
-      - name: Coding Style
-        run: yarn cs
-
       - name: Linting JavaScript
         run: yarn lint:js
 

.prettierignore

@@ -5,3 +5,4 @@
 ./vendor
 ./node_modules
 ./build
+./sources/server

.prettierrc.js

@@ -3,7 +3,7 @@ module.exports = {
 	clearMocks: true,
 	preset: 'ts-jest',
 	testEnvironment: 'jsdom',
-	moduleDirectories: ['node_modules'],
-	setupFilesAfterEnv: ['<rootDir>/tests/client/setup-tests.ts'],
+	moduleDirectories: [ 'node_modules' ],
+	setupFilesAfterEnv: [ '<rootDir>/tests/client/setup-tests.ts' ],
 	maxWorkers: 8,
 };

jest.config.ts

@@ -15,15 +15,12 @@
 		"@testing-library/react": "^14.0.0",
 		"@testing-library/user-event": "^14.5.1",
 		"@total-typescript/shoehorn": "^0.1.0",
-		"@trivago/prettier-plugin-sort-imports": "^4.0.0",
 		"@wordpress/dependency-extraction-webpack-plugin": "^4.8.0",
 		"@wordpress/env": "^5.9.0",
-		"@wordpress/eslint-plugin": "^14.8.0",
 		"@wordpress/scripts": "^26.0.0",
 		"eslint-import-resolver-typescript": "^3.5.5",
 		"jest": "^29.4.3",
 		"jest-environment-jsdom": "^29.5.0",
-		"prettier": "^2.8.1",
 		"ts-jest": "^29.0.5",
 		"ts-loader": "^9.4.2",
 		"ts-node": "^10.9.1",
@@ -46,10 +43,9 @@
 		"wp-env": "wp-env",
 		"build": "wp-scripts build --webpack-src-dir=./sources/client/src",
 		"build:dev": "wp-scripts start --webpack--devtool=inline-source-map --webpack-src-dir=./sources/client/src",
-		"cs": "yarn prettier --check ./sources/client",
 		"cs:fix": "wp-scripts format ./sources/client",
-		"lint:js": "wp-scripts lint-js",
-		"lint:js:fix": "wp-scripts lint-js --fix",
+		"lint:js": "wp-scripts lint-js ./sources/client",
+		"lint:js:fix": "wp-scripts lint-js --fix ./sources/client",
 		"test": "jest",
 		"test:update-snapshots": "yarn test -u"
 	}

package.json

@@ -1,3 +1,6 @@
+/**
+ * WordPress dependencies
+ */
 import apiFetch from '@wordpress/api-fetch';
 
 /**

sources/client/src/api/fetch.ts

@@ -1,27 +1,36 @@
+/**
+ * External dependencies
+ */
 import EntitiesSearch from '@types';
 
+/**
+ * WordPress dependencies
+ */
 import { doAction } from '@wordpress/hooks';
 
+/**
+ * Internal dependencies
+ */
 import { abortControllers } from '../services/abort-controllers';
 import { ContextualAbortController } from '../services/contextual-abort-controller';
 import { Set } from '../vo/set';
 import { fetch } from './fetch';
 
-export async function searchEntities<E>(
+export async function searchEntities< E >(
 	type: string,
-	subtype: Set<string>,
+	subtype: Set< string >,
 	phrase: string,
-	queryArguments?: EntitiesSearch.QueryArguments<string>
-): Promise<Set<E>> {
+	queryArguments?: EntitiesSearch.QueryArguments< string >
+): Promise< Set< E > > {
 	const {
 		exclude,
 		include,
-		fields = ['title', 'id'],
+		fields = [ 'title', 'id' ],
 		...restArguments
 	} = queryArguments ?? {};
 
 	// @ts-ignore we need to pass string[] to the URLSearchParams
-	const params = new URLSearchParams({
+	const params = new URLSearchParams( {
 		per_page: '10',
 		order: 'DESC',
 		orderBy: 'title',
@@ -33,30 +42,30 @@ export async function searchEntities<E>(
 		type,
 		search: phrase,
 		subtype: subtype.toArray(),
-		_fields: serializeFields(fields),
-	}).toString();
+		_fields: serializeFields( fields ),
+	} ).toString();
 
 	const controller = abortControllers.add(
 		new ContextualAbortController(
 			params,
-			`Request aborted with parameters: ${params}`
+			`Request aborted with parameters: ${ params }`
 		)
 	);
 
-	const entities = await fetch<ReadonlyArray<E>>({
-		path: `?rest_route=/wp/v2/search&${params}`,
+	const entities = await fetch< ReadonlyArray< E > >( {
+		path: `?rest_route=/wp/v2/search&${ params }`,
 		signal: controller?.signal() ?? null,
-	}).catch((error) => {
-		if (error instanceof DOMException && error.name === 'AbortError') {
-			doAction('wp-entities-search.on-search.abort', error);
+	} ).catch( ( error ) => {
+		if ( error instanceof DOMException && error.name === 'AbortError' ) {
+			doAction( 'wp-entities-search.on-search.abort', error );
 		}
 
 		throw error;
-	});
+	} );
 
-	return new Set(entities);
+	return new Set( entities );
 }
 
-function serializeFields(fields: EntitiesSearch.SearchQueryFields): string {
-	return fields.join(',');
+function serializeFields( fields: EntitiesSearch.SearchQueryFields ): string {
+	return fields.join( ',' );
 }

sources/client/src/api/search-entities.ts

@@ -1,8 +1,17 @@
+/**
+ * External dependencies
+ */
 import type EntitiesSearch from '@types';
 import React, { JSX } from 'react';
 
+/**
+ * WordPress dependencies
+ */
 import { doAction } from '@wordpress/hooks';
 
+/**
+ * Internal dependencies
+ */
 import { useEntitiesOptionsStorage } from '../hooks/use-entities-options-storage';
 import { useSearch } from '../hooks/use-search';
 import { orderSelectedOptionsAtTheTop } from '../utils/order-selected-options-at-the-top';
@@ -15,99 +24,102 @@ import { Set } from '../vo/set';
  * @public
  * @param props The component props.
  */
-export function CompositeEntitiesByKind<E, K>(
-	props: EntitiesSearch.CompositeEntitiesKinds<E, K>
+export function CompositeEntitiesByKind< E, K >(
+	props: EntitiesSearch.CompositeEntitiesKinds< E, K >
 ): JSX.Element {
-	const [state, dispatch] = useEntitiesOptionsStorage<E, K>(
+	const [ state, dispatch ] = useEntitiesOptionsStorage< E, K >(
 		{
 			entities: props.entities.value,
 			kind: props.kind.value,
 		},
 		props.searchEntities
 	);
-	const search = useSearch<E, K>(
+	const search = useSearch< E, K >(
 		props.searchEntities,
 		state.kind,
 		state.entities,
 		dispatch
 	);
 
-	const onChangeEntities = (entities: EntitiesSearch.Entities<E>) => {
-		props.entities.onChange(entities);
+	const onChangeEntities = ( entities: EntitiesSearch.Entities< E > ) => {
+		props.entities.onChange( entities );
 
-		if (entities.length() <= 0) {
-			dispatch({
+		if ( entities.length() <= 0 ) {
+			dispatch( {
 				type: 'UPDATE_SELECTED_ENTITIES_OPTIONS',
 				selectedEntitiesOptions: new Set(),
-			});
+			} );
 			return;
 		}
 
-		Promise.all([
-			props.searchEntities(state.searchPhrase, state.kind, {
+		Promise.all( [
+			props.searchEntities( state.searchPhrase, state.kind, {
 				exclude: entities,
-			}),
-			props.searchEntities('', state.kind, {
+			} ),
+			props.searchEntities( '', state.kind, {
 				include: entities,
 				per_page: '-1',
-			}),
-		])
-			.then((result) => {
-				const currentEntitiesOptions = result[0] ?? new Set();
-				const selectedEntitiesOptions = result[1] ?? new Set();
+			} ),
+		] )
+			.then( ( result ) => {
+				const currentEntitiesOptions = result[ 0 ] ?? new Set();
+				const selectedEntitiesOptions = result[ 1 ] ?? new Set();
 
-				dispatch({
+				dispatch( {
 					type: 'UPDATE_SELECTED_ENTITIES_OPTIONS',
 					selectedEntitiesOptions,
-				});
-				dispatch({
+				} );
+				dispatch( {
 					type: 'UPDATE_CURRENT_ENTITIES_OPTIONS',
 					currentEntitiesOptions,
-				});
-			})
-			.catch((error) => {
-				doAction('wp-entities-search.on-change-entities.error', error);
-			});
+				} );
+			} )
+			.catch( ( error ) => {
+				doAction(
+					'wp-entities-search.on-change-entities.error',
+					error
+				);
+			} );
 	};
 
-	const onChangeKind = (kind: EntitiesSearch.Kind<K>) => {
-		const _kind = kind instanceof Set ? kind : new Set([kind]);
-		const emptySet = new Set<any>();
+	const onChangeKind = ( kind: EntitiesSearch.Kind< K > ) => {
+		const _kind = kind instanceof Set ? kind : new Set( [ kind ] );
+		const emptySet = new Set< any >();
 
-		props.kind.onChange(_kind);
-		props.entities.onChange(emptySet);
+		props.kind.onChange( _kind );
+		props.entities.onChange( emptySet );
 
-		if (_kind.length() <= 0) {
-			dispatch({
+		if ( _kind.length() <= 0 ) {
+			dispatch( {
 				type: 'CLEAN_ENTITIES_OPTIONS',
-			});
-			dispatch({ type: 'UPDATE_KIND', kind: _kind });
+			} );
+			dispatch( { type: 'UPDATE_KIND', kind: _kind } );
 			return;
 		}
 
 		props
-			.searchEntities(state.searchPhrase, _kind, {
+			.searchEntities( state.searchPhrase, _kind, {
 				exclude: state.entities,
-			})
-			.then((entitiesOptions) => {
-				dispatch({
+			} )
+			.then( ( entitiesOptions ) => {
+				dispatch( {
 					type: 'UPDATE_ENTITIES_OPTIONS_FOR_NEW_KIND',
 					entitiesOptions,
 					kind: _kind,
-				});
-			})
-			.catch((error) => {
-				dispatch({
+				} );
+			} )
+			.catch( ( error ) => {
+				dispatch( {
 					type: 'CLEAN_ENTITIES_OPTIONS',
-				});
-				doAction('wp-entities-search.on-change-kind.error', error);
-			});
+				} );
+				doAction( 'wp-entities-search.on-change-kind.error', error );
+			} );
 	};
 
-	const entities: EntitiesSearch.BaseControl<E> = {
+	const entities: EntitiesSearch.BaseControl< E > = {
 		...props.entities,
 		value: state.entities,
-		options: orderSelectedOptionsAtTheTop<E>(
+		options: orderSelectedOptionsAtTheTop< E >(
 			uniqueControlOptions(
 				state.selectedEntitiesOptions.concat(
 					state.currentEntitiesOptions
@@ -118,11 +130,11 @@ export function CompositeEntitiesByKind<E, K>(
 		onChange: onChangeEntities,
 	};
 
-	const kind: EntitiesSearch.BaseControl<K> = {
+	const kind: EntitiesSearch.BaseControl< K > = {
 		...props.kind,
 		value: state.kind,
 		onChange: onChangeKind,
 	};
 
-	return <>{props.children(entities, kind, search)}</>;
+	return <>{ props.children( entities, kind, search ) }</>;
 }