@tarve/react-icons 0.1.2

package/README.md

@@ -0,0 +1,19 @@
+# @tarve/react-icons
+
+Optional adapters for using React SVG icon libraries with Tarve while keeping `@tarve/core` library-agnostic.
+
+```powershell
+bun add @tarve/core @tarve/react-icons
+```
+
+```ts
+import { lucideReactAdapter, phosphorReactAdapter, reactSvgAdapter } from "@tarve/react-icons";
+
+await render(App, {
+  componentAdapters: [reactSvgAdapter, lucideReactAdapter, phosphorReactAdapter],
+});
+```
+
+`reactSvgAdapter` handles libraries whose icon component directly renders a static SVG, including Heroicons and Tabler. Lucide and Phosphor use their dedicated adapters because their exported wrappers carry icon data in library-specific structures.
+
+The package does not depend on React or on any icon library. Install only the icon libraries used by your application.

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@tarve/react-icons",
+  "version": "0.1.2",
+  "description": "React icon-library adapters for Tarve",
+  "license": "Apache-2.0",
+  "keywords": [
+    "tarve",
+    "icons",
+    "lucide",
+    "phosphor",
+    "heroicons",
+    "tabler"
+  ],
+  "homepage": "https://github.com/omarcosr/tarve/tree/main/packages/react-icons#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/omarcosr/tarve.git",
+    "directory": "packages/react-icons"
+  },
+  "bugs": {
+    "url": "https://github.com/omarcosr/tarve/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./react-svg": "./src/react-svg.ts",
+    "./lucide": "./src/lucide.ts",
+    "./phosphor": "./src/phosphor.ts"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "@tarve/core": "^0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@tarve/core": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "bun": ">=1.4.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { reactSvgAdapter, reactSvgElementToTarve } from "./react-svg";
+export { lucideReactAdapter } from "./lucide";
+export { phosphorReactAdapter } from "./phosphor";

package/src/lucide.ts

@@ -0,0 +1,104 @@
+import { REACT_FORWARD_REF, finiteNumber, reactSvgElementToTarve, record, type ComponentAdapter, type SvgAttributes, type SvgNode } from "./react-svg";
+
+const SVG_ELEMENTS = new Set(["path", "circle", "ellipse", "g", "line", "polygon", "polyline", "rect"]);
+type LucideData = {
+  node: readonly unknown[];
+  size?: number;
+  width?: number;
+  height?: number;
+};
+
+function normalizeNode(value: unknown, nonScalingStroke: boolean): SvgNode | undefined {
+  if (!Array.isArray(value) || value.length < 2) return undefined;
+  const [tag, rawAttrs, rawChildren] = value;
+  if (typeof tag !== "string" || !SVG_ELEMENTS.has(tag)) return undefined;
+  const attrsRecord = record(rawAttrs);
+  if (!attrsRecord) return undefined;
+  const attrs: SvgAttributes = {};
+  for (const [name, rawValue] of Object.entries(attrsRecord)) {
+    if (name === "key") continue;
+    if (typeof rawValue === "string" || typeof rawValue === "number") attrs[name] = rawValue;
+  }
+  if (nonScalingStroke) attrs.vectorEffect = "non-scaling-stroke";
+
+  if (rawChildren === undefined) return [tag as SvgNode[0], attrs];
+  if (!Array.isArray(rawChildren)) return undefined;
+  const children: SvgNode[] = [];
+  for (const child of rawChildren) {
+    const normalized = normalizeNode(child, nonScalingStroke);
+    if (!normalized) return undefined;
+    children.push(normalized);
+  }
+  return [tag as SvgNode[0], attrs, children];
+}
+
+function lucideData(value: unknown): LucideData | undefined {
+  const candidate = record(value);
+  if (!candidate || !Array.isArray(candidate.node)) return undefined;
+  return {
+    node: candidate.node,
+    size: finiteNumber(candidate.size),
+    width: finiteNumber(candidate.width),
+    height: finiteNumber(candidate.height),
+  };
+}
+
+export const lucideReactAdapter: ComponentAdapter = ({ type, props }) => {
+  const component = record(type);
+  if (component?.$$typeof !== REACT_FORWARD_REF || typeof component.render !== "function") return undefined;
+
+  let rendered: unknown;
+  try {
+    rendered = (component.render as (props: Record<string, unknown>, ref: null) => unknown)({ ...props }, null);
+  } catch {
+    return undefined;
+  }
+  const renderedProps = record(record(rendered)?.props);
+  const icon = lucideData(renderedProps?.icon);
+  if (!renderedProps || !icon) return undefined;
+
+  const nodes: SvgNode[] = [];
+  for (const child of icon.node) {
+    const node = normalizeNode(child, renderedProps.nonScalingStroke === true);
+    if (!node) return undefined;
+    nodes.push(node);
+  }
+
+  const baseWidth = icon.size ?? icon.width ?? 24;
+  const baseHeight = icon.size ?? icon.height ?? 24;
+  const size = finiteNumber(renderedProps.size);
+  const width = finiteNumber(renderedProps.width) ?? size ?? baseWidth;
+  const height = finiteNumber(renderedProps.height) ?? size ?? baseHeight;
+  const requestedStrokeWidth = finiteNumber(renderedProps.strokeWidth) ?? 2;
+  const strokeWidth = renderedProps.absoluteStrokeWidth === true
+    ? requestedStrokeWidth * baseWidth / (size ?? width)
+    : requestedStrokeWidth;
+  const explicitColor = typeof renderedProps.color === "string" ? renderedProps.color : undefined;
+
+  return reactSvgElementToTarve({
+    type: "svg",
+    props: {
+      ...(typeof renderedProps.id === "string" ? { id: renderedProps.id } : {}),
+      width,
+      height,
+      viewBox: `0 0 ${baseWidth} ${baseHeight}`,
+      color: explicitColor ?? "currentColor",
+      fill: typeof renderedProps.fill === "string" ? renderedProps.fill : "none",
+      stroke: typeof renderedProps.stroke === "string" ? renderedProps.stroke : "currentColor",
+      strokeWidth,
+      strokeLinecap: renderedProps.strokeLinecap === "butt" || renderedProps.strokeLinecap === "square" ? renderedProps.strokeLinecap : "round",
+      strokeLinejoin: renderedProps.strokeLinejoin === "miter" || renderedProps.strokeLinejoin === "bevel" ? renderedProps.strokeLinejoin : "round",
+      children: nodes.map(([tag, attrs, children]) => ({
+        type: tag,
+        props: { ...attrs, ...(children ? { children: toReactLike(children) } : {}) },
+      })),
+    },
+  });
+};
+
+function toReactLike(nodes: readonly SvgNode[]): unknown[] {
+  return nodes.map(([tag, attrs, children]) => ({
+    type: tag,
+    props: { ...attrs, ...(children ? { children: toReactLike(children) } : {}) },
+  }));
+}

package/src/phosphor.ts

@@ -0,0 +1,39 @@
+import { REACT_FORWARD_REF, finiteNumber, reactSvgElementToTarve, record, type ComponentAdapter } from "./react-svg";
+
+const WEIGHTS = new Set(["thin", "light", "regular", "bold", "fill", "duotone"]);
+
+export const phosphorReactAdapter: ComponentAdapter = ({ type, props }) => {
+  const component = record(type);
+  if (component?.$$typeof !== REACT_FORWARD_REF || typeof component.render !== "function") return undefined;
+
+  let rendered: unknown;
+  try {
+    rendered = (component.render as (props: Record<string, unknown>, ref: null) => unknown)({ ...props }, null);
+  } catch {
+    return undefined;
+  }
+  const renderedProps = record(record(rendered)?.props);
+  if (!renderedProps || !(renderedProps.weights instanceof Map)) return undefined;
+  const requestedWeight = typeof renderedProps.weight === "string" && WEIGHTS.has(renderedProps.weight)
+    ? renderedProps.weight
+    : "regular";
+  const weightNode = renderedProps.weights.get(requestedWeight);
+  if (!weightNode) return undefined;
+  const size = finiteNumber(renderedProps.size) ?? 24;
+  const color = typeof renderedProps.color === "string" ? renderedProps.color : "currentColor";
+  const mirrored = renderedProps.mirrored === true;
+
+  return reactSvgElementToTarve({
+    type: "svg",
+    props: {
+      ...(typeof renderedProps.id === "string" ? { id: renderedProps.id } : {}),
+      width: size,
+      height: size,
+      viewBox: "0 0 256 256",
+      fill: color,
+      color,
+      ...(mirrored ? { transform: "translate(256 0) scale(-1 1)" } : {}),
+      children: [renderedProps.children, weightNode],
+    },
+  });
+};

package/src/react-svg.ts

@@ -0,0 +1,175 @@
+export type SvgElementName = "path" | "circle" | "ellipse" | "g" | "line" | "polygon" | "polyline" | "rect";
+export type SvgAttributes = Record<string, string | number>;
+export type SvgNode =
+  | readonly [SvgElementName, SvgAttributes]
+  | readonly [SvgElementName, SvgAttributes, readonly SvgNode[]];
+export interface TarveVNode {
+  type: string | ((props: Record<string, any>) => TarveVNode);
+  props: Record<string, any>;
+  key?: string | number;
+}
+export interface ComponentAdapterInput {
+  type: unknown;
+  props: Readonly<Record<string, unknown>>;
+  key?: string | number;
+}
+export type ComponentAdapter = (component: ComponentAdapterInput) => TarveVNode | undefined;
+
+export const REACT_FORWARD_REF = Symbol.for("react.forward_ref");
+const REACT_FRAGMENT = Symbol.for("react.fragment");
+const SVG_ELEMENTS = new Set(["path", "circle", "ellipse", "g", "line", "polygon", "polyline", "rect"]);
+
+export type RecordLike = Record<PropertyKey, unknown>;
+
+export function record(value: unknown): RecordLike | undefined {
+  return value !== null && typeof value === "object" ? value as RecordLike : undefined;
+}
+
+export function finiteNumber(value: unknown): number | undefined {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim() !== "" && Number.isFinite(Number(value))) return Number(value);
+  return undefined;
+}
+
+function normalizeAttributes(value: unknown): SvgAttributes | undefined {
+  const source = record(value);
+  if (!source) return undefined;
+  const attrs: SvgAttributes = {};
+  for (const [name, rawValue] of Object.entries(source)) {
+    if (name === "key" || name === "ref" || name === "children" || name === "className") continue;
+    if (typeof rawValue === "string" || typeof rawValue === "number") attrs[name] = rawValue;
+  }
+  return attrs;
+}
+
+function collectReactSvgNodes(value: unknown, result: SvgNode[]): boolean {
+  if (value == null || typeof value === "boolean") return true;
+  if (Array.isArray(value)) return value.every(child => collectReactSvgNodes(child, result));
+  const element = record(value);
+  if (!element) return false;
+  const type = element.type;
+  const props = record(element.props);
+  if (!props) return false;
+  if (type === REACT_FRAGMENT) return collectReactSvgNodes(props.children, result);
+  if (type === "title") return true;
+  if (typeof type !== "string" || !SVG_ELEMENTS.has(type)) return false;
+  const attrs = normalizeAttributes(props);
+  if (!attrs) return false;
+  const children: SvgNode[] = [];
+  if (!collectReactSvgNodes(props.children, children)) return false;
+  result.push(children.length
+    ? [type as SvgNode[0], attrs, children]
+    : [type as SvgNode[0], attrs]);
+  return true;
+}
+
+function linecap(value: unknown): "butt" | "round" | "square" {
+  return value === "round" || value === "square" ? value : "butt";
+}
+
+function linejoin(value: unknown): "miter" | "round" | "bevel" {
+  return value === "round" || value === "bevel" ? value : "miter";
+}
+
+function xmlEscape(value: string | number): string {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("\"", "&quot;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}
+
+function svgAttributeName(name: string): string {
+  return name.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
+}
+
+function serializeSvgNode([tag, attrs, children]: SvgNode): string {
+  const attributes = Object.entries(attrs)
+    .filter(([name]) => name !== "key")
+    .map(([name, value]) => `${svgAttributeName(name)}="${xmlEscape(value)}"`)
+    .join(" ");
+  if (children?.length) {
+    return `<${tag}${attributes ? ` ${attributes}` : ""}>${children.map(serializeSvgNode).join("")}</${tag}>`;
+  }
+  return `<${tag}${attributes ? ` ${attributes}` : ""}/>`;
+}
+
+function createSvgVNode(options: {
+  id?: string;
+  width: number;
+  height: number;
+  viewBox: string;
+  color: string;
+  fill: string;
+  stroke: string;
+  strokeWidth: number;
+  strokeLinecap: "butt" | "round" | "square";
+  strokeLinejoin: "miter" | "round" | "bevel";
+  nodes: readonly SvgNode[];
+}): TarveVNode {
+  const viewBox = options.viewBox.trim().split(/[\s,]+/).map(Number);
+  if (viewBox.length !== 4 || viewBox.some(value => !Number.isFinite(value)) || !(viewBox[2] > 0) || !(viewBox[3] > 0)) {
+    throw new TypeError(`Invalid SVG viewBox: ${options.viewBox}`);
+  }
+  const svg = [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${viewBox[2]}" height="${viewBox[3]}"`,
+    ` viewBox="${viewBox.join(" ")}" color="#000000" data-tarve-current-color="1"`,
+    ` fill="${xmlEscape(options.fill)}" stroke="${xmlEscape(options.stroke)}" stroke-width="${options.strokeWidth}"`,
+    ` stroke-linecap="${options.strokeLinecap}" stroke-linejoin="${options.strokeLinejoin}">`,
+    options.nodes.map(serializeSvgNode).join(""),
+    "</svg>",
+  ].join("");
+  return {
+    type: "svg",
+    props: {
+      ...(options.id ? { id: options.id } : {}),
+      style: { width: options.width, height: options.height, shrink: 0, foreground: options.color },
+      svg,
+    },
+  };
+}
+
+export function reactSvgElementToTarve(value: unknown): TarveVNode | undefined {
+  const element = record(value);
+  const props = record(element?.props);
+  if (element?.type !== "svg" || !props) return undefined;
+
+  const nodes: SvgNode[] = [];
+  if (!collectReactSvgNodes(props.children, nodes)) return undefined;
+  const transform = typeof props.transform === "string" ? props.transform : undefined;
+  const drawableNodes: readonly SvgNode[] = transform ? [["g", { transform }, nodes]] : nodes;
+  const viewBox = typeof props.viewBox === "string" ? props.viewBox : "0 0 24 24";
+  const viewBoxParts = viewBox.trim().split(/[\s,]+/).map(Number);
+  const intrinsicWidth = viewBoxParts.length === 4 && Number.isFinite(viewBoxParts[2]) ? viewBoxParts[2] : 24;
+  const intrinsicHeight = viewBoxParts.length === 4 && Number.isFinite(viewBoxParts[3]) ? viewBoxParts[3] : 24;
+  const width = finiteNumber(props.width) ?? intrinsicWidth;
+  const height = finiteNumber(props.height) ?? intrinsicHeight;
+  const explicitColor = typeof props.color === "string" ? props.color : undefined;
+
+  return createSvgVNode({
+    ...(typeof props.id === "string" ? { id: props.id } : {}),
+    width,
+    height,
+    viewBox,
+    color: explicitColor && explicitColor !== "currentColor" ? explicitColor : "var(--foreground)",
+    fill: typeof props.fill === "string" ? props.fill : "black",
+    stroke: typeof props.stroke === "string" ? props.stroke : "none",
+    strokeWidth: finiteNumber(props.strokeWidth) ?? 1,
+    strokeLinecap: linecap(props.strokeLinecap),
+    strokeLinejoin: linejoin(props.strokeLinejoin),
+    nodes: drawableNodes,
+  });
+}
+
+/** Generic adapter for React icon components whose forwardRef renders a static <svg>. */
+export const reactSvgAdapter: ComponentAdapter = ({ type, props }) => {
+  const component = record(type);
+  if (component?.$$typeof !== REACT_FORWARD_REF || typeof component.render !== "function") return undefined;
+  try {
+    return reactSvgElementToTarve(
+      (component.render as (props: Record<string, unknown>, ref: null) => unknown)({ ...props }, null),
+    );
+  } catch {
+    return undefined;
+  }
+};