Merge pull request #7 from bchainhub/update/min-01

Minified

Author: rastislavcore

Diff for: README.md

@@ -4,13 +4,13 @@ blo is a small and fast library to generate Blockchain identicons.
 
 [![npm](https://img.shields.io/npm/v/@blockchainhub/blo?label=npm&color=cb3837&logo=npm)](https://www.npmjs.com/package/@blockchainhub/blo)
 [![License: CORE](https://img.shields.io/badge/License-CORE-yellow?logo=googledocs)](LICENSE)
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@blockchainhub/blo?label=Size&logo=tsnode)](https://bundlephobia.com/package/@blockchainhub/blo?label=Size)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@blockchainhub/blo?label=Size&logo=tsnode)](https://bundlephobia.com/package/@blockchainhub/blo@latest)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.7-blue?logo=typescript)](https://www.typescriptlang.org/)
 [![GitHub Sponsors](https://img.shields.io/github/sponsors/bchainhub?label=Sponsors&logo=githubsponsors&color=EA4AAA)](https://github.com/sponsors/bchainhub)
 
 ## Features
 
-- 🐥 **Small**: **[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@blockchainhub/blo?label=&color=6ead0a)](https://bundlejs.com/?bundle&q=%40blockchainhub%2Fblo)** gzipped.
+- 🐥 **Small**: **[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@blockchainhub/blo?label=&color=6ead0a)](https://bundlephobia.com/package/@blockchainhub/blo@latest)** gzipped, distributed as minified ES modules.
 - 🔍 **Optimized**: Leverages SVG to generate compact and sharp images at any size.
 - 💆 **Simple**: Covering all blockchain networks, focusing on uniformity.
 - 🗂 **Typed**: Ships with [types included](#types).
@@ -21,12 +21,12 @@ blo is a small and fast library to generate Blockchain identicons.
 
 Library | Renders/sec[^1] | Size[^2] | Types | Environment[^3] | Rendering
 --------|---------------:|------|--------|----------------|----------:
-**blo** | **500** | [![Bundle Size](https://img.shields.io/bundlephobia/minzip/@blockchainhub/blo?label=&color=6ead0a)](https://bundlejs.com/?q=%40blockchainhub%2Fblo) | ![Types support](https://img.shields.io/badge/yes-6ead0a) | ![Environment support](https://img.shields.io/badge/all-6ead0a) | SVG
-blockies-react-svg | 620 | [![Bundle size](https://img.shields.io/bundlephobia/minzip/blockies-react-svg?label=&color=ee4433)](https://bundlejs.com/?bundle&q=blockies-react-svg) | ![Types support](https://img.shields.io/badge/yes-6ead0a) | ![Environment support](https://img.shields.io/badge/react-ee4433) | SVG
-ethereum-blockies-base64 | 450 | [![Bundle Size](https://img.shields.io/bundlephobia/minzip/ethereum-blockies-base64?label=&color=ee4433)](https://bundlejs.com/?bundle&q=ethereum-blockies-base64) | ![Types support](https://img.shields.io/badge/no-ee4433) | ![Environment support](https://img.shields.io/badge/all-6ead0a) | PNG
-@download/blockies | 350 | [![Bundle size](https://img.shields.io/bundlephobia/minzip/@download/blockies?label=&color=6ead0a)](https://bundlejs.com/?bundle&q=%6ead0a%2Fblockies) | ![Types support](https://img.shields.io/badge/no-ee4433) | ![Environment support](https://img.shields.io/badge/dom-ee4433) | Canvas
-blockies-ts | 360 | [![Bundle size](https://img.shields.io/bundlephobia/minzip/blockies-ts?label=&color=6ead0a)](https://bundlejs.com/?bundle&q=blockies-ts) | ![Types support](https://img.shields.io/badge/yes-6ead0a) | ![Environment support](https://img.shields.io/badge/dom-ee4433) | Canvas
-react-blockies | 700 | [![Bundle size](https://img.shields.io/bundlephobia/minzip/react-blockies?label=&color=ee4433)](https://bundlejs.com/?bundle&q=react-blockies) | ![Types support](https://img.shields.io/badge/no-ee4433) | ![Environment support](https://img.shields.io/badge/react-ee4433) | Canvas
+**@blockchainhub/blo** | **520** | [![Bundle Size](https://img.shields.io/bundlephobia/minzip/@blockchainhub/blo?label=&color=6ead0a)](https://bundlephobia.com/package/@blockchainhub/blo@latest) | ![Types support](https://img.shields.io/badge/yes-6ead0a) | ![Environment support](https://img.shields.io/badge/all-6ead0a) | SVG
+blockies-react-svg | 580 | [![Bundle size](https://img.shields.io/bundlephobia/minzip/blockies-react-svg?label=&color=ee4433)](https://bundlephobia.com/package/blockies-react-svg@latest) | ![Types support](https://img.shields.io/badge/yes-6ead0a) | ![Environment support](https://img.shields.io/badge/react-ee4433) | SVG
+ethereum-blockies-base64 | 450 | [![Bundle Size](https://img.shields.io/bundlephobia/minzip/ethereum-blockies-base64?label=&color=ee4433)](https://bundlephobia.com/package/ethereum-blockies-base64@latest) | ![Types support](https://img.shields.io/badge/no-ee4433) | ![Environment support](https://img.shields.io/badge/all-6ead0a) | PNG
+@download/blockies | 370 | [![Bundle size](https://img.shields.io/bundlephobia/minzip/@download/blockies?label=&color=6ead0a)](https://bundlephobia.com/package/@download/blockies@latest) | ![Types support](https://img.shields.io/badge/no-ee4433) | ![Environment support](https://img.shields.io/badge/dom-ee4433) | Canvas
+blockies-ts | 370 | [![Bundle size](https://img.shields.io/bundlephobia/minzip/blockies-ts?label=&color=6ead0a)](https://bundlephobia.com/package/blockies-ts@latest) | ![Types support](https://img.shields.io/badge/yes-6ead0a) | ![Environment support](https://img.shields.io/badge/dom-ee4433) | Canvas
+react-blockies | 700 | [![Bundle size](https://img.shields.io/bundlephobia/minzip/react-blockies?label=&color=ee4433)](https://bundlephobia.com/package/react-blockies@latest) | ![Types support](https://img.shields.io/badge/no-ee4433) | ![Environment support](https://img.shields.io/badge/react-ee4433) | Canvas
 
 [^1]: The number of renders per second. It was measured on Chromium Engine 131, MacOS with an Apple M2 Max. [See ./benchmark](https://github.com/blockchainhub/blo/tree/main/benchmark) for the methodology.
 [^2]: Minizipped bundle size. Good to be < 1 KiB.

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockchainhub/blo",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "license": "CORE",
   "author": "Pierre Bertet <[email protected]>",
   "contributors": [
@@ -34,7 +34,7 @@
   },
   "scripts": {
     "dev": "vite ./demos/react",
-    "build": "tsc",
+    "build": "tsc && esbuild dist/*.js --minify --outdir=dist --allow-overwrite",
     "ncu-all": "ncu -u && cd demos/bun && ncu -u && cd ../node && ncu -u && cd ../react && ncu -u && cd ../../benchmark && ncu -u"
   },
   "files": [
@@ -46,7 +46,7 @@
     "typescript": "^5.7.3",
     "vite": "^6.0.7",
     "vite-plugin-dts": "^4.5.0",
-    "vitest": "^2.1.8"
+    "esbuild": "^0.24.2"
   },
   "engines": {
     "node": ">=16"

Diff for: src/image.ts

@@ -1,4 +1,4 @@
-import type { Address, BloImage, BloImageData, Hsl, Palette, BloOptions } from "./types";
+import type { Address, BloImage, BloOptions, Hsl, Palette } from "./types";
 import { seedRandom } from "./random";
 
 // Pre-calculate constants
@@ -15,7 +15,7 @@ export function image(address: Address, options: BloOptions = {}): BloImage {
   return [data, palette];
 }
 
-export function randomImageData(random: () => number): BloImageData {
+export function randomImageData(random: () => number): Uint8Array {
   // Use a single allocation
   const data = new Uint8Array(32);
 

Diff for: src/index.ts

@@ -1,32 +1,24 @@
-import type { Address, BloImage, BloOptions } from "./types";
+import type { Address, BloOptions } from "./types";
 import { image } from "./image";
 import { svg } from "./svg";
 
 export type {
   Address,
   BloImage,
-  BloImageData,
   BloOptions,
   Hsl,
   Palette,
   PaletteIndex,
 } from "./types";
 
-const DEFAULT_OPTIONS: BloOptions = {
-  size: 64,
-  seed: undefined
-};
+const defaultOpts: BloOptions = { size: 64 };
+const mergeOpts = (opts: BloOptions = {}) => ({ ...defaultOpts, ...opts });
 
-export function blo(address: Address, options: BloOptions = {}): string {
-  return "data:image/svg+xml;base64," + btoa(bloSvg(address, options));
-}
+export const blo = (a: Address, o: BloOptions = {}) =>
+  "data:image/svg+xml;base64," + btoa(bloSvg(a, o));
 
-export function bloSvg(address: Address, options: BloOptions = {}): string {
-  const opts = { ...DEFAULT_OPTIONS, ...options };
-  return svg(address, opts);
-}
+export const bloSvg = (a: Address, o: BloOptions = {}) =>
+  svg(a, mergeOpts(o));
 
-export function bloImage(address: Address, options: BloOptions = {}): BloImage {
-  const opts = { ...DEFAULT_OPTIONS, ...options };
-  return image(address, opts);
-}
+export const bloImage = (a: Address, o: BloOptions = {}) =>
+  image(a, mergeOpts(o));

Diff for: src/random.ts

@@ -1,22 +1,14 @@
-export function seedRandom(seed: string): () => number {
-  const rseed = randSeed(seed);
-  // based on Java’s String.hashCode(),
-  // expanded to 4 32bit values
-  return function random(): number {
-    const t = rseed[0] ^ (rseed[0] << 11);
-    rseed[0] = rseed[1];
-    rseed[1] = rseed[2];
-    rseed[2] = rseed[3];
-    rseed[3] = rseed[3] ^ (rseed[3] >> 19) ^ t ^ (t >> 8);
-    return (rseed[3] >>> 0) / (1 << 31 >>> 0);
-  };
-}
-
-function randSeed(seed: string): Uint32Array {
-  // Xorshift: [x, y, z, w] 32 bit values
-  const rseed = new Uint32Array([0, 0, 0, 0]);
-  for (let i = 0; i < seed.length; i++) {
-    rseed[i % 4] = (rseed[i % 4] << 5) - rseed[i % 4] + seed.charCodeAt(i);
+export const seedRandom = (s: string) => {
+  const a = new Array(4).fill(0)
+  for (let i = 0; i < s.length; i++) {
+    a[i%4] = ((a[i%4] << 5) - a[i%4]) + s.charCodeAt(i)
+  }
+  return () => {
+    const t = a[0] ^ (a[0] << 11)
+    a[0] = a[1]
+    a[1] = a[2]
+    a[2] = a[3]
+    a[3] = (a[3] ^ (a[3] >> 19) ^ t ^ (t >> 8))
+    return (a[3]>>>0) / ((1 << 31)>>>0)
   }
-  return rseed;
 }

Diff for: src/svg.ts

@@ -3,47 +3,26 @@ import type { Address, BloOptions } from "./types";
 import { randomPalette } from "./image";
 import { seedRandom } from "./random";
 
-// Pre-define constants
-const SVG_START = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" shape-rendering="optimizeSpeed"`;
-const PATH_START = '<path fill="hsl(';
-const PATH_MID = ')" d="';
-const PATH_END = '"/>';
-
-export function svg(address: Address, options: BloOptions = {}): string {
-  const { size = 64, seed } = options;
-  const random = seedRandom(seed || address.toLowerCase());
-  const { background: b, primary: c, accent: s } = randomPalette(random);
-
-  // Pre-allocate arrays for better performance
-  const paths = new Array(3);
-  paths[0] = 'M0,0H8V8H0z'; // background
-  paths[1] = ''; // color
-  paths[2] = ''; // spot
-
-  // Unroll the loop for better performance
-  let x, colorIndex;
-  for (let i = 0; i < 32; i += 4) {
-    x = i % 4;
-    colorIndex = Math.floor(random() * 2.3);
-    if (colorIndex > 0) paths[colorIndex] += `M${x},${i>>2}h1v1h-1zM${7-x},${i>>2}h1v1h-1z`;
-
-    x = (i + 1) % 4;
-    colorIndex = Math.floor(random() * 2.3);
-    if (colorIndex > 0) paths[colorIndex] += `M${x},${(i+1)>>2}h1v1h-1zM${7-x},${(i+1)>>2}h1v1h-1z`;
-
-    x = (i + 2) % 4;
-    colorIndex = Math.floor(random() * 2.3);
-    if (colorIndex > 0) paths[colorIndex] += `M${x},${(i+2)>>2}h1v1h-1zM${7-x},${(i+2)>>2}h1v1h-1z`;
-
-    x = (i + 3) % 4;
-    colorIndex = Math.floor(random() * 2.3);
-    if (colorIndex > 0) paths[colorIndex] += `M${x},${(i+3)>>2}h1v1h-1zM${7-x},${(i+3)>>2}h1v1h-1z`;
+export const svg = (a: Address, o: BloOptions): string => {
+  const r = seedRandom(o.seed || a);
+  const { background: b, primary: p, accent: c } = randomPalette(r);
+  const s = o.size || 64;
+  const scale = s / 8;
+  const d = new Array(64);
+
+  for (let i = 0; i < 32; i++) {
+    const x = i % 4, y = i / 4 | 0;
+    const v = Math.floor(r() * 2.3);
+    d[y * 8 + x] = v;
+    d[y * 8 + (7 - x)] = v;
   }
 
-  // Use template literals for faster string concatenation
-  return `${SVG_START} width="${size}" height="${size}">`
-    + `${PATH_START}${b[0]} ${b[1]}% ${b[2]}%${PATH_MID}${paths[0]}${PATH_END}`
-    + `${PATH_START}${c[0]} ${c[1]}% ${c[2]}%${PATH_MID}${paths[1]}${PATH_END}`
-    + `${PATH_START}${s[0]} ${s[1]}% ${s[2]}%${PATH_MID}${paths[2]}${PATH_END}`
-    + '</svg>';
-}
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}" viewBox="0 0 ${s} ${s}">
+<rect width="${s}" height="${s}" fill="hsl(${b[0]},${b[1]}%,${b[2]}%)"/>
+<g fill="hsl(${p[0]},${p[1]}%,${p[2]}%)">
+${d.map((v,i)=>v===1?`<rect width="${scale}" height="${scale}" x="${(i%8)*scale}" y="${(i/8|0)*scale}"/>`:'').join('')}
+</g>
+<g fill="hsl(${c[0]},${c[1]}%,${c[2]}%)">
+${d.map((v,i)=>v===2?`<rect width="${scale}" height="${scale}" x="${(i%8)*scale}" y="${(i/8|0)*scale}"/>`:'').join('')}
+</g></svg>`;
+};

Diff for: src/types.ts

@@ -1,9 +1,9 @@
 // The data structure needed to render an icon.
-export type BloImage = [BloImageData, Palette];
+export type Address = string;
 
 // 4x8 grid of the image left side, as 32 PaletteIndex items.
 // The right side is omitted as it's a mirror of the left side.
-export type BloImageData = Uint8Array;
+export type BloImage = [Uint8Array, Palette];
 
 // Colors used by a given icon.
 export type Palette = {
@@ -26,9 +26,6 @@ export type PaletteIndex = 0 | 1 | 2;
 // [2]: 0-100 (lightness)
 export type Hsl = Uint16Array;
 
-// An Ethereum address.
-export type Address = string;
-
 // Add size constraints
 export type ValidSize = number;
 // Or more strictly:
@@ -46,6 +43,6 @@ export type HslValues = {
 };
 
 export interface BloOptions {
-  size?: ValidSize;
+  size?: number;
   seed?: string;
 }