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 🙏

© 2025 – Pkg Stats / Ryan Hefner

svbuild

v2.1.0

Published

A simple tool that builds your svelte files without bundling them.

Readme

svbuild (beta)

A simple tool that builds your svelte files without bundling them.

Why

Sometimes, bundlers are a bit too much. They have a lot of configuration and the output they produce is sometimes unnecessary. For example, when you're building an embedded application in CEF or in Electron, you know for a fact that the latest js features are supported. This is a tool that will build your dependencies for svelte and produce browser-friendly imports: import { onMount } from "svelte" becomes import { onMount } from "../modules/svelte/index.mjs".

This tool is not for making websites. For that, use SvelteKit or a bundler.

Getting started

  • Install svbuild globally by running npm i svbuild -g or locally: npm i svbuild -D

  • Create a folder with two subfolders: /src and /out.

  • In the root of this folder place a package.json with "type": "module".

  • In the root also create a file called svbuild.config.js. What to write in it is explained below.

  • Write your svelte code in the src dir.

  • Run svbuild.

  • Enjoy.

Configuration

All configuration is in the svbuild.config.js.

This is the type for the config file:

export type Config = {
  /** Path to source directory with svelte code */
  src: string,
  /** Path to output directory */
  out: string,
  /** Svelte compiler options */
  compilerOptions?: {
    /** Whether to generate code with ES6 imports and exports. Note that svbuild doesn't provide a `require()` funtion! */
    esm?: boolean,
    /** Developer mode */
    dev?: boolean,
    /** Path to the svelte module. Ignored if `moduleOptions.buildSvelte` is `true` */
    sveltePath?: string,
    /** Whether to set accessors on components' states */
    accessors?: boolean,
    /** Tells the compiler that you promise not to mutate any objects. This allows it to be less conservative about checking whether values have changed. */
    immutable?: boolean,
    /** A number that tells Svelte to break the loop if it blocks the thread for more than `loopGuardTimeout` ms. This is useful to prevent infinite loops. Only available when `dev: true` */
    loopGuardTimeout?: number
  },
  /** Preprocessors allow for integration of different languages and features into svelte. */
  preprocess?: PreprocessorGroup | PreprocessorGroup[]
  /** Options for the module resolver. This **must not** be defined if `compilerOptions.esm` is `false` */
  moduleOptions?: {
    /** The folder where the compiled modules are or will be built to.
     * > Note: this path is relative to the `out` directory */
    root?: string
    /** Whether svbuild should build all the dependencies */
    buildModules?: boolean
    /** Path to the folder, from which the dependencies are taken from. Default is `"node_modules"`
     * @default "node_modules" */
    modulesSrc?: string
    /** Whether svbuild should build svelte like a regular dependency */
    buildSvelte?: boolean
    /** Whether svbuild should preprocess module code. Can be either set to boolean, or to an object with module names as keys. */
    usePreprocessorsWithModules?: boolean | {
      [moduleName: string]: string
    }
    /** The preferred type of the `exports` field. Is usually `"browser"`, but can be set to anything else if that's causing problems */
    preferredResolutionType?: {
      [moduleName: string]: string
    }
  }
}

An example config file looks like this:

/**
 * @type {import('svbuild/types').Config}
 */
const config = {
  src: './svelte',
  out: './out',
  compilerOptions: {
    esm: true,
    dev: true
  },
  moduleOptions: {
    root: 'modules',
    buildModules: true,
    buildSvelte: true,
    modulesSrc: 'node_modules'
  }
}

export default config

CLI tool

This is how to use the svbuild tool

svbuild

  • -c, --config <path> - Path to the configuration file (default: ./svbuild.config.js)

  • -v, --verbose - Log internal information

  • -w, --watch - Watch the src directory for changes.

  • -B, --no-build - Don't build the project at first, only works with --watch

Limitations

Currently, svbuild doesn't support source maps. This will probably be implemented in a next major version.

Also note that svbuild is still in beta so it can include bugs. Please report all issues on Github.