@iconify/tools 2.2.5 → 3.0.0-beta.1

package/README.md

@@ -50,7 +50,7 @@ import { parseColors, isEmptyColor } from '@iconify/tools/lib/colors/parse';
 
 		// Clean up and optimise icons
 		try {
-			await cleanupSVG(svg);
+			cleanupSVG(svg);
 			await parseColors(svg, {
 				defaultColor: 'currentColor',
 				callback: (attr, colorStr, color) => {
@@ -59,7 +59,7 @@ import { parseColors, isEmptyColor } from '@iconify/tools/lib/colors/parse';
 						: 'currentColor';
 				},
 			});
-			await runSVGO(svg);
+			runSVGO(svg);
 		} catch (err) {
 			// Invalid icon
 			console.error(`Error parsing ${name}:`, err);
@@ -83,6 +83,12 @@ import { parseColors, isEmptyColor } from '@iconify/tools/lib/colors/parse';
 
 Full documentation is too big for simple README file. See [Iconify Tools documentation](https://docs.iconify.design/tools/tools2/) for detailed documentation with code samples.
 
+## Synchronous functions
+
+Most functions in example above are asynchronous.
+
+If you need to import or parse icons synchronously, such as in config file of package that does not support async configuration files, most functions have synchronous copies, such as `importDirectorySync()`.
+
 ## License
 
 Library is released with MIT license.

package/lib/colors/detect.cjs

@@ -17,10 +17,10 @@ require('../svg/data/attributes.cjs');
 require('../svg/analyse.cjs');
 require('../svg/analyse/error.cjs');
 
-async function detectIconSetPalette(iconSet) {
+function detectIconSetPalette(iconSet) {
   let palette;
-  await iconSet.forEach(
-    async (name) => {
+  iconSet.forEachSync(
+    (name) => {
       if (palette === null) {
         return;
       }
@@ -29,7 +29,7 @@ async function detectIconSetPalette(iconSet) {
         return;
       }
       let iconPalette;
-      await colors_parse.parseColors(svg, {
+      colors_parse.parseColorsSync(svg, {
         callback: (attr, colorStr, color) => {
           if (!color) {
             iconPalette = null;

package/lib/colors/detect.d.ts

@@ -10,6 +10,6 @@ import '@iconify/utils/lib/icon-set/tree';
  *
  * Returns null if icon set has mixed colors
  */
-declare function detectIconSetPalette(iconSet: IconSet): Promise<boolean | null>;
+declare function detectIconSetPalette(iconSet: IconSet): boolean | null;
 
 export { detectIconSetPalette };

package/lib/colors/detect.mjs

@@ -1,4 +1,4 @@
-import { parseColors, isEmptyColor } from './parse.mjs';
+import { parseColorsSync, isEmptyColor } from './parse.mjs';
 import '@iconify/utils/lib/colors';
 import '../svg/data/tags.mjs';
 import '../svg/parse-style.mjs';
@@ -15,10 +15,10 @@ import '../svg/data/attributes.mjs';
 import '../svg/analyse.mjs';
 import '../svg/analyse/error.mjs';
 
-async function detectIconSetPalette(iconSet) {
+function detectIconSetPalette(iconSet) {
   let palette;
-  await iconSet.forEach(
-    async (name) => {
+  iconSet.forEachSync(
+    (name) => {
       if (palette === null) {
         return;
       }
@@ -27,7 +27,7 @@ async function detectIconSetPalette(iconSet) {
         return;
       }
       let iconPalette;
-      await parseColors(svg, {
+      parseColorsSync(svg, {
         callback: (attr, colorStr, color) => {
           if (!color) {
             iconPalette = null;

package/lib/colors/parse.cjs

@@ -18,7 +18,7 @@ require('../svg/analyse/error.cjs');
 
 const propsToCheck = Object.keys(colors_attribs.defaultColorValues);
 const animatePropsToCheck = ["from", "to", "values"];
-async function parseColors(svg, options = {}) {
+function createContext(options, callback) {
   const result = {
     colors: [],
     hasUnsetColor: false,
@@ -49,12 +49,12 @@ async function parseColors(svg, options = {}) {
       itemColors[prop] = addedColor === null ? color : addedColor;
     }
   }
-  function getElementColor(prop, item, elements2) {
+  function getElementColor(prop, item, elements) {
     function find(prop2) {
       let currentItem = item;
       const allowDefaultColor = colors_attribs.allowDefaultColorValue[prop2];
       while (currentItem) {
-        const element = elements2.get(
+        const element = elements.get(
           currentItem.index
         );
         const color = element._colors?.[prop2];
@@ -79,67 +79,81 @@ async function parseColors(svg, options = {}) {
     }
     return propColor;
   }
-  async function checkColor(prop, value, item) {
+  function checkColor(done, prop, value, item) {
     switch (value.trim().toLowerCase()) {
       case "":
       case "inherit":
-        return;
+        return done();
     }
     const parsedColor = colors.stringToColor(value);
     const defaultValue = parsedColor || value;
     if (parsedColor?.type === "function" && parsedColor.func === "url") {
       addColorToItem(prop, defaultValue, item, false);
-      return value;
+      return done(value);
     }
-    if (!options.callback) {
+    if (!callback) {
       addColorToItem(prop, defaultValue, item);
-      return value;
+      return done(value);
     }
-    let callbackResult = options.callback(
-      prop,
-      value,
-      parsedColor,
-      item?.tagName,
-      item
-    );
-    callbackResult = callbackResult instanceof Promise ? await callbackResult : callbackResult;
-    switch (callbackResult) {
-      case "remove": {
-        return item ? callbackResult : void 0;
+    callback(
+      [prop, value, parsedColor, item?.tagName, item],
+      (callbackResult) => {
+        switch (callbackResult) {
+          case "remove": {
+            return done(item ? callbackResult : void 0);
+          }
+          case "unset":
+            return done();
+        }
+        if (callbackResult === value || parsedColor && callbackResult === parsedColor) {
+          addColorToItem(prop, defaultValue, item);
+          return done(value);
+        }
+        if (typeof callbackResult === "string") {
+          const newColor = colors.stringToColor(callbackResult);
+          addColorToItem(prop, newColor || callbackResult, item);
+          return done(callbackResult);
+        }
+        const newValue = colors.colorToString(callbackResult);
+        addColorToItem(prop, callbackResult, item);
+        return done(newValue);
       }
-      case "unset":
-        return;
-    }
-    if (callbackResult === value || parsedColor && callbackResult === parsedColor) {
-      addColorToItem(prop, defaultValue, item);
-      return value;
-    }
-    if (typeof callbackResult === "string") {
-      const newColor = colors.stringToColor(callbackResult);
-      addColorToItem(prop, newColor || callbackResult, item);
-      return callbackResult;
-    }
-    const newValue = colors.colorToString(callbackResult);
-    addColorToItem(prop, callbackResult, item);
-    return newValue;
+    );
   }
-  await svg_parseStyle.parseSVGStyle(svg, async (item) => {
+  function parseStyleItem(item, done) {
     const prop = item.prop;
     const value = item.value;
     if (propsToCheck.indexOf(prop) === -1) {
-      return value;
+      return done(value);
     }
     const attr = prop;
-    const newValue = await checkColor(attr, value);
-    if (newValue === void 0) {
-      return newValue;
-    }
-    if (item.type === "global") {
-      result.hasGlobalStyle = true;
-    }
-    return newValue;
-  });
-  const iconData = await svg_analyse.analyseSVGStructure(svg, options);
+    checkColor(
+      (newValue) => {
+        if (newValue === void 0) {
+          return done(newValue);
+        }
+        if (item.type === "global") {
+          result.hasGlobalStyle = true;
+        }
+        return done(newValue);
+      },
+      attr,
+      value
+    );
+  }
+  return {
+    result,
+    defaultColor,
+    rawOptions: options,
+    findColor,
+    addColorToItem,
+    getElementColor,
+    checkColor,
+    parseStyleItem
+  };
+}
+function analyseSVG(svg, context, done) {
+  const iconData = svg_analyse.analyseSVGStructure(svg, context.rawOptions);
   const { elements, tree } = iconData;
   const cheerio = svg.$svg;
   const removedElements = /* @__PURE__ */ new Set();
@@ -164,15 +178,15 @@ async function parseColors(svg, options = {}) {
     removeChildren(element);
     cheerio(element).remove();
   }
-  async function parseTreeItem(item) {
+  function parseTreeItem(item, done2) {
     const index = item.index;
     if (removedElements.has(index) || parsedElements.has(index)) {
-      return;
+      return done2();
     }
     parsedElements.add(index);
     const element = elements.get(index);
     if (element._removed) {
-      return;
+      return done2();
     }
     const { tagName, attribs } = element;
     if (item.parent) {
@@ -186,108 +200,239 @@ async function parseColors(svg, options = {}) {
         };
       }
     }
-    for (let i = 0; i < propsToCheck.length; i++) {
-      const prop = propsToCheck[i];
-      if (prop === "fill" && svg_data_tags.animateTags.has(tagName)) {
-        continue;
-      }
-      const value = attribs[prop];
-      if (value !== void 0) {
-        const newValue = await checkColor(prop, value, element);
-        if (newValue !== value) {
-          if (newValue === void 0) {
-            cheerio(element).removeAttr(prop);
-            if (element._colors) {
-              delete element._colors[prop];
-            }
-          } else if (newValue === "remove") {
-            removeElement(index, element);
-            return;
-          } else {
-            cheerio(element).attr(prop, newValue);
-          }
+    function parseCommonProps(done3) {
+      const propsQueue = [];
+      for (let i = 0; i < propsToCheck.length; i++) {
+        const prop = propsToCheck[i];
+        if (prop === "fill" && svg_data_tags.animateTags.has(tagName)) {
+          continue;
+        }
+        const value = attribs[prop];
+        if (value !== void 0) {
+          propsQueue.push([prop, value]);
         }
       }
-    }
-    if (svg_data_tags.animateTags.has(tagName)) {
-      const attr = attribs.attributeName;
-      if (propsToCheck.indexOf(attr) !== -1) {
-        for (let i = 0; i < animatePropsToCheck.length; i++) {
-          const elementProp = animatePropsToCheck[i];
-          const fullValue = attribs[elementProp];
-          if (typeof fullValue !== "string") {
-            continue;
-          }
-          const splitValues = fullValue.split(";");
-          let updatedValues = false;
-          for (let j = 0; j < splitValues.length; j++) {
-            const value = splitValues[j];
-            if (value !== void 0) {
-              const newValue = await checkColor(
-                elementProp,
-                value
-                // Do not pass third parameter
-              );
-              if (newValue !== value) {
-                updatedValues = true;
-                splitValues[j] = typeof newValue === "string" ? newValue : "";
+      const parsePropsQueue = () => {
+        const queueItem = propsQueue.shift();
+        if (!queueItem) {
+          return done3();
+        }
+        const [prop, value] = queueItem;
+        context.checkColor(
+          (newValue) => {
+            if (newValue !== value) {
+              if (newValue === void 0) {
+                cheerio(element).removeAttr(prop);
+                if (element._colors) {
+                  delete element._colors[prop];
+                }
+              } else if (newValue === "remove") {
+                removeElement(index, element);
+              } else {
+                cheerio(element).attr(prop, newValue);
               }
             }
+            return parsePropsQueue();
+          },
+          prop,
+          value,
+          element
+        );
+      };
+      parsePropsQueue();
+    }
+    function checkAnimations(done3) {
+      const propsQueue = [];
+      if (svg_data_tags.animateTags.has(tagName)) {
+        const attr = attribs.attributeName;
+        if (propsToCheck.indexOf(attr) !== -1) {
+          for (let i = 0; i < animatePropsToCheck.length; i++) {
+            const elementProp = animatePropsToCheck[i];
+            const fullValue = attribs[elementProp];
+            if (typeof fullValue !== "string") {
+              continue;
+            }
+            propsQueue.push([elementProp, fullValue]);
           }
+        }
+      }
+      const parsePropsQueue = () => {
+        const queueItem = propsQueue.shift();
+        if (!queueItem) {
+          return done3();
+        }
+        const [elementProp, fullValue] = queueItem;
+        const splitValues = fullValue.split(";");
+        let updatedValues = false;
+        const parsedAllItems = () => {
           if (updatedValues) {
             cheerio(element).attr(
               elementProp,
               splitValues.join(";")
             );
           }
-        }
-      }
+          return parsePropsQueue();
+        };
+        const parseItem = (index2) => {
+          if (index2 >= splitValues.length) {
+            return parsedAllItems();
+          }
+          const value = splitValues[index2];
+          if (value === void 0) {
+            return parseItem(index2 + 1);
+          }
+          context.checkColor(
+            (newValue) => {
+              if (newValue !== value) {
+                updatedValues = true;
+                splitValues[index2] = typeof newValue === "string" ? newValue : "";
+              }
+              parseItem(index2 + 1);
+            },
+            elementProp,
+            value
+            // Do not pass third parameter
+          );
+        };
+        parseItem(0);
+      };
+      parsePropsQueue();
     }
-    if (!result.hasGlobalStyle) {
-      let requiredProps;
-      if (svg_data_tags.shapeTags.has(tagName)) {
-        requiredProps = colors_attribs.shapeColorAttributes;
-      }
-      colors_attribs.specialColorAttributes.forEach((attr) => {
-        if (svg_data_attributes.tagSpecificPresentationalAttributes[tagName]?.has(attr)) {
-          requiredProps = [attr];
-        }
-      });
-      if (requiredProps) {
-        const itemColors = element._colors || (element._colors = {});
-        for (let i = 0; i < requiredProps.length; i++) {
-          const prop = requiredProps[i];
-          const color = getElementColor(prop, item, elements);
-          if (color === colors_attribs.defaultBlackColor) {
-            if (defaultColor) {
-              const defaultColorValue = typeof defaultColor === "function" ? defaultColor(
+    parseCommonProps(() => {
+      checkAnimations(() => {
+        if (!context.result.hasGlobalStyle) {
+          let requiredProps;
+          if (svg_data_tags.shapeTags.has(tagName)) {
+            requiredProps = colors_attribs.shapeColorAttributes;
+          }
+          colors_attribs.specialColorAttributes.forEach((attr) => {
+            if (svg_data_attributes.tagSpecificPresentationalAttributes[tagName]?.has(
+              attr
+            )) {
+              requiredProps = [attr];
+            }
+          });
+          if (requiredProps) {
+            const itemColors = element._colors || (element._colors = {});
+            for (let i = 0; i < requiredProps.length; i++) {
+              const prop = requiredProps[i];
+              const color = context.getElementColor(
                 prop,
-                element,
                 item,
-                iconData
-              ) : defaultColor;
-              findColor(defaultColorValue, true);
-              cheerio(element).attr(
-                prop,
-                colors.colorToString(defaultColorValue)
+                elements
               );
-              itemColors[prop] = defaultColorValue;
+              if (color === colors_attribs.defaultBlackColor) {
+                const defaultColor = context.defaultColor;
+                if (defaultColor) {
+                  const defaultColorValue = typeof defaultColor === "function" ? defaultColor(
+                    prop,
+                    element,
+                    item,
+                    iconData
+                  ) : defaultColor;
+                  context.findColor(defaultColorValue, true);
+                  cheerio(element).attr(
+                    prop,
+                    colors.colorToString(defaultColorValue)
+                  );
+                  itemColors[prop] = defaultColorValue;
+                } else {
+                  context.result.hasUnsetColor = true;
+                }
+              }
+            }
+          }
+        }
+        let index2 = 0;
+        const parseChildItem = () => {
+          if (index2 >= item.children.length) {
+            return done2();
+          }
+          const childItem = item.children[index2];
+          index2++;
+          if (!childItem.usedAsMask) {
+            parseTreeItem(childItem, parseChildItem);
+          } else {
+            parseChildItem();
+          }
+        };
+        parseChildItem();
+      });
+    });
+  }
+  parseTreeItem(tree, done);
+}
+function parseColors(svg, options = {}) {
+  const callback = options.callback;
+  return new Promise((fulfill, reject) => {
+    let context;
+    try {
+      context = createContext(
+        options,
+        callback ? (params, done) => {
+          try {
+            const result = callback(...params);
+            if (result instanceof Promise) {
+              result.then(done).catch(reject);
             } else {
-              result.hasUnsetColor = true;
+              done(result);
             }
+          } catch (err) {
+            reject(err);
           }
+        } : void 0
+      );
+    } catch (err) {
+      reject(err);
+      return;
+    }
+    svg_parseStyle.parseSVGStyle(svg, (item) => {
+      return new Promise((fulfill2, reject2) => {
+        try {
+          context.parseStyleItem(item, fulfill2);
+        } catch (err) {
+          reject2(err);
         }
+      });
+    }).then(() => {
+      try {
+        analyseSVG(svg, context, () => {
+          fulfill(context.result);
+        });
+      } catch (err) {
+        reject(err);
       }
-    }
-    for (let i = 0; i < item.children.length; i++) {
-      const childItem = item.children[i];
-      if (!childItem.usedAsMask) {
-        await parseTreeItem(childItem);
+    }).catch(reject);
+  });
+}
+function parseColorsSync(svg, options = {}) {
+  const callback = options.callback;
+  const context = createContext(
+    options,
+    callback ? (params, done) => {
+      done(callback(...params));
+    } : void 0
+  );
+  svg_parseStyle.parseSVGStyleSync(svg, (item) => {
+    let isSync2 = true;
+    let result;
+    context.parseStyleItem(item, (value) => {
+      if (!isSync2) {
+        throw new Error("parseStyleItem callback supposed to be sync");
       }
+      result = value;
+    });
+    isSync2 = false;
+    return result;
+  });
+  let isSync = true;
+  analyseSVG(svg, context, () => {
+    if (!isSync) {
+      throw new Error("analyseSVG callback supposed to be sync");
     }
-  }
-  await parseTreeItem(tree);
-  return result;
+  });
+  isSync = false;
+  return context.result;
 }
 function isEmptyColor(color) {
   const type = color.type;
@@ -296,3 +441,4 @@ function isEmptyColor(color) {
 
 exports.isEmptyColor = isEmptyColor;
 exports.parseColors = parseColors;
+exports.parseColorsSync = parseColorsSync;

package/lib/colors/parse.d.ts

@@ -1,7 +1,7 @@
 import { Color } from '@iconify/utils/lib/colors/types';
 import { SVG } from '../svg/index.js';
 import { ColorAttributes } from './attribs.js';
-import { ElementsTreeItem, AnalyseSVGStructureResult, AnalyseSVGStructureOptions, ExtendedTagElement } from '../svg/analyse/types.js';
+import { ElementsTreeItem, AnalyseSVGStructureResult, ExtendedTagElement, AnalyseSVGStructureOptions } from '../svg/analyse/types.js';
 import '@iconify/types';
 import '@iconify/utils/lib/customisations/defaults';
 
@@ -23,7 +23,7 @@ interface FindColorsResult {
  * - 'remove' to remove shape or rule
  */
 type ParseColorsCallbackResult = Color | string | 'remove' | 'unset';
-type ParseColorsCallback = (attr: ColorAttributes, colorString: string, parsedColor: Color | null, tagName?: string, item?: ExtendedTagElementWithColors) => ParseColorsCallbackResult | Promise<ParseColorsCallbackResult>;
+type ParseColorsCallback<T> = (attr: ColorAttributes, colorString: string, parsedColor: Color | null, tagName?: string, item?: ExtendedTagElementWithColors) => T;
 /**
  * Callback for default color
  */
@@ -31,10 +31,12 @@ type ParseColorOptionsDefaultColorCallback = (prop: string, item: ExtendedTagEle
 /**
  * Options
  */
-interface ParseColorsOptions extends AnalyseSVGStructureOptions {
-    callback?: ParseColorsCallback;
+interface Options<T> extends AnalyseSVGStructureOptions {
+    callback?: T;
     defaultColor?: Color | string | ParseColorOptionsDefaultColorCallback;
 }
+type ParseColorsOptions = Options<ParseColorsCallback<ParseColorsCallbackResult | Promise<ParseColorsCallbackResult>>>;
+type ParseColorsSyncOptions = Options<ParseColorsCallback<ParseColorsCallbackResult>>;
 /**
  * Extend properties for element
  */
@@ -50,9 +52,16 @@ interface ExtendedTagElementWithColors extends ExtendedTagElement {
  * cleanupInlineStyle() or cleanupSVG(), otherwise results might be inaccurate
  */
 declare function parseColors(svg: SVG, options?: ParseColorsOptions): Promise<FindColorsResult>;
+/**
+ * Find colors in icon, synchronous version
+ *
+ * Clean up icon before running this function to convert style to attributes using
+ * cleanupInlineStyle() or cleanupSVG(), otherwise results might be inaccurate
+ */
+declare function parseColorsSync(svg: SVG, options?: ParseColorsSyncOptions): FindColorsResult;
 /**
  * Check if color is empty, such as 'none' or 'transparent'
  */
 declare function isEmptyColor(color: Color): boolean;
 
-export { ExtendedTagElementWithColors, FindColorsResult, ParseColorOptionsDefaultColorCallback, ParseColorsOptions, isEmptyColor, parseColors };
+export { ExtendedTagElementWithColors, FindColorsResult, ParseColorOptionsDefaultColorCallback, ParseColorsOptions, ParseColorsSyncOptions, isEmptyColor, parseColors, parseColorsSync };