@cyberalien/svg-utils 1.0.7 → 1.0.9

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

@@ -1,6 +1,6 @@
 import { getUniqueHash } from "../../../helpers/hash/unique.js";
-import { getGeneratedComponentFilename } from "../../export/filename.js";
 import { getGeneratedAssetFilename } from "./asset.js";
+import { getGeneratedComponentFilename } from "../../export/filename.js";
 
 /**
 * Generate component types filename based on options

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

@@ -0,0 +1,13 @@
+import { GeneratedAssetFile } from "../../types/component.js";
+import { FactoryIconData } from "../../types/data.js";
+import { ComponentFactoryOptions } from "../../types/options.js";
+import { FactoryComponentProps } from "../props/types.js";
+import { JSXMode } from "../../types/jsx.js";
+interface Options extends ComponentFactoryOptions {
+  jsx: JSXMode;
+}
+/**
+ * Add JSX component types
+ */
+declare function addJSXComponentTypes(data: FactoryIconData, options: Options, assets: GeneratedAssetFile[], props: FactoryComponentProps): string;
+export { addJSXComponentTypes };

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

@@ -0,0 +1,39 @@
+import { addComponentTypes } from "./wrapper.js";
+
+const iconPropsTemplate = `interface IconProps {
+/* PROPS */
+}`;
+const exportTemplate = `export { type IconProps };
+export default Component;`;
+const omitProps = `'viewBox' | 'width' | 'height' | 'xmlns'`;
+/**
+* Add JSX component types
+*/
+function addJSXComponentTypes(data, options, assets, props) {
+	let template;
+	switch (options.jsx) {
+		case "react":
+			template = `import type { ForwardRefExoticComponent, SVGProps } from 'react';
+
+${iconPropsTemplate}
+
+const Component: ForwardRefExoticComponent<
+    Omit<SVGProps<SVGSVGElement>, ${omitProps}> & IconProps
+>;
+
+${exportTemplate}
+`;
+			break;
+		case "preact": template = `import type { JSX } from 'preact';
+
+${iconPropsTemplate}
+
+const Component: (props: Omit<JSX.SVGAttributes<SVGSVGElement>, ${omitProps}> & IconProps) => JSX.Element;
+
+${exportTemplate}
+`;
+	}
+	return addComponentTypes(template, data, options, assets, props);
+}
+
+export { addJSXComponentTypes };

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

@@ -1,5 +1,5 @@
-import { getGeneratedComponentTypesFilename } from "../filenames/types.js";
 import { stringifyFactoryPropTypes } from "../props/ts.js";
+import { getGeneratedComponentTypesFilename } from "../filenames/types.js";
 
 /**
 * Add component types

package/lib/components/jsx.d.ts

@@ -0,0 +1,14 @@
+import { FactoryGeneratedComponent } from "./types/component.js";
+import { FactoryIconData } from "./types/data.js";
+import { ComponentFactoryOptions } from "./types/options.js";
+import { JSXMode } from "./types/jsx.js";
+interface Options extends ComponentFactoryOptions {
+  jsx: JSXMode;
+  fallbackPackage?: string;
+  ts?: boolean;
+}
+/**
+ * Create functional Vue component code
+ */
+declare function createJSXComponent(data: FactoryIconData, options: Options): FactoryGeneratedComponent;
+export { createJSXComponent };

package/lib/components/jsx.js

@@ -0,0 +1,124 @@
+import { getComponentSizeValues } from "./helpers/content/size.js";
+import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
+import { stringifyIconViewBox } from "../svg/viewbox/value.js";
+import { createFactoryImports } from "./helpers/imports/create.js";
+import { generateCSSFilesForComponent } from "./helpers/css/generate.js";
+import { addSizeFunctionAsset } from "./helpers/functions/size.js";
+import { stringifyFactoryPropsAsJSON } from "./helpers/props/object.js";
+import { stringifyFactoryImports } from "./helpers/imports/stringify.js";
+import { makeSquareViewBox } from "../svg/viewbox/square.js";
+import { getUsedFactoryProps, stringifyFactoryPropTypes } from "./helpers/props/ts.js";
+import { minifyViewBox } from "../svg/viewbox/minify.js";
+import { getViewBoxRatio } from "./helpers/content/ratio.js";
+import { addJSXComponentTypes } from "./helpers/ts/jsx.js";
+
+/**
+* Create functional Vue component code
+*/
+function createJSXComponent(data, options) {
+	const useTS = options.ts ?? false;
+	const assets = [];
+	const imports = createFactoryImports();
+	const dependencies = /* @__PURE__ */ new Set();
+	let importPackage = "react";
+	let createElement = "createElement";
+	switch (options.jsx) {
+		case "preact":
+			importPackage = "preact";
+			createElement = "h";
+			break;
+	}
+	const fallbackPackage = options.fallbackPackage || null;
+	const hasFallback = !!(fallbackPackage && data.fallback);
+	if (hasFallback) {
+		imports.named[fallbackPackage] = new Set(["Icon"]);
+		dependencies.add(fallbackPackage);
+	}
+	const reactNamedImports = new Set([createElement]);
+	imports.named[importPackage] = reactNamedImports;
+	const style = generateCSSFilesForComponent(data.icon, imports, assets, options);
+	const isEmbeddedCSS = options.cssMode === "embed";
+	let hasFixedSize = !!options.width && !!options.height;
+	const viewBox = data.viewBox;
+	const hasComputedViewbox = options.square && !hasFixedSize && viewBox.width !== viewBox.height;
+	const isStringViewBox = !hasFallback;
+	const hasComputedRatio = hasComputedViewbox && isStringViewBox;
+	if (!hasComputedViewbox && (options.width || options.height)) hasFixedSize = true;
+	const componentExternalCode = [];
+	const componentInternalCode = [];
+	const props = {};
+	if (!hasFallback) props.xmlns = "http://www.w3.org/2000/svg";
+	props.props = {
+		value: "props",
+		template: "...props,"
+	};
+	const getViewBox = (viewBox$1) => isStringViewBox ? `'${stringifyIconViewBox(viewBox$1)}'` : JSON.stringify(minifyViewBox(viewBox$1));
+	if (hasComputedViewbox) {
+		componentExternalCode.push(`const baseViewBox = ${getViewBox(viewBox)};`, `const squareViewBox = ${getViewBox(makeSquareViewBox(viewBox))};`);
+		componentInternalCode.push(`const viewBox = useMemo(() => square ? squareViewBox : baseViewBox, [square]);`);
+	} else componentExternalCode.push(`const viewBox = ${getViewBox(viewBox)};`);
+	const ratioValue = getViewBoxRatio(viewBox);
+	if (hasComputedRatio) componentInternalCode.push(`const ratio = useMemo(() => square ? 1 : ${ratioValue}, [square]);`);
+	if (hasFixedSize) {
+		const sizeProps = getComponentSizeValues(options, data.viewBox);
+		if (!sizeProps) throw new Error("Fixed size expected, but could not be determined");
+		props.width = sizeProps.width;
+		props.height = sizeProps.height;
+	} else if (hasFallback) {
+		props.width = {
+			type: "string",
+			value: "width",
+			template: "width,"
+		};
+		props.height = {
+			type: "string",
+			value: "height",
+			template: "height,"
+		};
+	} else {
+		const getSizeProps = addSizeFunctionAsset(imports, assets, options);
+		componentInternalCode.push(`const size = useMemo(() => ${getSizeProps}(width, height, ${hasComputedRatio ? "ratio" : ratioValue}), [width, height${hasComputedRatio ? ", ratio" : ""}]);`);
+		reactNamedImports.add("useMemo");
+		props.width = {
+			type: "string",
+			value: "width",
+			template: "...size,"
+		};
+		props.height = {
+			type: "string",
+			value: "height",
+			template: ""
+		};
+	}
+	if (options.square) props.square = { type: "boolean" };
+	props.viewBox = {
+		value: "viewBox",
+		template: "viewBox,"
+	};
+	props.content = {
+		value: stringifyFactoryIconContent(data.icon, options, isEmbeddedCSS ? style : void 0),
+		template: hasFallback ? void 0 : "dangerouslySetInnerHTML: {__html: {value}},"
+	};
+	if (hasFallback && data.fallback) props.fallback = data.fallback;
+	componentInternalCode.push(`return ${createElement}(${hasFallback ? "Icon" : "'svg'"}, {
+\t\t${stringifyFactoryPropsAsJSON(props, "\n		")}
+\t});`);
+	const beforeFunction = componentExternalCode.length ? componentExternalCode.join("\n") + "\n\n" : "";
+	const usedProps = getUsedFactoryProps(props);
+	const propsDestricturing = usedProps.length ? `{${[...usedProps, "...props"].join(", ")}}` : "props";
+	const componentFunction = `function Component${useTS ? `<{\n${stringifyFactoryPropTypes(props)}\n}>` : ""}(${propsDestricturing}) {
+\t${componentInternalCode.join("\n	")}
+}
+`;
+	const content = `${stringifyFactoryImports(imports)}\n${beforeFunction}${componentFunction}\nexport default Component;\n`;
+	const types = addJSXComponentTypes(data, options, assets, props);
+	return {
+		assets,
+		content,
+		style: isEmbeddedCSS ? void 0 : style,
+		types,
+		dependencies: dependencies.size ? dependencies : void 0
+	};
+}
+
+export { createJSXComponent };

package/lib/components/raw.js

@@ -1,11 +1,11 @@
 import { getComponentSizeValues } from "./helpers/content/size.js";
 import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
-import { getGeneratedComponentTypesFilename } from "./helpers/filenames/types.js";
 import { stringifyIconViewBox } 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";
+import { stringifyFactoryImports } from "./helpers/imports/stringify.js";
+import { getGeneratedComponentTypesFilename } from "./helpers/filenames/types.js";
 
 /**
 * Create raw component code

package/lib/components/svelte.js

@@ -3,14 +3,14 @@ import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
 import { stringifyIconViewBox } 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 { stringifyFactoryProps } from "./helpers/props/stringify.js";
 import { addSizeFunctionAsset } from "./helpers/functions/size.js";
+import { stringifyFactoryProps } from "./helpers/props/stringify.js";
+import { stringifyFactoryImports } from "./helpers/imports/stringify.js";
 import { makeSquareViewBox } from "../svg/viewbox/square.js";
 import { getUsedFactoryProps, stringifyFactoryPropTypes } from "./helpers/props/ts.js";
-import { addSvelteComponentTypes } from "./helpers/ts/svelte.js";
 import { minifyViewBox } from "../svg/viewbox/minify.js";
 import { getViewBoxRatio } from "./helpers/content/ratio.js";
+import { addSvelteComponentTypes } from "./helpers/ts/svelte.js";
 
 /**
 * Create Svelte component code
@@ -86,7 +86,8 @@ function createSvelteComponent(data, options) {
 		template: hasFallback ? `content={content} fallback="${data.fallback}"` : ""
 	};
 	const usedProps = getUsedFactoryProps(props);
-	componentCode.unshift(`let {${[...usedProps, "...props"].join(", ")}}${useTS ? ": Props" : ""} = $props();\n`);
+	const propsDestricturing = usedProps.length ? `{${[...usedProps, "...props"].join(", ")}}` : "props";
+	componentCode.unshift(`let ${propsDestricturing}${useTS ? ": Props" : ""} = $props();\n`);
 	if (useTS) componentCode.unshift(`interface Props {\n${stringifyFactoryPropTypes(props)}\n};\n`);
 	const tag = hasFallback ? "Icon" : "svg";
 	const template = `<${tag} ${stringifyFactoryProps(props, "{prop}={{value}}")} {...props}>${innerHTML}</${tag}>`;

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

@@ -0,0 +1,2 @@
+type JSXMode = 'react' | 'preact';
+export { JSXMode };

package/lib/components/types/jsx.js

@@ -0,0 +1 @@
+export {  };

package/lib/components/vue-func.js

@@ -3,14 +3,14 @@ import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
 import { stringifyIconViewBox } 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 { addSizeFunctionAsset } from "./helpers/functions/size.js";
+import { stringifyFactoryPropsAsJSON } from "./helpers/props/object.js";
+import { stringifyFactoryImports } from "./helpers/imports/stringify.js";
 import { makeSquareViewBox } from "../svg/viewbox/square.js";
 import { getUsedFactoryProps } from "./helpers/props/ts.js";
 import { minifyViewBox } from "../svg/viewbox/minify.js";
 import { getViewBoxRatio } from "./helpers/content/ratio.js";
 import { addVueComponentTypes } from "./helpers/ts/vue.js";
-import { stringifyFactoryPropsAsJSON } from "./helpers/props/object.js";
 
 /**
 * Create functional Vue component code

package/lib/components/vue.js

@@ -3,9 +3,9 @@ import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
 import { stringifyIconViewBox } 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 { stringifyFactoryProps } from "./helpers/props/stringify.js";
 import { addSizeFunctionAsset } from "./helpers/functions/size.js";
+import { stringifyFactoryProps } from "./helpers/props/stringify.js";
+import { stringifyFactoryImports } from "./helpers/imports/stringify.js";
 import { makeSquareViewBox } from "../svg/viewbox/square.js";
 import { getUsedFactoryProps, stringifyFactoryPropTypes } from "./helpers/props/ts.js";
 import { minifyViewBox } from "../svg/viewbox/minify.js";

package/package.json

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