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

Use Fetch API when it is available, JSONP when not. Remove Axios from default builds

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2020-06-11 23:39:32 +03:00
parent 1cdd82f981
commit a0aabb9b50
8 changed files with 220 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@ -53,12 +53,13 @@ Iconify API provides icon data to Iconify SVG framework and other implementation
There are several Iconify implementations included in this repository:
| Implementation | Usage | with API | without API |
| -------------------------------------- | ------------- | :------: | :---------: |
| [SVG Framework](./packages/iconify/) | HTML | + | + |
| [React component](./packages/react/) | React | - | + |
| [Vue component](./packages/vue/) | Vue | - | + |
| [Svelte component](./packages/svelte/) | Svelte/Sapper | - | + |
| Implementation | Usage | with API | without API |
| ------------------------------------------------------ | ------------- | :------: | :---------: |
| [SVG Framework](./packages/iconify/) | HTML | + | + |
| [React component](./packages/react/) | React | - | + |
| [React component with API](./packages/react-with-api/) | React | + | + |
| [Vue component](./packages/vue/) | Vue | - | + |
| [Svelte component](./packages/svelte/) | Svelte/Sapper | - | + |
Other packages:

155
packages/core/src/api/modules/fetch.ts Normal file
View File

@ -0,0 +1,155 @@
import { RedundancyPendingItem } from '@cyberalien/redundancy';
import {
APIQueryParams,
IconifyAPIPrepareQuery,
IconifyAPISendQuery,
IconifyAPIModule,
GetIconifyAPIModule,
} from '../modules';
import { GetAPIConfig } from '../config';
/**
* Endpoint
*/
let endPoint = '{prefix}.json?icons={icons}';
/**
* Cache
*/
const maxLengthCache: Record<string, number> = Object.create(null);
const pathCache: Record<string, string> = Object.create(null);
/**
* Return API module
*/
export const getAPIModule: GetIconifyAPIModule = (
getAPIConfig: GetAPIConfig
): IconifyAPIModule => {
/**
* Calculate maximum icons list length for prefix
*/
function calculateMaxLength(provider: string, prefix: string): number {
// Get config and store path
const config = getAPIConfig(provider);
if (!config) {
return 0;
}
// Calculate
let result;
if (!config.maxURL) {
result = 0;
} else {
let maxHostLength = 0;
config.resources.forEach((host) => {
maxHostLength = Math.max(maxHostLength, host.length);
});
// Get available length
result =
config.maxURL -
maxHostLength -
config.path.length -
endPoint
.replace('{provider}', provider)
.replace('{prefix}', prefix)
.replace('{icons}', '').length;
}
// Cache stuff and return result
const cacheKey = provider + ':' + prefix;
pathCache[cacheKey] = config.path;
maxLengthCache[cacheKey] = result;
return result;
}
/**
* Prepare params
*/
const prepare: IconifyAPIPrepareQuery = (
provider: string,
prefix: string,
icons: string[]
): APIQueryParams[] => {
const results: APIQueryParams[] = [];
// Get maximum icons list length
let maxLength = maxLengthCache[prefix];
if (maxLength === void 0) {
maxLength = calculateMaxLength(provider, prefix);
}
// Split icons
let item: APIQueryParams = {
provider,
prefix,
icons: [],
};
let length = 0;
icons.forEach((name, index) => {
length += name.length + 1;
if (length >= maxLength && index > 0) {
// Next set
results.push(item);
item = {
provider,
prefix,
icons: [],
};
length = name.length;
}
item.icons.push(name);
});
results.push(item);
return results;
};
/**
* Load icons
*/
const send: IconifyAPISendQuery = (
host: string,
params: APIQueryParams,
status: RedundancyPendingItem
): void => {
const provider = params.provider;
const prefix = params.prefix;
const icons = params.icons;
const iconsList = icons.join(',');
const cacheKey = provider + ':' + prefix;
let path =
pathCache[cacheKey] +
endPoint
.replace('{provider}', provider)
.replace('{prefix}', prefix)
.replace('{icons}', iconsList);
// console.log('API query:', host + path);
fetch(host + path)
.then((response) => {
if (response.status !== 200) {
return;
}
return response.json();
})
.then((data) => {
if (typeof data !== 'object' || data === null) {
return;
}
// Store cache and complete
status.done(data);
})
.catch((err) => {});
};
// Return functions
return {
prepare,
send,
};
};

23
packages/iconify/package-lock.json generated
View File

@ -30,6 +30,23 @@
"integrity": "sha512-/tx5GpGSyMn5FrOSggDSm9yJDLcEXiK0+zdCBssST6w9QgdJjoQ9lRBSxql/3vgQoI+7XbubWsP86jjbuVnFcA==",
"dev": true
},
"@iconify/core": {
"version": "1.0.0-beta.1",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.1.tgz",
"integrity": "sha512-itIEF56rTmhiVSjElMlJY81D0wdXX7PBuPQglmy9y6VltjEZ/BT763HVCEySIhRni9Ae+CwoJXXTCDHs+TCtTQ==",
"dev": true,
"requires": {
"@cyberalien/redundancy": "^1.0.0",
"@iconify/types": "^1.0.2",
"axios": "^0.19.2"
}
},
"@iconify/types": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.0.3.tgz",
"integrity": "sha512-FJvID3jDE1axAiVPUU8+ANeYt8neG1hlSX8g+GFLUaTW6aLMtYx6F2CY1jj9N/unClwdQPtXCE7qORqEBvtVaQ==",
"dev": true
},
"@microsoft/api-extractor": {
"version": "7.8.8",
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.8.8.tgz",
@ -256,6 +273,7 @@
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"dev": true,
"optional": true,
"requires": {
"follow-redirects": "1.5.10"
}
@ -367,6 +385,7 @@
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"dev": true,
"optional": true,
"requires": {
"ms": "2.0.0"
}
@ -403,6 +422,7 @@
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"dev": true,
"optional": true,
"requires": {
"debug": "=3.1.0"
}
@ -597,7 +617,8 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true
"dev": true,
"optional": true
},
"once": {
"version": "1.4.0",

1
packages/iconify/package.json
View File

@ -29,7 +29,6 @@
"@rollup/plugin-commonjs": "^11.1.0",
"@rollup/plugin-node-resolve": "^7.1.3",
"@rollup/plugin-replace": "^2.3.2",
"axios": "^0.19.2",
"rollup": "^1.32.0",
"rollup-plugin-terser": "^5.2.0",
"typescript": "^3.9.3"

14
packages/iconify/src/iconify.ts
View File

@ -50,6 +50,7 @@ import {
IconifyAPIModule,
IconifyAPISendQuery,
IconifyAPIPrepareQuery,
GetIconifyAPIModule,
} from '@iconify/core/lib/api/modules';
import {
setAPIConfig,
@ -58,7 +59,8 @@ import {
getAPIConfig,
GetAPIConfig,
} from '@iconify/core/lib/api/config';
import { getAPIModule } from '@iconify/core/lib/api/modules/jsonp';
import { getAPIModule as getJSONPAPIModule } from '@iconify/core/lib/api/modules/jsonp';
import { getAPIModule as getFetchAPIModule } from '@iconify/core/lib/api/modules/fetch';
import {
IconifyIconLoaderCallback,
IconifyIconLoaderAbort,
@ -411,6 +413,16 @@ const Iconify: IconifyGlobal = {
*/
// Set API
coreModules.api = API;
let getAPIModule: GetIconifyAPIModule;
try {
getAPIModule =
typeof fetch === 'function' && typeof Promise === 'function'
? getFetchAPIModule
: getJSONPAPIModule;
} catch (err) {
getAPIModule = getJSONPAPIModule;
}
setAPIModule('', getAPIModule(getAPIConfig));
if (typeof document !== 'undefined' && typeof window !== 'undefined') {

11
packages/react-with-api/package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "@iconify/react-with-api",
"version": "2.0.0-beta.1",
"version": "1.0.0-beta.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -2207,6 +2207,8 @@
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"dev": true,
"optional": true,
"requires": {
"follow-redirects": "1.5.10"
}
@ -2809,6 +2811,8 @@
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"dev": true,
"optional": true,
"requires": {
"ms": "2.0.0"
}
@ -3265,6 +3269,8 @@
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"dev": true,
"optional": true,
"requires": {
"debug": "=3.1.0"
}
@ -5481,7 +5487,8 @@
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true
},
"nanomatch": {
"version": "1.2.13",

4
packages/react-with-api/package.json
View File

@ -44,7 +44,5 @@
"rollup-plugin-terser": "^5.3.0",
"typescript": "^3.9.3"
},
"dependencies": {
"axios": "^0.19.2"
}
"dependencies": {}
}

14
packages/react-with-api/src/icon.ts
View File

@ -45,8 +45,10 @@ import {
IconifyAPIModule,
IconifyAPISendQuery,
IconifyAPIPrepareQuery,
GetIconifyAPIModule,
} from '@iconify/core/lib/api/modules';
import { getAPIModule } from '@iconify/core/lib/api/modules/axios';
import { getAPIModule as getJSONPAPIModule } from '@iconify/core/lib/api/modules/jsonp';
import { getAPIModule as getFetchAPIModule } from '@iconify/core/lib/api/modules/fetch';
import {
setAPIConfig,
PartialIconifyAPIConfig,
@ -412,6 +414,16 @@ export const InlineIcon = (props: IconProps) =>
*/
// Set API
coreModules.api = API;
let getAPIModule: GetIconifyAPIModule;
try {
getAPIModule =
typeof fetch === 'function' && typeof Promise === 'function'
? getFetchAPIModule
: getJSONPAPIModule;
} catch (err) {
getAPIModule = getJSONPAPIModule;
}
setAPIModule('', getAPIModule(getAPIConfig));
if (typeof document !== 'undefined' && typeof window !== 'undefined') {