@ecopages/image-processor 0.2.0-beta.38 → 0.2.0-beta.39

package/README.md

@@ -9,7 +9,7 @@ It provides automatic image processing (e.g. converting and compressing to WebP)
 - **Automatic Image Optimization**: Converts and compresses images to modern formats at build time.
 - **Responsive Image Generation**: Creates multiple variants for different screen sizes.
 - **Virtual Module Integration**: Type-safe imports through `ecopages:images`.
-- **Ecopages Components**: Ready-to-use HTML (`EcoImage`) and React (`EcoImage`) components.
+- **Ecopages Components**: Ready-to-use HTML, Ecopages JSX, and React (`EcoImage`) components.
 - **Multiple Layout Options**: Fixed, constrained, and full-width layouts built-in.
 
 ## Installation
@@ -70,9 +70,9 @@ import { heroImage, profilePicture } from 'ecopages:images';
 
 ### Components
 
-The plugin provides ready-to-use components for HTML (`@kitajs/html`) and React:
+The plugin provides ready-to-use components for string HTML (KitaJS), Ecopages JSX, and React.
 
-**HTML Component:**
+**HTML Component** (returns a markup string; use as a function, or in string-based JSX runtimes like KitaJS):
 
 ```typescript
 import { EcoImage } from '@ecopages/image-processor/component/html';
@@ -85,6 +85,14 @@ EcoImage({
 });
 ```
 
+**Ecopages JSX Component:**
+
+```jsx
+import { EcoImage } from '@ecopages/image-processor/component/jsx';
+
+<EcoImage {...heroImage} alt="Hero banner" layout="constrained" priority />;
+```
+
 **React Component:**
 
 ```jsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/image-processor",
-  "version": "0.2.0-beta.38",
+  "version": "0.2.0-beta.39",
   "description": "Image processor, transform and optimize images for web",
   "keywords": [
     "image",
@@ -15,10 +15,16 @@
     "directory": "packages/processors/image-processor"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-beta.38"
+    "@ecopages/core": "0.2.0-beta.39",
+    "@ecopages/jsx": ">=0.3.0-beta.6"
+  },
+  "peerDependenciesMeta": {
+    "@ecopages/jsx": {
+      "optional": true
+    }
   },
   "dependencies": {
-    "@ecopages/file-system": "0.2.0-beta.38",
+    "@ecopages/file-system": "0.2.0-beta.39",
     "@ecopages/logger": "^0.2.3",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
@@ -36,6 +42,10 @@
       "default": "./src/component/html.js",
       "types": "./src/component/html.d.ts"
     },
+    "./component/jsx": {
+      "default": "./src/component/jsx.js",
+      "types": "./src/component/jsx.d.ts"
+    },
     "./component/react": {
       "default": "./src/component/react.js",
       "types": "./src/component/react.d.ts"
@@ -47,6 +57,10 @@
       "default": "./src/component/html.js",
       "types": "./src/component/html.d.ts"
     },
+    "./component/jsx.ts": {
+      "default": "./src/component/jsx.js",
+      "types": "./src/component/jsx.d.ts"
+    },
     "./component/react.ts": {
       "default": "./src/component/react.js",
       "types": "./src/component/react.d.ts"

package/src/component/jsx.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Image component that renders as an Ecopages JSX element.
+ * @module @ecopages/image-processor/component/jsx
+ */
+import { type JsxRenderable } from '@ecopages/jsx';
+import { type EcoImageProps } from '../image-renderer.js';
+/**
+ * EcoImage
+ * This component generates the image element based on the provided props as JSX
+ * @param props {@link EcoImageProps}
+ */
+export declare const EcoImage: (props: EcoImageProps) => JsxRenderable;

package/src/component/jsx.js

@@ -0,0 +1,18 @@
+/**
+ * Image component that renders as an Ecopages JSX element.
+ * @module @ecopages/image-processor/component/jsx
+ */
+import { jsx } from '@ecopages/jsx';
+import { renderer } from '../image-renderer.js';
+/**
+ * EcoImage
+ * This component generates the image element based on the provided props as JSX
+ * @param props {@link EcoImageProps}
+ */
+export const EcoImage = (props) => {
+    const attributes = renderer.generateAttributes(props);
+    if (!attributes) {
+        return null;
+    }
+    return jsx('img', attributes);
+};