npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@ape-egg/vite-plugin-vibe

v0.0.2

Published

Vite plugin for Vibe — component HMR and raw HTML serving

Downloads

111

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

korteskortes

Keywords

vitevite-pluginvibehmrcomponents

Readme

@ape-egg/vite-plugin-vibe

⚠️ Early alpha — subject to change. This plugin is a development-only HMR layer for Vibe. Vibe itself is still evolving, so achieving full 1-to-1 feature parity is a moving target — and not the priority right now.

Because the plugin only runs in development (it powers vite dev HMR and is never shipped to production), it is acceptable for it to have rough edges while Vibe stabilises. It updates alongside Vibe, will keep catching up to new runtime features, and will reach a stable release once the underlying framework settles.

Vite plugin for Vibe projects. Gives you hot refresh of components and pages without losing state — window.$ is untouched across edits.

Install

bun add -d @ape-egg/vite-plugin-vibe
# or
npm install -D @ape-egg/vite-plugin-vibe

Usage

// vite.config.js
import { defineConfig } from 'vite';
import vibe from '@ape-egg/vite-plugin-vibe';

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

That's it. bun dev / vite now serves your Vibe project with:

  • Component HMR — saving a file in components/ morphs the rendered component in place
  • Page HMR — saving an HTML page updates the <slot> content; the rest of the page stays mounted
  • Normal reload fallback — pages without Vibe (<slot> not present) reload normally

Options

vibe({
  components: 'components', // directory to serve raw + watch for HMR (default: 'components')
})

Requirements

  • Vite >= 5.0
  • @ape-egg/vibe >= 1.9.1 — the plugin relies on Vibe preserving <slot> in the processed DOM and on internal hooks (_vibeRawSource, _vibeIterPropIds) used for surgical HMR

How it works

Vibe fetches components at runtime via <component src="">. Vite's default HTML pipeline would inject its HMR client and rewrite <script type="module"> inside every HTML file it serves — which breaks Vibe's component processing.

This plugin:

  1. Serves component HTML raw through a middleware, bypassing Vite's HTML transform for files under your components directory.
  2. Watches component files and sends custom vibe:component-update events on change. The client injects a small runtime that replaces the rendered component's DOM in place — fetching the new template, executing any scripts if changed, and preserving the original slot content captured before initial hydration.
  3. Intercepts Vite's full-reload for HTML pages via handleHotUpdate. If Vibe is on the page (detected by presence of <slot>), the client fetches the new page HTML, extracts the content inside <component src>, and swaps the <slot> element's content. Vibe's MutationObserver re-hydrates bindings/conditionals/iterations naturally.

No server-state, no WebSocket churn, no user configuration of which files are pages vs components — the plugin watches components/ and lets Vite handle everything else.

Limitations

  • Components with slot content containing <script type="module"> that has changed require a full page reload (scripts can't be cleanly re-executed in place)
  • If a page file changes HTML outside the <component src="..."> wrapper (e.g., new <body> children), the plugin falls back to location.reload() automatically

License

ISC