Plugins

Bundler

The plugin Bundler is disabled by default so to enable it you have to import and use it in the _config.js file:

import bundler from "lume/plugins/bundler.ts";

site.use(bundler());

It process your Javascript and Typescript files using the bundler provided by Deno.

This plugin works differently depending on the configuration. The available options are:

By default it loads all .js and .ts files and transpile the Typescript to Javascript. To use TSX or JSX, change the file extensions:

site.use(bundler({
  extensions: [".tsx", ".ts"], // Transpile all .tsx and .ts files to typescript
}));

If you want to bundle the code and generate only one file, you must do the following:

  1. Load only the main files that you want to bundle. These files must be visible by Lume but not their imports. You can use site.ignore() to ignore the other files or save them in a subfolder starting with _ (for example: _components).
  2. Configure the plugin to bundle the code:
site.use(bundler({
  extensions: [".tsx", ".ts"], // Transpile all .tsx and .ts files to typescript
  options: {
    bundle: "module", // Include all dependencies in the files
  },
}));

Typescript for the browser

When bundling .ts files to run in the browser, use a triple slash reference to include helpful libraries, like dom in your scripts. For example,

/// <reference lib="dom" />

document.getElementById("foo");

This will help Deno and your code editor to Bundle into JS appropriately.