@tamagui/cli 2.7.7 → 3.0.0-0.canary.1791057742817

package/dist/icons.cjs

@@ -0,0 +1,263 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var icons_exports = {};
+__export(icons_exports, {
+	HEROICONS_VERSION: () => HEROICONS_VERSION,
+	LUCIDE_VERSION: () => LUCIDE_VERSION,
+	PHOSPHOR_VERSION: () => PHOSPHOR_VERSION,
+	addIcons: () => addIcons,
+	svgToComponent: () => svgToComponent
+});
+module.exports = __toCommonJS(icons_exports);
+var import_node_fs = require("node:fs");
+var import_promises = require("node:fs/promises");
+var import_node_path = __toESM(require("node:path"));
+var import_chalk = __toESM(require("chalk"));
+const LUCIDE_VERSION = "1.49.0";
+const HEROICONS_VERSION = "2.2.0";
+const PHOSPHOR_VERSION = "2.1.1";
+const libraries = [
+	"lucide",
+	"heroicons",
+	"phosphor"
+];
+const phosphorWeights = [
+	"regular",
+	"bold",
+	"duotone",
+	"fill",
+	"light",
+	"thin"
+];
+const heroiconsDirs = {
+	outline: "24/outline",
+	solid: "24/solid",
+	mini: "20/solid",
+	micro: "16/solid"
+};
+async function addIcons(options) {
+	const cwd = options.cwd ?? process.cwd();
+	const from = options.from ?? "lucide";
+	const outDir = import_node_path.default.resolve(cwd, options.out ?? "components/icons");
+	const localDir = libraries.includes(from) ? null : import_node_path.default.resolve(cwd, from);
+	if (localDir && !((0, import_node_fs.existsSync)(localDir) && (0, import_node_fs.statSync)(localDir).isDirectory())) {
+		throw new Error(`--from must be ${libraries.join(", ")}, or a directory of svg files (got "${from}")`);
+	}
+	if (!options.names.length) {
+		throw new Error("give the icons to add, e.g. `tamagui icons add Search ChevronDown`");
+	}
+	if (options.weight && from !== "phosphor") {
+		throw new Error("--weight applies to phosphor only");
+	}
+	if (options.weight && !phosphorWeights.includes(options.weight)) {
+		throw new Error(`--weight is one of ${phosphorWeights.join(", ")}`);
+	}
+	if (options.variant && from !== "heroicons") {
+		throw new Error("--variant applies to heroicons only");
+	}
+	if (options.variant && !heroiconsDirs[options.variant]) {
+		throw new Error(`--variant is one of ${Object.keys(heroiconsDirs).join(", ")}`);
+	}
+	const icons = [...new Set(options.names)].map((arg) => {
+		const [name, source = name] = arg.split("=");
+		const isKebab = (x) => /^[a-z0-9-]+$/.test(x);
+		const isPascal = (x) => /^[A-Z][A-Za-z0-9]*$/.test(x);
+		if (!(isKebab(name) || isPascal(name)) || !(isKebab(source) || isPascal(source)) || source !== name && !isPascal(name)) {
+			throw new Error(`icon names are PascalCase, kebab-case, or Name=source-name, got "${arg}"`);
+		}
+		return {
+			componentName: isKebab(name) ? kebabToPascal(name) : name,
+			file: isKebab(source) ? source : pascalToKebab(stripIconSuffix(source))
+		};
+	});
+	const loaded = await Promise.all(icons.map(async (icon) => {
+		if (localDir) {
+			const file = import_node_path.default.join(localDir, `${icon.file}.svg`);
+			return {
+				...icon,
+				svg: (0, import_node_fs.existsSync)(file) ? await (0, import_promises.readFile)(file, "utf-8") : null
+			};
+		}
+		const url = sourceUrl(from, icon.file, options);
+		const response = await fetch(url);
+		if (response.status === 404) return {
+			...icon,
+			svg: null
+		};
+		if (!response.ok) {
+			throw new Error(`fetching ${url} failed (${response.status})`);
+		}
+		return {
+			...icon,
+			svg: await response.text()
+		};
+	}));
+	const unknown = loaded.filter((icon) => icon.svg === null);
+	if (unknown.length) {
+		throw new Error(`unknown ${from} icon${unknown.length === 1 ? "" : "s"}: ${unknown.map((icon) => `${icon.componentName} (${icon.file}.svg)`).join(", ")}`);
+	}
+	await (0, import_promises.mkdir)(outDir, { recursive: true });
+	for (const icon of loaded) {
+		const file = import_node_path.default.join(outDir, `${icon.componentName}.tsx`);
+		await (0, import_promises.writeFile)(file, svgToComponent(icon.componentName, icon.svg));
+		console.info(`${import_chalk.default.green("wrote")} ${import_node_path.default.relative(cwd, file)}`);
+	}
+	const components = (await (0, import_promises.readdir)(outDir)).filter((file) => file.endsWith(".tsx")).map((file) => file.slice(0, -".tsx".length)).sort();
+	await (0, import_promises.writeFile)(import_node_path.default.join(outDir, "index.ts"), components.map((name) => `export { ${name} } from './${name}'`).join("\n") + "\n");
+	console.info(`${import_chalk.default.green("wrote")} ${import_node_path.default.relative(cwd, import_node_path.default.join(outDir, "index.ts"))} (${components.length} icons)`);
+}
+function sourceUrl(library, file, options) {
+	switch (library) {
+		case "lucide": return `https://unpkg.com/lucide-static@${LUCIDE_VERSION}/icons/${file}.svg`;
+		case "heroicons": return `https://unpkg.com/heroicons@${HEROICONS_VERSION}/${heroiconsDirs[options.variant ?? "outline"]}/${file}.svg`;
+		case "phosphor": {
+			const weight = options.weight ?? "regular";
+			const name = weight === "regular" ? file : `${file}-${weight}`;
+			return `https://unpkg.com/@phosphor-icons/core@${PHOSPHOR_VERSION}/assets/${weight}/${name}.svg`;
+		}
+	}
+}
+function pascalToKebab(name) {
+	return name.replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Za-z])(\d)/g, "$1-$2").toLowerCase();
+}
+function kebabToPascal(name) {
+	return name.split("-").map((part) => part ? part[0].toUpperCase() + part.slice(1) : part).join("");
+}
+function stripIconSuffix(name) {
+	return name.endsWith("Icon") && name.length > 4 ? name.slice(0, -4) : name;
+}
+function parseSvg(svg) {
+	const root = {
+		tag: "",
+		attrs: [],
+		children: []
+	};
+	const stack = [root];
+	const tagPattern = /<(\/?)([A-Za-z][A-Za-z0-9]*)((?:"[^"]*"|'[^']*'|[^>"'])*?)(\/?)>/g;
+	for (const [, closing, tag, attrText, selfClose] of svg.replace(/<!--[\s\S]*?-->/g, "").matchAll(tagPattern)) {
+		if (closing) {
+			if (stack.pop()?.tag !== tag) throw new Error(`mismatched </${tag}> in svg`);
+			continue;
+		}
+		const node = {
+			tag,
+			attrs: [],
+			children: []
+		};
+		for (const [, name, double, single] of attrText.matchAll(/([A-Za-z_:][A-Za-z0-9_.:-]*)\s*=\s*(?:"([^"]*)"|'([^']*)')/g)) {
+			node.attrs.push([name, double ?? single]);
+		}
+		stack[stack.length - 1].children.push(node);
+		if (!selfClose) stack.push(node);
+	}
+	const svgNode = root.children.find((node) => node.tag === "svg");
+	if (stack.length !== 1 || !svgNode) throw new Error("svg source has no complete <svg> root");
+	return svgNode;
+}
+const elements = {
+	path: "Path",
+	circle: "Circle",
+	ellipse: "Ellipse",
+	line: "Line",
+	polyline: "Polyline",
+	polygon: "Polygon",
+	rect: "Rect",
+	g: "G",
+	defs: "Defs",
+	clipPath: "ClipPath",
+	linearGradient: "LinearGradient",
+	radialGradient: "RadialGradient",
+	stop: "Stop",
+	use: "Use"
+};
+const restrictedNames = [
+	"Infinity",
+	"NaN",
+	"undefined"
+];
+function svgToComponent(name, svg) {
+	const root = parseSvg(svg);
+	const used = /* @__PURE__ */ new Set();
+	const ref = (element) => element === name ? `_${element}` : element;
+	const jsxAttr = (attrName, value) => {
+		if (attrName === "style") {
+			throw new Error(`${name}: style attributes have no react-native-svg equivalent`);
+		}
+		const prop = attrName === "xlink:href" ? "href" : attrName.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+		return value === "currentColor" ? `${prop}={color}` : `${prop}="${value}"`;
+	};
+	const keepAttr = ([attrName]) => !(attrName === "xmlns" || attrName.startsWith("xmlns:") || attrName === "class" || attrName === "version" || attrName.startsWith("data-") || attrName.startsWith("aria-"));
+	const rootAttrs = root.attrs.filter(keepAttr);
+	const viewBox = rootAttrs.find(([attrName]) => attrName === "viewBox")?.[1];
+	if (!viewBox) throw new Error(`${name}: svg source has no viewBox`);
+	const rootStroke = rootAttrs.some(([attrName, value]) => attrName === "stroke" && value === "currentColor");
+	const strokeWidth = rootAttrs.find(([attrName]) => attrName === "stroke-width")?.[1];
+	const emit = (node, indent) => {
+		const element = elements[node.tag];
+		if (!element) throw new Error(`${name}: unsupported svg element <${node.tag}>`);
+		used.add(element);
+		const attrs = node.attrs.filter(keepAttr).map(([n, v]) => jsxAttr(n, v));
+		if (rootStroke && !node.attrs.some(([n]) => n === "stroke") && node.tag !== "g") {
+			attrs.push("stroke={color}");
+		}
+		const open = `${indent}<${ref(element)}${attrs.map((attr) => ` ${attr}`).join("")}`;
+		if (!node.children.length) return `${open} />`;
+		return `${open}>
+${node.children.map((child) => emit(child, `${indent}  `)).join("\n")}
+${indent}</${ref(element)}>`;
+	};
+	const children = root.children.map((child) => emit(child, "        "));
+	if (!children.length) throw new Error(`${name}: svg source draws nothing`);
+	const svgAttrs = [
+		"width={size}",
+		"height={size}",
+		...rootAttrs.filter(([attrName]) => attrName !== "width" && attrName !== "height").map(([attrName, value]) => jsxAttr(attrName, value)),
+		"{...otherProps}"
+	];
+	const imports = [...used].sort().map((element) => element === name ? `${element} as _${element}` : element);
+	const themedOptions = strokeWidth && strokeWidth !== "2" ? `, { defaultStrokeWidth: ${strokeWidth} }` : "";
+	return `${restrictedNames.includes(name) ? "/* eslint-disable no-shadow-restricted-names */\n" : ""}import { memo, type JSX } from 'react'
+import { Svg, ${imports.join(", ")}, type SvgProps } from 'react-native-svg'
+import { themed, type IconProps } from '@tamagui/helpers-icon'
+
+export const ${name}: (props: IconProps) => JSX.Element = themed(
+  memo(function ${name}(props: IconProps) {
+    const { color = 'black', size = 24, ...otherProps } = props as SvgProps & {
+      color?: string
+      size?: number
+    }
+    return (
+      <Svg
+${svgAttrs.map((attr) => `        ${attr}`).join("\n")}
+      >
+${children.join("\n")}
+      </Svg>
+    )
+  })${themedOptions}
+)
+`;
+}

package/dist/index.cjs

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-require("./cli.cjs");
+require("./cli.cjs");