{"id":22591,"library":"vite-plugin-blinko","title":"Vite plugin for Blinko application using Vite and Preact","description":"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.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vite","vite-plugin","blinko","typescript"],"install":[{"cmd":"npm install vite-plugin-blinko","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-blinko","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-blinko","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for plugin to work","package":"vite","optional":true}],"imports":[{"note":"ESM-only import; CommonJS require will fail.","wrong":"const blinkoPlugin = require('vite-plugin-blinko')","symbol":"default","correct":"import blinkoPlugin from 'vite-plugin-blinko'"},{"note":"Default export; named import is incorrect.","wrong":"import { blinkoPlugin } from 'vite-plugin-blinko'","symbol":"blinkoPlugin","correct":"import blinkoPlugin from 'vite-plugin-blinko'"},{"note":"Use import type for TypeScript types to avoid runtime overhead.","wrong":"import { BlinkoPluginOptions } from 'vite-plugin-blinko'","symbol":"type BlinkoPluginOptions","correct":"import type { BlinkoPluginOptions } from 'vite-plugin-blinko'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport preact from '@preact/preset-vite';\nimport blinkoPlugin from 'vite-plugin-blinko';\n\nexport default defineConfig({\n  plugins: [\n    preact(),\n    ...blinkoPlugin({\n      entry: 'src/main.tsx',\n      prodOutDir: 'build',\n      devOutDir: 'dev-build',\n      pluginJsonPath: './plugin.json',\n      externals: ['blinko', 'some-other-external'],\n      useRandomFilename: false\n    })\n  ]\n});","lang":"typescript","description":"Configures Vite with Preact and the Blinko plugin, customizing build outputs and externals."},"warnings":[{"fix":"Set useRandomFilename: false in production builds.","message":"useRandomFilename defaults to true; random filenames can break asset caching in production.","severity":"gotcha","affected_versions":"1.0.0"},{"fix":"Use ...blinkoPlugin() in the plugins array.","message":"The plugin returns an array, not a single object; must be spread with '...blinkoPlugin()'.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Explicitly set the entry option to avoid reliance on default.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Install and add preact() before blinkoPlugin().","cause":"Missing Preact preset in Vite config.","error":"Error: The plugin must be used with @preact/preset-vite."},{"fix":"Run 'npm install vite-plugin-blinko --save-dev'.","cause":"Package not installed or in node_modules.","error":"Error: Cannot find module 'vite-plugin-blinko'"},{"fix":"Use ...blinkoPlugin() instead of blinkoPlugin as a single plugin.","cause":"Forgetting to spread the returned array.","error":"TypeError: blinkoPlugin is not a function or function call is missing spread operator"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}