# @honeyjs/vite-loader

> A vite plugin to load various files, like png, svg, etc. As native html elements, or h functions

Latest version **0.2.3** (published 2023-11-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @honeyjs/vite-loader
pnpm add @honeyjs/vite-loader
yarn add @honeyjs/vite-loader
bun add @honeyjs/vite-loader
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2023-11-12 |
| First published | 2023-10-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Codefoxdev |
| Maintainers | codefoxdev |
| Keywords | vite-plugin, svg, components |

## Links

- npm: https://www.npmjs.com/package/@honeyjs/vite-loader
- Repository: https://github.com/CodeFoxDev/honeyjs-vite-loader
- Homepage: https://github.com/codefoxdev/honeyjs-vite-loader#readme
- Issues: https://github.com/codefoxdev/honeyjs-vite-loader/issues
- npm.io page: https://npm.io/package/@honeyjs/vite-loader

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.2.3 (latest) — 2023-11-12
- 0.2.2 — 2023-10-17
- 0.2.1 — 2023-10-17
- 0.2.0 — 2023-10-16
- 0.1.3 — 2023-10-16
- 0.1.2 — 2023-10-16
- 0.1.1 — 2023-10-16
- 0.1.0 — 2023-10-16

## README

# Vite loader

`@honeyjs/vite-loader` is a usefull vite plugin that improves the developer experience when working with assets, see [usage](#usage) for info on how to use it.
Although this package doesn't require `@honeyjs/core`, it is still listed as it integrates with its reactivity system, feel free to contact me or create an issue on github if you also want it to integrate with other frameworks.

## configuration

```js
import { defineConfig } from "vite";
import loader from "@honeyjs/vite-loader";

export default defineConfig({
  plugins: [
    loader({
      /* options */
    }),
  ],
});
```

```ts
loader({
  defaultResult: "h" | "html", // Changes what the default import results in, h returns a normal h function and html returns a native html element, defaults to html
  useBase64: boolean, // Toggles the usage of base64 with images like png, defaults to true
  jsxInject: string, // Define what to inject when returning a h function, defaults to the esbuild.jsxInject parameter in the config file
  jsxFactory: string, // Defines the jsx factory function to use, defaults to the esbuild.jsxFactory parameter in the config file
  jsxFragment: string, // Defines the jsx fragment function to use, defaults to the esbuild.jsxFragment parameter in the config file
});
```

The `defaultResult` is by default html, which means importing an assets like this

```jsx
import Logo from "../assets/logo.png";
```

is the same as this

```jsx
import Logo from "../assets/logo.png?html";
```

The reason why `useBase64` defaults to true is because this has the advantage that it will be loaded instantly,
although this does result in a larger import size, it will still seem faster to the end-user.

For more info about the jsx related parameters, refer to [vite's jsx documentation](https://vitejs.dev/guide/features.html#jsx).

## usage

When using vite's builtin assets loader, you get the url to the loaded assets, which you than can use in your jsx, like this:

```jsx
import logoSrc from "../assets/logo.png";

export function Topbar() {
  return (
    <nav>
      <div class="logo">
        <img src={logoSrc} alt="Logo" />
      </div>
      <div class="center">
        <h1>App title</h1>
      </div>
    </nav>
  );
}
```

but with this plugin you can just do this:

```jsx
import Logo from "../assets/logo.png";

export function Topbar() {
  return (
    <nav>
      <div class="logo">
        <Logo alt="Logo" />
      </div>
      <div class="center">
        <h1>App title</h1>
      </div>
    </nav>
  );
}
```

When the above image is loaded using the html option, it will look something like this.

```js
import { props as _p } from "@honeyjs/vite-loader/parsers";
export default function (p) {
  let e = document.createElement("img");
  e.src = `data:image/png;base64,...`;
  _p(e, p, ["children", "src"]);
  return e;
}
```

As you can see the image will be loaded as base64, this is default behaviour, but it can be changed in the [config](#config).

---
_Source: https://npm.io/package/@honeyjs/vite-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._