@cyberalien/svg-utils 0.1.4 → 0.1.5

package/lib/components/helpers/content/stringify.d.ts

@@ -3,5 +3,5 @@ import { ComponentFactoryRenderingOptions } from "../../types/options.js";
 /**
  * Convert icon content to a string literal
  */
-declare function stringifyFactoryIconContent(icon: ComponentFactorySource, options: Pick<ComponentFactoryRenderingOptions, 'cssMode'>): string;
+declare function stringifyFactoryIconContent(icon: ComponentFactorySource, options: Pick<ComponentFactoryRenderingOptions, 'cssMode' | 'mergeCSS'>): string;
 export { stringifyFactoryIconContent };

package/lib/components/helpers/content/stringify.js

@@ -4,12 +4,12 @@ import { generateCSSDefaultImportName } from "../css/name.js";
 * Convert icon content to a string literal
 */
 function stringifyFactoryIconContent(icon, options) {
-	const { cssMode } = options;
+	const { cssMode, mergeCSS } = options;
 	let content = "`" + icon.content.replace(/`/g, "\\`") + "`";
 	switch (cssMode) {
 		case "import": return content;
 		case "module":
-			for (const className in icon.classes) content = content.replace(new RegExp("([\" ])(" + className + ")([\" ])", "g"), `$1\${${generateCSSDefaultImportName(className)}['${className}']}$3`);
+			for (const className in icon.classes) content = content.replace(new RegExp("([\" ])(" + className + ")([\" ])", "g"), `$1\${${mergeCSS ? "css" : generateCSSDefaultImportName(className)}['${className}']}$3`);
 			return content;
 	}
 }

package/lib/components/helpers/css/generate.d.ts

@@ -7,5 +7,5 @@ import { FactoryComponentImports } from "../imports/types.js";
  *
  * Adds imports to imports object, adds assets
  */
-declare function generateCSSFilesForComponent(content: ComponentFactorySource, imports: FactoryComponentImports, assets: GeneratedAssetFile[], options: Pick<ComponentFactoryOptions, 'cssMode' | 'cssPath' | 'doubleDirsForCSS'>): void;
+declare function generateCSSFilesForComponent(content: ComponentFactorySource, imports: FactoryComponentImports, assets: GeneratedAssetFile[], options: Pick<ComponentFactoryOptions, 'cssMode' | 'cssPath' | 'doubleDirsForCSS' | 'mergeCSS'>): void;
 export { generateCSSFilesForComponent };

package/lib/components/helpers/css/generate.js

@@ -11,7 +11,9 @@ function generateCSSFilesForComponent(content, imports, assets, options) {
 	const { classes, keyframes } = content;
 	if (!classes) return;
 	const isModule = options.cssMode === "module";
-	const embedAnimations = isModule;
+	const mergeCSS = options.mergeCSS ?? false;
+	const embedAnimations = isModule && !mergeCSS;
+	const mergedContent = [];
 	for (const className in classes) {
 		const baseContent = stringifyCSSSelector(`.${className}`, classes[className]);
 		let content$1 = baseContent;
@@ -21,6 +23,10 @@ function generateCSSFilesForComponent(content, imports, assets, options) {
 				content$1 += "\n" + (typeof value === "string" ? value : stringifyCSSKeyframes(animationName, value));
 			}
 		}
+		if (mergeCSS) {
+			mergedContent.push(content$1);
+			continue;
+		}
 		const filename = getGeneratedCSSFilename(className, options);
 		assets.push({
 			...filename,
@@ -32,6 +38,10 @@ function generateCSSFilesForComponent(content, imports, assets, options) {
 	if (!embedAnimations && keyframes) for (const animationName in keyframes) {
 		const value = keyframes[animationName];
 		const content$1 = typeof value === "string" ? value : stringifyCSSKeyframes(animationName, value);
+		if (mergeCSS) {
+			mergedContent.push(content$1);
+			continue;
+		}
 		const filename = getGeneratedCSSFilename(animationName, options);
 		assets.push({
 			...filename,
@@ -40,6 +50,14 @@ function generateCSSFilesForComponent(content, imports, assets, options) {
 		if (isModule) imports.modules[filename.import] = generateCSSDefaultImportName(animationName);
 		else imports.css.add(filename.import);
 	}
+	if (mergeCSS && mergedContent.length) {
+		assets.push({
+			...mergeCSS,
+			content: mergedContent.join("\n\n")
+		});
+		if (isModule) imports.modules[mergeCSS.import] = "css";
+		else imports.css.add(mergeCSS.import);
+	}
 }
 
 export { generateCSSFilesForComponent };

package/lib/components/helpers/filenames/types.d.ts

@@ -3,5 +3,5 @@ import { ComponentFactoryFileSystemOptions, GeneratedAssetPath } from "../../typ
 /**
  * Generate component types filename based on options
  */
-declare function getGeneratedComponentTypesFilename(icon: Pick<FactoryIconData, 'name' | 'prefix'>, options: Pick<ComponentFactoryFileSystemOptions, 'doubleDirsForComponents' | 'prefixDirsForComponents'>): GeneratedAssetPath;
+declare function getGeneratedComponentTypesFilename(icon: Pick<FactoryIconData, 'name' | 'prefix'>, content: string, options: Pick<ComponentFactoryFileSystemOptions, 'rootPath' | 'doubleDirsForComponents' | 'prefixDirsForComponents' | 'sharedTypes'>): GeneratedAssetPath;
 export { getGeneratedComponentTypesFilename };

package/lib/components/helpers/filenames/types.js

@@ -1,9 +1,18 @@
+import { getUniqueHash } from "../../../helpers/hash/unique.js";
 import { getGeneratedComponentFilename } from "../../export/filename.js";
+import { getGeneratedAssetFilename } from "./asset.js";
 
 /**
 * Generate component types filename based on options
 */
-function getGeneratedComponentTypesFilename(icon, options) {
+function getGeneratedComponentTypesFilename(icon, content, options) {
+	if (options.sharedTypes) {
+		const hash = getUniqueHash(content, {
+			css: true,
+			length: 8
+		});
+		return getGeneratedAssetFilename(`types/${hash}.d.ts`, options.rootPath);
+	}
 	const filename = getGeneratedComponentFilename(icon, ".d.ts", options);
 	return {
 		filename,

package/lib/components/helpers/vue/types.js

@@ -5,21 +5,21 @@ import { stringifyFactoryPropTypes } from "../props/ts.js";
 * Add Vue component types
 */
 function addVueComponentTypes(data, options, assets, props) {
-	const propTypes = stringifyFactoryPropTypes(props);
-	const filename = getGeneratedComponentTypesFilename(data, options);
-	assets.push({
-		...filename,
-		content: `import { DefineSetupFnComponent, PublicProps } from 'vue';
+	const content = `import { DefineSetupFnComponent, PublicProps } from 'vue';
 
 interface IconProps {
-${propTypes}
+${stringifyFactoryPropTypes(props)}
 }
 
 declare const Component: DefineSetupFnComponent<IconProps, {}, {}, IconProps & {}, PublicProps>;
 
 export { type IconProps };
 export default Component;
-`
+`;
+	const filename = getGeneratedComponentTypesFilename(data, content, options);
+	assets.push({
+		...filename,
+		content
 	});
 	return filename.filename;
 }

package/lib/components/prepare/options.js

@@ -18,7 +18,8 @@ function componentFactoryFileSystemOptions(base) {
 		prefixDirsForComponents,
 		doubleDirsForComponents,
 		rootPath,
-		cssPath
+		cssPath,
+		sharedTypes: base.sharedTypes ?? false
 	};
 }
 

package/lib/components/raw.js

@@ -28,9 +28,10 @@ function createRawComponent(data, options) {
 	codeLines.push("export default icon;\n");
 	const importsCode = stringifyFactoryImports(imports);
 	if (importsCode) codeLines.unshift(importsCode);
+	const typesContent = `const icon: string;\nexport default icon;\n`;
 	assets.push({
-		...getGeneratedComponentTypesFilename(data, options),
-		content: `const icon: string;\nexport default icon;\n`
+		...getGeneratedComponentTypesFilename(data, typesContent, options),
+		content: typesContent
 	});
 	return {
 		assets,

package/lib/components/types/options.d.ts

@@ -15,6 +15,7 @@ interface ComponentFactoryFileSystemOptions {
   doubleDirsForComponents: boolean;
   rootPath: GeneratedAssetPath;
   cssPath: GeneratedAssetPath;
+  sharedTypes?: boolean;
 }
 /**
  * Rendering options for component factory
@@ -22,6 +23,7 @@ interface ComponentFactoryFileSystemOptions {
 interface ComponentFactoryRenderingOptions {
   square?: boolean;
   cssMode: CSSExportMode;
+  mergeCSS?: GeneratedAssetPath;
   width?: string;
   height?: string;
 }

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "Common functions for working with SVG used by various packages.",
   "author": "Vjacheslav Trushkin",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "license": "MIT",
   "bugs": "https://github.com/cyberalien/svg-utils/issues",
   "homepage": "https://cyberalien.dev/",