react-native-nano-icons 0.0.0 → 0.1.0

package/src/core/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "rootDir": "../..",
+    "outDir": "../../lib/commonjs",
+
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+
+    "lib": ["ES2022"],
+    "types": ["node"],
+
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+
+    "noEmit": false,
+    "declaration": true,
+    "declarationMap": false,
+
+    "sourceMap": false,
+    "inlineSources": false,
+
+    "strict": true,
+    "noUncheckedIndexedAccess": true
+  },
+  "include": [
+    "./pipeline/**/*.ts",
+    "./font/**/*.ts",
+    "./svg/**/*.ts"
+  ]
+}

package/src/core/types.ts

@@ -0,0 +1,138 @@
+export type NanoLogger = {
+  start: (msg: string) => void;
+  update: (msg: string) => void;
+  succeed: (msg: string) => void;
+  fail: (msg: string) => void;
+  /** Only printed when level is 'verbose'. */
+  info: (msg: string) => void;
+  warn: (msg: string) => void;
+};
+
+export type Point = readonly [number, number];
+
+export type Cmd = readonly number[];
+
+export type VerbMap = {
+  MOVE: number;
+  LINE: number;
+  QUAD: number;
+  CONIC: number;
+  CUBIC: number;
+  CLOSE: number;
+};
+
+export type WrappedPath = {
+  p: PathKitPath;
+  meta: { moves: Point[] };
+};
+
+export interface PathKitPath {
+  delete?: () => void;
+
+  moveTo: (x: number, y: number) => void;
+  lineTo: (x: number, y: number) => void;
+  quadTo: (x1: number, y1: number, x2: number, y2: number) => void;
+  cubicTo: (
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    x3: number,
+    y3: number
+  ) => void;
+  close: () => void;
+
+  simplify: () => void;
+  toSVGString: () => string;
+  toCmds: () => Cmd[];
+
+  getBounds: () => {
+    fLeft: number;
+    fTop: number;
+    fRight: number;
+    fBottom: number;
+  };
+
+  getFillType?: () => number;
+  setFillType: (t: number) => void;
+
+  dash?: (on: number, off: number, phase: number) => void;
+  stroke: (opts: {
+    width: number;
+    cap: number;
+    join: number;
+    miter_limit: number;
+  }) => PathKitPath | null;
+
+  transform: (
+    a: number,
+    c: number,
+    e: number,
+    b: number,
+    d: number,
+    f: number,
+    g: number,
+    h: number,
+    i: number
+  ) => void;
+}
+
+export interface PathKitModule {
+  MOVE_VERB?: number;
+  LINE_VERB?: number;
+  QUAD_VERB?: number;
+  CONIC_VERB?: number;
+  CUBIC_VERB?: number;
+  CLOSE_VERB?: number;
+
+  FillType?: {
+    EVENODD?: number;
+    EVEN_ODD?: number;
+    WINDING?: number;
+    NONZERO?: number;
+  };
+  StrokeCap?: { BUTT?: number; ROUND?: number; SQUARE?: number };
+  StrokeJoin?: { MITER?: number; ROUND?: number; BEVEL?: number };
+  PathOp?: { UNION?: number; INTERSECT?: number; DIFFERENCE?: number };
+
+  NewPath: (src?: PathKitPath) => PathKitPath;
+  FromSVGString: (svg: string) => PathKitPath | null;
+  MakeFromOp: (
+    a: PathKitPath,
+    b: PathKitPath,
+    op: number
+  ) => PathKitPath | null;
+}
+
+export type PyodideModule = {
+  mountNodeFS: (mountpoint: string, hostPath: string) => void;
+  registerJsModule: (name: string, mod: unknown) => void;
+  loadPackage: (
+    pkgs: string[],
+    options?: {
+      messageCallback?: (msg: string) => void;
+      errorCallback?: (msg: string) => void;
+    }
+  ) => Promise<void>;
+  runPythonAsync: (code: string) => Promise<unknown>;
+  runPython: (code: string) => string;
+  FS: { writeFile: (path: string, data: string) => void };
+  globals: {
+    set: (key: string, value: unknown) => void;
+    get: (key: string) => unknown;
+  };
+};
+
+export type GlyphLayer = { codepoint: number; color: string };
+export type GlyphEntry = { adv: number; layers: GlyphLayer[] };
+export type IconsMap = Record<string, GlyphEntry>;
+export type NanoGlyphMap = {
+  meta: {
+    fontFamily: string;
+    upm: number;
+    safeZone: number;
+    startUnicode: number;
+    hash?: string;
+  };
+  icons: IconsMap;
+};

package/src/createNanoIconsSet.tsx

@@ -0,0 +1,131 @@
+import { forwardRef, type ComponentRef, type Ref } from 'react';
+import {
+  Platform,
+  Text,
+  View,
+  type ViewProps,
+  type ColorValue,
+  type TextProps,
+  useWindowDimensions,
+} from 'react-native';
+import type { GlyphEntry, NanoGlyphMap } from './core/types';
+
+const DEFAULT_ICON_SIZE = 12;
+
+type ViewRef = ComponentRef<typeof View>;
+
+export type IconProps<Name> = TextProps & {
+  name: Name;
+  size?: number;
+  colorPalette?: ColorValue[];
+  innerRef?: Ref<ViewRef>;
+};
+
+export type IconComponent<GM extends NanoGlyphMap> = React.FC<
+  TextProps & {
+    name: keyof GM['icons'];
+    size?: number;
+    colorPalette?: ColorValue[];
+    innerRef?: Ref<ViewRef>;
+  } & React.RefAttributes<ViewRef>
+>;
+
+export function createIconSet<GM extends NanoGlyphMap>(
+  glyphMap: GM
+): IconComponent<GM> {
+  const fontBasename = glyphMap.meta.fontFamily;
+
+  const fontReference = Platform.select({
+    windows: `/Assets/${fontBasename}`,
+    android: fontBasename,
+    default: fontBasename,
+  });
+
+  const styleOverrides: TextProps['style'] = {
+    fontFamily: fontReference,
+    fontWeight: 'normal',
+    fontStyle: 'normal',
+    position: 'absolute',
+    includeFontPadding: false,
+    bottom: 0,
+  };
+
+  const resolveEntry = (name: keyof GM['icons']): GlyphEntry => {
+    return (
+      glyphMap.icons[name as string] ?? {
+        adv: glyphMap.meta.upm,
+        layers: [{ codepoint: 63, color: 'black' }], // "?"
+      }
+    );
+  };
+
+  const Icon = ({
+    name,
+    size = DEFAULT_ICON_SIZE,
+    colorPalette,
+    style,
+    allowFontScaling = true,
+    innerRef,
+    ...props
+  }: IconProps<keyof GM['icons']>) => {
+    const { fontScale } = useWindowDimensions();
+
+    const entry = resolveEntry(name);
+    const layers = entry.layers ?? [];
+
+    const scaledSize = allowFontScaling ? size * fontScale : size;
+    const width = (entry.adv / glyphMap.meta.upm) * scaledSize;
+
+    const containerProps: ViewProps = {
+      style: {
+        height: scaledSize,
+        width,
+        bottom: 0,
+      },
+    };
+
+    const lastPaletteColor = colorPalette?.length
+      ? colorPalette[colorPalette.length - 1]
+      : undefined;
+
+    return (
+      <View
+        nativeID={`nano-icon-container-${String(name)}`}
+        ref={innerRef}
+        {...containerProps}
+      >
+        {layers.map(({ codepoint, color: srcColor }, i) => {
+          const layerColor =
+            colorPalette?.[i] ?? lastPaletteColor ?? srcColor ?? 'black';
+
+          return (
+            <Text
+              key={`${codepoint}-${i}`}
+              selectable={false}
+              {...props}
+              allowFontScaling={allowFontScaling}
+              style={[
+                style,
+                styleOverrides,
+                {
+                  fontSize: size,
+                  color: layerColor,
+                },
+              ]}
+            >
+              {String.fromCodePoint(codepoint)}
+            </Text>
+          );
+        })}
+      </View>
+    );
+  };
+
+  const WrappedIcon = forwardRef<ViewRef, IconProps<keyof GM['icons']>>(
+    (props, ref) => <Icon innerRef={ref} {...props} />
+  );
+
+  WrappedIcon.displayName = `NanoIcon(${fontBasename})`;
+
+  return WrappedIcon;
+}

package/src/index.node.ts

@@ -0,0 +1,14 @@
+type CreateIconSetFn = (...args: unknown[]) => unknown;
+type ConfigPluginFn = (...args: unknown[]) => unknown;
+
+const createNanoIconSet = (...args: unknown[]) => {
+  const { createIconSet } = require('./createNanoIconsSet') as {
+    createIconSet: CreateIconSetFn;
+  };
+  return createIconSet(...args);
+};
+
+const plugin = (require('./plugin/src/index') as { default: ConfigPluginFn })
+  .default;
+
+module.exports = Object.assign(plugin, { createNanoIconSet });

package/src/index.ts

@@ -0,0 +1,7 @@
+// Extension-less so Metro can resolve when example uses path alias to ../src
+export {
+  createIconSet as createNanoIconSet,
+  type IconComponent,
+  type IconProps,
+} from './createNanoIconsSet';
+export type { ColorValue } from 'react-native';

package/src/utils/fingerPrint.ts

@@ -0,0 +1,20 @@
+const crypto = require('crypto');
+const fs = require('fs');
+const path = require('path');
+
+export function getFingerprintSync(dir: string): string {
+  const files = fs
+    .readdirSync(dir)
+    .filter((f: string) => f.endsWith('.svg'))
+    .sort();
+  const hash = crypto.createHash('sha256');
+
+  for (const file of files) {
+    const filePath = path.join(dir, file);
+    // Hash both path and content
+    hash.update(file);
+    hash.update(fs.readFileSync(filePath));
+  }
+
+  return hash.digest('hex');
+}

package/src/utils/parse.ts

@@ -0,0 +1,67 @@
+import { CSS_NAMED_COLORS } from '../const/colors';
+
+// e.g. u0041.svg -> 65
+export function parseCodepointFromFilename(filename: string): number {
+  const m = /^u([0-9a-fA-F]+)\.svg$/.exec(filename);
+  if (!m) throw new Error(`Unexpected glyph filename: ${filename}`);
+  return parseInt(m[1]!, 16);
+}
+
+// e.g. #ff0000 -> [255, 0, 0, 1], rgba(255, 0, 0, 0.5) -> [255, 0, 0, 0.5], rgb(255, 0, 0) -> [255, 0, 0, 1], blue -> [0, 0, 255, 1] etc.
+export function parseColor(
+  color: string
+): [r: number, g: number, b: number, a: number] {
+  const c = color.trim();
+
+  // rgba(r,g,b,a)
+  if (c.indexOf('rgba(') === 0) {
+    const inner = c.slice(5, c.indexOf(')'));
+    const p = inner.split(',');
+    return [+(p[0] ?? '0'), +(p[1] ?? '0'), +(p[2] ?? '0'), +(p[3] ?? '1')];
+  }
+
+  // rgb(r,g,b)
+  if (c.indexOf('rgb(') === 0) {
+    const inner = c.slice(4, c.indexOf(')'));
+    const p = inner.split(',');
+    return [+(p[0] ?? '0'), +(p[1] ?? '0'), +(p[2] ?? '0'), 1];
+  }
+
+  // hex — first char is '#' (charCode 35)
+  if (c.charCodeAt(0) === 35) {
+    if (c.length === 9) {
+      // #rrggbbaa
+      return [
+        parseInt(c.slice(1, 3), 16),
+        parseInt(c.slice(3, 5), 16),
+        parseInt(c.slice(5, 7), 16),
+        parseInt(c.slice(7, 9), 16) / 255,
+      ];
+    }
+    if (c.length === 7) {
+      // #rrggbb
+      return [
+        parseInt(c.slice(1, 3), 16),
+        parseInt(c.slice(3, 5), 16),
+        parseInt(c.slice(5, 7), 16),
+        1,
+      ];
+    }
+    if (c.length === 4) {
+      // #rgb — expand each nibble × 17
+      return [
+        parseInt(c.slice(1, 2), 16) * 17,
+        parseInt(c.slice(2, 3), 16) * 17,
+        parseInt(c.slice(3, 4), 16) * 17,
+        1,
+      ];
+    }
+  }
+
+  // named color lookup (O(1))
+  const named = CSS_NAMED_COLORS[c.toLowerCase()];
+  if (named !== undefined) return [named[0], named[1], named[2], 1];
+
+  // unknown — SVG default is opaque black
+  return [0, 0, 0, 1];
+}