agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-11-09 23:00:56 +00:00
Code Issues Releases Activity

Merge pull request #120 from ElmoArmy/fix-prettier-rules-conflict

Browse Source 
feat(dx): Enable eslint prettier/prettier rules and auto fix them.
This commit is contained in:
Vjacheslav Trushkin 2022-03-14 09:24:19 +01:00 committed by GitHub
commit 115a99d282
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 193 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react/package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "@iconify/react",
"version": "3.1.3",
"version": "3.1.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@iconify/react",
"version": "3.1.3",
"version": "3.1.4",
"license": "MIT",
"devDependencies": {
"@babel/preset-env": "^7.16.11",

7
packages/react/package.json
View File

@ -2,7 +2,7 @@
"name": "@iconify/react",
"description": "Iconify icon component for React.",
"author": "Vjacheslav Trushkin",
"version": "3.1.3",
"version": "3.1.4",
"license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/",
@ -37,6 +37,11 @@
"import": "./dist/offline.mjs",
"types": "./dist/offline.d.ts",
"default": "./dist/offline.js"
},
"./dist/offline": {
"import": "./dist/offline.mjs",
"types": "./dist/offline.d.ts",
"default": "./dist/offline.js"
}
},
"devDependencies": {

3
packages/utils/.eslintrc.js
View File

@ -8,7 +8,7 @@ module.exports = {
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
// 'plugin:@typescript-eslint/recommended-requiring-type-checking',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
'plugin:prettier/recommended',
],
globals: {
@ -25,7 +25,6 @@ module.exports = {
'no-mixed-spaces-and-tabs': ['off'],
'no-unused-vars': ['off'],
'@typescript-eslint/no-unused-vars-experimental': ['error'],
'prettier/prettier': ['off'], // TODO: enable and fix prettier errors.
},
overrides: [
{

20
packages/utils/src/colors/index.ts
View File

@ -60,8 +60,8 @@ function fromFunction(value: string): Color | null {
}
// Get function and values
const func = (parts[0] as string).trim();
const content = (parts[1] as string).trim();
const func = parts[0].trim();
const content = parts[1].trim();
// Get alpha and split content
let values: string[];
@ -133,7 +133,7 @@ function fromFunction(value: string): Color | null {
const isPercentage: boolean[] = [];
const numbers: number[] = [];
for (let i = 0; i < 3; i++) {
const colorStr = values[i] as string;
const colorStr = values[i];
const index = colorStr.indexOf('%');
const hasPercentage = index !== -1;
if (hasPercentage && index !== colorStr.length - 1) {
@ -435,7 +435,11 @@ export function colorToString(color: Color): string {
}
case 'hsl': {
const list = [color.h, color.s + '%', color.l + '%'];
const list = [
color.h,
color.s.toString() + '%',
color.l.toString() + '%',
];
if (color.alpha !== 1) {
list.push(color.alpha);
}
@ -445,17 +449,17 @@ export function colorToString(color: Color): string {
}
case 'lab': {
const list = [color.l + '%', color.a, color.b];
const list = [color.l.toString() + '%', color.a, color.b];
if (color.alpha !== 1) {
list.push('/ ' + color.alpha);
list.push('/ ' + color.alpha.toString());
}
return 'lab(' + list.join(' ') + ')';
}
case 'lch': {
const list = [color.l + '%', color.c, color.h];
const list = [color.l.toString() + '%', color.c, color.h];
if (color.alpha !== 1) {
list.push('/ ' + color.alpha);
list.push('/ ' + color.alpha.toString());
}
return 'lch(' + list.join(' ') + ')';
}

4
packages/utils/src/icon-set/convert-info.ts
View File

@ -88,9 +88,9 @@ export function convertIconSetInfo(
// Get name
let name: string;
if (typeof source.name === 'string') {
name = source.name as string;
name = source.name;
} else if (typeof source.title === 'string') {
name = source.title as string;
name = source.title;
} else {
return null;
}

10
packages/utils/src/icon-set/get-icons.ts
View File

@ -19,7 +19,7 @@ export function getIcons(
): IconifyJSON | null {
const result: IconifyJSON = {
prefix: data.prefix,
icons: Object.create(null),
icons: Object.create(null) as never,
};
const tested: Set<string> = new Set();
let empty = true;
@ -43,9 +43,9 @@ export function getIcons(
const copied = copy(data.aliases[name].parent, iteration + 1);
if (copied) {
if (result.aliases === void 0) {
result.aliases = Object.create(null);
result.aliases = Object.create(null) as never;
}
result.aliases![name] = { ...data.aliases[name] };
result.aliases[name] = { ...data.aliases[name] };
}
return copied;
}
@ -56,9 +56,9 @@ export function getIcons(
const copied = copy(parent, iteration + 1);
if (copied) {
if (result.aliases === void 0) {
result.aliases = Object.create(null);
result.aliases = Object.create(null) as never;
}
result.aliases![name] = {
result.aliases[name] = {
parent,
};
}

2
packages/utils/src/icon-set/validate.ts
View File

@ -304,7 +304,7 @@ export function validateIconSet(
if (typeof data.chars === 'object') {
const chars = data.chars;
Object.keys(chars).forEach((char) => {
if (!char.match(matchChar) || typeof chars[char] !== 'string') {
if (!matchChar.exec(char) || typeof chars[char] !== 'string') {
if (fix) {
delete chars[char];
return;

10
packages/utils/src/loader/custom.ts
View File

@ -1,5 +1,9 @@
import createDebugger from 'debug';
import type { CustomIconLoader, IconifyLoaderOptions, InlineCollection } from './types';
import type {
CustomIconLoader,
IconifyLoaderOptions,
InlineCollection,
} from './types';
import { mergeIconProps } from './utils';
const debug = createDebugger('@iconify-loader:custom');
@ -11,7 +15,7 @@ export async function getCustomIcon(
custom: CustomIconLoader | InlineCollection,
collection: string,
icon: string,
options?: IconifyLoaderOptions,
options?: IconifyLoaderOptions
): Promise<string | undefined> {
let result: string | undefined | null;
@ -37,7 +41,7 @@ export async function getCustomIcon(
collection,
icon,
options,
undefined,
undefined
);
}
}

18
packages/utils/src/loader/fs.ts
View File

@ -1,13 +1,16 @@
import { promises as fs, Stats } from 'fs';
import { isPackageExists, resolveModule } from 'local-pkg'
import type { IconifyJSON } from '@iconify/types'
import { isPackageExists, resolveModule } from 'local-pkg';
import type { IconifyJSON } from '@iconify/types';
import { tryInstallPkg } from './install-pkg';
const _collections: Record<string, Promise<IconifyJSON | undefined>> = {};
const isLegacyExists = isPackageExists('@iconify/json');
export async function loadCollectionFromFS(name: string, autoInstall = false): Promise<IconifyJSON | undefined> {
if (!_collections[name]) {
export async function loadCollectionFromFS(
name: string,
autoInstall = false
): Promise<IconifyJSON | undefined> {
if (!(await _collections[name])) {
_collections[name] = task();
}
return _collections[name];
@ -30,9 +33,10 @@ export async function loadCollectionFromFS(name: string, autoInstall = false): P
return undefined;
}
if (stat && stat.isFile()) {
return JSON.parse(await fs.readFile(jsonPath as string, 'utf8')) as IconifyJSON;
}
else {
return JSON.parse(
await fs.readFile(jsonPath as string, 'utf8')
) as IconifyJSON;
} else {
return undefined;
}
}

33
packages/utils/src/loader/loader.ts
View File

@ -3,7 +3,7 @@ import { searchForIcon } from './modern';
import { warnOnce } from './install-pkg';
import type { IconifyLoaderOptions } from './types';
export const isNode = typeof process < 'u' && typeof process.stdout < 'u'
export const isNode = typeof process < 'u' && typeof process.stdout < 'u';
export async function loadIcon(
collection: string,
@ -32,9 +32,11 @@ async function importFsModule(): Promise<typeof import('./fs') | undefined> {
} catch {
try {
// cjs environments
return require('./fs.js');
}
catch {
// eslint-disable-next-line @typescript-eslint/no-var-requires
return require('./fs.js') as Promise<
typeof import('./fs') | undefined
>;
} catch {
return undefined;
}
}
@ -44,12 +46,24 @@ async function loadNodeBuiltinIcon(
collection: string,
icon: string,
options?: IconifyLoaderOptions,
warn = true,
warn = true
): Promise<string | undefined> {
type IconifyJSON = Parameters<typeof searchForIcon>[0];
type LoadCollectionFromFS = (
collection: string,
autoInstall?: boolean
) => Promise<IconifyJSON>;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const { loadCollectionFromFS } = await importFsModule();
const iconSet = await loadCollectionFromFS(collection, options?.autoInstall);
const {
loadCollectionFromFS,
}: {
loadCollectionFromFS: LoadCollectionFromFS;
} = await importFsModule();
const iconSet = await loadCollectionFromFS(
collection,
options?.autoInstall
);
if (iconSet) {
// possible icon names
const ids = [
@ -61,7 +75,8 @@ async function loadNodeBuiltinIcon(
}
if (warn) {
warnOnce(`failed to load \`@iconify-json/${collection}\`, have you installed it?`);
warnOnce(
`failed to load \`@iconify-json/${collection}\`, have you installed it?`
);
}
}

4
packages/utils/src/loader/modern.ts
View File

@ -13,7 +13,7 @@ export async function searchForIcon(
iconSet: IconifyJSON,
collection: string,
ids: string[],
options?: IconifyLoaderOptions,
options?: IconifyLoaderOptions
): Promise<string | undefined> {
let iconData: FullIconifyIcon | null;
const { customize } = options?.customizations ?? {};
@ -34,7 +34,7 @@ export async function searchForIcon(
collection,
id,
options,
() => attributes,
() => attributes
);
}
}

16
packages/utils/src/loader/types.ts
View File

@ -80,36 +80,36 @@ export type IconifyLoaderOptions = {
*
* @default false
*/
addXmlNs?: boolean
addXmlNs?: boolean;
/**
* Scale of icons against 1em
*/
scale?: number
scale?: number;
/**
* Style to apply to icons by default
*
* @default ''
*/
defaultStyle?: string
defaultStyle?: string;
/**
* Class names to apply to icons by default
*
* @default ''
*/
defaultClass?: string
defaultClass?: string;
/**
* Loader for custom loaders
*/
customCollections?: Record<string, CustomIconLoader | InlineCollection>
customCollections?: Record<string, CustomIconLoader | InlineCollection>;
/**
* Icon customizer
*/
customizations?: IconCustomizations
customizations?: IconCustomizations;
/**
* Auto install icon sources package when the usages is detected
@ -118,5 +118,5 @@ export type IconifyLoaderOptions = {
*
* @default false
*/
autoInstall?: boolean
}
autoInstall?: boolean;
};

33
packages/utils/src/loader/utils.ts
View File

@ -6,16 +6,21 @@ export async function mergeIconProps(
collection: string,
icon: string,
options?: IconifyLoaderOptions,
propsProvider?: () => Awaitable<Record<string, string>>,
propsProvider?: () => Awaitable<Record<string, string>>
): Promise<string> {
const { scale, addXmlNs = false } = options ?? {}
const {
additionalProps = {},
iconCustomizer,
} = options?.customizations ?? {};
const { scale, addXmlNs = false } = options ?? {};
const { additionalProps = {}, iconCustomizer } =
options?.customizations ?? {};
const props: Record<string, string> = (await propsProvider?.()) ?? {};
if (!svg.includes(" width=") && !svg.includes(" height=") && typeof scale === 'number') {
if ((typeof props.width === 'undefined' || props.width === null) && (typeof props.height === 'undefined' || props.height === null)) {
if (
!svg.includes(' width=') &&
!svg.includes(' height=') &&
typeof scale === 'number'
) {
if (
(typeof props.width === 'undefined' || props.width === null) &&
(typeof props.height === 'undefined' || props.height === null)
) {
props.width = `${scale}em`;
props.height = `${scale}em`;
}
@ -33,18 +38,24 @@ export async function mergeIconProps(
props['xmlns'] = 'http://www.w3.org/2000/svg';
}
// add xmlns:xlink if xlink present and the xmlns missing
if (!svg.includes(' xmlns:xlink=') && svg.includes('xlink:') && !props['xmlns:xlink']) {
if (
!svg.includes(' xmlns:xlink=') &&
svg.includes('xlink:') &&
!props['xmlns:xlink']
) {
props['xmlns:xlink'] = 'http://www.w3.org/1999/xlink';
}
}
svg = svg.replace(
'<svg ',
`<svg ${Object.keys(props).map((p) => `${p}="${props[p]}"`).join(' ')}`
`<svg ${Object.keys(props)
.map((p) => `${p}="${props[p]}"`)
.join(' ')}`
);
if (svg && options) {
const { defaultStyle, defaultClass } = options
const { defaultStyle, defaultClass } = options;
// additional props and iconCustomizer takes precedence
if (defaultClass && !svg.includes(' class=')) {
svg = svg.replace('<svg ', `<svg class="${defaultClass}" `);

36
packages/utils/src/svg/build.ts
View File

@ -102,9 +102,9 @@ export function iconToSVG(
// Horizontal flip
transformations.push(
'translate(' +
(box.width + box.left) +
(box.width + box.left).toString() +
' ' +
(0 - box.top) +
(0 - box.top).toString() +
')'
);
transformations.push('scale(-1 1)');
@ -114,9 +114,9 @@ export function iconToSVG(
// Vertical flip
transformations.push(
'translate(' +
(0 - box.left) +
(0 - box.left).toString() +
' ' +
(box.height + box.top) +
(box.height + box.top).toString() +
')'
);
transformations.push('scale(1 -1)');
@ -133,7 +133,11 @@ export function iconToSVG(
// 90deg
tempValue = box.height / 2 + box.top;
transformations.unshift(
'rotate(90 ' + tempValue + ' ' + tempValue + ')'
'rotate(90 ' +
tempValue.toString() +
' ' +
tempValue.toString() +
')'
);
break;
@ -141,9 +145,9 @@ export function iconToSVG(
// 180deg
transformations.unshift(
'rotate(180 ' +
(box.width / 2 + box.left) +
(box.width / 2 + box.left).toString() +
' ' +
(box.height / 2 + box.top) +
(box.height / 2 + box.top).toString() +
')'
);
break;
@ -152,7 +156,11 @@ export function iconToSVG(
// 270deg
tempValue = box.width / 2 + box.left;
transformations.unshift(
'rotate(-90 ' + tempValue + ' ' + tempValue + ')'
'rotate(-90 ' +
tempValue.toString() +
' ' +
tempValue.toString() +
')'
);
break;
}
@ -214,8 +222,8 @@ export function iconToSVG(
}
// Convert to string
width = typeof width === 'string' ? width : width + '';
height = typeof height === 'string' ? height : height + '';
width = typeof width === 'string' ? width : width.toString() + '';
height = typeof height === 'string' ? height : height.toString() + '';
// Result
const result: IconifyIconBuildResult = {
@ -224,7 +232,13 @@ export function iconToSVG(
height,
preserveAspectRatio: preserveAspectRatio(customisations),
viewBox:
box.left + ' ' + box.top + ' ' + box.width + ' ' + box.height,
box.left.toString() +
' ' +
box.top.toString() +
' ' +
box.width.toString() +
' ' +
box.height.toString(),
},
body,
};

13
packages/utils/src/svg/encode-svg-for-css.ts
View File

@ -2,12 +2,19 @@
export function encodeSvgForCss(svg: string): string {
let useSvg = svg.startsWith('<svg>') ? svg.replace('<svg>', '<svg >') : svg;
if (!useSvg.includes(' xmlns:xlink=') && useSvg.includes(' xlink:')) {
useSvg = useSvg.replace('<svg ', '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ');
useSvg = useSvg.replace(
'<svg ',
'<svg xmlns:xlink="http://www.w3.org/1999/xlink" '
);
}
if (!useSvg.includes(' xmlns=')) {
useSvg = useSvg.replace('<svg ', '<svg xmlns="http://www.w3.org/2000/svg" ');
useSvg = useSvg.replace(
'<svg ',
'<svg xmlns="http://www.w3.org/2000/svg" '
);
}
return useSvg.replace(/"/g, '\'')
return useSvg
.replace(/"/g, "'")
.replace(/%/g, '%25')
.replace(/#/g, '%23')
.replace(/{/g, '%7B')

4
packages/utils/src/svg/id.ts
View File

@ -52,7 +52,9 @@ export function replaceIDs(
// Replace with unique ids
ids.forEach((id) => {
const newID =
typeof prefix === 'function' ? prefix(id) : prefix + counter++;
typeof prefix === 'function'
? prefix(id)
: prefix + (counter++).toString();
const escapedID = id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

2
packages/utils/src/svg/size.ts
View File

@ -33,7 +33,7 @@ export function calculateSize(
const newParts = [];
let code = oldParts.shift() as string;
let isNumber = unitsTest.test(code as string);
let isNumber = unitsTest.test(code);
// eslint-disable-next-line no-constant-condition
while (true) {

7
packages/utils/tests/get-custom-icon-test.ts
View File

@ -15,9 +15,12 @@ describe('Testing getCustomIcon', () => {
const result = await getCustomIcon(() => svg, 'a', 'b', {
customizations: {
transform(icon) {
return icon.replace('<svg ', '<svg width="1em" height="1em" ');
return icon.replace(
'<svg ',
'<svg width="1em" height="1em" '
);
},
}
},
});
expect(result && result.indexOf('width="1em"') > -1).toBeTruthy();
expect(result && result.indexOf('height="1em"') > -1).toBeTruthy();

32
packages/utils/tests/iconify-icon-test.ts
View File

@ -1,16 +1,17 @@
import { loadIcon } from '../lib';
describe('Testing loadIcon with @iconify-json/flat-color-icons>', () => {
test('loadIcon works', async () => {
const result = await loadIcon('flat-color-icons', 'up-right');
expect(result).toBeTruthy();
});
test('loadIcon adds xmlns:xlink', async () => {
const result = await loadIcon('flat-color-icons', 'up-right', { addXmlNs: true });
const result = await loadIcon('flat-color-icons', 'up-right', {
addXmlNs: true,
});
expect(result).toBeTruthy();
expect(result && result.indexOf('xmlns:xlink=') > - 1).toBeTruthy();
expect(result && result.indexOf('xmlns:xlink=') > -1).toBeTruthy();
});
test('loadIcon with customize with default style and class', async () => {
@ -23,13 +24,13 @@ describe('Testing loadIcon with @iconify-json/flat-color-icons>', () => {
props.height = '2em';
return props;
},
}
},
});
expect(result).toBeTruthy();
expect(result && result.indexOf('margin-top: 1rem;') > - 1).toBeTruthy();
expect(result && result.indexOf('class="clazz"') > - 1).toBeTruthy();
expect(result && result.indexOf('width="2em"') > - 1).toBeTruthy();
expect(result && result.indexOf('height="2em"') > - 1).toBeTruthy();
expect(result && result.indexOf('margin-top: 1rem;') > -1).toBeTruthy();
expect(result && result.indexOf('class="clazz"') > -1).toBeTruthy();
expect(result && result.indexOf('width="2em"') > -1).toBeTruthy();
expect(result && result.indexOf('height="2em"') > -1).toBeTruthy();
});
test('loadIcon preserves customizations order', async () => {
@ -39,16 +40,19 @@ describe('Testing loadIcon with @iconify-json/flat-color-icons>', () => {
defaultClass: 'clazz1',
customizations: {
additionalProps: {
'width': '2em',
'height': '2em',
'style': 'color: blue;',
'class': 'clazz2',
width: '2em',
height: '2em',
style: 'color: blue;',
class: 'clazz2',
},
// it will never be called, it is not a custom icon
transform(icon) {
return icon.replace('<svg ', '<svg width="4em" height="4em" ');
return icon.replace(
'<svg ',
'<svg width="4em" height="4em" '
);
},
}
},
});
expect(result).toBeTruthy();
expect(result && result.includes('style="color: blue;"')).toBeTruthy();

19
packages/utils/tests/load-icon-test.ts
View File

@ -3,9 +3,9 @@ import { CustomIconLoader, loadIcon } from '../lib';
const fixturesDir = __dirname + '/fixtures';
const loader: CustomIconLoader = async(name) => {
const loader: CustomIconLoader = async (name) => {
return await fs.readFile(`${fixturesDir}/${name}.svg`, 'utf8');
}
};
describe('Testing loadIcon', () => {
test('CustomCollection', async () => {
@ -13,8 +13,8 @@ describe('Testing loadIcon', () => {
expect(svg).toBeTruthy();
const result = await loadIcon('a', 'circle', {
customCollections: {
'a': {
'circle': svg as string,
a: {
circle: svg as string,
},
},
});
@ -27,13 +27,16 @@ describe('Testing loadIcon', () => {
expect(svg).toBeTruthy();
const result = await loadIcon('a', 'circle', {
customCollections: {
'a': {
'circle': svg as string,
a: {
circle: svg as string,
},
},
customizations: {
transform(icon) {
return icon.replace('<svg ', '<svg width="1em" height="1em" ');
return icon.replace(
'<svg ',
'<svg width="1em" height="1em" '
);
},
},
});
@ -55,7 +58,7 @@ describe('Testing loadIcon', () => {
const result = await loadIcon('a', '1f3eb', {
customCollections: {
'a': {
a: {
'1f3eb': svg as string,
},
},

12
packages/utils/tests/replace-ids-test.ts
View File

@ -9,7 +9,9 @@ describe('Testing replaceIDs', () => {
// Using callback
let counter = 0;
expect(replaceIDs(body, () => 'callback' + counter++)).toBe(expected);
expect(
replaceIDs(body, () => 'callback' + (counter++).toString())
).toBe(expected);
});
test('Many IDs', () => {
@ -23,7 +25,9 @@ describe('Testing replaceIDs', () => {
// Using callback
let counter = 0;
expect(replaceIDs(body, () => 'callbackID' + counter++)).toBe(
expect(
replaceIDs(body, () => 'callbackID' + (counter++).toString())
).toBe(
body
.replace(/ssvg-id-1st-place-medala/g, 'callbackID0')
.replace(/ssvg-id-1st-place-medalb/g, 'callbackID7')
@ -70,7 +74,9 @@ describe('Testing replaceIDs', () => {
// To avoid messing up counter, using custom callback
let counter = 0;
expect(replaceIDs(body, () => 'callbackID' + counter++)).toBe(
expect(
replaceIDs(body, () => 'callbackID' + (counter++).toString())
).toBe(
body
.replace(/ssvg-id-compassa/g, 'callbackID2')
.replace(/ssvg-id-compassb/g, 'callbackID0')

9
packages/utils/tests/validate-icon-test.ts
View File

@ -2,7 +2,14 @@ import { validateIconSet } from '../lib/icon-set/validate';
describe('Testing validating icon', () => {
// Add various types for testing
const validationValues = new Map();
const validationValues = new Map<
| boolean
| Record<string | number | symbol, never>
| []
| number
| string,
{ text: string; type: string }
>();
beforeAll(() => {
validationValues.set(true, {