@cyberalien/svg-utils 0.1.0 → 0.1.2

package/lib/{svg-css/factory → components}/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 → components}/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 → components/export/filename.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 → components}/export/fs.d.ts

@@ -1,4 +1,4 @@
-import { GeneratedComponentFile } from "../types/file.js";
+import { GeneratedComponentFile } from "../types/component.js";
 /**
  * Save exported files to filesystem
  */

package/lib/{svg-css/factory → components}/export/merge.d.ts

@@ -1,5 +1,4 @@
-import { GeneratedComponentFile } from "../types/file.js";
-import { FactoryComponent } from "../types/component.js";
+import { FactoryComponent, GeneratedComponentFile } from "../types/component.js";
 /**
  * Merge exported component files into single array
  */

package/lib/{svg-css/factory → components/helpers}/content/size.d.ts

@@ -1,5 +1,5 @@
 import { IconViewBox } from "../../../svg/viewbox/types.js";
-import { ComponentFactoryRenderingOptions } from "../types/options.js";
+import { ComponentFactoryRenderingOptions } from "../../types/options.js";
 interface SizeResult {
   width: string;
   height: string;

package/lib/{svg-css/factory → components/helpers}/content/stringify.d.ts

@@ -1,5 +1,5 @@
-import { ComponentFactorySource } from "../types/source.js";
-import { ComponentFactoryRenderingOptions } from "../types/options.js";
+import { ComponentFactorySource } from "../../types/source.js";
+import { ComponentFactoryRenderingOptions } from "../../types/options.js";
 /**
  * Convert icon content to a string literal
  */

package/lib/{svg-css/factory → components/helpers}/css/generate.d.ts

@@ -1,7 +1,7 @@
-import { ComponentFactorySource } from "../types/source.js";
-import { GeneratedAssetFile } from "../types/file.js";
-import { FactoryComponentImports } from "../types/component.js";
-import { ComponentFactoryOptions } from "../types/options.js";
+import { GeneratedAssetFile } from "../../types/component.js";
+import { ComponentFactorySource } from "../../types/source.js";
+import { ComponentFactoryOptions } from "../../types/options.js";
+import { FactoryComponentImports } from "../imports/types.js";
 /**
  * Generate CSS files for component
  *

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

@@ -0,0 +1,10 @@
+import { GeneratedAssetPath } from "../../types/options.js";
+/**
+ * Generate asset filename based on options
+ *
+ * @param filename - Filename without path
+ * @param rootPath - Root path
+ * @returns Asset path
+ */
+declare function getGeneratedAssetFilename(filename: string, rootPath: GeneratedAssetPath): GeneratedAssetPath;
+export { getGeneratedAssetFilename };

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

@@ -0,0 +1,16 @@
+/**
+* Generate asset filename based on options
+*
+* @param filename - Filename without path
+* @param rootPath - Root path
+* @returns Asset path
+*/
+function getGeneratedAssetFilename(filename, rootPath) {
+	const basePath = rootPath.filename;
+	return {
+		import: `${rootPath.import}/${filename}`,
+		filename: `${basePath ? basePath + "/" : ""}${filename}`
+	};
+}
+
+export { getGeneratedAssetFilename };

package/lib/{svg-css/factory → components/helpers}/filenames/css.d.ts

@@ -1,5 +1,4 @@
-import { GeneratedAssetPath } from "../types/asset.js";
-import { ComponentFactoryOptions } from "../types/options.js";
+import { ComponentFactoryOptions, GeneratedAssetPath } from "../../types/options.js";
 /**
  * Generate CSS filename based on options
  */

package/lib/{svg-css/factory → components/helpers}/filenames/css.js

@@ -1,3 +1,5 @@
+import { getGeneratedAssetFilename } from "./asset.js";
+
 /**
 * Generate CSS filename based on options
 */
@@ -5,10 +7,7 @@ function getGeneratedCSSFilename(name, options) {
 	const { cssPath, doubleDirsForCSS, cssMode } = options;
 	const baseName = doubleDirsForCSS ? `${name.slice(0, 1).toLowerCase()}/${name}` : name;
 	const filename = cssMode === "module" ? `${baseName}.module.css` : `${baseName}.css`;
-	return {
-		import: `${cssPath.import}/${filename}`,
-		filename: `${cssPath.filename}/${filename}`
-	};
+	return getGeneratedAssetFilename(filename, cssPath);
 }
 
 export { getGeneratedCSSFilename };

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

@@ -0,0 +1,9 @@
+import { ComponentFactoryFileSystemOptions, GeneratedAssetPath } from "../../types/options.js";
+/**
+ * Get relative path to root directory from component
+ *
+ * @param options Factory options
+ * @returns Asset path
+ */
+declare function getFactoryRelativeRootPath(options: Pick<ComponentFactoryFileSystemOptions, 'doubleDirsForComponents' | 'prefixDirsForComponents'>): GeneratedAssetPath;
+export { getFactoryRelativeRootPath };

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

@@ -0,0 +1,17 @@
+/**
+* Get relative path to root directory from component
+*
+* @param options Factory options
+* @returns Asset path
+*/
+function getFactoryRelativeRootPath(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: parentCount ? "../".repeat(parentCount - 1) + ".." : ".",
+		filename: ""
+	};
+}
+
+export { getFactoryRelativeRootPath };

package/lib/{svg-css/factory → components/helpers}/filenames/types.d.ts

@@ -1,6 +1,5 @@
-import { FactoryIconData } from "../types/data.js";
-import { GeneratedAssetPath } from "../types/asset.js";
-import { ComponentFactoryFileSystemOptions } from "../types/options.js";
+import { FactoryIconData } from "../../types/data.js";
+import { ComponentFactoryFileSystemOptions, GeneratedAssetPath } from "../../types/options.js";
 /**
  * Generate component types filename based on options
  */

package/lib/{svg-css/factory → components/helpers}/filenames/types.js

@@ -1,4 +1,4 @@
-import { getGeneratedComponentFilename } from "./component.js";
+import { getGeneratedComponentFilename } from "../../export/filename.js";
 
 /**
 * Generate component types filename based on options

package/lib/components/helpers/functions/size.d.ts

@@ -0,0 +1,8 @@
+import { GeneratedAssetFile } from "../../types/component.js";
+import { ComponentFactoryOptions } from "../../types/options.js";
+import { FactoryComponentImports } from "../imports/types.js";
+/**
+ * Adds getSizeProps() function to assets
+ */
+declare function addSizeFunctionAsset(imports: FactoryComponentImports, assets: GeneratedAssetFile[], options: Pick<ComponentFactoryOptions, 'rootPath'>): string;
+export { addSizeFunctionAsset };

package/lib/{svg-css/factory/components/shared → components/helpers/functions}/size.js

@@ -1,4 +1,4 @@
-import { getGeneratedAssetFilename } from "../../filenames/asset.js";
+import { getGeneratedAssetFilename } from "../filenames/asset.js";
 
 const functionName = "getSizeProps";
 const functionContent = `
@@ -67,7 +67,7 @@ export { ${functionName} };
 * Adds getSizeProps() function to assets
 */
 function addSizeFunctionAsset(imports, assets, options) {
-	const filename = getGeneratedAssetFilename("size.js", options);
+	const filename = getGeneratedAssetFilename("helpers/size.js", options.rootPath);
 	imports.named[filename.import] = new Set([functionName]);
 	assets.push({
 		...filename,

package/lib/{svg-css/factory → components/helpers}/imports/add.d.ts

@@ -1,4 +1,4 @@
-import { FactoryComponentImports } from "../types/component.js";
+import { FactoryComponentImports } from "./types.js";
 /**
  * Add named import
  */

package/lib/{svg-css/factory → components/helpers}/imports/create.d.ts

@@ -1,4 +1,4 @@
-import { FactoryComponentImports } from "../types/component.js";
+import { FactoryComponentImports } from "./types.js";
 /**
  * Create imports object
  */

package/lib/{svg-css/factory → components/helpers}/imports/stringify.d.ts

@@ -1,4 +1,4 @@
-import { FactoryComponentImports } from "../types/component.js";
+import { FactoryComponentImports } from "./types.js";
 /**
  * Export imports as string
  */

package/lib/{svg-css/factory → components/helpers}/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/components/helpers/imports/types.d.ts

@@ -0,0 +1,12 @@
+/**
+ * List of imports for component
+ */
+interface FactoryComponentImports {
+  default: Record<string, string>;
+  named: Record<string, Set<string>>;
+  types: Record<string, Set<string>>;
+  full: Set<string>;
+  css: Set<string>;
+  modules: Record<string, string>;
+}
+export { FactoryComponentImports };

package/lib/{svg-css/factory → components/helpers}/props/object.d.ts

@@ -1,4 +1,4 @@
-import { FactoryComponentProps } from "../types/props.js";
+import { FactoryComponentProps } from "./types.js";
 /**
  * Stringify properties for component as JS object
  */

package/lib/{svg-css/factory → components/helpers}/props/stringify.d.ts

@@ -1,4 +1,4 @@
-import { FactoryComponentProps } from "../types/props.js";
+import { FactoryComponentProps } from "./types.js";
 /**
  * Template for property
  */

package/lib/components/helpers/props/ts.d.ts

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

package/lib/components/helpers/props/ts.js

@@ -0,0 +1,27 @@
+/**
+* Stringify properties for component
+*/
+function parse(props, format) {
+	const result = [];
+	for (const key in props) {
+		const value = props[key];
+		if (typeof value !== "string" && value.type) result.push(format(key, value));
+	}
+	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 { getUsedFactoryProps, stringifyFactoryPropTypes };

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

@@ -0,0 +1,9 @@
+import { GeneratedAssetFile } from "../../types/component.js";
+import { FactoryIconData } from "../../types/data.js";
+import { ComponentFactoryOptions } from "../../types/options.js";
+import { FactoryComponentProps } from "../props/types.js";
+/**
+ * Add Vue component types
+ */
+declare function addVueComponentTypes(data: FactoryIconData, options: ComponentFactoryOptions, assets: GeneratedAssetFile[], props: FactoryComponentProps): string;
+export { addVueComponentTypes };

package/lib/{svg-css/factory/components → components/helpers}/vue/types.js

@@ -1,13 +1,14 @@
-import { getGeneratedComponentTypesFilename } from "../../filenames/types.js";
-import { stringifyFactoryPropTypes } from "../../props/types.js";
+import { getGeneratedComponentTypesFilename } from "../filenames/types.js";
+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({
-		...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/components/prepare/iconify.d.ts

@@ -0,0 +1,17 @@
+import { GeneratedAssetFile } from "../types/component.js";
+import { ConvertSVGContentOptions } from "../../svg-css/types.js";
+import { FactoryIconData } from "../types/data.js";
+import { GeneratedAssetPath } from "../types/options.js";
+import { IconifyIcon, IconifyJSON } from "@iconify/types";
+interface Options extends ConvertSVGContentOptions {
+  fallback?: string | boolean;
+}
+/**
+ * Convert IconifyIcon data to FactoryIconData
+ */
+declare function convertIconifyIconToFactoryContent(icon: IconifyIcon, prefix: string, name: string, options?: Options): FactoryIconData;
+/**
+ * Create metadata assets for an icon set
+ */
+declare function getIconifyIconsetMetadataAsset(iconSet: Pick<IconifyJSON, 'prefix' | 'info' | 'lastModified'>, rootPath: GeneratedAssetPath): GeneratedAssetFile[];
+export { convertIconifyIconToFactoryContent, getIconifyIconsetMetadataAsset };

package/lib/components/prepare/iconify.js

@@ -0,0 +1,38 @@
+import { convertSVGContentToCSSRules } from "../../svg-css/content.js";
+import { getGeneratedAssetFilename } from "../helpers/filenames/asset.js";
+import { normaliseIconifyIcon } from "../../iconify/icon/nornalise.js";
+
+/**
+* Convert IconifyIcon data to FactoryIconData
+*/
+function convertIconifyIconToFactoryContent(icon, prefix, name, options) {
+	const { body, viewBox } = normaliseIconifyIcon(icon);
+	const fallbackOption = options?.fallback ?? true;
+	const fallback = typeof fallbackOption === "string" ? fallbackOption : fallbackOption ? `${prefix}:${name}` : void 0;
+	return {
+		prefix,
+		name,
+		viewBox,
+		icon: convertSVGContentToCSSRules(body, options),
+		fallback
+	};
+}
+/**
+* Create metadata assets for an icon set
+*/
+function getIconifyIconsetMetadataAsset(iconSet, rootPath) {
+	const assets = [];
+	const { prefix, info, lastModified } = iconSet;
+	const metadata = {
+		prefix,
+		info,
+		lastModified
+	};
+	assets.push({
+		...getGeneratedAssetFilename("iconify.json", rootPath),
+		content: JSON.stringify(metadata, null, "	") + "\n"
+	});
+	return assets;
+}
+
+export { convertIconifyIconToFactoryContent, getIconifyIconsetMetadataAsset };

package/lib/{svg-css/factory/filenames → components/prepare}/options.js

@@ -1,4 +1,5 @@
-import { getFactoryRelativeAssetPath } from "./path.js";
+import { getGeneratedAssetFilename } from "../helpers/filenames/asset.js";
+import { getFactoryRelativeRootPath } from "../helpers/filenames/path.js";
 
 /**
 * Generate file system options
@@ -7,19 +8,16 @@ function componentFactoryFileSystemOptions(base) {
 	const doubleDirsForCSS = base.doubleDirsForCSS ?? true;
 	const prefixDirsForComponents = base.prefixDirsForComponents ?? false;
 	const doubleDirsForComponents = base.doubleDirsForComponents ?? true;
-	const chunksPath = base.chunksPath ?? getFactoryRelativeAssetPath("assets", {
-		doubleDirsForComponents,
-		prefixDirsForComponents
-	});
-	const cssPath = base.cssPath ?? getFactoryRelativeAssetPath("css", {
+	const rootPath = base.rootPath ?? getFactoryRelativeRootPath({
 		doubleDirsForComponents,
 		prefixDirsForComponents
 	});
+	const cssPath = base.cssPath ?? getGeneratedAssetFilename("css", rootPath);
 	return {
 		doubleDirsForCSS,
 		prefixDirsForComponents,
 		doubleDirsForComponents,
-		chunksPath,
+		rootPath,
 		cssPath
 	};
 }

package/lib/components/raw.d.ts

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

package/lib/{svg-css/factory/components → components}/raw.js

@@ -1,11 +1,11 @@
-import { getIconViewBox } from "../../../svg/viewbox/value.js";
-import { getComponentSizeValues } from "../content/size.js";
-import { stringifyFactoryIconContent } from "../content/stringify.js";
-import { getGeneratedComponentTypesFilename } from "../filenames/types.js";
-import { createFactoryImports } from "../imports/create.js";
-import { generateCSSFilesForComponent } from "../css/generate.js";
-import { stringifyFactoryImports } from "../imports/stringify.js";
-import { factoryPropTemplate, stringifyFactoryProps } from "../props/stringify.js";
+import { getComponentSizeValues } from "./helpers/content/size.js";
+import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
+import { getGeneratedComponentTypesFilename } from "./helpers/filenames/types.js";
+import { getIconViewBox } from "../svg/viewbox/value.js";
+import { createFactoryImports } from "./helpers/imports/create.js";
+import { generateCSSFilesForComponent } from "./helpers/css/generate.js";
+import { stringifyFactoryImports } from "./helpers/imports/stringify.js";
+import { factoryPropTemplate, stringifyFactoryProps } from "./helpers/props/stringify.js";
 
 /**
 * Create raw component code

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

@@ -0,0 +1,29 @@
+/**
+ * File generated by component factory
+ */
+interface GeneratedComponentFile {
+  filename: string;
+  content: string;
+}
+/**
+ * Asset generated by component factory
+ */
+interface GeneratedAssetFile extends GeneratedComponentFile {
+  import: string;
+}
+/**
+ * Generated component
+ */
+interface FactoryGeneratedComponent {
+  assets: GeneratedAssetFile[];
+  content: string;
+  types?: string;
+}
+/**
+ * Component data with filename
+ */
+interface FactoryComponent extends Omit<FactoryGeneratedComponent, 'ext' | 'forceExtension'> {
+  icon: string;
+  filename: string;
+}
+export { FactoryComponent, FactoryGeneratedComponent, GeneratedAssetFile, GeneratedComponentFile };

package/lib/{svg-css/factory → components}/types/data.d.ts

@@ -1,4 +1,4 @@
-import { IconViewBox } from "../../../svg/viewbox/types.js";
+import { IconViewBox } from "../../svg/viewbox/types.js";
 import { ComponentFactorySource } from "./source.js";
 /**
  * Icon data

package/lib/{svg-css/factory → components}/types/options.d.ts

@@ -1,13 +1,19 @@
-import { GeneratedAssetPath } from "./asset.js";
 import { CSSExportMode } from "./css.js";
+/**
+ * Asset path, generated from configuration
+ */
+interface GeneratedAssetPath {
+  filename: string;
+  import: string;
+}
 /**
  * File system options for component factory
  */
 interface ComponentFactoryFileSystemOptions {
   doubleDirsForCSS: boolean;
-  prefixDirsForComponents: boolean;
+  prefixDirsForComponents: boolean | string;
   doubleDirsForComponents: boolean;
-  chunksPath: GeneratedAssetPath;
+  rootPath: GeneratedAssetPath;
   cssPath: GeneratedAssetPath;
 }
 /**
@@ -23,4 +29,4 @@ interface ComponentFactoryRenderingOptions {
  * Options for component factory
  */
 interface ComponentFactoryOptions extends ComponentFactoryFileSystemOptions, ComponentFactoryRenderingOptions {}
-export { ComponentFactoryFileSystemOptions, ComponentFactoryOptions, ComponentFactoryRenderingOptions };
+export { ComponentFactoryFileSystemOptions, ComponentFactoryOptions, ComponentFactoryRenderingOptions, GeneratedAssetPath };

package/lib/{svg-css/factory → components}/types/source.d.ts

@@ -1,5 +1,5 @@
-import { CSSKeyframes, CSSRules } from "../../../css/types.js";
-import { ConvertedSVGContent } from "../../types.js";
+import { CSSKeyframes, CSSRules } from "../../css/types.js";
+import { ConvertedSVGContent } from "../../svg-css/types.js";
 /**
  * Content for component factory
  */

package/lib/components/vue-func.d.ts

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