@ts-svg/core 0.0.1-beta.0

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@ts-svg/core",
+  "version": "0.0.1-beta.0",
+  "description": "Vite Plugin for loading all svg files inside a folder with types.",
+  "keywords": [
+    "vite-plugin",
+    "vite",
+    "svg",
+    "typescript"
+  ],
+  "author": {
+    "name": "Chun Nam Wong",
+    "url": "https://chunnamwong.com"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chunnamwong/ts-svg.git",
+    "directory": "packages/core"
+  },
+  "type": "module",
+  "main": "src/index.js",
+  "types": [
+    "src/index.d.ts",
+    "src/cli.d.ts"
+  ],
+  "exports": {
+    ".": "./src/index.js",
+    "./cli": "./src/cli.js"
+  },
+  "bin": {
+    "ts-svg": "src/cli.js"
+  },
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "vite": ">=3.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.6.0"
+  },
+  "scripts": {
+    "format": "prettier . --write"
+  }
+}

package/src/cli.d.ts

@@ -0,0 +1,3 @@
+declare module '@ts-svg/core/cli' {
+	export const main: () => Promise<void>;
+}

package/src/cli.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+import { resolveConfig } from 'vite';
+import path from 'node:path';
+import { syncTypes } from './index.js';
+
+export async function main() {
+	const config = await resolveConfig({}, 'build');
+
+	const tsSvgPluginConfig = config.plugins.find(({ name }) => name === 'ts-svg');
+
+	if (!tsSvgPluginConfig) {
+		throw new Error('cannot find ts-svg plugin from vite config');
+	}
+
+	const { path: svgFolderPath, query, svgModuleDeclaration } =
+		/**
+		 * @type {import('vite').Plugin & {tsSvgOptions: import('./index.js').Options}}
+		 */
+		(tsSvgPluginConfig).tsSvgOptions;
+
+	if (!path) {
+		throw new Error('cannot find path option');
+	}
+
+	const svgFolderFullPath = path.join(process.cwd(), svgFolderPath);
+
+	syncTypes(svgFolderFullPath, query, svgModuleDeclaration);
+}
+
+await main();

package/src/index.d.ts

@@ -0,0 +1,15 @@
+import type { Plugin, PluginOption } from 'vite';
+
+type Options = {
+	path: string;
+	query?: '?raw' | '?react' | '?svelte' | (string & Record<never, never>);
+	transform?: Plugin['transform'];
+	svgModuleDeclaration?: string;
+};
+
+export function tsSvg(opts: Options): PluginOption & { tsSvgOptions: Options };
+export function syncTypes(
+	svgFolderFullPath: string,
+	query?: string,
+	svgModuleDeclaration?: string,
+): void;

package/src/index.js

@@ -0,0 +1,192 @@
+import path from 'node:path';
+import fs from 'node:fs';
+
+/**
+ * @typedef Options
+ * @type {object}
+ * @property {string} path The svg folder path
+ * @property {'?raw' | '?react' | '?svelte' | (string & Record<never, never>)} query The import query
+ * @property {string} svgModuleDeclaration
+ * @property {import('vite').Plugin['transform']} transform
+ */
+
+/**
+ * Returns the Vite plugin.
+ * @param {Options} options
+ * @returns {import('vite').PluginOption & { tsSvgOptions: Options}}
+ */
+export function tsSvg(options) {
+	const pluginName = 'ts-svg';
+	const virtualModuleId = `virtual:${pluginName}`;
+	const resolvedVirtualModuleId = resolveVirtualModuleId(virtualModuleId);
+
+	if (!path) {
+		throw new Error('path is not specified.');
+	}
+
+	const handledQuery = options.query ?? '?raw';
+	const cwd = process.cwd();
+	const svgFolderFullPath = path.join(cwd, options.path);
+
+	return {
+		name: pluginName,
+		/**
+		 * Include the options being passed to here so that the cli can get the svg folder path.
+		 */
+		tsSvgOptions: options,
+		/**
+		 * Configure the dev server to listen to svg file changes and sync the types.
+		 */
+		configureServer({ watcher, environments }) {
+			/**
+			 * Sync the types once when starting the dev server.
+			 */
+			syncTypes(svgFolderFullPath, handledQuery, options.svgModuleDeclaration);
+
+			/**
+			 * Sync the types and virtual module whenever svg file changes are detected.
+			 */
+			watcher.on('all', (_, file) => {
+				if (file.startsWith(svgFolderFullPath) && /\.svg$/.test(file)) {
+					syncTypes(svgFolderFullPath, handledQuery, options.svgModuleDeclaration);
+
+					/**
+					 * Reload the virtual module to include new changes
+					 */
+					for (const environment of Object.values(environments)) {
+						const moduleId = path.dirname(
+							path.join(resolvedVirtualModuleId, path.relative(svgFolderFullPath, file)),
+						);
+						const module = environment.moduleGraph.getModuleById(moduleId);
+						if (module) {
+							environment.reloadModule(module);
+						}
+					}
+				}
+			});
+		},
+		resolveId(id) {
+			if (id.startsWith(virtualModuleId)) {
+				return resolveVirtualModuleId(id);
+			}
+		},
+		load(id) {
+			if (id.startsWith(resolvedVirtualModuleId)) {
+				const subPath = id.slice(resolvedVirtualModuleId.length);
+				const actualPath = path.join(svgFolderFullPath, subPath);
+				const svgFiles = fs
+					.readdirSync(actualPath, {
+						withFileTypes: true,
+					})
+					.filter((dirent) => dirent.isFile())
+					.map((dirent) => dirent.name)
+					.filter(isSvgFilePath);
+
+				const exports = svgFiles.map((file) => {
+					return `export { default as ${convertSvgName(file)} } from '${actualPath}/${file}${handledQuery}';`;
+				});
+
+				const code = exports.join('\n');
+
+				return {
+					code,
+					map: { mappings: '' },
+				};
+			}
+		},
+		transform: options.transform,
+	};
+}
+
+/**
+ * Resolve the virtual module id.
+ * @param {string} virtualModuleId
+ */
+function resolveVirtualModuleId(virtualModuleId) {
+	return '\0' + virtualModuleId;
+}
+
+/**
+ * Convert the svg file name to a component name.
+ * @param {string} file
+ */
+function convertSvgName(file) {
+	const fileName = file.replace(/\.svg$/, '');
+	return ` ${fileName}`.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_, char) => char.toUpperCase());
+}
+
+/**
+ * Sync the types of the virtual module.
+ * @param {string} svgFolderFullPath
+ * @param {string | undefined} query
+ * @param {string | undefined} svgModuleDeclaration
+ */
+export function syncTypes(svgFolderFullPath, query = '', svgModuleDeclaration = '') {
+	const svgFolders = fs
+		.readdirSync(svgFolderFullPath, {
+			recursive: true,
+			withFileTypes: true,
+		})
+		.filter((dirent) => dirent.isDirectory())
+		.map((dirent) => path.relative(svgFolderFullPath, path.join(dirent.parentPath, dirent.name)))
+		.concat('');
+
+	let content = `
+// Auto generated by ts-svg
+// Do not edit it manually
+
+${svgModuleDeclaration}
+`;
+
+	for (const svgFolder of svgFolders) {
+		const files = fs
+			.readdirSync(path.join(svgFolderFullPath, svgFolder), {
+				withFileTypes: true,
+			})
+			.filter((dirent) => dirent.isFile())
+			.map((dirent) => dirent.name)
+			.filter(isSvgFilePath);
+
+		content += `
+declare module "${path.join('virtual:ts-svg', svgFolder)}" {
+  ${files.map((file) => `export const ${convertSvgName(file)}: typeof import('*.svg${query}').default;`).join('\n\t')}
+}
+`;
+	}
+
+	writeIfChanged(path.join(process.cwd(), '.ts-svg/ambient.d.ts'), content);
+}
+
+/**
+ * Check if the entry returned by readdirSync is a svg file path
+ * @param {string | Buffer<ArrayBufferLike>} file
+ * @returns {file is string}
+ */
+const isSvgFilePath = (file) => typeof file === 'string' && file.endsWith('.svg');
+
+/**
+ * Taken from https://github.com/sveltejs/kit/blob/%40sveltejs/package%402.5.0/packages/kit/src/core/sync/utils.js
+ */
+
+/** @type {Map<string, string>} */
+const previousContents = new Map();
+
+/**
+ * @param {string} file
+ * @param {string} code
+ */
+function writeIfChanged(file, code) {
+	if (code !== previousContents.get(file)) {
+		write(file, code);
+	}
+}
+
+/**
+ * @param {string} file
+ * @param {string} code
+ */
+function write(file, code) {
+	previousContents.set(file, code);
+	fs.mkdirSync(path.dirname(file), { recursive: true });
+	fs.writeFileSync(file, code);
+}