Vite Runtime

The Vite runtime creates a container for client-side TypeScript applications powered by Vite.

Installation

You can install the Vite runtime via NPM or Yarn.

npm install --save @injex/core @injex/vite

Usage

Create a container

Injex.create({ ... })

Creates a new Injex container.

import { Injex } from "@injex/vite";
Injex.create({
// Configurations
});

Returns a new Injex container instance.

note

An Injex container instance is the same on all runtimes. Check out the Container API for more info.

Configurations

You can config the Vite runtime using the following configurations.

glob

A function that returns a import map generated by the import.meta.glob() function.

Since Vite is not loading all the files in your project automatically, we need to tell Injex the pattern for our module file names.

  • Type: Function
  • Required: true

For example, to load all files with the .mdl.ts extension:

import { Injex } from "@injex/vite";
Injex.create({
glob: () => import.meta.glob('./**/*.mdl.ts', { eager: true })
});
  • Be sure to use the eager option or the files in the project will be splitted into many small chunks. You can read more about it here
caution

The arguments passed to import.meta.glob() must be a string literal!

logLevel

Controls Injex's internal logger log level

  • Type: LogLevel
  • default: LogLevel.Error
  • Required: false

logNamespace

Set Injex's logger log lines prefix

  • Type: string
  • default: Injex
  • Required: false

plugins

List of plugins to include with the container instance.

  • Type: Array
  • default: []
  • Required: false
Example

You can go to the vite example to see the Vite runtime in action.

Caveats

When optimizing your code using tools Vite (esbuild) to minify/uglify/mangle the code, it's essential to keep the ES class names as they are. Injex automatically registers modules by their class name. When you change the class name, Injex container won't work correctly.

You can pass the keepNames: true to esbuild options in your vite.config.js file.

Code splitting

If you want, you can use code-splitting with Injex. Refer to the @lazy() decorator documentation for more details.

Edit this page