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

@collagejs/vite-im

v0.4.0

Published

Vite plug-in that injects an import map and @collagejs/imo to the project's HTML page

Readme

 Vite-IM Plug-in

Vite plug-in for CollageJS projects that automatically inserts import maps and the import map-overriding package @collagejs/imo for easy micro-frontend development.

Quickstart

  1. Create your micro-frontend root project in your preferred framework.
  2. Install the package:
    npm i -D @collagejs/vite-im
  3. Create your import map files, usually at least src/importMap.dev.json and src/importMap.json.
  4. Configure the plug-in. In vite.config.ts:
    import { defineConfig } from "vite";
    import { cjsImPlugin } from "@collagejs/vite-im";
    
    export default defineConfig({
        plugins: [
            cjsImPlugin()
        ],
        ...
    });

Enjoy! With the default settings, the plug-in:

  • Injects the import map defined in src/importMap.dev.json as an overridable import map during serve (npm run dev).
  • Injects the import map defined in src/importMap.json as an overridable import map during build (npm run build).
  • Injects the @collagejs/imo NPM package that takes care of overriding any import map entries as specified by the user/developer.
  • Injects the @collagejs/imo micro-frontend user interface to allow users/developers to manage import map overrides.
  • Injects the @collagejs/vite-aim plug-in for easy development. This plug-in receives the resulting import map in the web application and is used to automatically externalize anything in the import map.

Benefits

  1. A plug-in is the only way of making use of import maps during Vite development, since Vite injects a client script that runs before anything developers add to the <head> HTML element, making manual import map injection impossible.
  2. ✨We can import from micro-frontends statically! No more dynamic imports with /* @vite-ignore */ directives:
    import { myMfeFactory } from "@my/mfe"; //<-- where @my/mfe is only defined in the import map
  3. Externalizations are only added in the import map. No need to configure externalizations in Vite.

ℹ️ IMPORTANT: While static importation is in fact possible, TypeScript will complain. Create ambient modules for your micro-frontends to make TypeScript happy.