Vite Plugin

The hyperfixi Vite plugin scans your source files, detects which hyperscript commands you use, and generates a minimal bundle automatically. No manual bundle selection needed.

Setup

npm install @hyperfixi/core @hyperfixi/vite-plugin

// vite.config.js
import { hyperfixi } from '@hyperfixi/vite-plugin';

export default {
  plugins: [hyperfixi()]
};

// main.js
import 'hyperfixi';

That's it. The plugin handles the rest.

How It Works

  1. Scan — The plugin scans your HTML, JSX, Vue, and Svelte files for _="..." attributes
  2. Detect — It identifies which hyperscript commands are used (e.g., toggle, fetch, if)
  3. Bundle — It generates a custom bundle containing only those commands plus their dependencies
  4. Serve — In dev mode, it hot-reloads when your hyperscript usage changes

Configuration

// vite.config.js
import { hyperfixi } from '@hyperfixi/vite-plugin';

export default {
  plugins: [
    hyperfixi({
      // Glob patterns to scan (default: all HTML-like files in src/)
      include: ['src/**/*.html', 'src/**/*.vue'],

      // Patterns to exclude
      exclude: ['node_modules/**'],

      // Force specific commands to always be included
      commands: ['toggle', 'fetch'],

      // Enable verbose logging during build
      verbose: false,
    })
  ]
};

Options

Option Type Default Description
include string[] ['**/*.html', '**/*.vue', '**/*.jsx', '**/*.svelte'] File patterns to scan for hyperscript usage
exclude string[] ['node_modules/**'] File patterns to ignore
commands string[] [] Commands to always include regardless of detection
verbose boolean false Log detected commands and bundle contents

Custom Bundles

For cases where the automatic scanner doesn't detect all commands (e.g., dynamically generated hyperscript), force-include them:

hyperfixi({
  commands: ['transition', 'settle']
})

Or if you need full control, skip the plugin and import commands directly:

import { runtime } from '@hyperfixi/core';
import { toggle } from '@hyperfixi/core/commands/toggle';
import { fetch } from '@hyperfixi/core/commands/fetch';

runtime.register(toggle, fetch);
runtime.processNode(document.body);

Framework Integration

Vue

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { hyperfixi } from '@hyperfixi/vite-plugin';

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

Svelte

// vite.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { hyperfixi } from '@hyperfixi/vite-plugin';

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

Next Steps

Edit this page on GitHub