@cyberalien/svg-utils 1.2.5 → 1.2.6

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

@@ -1,11 +1,10 @@
-import { addComponentTypes } from "./wrapper.js";
+import { addComponentTypes, omitComponentSVGProps } 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
 */
@@ -18,7 +17,7 @@ function addJSXComponentTypes(data, options, assets, props) {
 ${iconPropsTemplate}
 
 const Component: ForwardRefExoticComponent<
-    Omit<SVGProps<SVGSVGElement>, ${omitProps}> & IconProps
+    Omit<SVGProps<SVGSVGElement>, ${omitComponentSVGProps}> & IconProps
 >;
 
 ${exportTemplate}
@@ -28,7 +27,7 @@ ${exportTemplate}
 
 ${iconPropsTemplate}
 
-const Component: (props: Omit<JSX.SVGAttributes<SVGSVGElement>, ${omitProps}> & IconProps) => JSX.Element;
+const Component: (props: Omit<JSX.SVGAttributes<SVGSVGElement>, ${omitComponentSVGProps}> & IconProps) => JSX.Element;
 
 ${exportTemplate}
 `;

package/lib/components/helpers/ts/solid.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 Solid component types
+ */
+declare const addSolidComponentTypes: (data: FactoryIconData, options: ComponentFactoryOptions, assets: GeneratedAssetFile[], props: FactoryComponentProps) => string;
+export { addSolidComponentTypes };

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

@@ -0,0 +1,20 @@
+import { addComponentTypes, omitComponentSVGProps } from "./wrapper.js";
+
+/**
+* Add Solid component types
+*/
+const addSolidComponentTypes = addComponentTypes.bind(null, `import { JSX } from 'solid-js';
+
+interface IconProps {
+/* PROPS */
+}
+
+declare const Component: (
+	props: Omit<JSX.SvgSVGAttributes<SVGSVGElement>, ${omitComponentSVGProps}> & IconProps
+) => JSX.Element;
+
+export { type IconProps };
+export default Component;
+`);
+
+export { addSolidComponentTypes };

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

@@ -2,8 +2,12 @@ import { GeneratedAssetFile } from "../../types/component.js";
 import { FactoryIconData } from "../../types/data.js";
 import { ComponentFactoryOptions } from "../../types/options.js";
 import { FactoryComponentProps } from "../props/types.js";
+/**
+ * Properties to omit
+ */
+declare const omitComponentSVGProps = "'viewBox' | 'width' | 'height' | 'xmlns'";
 /**
  * Add component types
  */
 declare function addComponentTypes(template: string, data: FactoryIconData, options: ComponentFactoryOptions, assets: GeneratedAssetFile[], props: FactoryComponentProps): string;
-export { addComponentTypes };
+export { addComponentTypes, omitComponentSVGProps };

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

@@ -1,6 +1,10 @@
 import { stringifyFactoryPropTypes } from "../props/ts.js";
 import { getGeneratedComponentTypesFilename } from "../filenames/types.js";
 
+/**
+* Properties to omit
+*/
+const omitComponentSVGProps = `'viewBox' | 'width' | 'height' | 'xmlns'`;
 /**
 * Add component types
 */
@@ -15,4 +19,4 @@ function addComponentTypes(template, data, options, assets, props) {
 	return filename.filename;
 }
 
-export { addComponentTypes };
+export { addComponentTypes, omitComponentSVGProps };

package/lib/components/jsx.d.ts

@@ -8,7 +8,7 @@ interface Options extends ComponentFactoryOptions {
   ts?: boolean;
 }
 /**
- * Create functional Vue component code
+ * Create React component code
  */
 declare function createJSXComponent(data: FactoryIconData, options: Options): FactoryGeneratedComponent;
 export { createJSXComponent };

package/lib/components/jsx.js

@@ -16,7 +16,7 @@ import { addFallbackFunctionAsset } from "./helpers/functions/fallback.js";
 import { addInnerHTMLFunctionAsset } from "./helpers/functions/innerhtml.js";
 
 /**
-* Create functional Vue component code
+* Create React component code
 */
 function createJSXComponent(data, options) {
 	const icon = data.icon;
@@ -178,8 +178,7 @@ function createJSXComponent(data, options) {
 	const propTypes = stringifyFactoryPropTypes(props);
 	const typesCode = useTS ? `interface Props {\n${propTypes}\n};\n\n` : propTypes ? `/** @type {{${propTypes.replace(/\s*\n\s*/g, " ").trim()}}} */\n` : "";
 	const usedProps = getUsedFactoryProps(props);
-	const propsDestricturing = usedProps.length ? `{${[...usedProps, "...props"].join(", ")}}` : "props";
-	const componentFunction = `${typesCode}function Component${useTS ? `<Props>` : ""}(${propsDestricturing}) {
+	const componentFunction = `${typesCode}function Component(${usedProps.length ? `{${[...usedProps, "...props"].join(", ")}}` : "props"}${useTS ? `: Props` : ""}) {
 \t${componentInternalCode.join("\n	")}
 }
 `;

package/lib/components/solid.d.ts

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

package/lib/components/solid.js

@@ -0,0 +1,170 @@
+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 { 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";
+import { getViewBoxRatio } from "./helpers/content/ratio.js";
+import { addCustomFunctionAsset } from "./helpers/functions/custom.js";
+import { addFallbackFunctionAsset } from "./helpers/functions/fallback.js";
+import { addSolidComponentTypes } from "./helpers/ts/solid.js";
+
+/**
+* Create Solid component code
+*/
+function createSolidComponent(data, options) {
+	const icon = data.icon;
+	const viewBox = icon.viewBox;
+	const fallback = icon.defaultFallback;
+	const statefulData = icon.statefulData;
+	const useTS = options.ts ?? false;
+	const assets = [];
+	const imports = createFactoryImports();
+	const dependencies = /* @__PURE__ */ new Set();
+	if (fallback) {
+		imports.named["@iconify/css-solid"] = new Set(["Icon"]);
+		dependencies.add("@iconify/css-solid");
+	}
+	const solidNamedImports = /* @__PURE__ */ new Set([]);
+	imports.named["solid-js"] = solidNamedImports;
+	const style = generateCSSFilesForComponent(icon, imports, assets, options);
+	const isEmbeddedCSS = options.cssMode === "embed";
+	let hasFixedSize = !!options.width && !!options.height;
+	const hasComputedViewbox = options.square && !hasFixedSize && viewBox.width !== viewBox.height;
+	const isStringViewBox = !fallback;
+	const hasComputedRatio = hasComputedViewbox && isStringViewBox;
+	if (!hasComputedViewbox && (options.width || options.height)) hasFixedSize = true;
+	const componentExternalCode = [];
+	const componentInternalCode = [];
+	const props = {};
+	if (!fallback) props.xmlns = "http://www.w3.org/2000/svg";
+	let computedFallback = false;
+	if (statefulData) {
+		const { supportedStates, allStates } = statefulData;
+		if (supportedStates.size) {
+			const computedStates = [];
+			let addedStateFunc = false;
+			for (const state of allStates) if (typeof state === "string") {
+				if (supportedStates.has(state)) {
+					props[state] = {
+						type: "boolean",
+						value: state,
+						template: ""
+					};
+					computedStates.push(`'${state}': local['${state}']`);
+				}
+			} else {
+				const stateName = state[0];
+				if (supportedStates.has(stateName)) {
+					const stateValues = state[1];
+					const defaultStateValue = state[2] ?? stateValues[0];
+					props[stateName] = {
+						type: stateValues.map((value) => `'${value}'`).join(" | "),
+						value: stateName,
+						template: ""
+					};
+					computedStates.push(`'${stateName}': namedStateValue(local['${stateName}'], '${defaultStateValue}')`);
+					if (!addedStateFunc) {
+						addedStateFunc = true;
+						addCustomFunctionAsset(imports, assets, options, {
+							functionName: "namedStateValue",
+							content: `export function namedStateValue(value, defaultValue) {
+		return value && value !== defaultValue ? value : undefined;
+	}`
+						});
+					}
+				}
+			}
+			if (computedStates.length) {
+				componentInternalCode.push(`const states = createMemo(() => ({ ${computedStates.join(", ")} }));`);
+				if (fallback && statefulData.fallback) {
+					computedFallback = true;
+					const func = addFallbackFunctionAsset(imports, assets, options, statefulData.defaultStateValues);
+					componentInternalCode.push(`const fallback = createMemo(() => ${func}(${JSON.stringify(statefulData.fallback)},states()));`);
+				}
+				componentInternalCode.push(`const className = createMemo(() => Object.entries(states()).map(([key, value]) => value ? \`state-\${value === true ? key : value}\` : '').join(' ').trim() || undefined);`);
+				props.class = {
+					value: "className",
+					template: "class={className()}"
+				};
+			}
+		}
+	}
+	const getViewBox = (viewBox) => isStringViewBox ? `'${stringifyIconViewBox(viewBox)}'` : JSON.stringify(minifyViewBox(viewBox));
+	if (hasComputedViewbox) {
+		componentExternalCode.push(`const baseViewBox = ${getViewBox(viewBox)};`, `const squareViewBox = ${getViewBox(makeSquareViewBox(viewBox))};`);
+		componentInternalCode.push(`const viewBox = createMemo(() => local.square ? squareViewBox : baseViewBox);`);
+	} else componentExternalCode.push(`const viewBox = ${getViewBox(viewBox)};`);
+	const ratioValue = getViewBoxRatio(viewBox);
+	if (hasComputedRatio) componentInternalCode.push(`const ratio = createMemo(() => local.square ? 1 : ${ratioValue});`);
+	if (hasFixedSize) {
+		const sizeProps = getComponentSizeValues(options, viewBox);
+		if (!sizeProps) throw new Error("Fixed size expected, but could not be determined");
+		props.width = sizeProps.width;
+		props.height = sizeProps.height;
+	} else if (fallback) {
+		props.width = {
+			type: "string",
+			value: "width",
+			template: "width={local.width}"
+		};
+		props.height = {
+			type: "string",
+			value: "height",
+			template: "height={local.height}"
+		};
+	} else {
+		const getSizeProps = addSizeFunctionAsset(imports, assets, options);
+		componentInternalCode.push(`const size = createMemo(() => ${getSizeProps}(local.width, local.height, ${hasComputedRatio ? "ratio()" : ratioValue}));`);
+		props.width = {
+			type: "string",
+			value: "width",
+			template: "{...size()}"
+		};
+		props.height = {
+			type: "string",
+			value: "height",
+			template: ""
+		};
+	}
+	if (componentInternalCode.some((line) => line.includes("createMemo"))) solidNamedImports.add("createMemo");
+	if (options.square) props.square = { type: "boolean" };
+	props.viewBox = {
+		value: "viewBox",
+		template: `viewBox={viewBox${hasComputedViewbox ? "()" : ""}}`
+	};
+	componentExternalCode.push(`const content = ${stringifyFactoryIconContent(icon, isEmbeddedCSS ? style : void 0)};`);
+	props.content = {
+		value: "content",
+		template: fallback ? `content={content} fallback={${computedFallback ? "fallback()" : `"${fallback}"`}}` : "innerHTML={content}"
+	};
+	const usedProps = getUsedFactoryProps(props);
+	if (usedProps.length) {
+		componentInternalCode.unshift(`const [local, others] = splitProps(props, ${JSON.stringify(usedProps)});\n`);
+		solidNamedImports.add("splitProps");
+	}
+	const template = `<${fallback ? "Icon" : "svg"} ${stringifyFactoryProps(props, "{prop}={{value}}")} {...${usedProps.length ? "others" : "props"}} />`;
+	componentInternalCode.push(`return (${template});`);
+	const beforeFunction = componentExternalCode.length ? componentExternalCode.join("\n") + "\n\n" : "";
+	const propTypes = stringifyFactoryPropTypes(props);
+	const componentFunction = `${useTS ? `interface Props {\n${propTypes}\n};\n\n` : propTypes ? `/** @param props {{${propTypes.replace(/\s*\n\s*/g, " ").trim()}}} */\n` : ""}function Component(props${useTS ? `: Props` : ""}) {
+\t${componentInternalCode.join("\n	")}
+}
+`;
+	const content = `${stringifyFactoryImports(imports)}\n${beforeFunction}${componentFunction}\nexport default Component;\n`;
+	const types = addSolidComponentTypes(data, options, assets, props);
+	return {
+		assets,
+		content,
+		style: isEmbeddedCSS ? void 0 : style,
+		types,
+		dependencies: dependencies.size ? dependencies : void 0
+	};
+}
+
+export { createSolidComponent };

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