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

README.md

@@ -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 |
+| Implementation                                         | Usage         | with API | without API |
-| -------------------------------------- | ------------- | :------: | :---------: |
+| ------------------------------------------------------ | ------------- | :------: | :---------: |
-| [SVG Framework](./packages/iconify/)   | HTML          |    +     |      +      |
+| [SVG Framework](./packages/iconify/)                   | HTML          |    +     |      +      |
-| [React component](./packages/react/)   | React         |    -     |      +      |
+| [React component](./packages/react/)                   | React         |    -     |      +      |
-| [Vue component](./packages/vue/)       | Vue           |    -     |      +      |
+| [React component with API](./packages/react-with-api/) | React         |    +     |      +      |
-| [Svelte component](./packages/svelte/) | Svelte/Sapper |    -     |      +      |
+| [Vue component](./packages/vue/)                       | Vue           |    -     |      +      |
+| [Svelte component](./packages/svelte/)                 | Svelte/Sapper |    -     |      +      |
 
 Other packages:
 

packages/core/src/api/modules/fetch.ts

@@ -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,
+	};
+};

packages/iconify/package-lock.json

@@ -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",

packages/iconify/package.json

@@ -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"

packages/iconify/src/iconify.ts

@@ -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') {

packages/react-with-api/package-lock.json

@@ -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",

packages/react-with-api/package.json

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

packages/react-with-api/src/icon.ts

@@ -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') {