@cyberalien/svg-utils 1.0.8 → 1.0.9

package/lib/components/helpers/ts/jsx.d.ts

@@ -0,0 +1,13 @@
+import { GeneratedAssetFile } from "../../types/component.js";
+import { FactoryIconData } from "../../types/data.js";
+import { ComponentFactoryOptions } from "../../types/options.js";
+import { FactoryComponentProps } from "../props/types.js";
+import { JSXMode } from "../../types/jsx.js";
+interface Options extends ComponentFactoryOptions {
+  jsx: JSXMode;
+}
+/**
+ * Add JSX component types
+ */
+declare function addJSXComponentTypes(data: FactoryIconData, options: Options, assets: GeneratedAssetFile[], props: FactoryComponentProps): string;
+export { addJSXComponentTypes };

package/lib/components/helpers/ts/jsx.js

@@ -0,0 +1,39 @@
+import { addComponentTypes } from "./wrapper.js";
+
+const iconPropsTemplate = `interface IconProps {
+/* PROPS */
+}`;
+const exportTemplate = `export { type IconProps };
+export default Component;`;
+const omitProps = `'viewBox' | 'width' | 'height' | 'xmlns'`;
+/**
+* Add JSX component types
+*/
+function addJSXComponentTypes(data, options, assets, props) {
+	let template;
+	switch (options.jsx) {
+		case "react":
+			template = `import type { ForwardRefExoticComponent, SVGProps } from 'react';
+
+${iconPropsTemplate}
+
+const Component: ForwardRefExoticComponent<
+    Omit<SVGProps<SVGSVGElement>, ${omitProps}> & IconProps
+>;
+
+${exportTemplate}
+`;
+			break;
+		case "preact": template = `import type { JSX } from 'preact';
+
+${iconPropsTemplate}
+
+const Component: (props: Omit<JSX.SVGAttributes<SVGSVGElement>, ${omitProps}> & IconProps) => JSX.Element;
+
+${exportTemplate}
+`;
+	}
+	return addComponentTypes(template, data, options, assets, props);
+}
+
+export { addJSXComponentTypes };

package/lib/components/jsx.d.ts

@@ -1,8 +1,9 @@
 import { FactoryGeneratedComponent } from "./types/component.js";
 import { FactoryIconData } from "./types/data.js";
 import { ComponentFactoryOptions } from "./types/options.js";
+import { JSXMode } from "./types/jsx.js";
 interface Options extends ComponentFactoryOptions {
-  jsx: 'react';
+  jsx: JSXMode;
   fallbackPackage?: string;
   ts?: boolean;
 }

package/lib/components/jsx.js

@@ -10,7 +10,7 @@ import { makeSquareViewBox } from "../svg/viewbox/square.js";
 import { getUsedFactoryProps, stringifyFactoryPropTypes } from "./helpers/props/ts.js";
 import { minifyViewBox } from "../svg/viewbox/minify.js";
 import { getViewBoxRatio } from "./helpers/content/ratio.js";
-import { addReactComponentTypes } from "./helpers/ts/react.js";
+import { addJSXComponentTypes } from "./helpers/ts/jsx.js";
 
 /**
 * Create functional Vue component code
@@ -20,8 +20,14 @@ function createJSXComponent(data, options) {
 	const assets = [];
 	const imports = createFactoryImports();
 	const dependencies = /* @__PURE__ */ new Set();
-	const importPackage = "react";
-	const createElement = "createElement";
+	let importPackage = "react";
+	let createElement = "createElement";
+	switch (options.jsx) {
+		case "preact":
+			importPackage = "preact";
+			createElement = "h";
+			break;
+	}
 	const fallbackPackage = options.fallbackPackage || null;
 	const hasFallback = !!(fallbackPackage && data.fallback);
 	if (hasFallback) {
@@ -105,7 +111,7 @@ function createJSXComponent(data, options) {
 }
 `;
 	const content = `${stringifyFactoryImports(imports)}\n${beforeFunction}${componentFunction}\nexport default Component;\n`;
-	const types = addReactComponentTypes(data, options, assets, props);
+	const types = addJSXComponentTypes(data, options, assets, props);
 	return {
 		assets,
 		content,

package/lib/components/types/jsx.d.ts

@@ -0,0 +1,2 @@
+type JSXMode = 'react' | 'preact';
+export { JSXMode };

package/lib/components/types/jsx.js

@@ -0,0 +1 @@
+export {  };

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "Common functions for working with SVG used by various packages.",
   "author": "Vjacheslav Trushkin",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "license": "MIT",
   "bugs": "https://github.com/cyberalien/svg-utils/issues",
   "homepage": "https://cyberalien.dev/",

package/lib/components/helpers/ts/react.d.ts

@@ -1,9 +0,0 @@
-import { GeneratedAssetFile } from "../../types/component.js";
-import { FactoryIconData } from "../../types/data.js";
-import { ComponentFactoryOptions } from "../../types/options.js";
-import { FactoryComponentProps } from "../props/types.js";
-/**
- * Add React component types
- */
-declare const addReactComponentTypes: (data: FactoryIconData, options: ComponentFactoryOptions, assets: GeneratedAssetFile[], props: FactoryComponentProps) => string;
-export { addReactComponentTypes };

package/lib/components/helpers/ts/react.js

@@ -1,20 +0,0 @@
-import { addComponentTypes } from "./wrapper.js";
-
-/**
-* Add React component types
-*/
-const addReactComponentTypes = addComponentTypes.bind(null, `import type { ForwardRefExoticComponent, SVGProps } from 'react';
-
-interface IconProps {
-/* PROPS */
-}
-
-const Component: ForwardRefExoticComponent<
-    Omit<SVGProps<SVGSVGElement>, 'viewBox' | 'width' | 'height' | 'xmlns'> & IconProps
->;
-
-export { type IconProps };
-export default Component;
-`);
-
-export { addReactComponentTypes };