2
0
mirror of https://github.com/iconify/iconify.git synced 2024-09-19 16:59:02 +00:00

Organize exported functions in reusable modules to make it easier to manage multiple implementations

This commit is contained in:
Vjacheslav Trushkin 2020-12-22 14:49:02 +02:00
parent 1e3ffd7984
commit d9303423d1
16 changed files with 229 additions and 283 deletions

View File

@ -1,28 +1,22 @@
import { IconifyIconName } from '@iconify/core/lib/icon/name';
import { API, getRedundancyCache, IconifyAPIInternalStorage } from '.';
import { IconifyIconName } from '../icon/name';
import {
IconifyIconLoaderCallback,
IconifyIconLoaderAbort,
} from '@iconify/core/lib/interfaces/loader';
import { IconifyAPIConfig, GetAPIConfig } from '@iconify/core/lib/api/config';
import { IconifyAPIInternalStorage } from '@iconify/core/lib/api/';
import { IconifyAPIModule } from '@iconify/core/lib/api/modules';
IconifyIconLoaderCallback,
} from '../interfaces/loader';
import {
getAPIConfig,
GetAPIConfig,
IconifyAPIConfig,
setAPIConfig,
} from './config';
import { IconifyAPIModule, setAPIModule } from './modules';
/**
* Cache types
* Iconify API functions
*/
export type IconifyCacheType = 'local' | 'session' | 'all';
/**
* Iconify interface
*/
export interface IconifyAPI {
export interface IconifyAPIFunctions {
/* Scan DOM */
/**
* Toggle local and session storage
*/
enableCache: (storage: IconifyCacheType, value?: boolean) => void;
disableCache: (storage: IconifyCacheType) => void;
/**
* Load icons
*/
@ -41,6 +35,11 @@ export interface IconifyAPI {
) => void;
}
export const APIFunctions: IconifyAPIFunctions = {
loadIcons: API.loadIcons,
addAPIProvider: setAPIConfig,
};
/**
* Exposed internal functions
*
@ -48,7 +47,7 @@ export interface IconifyAPI {
*
* Important: any changes published in a release must be backwards compatible.
*/
export interface IconifyExposedAPIInternals {
export interface IconifyAPIInternalFunctions {
/**
* Get internal API data, used by Icon Finder
*/
@ -64,3 +63,9 @@ export interface IconifyExposedAPIInternals {
*/
setAPIModule: (provider: string, item: IconifyAPIModule) => void;
}
export const APIInternalFunctions: IconifyAPIInternalFunctions = {
getAPI: getRedundancyCache,
getAPIConfig,
setAPIModule,
};

View File

@ -0,0 +1,35 @@
import { config } from './index';
/**
* Cache types
*/
export type IconifyBrowserCacheType = 'local' | 'session' | 'all';
/**
* Toggle cache
*/
export function toggleBrowserCache(
storage: IconifyBrowserCacheType,
value: boolean
): void {
switch (storage) {
case 'local':
case 'session':
config[storage] = value;
break;
case 'all':
for (const key in config) {
config[key as keyof typeof config] = value;
}
break;
}
}
/**
* Interface for exported functions
*/
export interface IconifyBrowserCacheFunctions {
enableCache: (storage: IconifyBrowserCacheType) => void;
disableCache: (storage: IconifyBrowserCacheType) => void;
}

View File

@ -1,6 +1,6 @@
import { IconifyJSON } from '@iconify/types';
import { CacheIcons, LoadIconsCache } from '../interfaces/cache';
import { getStorage, addIconSet } from './storage';
import { getStorage, addIconSet } from '../storage/storage';
interface StorageType<T> {
local: T;

View File

@ -14,7 +14,7 @@ const unitsTest = /^-?[0-9.]*[0-9]+[0-9.]*$/g;
* @param {number} [precision] Floating number precision in result to minimize output. Default = 2
* @return {string|number} Another dimension
*/
export function calcSize(
export function calculateSize(
size: string | number,
ratio: number,
precision?: number

View File

@ -0,0 +1,22 @@
import { replaceIDs } from './ids';
import { calculateSize } from './calc-size';
/**
* Interface for exported builder functions
*/
export interface IconifyBuilderFunctions {
replaceIDs: (body: string, prefix?: string | (() => string)) => string;
calculateSize: (
size: string | number,
ratio: number,
precision?: number
) => string | number;
}
/**
* Exported builder functions
*/
export const builderFunctions: IconifyBuilderFunctions = {
replaceIDs,
calculateSize,
};

View File

@ -1,6 +1,6 @@
import { FullIconifyIcon } from '../icon';
import { FullIconCustomisations } from '../customisations';
import { calcSize } from './calc-size';
import { calculateSize } from './calc-size';
/**
* Get preserveAspectRatio value
@ -165,7 +165,7 @@ export function iconToSVG(
if (customisations.width === null && customisations.height === null) {
// Set height to '1em', calculate width
height = '1em';
width = calcSize(height, box.width / box.height);
width = calculateSize(height, box.width / box.height);
} else if (
customisations.width !== null &&
customisations.height !== null
@ -176,11 +176,11 @@ export function iconToSVG(
} else if (customisations.height !== null) {
// Height is set
height = customisations.height;
width = calcSize(height, box.width / box.height);
width = calculateSize(height, box.width / box.height);
} else {
// Width is set
width = customisations.width as number | string;
height = calcSize(width, box.height / box.width);
height = calculateSize(width, box.height / box.width);
}
// Check for 'auto'

View File

@ -1,6 +1,6 @@
import 'mocha';
import { expect } from 'chai';
import { calcSize } from '../../lib/builder/calc-size';
import { calculateSize } from '../../lib/builder/calc-size';
describe('Testing calcSize', () => {
it('Simple size', () => {
@ -8,11 +8,11 @@ describe('Testing calcSize', () => {
const height = 48;
// Get width from height and height from width
expect(calcSize('48', width / height)).to.be.equal('36');
expect(calcSize('36', height / width)).to.be.equal('48');
expect(calculateSize('48', width / height)).to.be.equal('36');
expect(calculateSize('36', height / width)).to.be.equal('48');
expect(calcSize(48, width / height)).to.be.equal(36);
expect(calcSize(36, height / width)).to.be.equal(48);
expect(calculateSize(48, width / height)).to.be.equal(36);
expect(calculateSize(36, height / width)).to.be.equal(48);
});
it('Numbers', () => {
@ -20,14 +20,16 @@ describe('Testing calcSize', () => {
const height = 48;
// Simple numbers
expect(calcSize(24, width / height)).to.be.equal(18);
expect(calcSize(30, width / height)).to.be.equal(22.5);
expect(calcSize(99, width / height)).to.be.equal(74.25);
expect(calculateSize(24, width / height)).to.be.equal(18);
expect(calculateSize(30, width / height)).to.be.equal(22.5);
expect(calculateSize(99, width / height)).to.be.equal(74.25);
// Rounding numbers
expect(calcSize(100 / 3, height / width)).to.be.equal(44.45);
expect(calcSize(11.1111111, width / height)).to.be.equal(8.34);
expect(calcSize(11.1111111, width / height, 1000)).to.be.equal(8.334);
expect(calculateSize(100 / 3, height / width)).to.be.equal(44.45);
expect(calculateSize(11.1111111, width / height)).to.be.equal(8.34);
expect(calculateSize(11.1111111, width / height, 1000)).to.be.equal(
8.334
);
});
it('Strings', () => {
@ -35,26 +37,28 @@ describe('Testing calcSize', () => {
const height = 48;
// Simple units
expect(calcSize('48px', width / height)).to.be.equal('36px');
expect(calcSize('24%', width / height)).to.be.equal('18%');
expect(calcSize('1em', width / height)).to.be.equal('0.75em');
expect(calculateSize('48px', width / height)).to.be.equal('36px');
expect(calculateSize('24%', width / height)).to.be.equal('18%');
expect(calculateSize('1em', width / height)).to.be.equal('0.75em');
// Add space
expect(calcSize('24 Pixels', width / height)).to.be.equal('18 Pixels');
expect(calculateSize('24 Pixels', width / height)).to.be.equal(
'18 Pixels'
);
// Multiple sets of numbers
expect(calcSize('48% + 5em', width / height)).to.be.equal(
expect(calculateSize('48% + 5em', width / height)).to.be.equal(
'36% + 3.75em'
);
expect(calcSize('calc(1em + 8px)', height / width)).to.be.equal(
expect(calculateSize('calc(1em + 8px)', height / width)).to.be.equal(
'calc(1.34em + 10.67px)'
);
expect(calcSize('-webkit-calc(1em + 8px)', width / height)).to.be.equal(
'-webkit-calc(0.75em + 6px)'
);
expect(
calculateSize('-webkit-calc(1em + 8px)', width / height)
).to.be.equal('-webkit-calc(0.75em + 6px)');
// Invalid strings
expect(calcSize('-.', width / height)).to.be.equal('-.');
expect(calcSize('@foo', width / height)).to.be.equal('@foo');
expect(calculateSize('-.', width / height)).to.be.equal('-.');
expect(calculateSize('@foo', width / height)).to.be.equal('@foo');
});
});

View File

@ -1,6 +1,6 @@
import 'mocha';
import { expect } from 'chai';
import { count, config, loadCache } from '../../lib/storage/browser';
import { count, config, loadCache } from '../../lib/browser-storage/';
import {
nextPrefix,
createCache,

View File

@ -6,7 +6,7 @@ import {
config,
emptyList,
StoredItem,
} from '../../lib/storage/browser';
} from '../../lib/browser-storage/';
import { getStorage, iconExists } from '../../lib/storage/storage';
import {
nextPrefix,

View File

@ -7,7 +7,7 @@ import {
config,
emptyList,
StoredItem,
} from '../../lib/storage/browser';
} from '../../lib/browser-storage/';
import { getStorage, iconExists } from '../../lib/storage/storage';
import {
nextPrefix,

View File

@ -1,4 +1,4 @@
import { mock, count, config, emptyList } from '../../lib/storage/browser';
import { mock, count, config, emptyList } from '../../lib/browser-storage/';
/**
* Get next icon set prefix for testing

View File

@ -9,7 +9,6 @@ import {
getIconData,
} from '@iconify/core/lib/storage/functions';
import { iconToSVG, IconifyIconBuildResult } from '@iconify/core/lib/builder';
import { replaceIDs } from '@iconify/core/lib/builder/ids';
import { renderIcon } from './modules/render';
import {
initObserver,
@ -109,11 +108,6 @@ export interface IconifyCommonFunctions {
customisations: IconifyIconCustomisations
) => IconifyIconBuildResult | null;
/**
* Replace IDs in icon body, should be used when parsing renderIcon() result
*/
replaceIDs: (body: string, prefix?: string | (() => string)) => string;
/* Scanner */
/**
* Scan DOM
@ -161,9 +155,6 @@ export const commonFunctions: IconifyCommonFunctions = {
// Get rendered icon as object that can be used to create SVG (use replaceIDs on body)
renderIcon: buildIcon,
// Replace IDs in body
replaceIDs,
// Scan DOM
scan: (root?: HTMLElement) => {
if (root) {

View File

@ -9,33 +9,34 @@ import {
IconifyVerticalIconAlignment,
} from '@iconify/core/lib/customisations';
import { IconifyIconBuildResult } from '@iconify/core/lib/builder';
import { calcSize } from '@iconify/core/lib/builder/calc-size';
import {
IconifyStorageFunctions,
storageFunctions,
} from '@iconify/core/lib/storage/functions';
import {
IconifyBuilderFunctions,
builderFunctions,
} from '@iconify/core/lib/builder/functions';
// Modules
import { coreModules } from '@iconify/core/lib/modules';
// Cache
import { storeCache, loadCache } from '@iconify/core/lib/browser-storage/';
import {
storeCache,
loadCache,
config,
} from '@iconify/core/lib/storage/browser';
IconifyBrowserCacheFunctions,
IconifyBrowserCacheType,
toggleBrowserCache,
} from '@iconify/core/lib/browser-storage/functions';
// API
import {
IconifyAPI,
IconifyExposedAPIInternals,
IconifyCacheType,
} from './modules/api';
import {
API,
getRedundancyCache,
IconifyAPIInternalStorage,
} from '@iconify/core/lib/api/';
IconifyAPIFunctions,
IconifyAPIInternalFunctions,
APIFunctions,
APIInternalFunctions,
} from '@iconify/core/lib/api/functions';
import { API, IconifyAPIInternalStorage } from '@iconify/core/lib/api/';
import {
setAPIModule,
IconifyAPIModule,
@ -58,12 +59,20 @@ import {
} from '@iconify/core/lib/interfaces/loader';
// Other
import { IconifyExposedCommonInternals } from './internals';
import { IconifyCommonFunctions, commonFunctions } from './common';
/**
* Export required types
*/
// Function sets
export {
IconifyStorageFunctions,
IconifyBuilderFunctions,
IconifyBrowserCacheFunctions,
IconifyAPIFunctions,
IconifyAPIInternalFunctions,
};
// JSON stuff
export { IconifyIcon, IconifyJSON, IconifyIconName };
@ -88,92 +97,48 @@ export {
GetAPIConfig,
IconifyAPIPrepareQuery,
IconifyAPISendQuery,
IconifyCacheType,
IconifyBrowserCacheType,
};
/**
* Exposed internal functions
*
* Used by plug-ins, such as Icon Finder
*
* Important: any changes published in a release must be backwards compatible.
*/
export interface IconifyExposedInternals
extends IconifyExposedAPIInternals,
IconifyExposedCommonInternals {}
/**
* Exported functions
*/
export interface IconifyFunctions extends IconifyAPI {
/**
* Expose internal functions
*/
_internal: IconifyExposedInternals;
}
/**
* Iconify interface
*/
export interface IconifyGlobal
extends IconifyStorageFunctions,
IconifyBuilderFunctions,
IconifyCommonFunctions,
IconifyFunctions {}
// Export dependencies
export { IconifyGlobal as IconifyGlobalCommon, IconifyAPI };
function toggleCache(storage: IconifyCacheType, value: boolean): void {
switch (storage) {
case 'local':
case 'session':
config[storage] = value;
break;
case 'all':
for (const key in config) {
config[key] = value;
}
break;
}
IconifyBrowserCacheFunctions,
IconifyAPIFunctions {
_api: IconifyAPIInternalFunctions;
}
/**
* Browser cache functions
*/
const browserCacheFunctions: IconifyBrowserCacheFunctions = {
// enableCache() has optional second parameter for backwards compatibility
enableCache: (storage: IconifyBrowserCacheType, enable?: boolean) =>
toggleBrowserCache(storage, enable !== false),
disableCache: (storage: IconifyBrowserCacheType) =>
toggleBrowserCache(storage, true),
};
/**
* Global variable
*/
const Iconify: IconifyGlobal = ({
// Load icons
loadIcons: API.loadIcons,
const Iconify = ({
// Exposed internal API functions
_api: APIInternalFunctions,
} as unknown) as IconifyGlobal;
// API providers
addAPIProvider: setAPIConfig,
// Toggle storage
enableCache: (storage: IconifyCacheType, value?: boolean) => {
toggleCache(storage, typeof value === 'boolean' ? value : true);
},
disableCache: (storage: IconifyCacheType) => {
toggleCache(storage, false);
},
// Exposed internal functions
_internal: {
// Calculate size
calculateSize: calcSize,
// Get API data
getAPI: getRedundancyCache,
// Get API config
getAPIConfig,
// Get API module
setAPIModule,
},
} as IconifyFunctions) as IconifyGlobal;
// Merge with common functions
[storageFunctions, commonFunctions].forEach((list) => {
// Add functions
[
storageFunctions,
builderFunctions,
commonFunctions,
browserCacheFunctions,
APIFunctions,
].forEach((list) => {
for (const key in list) {
Iconify[key] = list[key];
}

View File

@ -9,19 +9,24 @@ import {
IconifyVerticalIconAlignment,
} from '@iconify/core/lib/customisations';
import { IconifyIconBuildResult } from '@iconify/core/lib/builder';
import { calcSize } from '@iconify/core/lib/builder/calc-size';
import {
IconifyStorageFunctions,
storageFunctions,
} from '@iconify/core/lib/storage/functions';
import {
IconifyBuilderFunctions,
builderFunctions,
} from '@iconify/core/lib/builder/functions';
// Local code
import { IconifyExposedCommonInternals } from './internals';
import { IconifyCommonFunctions, commonFunctions } from './common';
/**
* Export required types
*/
// Function sets
export { IconifyStorageFunctions, IconifyBuilderFunctions };
// JSON stuff
export { IconifyIcon, IconifyJSON, IconifyIconName };
@ -36,33 +41,13 @@ export {
// Build
export { IconifyIconBuildResult };
/**
* Exposed internal functions
*
* Used by plug-ins, such as Icon Finder
*
* Important: any changes published in a release must be backwards compatible.
*/
export interface IconifyExposedInternals
extends IconifyExposedCommonInternals {}
/**
* Exported functions
*/
export interface IconifyFunctions {
/**
* Expose internal functions
*/
_internal: IconifyExposedInternals;
}
/**
* Iconify interface
*/
export interface IconifyGlobal
extends IconifyStorageFunctions,
IconifyCommonFunctions,
IconifyFunctions {}
IconifyBuilderFunctions,
IconifyCommonFunctions {}
// Export dependencies
export { IconifyGlobal as IconifyGlobalCommon };
@ -70,16 +55,10 @@ export { IconifyGlobal as IconifyGlobalCommon };
/**
* Global variable
*/
const Iconify: IconifyGlobal = ({
// Exposed internal functions
_internal: {
// Calculate size
calculateSize: calcSize,
},
} as IconifyFunctions) as IconifyGlobal;
const Iconify: IconifyGlobal = {} as IconifyGlobal;
// Merge with common functions
[storageFunctions, commonFunctions].forEach((list) => {
[storageFunctions, builderFunctions, commonFunctions].forEach((list) => {
for (const key in list) {
Iconify[key] = list[key];
}

View File

@ -1,19 +0,0 @@
import { IconifyIconSize } from '@iconify/core/lib/customisations';
/**
* Exposed internal functions
*
* Used by plug-ins, such as Icon Finder
*
* Important: any changes published in a release must be backwards compatible.
*/
export interface IconifyExposedCommonInternals {
/**
* Calculate width knowing height and width/height ratio (or vice versa)
*/
calculateSize: (
size: IconifyIconSize,
ratio: number,
precision?: number
) => IconifyIconSize;
}

View File

@ -17,21 +17,27 @@ import {
IconifyVerticalIconAlignment,
} from '@iconify/core/lib/customisations';
import {
IconifyStorageFunctions,
storageFunctions,
getIconData,
} from '@iconify/core/lib/storage/functions';
import { calcSize } from '@iconify/core/lib/builder/calc-size';
import {
IconifyBuilderFunctions,
builderFunctions,
} from '@iconify/core/lib/builder/functions';
import { IconifyIcon } from '@iconify/core/lib/icon';
// Modules
import { coreModules } from '@iconify/core/lib/modules';
// API
import { API, IconifyAPIInternalStorage } from '@iconify/core/lib/api/';
import {
API,
getRedundancyCache,
IconifyAPIInternalStorage,
} from '@iconify/core/lib/api/';
IconifyAPIFunctions,
IconifyAPIInternalFunctions,
APIFunctions,
APIInternalFunctions,
} from '@iconify/core/lib/api/functions';
import {
setAPIModule,
IconifyAPIModule,
@ -51,19 +57,28 @@ import {
import {
IconifyIconLoaderCallback,
IconifyIconLoaderAbort,
IconifyLoadIcons,
} from '@iconify/core/lib/interfaces/loader';
// Cache
import { storeCache, loadCache } from '@iconify/core/lib/browser-storage';
import {
storeCache,
loadCache,
config,
} from '@iconify/core/lib/storage/browser';
IconifyBrowserCacheType,
IconifyBrowserCacheFunctions,
toggleBrowserCache,
} from '@iconify/core/lib/browser-storage/functions';
/**
* Export required types
*/
// Function sets
export {
IconifyStorageFunctions,
IconifyBuilderFunctions,
IconifyBrowserCacheFunctions,
IconifyAPIFunctions,
IconifyAPIInternalFunctions,
};
// JSON stuff
export { IconifyIcon, IconifyJSON, IconifyIconName };
@ -87,70 +102,19 @@ export {
IconifyAPISendQuery,
};
/**
* Exposed internal functions
*
* Used by plug-ins, such as Icon Finder
*
* Important: any changes published in a release must be backwards compatible.
*/
export interface IconifyExposedInternals {
/**
* Calculate width knowing height and width/height ratio (or vice versa)
*/
calculateSize: (
size: IconifyIconSize,
ratio: number,
precision?: number
) => IconifyIconSize;
/**
* Get internal API data, used by Icon Finder
*/
getAPI: (provider: string) => IconifyAPIInternalStorage | undefined;
/**
* Get API config, used by custom modules
*/
getAPIConfig: GetAPIConfig;
/**
* Set API module
*/
setAPIModule: (provider: string, item: IconifyAPIModule) => void;
}
/* Browser cache */
export { IconifyBrowserCacheType };
/**
* Cache types
* Enable and disable browser cache
*/
export type IconifyCacheType = 'local' | 'session' | 'all';
export const enableCache = (storage: IconifyBrowserCacheType) =>
toggleBrowserCache(storage, true);
/**
* Toggle cache
*/
function toggleCache(storage: IconifyCacheType, value: boolean): void {
switch (storage) {
case 'local':
case 'session':
config[storage] = value;
break;
case 'all':
for (const key in config) {
config[key] = value;
}
break;
}
}
export function enableCache(storage: IconifyCacheType): void {
toggleCache(storage, true);
}
export function disableCache(storage: IconifyCacheType): void {
toggleCache(storage, false);
}
export const disableCache = (storage: IconifyBrowserCacheType) =>
toggleBrowserCache(storage, false);
/* Storage functions */
/**
* Check if icon exists
*/
@ -176,32 +140,32 @@ export const addIcon = storageFunctions.addIcon;
*/
export const addCollection = storageFunctions.addCollection;
/* Builder functions */
/**
* Calculate icon size
*/
export const calculateSize = builderFunctions.calculateSize;
/**
* Replace unique ids in content
*/
export const replaceIDs = builderFunctions.replaceIDs;
/* API functions */
/**
* Load icons
*/
export const loadIcons: IconifyLoadIcons = API.loadIcons;
export const loadIcons = APIFunctions.loadIcons;
/**
* Add API provider
*/
export { setAPIConfig as addAPIProvider };
export const addAPIProvider = APIFunctions.addAPIProvider;
/**
* Export internal functions that can be used by third party implementations
*/
export const internals: IconifyExposedInternals = {
// Calculate size
calculateSize: calcSize,
// Get API data
getAPI: getRedundancyCache,
// Get API config
getAPIConfig,
// Get API module
setAPIModule,
};
export const _api = APIInternalFunctions;
/**
* Stateful component