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 🙏

© 2024 – Pkg Stats / Ryan Hefner

rollup-plugin-proxy-dynamic-import

v0.1.9

Published

Bundle static imported bindings from modules which will be dynamically imported somewhere, and treeshake those static imported bindings from the dynamic imported modules

Downloads

3

Readme

rollup-plugin-proxy-dynamic-import

npm version ci

Bundle static imported bindings from modules which will be dynamically imported somewhere, and treeshake those static imported bindings from the dynamic imported modules

Note

This plugin is only used in build time.

pnpm add rollup-plugin-proxy-dynamic-import -D

In a nutshell, this plugin does this (using SvelteKit naming conventions as an example):

// +page.js

// This exported `route_config` will get
// bundled into router.js and treeshake out
// from this module after build.
export const route_config = {
	path: '/',
	component: () => import('./comp.vue'),
	meta: {
		service: () => import('./+page.js'),
	},
};

export function load() {
	// omitted for example
	return { a: 1 };
}

export const actions = {
	default() {
		// omitted for example
		throw redirect('/user/123');
	},
};
// router.js
import { route_config } from './+page.js';

export const router = createRouter({
	routes: [route_config],
});
// _page-[hash].js

// Notice that there is no `route_config`
export function load() {
	// omitted for example
	return { a: 1 };
}

export const actions = {
	default() {
		// omitted for example
		throw redirect('/user/123');
	},
};
// router-[hash].js

// Hey, I got bundled into router.js
const route_config = {
	path: '/',
	component: () => import('./comp-[hash].vue'),
	meta: {
		service: () => import('./_page-[hash].js'),
	},
};

export const router = createRouter({
	routes: [route_config],
});

Motivation

In the past, before file system based routing, we configure the routes in the giant route file. Later, there has been many improvements / ideas in the modern web development, namely file based routing, and then Remix Route Module, and now SvelteKit and Next.js directory based routing.

Personally, I prefer config based routing to FS based one, but I am not eager to define every route in a giant route file. At the same time, I track SvelteKit development, and saw their directory based routing proposal. It gives you the structure for co-locating data loading code, view code, and the rest. Since SvelteKit routing is FS based, they don't need another file for routing. But for config based routing, what is the best place to define routing? In +routing.js (taken from Angular naming convention) ?

If possible, I would like to define them in +page.js and +layout.js and import them in router file with Vite's import.meta.glob. That way, the app will still work even if you delete one route. However, in JavaScript, when you import a module, you get a module even without using every exports (which hurt the purpose of using dynamic import for lazy loading).

What if we could separate the static imported bindings into another module and the rest in the original module at build time? This way, we could still be able to import static bindings and get the benefit of lazy loading. This plugin does that for you. Without further ado, let's use it.

Usage

This plugin works in both Rollup and Vite setup.

// rollup.config.js / vite.config.js
import { proxy_dynamic_import } from 'rollup-plugin-proxy-dynamic-import';

export default {
	plugins: [proxy_dynamic_import(opts)],
};

ProxyDynamicImportOptions

export interface ProxyDynamicImportOptions {
	/**
	 * `include` argument of {@link createFilter}.
	 */
	include: FilterPattern;
	/**
	 * `exclude` argument of {@link createFilter}.
	 */
	exclude?: FilterPattern;
	/**
	 * This option is required to be defined to treeshake only used exports in
	 * dynamic imports. This plugin creates facade modules to re-export used bindings
	 * so that Rollup can treeshake ununsed ones. This is a workaround until Rollup
	 * can treeshake dynamic imports OOTB.
	 *
	 * https://github.com/rollup/rollup/issues/3447
	 *
	 * Export names to re-export. Use `*` to re-export all, not that it does not
	 * re-export `default` export.
	 */
	reexports?: string[] | '*';
	/**
	 * List of file extensions to resolve for imports that omit extensions.
	 *
	 * When used as a Vite plugin, it takes `resolve.extensions` instead of given
	 * value without `.json`.
	 *
	 * When used as a Rollup plugin, its default is
	 * `['.js'. '.ts', '.jsx', '.tsx', '.mjs']`.
	 */
	extensions?: string[];
}

Contributing

Use snake_case everywhere, the rest is handled by Prettier.

  • Install deps:

    pnpm i
  • Format Code

    pnpm fmt
  • Lint

    pnpm lint
  • Typecheck

    pnpm tsc
  • Test

    pnpm run test

Changelog

CHANGELOG.md

License

MIT