Skip to content
@staticbolt/core

HTML Env Only Plugin

A plugin for staticbolt that removes HTML tags depending on the environment. Mark any tag with dev-only to keep it only during dev serve, or production-only to keep it only in the production build.

Installation

The plugin ships as part of @staticbolt/core. You do not need to install anything else.

Usage

In your .staticbolt.ts configuration file:

import { defineConfig } from "@staticbolt/core";
import { htmlEnvOnlyPlugin } from "@staticbolt/core/plugins";


export default defineConfig({
  plugins: [htmlEnvOnlyPlugin()],
});

Behavior

Add the dev-only attribute to any tag to have it removed at build time, or production-only to have it removed during dev serve. In the environment where a tag is kept, the marker attribute is stripped from the output.

<!-- Removed at build time, kept during dev serve -->
<script src="./debug-overlay.js" dev-only></script>


<!-- Removed during dev serve, kept at build time -->
<script src="./analytics.js" production-only></script>

Production build output:

<script src="./analytics.js"></script>

Dev serve output:

<script src="./debug-overlay.js"></script>

The attributes work on any HTML tag, not just <script>, and they apply to the whole tag, children included.

Tags are removed as soon as the page is loaded, before the pipeline follows what they reference. A dev-only script, style or image is never read, bundled or written in the production build, and the same holds for a production-only one during dev serve.

Plugin Options

devOnlyAttribute

  • Type: string
  • Default: "dev-only"

The attribute name that marks a tag as development-only (removed at build time).

productionOnlyAttribute

  • Type: string
  • Default: "production-only"

The attribute name that marks a tag as production-only (removed during dev serve).