# @ws-serenity/html-vite-plugin

> Можно добавить сюда uglify. Который будет удалять `\n\r` и комменты

Latest version **0.0.1** (published 2023-03-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install @ws-serenity/html-vite-plugin
pnpm add @ws-serenity/html-vite-plugin
yarn add @ws-serenity/html-vite-plugin
bun add @ws-serenity/html-vite-plugin
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2023-03-09 |
| First published | 2023-03-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ra.vi.an, gransly, d.duda, blablaprincess, a.manakina, f.ishchenko |

## Links

- npm: https://www.npmjs.com/package/@ws-serenity/html-vite-plugin
- npm.io page: https://npm.io/package/@ws-serenity/html-vite-plugin

## Recent versions

- 0.0.1 (latest) — 2023-03-09

## README

## Перспектива

Можно добавить сюда uglify. Который будет удалять `\n\r` и комменты

## About

Выполняет замену env-переменных в index.html. Умеет по условию добавлять теги.
Замена происходит по всему `document` (и в `<head>` и `<body>`)

**Input**

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
        <title>Title</title>
        <!--Просто вставит строковое значение из конфига-->
        <script src="%REACT_APP_CONFIG%"></script>
        <!--С помощью аттрибута "vite-if" можем определять теги, которые должны быть добавлены или удалены в зависимости от env-переменной-->
        <script async type="module" vite-if="%VITE_ENABLE_METRICS%">
            console.log('Меня не будет в разметке');
        </script>
    </head>
    <body>
        <div id="root">
            <!--Неизвестные env-переменные будут также удалены-->
            <div vite-if="%UNKNOWN_ENV%">
                Меня не будет в разметке
            </div>
            <!--Пустые условия также удаляются-->
            <div vite-if="">
                И меня тоже не будет
            </div>
            <!--Можно использовать отрицание перед внедрением переменной-->
            <div vite-if="!%VITE_DISABLE_SMTH%">
                А вот я буду
            </div>
        </div>
        <script src="./src/index.tsx" type="module"></script>
    </body>
</html>
```

**Output**

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
        <title>Title</title>
        <!--Внедренная переменная из env.REACT_APP_CONFIG-->
        <script src="./config"></script>
    </head>
    <body>
        <div id="root">
            <!--Теги, не соответствующие условиям были удалены-->
            <div vite-if="!false">
                А вот я буду
            </div>
        </div>
        <script src="./src/index.tsx" type="module"></script>
    </body>
</html>
```

## Разрешения и ограничения

**Можно**

- менять аттрибут-условие (дефолт `vite-if`)
- менять экранирование env-переменных, который должны быть заменены (дефолт `%`)

**Нельзя**
- использовать двойное отрицание (нет обработки `[vite-if]="!!ENV"`)
- использовать в условии env-переменные, не являющиеся `true` или `false`

**Ограничение**
- Не выполняется удаление комментариев (возможно, пока что)
- Не выполняется удаление пробельных символов (возможно, пока что)

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