mirror of
https://github.com/iconify/iconify.git
synced 2025-01-22 22:58:27 +00:00
Svelte rebuild: change build process to generate both full and offline versions of component
This commit is contained in:
parent
708995f8d3
commit
96314c0680
45
packages/svelte/api-extractor.iconify.json
Normal file
45
packages/svelte/api-extractor.iconify.json
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
|
||||||
|
"mainEntryPointFilePath": "lib/iconify.d.ts",
|
||||||
|
"bundledPackages": [
|
||||||
|
"@iconify/types",
|
||||||
|
"@iconify/core",
|
||||||
|
"@cyberalien/redundancy"
|
||||||
|
],
|
||||||
|
"compiler": {
|
||||||
|
"skipLibCheck": true
|
||||||
|
},
|
||||||
|
"apiReport": {
|
||||||
|
"enabled": false
|
||||||
|
},
|
||||||
|
"docModel": {
|
||||||
|
"enabled": false
|
||||||
|
},
|
||||||
|
"dtsRollup": {
|
||||||
|
"enabled": true,
|
||||||
|
"untrimmedFilePath": "<projectFolder>/dist/iconify.d.ts"
|
||||||
|
},
|
||||||
|
"tsdocMetadata": {
|
||||||
|
"enabled": false
|
||||||
|
},
|
||||||
|
"messages": {
|
||||||
|
"compilerMessageReporting": {
|
||||||
|
"default": {
|
||||||
|
"logLevel": "warning"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"extractorMessageReporting": {
|
||||||
|
"default": {
|
||||||
|
"logLevel": "warning"
|
||||||
|
},
|
||||||
|
"ae-missing-release-tag": {
|
||||||
|
"logLevel": "none"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tsdocMessageReporting": {
|
||||||
|
"default": {
|
||||||
|
"logLevel": "warning"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -15,7 +15,13 @@ try {
|
|||||||
} catch (err) {}
|
} catch (err) {}
|
||||||
|
|
||||||
// Copy Svelte files and definitions to lib
|
// Copy Svelte files and definitions to lib
|
||||||
['OfflineIcon.svelte', 'OfflineIcon.svelte.d.ts'].forEach((file) => {
|
// These files are required by api-extractor, not aren't created by tsc
|
||||||
|
[
|
||||||
|
'Icon.svelte',
|
||||||
|
'Icon.svelte.d.ts',
|
||||||
|
'OfflineIcon.svelte',
|
||||||
|
'OfflineIcon.svelte.d.ts',
|
||||||
|
].forEach((file) => {
|
||||||
const target = libDir + '/' + file;
|
const target = libDir + '/' + file;
|
||||||
const source = sourceDir + '/' + file;
|
const source = sourceDir + '/' + file;
|
||||||
fs.writeFileSync(rootDir + target, fs.readFileSync(rootDir + source));
|
fs.writeFileSync(rootDir + target, fs.readFileSync(rootDir + source));
|
||||||
@ -23,11 +29,17 @@ try {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Copy pre-compiled files
|
// Copy pre-compiled files
|
||||||
['OfflineIcon.svelte', 'OfflineIcon.svelte.d.ts', 'offline.js'].forEach(
|
// These files should not have imports that don't exist in all 3 directories: src, lib and dest
|
||||||
(file) => {
|
[
|
||||||
|
'Icon.svelte',
|
||||||
|
'Icon.svelte.d.ts',
|
||||||
|
'OfflineIcon.svelte',
|
||||||
|
'OfflineIcon.svelte.d.ts',
|
||||||
|
'iconify.js',
|
||||||
|
'offline.js',
|
||||||
|
].forEach((file) => {
|
||||||
const target = distDir + '/' + file;
|
const target = distDir + '/' + file;
|
||||||
const source = libDir + '/' + file;
|
const source = libDir + '/' + file;
|
||||||
fs.writeFileSync(rootDir + target, fs.readFileSync(rootDir + source));
|
fs.writeFileSync(rootDir + target, fs.readFileSync(rootDir + source));
|
||||||
console.log('copied', source, '->', target);
|
console.log('copied', source, '->', target);
|
||||||
}
|
});
|
||||||
);
|
|
||||||
|
@ -11,15 +11,17 @@
|
|||||||
"url": "https://github.com/iconify/iconify.git",
|
"url": "https://github.com/iconify/iconify.git",
|
||||||
"directory": "packages/svelte"
|
"directory": "packages/svelte"
|
||||||
},
|
},
|
||||||
"svelte": "dist/offline.js",
|
"svelte": "dist/iconify.js",
|
||||||
"module": "dist/offline-bundle.mjs",
|
"module": "dist/bundle.mjs",
|
||||||
"main": "dist/offline-bundle.js",
|
"main": "dist/bundle.js",
|
||||||
|
"types": "dist/iconify.d.ts",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "node build",
|
"build": "node build",
|
||||||
"build:copy": "node copy",
|
"build:copy": "node copy",
|
||||||
"build:tsc": "tsc -b",
|
"build:tsc": "tsc -b",
|
||||||
"build:bundles": "rollup -c rollup.config.js",
|
"build:bundles": "rollup -c rollup.config.js",
|
||||||
"build:api": "api-extractor run --local --verbose --config api-extractor.offline.json",
|
"prebuild:api": "api-extractor run --local --verbose --config api-extractor.offline.json",
|
||||||
|
"build:api": "api-extractor run --local --verbose --config api-extractor.iconify.json",
|
||||||
"pretest": "npm run build",
|
"pretest": "npm run build",
|
||||||
"test": "jest"
|
"test": "jest"
|
||||||
},
|
},
|
||||||
|
@ -11,6 +11,23 @@ const sourceDir = 'src';
|
|||||||
// Create bundle
|
// Create bundle
|
||||||
export default [
|
export default [
|
||||||
// Bundle everything
|
// Bundle everything
|
||||||
|
{
|
||||||
|
input: sourceDir + '/iconify.ts',
|
||||||
|
output: [
|
||||||
|
{ file: targetDir + '/bundle.mjs', format: 'es' },
|
||||||
|
{ file: targetDir + '/bundle.js', format: 'cjs' },
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
svelte({
|
||||||
|
preprocess: sveltePreprocess(),
|
||||||
|
}),
|
||||||
|
resolve({
|
||||||
|
extensions: ['.ts', '.js', '.svelte'],
|
||||||
|
}),
|
||||||
|
typescript(),
|
||||||
|
commonjs(),
|
||||||
|
],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
input: sourceDir + '/offline.ts',
|
input: sourceDir + '/offline.ts',
|
||||||
output: [
|
output: [
|
||||||
@ -28,6 +45,23 @@ export default [
|
|||||||
commonjs(),
|
commonjs(),
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
// Files included in Icon.svelte as bundle
|
||||||
|
{
|
||||||
|
input: sourceDir + '/functions.ts',
|
||||||
|
output: [
|
||||||
|
{
|
||||||
|
file: targetDir + '/functions.js',
|
||||||
|
format: 'es',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
resolve({
|
||||||
|
extensions: ['.ts', '.js', '.svelte'],
|
||||||
|
}),
|
||||||
|
typescript(),
|
||||||
|
commonjs(),
|
||||||
|
],
|
||||||
|
},
|
||||||
// Files included in OfflineIcon.svelte as bundle
|
// Files included in OfflineIcon.svelte as bundle
|
||||||
{
|
{
|
||||||
input: sourceDir + '/offline-functions.ts',
|
input: sourceDir + '/offline-functions.ts',
|
||||||
|
18
packages/svelte/src/Icon.svelte
Normal file
18
packages/svelte/src/Icon.svelte
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
import { generateIcon } from './offline-functions';
|
||||||
|
|
||||||
|
// Generated data
|
||||||
|
let data;
|
||||||
|
|
||||||
|
$: {
|
||||||
|
data = generateIcon($$props);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if data === null}
|
||||||
|
<slot />
|
||||||
|
{:else}
|
||||||
|
<svg {...data.attributes}>
|
||||||
|
{@html data.body}
|
||||||
|
</svg>
|
||||||
|
{/if}
|
3
packages/svelte/src/Icon.svelte.d.ts
vendored
Normal file
3
packages/svelte/src/Icon.svelte.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { SvelteComponent } from 'svelte';
|
||||||
|
|
||||||
|
export default class Icon extends SvelteComponent {}
|
68
packages/svelte/src/functions.ts
Normal file
68
packages/svelte/src/functions.ts
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
import type { IconifyIcon, IconifyJSON } from '@iconify/types';
|
||||||
|
import { fullIcon } from '@iconify/core/lib/icon';
|
||||||
|
import { parseIconSet } from '@iconify/core/lib/icon/icon-set';
|
||||||
|
import { render } from './render';
|
||||||
|
import type { RenderResult } from './render';
|
||||||
|
import type { IconProps } from './props';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Storage for icons referred by name
|
||||||
|
*/
|
||||||
|
const storage: Record<string, Required<IconifyIcon>> = Object.create(null);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate icon
|
||||||
|
*/
|
||||||
|
export function generateIcon(props: IconProps): RenderResult | null {
|
||||||
|
// Split properties
|
||||||
|
const icon =
|
||||||
|
typeof props.icon === 'string'
|
||||||
|
? storage[props.icon]
|
||||||
|
: typeof props.icon === 'object'
|
||||||
|
? fullIcon(props.icon)
|
||||||
|
: null;
|
||||||
|
|
||||||
|
// Validate icon object
|
||||||
|
if (
|
||||||
|
icon === null ||
|
||||||
|
typeof icon !== 'object' ||
|
||||||
|
typeof icon.body !== 'string'
|
||||||
|
) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return render(icon, props);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add icon to storage, allowing to call it by name
|
||||||
|
*
|
||||||
|
* @param name
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export function addIcon(name: string, data: IconifyIcon): void {
|
||||||
|
storage[name] = fullIcon(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add collection to storage, allowing to call icons by name
|
||||||
|
*
|
||||||
|
* @param data Icon set
|
||||||
|
* @param prefix Optional prefix to add to icon names, true (default) if prefix from icon set should be used.
|
||||||
|
*/
|
||||||
|
export function addCollection(
|
||||||
|
data: IconifyJSON,
|
||||||
|
prefix?: string | boolean
|
||||||
|
): void {
|
||||||
|
const iconPrefix: string =
|
||||||
|
typeof prefix === 'string'
|
||||||
|
? prefix
|
||||||
|
: prefix !== false && typeof data.prefix === 'string'
|
||||||
|
? data.prefix + ':'
|
||||||
|
: '';
|
||||||
|
parseIconSet(data, (name, icon) => {
|
||||||
|
if (icon !== null) {
|
||||||
|
storage[iconPrefix + name] = icon;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
2
packages/svelte/src/iconify.ts
Normal file
2
packages/svelte/src/iconify.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export { default as Icon } from './Icon.svelte';
|
||||||
|
export { addIcon, addCollection } from './functions';
|
@ -5,7 +5,6 @@ import {
|
|||||||
alignmentFromString,
|
alignmentFromString,
|
||||||
} from '@iconify/core/lib/customisations/shorthand';
|
} from '@iconify/core/lib/customisations/shorthand';
|
||||||
import { rotateFromString } from '@iconify/core/lib/customisations/rotate';
|
import { rotateFromString } from '@iconify/core/lib/customisations/rotate';
|
||||||
import { fullIcon } from '@iconify/core/lib/icon';
|
|
||||||
import { iconToSVG } from '@iconify/core/lib/builder';
|
import { iconToSVG } from '@iconify/core/lib/builder';
|
||||||
import { replaceIDs } from '@iconify/core/lib/builder/ids';
|
import { replaceIDs } from '@iconify/core/lib/builder/ids';
|
||||||
import { merge } from '@iconify/core/lib/misc/merge';
|
import { merge } from '@iconify/core/lib/misc/merge';
|
||||||
|
Loading…
x
Reference in New Issue
Block a user