Change build process for Svelte components

packages/svelte/.npmignore

@@ -1,3 +1,9 @@
 .DS_Store
 rollup.config.js
+tsconfig.json
+build.js
 node_modules
+build
+src
+lib
+tests

packages/svelte/build.js

@@ -10,7 +10,8 @@ const commands = [];
 // Parse command line
 const compile = {
 	core: false,
-	dist: true,
+	tsc: true,
+	bundles: true,
 };
 process.argv.slice(2).forEach((cmd) => {
 	if (cmd.slice(0, 2) !== '--') {

packages/svelte/package.json

@@ -11,12 +11,13 @@
 		"url": "https://github.com/iconify/iconify.git",
 		"directory": "packages/svelte"
 	},
-	"svelte": "dist/component.mjs",
+	"svelte": "dist/offline.js",
-	"module": "dist/index.mjs",
+	"module": "dist/offline-bundle.mjs",
-	"main": "dist/index.js",
+	"main": "dist/offline-bundle.js",
 	"scripts": {
 		"build": "node build",
-		"build:dist": "rollup -c rollup.config.js"
+		"build:tsc": "tsc -b",
+		"build:bundles": "rollup -c rollup.config.js"
 	},
 	"devDependencies": {
 		"@iconify/core": "^1.0.0-rc.3",

packages/svelte/rollup.config.js

@@ -4,38 +4,44 @@ import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import typescript from '@rollup/plugin-typescript';
 import sveltePreprocess from 'svelte-preprocess';
-import pkg from './package.json';
 
-// Copy Icon.svelte
+// Directories
+const rootDir = __dirname + '/';
+const targetDir = 'dist';
+const sourceDir = 'src';
+const libDir = 'lib';
+
+// Create dist
 try {
-	fs.mkdirSync(__dirname + '/dist');
+	fs.mkdirSync(rootDir + targetDir);
 } catch (err) {}
+
+// Copy Svelte files
 ['OfflineIcon.svelte'].forEach((file) => {
 	fs.writeFileSync(
-		__dirname + '/dist/' + file,
+		rootDir + targetDir + '/' + file,
-		fs.readFileSync(__dirname + '/src/' + file)
+		fs.readFileSync(rootDir + sourceDir + '/' + file)
 	);
+	console.log('copied (original)', file);
 });
 
-// Create component.mjs
+// Copy compiled files (should not include anything that isn't bundled below)
-fs.writeFileSync(
+['offline.js'].forEach((file) => {
-	__dirname + '/dist/component.mjs',
+	fs.writeFileSync(
-	fs.readFileSync(__dirname + '/src/index.ts')
+		rootDir + targetDir + '/' + file,
-);
+		fs.readFileSync(rootDir + libDir + '/' + file)
+	);
+	console.log('copied (compiled)', file);
+});
 
 // Create bundle
-const name = pkg.name
-	.replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
-	.replace(/^\w/, (m) => m.toUpperCase())
-	.replace(/-\w/g, (m) => m[1].toUpperCase());
-
 export default [
 	// Bundle everything
 	{
-		input: 'src/index.ts',
+		input: sourceDir + '/offline.ts',
 		output: [
-			{ file: pkg.module, format: 'es' },
+			{ file: targetDir + '/offline-bundle.mjs', format: 'es' },
-			{ file: pkg.main, format: 'umd', name },
+			{ file: targetDir + '/offline-bundle.js', format: 'cjs' },
 		],
 		plugins: [
 			svelte({
@@ -48,12 +54,12 @@ export default [
 			commonjs(),
 		],
 	},
-	// Files included in OfflineIcon.svelte as bundles without dependencies
+	// Files included in OfflineIcon.svelte as bundle
 	{
-		input: 'src/offline.ts',
+		input: sourceDir + '/offline-functions.ts',
 		output: [
 			{
-				file: 'dist/offline.js',
+				file: targetDir + '/offline-functions.js',
 				format: 'es',
 			},
 		],

packages/svelte/src/OfflineIcon.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { generateIcon } from './offline';
+	import { generateIcon } from './offline-functions';
 
 	// Generated data
 	let data;

packages/svelte/src/index.ts

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

packages/svelte/src/offline-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/offline.ts

@@ -1,68 +1,2 @@
-import type { IconifyIcon, IconifyJSON } from '@iconify/types';
+export { default as Icon } from './OfflineIcon.svelte';
-import { fullIcon } from '@iconify/core/lib/icon';
+export { addIcon, addCollection } from './offline-functions';
-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/props.ts

@@ -14,7 +14,7 @@ export type IconifyIconCustomisations = IconCustomisations & {
  */
 export interface IconifyIconProps extends IconifyIconCustomisations {
 	// Icon object
-	icon: IconifyIcon;
+	icon: IconifyIcon | string;
 
 	// Style
 	color?: string;

packages/svelte/tsconfig.json

@@ -1,9 +1,10 @@
 {
 	"compilerOptions": {
 		"rootDir": "src",
+		"outDir": "lib",
 		"target": "es2017",
 		"module": "esnext",
-		"declaration": false,
+		"declaration": true,
 		"sourceMap": false,
 		"strict": true,
 		"types": ["node", "svelte"],