react-native-nano-icons 0.0.0 → 0.1.0

package/lib/commonjs/src/core/pipeline/run.js

@@ -0,0 +1,99 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runPipeline = runPipeline;
+const node_fs_1 = __importDefault(require("node:fs"));
+const promises_1 = __importDefault(require("node:fs/promises"));
+const node_path_1 = __importDefault(require("node:path"));
+const compile_js_1 = require("../font/compile.js");
+const managers_js_1 = require("./managers.js");
+const config_js_1 = require("./config.js");
+const svg_dom_js_1 = require("../svg/svg_dom.js");
+const layers_js_1 = require("../svg/layers.js");
+/**
+ * Run the font pipeline with given config and paths.
+ * Uses the singleton Pyodide/PathKit instance (initialized on first call).
+ */
+async function runPipeline(config, paths, options) {
+    const startTime = Date.now();
+    const logger = options?.logger;
+    logger?.update(`Building "${config.fontFamily}"…`);
+    (0, config_js_1.ensureEmptyDir)(paths.tempDir);
+    (0, config_js_1.ensureDir)(paths.outputDir);
+    const files = (await promises_1.default.readdir(paths.inputDir)).filter((f) => f.toLowerCase().endsWith('.svg'));
+    const glyphMap = {
+        meta: {
+            fontFamily: config.fontFamily,
+            upm: config.upm,
+            safeZone: config.safeZone,
+            startUnicode: config.startUnicode,
+        },
+        icons: {},
+    };
+    let currentUnicode = config.startUnicode;
+    for (const file of files) {
+        const iconName = node_path_1.default.parse(file).name;
+        const filePath = node_path_1.default.join(paths.inputDir, file);
+        logger?.info(`Processing ${file}`);
+        const rawContent = await promises_1.default.readFile(filePath, 'utf-8');
+        const validation = (0, svg_dom_js_1.validateSvg)(rawContent);
+        if (validation.valid === false) {
+            logger?.warn(`Skipping "${config.fontFamily}:${file}": ${validation.reason}`);
+            continue;
+        }
+        const preprocessed = (0, svg_dom_js_1.preprocessSvg)(rawContent);
+        const flattenedSvg = await (0, managers_js_1.picoFromFile)(filePath, preprocessed);
+        const parsed = (0, svg_dom_js_1.parseFlattenedSvg)(flattenedSvg);
+        const { vx, vy, scale, xOff, yOff, adv } = (0, layers_js_1.computePlacement)({
+            upm: config.upm,
+            safeZone: config.safeZone,
+            viewBox: parsed.viewBox,
+        });
+        const entry = { adv, layers: [] };
+        for (const p of parsed.paths) {
+            if ((0, svg_dom_js_1.shouldSkipPath)(p.d, p.fill))
+                continue;
+            const cp = currentUnicode++;
+            await (0, layers_js_1.writeLayerSvg)({
+                tempDir: paths.tempDir,
+                upm: config.upm,
+                adv,
+                vx,
+                vy,
+                scale,
+                xOff,
+                yOff,
+                d: p.d,
+                codepoint: cp,
+            });
+            entry.layers.push({ codepoint: cp, color: p.fill || 'black' });
+        }
+        if (entry.layers.length > 0) {
+            glyphMap.icons[iconName] = entry;
+        }
+    }
+    const glyphmapPath = node_path_1.default.join(paths.outputDir, `${config.fontFamily}.glyphmap.json`);
+    if (options?.inputHash) {
+        glyphMap.meta.hash = options.inputHash;
+    }
+    await promises_1.default.writeFile(glyphmapPath, JSON.stringify(glyphMap, null, 2), 'utf8');
+    logger?.info(`Compiling TTF…`);
+    const ttfPath = node_path_1.default.join(paths.outputDir, `${config.fontFamily}.ttf`);
+    await (0, compile_js_1.compileTtfFromGlyphSVGs)({
+        glyphDir: paths.tempDir,
+        outTtfPath: ttfPath,
+        fontName: config.fontFamily,
+        upm: config.upm,
+        ascent: config.upm,
+        descent: 0,
+    });
+    if (node_fs_1.default.existsSync(paths.tempDir)) {
+        node_fs_1.default.rmSync(paths.tempDir, { recursive: true, force: true });
+    }
+    const iconCount = Object.keys(glyphMap.icons).length;
+    const elapsed = Date.now() - startTime;
+    logger?.succeed(`Built ${config.fontFamily}.ttf [${iconCount} icon${iconCount === 1 ? '' : 's'} in ${elapsed}ms]`);
+    return { ttfPath, glyphmapPath };
+}

package/lib/commonjs/src/core/svg/layers.d.ts

@@ -0,0 +1,24 @@
+export declare function computePlacement(opts: {
+    upm: number;
+    safeZone: number;
+    viewBox: [number, number, number, number];
+}): {
+    vx: number;
+    vy: number;
+    scale: number;
+    xOff: number;
+    yOff: number;
+    adv: number;
+};
+export declare function writeLayerSvg(opts: {
+    tempDir: string;
+    upm: number;
+    adv: number;
+    vx: number;
+    vy: number;
+    scale: number;
+    xOff: number;
+    yOff: number;
+    d: string;
+    codepoint: number;
+}): Promise<void>;

package/lib/commonjs/src/core/svg/layers.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computePlacement = computePlacement;
+exports.writeLayerSvg = writeLayerSvg;
+const promises_1 = __importDefault(require("node:fs/promises"));
+const node_path_1 = __importDefault(require("node:path"));
+function roundInt(n) {
+    return Math.round(n);
+}
+function computePlacement(opts) {
+    const [vx, vy, vw, vh] = opts.viewBox;
+    // Guard against invalid viewBox height from source svg
+    const safeVh = vh === 0 ? 1 : vh;
+    // ✅ Fit-to-height (same visual height for all glyphs)
+    const scale = opts.safeZone / safeVh;
+    const totalPadding = (opts.upm - opts.safeZone) / 2;
+    // Scaled dimensions in font units
+    const scaledW = vw * scale;
+    const scaledH = vh * scale; // ~= safeZone
+    // ✅ proportional advance width (includes same padding concept as vertical)
+    // This is the width of the glyph coordinate space we will emit in the layer SVG.
+    const adv = Math.max(1, roundInt(scaledW + totalPadding * 2));
+    // Center scaled content within (adv x upm)
+    // (when adv == scaledW + 2*padding, xOff is basically padding, with rounding compensation)
+    const xOff = (adv - scaledW) / 2;
+    const yOff = (opts.upm - scaledH) / 2; // ~= totalPadding
+    return { vx, vy, scale, xOff, yOff, adv };
+}
+async function writeLayerSvg(opts) {
+    const hex = opts.codepoint.toString(16).padStart(4, '0');
+    const layerSvg = `
+    <svg viewBox="0 0 ${opts.adv} ${opts.upm}" xmlns="http://www.w3.org/2000/svg">
+      <rect width="${opts.adv}" height="${opts.upm}" fill="none" />
+      <g transform="translate(${opts.xOff}, ${opts.yOff}) scale(${opts.scale}) translate(${-opts.vx}, ${-opts.vy})">
+        <path d="${opts.d}" fill="black" />
+      </g>
+    </svg>`.trim();
+    await promises_1.default.writeFile(node_path_1.default.join(opts.tempDir, `u${hex}.svg`), layerSvg, 'utf8');
+}

package/lib/commonjs/src/core/svg/svg_dom.d.ts

@@ -0,0 +1,22 @@
+export type ParsedFlatSvg = {
+    viewBox: [number, number, number, number];
+    paths: Array<{
+        d: string;
+        fill: string | null;
+    }>;
+};
+export declare function calculateOpColor(fill: string | null, opacity: number, el: Element): `rgba(${number},${number},${number},${number})`;
+export declare const parsePath: (p: Element) => {
+    d: string;
+    fill: string | null;
+};
+export declare function parseFlattenedSvg(flattenedSvg: string): ParsedFlatSvg;
+export declare function shouldSkipPath(d: string, fill: string | null): boolean;
+export type SvgValidation = {
+    valid: true;
+} | {
+    valid: false;
+    reason: string;
+};
+export declare function validateSvg(content: string): SvgValidation;
+export declare function preprocessSvg(content: string): string;

package/lib/commonjs/src/core/svg/svg_dom.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parsePath = void 0;
+exports.calculateOpColor = calculateOpColor;
+exports.parseFlattenedSvg = parseFlattenedSvg;
+exports.shouldSkipPath = shouldSkipPath;
+exports.validateSvg = validateSvg;
+exports.preprocessSvg = preprocessSvg;
+const jsdom_1 = require("jsdom");
+const parse_1 = require("../../utils/parse");
+// if the fill is implicit, walk ancestors for the first explicit fill value
+function resolveInheritedFill(el) {
+    let current = el.parentElement;
+    while (current !== null) {
+        const fill = current.getAttribute('fill');
+        if (fill !== null && fill !== 'inherit')
+            return fill;
+        current = current.parentElement;
+    }
+    return 'black';
+}
+// bake opacity into the fill as an rgba(...)
+function calculateOpColor(fill, opacity, el) {
+    const resolvedFill = fill ?? resolveInheritedFill(el);
+    const [r, g, b, a] = (0, parse_1.parseColor)(resolvedFill);
+    const finalAlpha = +(a * opacity).toFixed(4);
+    return `rgba(${r},${g},${b},${finalAlpha})`;
+}
+const parsePath = (p) => {
+    const d = p.getAttribute('d') ?? '';
+    const op = p.getAttribute('opacity');
+    const fillOp = p.getAttribute('fill-opacity');
+    const fill = p.getAttribute('fill');
+    if (op !== null || fillOp !== null) {
+        const opVal = op !== null ? parseFloat(op) : 1;
+        const fillOpVal = fillOp !== null ? parseFloat(fillOp) : 1;
+        const combinedOpacity = opVal * fillOpVal;
+        return {
+            d,
+            fill: calculateOpColor(fill, combinedOpacity, p),
+        };
+    }
+    return {
+        d,
+        fill,
+    };
+};
+exports.parsePath = parsePath;
+function parseFlattenedSvg(flattenedSvg) {
+    const dom = new jsdom_1.JSDOM(flattenedSvg);
+    const doc = dom.window.document;
+    const svgEl = doc.querySelector('svg');
+    const viewBoxRaw = svgEl
+        ?.getAttribute('viewBox')
+        ?.split(/\s+/)
+        .map(Number) ?? [0, 0, 100, 100];
+    const viewBox = viewBoxRaw.length === 4 && viewBoxRaw.every((n) => Number.isFinite(n))
+        ? [viewBoxRaw[0], viewBoxRaw[1], viewBoxRaw[2], viewBoxRaw[3]]
+        : [0, 0, 100, 100];
+    const pathEls = Array.from(doc.querySelectorAll('path'));
+    const paths = pathEls.map(exports.parsePath).filter((p) => p.d.trim() !== '');
+    return { viewBox, paths };
+}
+function shouldSkipPath(d, fill) {
+    if (!d || d.trim() === '')
+        return true;
+    const f = (fill ?? '').trim().toLowerCase();
+    return f === 'transparent' || f === 'none';
+}
+function validateSvg(content) {
+    if (/<mask[\s>]/i.test(content)) {
+        return { valid: false, reason: '<mask> is not supported yet' };
+    }
+    if (/<filter[\s>]/i.test(content)) {
+        return { valid: false, reason: '<filter> is not supported yet' };
+    }
+    return { valid: true };
+}
+// ensure the svg has a xmlns attribute
+function preprocessSvg(content) {
+    if (/xmlns\s*=/.test(content))
+        return content;
+    return content.replace(/<svg\b/, '<svg xmlns="http://www.w3.org/2000/svg"');
+}

package/lib/commonjs/src/core/svg/svg_pathops.d.ts

@@ -0,0 +1,21 @@
+import type { PathKitModule, WrappedPath, Point } from '../types.js';
+export declare function buildPathopsBackend(PathKit: PathKitModule): {
+    create_path(fillTypeInt: number): WrappedPath;
+    clone_path(h: WrappedPath): WrappedPath;
+    delete_path(h: WrappedPath): void;
+    get_fill_type(h: WrappedPath): number;
+    set_fill_type(h: WrappedPath, fillTypeInt: number): true;
+    move_to(h: WrappedPath, x: number, y: number): void;
+    line_to(h: WrappedPath, x: number, y: number): void;
+    quad_to(h: WrappedPath, x1: number, y1: number, x2: number, y2: number): void;
+    cubic_to(h: WrappedPath, x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void;
+    close(h: WrappedPath): void;
+    simplify(h: WrappedPath, fixWinding?: boolean): boolean;
+    stroke(h: WrappedPath, width: number, capInt: number, joinInt: number, miterLimit: number, dashArray: unknown, dashOffset: number): WrappedPath;
+    convert_conics_to_quads(_h: WrappedPath, _tol: number): void;
+    transform(h: WrappedPath, a: number, b: number, c: number, d: number, e: number, f: number): WrappedPath;
+    op(aHandle: WrappedPath, bHandle: WrappedPath, opInt: number): WrappedPath | null;
+    bounds(h: WrappedPath): [number, number, number, number];
+    area(h: WrappedPath): number;
+    iter_segments(h: WrappedPath): Array<[number, Point[]]>;
+};