support type data img source, remove duplicate packages, support ReadableStream for placeholder and meta

Author: andrelandgraf

README.md

@@ -18,14 +18,9 @@ The easiest way to get started is to integrate openimg as an image optimization
 - [openimg/react](./docs/api/react.md): Image React component to query for optimized images
 - [openimg/vite](./docs/api/vite.md): Vite plugin for integrating local image assets from your Vite project
 
-## Changelogs
+## Changelog
 
-Find the changelogs for each npm package here:
-
-- [openimg](./packages/core/CHANGELOG.md)
-- [openimg-bun](./packages/bun/CHANGELOG.md)
-- [openimg-node](./packages/node/CHANGELOG.md)
-- [openimg-react](./packages/react/CHANGELOG.md)
+Find the changelog here: [CHANGELOG.md](./packages/core/CHANGELOG.md)
 
 ## Motivation & references
 

bun.lock

@@ -1,6 +1,6 @@
 # openimg/bun
 
-openimg/bun (Open Image Bun) provides an HTTP request handler function to optimize images using sharp, using Bun APIs where possible. It also provides utilities for generating low quality image placeholders and retrieving image metadata.
+openimg/bun (Open Image Bun) provides an HTTP request handler function to optimize images with [sharp](https://sharp.pixelplumbing.com), using Bun APIs where possible. It also provides utilities for generating low quality image placeholders and retrieving image metadata.
 
 ## Features
 
@@ -12,19 +12,13 @@ You can find the API reference for each function below.
 
 ## Installation
 
-The code is available via `openimg/bun` and `openimg-bun`. For most use cases, you probably want to install `openimg`:
+The code is available via `openimg/bun`:
 
 ```bash
 npm i sharp openimg
 ```
 
-However, if you only want to use the server-side utilities for Bun, you can also install `openimg-bun`:
-
-```bash
-npm i sharp openimg-bun
-```
-
-openimg package uses [sharp](https://sharp.pixelplumbing.com) and can only be used in environments that can run sharp (and [libvips](https://github.com/libvips/libvips)).
+Note, openimg uses [sharp](https://sharp.pixelplumbing.com) and can only be used in environments that can run sharp (and [libvips](https://github.com/libvips/libvips)).
 
 ## getImgResponse
 
@@ -254,7 +248,7 @@ getImgResponse(request, { getImgSource });
 
 ## getImgPlaceholder
 
-Import `getImgPlaceholder` from `openimg/bun` and pass in a Readable stream (like `ReadStream`) or image Buffer. The function will return a low quality image placeholder as a base64-encoded string using [thumbhash](https://github.com/evanw/thumbhash). The generated string can be stored in a database or inlined in your client bundle as a placeholder until the full image is loaded.
+Import `getImgPlaceholder` from `openimg/bun` and pass in a Readable stream (like `ReadStream`), a ReadableStream, or image Buffer. The function will return a low quality image placeholder as a base64-encoded string using [thumbhash](https://github.com/evanw/thumbhash). The generated string can be stored in a database or inlined in your client bundle as a placeholder until the full image is loaded.
 
 Example using a Readable stream:
 
@@ -267,6 +261,17 @@ const placeholder = await getImgPlaceholder(stream);
 console.log(placeholder); // data:image/png;base64,...
 ```
 
+Example using a ReadableStream:
+
+```typescript
+import { getImgPlaceholder } from "openimg/bun";
+
+const response = await fetch("https://example.com/cat.png");
+const readableStream = response.body;
+const placeholder = await getImgPlaceholder(readableStream);
+console.log(placeholder); // data:image/png;base64,...
+```
+
 Example using an image Buffer:
 
 ```typescript
@@ -280,7 +285,7 @@ console.log(placeholder); // data:image/png;base64,...
 
 ## getImgMetadata
 
-Import `getImgMetadata` from `openimg/bun` and pass in a Readable stream (like `ReadStream`) or image Buffer. The function will return the width, height, and format of the image.
+Import `getImgMetadata` from `openimg/bun` and pass in a Readable stream (like `ReadStream`), a ReadableStream, or image Buffer. The function will return the width, height, and format of the image.
 
 Example using a Readable stream:
 
@@ -289,8 +294,19 @@ import { getImgMetadata } from "openimg/bun";
 import { createReadStream } from "node:fs";
 
 const stream = createReadStream("./public/cat.png");
-const placeholder = await getImgMetadata(stream);
-console.log(placeholder); // { width: 300, height: 300, format: "png" }
+const metadata = await getImgMetadata(stream);
+console.log(metadata); // { width: 300, height: 300, format: "png" }
+```
+
+Example using a ReadableStream:
+
+```typescript
+import { getImgMetadata } from "openimg/bun";
+
+const response = await fetch("https://example.com/cat.png");
+const readableStream = response.body;
+const metadata = await getImgMetadata(readableStream);
+console.log(metadata); // { width: 300, height: 300, format: "png" }
 ```
 
 Example using an image Buffer:
@@ -299,7 +315,7 @@ Example using an image Buffer:
 import { getImgMetadata } from "openimg/bun";
 import { readFileSync } from "node:fs";
 
-const buffer = getImgMetadata("./public/cat.png");
-const placeholder = await readFileSync(buffer);
-console.log(placeholder); // { width: 300, height: 300, format: "png" }
+const buffer = readFileSync("./public/cat.png");
+const metadata = await getImgMetadata(buffer);
+console.log(metadata); // { width: 300, height: 300, format: "png" }
 ```

bun.lockb

@@ -1,6 +1,6 @@
 # openimg/node
 
-openimg/node (Open Image Node) provides a HTTP request handler function to optimize images using sharp, using Node-compatible APIs for Bun, Deno, and Node.js. It also provides utilities for generating low quality image placeholders and retrieving image metadata.
+openimg/node (Open Image Node) provides a HTTP request handler function to optimize images with [sharp](https://sharp.pixelplumbing.com), using Node-compatible APIs for Bun, Deno, and Node.js. It also provides utilities for generating low quality image placeholders and retrieving image metadata.
 
 ## Features
 
@@ -16,19 +16,13 @@ The `openimg/bun` and `openimg/node` request handlers utilize the Web Fetch API'
 
 ## Installation
 
-The code is available via `openimg/node` and `openimg-node`. For most use cases, you probably want to install `openimg`:
+The code is available via `openimg/node`:
 
 ```bash
 npm i sharp openimg
 ```
 
-However, if you only want to use the server-side utilities for Node, you can also install `openimg-node`:
-
-```bash
-npm i sharp openimg-node
-```
-
-openimg package uses [sharp](https://sharp.pixelplumbing.com) and can only be used in environments that can run sharp (and [libvips](https://github.com/libvips/libvips)).
+Note, openimg uses [sharp](https://sharp.pixelplumbing.com) and can only be used in environments that can run sharp (and [libvips](https://github.com/libvips/libvips)).
 
 ## getImgResponse
 
@@ -258,7 +252,7 @@ getImgResponse(request, { getImgSource });
 
 ## getImgPlaceholder
 
-Import `getImgPlaceholder` from `openimg/node` and pass in a Readable stream (like `ReadStream`) or image Buffer. The function will return a low quality image placeholder as a base64-encoded string using [thumbhash](https://github.com/evanw/thumbhash). The generated string can be stored in a database or inlined in your client bundle as a placeholder until the full image is loaded.
+Import `getImgPlaceholder` from `openimg/node` and pass in a Readable stream (like `ReadStream`), a ReadableStream, or image Buffer. The function will return a low quality image placeholder as a base64-encoded string using [thumbhash](https://github.com/evanw/thumbhash). The generated string can be stored in a database or inlined in your client bundle as a placeholder until the full image is loaded.
 
 Example using a Readable stream:
 
@@ -271,6 +265,17 @@ const placeholder = await getImgPlaceholder(stream);
 console.log(placeholder); // data:image/png;base64,...
 ```
 
+Example using a ReadableStream:
+
+```typescript
+import { getImgPlaceholder } from "openimg/node";
+
+const response = await fetch("https://example.com/cat.png");
+const readableStream = response.body;
+const placeholder = await getImgPlaceholder(readableStream);
+console.log(placeholder); // data:image/png;base64,...
+```
+
 Example using an image Buffer:
 
 ```typescript
@@ -284,7 +289,7 @@ console.log(placeholder); // data:image/png;base64,...
 
 ## getImgMetadata
 
-Import `getImgMetadata` from `openimg/node` and pass in a Readable stream (like `ReadStream`) or image Buffer. The function will return the width, height, and format of the image.
+Import `getImgMetadata` from `openimg/node` and pass in a Readable stream (like `ReadStream`), a ReadableStream, or image Buffer. The function will return the width, height, and format of the image.
 
 Example using a Readable stream:
 
@@ -293,8 +298,19 @@ import { getImgMetadata } from "openimg/node";
 import { createReadStream } from "node:fs";
 
 const stream = createReadStream("./public/cat.png");
-const placeholder = await getImgMetadata(stream);
-console.log(placeholder); // { width: 300, height: 300, format: "png" }
+const metadata = await getImgMetadata(stream);
+console.log(metadata); // { width: 300, height: 300, format: "png" }
+```
+
+Example using a ReadableStream:
+
+```typescript
+import { getImgMetadata } from "openimg/node";
+
+const response = await fetch("https://example.com/cat.png");
+const readableStream = response.body;
+const metadata = await getImgMetadata(readableStream);
+console.log(metadata); // { width: 300, height: 300, format: "png" }
 ```
 
 Example using an image Buffer:
@@ -303,7 +319,7 @@ Example using an image Buffer:
 import { getImgMetadata } from "openimg/node";
 import { readFileSync } from "node:fs";
 
-const buffer = getImgMetadata("./public/cat.png");
-const placeholder = await readFileSync(buffer);
-console.log(placeholder); // { width: 300, height: 300, format: "png" }
+const buffer = readFileSync("./public/cat.png");
+const metadata = await getImgMetadata(buffer);
+console.log(metadata); // { width: 300, height: 300, format: "png" }
 ```

docs/api/bun.md

@@ -1,6 +1,6 @@
 # openimg/react
 
-openimg-react (Open Image React) provides an `Image` component (aliased as `Img`) for querying optimized images from an image optimization endpoint (e.g., openimg/node) and a context provider `OpenImgContextProvider` for global configuration options. The `Image` component renders an HTML picture element utilizing modern HTML attributes and best practices.
+openimg/react (Open Image React) provides an `Image` component (aliased as `Img`) for querying optimized images from an image optimization endpoint (e.g., openimg/node or openimg/bun) and a context provider `OpenImgContextProvider` for global configuration options. The `Image` component renders an HTML picture element utilizing modern HTML attributes and best practices.
 
 ## Features
 
@@ -14,20 +14,14 @@ openimg-react (Open Image React) provides an `Image` component (aliased as `Img`
 
 ## Installation
 
-The code is available via `openimg/react` and `openimg-react`. For most use cases, you probably want to install `openimg`:
+The code is available via `openimg/react`:
 
 ```bash
 npm i sharp openimg
 ```
 
 Note, `sharp` is only needed if you want to use the server-side functionality.
 
-If you only want to use the React utilities, you can also install `openimg-react` independently:
-
-```bash
-npm i openimg-react
-```
-
 ## API
 
 Import the `Img`/`Image` component from `openimg/react`:

docs/api/node.md

@@ -1,5 +1,15 @@
 # Changelog
 
+# 0.7.0
+
+- Remove `openimg-node`, `openimg-bun`, and `openimg-react` duplicate packages.
+
+## openimg/node & openimg/bun
+
+- Add support for `getImgSource` to return `type` `"data"` with a `data` property that contains the image data as a buffer or stream.
+- `getImgPlaceholder` now supports passing in a `ReadableStream`.
+- `getImgMetadata` now supports passing in a `ReadableStream`.
+
 # 0.6.0
 
 ## openimg/node & openimg/bun

docs/api/react.md

@@ -1,6 +1,6 @@
 {
   "name": "openimg",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "homepage": "https://github.com/andrelandgraf/openimg",
   "repository": {
     "type": "git",