Skip to content
This repository has been archived by the owner on Jul 28, 2024. It is now read-only.

Feat: add imageLoader plugin. #41

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions plugin/imageLoader/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
# denopack/plugin/imageLoader

This plugin allows you to import JPG, PNG, GIF, SVG, and WebP files.

## Options

### `dom`

Type: `Boolean`<br>
Default: `false`

If `true`, instructs the plugin to generate an ES Module which exports a DOM `Image` which can be used with a browser's DOM. Otherwise, the plugin generates an ES Module which exports a `default const` containing the Base64 representation of the image.

Using this option set to `true`, the export can be used as such:

```js
import logo from './rollup.png';
document.body.appendChild(logo);
```

### `exclude`

Type: `String` | `Array[...String]`<br>
Default: `null`

A [minimatch pattern](https://github.com/isaacs/minimatch), or array of patterns, which specifies the files in the build the plugin should _ignore_. By default no files are ignored.

### `include`

Type: `String` | `Array[...String]`<br>
Default: `null`

A [minimatch pattern](https://github.com/isaacs/minimatch), or array of patterns, which specifies the files in the build the plugin should operate on. By default all files are targeted.

## Attribution

This plugin is a Deno rewrite of [@rollup/plugin-image](https://github.com/rollup/plugins/tree/master/packages/image).

## Usage

```ts
import { pluginImageLoader as image } from "https://deno.land/x/[email protected]/plugin/imageLoader/mod.ts";

export default {
plugins: [image()],
};
```
1 change: 1 addition & 0 deletions plugin/imageLoader/deps.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as svgToMiniDataURI } from "https://esm.sh/mini-svg-data-uri";
5 changes: 5 additions & 0 deletions plugin/imageLoader/lock.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"https://cdn.esm.sh/v9/[email protected]/esnext/mini-svg-data-uri.js": "ec4c1dca1595bd346d96d5e14a663de36c77ea0c5ccc5a905e4d008f47c94c92",
"https://cdn.esm.sh/v9/[email protected]/index.d.ts": "8d95dbb5f2d1730f766e3672c7140601ff5bc9d54613a77a10b5fe63e46c00f0",
"https://esm.sh/mini-svg-data-uri": "c639270c03579e50ad6daf38a29a94496684b96947e23a897038a40e901625bf"
}
92 changes: 92 additions & 0 deletions plugin/imageLoader/mod.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import { path, Plugin } from "../../deps.ts";
import { createFilter } from "../deps.ts";
import { svgToMiniDataURI } from "./deps.ts";

const defaults = {
dom: false,
exclude: null,
include: null,
};

interface mimeTypesInterface {
".jpg": string;
".jpeg": string;
".png": string;
".gif": string;
".svg": string;
".webp": string;
[key: string]: string;
}

const mimeTypes: mimeTypesInterface = {
".jpg": "image/jpeg",
".jpeg": "image/jpeg",
".png": "image/png",
".gif": "image/gif",
".svg": "image/svg+xml",
".webp": "image/webp",
};

const domTemplate = ({ dataUri }: { dataUri: string }) =>
`
const img = new Image();
img.src = "${dataUri}";
export default img;
`;

const constTemplate = ({ dataUri }: { dataUri: string }) =>
`
const img = "${dataUri}";
export default img;
`;

type Opts = {
dom?: boolean;
exclude?: string | string[];
include?: string | string[];
};

const getDataUri = (
{ format, isSvg, mime, source }: {
format: string;
isSvg: boolean;
mime: string;
source: string;
},
) => isSvg ? svgToMiniDataURI(source) : `data:${mime};${format},${source}`;

export function pluginImageLoader(opts: Opts = {}): Plugin {
const options = Object.assign({}, defaults, opts) as Opts;
const filter = createFilter(options.include, options.exclude);

return {
name: "denopack-plugin-imageLoader",
async load(id) {
if (!filter(id)) {
return null;
}

const mime = mimeTypes[path.extname(id)];
if (!mime) {
// not an image
return null;
}

const isSvg = mime === mimeTypes[".svg"];
const format = isSvg ? "utf-8" : "base64";
const decoder = new TextDecoder("utf-8");
const data = await Deno.readFile(new URL(id));
const source = decoder.decode(data).replace(
/[\r\n]+/gm,
"",
);
const dataUri = getDataUri({ format, isSvg, mime, source });
const code = options.dom
? domTemplate({ dataUri })
: constTemplate({ dataUri });
return code.trim();
},
};
}

export default pluginImageLoader;
1 change: 1 addition & 0 deletions plugin/mod.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export { pluginCacheLoader } from "./cacheLoader/mod.ts";
export type { Opts as CacheLoaderOptions } from "./cacheLoader/mod.ts";
export { pluginFileLoader } from "./fileLoader/mod.ts";
export type { Opts as FileLoaderOptions } from "./fileLoader/mod.ts";
export * from "./imageLoader/mod.ts";
export * from "./terserTransform/mod.ts";
export * from "./typescriptTransform/mod.ts";
export * from "./typescriptCompile/mod.ts";
Expand Down