@cyberalien/svg-utils 0.1.0 → 0.1.1

package/lib/svg-css/factory/components/vue/types.js

@@ -6,8 +6,9 @@ import { stringifyFactoryPropTypes } from "../../props/types.js";
 */
 function addVueComponentTypes(data, options, assets, props) {
 	const propTypes = stringifyFactoryPropTypes(props);
+	const filename = getGeneratedComponentTypesFilename(data, options);
 	assets.push({
-		...getGeneratedComponentTypesFilename(data, options),
+		...filename,
 		content: `import { DefineSetupFnComponent, PublicProps } from 'vue';
 
 interface IconProps {
@@ -20,6 +21,7 @@ export { type IconProps };
 export default Component;
 `
 	});
+	return filename.filename;
 }
 
 export { addVueComponentTypes };

package/lib/svg-css/factory/components/vue-func.d.ts

@@ -0,0 +1,8 @@
+import { FactoryIconData } from "../types/data.js";
+import { FactoryGeneratedComponent } from "../types/component.js";
+import { ComponentFactoryOptions } from "../types/options.js";
+/**
+ * Create functional Vue component code
+ */
+declare function createVueFunctionalComponent(data: FactoryIconData, options: ComponentFactoryOptions): FactoryGeneratedComponent;
+export { createVueFunctionalComponent };

package/lib/svg-css/factory/components/vue-func.js

@@ -0,0 +1,99 @@
+import { makeSquareViewBox } from "../../../svg/viewbox/square.js";
+import { getIconViewBox } from "../../../svg/viewbox/value.js";
+import { getComponentSizeValues } from "../content/size.js";
+import { stringifyFactoryIconContent } from "../content/stringify.js";
+import { createFactoryImports } from "../imports/create.js";
+import { generateCSSFilesForComponent } from "../css/generate.js";
+import { stringifyFactoryImports } from "../imports/stringify.js";
+import { getUsedFactoryProps } from "../props/types.js";
+import { addVueComponentTypes } from "./vue/types.js";
+import { addSizeFunctionAsset } from "./shared/size.js";
+import { stringifyFactoryPropsAsJSON } from "../props/object.js";
+
+/**
+* Create functional Vue component code
+*/
+function createVueFunctionalComponent(data, options) {
+	const assets = [];
+	const imports = createFactoryImports();
+	const hasFallback = !!data.fallback;
+	if (hasFallback) imports.named["@iconify/css-vue"] = new Set(["Icon"]);
+	const vueNamedImports = new Set(["defineComponent", "h"]);
+	imports.named["vue"] = vueNamedImports;
+	generateCSSFilesForComponent(data.icon, imports, assets, options);
+	const componentCode = [];
+	const sizeProps = getComponentSizeValues(options, data.viewBox);
+	const props = {};
+	if (!hasFallback) props.xmlns = "http://www.w3.org/2000/svg";
+	const viewBox = data.viewBox;
+	const isDynanicViewBox = !sizeProps && options.square && viewBox.width !== viewBox.height;
+	if (sizeProps) {
+		props.width = sizeProps.width;
+		props.height = sizeProps.height;
+	} else if (hasFallback) {
+		props.width = {
+			type: "string",
+			value: "width",
+			template: "width: props.width,"
+		};
+		props.height = {
+			type: "string",
+			value: "height",
+			template: "height: props.height,"
+		};
+	} else {
+		const getSizeProps = addSizeFunctionAsset(imports, assets, options);
+		componentCode.push(`const size = computed(() => ${getSizeProps}(props.width, props.height, viewBox${isDynanicViewBox ? ".value" : ""}));`);
+		vueNamedImports.add("computed");
+		props.width = {
+			type: "string",
+			value: "width",
+			template: "...size.value,"
+		};
+		props.height = {
+			type: "string",
+			value: "height",
+			template: ""
+		};
+	}
+	if (options.square) props.square = { type: "boolean" };
+	const getViewBox = (viewBox$1) => hasFallback ? JSON.stringify(viewBox$1) : `'${getIconViewBox(viewBox$1)}'`;
+	const viewBoxValue = getViewBox(viewBox);
+	if (isDynanicViewBox) {
+		componentCode.unshift(`const baseViewBox = ${viewBoxValue};`, `const squareViewBox = ${getViewBox(makeSquareViewBox(viewBox))};`, `const viewBox = computed(() => props.square ? squareViewBox : baseViewBox);`);
+		props.viewBox = {
+			value: "viewBox",
+			template: "viewBox: viewBox.value,"
+		};
+	} else {
+		componentCode.unshift(`const viewBox = ${viewBoxValue};`);
+		props.viewBox = {
+			value: "viewBox",
+			template: "viewBox,"
+		};
+	}
+	props[hasFallback ? "content" : "innerHTML"] = { value: stringifyFactoryIconContent(data.icon, options) };
+	if (data.fallback) props.fallback = data.fallback;
+	const types = addVueComponentTypes(data, options, assets, props);
+	componentCode.push(`return () => h(${hasFallback ? "Icon" : "'svg'"}, { 
+			${stringifyFactoryPropsAsJSON(props, "\n			")}
+		});`);
+	const usedProps = getUsedFactoryProps(props);
+	const componentFunction = `const Component = defineComponent(
+	(${usedProps.length ? "props" : ""}) => {
+		${componentCode.join("\n		")}
+	},
+	{
+		props: ${JSON.stringify(usedProps)}
+	}
+);
+`;
+	const content = `${stringifyFactoryImports(imports)}\n${componentFunction}\nexport default Component;\n`;
+	return {
+		assets,
+		content,
+		types
+	};
+}
+
+export { createVueFunctionalComponent };

package/lib/svg-css/factory/components/vue.d.ts

@@ -1,8 +1,11 @@
 import { FactoryIconData } from "../types/data.js";
 import { FactoryGeneratedComponent } from "../types/component.js";
 import { ComponentFactoryOptions } from "../types/options.js";
+interface VueOptions extends ComponentFactoryOptions {
+  ts?: boolean;
+}
 /**
  * Create Vue component code
  */
-declare function createVueComponent(data: FactoryIconData, options: ComponentFactoryOptions): FactoryGeneratedComponent;
+declare function createVueComponent(data: FactoryIconData, options: VueOptions): FactoryGeneratedComponent;
 export { createVueComponent };

package/lib/svg-css/factory/components/vue.js

@@ -5,98 +5,91 @@ import { stringifyFactoryIconContent } from "../content/stringify.js";
 import { createFactoryImports } from "../imports/create.js";
 import { generateCSSFilesForComponent } from "../css/generate.js";
 import { stringifyFactoryImports } from "../imports/stringify.js";
+import { stringifyFactoryProps } from "../props/stringify.js";
+import { getUsedFactoryProps, stringifyFactoryPropTypes } from "../props/types.js";
 import { addVueComponentTypes } from "./vue/types.js";
 import { addSizeFunctionAsset } from "./shared/size.js";
-import { stringifyFactoryPropsAsJSON } from "../props/object.js";
 
 /**
 * Create Vue component code
 */
 function createVueComponent(data, options) {
+	const useTS = options.ts ?? false;
 	const assets = [];
 	const imports = createFactoryImports();
 	const hasFallback = !!data.fallback;
 	if (hasFallback) imports.named["@iconify/css-vue"] = new Set(["Icon"]);
-	const vueNamedImports = new Set(["defineComponent", "h"]);
+	const vueNamedImports = /* @__PURE__ */ new Set();
 	imports.named["vue"] = vueNamedImports;
 	generateCSSFilesForComponent(data.icon, imports, assets, options);
 	const componentCode = [];
 	const sizeProps = getComponentSizeValues(options, data.viewBox);
 	const props = {};
 	if (!hasFallback) props.xmlns = "http://www.w3.org/2000/svg";
-	const usedProps = [];
 	const viewBox = data.viewBox;
 	const isDynanicViewBox = !sizeProps && options.square && viewBox.width !== viewBox.height;
 	if (sizeProps) {
 		props.width = sizeProps.width;
 		props.height = sizeProps.height;
-	} else {
-		usedProps.push("width", "height");
-		if (hasFallback) {
-			props.width = {
-				type: "string",
-				value: "width",
-				template: "width: props.width,"
-			};
-			props.height = {
-				type: "string",
-				value: "height",
-				template: "height: props.height,"
-			};
-		} else {
-			const getSizeProps = addSizeFunctionAsset(imports, assets, options);
-			componentCode.push(`const size = computed(() => ${getSizeProps}(props.width, props.height, viewBox${isDynanicViewBox ? ".value" : ""}));`);
-			vueNamedImports.add("computed");
-			props.width = {
-				type: "string",
-				value: "width",
-				template: "...size.value,"
-			};
-			props.height = {
-				type: "string",
-				value: "height",
-				template: ""
-			};
-		}
-	}
-	if (options.square) {
-		usedProps.push("square");
-		props.square = { type: "boolean" };
-	}
-	const getViewBox = (viewBox$1) => hasFallback ? JSON.stringify(viewBox$1) : `'${getIconViewBox(viewBox$1)}'`;
-	const viewBoxValue = getViewBox(viewBox);
-	if (isDynanicViewBox) {
-		componentCode.unshift(`const baseViewBox = ${viewBoxValue};`, `const squareViewBox = ${getViewBox(makeSquareViewBox(viewBox))};`, `const viewBox = computed(() => props.square ? squareViewBox : baseViewBox);`);
-		props.viewBox = {
-			value: "viewBox",
-			template: "viewBox: viewBox.value,"
+	} else if (hasFallback) {
+		props.width = {
+			type: "string",
+			value: "width",
+			template: ":width"
+		};
+		props.height = {
+			type: "string",
+			value: "height",
+			template: ":height"
 		};
 	} else {
-		componentCode.unshift(`const viewBox = ${viewBoxValue};`);
-		props.viewBox = {
-			value: "viewBox",
-			template: "viewBox,"
+		const getSizeProps = addSizeFunctionAsset(imports, assets, options);
+		componentCode.push(`const size = computed(() => ${getSizeProps}(props.width, props.height, viewBox${isDynanicViewBox ? ".value" : ""}));`);
+		vueNamedImports.add("computed");
+		props.width = {
+			type: "string",
+			value: "width",
+			template: "v-bind=\"size\""
+		};
+		props.height = {
+			type: "string",
+			value: "height",
+			template: ""
 		};
 	}
-	props[hasFallback ? "content" : "innerHTML"] = { value: stringifyFactoryIconContent(data.icon, options) };
-	if (data.fallback) props.fallback = data.fallback;
-	addVueComponentTypes(data, options, assets, props);
-	componentCode.push(`return () => h(${hasFallback ? "Icon" : "'svg'"}, { 
-			${stringifyFactoryPropsAsJSON(props, "\n			")}
-		});`);
-	const componentFunction = `const Component = defineComponent(
-	(${usedProps.length ? "props" : ""}) => {
-		${componentCode.join("\n		")}
-	},
-	{
-		props: ${JSON.stringify(usedProps)}
+	if (options.square) props.square = { type: "boolean" };
+	const getViewBox = (viewBox$1) => hasFallback ? JSON.stringify(viewBox$1) : `'${getIconViewBox(viewBox$1)}'`;
+	const viewBoxValue = getViewBox(viewBox);
+	if (isDynanicViewBox) componentCode.unshift(`const baseViewBox = ${viewBoxValue};`, `const squareViewBox = ${getViewBox(makeSquareViewBox(viewBox))};`, `const viewBox = computed(() => props.square ? squareViewBox : baseViewBox);`);
+	else componentCode.unshift(`const viewBox = ${viewBoxValue};`);
+	props.viewBox = {
+		value: "viewBox",
+		template: ":viewBox=\"viewBox\""
+	};
+	componentCode.push(`const content = ${stringifyFactoryIconContent(data.icon, options)};`);
+	props.content = {
+		value: "content",
+		template: hasFallback ? `:content fallback="${data.fallback}"` : "v-html=\"content\""
+	};
+	const usedProps = getUsedFactoryProps(props);
+	if (usedProps.length) {
+		const tsCode = useTS ? `<{
+${stringifyFactoryPropTypes(props)}
+}>` : "";
+		componentCode.unshift(`const props = defineProps${tsCode}(${JSON.stringify(usedProps)});\n`);
 	}
-);
+	const template = `<template><${hasFallback ? "Icon" : "svg"} ${stringifyFactoryProps(props, ":{prop}=\"{value}\"")} /></template>`;
+	const content = `<script setup${useTS ? " lang=\"ts\"" : ""}>
+${stringifyFactoryImports(imports)}
+${componentCode.join("\n")}
+<\/script>
+${template}
 `;
-	const content = `${stringifyFactoryImports(imports)}\n${componentFunction}\nexport default Component;\n`;
+	const types = addVueComponentTypes(data, options, assets, props);
 	return {
 		assets,
-		content
+		content,
+		types
 	};
 }
 

package/lib/svg-css/factory/export/exports.d.ts

@@ -1,10 +1,11 @@
 import { FactoryComponent } from "../types/component.js";
+type Types = string | Record<string, string>;
 interface Options {
   ext?: string;
-  data?: Record<string, string>;
+  data?: Record<string, Types>;
 }
 /**
  * Add exports for main files to object
  */
-declare function createExportsForMainFiles(data: FactoryComponent[], options?: Options): Record<string, string>;
+declare function createExportsForMainFiles(data: FactoryComponent[], options?: Options): Record<string, Types>;
 export { createExportsForMainFiles };

package/lib/svg-css/factory/export/exports.js

@@ -4,7 +4,10 @@
 function createExportsForMainFiles(data, options = {}) {
 	const result = options?.data || Object.create(null);
 	const ext = options.ext || "";
-	for (const { icon, filename } of data) result[`./${icon}${ext}`] = `./${filename}`;
+	for (const { icon, filename, types } of data) result[`./${icon}${ext}`] = types ? {
+		types: `./${types}`,
+		default: `./${filename}`
+	} : `./${filename}`;
 	return result;
 }
 

package/lib/svg-css/factory/filenames/component.js

@@ -8,7 +8,8 @@
 */
 function getGeneratedComponentFilename(icon, componentExtension, options) {
 	const { name, prefix } = icon;
-	return (options.prefixDirsForComponents ? `${prefix}/` : "") + (options.doubleDirsForComponents ? `${name.slice(0, 1).toLowerCase()}/` : "") + name + componentExtension;
+	const { prefixDirsForComponents } = options;
+	return (prefixDirsForComponents ? `${typeof prefixDirsForComponents === "string" ? prefixDirsForComponents : prefix}/` : "") + (options.doubleDirsForComponents ? `${name.slice(0, 1).toLowerCase()}/` : "") + name + componentExtension;
 }
 
 export { getGeneratedComponentFilename };

package/lib/svg-css/factory/filenames/path.js

@@ -6,8 +6,11 @@
 * @returns Asset path
 */
 function getFactoryRelativeAssetPath(path, options) {
+	const { prefixDirsForComponents } = options;
+	const prefixDir = prefixDirsForComponents ? typeof prefixDirsForComponents === "string" ? prefixDirsForComponents : "prefix" : "";
+	const parentCount = (prefixDir ? prefixDir.split("/").length : 0) + (options.doubleDirsForComponents ? 1 : 0);
 	return {
-		import: `../${options.prefixDirsForComponents ? "../" : ""}${options.doubleDirsForComponents ? "../" : ""}${path}`,
+		import: (parentCount ? "../".repeat(parentCount) : "./") + path,
 		filename: path
 	};
 }

package/lib/svg-css/factory/imports/stringify.js

@@ -31,11 +31,11 @@ function stringifyFactoryImports(imports, includeTypes = true) {
 		for (const source in data.default) lines.push(`import ${data.default[source]} from '${source}';`);
 		for (const source in data.named) {
 			const items = [...data.named[source]].sort().join(", ");
-			lines.push(`import { ${items} } from '${source}';`);
+			if (items) lines.push(`import { ${items} } from '${source}';`);
 		}
 		if (includeTypes) for (const source in data.types) {
 			const items = [...data.types[source]].sort().join(", ");
-			lines.push(`import type { ${items} } from '${source}';`);
+			if (items) lines.push(`import type { ${items} } from '${source}';`);
 		}
 		for (const source of data.css) lines.push(`import '${source}';`);
 		for (const source in data.modules) lines.push(`import ${data.modules[source]} from '${source}';`);

package/lib/svg-css/factory/props/types.d.ts

@@ -3,4 +3,8 @@ import { FactoryComponentProps } from "../types/props.js";
  * Stringify properties for component
  */
 declare function stringifyFactoryPropTypes(props: FactoryComponentProps): string;
-export { stringifyFactoryPropTypes };
+/**
+ * Get used properties
+ */
+declare function getUsedFactoryProps(props: FactoryComponentProps): string[];
+export { getUsedFactoryProps, stringifyFactoryPropTypes };

package/lib/svg-css/factory/props/types.js

@@ -1,16 +1,27 @@
 /**
 * Stringify properties for component
 */
-function stringifyFactoryPropTypes(props) {
+function parse(props, format) {
 	const result = [];
 	for (const key in props) {
 		const value = props[key];
-		if (typeof value !== "string") {
-			const type = value.type;
-			if (type) result.push(`\t${key}${value.required ? "" : "?"}: ${type};`);
-		}
+		if (typeof value !== "string" && value.type) result.push(format(key, value));
 	}
-	return result.join("\n");
+	return result;
+}
+/**
+* Stringify properties for component
+*/
+function stringifyFactoryPropTypes(props) {
+	return parse(props, (key, value) => {
+		return `\t${key}${value.required ? "" : "?"}: ${value.type};`;
+	}).join("\n");
+}
+/**
+* Get used properties
+*/
+function getUsedFactoryProps(props) {
+	return parse(props, (key) => key);
 }
 
-export { stringifyFactoryPropTypes };
+export { getUsedFactoryProps, stringifyFactoryPropTypes };

package/lib/svg-css/factory/types/component.d.ts

@@ -27,6 +27,7 @@ interface FactoryComponentTemplate {
 interface FactoryGeneratedComponent {
   assets: GeneratedAssetFile[];
   content: string;
+  types?: string;
 }
 /**
  * Component data with filename

package/lib/svg-css/factory/types/options.d.ts

@@ -5,7 +5,7 @@ import { CSSExportMode } from "./css.js";
  */
 interface ComponentFactoryFileSystemOptions {
   doubleDirsForCSS: boolean;
-  prefixDirsForComponents: boolean;
+  prefixDirsForComponents: boolean | string;
   doubleDirsForComponents: boolean;
   chunksPath: GeneratedAssetPath;
   cssPath: GeneratedAssetPath;

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.0",
+  "version": "0.1.1",
   "license": "MIT",
   "bugs": "https://github.com/cyberalien/svg-utils/issues",
   "homepage": "https://cyberalien.dev/",