Svelte rebuild: change build process to generate both full and offline versions of component

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": "<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"
+			}
+		}
+	}
+}

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);
+});

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

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',

packages/svelte/src/Icon.svelte

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

packages/svelte/src/Icon.svelte.d.ts

@@ -0,0 +1,3 @@
+import { SvelteComponent } from 'svelte';
+
+export default class Icon extends SvelteComponent {}

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<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;
+		}
+	});
+}

packages/svelte/src/iconify.ts

@@ -0,0 +1,2 @@
+export { default as Icon } from './Icon.svelte';
+export { addIcon, addCollection } from './functions';

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';