From 96314c068065b56f171768ec4f61637b0c5c4cb9 Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Fri, 30 Apr 2021 20:10:03 +0300 Subject: [PATCH] Svelte rebuild: change build process to generate both full and offline versions of component --- packages/svelte/api-extractor.iconify.json | 45 ++++++++++++++ packages/svelte/copy.js | 30 +++++++--- packages/svelte/package.json | 10 ++-- packages/svelte/rollup.config.js | 34 +++++++++++ packages/svelte/src/Icon.svelte | 18 ++++++ packages/svelte/src/Icon.svelte.d.ts | 3 + packages/svelte/src/functions.ts | 68 ++++++++++++++++++++++ packages/svelte/src/iconify.ts | 2 + packages/svelte/src/render.ts | 1 - 9 files changed, 197 insertions(+), 14 deletions(-) create mode 100644 packages/svelte/api-extractor.iconify.json create mode 100644 packages/svelte/src/Icon.svelte create mode 100644 packages/svelte/src/Icon.svelte.d.ts create mode 100644 packages/svelte/src/functions.ts create mode 100644 packages/svelte/src/iconify.ts diff --git a/packages/svelte/api-extractor.iconify.json b/packages/svelte/api-extractor.iconify.json new file mode 100644 index 0000000..b64d76d --- /dev/null +++ b/packages/svelte/api-extractor.iconify.json @@ -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": "/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" + } + } + } +} diff --git a/packages/svelte/copy.js b/packages/svelte/copy.js index 424c99f..fb21504 100644 --- a/packages/svelte/copy.js +++ b/packages/svelte/copy.js @@ -15,7 +15,13 @@ try { } catch (err) {} // 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 source = sourceDir + '/' + file; fs.writeFileSync(rootDir + target, fs.readFileSync(rootDir + source)); @@ -23,11 +29,17 @@ try { }); // Copy pre-compiled files -['OfflineIcon.svelte', 'OfflineIcon.svelte.d.ts', 'offline.js'].forEach( - (file) => { - const target = distDir + '/' + file; - const source = libDir + '/' + file; - fs.writeFileSync(rootDir + target, fs.readFileSync(rootDir + source)); - console.log('copied', source, '->', target); - } -); +// These files should not have imports that don't exist in all 3 directories: src, lib and dest +[ + 'Icon.svelte', + 'Icon.svelte.d.ts', + 'OfflineIcon.svelte', + 'OfflineIcon.svelte.d.ts', + 'iconify.js', + 'offline.js', +].forEach((file) => { + const target = distDir + '/' + file; + const source = libDir + '/' + file; + fs.writeFileSync(rootDir + target, fs.readFileSync(rootDir + source)); + console.log('copied', source, '->', target); +}); diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 991ce53..08da105 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -11,15 +11,17 @@ "url": "https://github.com/iconify/iconify.git", "directory": "packages/svelte" }, - "svelte": "dist/offline.js", - "module": "dist/offline-bundle.mjs", - "main": "dist/offline-bundle.js", + "svelte": "dist/iconify.js", + "module": "dist/bundle.mjs", + "main": "dist/bundle.js", + "types": "dist/iconify.d.ts", "scripts": { "build": "node build", "build:copy": "node copy", "build:tsc": "tsc -b", "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", "test": "jest" }, diff --git a/packages/svelte/rollup.config.js b/packages/svelte/rollup.config.js index 3829952..3b14e39 100644 --- a/packages/svelte/rollup.config.js +++ b/packages/svelte/rollup.config.js @@ -11,6 +11,23 @@ const sourceDir = 'src'; // Create bundle export default [ // 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', output: [ @@ -28,6 +45,23 @@ export default [ 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 { input: sourceDir + '/offline-functions.ts', diff --git a/packages/svelte/src/Icon.svelte b/packages/svelte/src/Icon.svelte new file mode 100644 index 0000000..b9899ad --- /dev/null +++ b/packages/svelte/src/Icon.svelte @@ -0,0 +1,18 @@ + + +{#if data === null} + +{:else} + + {@html data.body} + +{/if} \ No newline at end of file diff --git a/packages/svelte/src/Icon.svelte.d.ts b/packages/svelte/src/Icon.svelte.d.ts new file mode 100644 index 0000000..24b3b8f --- /dev/null +++ b/packages/svelte/src/Icon.svelte.d.ts @@ -0,0 +1,3 @@ +import { SvelteComponent } from 'svelte'; + +export default class Icon extends SvelteComponent {} diff --git a/packages/svelte/src/functions.ts b/packages/svelte/src/functions.ts new file mode 100644 index 0000000..d3937d4 --- /dev/null +++ b/packages/svelte/src/functions.ts @@ -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> = 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; + } + }); +} diff --git a/packages/svelte/src/iconify.ts b/packages/svelte/src/iconify.ts new file mode 100644 index 0000000..9862759 --- /dev/null +++ b/packages/svelte/src/iconify.ts @@ -0,0 +1,2 @@ +export { default as Icon } from './Icon.svelte'; +export { addIcon, addCollection } from './functions'; diff --git a/packages/svelte/src/render.ts b/packages/svelte/src/render.ts index 3c1ae93..3ae84f8 100644 --- a/packages/svelte/src/render.ts +++ b/packages/svelte/src/render.ts @@ -5,7 +5,6 @@ import { alignmentFromString, } from '@iconify/core/lib/customisations/shorthand'; import { rotateFromString } from '@iconify/core/lib/customisations/rotate'; -import { fullIcon } from '@iconify/core/lib/icon'; import { iconToSVG } from '@iconify/core/lib/builder'; import { replaceIDs } from '@iconify/core/lib/builder/ids'; import { merge } from '@iconify/core/lib/misc/merge';