@dicebear/core 5.0.0-alpha.27 → 5.0.0-alpha.28

package/lib/core.js

@@ -31,7 +31,9 @@ export function createAvatar(style, options = {}) {
     if (options.radius || options.clip) {
         result.body = svgUtils.addViewboxMask(result, (_b = options.radius) !== null && _b !== void 0 ? _b : 0);
     }
-    const attributes = svgUtils.createAttrString(result.attributes);
+    // Reduces the occurrence of ID collisions when rendering multiple avatars on one HTML page.
+    result.body = svgUtils.randomizeIds(result, prng.seed);
+    const attributes = svgUtils.createAttrString(result);
     const description = '<desc>Created with dicebear.com</desc>';
     const metadata = license.xml(style);
     const exif = license.exif(style);

package/lib/index.d.ts

@@ -7,4 +7,5 @@
 export * from './core.js';
 export * from './schema.js';
 export * as license from './utils/license.js';
+export * as escape from './utils/escape.js';
 export * from './types.js';

package/lib/index.js

@@ -7,4 +7,5 @@
 export * from './core.js';
 export * from './schema.js';
 export * as license from './utils/license.js';
+export * as escape from './utils/escape.js';
 export * from './types.js';

package/lib/types.d.ts

@@ -29,6 +29,7 @@ export interface Prng {
     bool(likelihood?: number): boolean;
     integer(min: number, max: number): number;
     pick<T>(arr: T[]): T;
+    string(length: number, characters?: string): string;
 }
 export declare type StyleSchema = JSONSchema7;
 export declare type StyleOptions<O extends {}> = Partial<O & Options>;

package/lib/utils/escape.d.ts

@@ -1,2 +1 @@
 export declare function xml(content: string): string;
-export declare function md(content: string): string;

package/lib/utils/escape.js

@@ -6,7 +6,3 @@ export function xml(content) {
         .replace(/</g, '&lt;')
         .replace(/>/g, '&gt;');
 }
-export function md(content) {
-    const result = content.replace(/([\\`*_{}[\]()#+-.!])/g, '\\$1');
-    return xml(result);
-}

package/lib/utils/license.js

@@ -14,7 +14,6 @@ export function xml(style) {
         ? `<cc:license rdf:resource="${_.xml(style.meta.license.url)}" />`
         : '';
     return ('<metadata' +
-        ' id="license"' +
         ' xmlns:dc="http://purl.org/dc/elements/1.1/"' +
         ' xmlns:cc="http://creativecommons.org/ns#"' +
         ' xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">' +

package/lib/utils/prng.js

@@ -35,5 +35,12 @@ export function create(seed) {
         pick(arr) {
             return arr[integer(0, arr.length - 1)];
         },
+        string(length, characters = 'abcdefghijklmnopqrstuvwxyz1234567890') {
+            let str = '';
+            for (let i = 0; i < length; i++) {
+                str += characters[integer(0, characters.length - 1)];
+            }
+            return str;
+        },
     };
 }

package/lib/utils/svg.d.ts

@@ -1,10 +1,4 @@
-import type { StyleCreateResult, StyleCreateResultAttributes } from '../types.js';
-declare type CreateGroupProps = {
-    children: string;
-    x: number;
-    y: number;
-};
-export declare function createGroup({ children, x, y }: CreateGroupProps): string;
+import type { StyleCreateResult } from '../types.js';
 export declare function getViewBox(result: StyleCreateResult): {
     x: number;
     y: number;
@@ -17,5 +11,5 @@ export declare function addTranslate(result: StyleCreateResult, x?: number, y?:
 export declare function addRotate(result: StyleCreateResult, rotate: number): string;
 export declare function addFlip(result: StyleCreateResult): string;
 export declare function addViewboxMask(result: StyleCreateResult, radius: number): string;
-export declare function createAttrString(attributes: StyleCreateResultAttributes): string;
-export {};
+export declare function createAttrString(result: StyleCreateResult): string;
+export declare function randomizeIds(result: StyleCreateResult, seed: string): string;

package/lib/utils/svg.js

@@ -1,7 +1,5 @@
 import * as escape from './escape.js';
-export function createGroup({ children, x, y }) {
-    return `<g transform="translate(${x}, ${y})">${children}</g>`;
-}
+import { create as createPrng } from './prng.js';
 export function getViewBox(result) {
     let viewBox = result.attributes['viewBox'].split(' ');
     let x = parseInt(viewBox[0]);
@@ -49,9 +47,23 @@ export function addViewboxMask(result, radius) {
         `</mask>` +
         `<g mask="url(#viewboxMask)">${result.body}</g>`);
 }
-export function createAttrString(attributes) {
-    attributes = { xmlns: 'http://www.w3.org/2000/svg', ...attributes };
+export function createAttrString(result) {
+    const attributes = {
+        xmlns: 'http://www.w3.org/2000/svg',
+        ...result.attributes,
+    };
     return Object.keys(attributes)
         .map((attr) => `${escape.xml(attr)}="${escape.xml(attributes[attr])}"`)
         .join(' ');
 }
+export function randomizeIds(result, seed) {
+    const prng = createPrng(JSON.stringify({
+        attributes: result.attributes,
+        seed,
+    }));
+    const ids = {};
+    return result.body.replace(/(id="|url\(#)([a-z0-9-_]+)([")])/gi, (match, m1, m2, m3) => {
+        ids[m2] = ids[m2] || prng.string(8);
+        return `${m1}${ids[m2]}${m3}`;
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dicebear/core",
-  "version": "5.0.0-alpha.27",
+  "version": "5.0.0-alpha.28",
   "description": "An avatar library for designers and developers.",
   "keywords": [
     "avatar",
@@ -31,7 +31,7 @@
     "test": "uvu tests"
   },
   "dependencies": {
-    "@dicebear/converter": "^5.0.0-alpha.27",
+    "@dicebear/converter": "^5.0.0-alpha.28",
     "@types/json-schema": "^7.0.7"
   },
   "devDependencies": {
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "10fb6bbb9cb153fff52e32758ba65b4c6c9c7f3a"
+  "gitHead": "de2e082b64c80896ef63459d18063cf149973ab7"
 }