@cyberalien/svg-utils 1.0.8 → 1.0.10

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/jsx.d.ts

@@ -1,8 +1,9 @@
 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: 'react';
+  jsx: JSXMode;
   fallbackPackage?: string;
   ts?: boolean;
 }

package/lib/components/jsx.js

@@ -10,7 +10,7 @@ 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 { addReactComponentTypes } from "./helpers/ts/react.js";
+import { addJSXComponentTypes } from "./helpers/ts/jsx.js";
 
 /**
 * Create functional Vue component code
@@ -20,8 +20,14 @@ function createJSXComponent(data, options) {
 	const assets = [];
 	const imports = createFactoryImports();
 	const dependencies = /* @__PURE__ */ new Set();
-	const importPackage = "react";
-	const createElement = "createElement";
+	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) {
@@ -105,7 +111,7 @@ function createJSXComponent(data, options) {
 }
 `;
 	const content = `${stringifyFactoryImports(imports)}\n${beforeFunction}${componentFunction}\nexport default Component;\n`;
-	const types = addReactComponentTypes(data, options, assets, props);
+	const types = addJSXComponentTypes(data, options, assets, props);
 	return {
 		assets,
 		content,

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/index.d.ts

@@ -2,7 +2,7 @@ import { ClassProp, classProps, defaultClassProp } from "./classname/const.js";
 import { splitClassName, toggleClassName } from "./classname/toggle.js";
 import { UniqueHashOptions } from "./helpers/hash/types.js";
 import { ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, StringifyXMLOptions } from "./xml/types.js";
-import { ConvertSVGContentOptions, ConvertedSVGContent } from "./svg-css/types.js";
+import { BaseConvertSVGContentOptions, ConvertSVGContentOptions, ConvertedSVGContent } from "./svg-css/types.js";
 import { createCSSClassName } from "./css/hash.js";
 import { stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector } from "./css/stringify.js";
 import { hashString } from "./helpers/hash/hash.js";
@@ -24,4 +24,4 @@ import { changeSVGIDs } from "./svg/ids/change.js";
 import { createUniqueIDs } from "./svg/ids/unique.js";
 import { convertSVGRootToCSS } from "./svg-css/root.js";
 import { convertSVGContentToCSSRules } from "./svg-css/content.js";
-export { ChangeIDResult, ClassProp, ComparisonKey, ConvertSVGContentOptions, ConvertedSVGContent, ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, StringifyXMLOptions, UniqueHashOptions, changeIDInString, changeSVGIDs, classProps, cloneObject, compareKeys, compareSets, compareValues, convertSVGContentToCSSRules, convertSVGRootToCSS, createCSSClassName, createUniqueIDs, defaultClassProp, getUniqueHash, hashString, hashToString, iterateXMLContent, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitClassName, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector, stringifyXMLContent, toggleClassName, uniquePromise };
+export { BaseConvertSVGContentOptions, ChangeIDResult, ClassProp, ComparisonKey, ConvertSVGContentOptions, ConvertedSVGContent, ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, StringifyXMLOptions, UniqueHashOptions, changeIDInString, changeSVGIDs, classProps, cloneObject, compareKeys, compareSets, compareValues, convertSVGContentToCSSRules, convertSVGRootToCSS, createCSSClassName, createUniqueIDs, defaultClassProp, getUniqueHash, hashString, hashToString, iterateXMLContent, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitClassName, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector, stringifyXMLContent, toggleClassName, uniquePromise };

package/lib/svg-css/animations/tags.d.ts

@@ -1,3 +1,15 @@
+/**
+ * Tag used to set attribute value without animation duration
+ */
+declare const svgSetTag = "set";
+/**
+ * Tag to discard animation
+ */
+declare const svgDiscardTag = "discard";
+/**
+ * Attribute animation tag
+ */
+declare const svgAnimationTag = "animate";
 /**
  * Tags for animating one attribute in SVG
  */
@@ -14,4 +26,4 @@ declare const svgAnimateMotionTag = "animateMotion";
  * All tags for animating SVG
  */
 declare const svgAnimationTags: string[];
-export { svgAnimateMotionTag, svgAnimateTransformTag, svgAnimationTags, svgSimpleAnimationTags };
+export { svgAnimateMotionTag, svgAnimateTransformTag, svgAnimationTag, svgAnimationTags, svgDiscardTag, svgSetTag, svgSimpleAnimationTags };

package/lib/svg-css/animations/tags.js

@@ -1,10 +1,22 @@
 /**
+* Tag used to set attribute value without animation duration
+*/
+const svgSetTag = "set";
+/**
+* Tag to discard animation
+*/
+const svgDiscardTag = "discard";
+/**
+* Attribute animation tag
+*/
+const svgAnimationTag = "animate";
+/**
 * Tags for animating one attribute in SVG
 */
 const svgSimpleAnimationTags = [
-	"animate",
-	"set",
-	"discard"
+	svgSetTag,
+	svgDiscardTag,
+	svgAnimationTag
 ];
 /**
 * Tag for animating transformations in SVG
@@ -23,4 +35,4 @@ const svgAnimationTags = [
 	svgAnimateMotionTag
 ];
 
-export { svgAnimateMotionTag, svgAnimateTransformTag, svgAnimationTags, svgSimpleAnimationTags };
+export { svgAnimateMotionTag, svgAnimateTransformTag, svgAnimationTag, svgAnimationTags, svgDiscardTag, svgSetTag, svgSimpleAnimationTags };

package/lib/svg-css/content.js

@@ -8,7 +8,7 @@ import { convertSVGRootToCSS } from "./root.js";
 function convertSVGContentToCSSRules(content, options) {
 	const root = parseXMLContent(content);
 	if (!root) return { content };
-	const classes = convertSVGRootToCSS(root, options?.classNamePrefix, options?.hashOptions);
+	const classes = convertSVGRootToCSS(root, options);
 	if (classes) {
 		const newContent = stringifyXMLContent(root, options);
 		if (newContent) return {

package/lib/svg-css/props/prop.d.ts

@@ -1,5 +1,5 @@
 /**
  * Convert property to CSS
  */
-declare function convertSVGPropertyToCSS(tag: string, prop: string, value: string | number): [string, string] | undefined;
+declare function convertSVGPropertyToCSS(tag: string, prop: string, value: string | number, supportLegacyBrowsers?: boolean): [string, string] | undefined;
 export { convertSVGPropertyToCSS };

package/lib/svg-css/props/prop.js

@@ -57,10 +57,10 @@ function getSVGPropertyType(tag, prop) {
 /**
 * Convert property to CSS
 */
-function convertSVGPropertyToCSS(tag, prop, value) {
+function convertSVGPropertyToCSS(tag, prop, value, supportLegacyBrowsers = false) {
 	switch (getSVGPropertyType(tag, prop)) {
 		case "path":
-			if (typeof value !== "string") return;
+			if (supportLegacyBrowsers || typeof value !== "string") return;
 			return [prop, `path("${value.replace(/\s+/g, " ")}")`];
 		case "px":
 			if (typeof value === "string" && !value.match(/^[0-9.-]+$/)) return [prop, value];

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

@@ -5,5 +5,5 @@ import { SVGConvertedToCSSProperties } from "./types.js";
  *
  * Returns CSS rules, does not add a class to tag, but does remove properties from tag
  */
-declare function extractSVGTagPropertiesForCSS(tag: ParsedXMLTagElement): SVGConvertedToCSSProperties | undefined;
+declare function extractSVGTagPropertiesForCSS(tag: ParsedXMLTagElement, supportLegacyBrowsers?: boolean): SVGConvertedToCSSProperties | undefined;
 export { extractSVGTagPropertiesForCSS };

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

@@ -7,7 +7,7 @@ import { svgAnimateTransformTag, svgSimpleAnimationTags } from "../animations/ta
 *
 * Returns CSS rules, does not add a class to tag, but does remove properties from tag
 */
-function extractSVGTagPropertiesForCSS(tag) {
+function extractSVGTagPropertiesForCSS(tag, supportLegacyBrowsers = false) {
 	const result = {
 		props: [],
 		rules: Object.create(null)
@@ -24,7 +24,7 @@ function extractSVGTagPropertiesForCSS(tag) {
 	});
 	for (const prop in tag.attribs) if (!animatedProps.has(prop)) {
 		const value = tag.attribs[prop];
-		const converted = convertSVGPropertyToCSS(tag.tag, prop, value);
+		const converted = convertSVGPropertyToCSS(tag.tag, prop, value, supportLegacyBrowsers);
 		if (converted) {
 			const [propName, propValue] = converted;
 			result.props.push(propName);

package/lib/svg-css/root.d.ts

@@ -1,9 +1,10 @@
-import { CSSHashOptions, CSSRules } from "../css/types.js";
+import { CSSRules } from "../css/types.js";
 import { ParsedXMLTagElement } from "../xml/types.js";
+import { BaseConvertSVGContentOptions } from "./types.js";
 /**
  * Convert SVG tags tree to SVG+CSS
  *
  * Returns used CSS class names with rules
  */
-declare function convertSVGRootToCSS(root: ParsedXMLTagElement[], classNamePrefix?: string, hashOptions?: CSSHashOptions): Record<string, CSSRules>;
+declare function convertSVGRootToCSS(root: ParsedXMLTagElement[], options?: BaseConvertSVGContentOptions): Record<string, CSSRules>;
 export { convertSVGRootToCSS };

package/lib/svg-css/root.js

@@ -8,11 +8,13 @@ import { extractSVGTagPropertiesForCSS } from "./props/props.js";
 *
 * Returns used CSS class names with rules
 */
-function convertSVGRootToCSS(root, classNamePrefix = "", hashOptions) {
+function convertSVGRootToCSS(root, options = {}) {
 	const rules = Object.create(null);
+	const hashOptions = options.hashOptions || {};
+	const classNamePrefix = options.classNamePrefix || "";
 	iterateXMLContent(root, (node) => {
 		if (node.type === "tag") {
-			const props = extractSVGTagPropertiesForCSS(node);
+			const props = extractSVGTagPropertiesForCSS(node, options.legacy);
 			if (props) {
 				const className = createCSSClassName(props.rules, classNamePrefix, hashOptions);
 				toggleClassName(node.attribs, className, true);

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

@@ -1,12 +1,17 @@
 import { CSSHashOptions, CSSKeyframes, CSSRules } from "../css/types.js";
 import { StringifyXMLOptions } from "../xml/types.js";
 /**
- * Options for converting SVG content to SVG+CSS
+ * Options for converting SVG tags to SVG+CSS
  */
-interface ConvertSVGContentOptions extends StringifyXMLOptions {
+interface BaseConvertSVGContentOptions {
   classNamePrefix?: string;
   hashOptions?: CSSHashOptions;
+  legacy?: boolean;
 }
+/**
+ * Options for converting SVG content to SVG+CSS
+ */
+interface ConvertSVGContentOptions extends StringifyXMLOptions, BaseConvertSVGContentOptions {}
 /**
  * Result of converting SVG content to SVG+CSS
  */
@@ -15,4 +20,4 @@ interface ConvertedSVGContent {
   classes?: Record<string, CSSRules>;
   keyframes?: Record<string, CSSKeyframes>;
 }
-export { ConvertSVGContentOptions, ConvertedSVGContent };
+export { BaseConvertSVGContentOptions, ConvertSVGContentOptions, ConvertedSVGContent };

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

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

@@ -1,9 +0,0 @@
-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 React component types
- */
-declare const addReactComponentTypes: (data: FactoryIconData, options: ComponentFactoryOptions, assets: GeneratedAssetFile[], props: FactoryComponentProps) => string;
-export { addReactComponentTypes };

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

@@ -1,20 +0,0 @@
-import { addComponentTypes } from "./wrapper.js";
-
-/**
-* Add React component types
-*/
-const addReactComponentTypes = addComponentTypes.bind(null, `import type { ForwardRefExoticComponent, SVGProps } from 'react';
-
-interface IconProps {
-/* PROPS */
-}
-
-const Component: ForwardRefExoticComponent<
-    Omit<SVGProps<SVGSVGElement>, 'viewBox' | 'width' | 'height' | 'xmlns'> & IconProps
->;
-
-export { type IconProps };
-export default Component;
-`);
-
-export { addReactComponentTypes };