@cyberalien/svg-utils 1.0.10 → 1.0.11

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

@@ -0,0 +1,11 @@
+import { ParsedXMLTagElement } from "../../xml/types.js";
+import { getSVGPropertyType } from "../props/prop.js";
+interface CheckResult {
+  attributeName: string;
+  type: ReturnType<typeof getSVGPropertyType>;
+}
+/**
+ * Get animated attribute name and type
+ */
+declare function getAnimatedAttributeData(node: ParsedXMLTagElement, stack: ParsedXMLTagElement[], supportLegacyBrowsers?: boolean): undefined | CheckResult;
+export { getAnimatedAttributeData };

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

@@ -0,0 +1,19 @@
+import { getSVGPropertyType } from "../props/prop.js";
+
+/**
+* Get animated attribute name and type
+*/
+function getAnimatedAttributeData(node, stack, supportLegacyBrowsers) {
+	const parentNode = stack[stack.length - 1];
+	if (!parentNode) return;
+	const parentTag = parentNode.tag;
+	const attributeName = node.attribs.attributeName;
+	if (typeof attributeName !== "string") return;
+	const type = getSVGPropertyType(parentTag, attributeName, supportLegacyBrowsers);
+	return type ? {
+		attributeName,
+		type
+	} : void 0;
+}
+
+export { getAnimatedAttributeData };

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

@@ -0,0 +1,8 @@
+import { ParsedXMLTagElement } from "../../xml/types.js";
+/**
+ * Check for common failures
+ *
+ * Returns true on success
+ */
+declare function checkAnimationTagForCompatibility(node: ParsedXMLTagElement): boolean | undefined;
+export { checkAnimationTagForCompatibility };

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

@@ -0,0 +1,16 @@
+const supportedValues = {
+	additive: "replace",
+	accumulate: "none"
+};
+/**
+* Check for common failures
+*
+* Returns true on success
+*/
+function checkAnimationTagForCompatibility(node) {
+	if (node.children.length) return;
+	const attribs = node.attribs;
+	for (const attr in supportedValues) if (attribs[attr] && attribs[attr] !== supportedValues[attr]) return;
+}
+
+export { checkAnimationTagForCompatibility };

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

@@ -0,0 +1,9 @@
+import { ParsedXMLTagElement } from "../../xml/types.js";
+import { FindSVGAnimationsOptions, SVGAnimationsContext } from "./types.js";
+/**
+ * Find all animations in SVG tree
+ *
+ * @todo Implement this
+ */
+declare function findAnimationsInSVGTree(root: ParsedXMLTagElement[], options: FindSVGAnimationsOptions): SVGAnimationsContext;
+export { findAnimationsInSVGTree };

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

@@ -0,0 +1,48 @@
+import { iterateXMLContent } from "../../xml/iterate.js";
+import { svgAnimateMotionTag, svgAnimateTransformTag, svgAnimationTag, svgSetTag } from "./tags.js";
+import { getAnimatedAttributeData } from "./attribute.js";
+import { checkAnimationTagForCompatibility } from "./common.js";
+
+/**
+* Find all animations in SVG tree
+*
+* @todo Implement this
+*/
+function findAnimationsInSVGTree(root, options) {
+	const animatedProperties = /* @__PURE__ */ new Map();
+	let failed = false;
+	const context = {
+		failed,
+		animatedProperties
+	};
+	iterateXMLContent(root, (node, stack) => {
+		if (context.failed || node.type !== "tag") return;
+		switch (node.tag) {
+			case svgAnimateMotionTag:
+				failed = true;
+				return "abort";
+			case svgAnimateTransformTag:
+				if (!checkAnimationTagForCompatibility(node)) {
+					failed = true;
+					return "abort";
+				}
+				failed = true;
+				return "abort";
+			case svgSetTag:
+			case svgAnimationTag:
+				if (!checkAnimationTagForCompatibility(node)) {
+					failed = true;
+					return "abort";
+				}
+				break;
+			default: return;
+		}
+		if (!getAnimatedAttributeData(node, stack, options.supportLegacyBrowsers)) {
+			failed = true;
+			return "abort";
+		}
+	});
+	return failed ? { failed: true } : context;
+}
+
+export { findAnimationsInSVGTree };

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

@@ -2,18 +2,10 @@
  * 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
- */
-declare const svgSimpleAnimationTags: string[];
 /**
  * Tag for animating transformations in SVG
  */
@@ -26,4 +18,4 @@ declare const svgAnimateMotionTag = "animateMotion";
  * All tags for animating SVG
  */
 declare const svgAnimationTags: string[];
-export { svgAnimateMotionTag, svgAnimateTransformTag, svgAnimationTag, svgAnimationTags, svgDiscardTag, svgSetTag, svgSimpleAnimationTags };
+export { svgAnimateMotionTag, svgAnimateTransformTag, svgAnimationTag, svgAnimationTags, svgSetTag };

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

@@ -3,22 +3,10 @@
 */
 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 = [
-	svgSetTag,
-	svgDiscardTag,
-	svgAnimationTag
-];
-/**
 * Tag for animating transformations in SVG
 */
 const svgAnimateTransformTag = "animateTransform";
@@ -30,9 +18,10 @@ const svgAnimateMotionTag = "animateMotion";
 * All tags for animating SVG
 */
 const svgAnimationTags = [
-	...svgSimpleAnimationTags,
+	svgSetTag,
+	svgAnimationTag,
 	svgAnimateTransformTag,
 	svgAnimateMotionTag
 ];
 
-export { svgAnimateMotionTag, svgAnimateTransformTag, svgAnimationTag, svgAnimationTags, svgDiscardTag, svgSetTag, svgSimpleAnimationTags };
+export { svgAnimateMotionTag, svgAnimateTransformTag, svgAnimationTag, svgAnimationTags, svgSetTag };

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

@@ -0,0 +1,19 @@
+import { ParsedXMLTagElement } from "../../xml/types.js";
+/**
+ * SVG animations context
+ */
+interface FailedSVGAnimationsContext {
+  failed: true;
+}
+interface SuccessfulSVGAnimationsContext {
+  failed: false;
+  animatedProperties: Map<ParsedXMLTagElement, Set<string>>;
+}
+type SVGAnimationsContext = FailedSVGAnimationsContext | SuccessfulSVGAnimationsContext;
+/**
+ * Options for finding animations in SVG tree
+ */
+interface FindSVGAnimationsOptions {
+  supportLegacyBrowsers?: boolean;
+}
+export { FindSVGAnimationsOptions, SVGAnimationsContext };

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

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

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

@@ -1,5 +1,14 @@
+/**
+ * SVG property types
+ */
+declare const propTypes: readonly ["path", "px", "raw"];
+type SVGPropertyType = (typeof propTypes)[number];
+/**
+ * Get property type
+ */
+declare function getSVGPropertyType(tag: string, prop: string, supportLegacyBrowsers?: boolean): SVGPropertyType | undefined;
 /**
  * Convert property to CSS
  */
 declare function convertSVGPropertyToCSS(tag: string, prop: string, value: string | number, supportLegacyBrowsers?: boolean): [string, string] | undefined;
-export { convertSVGPropertyToCSS };
+export { convertSVGPropertyToCSS, getSVGPropertyType };

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

@@ -46,11 +46,13 @@ const skipTags = [
 	"set",
 	"discard"
 ];
+const legacyProps = ["d"];
 /**
 * Get property type
 */
-function getSVGPropertyType(tag, prop) {
+function getSVGPropertyType(tag, prop, supportLegacyBrowsers = false) {
 	if (skipTags.includes(tag)) return;
+	if (supportLegacyBrowsers && legacyProps.includes(prop)) return;
 	for (const type of propTypes) if (props[tag]?.[type]?.includes(prop) || props["*"]?.[type]?.includes(prop)) return type;
 	if (prop.startsWith("stroke") || prop.startsWith("fill")) return "raw";
 }
@@ -58,9 +60,9 @@ function getSVGPropertyType(tag, prop) {
 * Convert property to CSS
 */
 function convertSVGPropertyToCSS(tag, prop, value, supportLegacyBrowsers = false) {
-	switch (getSVGPropertyType(tag, prop)) {
+	switch (getSVGPropertyType(tag, prop, supportLegacyBrowsers)) {
 		case "path":
-			if (supportLegacyBrowsers || typeof value !== "string") return;
+			if (typeof value !== "string") return;
 			return [prop, `path("${value.replace(/\s+/g, " ")}")`];
 		case "px":
 			if (typeof value === "string" && !value.match(/^[0-9.-]+$/)) return [prop, value];
@@ -71,4 +73,4 @@ function convertSVGPropertyToCSS(tag, prop, value, supportLegacyBrowsers = false
 	}
 }
 
-export { convertSVGPropertyToCSS };
+export { convertSVGPropertyToCSS, getSVGPropertyType };

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

@@ -1,6 +1,6 @@
 import { iterateXMLContent } from "../../xml/iterate.js";
 import { convertSVGPropertyToCSS } from "./prop.js";
-import { svgAnimateTransformTag, svgSimpleAnimationTags } from "../animations/tags.js";
+import { svgAnimateTransformTag, svgAnimationTag, svgSetTag } from "../animations/tags.js";
 
 /**
 * Extract SVG tag properties that can be converted to CSS
@@ -14,12 +14,16 @@ function extractSVGTagPropertiesForCSS(tag, supportLegacyBrowsers = false) {
 	};
 	const animatedProps = /* @__PURE__ */ new Set();
 	iterateXMLContent(tag.children, (node) => {
-		if (node.type === "tag") {
-			if (svgSimpleAnimationTags.includes(node.tag)) {
+		if (node.type === "tag") switch (node.tag) {
+			case svgSetTag:
+			case svgAnimationTag: {
 				const prop = node.attribs.attributeName;
 				if (typeof prop === "string") animatedProps.add(prop);
+				break;
 			}
-			if (node.tag === svgAnimateTransformTag) animatedProps.add("transform");
+			case svgAnimateTransformTag:
+				animatedProps.add("transform");
+				break;
 		}
 	});
 	for (const prop in tag.attribs) if (!animatedProps.has(prop)) {

package/lib/xml/stringify.d.ts

@@ -1,6 +1,6 @@
-import { ParsedXMLTagElement, StringifyXMLOptions } from "./types.js";
+import { ParsedXMLNode, StringifyXMLOptions } from "./types.js";
 /**
  * Convert parsed XML content to string
  */
-declare function stringifyXMLContent(root: ParsedXMLTagElement[], options?: StringifyXMLOptions): string | null;
+declare function stringifyXMLContent(root: ParsedXMLNode[], options?: StringifyXMLOptions): string | null;
 export { stringifyXMLContent };

package/lib/xml/stringify.js

@@ -18,6 +18,10 @@ function stringifyXMLContent(root, options) {
 	const tabs = (length) => tab.repeat(length);
 	const nl = prettyPrint === false ? "" : "\n";
 	const add = (node, depth) => {
+		if (node.type !== "tag") {
+			output += node.content;
+			return true;
+		}
 		output += tabs(depth) + "<" + node.tag;
 		for (const key in node.attribs) {
 			const value = node.attribs[key];
@@ -31,7 +35,7 @@ function stringifyXMLContent(root, options) {
 			}
 		}
 		if (!node.children.length) {
-			if (fullOptions.useSelfClosing) output += " />" + nl;
+			if (fullOptions.useSelfClosing) output += (prettyPrint ? " " : "") + "/>" + nl;
 			else output += "></" + node.tag + ">" + nl;
 			return true;
 		}

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