phaserquick vite plugins

Overview

A collection of useful vite plugins for Phaser development. Checkout the main phaserquick repo for more easy to use packages.

• 1. Build Information
  • 1.1. Usage
    • 1.1.1. Installation
    • 1.1.2. Example vite.config.ts
    • 1.1.3. Example Application Usage
    • 1.1.4. Version Schema
    • 1.1.5. Typings
  • 1.2. Options
    • 1.2.1. Dependencies
      • 1.2.1.1. Example vite.config.ts
    • 1.2.2. Example Application Usage

1. Build Information

This plugin provides additional build information an embeds this into the index.html making it available at window.version.

1.1. Usage

1.1.1. Installation

npm i @phaserquick/vite-plugins

1.1.2. Example vite.config.ts

import { getBuildInfo } from '@phaserquick/vite-plugins';

export default {
  //...
  plugins: [getBuildInfo()]
};

1.1.3. Example Application Usage

const version = window.version;

console.log(version.buildTimestamp); // "2024-03-16T03:04:24.382Z"
console.log(version.commit); // "c986ef6f" or undefined if not using source control

1.1.4. Version Schema

{
  // Version related information for this game.
  version: {
    // Timestamp of the build for version tracking.
    buildTimestamp: string;
    // Optional commit hash associated with the build.
    commit?: string | null;
    // Dependencies used in the application, stored as key-value pairs.
    dependencies: {
      [key: string]: string;
    }
  }
}

1.1.5. Typings

If not using the phaserquick boilerplate, you can configure the below typings for the window object to utilise autocomplete within TypeScript.

//global.d.ts
declare global {
  interface Window {
    // Version related information for this game.
    version: {
      // Timestamp of the build for version tracking.
      buildTimestamp: string;
      // Optional commit hash associated with the build.
      commit?: string | null;
      // Dependencies used in the application, stored as key-value pairs.
      dependencies: {
        [key: string]: string;
      };
    };
  }
}

1.2. Options

1.2.1. Dependencies

Passing dependencies to the build information options will include a list of dependencies on the version object. Useful to show you what dependencies are part of the build.

1.2.1.1. Example vite.config.ts

export default {
  //...
  plugins: [getBuildInfo({ dependencies: 'my-package' })]
};

1.2.2. Example Application Usage

const version = window.version;

console.log(version.dependencies); // {"my-package": "3.00.0"}