@antv/infographic 0.2.4 → 0.2.6

package/esm/utils/measure-text.js

@@ -2,16 +2,18 @@ import { measureText as measure, registerFont } from 'measury';
 import AlibabaPuHuiTi from 'measury/fonts/AlibabaPuHuiTi-Regular';
 import { DEFAULT_FONT } from '../renderer';
 import { encodeFontFamily } from './font';
+import { isBrowser } from './is-browser';
 import { isNode } from './is-node';
+let FONT_EXTEND_FACTOR = 1.01;
+export const setFontExtendFactor = (factor) => {
+    FONT_EXTEND_FACTOR = factor;
+};
 if (isNode) {
     registerFont(AlibabaPuHuiTi);
 }
-const canUseDOM = !isNode && typeof window !== 'undefined' && typeof document !== 'undefined';
 let canvasContext = null;
 let measureSpan = null;
 function getCanvasContext() {
-    if (!canUseDOM)
-        return null;
     if (canvasContext)
         return canvasContext;
     const canvas = document.createElement('canvas');
@@ -19,7 +21,7 @@ function getCanvasContext() {
     return canvasContext;
 }
 function getMeasureSpan() {
-    if (!canUseDOM || !document.body)
+    if (!document.body)
         return null;
     if (measureSpan)
         return measureSpan;
@@ -91,12 +93,12 @@ export function measureText(text = '', attrs) {
         lineHeight,
     };
     const fallback = () => measure(content, options);
-    const metrics = canUseDOM
+    const metrics = isBrowser()
         ? (measureTextInBrowser(content, options) ?? fallback())
         : fallback();
     // 额外添加 1% 宽高
     return {
-        width: Math.ceil(metrics.width * 1.01),
-        height: Math.ceil(metrics.height * 1.01),
+        width: Math.ceil(metrics.width * FONT_EXTEND_FACTOR),
+        height: Math.ceil(metrics.height * FONT_EXTEND_FACTOR),
     };
 }

package/lib/exporter/index.d.ts

@@ -1,3 +1,3 @@
 export { exportToPNGString } from './png';
-export { exportToSVGString } from './svg';
+export { exportToSVG, exportToSVGString } from './svg';
 export type { ExportOptions, PNGExportOptions, SVGExportOptions, } from './types';

package/lib/exporter/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.exportToSVGString = exports.exportToPNGString = void 0;
+exports.exportToSVGString = exports.exportToSVG = exports.exportToPNGString = void 0;
 var png_1 = require("./png");
 Object.defineProperty(exports, "exportToPNGString", { enumerable: true, get: function () { return png_1.exportToPNGString; } });
 var svg_1 = require("./svg");
+Object.defineProperty(exports, "exportToSVG", { enumerable: true, get: function () { return svg_1.exportToSVG; } });
 Object.defineProperty(exports, "exportToSVGString", { enumerable: true, get: function () { return svg_1.exportToSVGString; } });

package/lib/exporter/svg.js

@@ -10,11 +10,17 @@ async function exportToSVGString(svg, options = {}) {
     return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(str);
 }
 async function exportToSVG(svg, options = {}) {
-    const { embedResources = true } = options;
+    const { embedResources = true, removeIds = false } = options;
     const clonedSVG = svg.cloneNode(true);
     const { width, height } = (0, utils_1.getViewBox)(svg);
     (0, utils_1.setAttributes)(clonedSVG, { width, height });
-    await embedIcons(clonedSVG);
+    if (removeIds) {
+        inlineUseElements(clonedSVG);
+        inlineDefsReferences(clonedSVG);
+    }
+    else {
+        await embedIcons(clonedSVG);
+    }
     await (0, font_1.embedFonts)(clonedSVG, embedResources);
     cleanSVG(clonedSVG);
     return clonedSVG;
@@ -44,6 +50,221 @@ function getDefs(svg) {
     svg.prepend(_defs);
     return _defs;
 }
+function inlineUseElements(svg) {
+    const uses = Array.from(svg.querySelectorAll('use'));
+    if (!uses.length)
+        return;
+    uses.forEach((use) => {
+        const href = getUseHref(use);
+        if (!href || !href.startsWith('#'))
+            return;
+        const target = resolveUseTarget(svg, href);
+        if (!target || target === use)
+            return;
+        const replacement = createInlineElement(use, target);
+        if (!replacement)
+            return;
+        use.replaceWith(replacement);
+    });
+}
+function getUseHref(use) {
+    return use.getAttribute('href') ?? use.getAttribute('xlink:href');
+}
+function resolveUseTarget(svg, href) {
+    const localTarget = svg.querySelector(href);
+    if (localTarget)
+        return localTarget;
+    const docTarget = document.querySelector(href);
+    return docTarget;
+}
+function createInlineElement(use, target) {
+    const tag = target.tagName.toLowerCase();
+    if (tag === 'symbol') {
+        return materializeSymbol(use, target);
+    }
+    if (tag === 'svg') {
+        return materializeSVG(use, target);
+    }
+    return materializeElement(use, target);
+}
+function materializeSymbol(use, symbol) {
+    const symbolClone = symbol.cloneNode(true);
+    const svg = (0, utils_1.createElement)('svg');
+    applyAttributes(svg, symbolClone, new Set(['id']));
+    applyAttributes(svg, use, new Set(['href', 'xlink:href']));
+    while (symbolClone.firstChild) {
+        svg.appendChild(symbolClone.firstChild);
+    }
+    return svg;
+}
+function materializeSVG(use, source) {
+    const clone = source.cloneNode(true);
+    clone.removeAttribute('id');
+    applyAttributes(clone, use, new Set(['href', 'xlink:href']));
+    return clone;
+}
+function materializeElement(use, source) {
+    const clone = source.cloneNode(true);
+    clone.removeAttribute('id');
+    const wrapper = (0, utils_1.createElement)('g');
+    applyAttributes(wrapper, use, new Set(['href', 'xlink:href', 'x', 'y', 'width', 'height', 'transform']));
+    const transform = buildUseTransform(use);
+    if (transform) {
+        wrapper.setAttribute('transform', transform);
+    }
+    wrapper.appendChild(clone);
+    return wrapper;
+}
+function buildUseTransform(use) {
+    const x = use.getAttribute('x');
+    const y = use.getAttribute('y');
+    const translate = x || y ? `translate(${x ?? 0} ${y ?? 0})` : '';
+    const transform = use.getAttribute('transform') ?? '';
+    if (translate && transform)
+        return `${translate} ${transform}`;
+    return translate || transform || null;
+}
+function applyAttributes(target, source, exclude = new Set()) {
+    Array.from(source.attributes).forEach((attr) => {
+        if (exclude.has(attr.name))
+            return;
+        if (attr.name === 'style') {
+            mergeStyleAttribute(target, attr.value);
+            return;
+        }
+        if (attr.name === 'class') {
+            mergeClassAttribute(target, attr.value);
+            return;
+        }
+        target.setAttribute(attr.name, attr.value);
+    });
+}
+function mergeStyleAttribute(target, value) {
+    const current = target.getAttribute('style');
+    if (!current) {
+        target.setAttribute('style', value);
+        return;
+    }
+    const separator = current.trim().endsWith(';') ? '' : ';';
+    target.setAttribute('style', `${current}${separator}${value}`);
+}
+function mergeClassAttribute(target, value) {
+    const current = target.getAttribute('class');
+    if (!current) {
+        target.setAttribute('class', value);
+        return;
+    }
+    target.setAttribute('class', `${current} ${value}`.trim());
+}
+const urlRefRegex = /url\(\s*['"]?#([^'")\s]+)['"]?\s*\)/g;
+function inlineDefsReferences(svg) {
+    const referencedIds = collectReferencedIds(svg);
+    if (referencedIds.size === 0) {
+        removeDefs(svg);
+        return;
+    }
+    const defsDataUrl = createDefsDataUrl(svg, referencedIds);
+    if (!defsDataUrl)
+        return;
+    (0, utils_1.traverse)(svg, (node) => {
+        if (node.tagName.toLowerCase() === 'defs')
+            return false;
+        const attrs = Array.from(node.attributes);
+        attrs.forEach((attr) => {
+            const value = attr.value;
+            if (!value.includes('url('))
+                return;
+            const updated = value.replace(urlRefRegex, (_match, id) => {
+                const encodedId = encodeURIComponent(id);
+                return `url("${defsDataUrl}#${encodedId}")`;
+            });
+            if (updated !== value)
+                node.setAttribute(attr.name, updated);
+        });
+    });
+    removeDefs(svg);
+}
+function collectReferencedIds(svg) {
+    const ids = new Set();
+    (0, utils_1.traverse)(svg, (node) => {
+        if (node.tagName.toLowerCase() === 'defs')
+            return false;
+        collectIdsFromAttributes(node, (id) => ids.add(id));
+    });
+    return ids;
+}
+function collectIdsFromAttributes(node, addId) {
+    for (const attr of Array.from(node.attributes)) {
+        const value = attr.value;
+        if (value.includes('url(')) {
+            for (const match of value.matchAll(urlRefRegex)) {
+                if (match[1])
+                    addId(match[1]);
+            }
+        }
+        if ((attr.name === 'href' || attr.name === 'xlink:href') &&
+            value[0] === '#') {
+            addId(value.slice(1));
+        }
+    }
+}
+function createDefsDataUrl(svg, ids) {
+    if (ids.size === 0)
+        return null;
+    const collected = collectDefElements(svg, ids);
+    if (collected.size === 0)
+        return null;
+    const defsSvg = (0, utils_1.createElement)('svg', {
+        xmlns: 'http://www.w3.org/2000/svg',
+        'xmlns:xlink': 'http://www.w3.org/1999/xlink',
+    });
+    const defs = (0, utils_1.createElement)('defs');
+    collected.forEach((node) => {
+        defs.appendChild(node.cloneNode(true));
+    });
+    if (!defs.children.length)
+        return null;
+    defsSvg.appendChild(defs);
+    const serialized = new XMLSerializer().serializeToString(defsSvg);
+    return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(serialized);
+}
+function collectDefElements(svg, ids) {
+    const collected = new Map();
+    const queue = Array.from(ids);
+    const queued = new Set(queue);
+    const visited = new Set();
+    const enqueue = (id) => {
+        if (visited.has(id) || queued.has(id))
+            return;
+        queue.push(id);
+        queued.add(id);
+    };
+    while (queue.length) {
+        const id = queue.shift();
+        if (visited.has(id))
+            continue;
+        visited.add(id);
+        const selector = `#${escapeCssId(id)}`;
+        const target = svg.querySelector(selector);
+        if (!target)
+            continue;
+        collected.set(id, target);
+        (0, utils_1.traverse)(target, (node) => {
+            collectIdsFromAttributes(node, enqueue);
+        });
+    }
+    return collected;
+}
+function escapeCssId(id) {
+    if (globalThis.CSS && typeof globalThis.CSS.escape === 'function') {
+        return globalThis.CSS.escape(id);
+    }
+    return id.replace(/([!"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g, '\\$1');
+}
+function removeDefs(svg) {
+    const defsList = Array.from(svg.querySelectorAll('defs'));
+    defsList.forEach((defs) => defs.remove());
+}
 function cleanSVG(svg) {
     removeBtnGroup(svg);
     removeTransientContainer(svg);

package/lib/exporter/types.d.ts

@@ -5,6 +5,11 @@ export interface SVGExportOptions {
      * @default true
      */
     embedResources?: boolean;
+    /**
+     * 是否移除 id 依赖（展开 <use> 并内联 defs 引用）
+     * @default false
+     */
+    removeIds?: boolean;
 }
 export interface PNGExportOptions {
     type: 'png';

package/lib/index.d.ts

@@ -3,15 +3,17 @@ export * from './designs';
 export { getItemProps, getThemeColors } from './designs/utils';
 export { BrushSelect, ClickSelect, DblClickEditText, DragElement, HotkeyHistory, Interaction, SelectHighlight, ZoomWheel, } from './editor/interactions';
 export { EditBar, Plugin, ResizeElement } from './editor/plugins';
+export { exportToSVG } from './exporter';
 export { Defs, Ellipse, Fragment, Group, Path, Polygon, Rect, Text, cloneElement, createFragment, createLayout, getCombinedBounds, getElementBounds, getElementsBounds, jsx, jsxDEV, jsxs, renderSVG, } from './jsx';
-export { getFont, getFonts, getPalette, getPalettes, getPaletteColor, registerFont, registerPalette, registerPattern, setDefaultFont, } from './renderer';
+export { getFont, getFonts, getPalette, getPaletteColor, getPalettes, registerFont, registerPalette, registerPattern, setDefaultFont, } from './renderer';
 export { loadSVGResource, registerResourceLoader } from './resource';
 export { Infographic } from './runtime';
 export { parseSyntax } from './syntax';
 export { getTemplate, getTemplates, registerTemplate } from './templates';
 export { getTheme, getThemes, registerTheme } from './themes';
-export { parseSVG } from './utils';
+export { parseSVG, setFontExtendFactor } from './utils';
 export type { EditBarOptions } from './editor';
+export type { ExportOptions, PNGExportOptions, SVGExportOptions, } from './exporter';
 export type { Bounds, ComponentType, DefsProps, EllipseProps, FragmentProps, GroupProps, JSXElement, JSXElementConstructor, JSXNode, PathProps, Point, PolygonProps, RectProps, RenderableNode, SVGAttributes, SVGProps, TextProps, WithChildren, } from './jsx';
 export type { InfographicOptions, ParsedInfographicOptions } from './options';
 export type { GradientConfig, IRenderer, LinearGradient, Palette, PatternConfig, PatternGenerator, PatternStyle, RadialGradient, RoughConfig, StylizeConfig, } from './renderer';

package/lib/index.js

@@ -17,8 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getThemes = exports.getTheme = exports.registerTemplate = exports.getTemplates = exports.getTemplate = exports.parseSyntax = exports.Infographic = exports.registerResourceLoader = exports.loadSVGResource = exports.setDefaultFont = exports.registerPattern = exports.registerPalette = exports.registerFont = exports.getPaletteColor = exports.getPalettes = exports.getPalette = exports.getFonts = exports.getFont = exports.renderSVG = exports.jsxs = exports.jsxDEV = exports.jsx = exports.getElementsBounds = exports.getElementBounds = exports.getCombinedBounds = exports.createLayout = exports.createFragment = exports.cloneElement = exports.Text = exports.Rect = exports.Polygon = exports.Path = exports.Group = exports.Fragment = exports.Ellipse = exports.Defs = exports.ResizeElement = exports.Plugin = exports.EditBar = exports.ZoomWheel = exports.SelectHighlight = exports.Interaction = exports.HotkeyHistory = exports.DragElement = exports.DblClickEditText = exports.ClickSelect = exports.BrushSelect = exports.getThemeColors = exports.getItemProps = exports.VERSION = void 0;
-exports.parseSVG = exports.registerTheme = void 0;
+exports.getTheme = exports.registerTemplate = exports.getTemplates = exports.getTemplate = exports.parseSyntax = exports.Infographic = exports.registerResourceLoader = exports.loadSVGResource = exports.setDefaultFont = exports.registerPattern = exports.registerPalette = exports.registerFont = exports.getPalettes = exports.getPaletteColor = exports.getPalette = exports.getFonts = exports.getFont = exports.renderSVG = exports.jsxs = exports.jsxDEV = exports.jsx = exports.getElementsBounds = exports.getElementBounds = exports.getCombinedBounds = exports.createLayout = exports.createFragment = exports.cloneElement = exports.Text = exports.Rect = exports.Polygon = exports.Path = exports.Group = exports.Fragment = exports.Ellipse = exports.Defs = exports.exportToSVG = exports.ResizeElement = exports.Plugin = exports.EditBar = exports.ZoomWheel = exports.SelectHighlight = exports.Interaction = exports.HotkeyHistory = exports.DragElement = exports.DblClickEditText = exports.ClickSelect = exports.BrushSelect = exports.getThemeColors = exports.getItemProps = exports.VERSION = void 0;
+exports.setFontExtendFactor = exports.parseSVG = exports.registerTheme = exports.getThemes = void 0;
 const package_json_1 = __importDefault(require("../package.json"));
 exports.VERSION = package_json_1.default.version;
 __exportStar(require("./designs"), exports);
@@ -38,6 +38,8 @@ var plugins_1 = require("./editor/plugins");
 Object.defineProperty(exports, "EditBar", { enumerable: true, get: function () { return plugins_1.EditBar; } });
 Object.defineProperty(exports, "Plugin", { enumerable: true, get: function () { return plugins_1.Plugin; } });
 Object.defineProperty(exports, "ResizeElement", { enumerable: true, get: function () { return plugins_1.ResizeElement; } });
+var exporter_1 = require("./exporter");
+Object.defineProperty(exports, "exportToSVG", { enumerable: true, get: function () { return exporter_1.exportToSVG; } });
 var jsx_1 = require("./jsx");
 Object.defineProperty(exports, "Defs", { enumerable: true, get: function () { return jsx_1.Defs; } });
 Object.defineProperty(exports, "Ellipse", { enumerable: true, get: function () { return jsx_1.Ellipse; } });
@@ -61,8 +63,8 @@ var renderer_1 = require("./renderer");
 Object.defineProperty(exports, "getFont", { enumerable: true, get: function () { return renderer_1.getFont; } });
 Object.defineProperty(exports, "getFonts", { enumerable: true, get: function () { return renderer_1.getFonts; } });
 Object.defineProperty(exports, "getPalette", { enumerable: true, get: function () { return renderer_1.getPalette; } });
-Object.defineProperty(exports, "getPalettes", { enumerable: true, get: function () { return renderer_1.getPalettes; } });
 Object.defineProperty(exports, "getPaletteColor", { enumerable: true, get: function () { return renderer_1.getPaletteColor; } });
+Object.defineProperty(exports, "getPalettes", { enumerable: true, get: function () { return renderer_1.getPalettes; } });
 Object.defineProperty(exports, "registerFont", { enumerable: true, get: function () { return renderer_1.registerFont; } });
 Object.defineProperty(exports, "registerPalette", { enumerable: true, get: function () { return renderer_1.registerPalette; } });
 Object.defineProperty(exports, "registerPattern", { enumerable: true, get: function () { return renderer_1.registerPattern; } });
@@ -84,3 +86,4 @@ Object.defineProperty(exports, "getThemes", { enumerable: true, get: function ()
 Object.defineProperty(exports, "registerTheme", { enumerable: true, get: function () { return themes_1.registerTheme; } });
 var utils_2 = require("./utils");
 Object.defineProperty(exports, "parseSVG", { enumerable: true, get: function () { return utils_2.parseSVG; } });
+Object.defineProperty(exports, "setFontExtendFactor", { enumerable: true, get: function () { return utils_2.setFontExtendFactor; } });

package/lib/renderer/fonts/loader.js

@@ -4,6 +4,7 @@ exports.getFontURLs = getFontURLs;
 exports.getWoff2BaseURL = getWoff2BaseURL;
 exports.loadFont = loadFont;
 exports.loadFonts = loadFonts;
+const load_tracker_1 = require("../../resource/load-tracker");
 const utils_1 = require("../../utils");
 const registry_1 = require("./registry");
 function getFontURLs(font) {
@@ -35,6 +36,52 @@ function getWoff2BaseURL(font, fontWeightName) {
     return (0, utils_1.join)(config.baseUrl, path.replace(/\/result.css$/, ''));
 }
 const FONT_LOAD_MAP = new WeakMap();
+const FONT_PROMISE_MAP = new WeakMap();
+function trackFontPromise(target, id, promise) {
+    let map = FONT_PROMISE_MAP.get(target);
+    if (!map) {
+        map = new Map();
+        FONT_PROMISE_MAP.set(target, map);
+    }
+    map.set(id, promise);
+    promise.finally(() => {
+        const map = FONT_PROMISE_MAP.get(target);
+        if (!map)
+            return;
+        if (map.get(id) === promise)
+            map.delete(id);
+        if (map.size === 0)
+            FONT_PROMISE_MAP.delete(target);
+    });
+    return promise;
+}
+function isLinkLoaded(link) {
+    if (link.dataset.infographicFontLoaded === 'true')
+        return true;
+    try {
+        return !!link.sheet;
+    }
+    catch {
+        return false;
+    }
+}
+function getFontLoadPromise(target, id, link) {
+    const existing = FONT_PROMISE_MAP.get(target)?.get(id);
+    if (existing)
+        return existing;
+    if (!link || isLinkLoaded(link)) {
+        return trackFontPromise(target, id, Promise.resolve());
+    }
+    const promise = new Promise((resolve) => {
+        const done = () => {
+            link.dataset.infographicFontLoaded = 'true';
+            resolve();
+        };
+        link.addEventListener('load', done, { once: true });
+        link.addEventListener('error', done, { once: true });
+    });
+    return trackFontPromise(target, id, promise);
+}
 function loadFont(svg, font) {
     const doc = svg.ownerDocument;
     const target = doc?.head || document.head;
@@ -43,18 +90,26 @@ function loadFont(svg, font) {
     if (!FONT_LOAD_MAP.has(target))
         FONT_LOAD_MAP.set(target, new Map());
     const map = FONT_LOAD_MAP.get(target);
-    const links = [];
     const urls = getFontURLs(font);
+    if (!urls.length)
+        return;
+    const links = [];
     urls.forEach((url) => {
         const id = `${font}-${url}`;
-        if (map.has(id))
+        const promiseKey = `font:${id}`;
+        if ((0, load_tracker_1.getSvgLoadPromise)(svg, promiseKey))
             return;
-        const link = doc.createElement('link');
-        link.id = id;
-        link.rel = 'stylesheet';
-        link.href = url;
-        links.push(link);
-        map.set(id, link);
+        let link = map.get(id);
+        if (!link) {
+            link = doc.createElement('link');
+            link.id = id;
+            link.rel = 'stylesheet';
+            link.href = url;
+            links.push(link);
+            map.set(id, link);
+        }
+        const promise = getFontLoadPromise(target, id, link);
+        (0, load_tracker_1.trackSvgLoadPromise)(svg, promiseKey, promise);
     });
     if (!links.length)
         return;

package/lib/renderer/stylize/gradient.js

@@ -26,7 +26,7 @@ function applyGradientStyle(node, svg, config, attr) {
             });
         }
     });
-    const id = getGradientId(config);
+    const id = getGradientId(actualConfig);
     if (type === 'linear-gradient') {
         const { angle = 0 } = actualConfig;
         const [[x1, y1], [x2, y2]] = angleToUnitVector(angle);

package/lib/resource/index.d.ts

@@ -1,4 +1,4 @@
-export { loadResource } from './loader';
+export { getSvgLoadPromises, loadResource, waitForSvgLoads } from './loader';
 export * from './loaders';
 export { registerResourceLoader } from './registry';
 export type * from './types';

package/lib/resource/index.js

@@ -14,9 +14,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseResourceConfig = exports.getResourceId = exports.getResourceHref = exports.registerResourceLoader = exports.loadResource = void 0;
+exports.parseResourceConfig = exports.getResourceId = exports.getResourceHref = exports.registerResourceLoader = exports.waitForSvgLoads = exports.loadResource = exports.getSvgLoadPromises = void 0;
 var loader_1 = require("./loader");
+Object.defineProperty(exports, "getSvgLoadPromises", { enumerable: true, get: function () { return loader_1.getSvgLoadPromises; } });
 Object.defineProperty(exports, "loadResource", { enumerable: true, get: function () { return loader_1.loadResource; } });
+Object.defineProperty(exports, "waitForSvgLoads", { enumerable: true, get: function () { return loader_1.waitForSvgLoads; } });
 __exportStar(require("./loaders"), exports);
 var registry_1 = require("./registry");
 Object.defineProperty(exports, "registerResourceLoader", { enumerable: true, get: function () { return registry_1.registerResourceLoader; } });

package/lib/resource/load-tracker.d.ts

@@ -0,0 +1,6 @@
+type SvgLoadPromise = Promise<unknown>;
+export declare function getSvgLoadPromises(svg: SVGSVGElement): SvgLoadPromise[];
+export declare function getSvgLoadPromise<T = unknown>(svg: SVGSVGElement, key: string): Promise<T> | undefined;
+export declare function trackSvgLoadPromise<T>(svg: SVGSVGElement, key: string, promise: Promise<T>): Promise<T>;
+export declare function waitForSvgLoads(svg: SVGSVGElement): Promise<void>;
+export {};

package/lib/resource/load-tracker.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSvgLoadPromises = getSvgLoadPromises;
+exports.getSvgLoadPromise = getSvgLoadPromise;
+exports.trackSvgLoadPromise = trackSvgLoadPromise;
+exports.waitForSvgLoads = waitForSvgLoads;
+const SVG_LOAD_PROMISE_MAP = new WeakMap();
+function getSvgLoadPromises(svg) {
+    const map = SVG_LOAD_PROMISE_MAP.get(svg);
+    return map ? Array.from(map.values()) : [];
+}
+function getSvgLoadPromise(svg, key) {
+    return SVG_LOAD_PROMISE_MAP.get(svg)?.get(key);
+}
+function trackSvgLoadPromise(svg, key, promise) {
+    let map = SVG_LOAD_PROMISE_MAP.get(svg);
+    if (!map) {
+        map = new Map();
+        SVG_LOAD_PROMISE_MAP.set(svg, map);
+    }
+    map.set(key, promise);
+    promise.finally(() => {
+        const map = SVG_LOAD_PROMISE_MAP.get(svg);
+        if (!map)
+            return;
+        if (map.get(key) === promise)
+            map.delete(key);
+        if (map.size === 0)
+            SVG_LOAD_PROMISE_MAP.delete(svg);
+    });
+    return promise;
+}
+async function waitForSvgLoads(svg) {
+    await Promise.resolve();
+    while (true) {
+        const promises = getSvgLoadPromises(svg);
+        if (!promises.length)
+            break;
+        await Promise.allSettled(promises);
+        await Promise.resolve();
+    }
+}

package/lib/resource/loader.d.ts

@@ -5,3 +5,4 @@ import type { ResourceConfig, ResourceScene } from './types';
  * @returns resource ref id
  */
 export declare function loadResource(svg: SVGSVGElement | null, scene: ResourceScene, config: string | ResourceConfig, datum?: ItemDatum): Promise<string | null>;
+export { getSvgLoadPromises, waitForSvgLoads } from './load-tracker';

package/lib/resource/loader.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.waitForSvgLoads = exports.getSvgLoadPromises = void 0;
 exports.loadResource = loadResource;
 const utils_1 = require("../utils");
+const load_tracker_1 = require("./load-tracker");
 const loaders_1 = require("./loaders");
 const registry_1 = require("./registry");
 const utils_2 = require("./utils");
@@ -60,22 +62,36 @@ async function loadResource(svg, scene, config, datum) {
     if (!cfg)
         return null;
     const id = (0, utils_2.getResourceId)(cfg);
-    const resource = RESOURCE_MAP.has(id)
-        ? RESOURCE_MAP.get(id) || null
-        : await getResource(scene, cfg, datum);
-    if (!resource)
-        return null;
-    if (!RESOURCE_LOAD_MAP.has(svg))
-        RESOURCE_LOAD_MAP.set(svg, new Map());
-    const map = RESOURCE_LOAD_MAP.get(svg);
-    if (map.has(id))
+    const promiseKey = `resource:${id}`;
+    const loadedMap = RESOURCE_LOAD_MAP.get(svg);
+    if (loadedMap?.has(id))
+        return id;
+    const existingPromise = (0, load_tracker_1.getSvgLoadPromise)(svg, promiseKey);
+    if (existingPromise)
+        return await existingPromise;
+    const loadPromise = (async () => {
+        const resource = RESOURCE_MAP.has(id)
+            ? RESOURCE_MAP.get(id) || null
+            : await getResource(scene, cfg, datum);
+        if (!resource)
+            return null;
+        if (!RESOURCE_LOAD_MAP.has(svg))
+            RESOURCE_LOAD_MAP.set(svg, new Map());
+        const map = RESOURCE_LOAD_MAP.get(svg);
+        if (map.has(id))
+            return id;
+        const defs = (0, utils_1.getOrCreateDefs)(svg);
+        resource.id = id;
+        defs.appendChild(resource);
+        map.set(id, resource);
         return id;
-    const defs = (0, utils_1.getOrCreateDefs)(svg);
-    resource.id = id;
-    defs.appendChild(resource);
-    map.set(id, resource);
-    return id;
+    })();
+    (0, load_tracker_1.trackSvgLoadPromise)(svg, promiseKey, loadPromise);
+    return await loadPromise;
 }
+var load_tracker_2 = require("./load-tracker");
+Object.defineProperty(exports, "getSvgLoadPromises", { enumerable: true, get: function () { return load_tracker_2.getSvgLoadPromises; } });
+Object.defineProperty(exports, "waitForSvgLoads", { enumerable: true, get: function () { return load_tracker_2.waitForSvgLoads; } });
 function getFallbackQuery(cfg, scene, datum) {
     const defaultQuery = scene === 'illus' ? 'illustration' : 'icon';
     const datumQuery = normalizeQuery(datum?.label) || normalizeQuery(datum?.desc);

package/lib/runtime/Infographic.js

@@ -11,6 +11,7 @@ const exporter_1 = require("../exporter");
 const jsx_1 = require("../jsx");
 const options_1 = require("../options");
 const renderer_1 = require("../renderer");
+const resource_1 = require("../resource");
 const syntax_1 = require("../syntax");
 const utils_1 = require("../utils");
 const options_2 = require("./options");
@@ -77,6 +78,18 @@ class Infographic {
         }
         this.rendered = true;
         this.emitter.emit('rendered', { node: this.node, options: this.options });
+        const currentNode = this.node;
+        if (currentNode) {
+            void (0, resource_1.waitForSvgLoads)(currentNode).then(() => {
+                if (this.node !== currentNode)
+                    return;
+                this.emitter.emit('loaded', {
+                    node: currentNode,
+                    options: this.options,
+                });
+            });
+        }
+        return true;
     }
     /**
      * Compose the SVG template

package/lib/utils/is-browser.d.ts

@@ -0,0 +1 @@
+export declare function isBrowser(): boolean;