Vite plugin for Blinko application using Vite and Preact

1.0.1 verified Mon Apr 27 auth: no javascript

A Vite plugin specifically designed for developing Blinko plugins. It integrates with Preact and automates the build configuration, validation of plugin.json, and output management. Current stable version 1.0.1, follows semantic versioning. Key differentiators: custom entry point, separate prod/dev output dirs, external dependency injection, and random filename generation for dev builds. Requires Vite ^4.0.0 and Preact preset.

Common errors

error Error: The plugin must be used with @preact/preset-vite. ↓

cause Missing Preact preset in Vite config.

fix

Install and add preact() before blinkoPlugin().

error Error: Cannot find module 'vite-plugin-blinko' ↓

cause Package not installed or in node_modules.

fix

Run 'npm install vite-plugin-blinko --save-dev'.

error TypeError: blinkoPlugin is not a function or function call is missing spread operator ↓

cause Forgetting to spread the returned array.

fix

Use ...blinkoPlugin() instead of blinkoPlugin as a single plugin.

Warnings

gotcha useRandomFilename defaults to true; random filenames can break asset caching in production. ↓

fix Set useRandomFilename: false in production builds.

gotcha The plugin returns an array, not a single object; must be spread with '...blinkoPlugin()'. ↓

fix Use ...blinkoPlugin() in the plugins array.

breaking In version 1.0.0, the default entry was 'src/index.tsx'; in 1.0.1 it changed to 'src/main.tsx'? The README shows 'src/main.tsx' as example but docs say 'src/index.tsx'. Check actual default. ↓

fix Explicitly set the entry option to avoid reliance on default.

Install

npm install vite-plugin-blinko

yarn add vite-plugin-blinko

pnpm add vite-plugin-blinko

Imports

default

wrong

const blinkoPlugin = require('vite-plugin-blinko')

correct

import blinkoPlugin from 'vite-plugin-blinko'

ESM-only import; CommonJS require will fail.

blinkoPlugin

wrong

import { blinkoPlugin } from 'vite-plugin-blinko'

correct

import blinkoPlugin from 'vite-plugin-blinko'

Default export; named import is incorrect.

type BlinkoPluginOptions

wrong

import { BlinkoPluginOptions } from 'vite-plugin-blinko'

correct

import type { BlinkoPluginOptions } from 'vite-plugin-blinko'

Use import type for TypeScript types to avoid runtime overhead.

Quickstart

Configures Vite with Preact and the Blinko plugin, customizing build outputs and externals.

// vite.config.ts
import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';
import blinkoPlugin from 'vite-plugin-blinko';

export default defineConfig({
  plugins: [
    preact(),
    ...blinkoPlugin({
      entry: 'src/main.tsx',
      prodOutDir: 'build',
      devOutDir: 'dev-build',
      pluginJsonPath: './plugin.json',
      externals: ['blinko', 'some-other-external'],
      useRandomFilename: false
    })
  ]
});