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

js13k-vite-plugins

v0.3.4

Published

Collection of [Vite](https://vitejs.dev/) plugins and utilities for [js13k games](https://js13kgames.com/).

Downloads

33

Readme

js13k-vite-plugins

Collection of Vite plugins and utilities for js13k games.

Included tools:

Example project: https://github.com/codyebberson/js13k-starter

Table of Contents

Getting Started

From Template

Go to the js13k-starter repository and click "Use this template" to create a new repository with the same files and folders as the template.

Clone the new repository and install the dependencies:

git clone [email protected]:your-username/js13k-starter.git
cd js13k-starter
npm install

Then run the development server:

npm run dev

From Scratch

First, setup a new Vite project: https://vitejs.dev/guide/#scaffolding-your-first-vite-project

npm create vite@latest

Next, add js13k-vite-plugins:

npm install --save-dev js13k-vite-plugins

Then update your Vite configuration as needed. See below for example Vite configurations.

Example Configurations

Example vite.config.ts files

Use All Recommendations

Use js13kViteConfig() for a quick and easy default configuration (recommended).

// vite.config.ts

import { js13kViteConfig } from "js13k-vite-plugins";
import { defineConfig } from "vite";

export default defineConfig(js13kViteConfig());

Disable Plugins

Some plugins can be disabled individually by passing false for the options.

  • Disable Roadroller by passing roadrollerOptions: false
  • Disable Advzip by passing advzipOptions: false

For example, disable Roadroller:

// vite.config.ts

import { js13kViteConfig } from "js13k-vite-plugins";
import { defineConfig } from "vite";

export default defineConfig(
  js13kViteConfig({
    roadrollerOptions: false,
  })
);

Override Specific Settings

Pass in options to configure specific plugins.

For example, change the Advzip shrink level to "fast" (from default "insane").

// vite.config.ts

import { js13kViteConfig } from "js13k-vite-plugins";
import { defineConfig } from "vite";

export default defineConfig(
  js13kViteConfig({
    advzipOptions: {
      shrinkLevel: "fast",
    },
  })
);

Use Plugins Individually

Use the individual plugins for more control over the build.

// vite.config.ts

import {
  advzipPlugin,
  ectPlugin,
  getDefaultViteBuildOptions,
  roadrollerPlugin,
} from "js13k-vite-plugins";
import { defineConfig } from "vite";

export default defineConfig({
  build: getDefaultViteBuildOptions(),
  plugins: [roadrollerPlugin(), ectPlugin(), advzipPlugin()],
});

Options

The top level options is a collection of options for the various sub-plugins.

export interface JS13KOptions {
  viteOptions?: BuildOptions;
  terserOptions?: Terser.MinifyOptions;
  rollupOptions?: RollupOptions;
  htmlMinifyOptions?: HtmlMinifyOptions;
  roadrollerOptions?: RoadrollerOptions;
  ectOptions?: EctOptions;
  advzipOptions?: AdvzipOptions;
}

Vite Options

Base package: vite

Full Vite documentation: https://vitejs.dev/config/build-options.html

Default options:

/**
 * Returns recommended Vite build options for a JS13K game.
 *
 * Features:
 * - Targets ESNext
 * - Minifies with Terser
 * - Disables CSS code splitting
 * - Disables Vite polyfills
 * - Uses recommended Terser options
 * - Uses recommended Rollup options
 *
 * @returns The recommended Vite build options.
 */
export const defaultViteBuildOptions: BuildOptions = {
  target: "esnext",
  minify: "terser",
  cssCodeSplit: false,
  modulePreload: {
    polyfill: false, // Don't add vite polyfills
  },
  terserOptions: defaultTerserOptions,
  rollupOptions: defaultRollupOptions,
};

Terser Options

Base package: terser

Full Terser documentation: https://terser.org/docs/options/

Default options:

/**
 * Returns recommended Terser options for a JS13K game.
 *
 * Features:
 * - Targets ESNext
 * - Enables all unsafe options
 * - Enables all passes
 * - Enables all mangles
 */
export const defaultTerserOptions: Terser.MinifyOptions = {
  compress: {
    ecma: 2020 as ECMA,
    module: true,
    passes: 3,
    unsafe_arrows: true,
    unsafe_comps: true,
    unsafe_math: true,
    unsafe_methods: true,
    unsafe_proto: true,
  },
  mangle: {
    module: true,
    toplevel: true,
  },
  format: {
    comments: false,
    ecma: 2020 as ECMA,
  },
  module: true,
  toplevel: true,
};

Rollup Options

Base package: rollup

Full Rollup documentation: https://rollupjs.org/configuration-options/

Default options:

/**
 * Returns recommended Rollup options for a JS13K game.
 *
 * Features:
 * - Enables inline dynamic imports
 *
 * @returns The recommended Rollup options.
 */
export const defaultRollupOptions: RollupOptions = {
  output: {
    inlineDynamicImports: true,
    manualChunks: undefined,
  },
};

HTML Minify Options

Base package: html-minifier-terser

Full HTML Minify documentation: https://github.com/terser/html-minifier-terser

Default options:

export const defaultHtmlMinifyOptions: HtmlMinifyOptions = {
  includeAutoGeneratedTags: true,
  removeAttributeQuotes: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  sortClassName: true,
  useShortDoctype: true,
  collapseWhitespace: true,
  collapseInlineTagWhitespace: true,
  removeEmptyAttributes: true,
  removeOptionalTags: true,
  sortAttributes: true,
};

Imagemin Options

Base package: imagemin

| params | type | default | default | | -------- | ------------------------------------- | ------- | ------------------------------------------------------------ | | verbose | boolean | true | Whether to output the compressed result in the console | | filter | RegExp or (file: string) => boolean | - | Specify which resources are not compressed | | disable | boolean | false | Whether to disable | | svgo | object or false | - | See Options | | gifsicle | object or false | - | See Options | | mozjpeg | object or false | - | See Options | | optipng | object or false | - | See Options | | pngquant | object or false | - | See Options | | webp | object or false | - | See Options |

Roadroller Options

Base package: roadroller

Full Roadroller documentation: https://lifthrasiir.github.io/roadroller/

This plugin uses the Roadroller defaults.

ECT Options

Base package: ect-bin

ECT documentation: https://github.com/fhanau/Efficient-Compression-Tool/blob/master/doc/Manual.docx (Google Docs)

export interface EctOptions {
  /**
   * Show no report when program is finished; print only warnings and errors.
   */
  quiet?: boolean;

  /**
   * Select compression level [1-9] (ECT default: 3, JS13k default: 10009).
   *
   * For detailed information on performance read Performance.html.
   *
   * Advanced usage:
   * A different syntax may be used to achieve even more compression for deflate compression
   * if time (and efficiency) is not a concern.
   * If the value is above 10000, the blocksplitting-compression cycle is repeated # / 10000 times.
   * If # % 10000 is above 9, level 9 is used and the number of iterations of deflate compression
   * per block is set to # % 10000. If # % 10000 is 9 or below, this number specifies the level.
   */
  level?: number;

  /**
   * Discard metadata. (default true).
   */
  strip?: boolean;

  /**
   * Keep the file modification time. (default false).
   */
  keep?: boolean;

  /**
   * Enable strict losslessness. Without this, image data under fully transparent pixels can be
   * modified to increase compression. This data is normally invisible and not needed.
   * However, you may want to use this option if you are still going to edit the image.
   *
   * Also preserves rarely used GZIP metadata.
   *
   * (default false).
   */
  strict?: boolean;
}

Default options:

/**
 * Default Efficient Compression Tool (ECT) options.
 *
 * Level 10009 is the recommended value for JS13k games. This will be slow but will produce the smallest file size.
 *
 * Strip is true by default because metadata is not needed for JS13k games.
 */
export const defaultEctOptions: EctOptions = {
  level: 10009,
  strip: true,
};

Advzip Options

Base package: advzip-bin

Full Advzip documentation: https://linux.die.net/man/1/advzip

TypeScript interface:

export interface AdvzipOptions {
  pedantic?: boolean;
  shrinkLevel?:
    | 0
    | 1
    | 2
    | 3
    | 4
    | "store"
    | "fast"
    | "normal"
    | "extra"
    | "insane";
}

Default options:

export const defaultAdvzipOptions: AdvzipOptions = {
  shrinkLevel: "insane",
};

Acknowledgements

Kang Seonghoon for Roadroller

Rob Louie for Roadroller configuration recommendations

Salvatore Previti for Terser configuration recommendations

License

MIT