TS Compiler

text

bootscore/
├── assets/
│   └── ts
│   │   ├── index.ts // Collector for all Bootstrap files  
│   │   ├── bootstrap     
│   │   │   ├── alerts.ts  
│   │   │   ├── base-component.ts                
│   │   └── └── ...
│   └── js
└── └── └── bootscore.min.js  // Does not exists yet. Should be created on compiling the .ts source

How it works

If you edit one of the files in your child-theme folder /assets/ts/, the compiler fetches source from the parent theme (falling back automatically to the parent theme’s copy for any file that doesn’t exist in your child theme) and compiles it with your custom code to child-theme /assets/js/bootscore.min.js.

Compiling happens in your browser, so you need to trigger it yourself: click Recompile Once from the WordPress admin bar (TS Compiler menu) after making changes, or use Recompile Continuously while actively editing (see below). The one exception is right after activating a theme: if bootscore.min.js doesn’t exist yet, it’s compiled automatically the first time an administrator visits the frontend.

bootscore-custom.ts

Add your own JavaScript or TypeScript in bootscore-custom.ts. Because this file is compiled together with Bootstrap, you’re also able to import and use any Bootstrap component class alongside your own code.

You don’t need to write TypeScript — plain JavaScript works too, since TypeScript is a superset of JavaScript (any valid .js code is automatically valid .ts code). Use type annotations if you want them, or skip them entirely.

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const alertEl = document.querySelector('.alert')
  if (alertEl) {
    alertEl.addEventListener('closed.bs.alert', () => {
      console.log('Alert closed')
    })
  }
})

TypeScript

The same result as above using TypeScript syntax.

document.addEventListener('DOMContentLoaded', (): void => {
  const alertEl: HTMLElement | null = document.querySelector('.alert')
  if (alertEl) {
    alertEl.addEventListener('closed.bs.alert', (): void => {
      console.log('Alert closed')
    })
  }
})

bootscore.ts

This file collects all other .ts files and source from the parent theme. Add more using export. Create a file, place it in the same folder (or a subfolder, e.g. bootstrap/), and add an export line to bootscore.ts. Add as many files as you want, all scripts will be compiled to one single JS file.

/**
 * Collector for all .ts files
 *
 * @package Bootscore
 * @version 7.0.0
 */

// Bootstrap
export { default as Alert } from './bootstrap/alert.js'
export { default as Button } from './bootstrap/button.js'
export { default as Carousel } from './bootstrap/carousel.js'
export { default as Collapse } from './bootstrap/collapse.js'
export { default as Combobox } from './bootstrap/combobox.js'
export { default as Datepicker } from './bootstrap/datepicker.js'
export { default as Dialog } from './bootstrap/dialog.js'
export { default as Menu } from './bootstrap/menu.js'
export { default as NavOverflow } from './bootstrap/nav-overflow.js'
export { default as Drawer } from './bootstrap/drawer.js'
export { default as Strength } from './bootstrap/strength.js'
export { default as OtpInput } from './bootstrap/otp-input.js'
export { default as Chips } from './bootstrap/chips.js'
export { default as Popover } from './bootstrap/popover.js'
export { default as Range } from './bootstrap/range.js'
export { default as ScrollSpy } from './bootstrap/scrollspy.js'
export { default as Tab } from './bootstrap/tab.js'
export { default as Toast } from './bootstrap/toast.js'
export { default as Toggler } from './bootstrap/toggler.js'
export { default as Tooltip } from './bootstrap/tooltip.js'

// Bootscore
export { default as Bootscore } from './bootscore-scripts.js'
export { default as BootscoreCustom } from './bootscore-custom.js'

Note the .js extensions in these import paths even though the real files are .ts — this is standard TypeScript/ESM convention (TypeScript resolves .js specifiers to the sibling .ts file at compile time), not a typo.

Optimize

ToDo: List filesizes and explain how to shrink

Bootscore imports all Bootstrap components which results in a larger bootscore.min.js than necessary for most sites.

Where	Filesize
Bootstrap All components	ToDo
Bootscore – Theme Required for WordPress and the basic functionality	ToDo
Overall compiled `bootscore.min.js`	ToDo

Comment out any component export line in bootscore.ts for components you don’t use in your project — only imported components (and their own dependencies, such as Datepicker‘s use of vanilla-calendar-pro) get bundled at all, so removing a line removes its full weight from the compiled file, not just its own code.

// export { default as Datepicker } from './bootstrap/datepicker.js'

The Compiler

Bootscore compiles TypeScript to JavaScript directly in your browser, using esbuild (via its WebAssembly build, esbuild-wasm) instead of a Node-based build step. This bundles Bootstrap’s .ts source together with your own custom code and any third-party dependencies individual components need (e.g. vanilla-calendar-pro for Datepicker), fetched live from a CDN, into a single minified file.

Only administrators can trigger a compile, and only you see the compiling process — regular visitors never load the compiler or reach out to any external service. It works like this:

You click Recompile Once (or Recompile Continuously) from the TS Compiler menu in the WordPress admin bar.
Your browser loads esbuild-wasm from a CDN, fetches every .ts file your bootscore.ts needs (child theme first, automatically falling back to the parent theme for any file only the parent has), plus any third-party packages those files import, and bundles them together.
A status bar at the bottom shows progress and, once done, the resulting file size.
The compiled JavaScript is sent back to your site and saved as assets/js/bootscore.min.js — the same file every visitor’s browser then loads normally, no different from before.

Because compiling happens in your browser rather than on the server, you need to be online for it to work, and a full compile can take a little while (Bootstrap’s TypeScript source, plus any component dependencies, is spread across many separate files, each fetched individually).

Filters

Enable source map

Off by default. Shared with the SCSS compiler — enabling it turns on source maps for both. A source map lets browser dev tools show you which original .ts file and line a compiled JS statement came from — useful while actively debugging scripts, but unnecessary (and slightly slower) for normal use.

/**
 * Enable source map
 */
add_filter('bootscore/compiler/enable_sourcemap', '__return_true');

Modify the TS before it compiles

This filter runs on the raw TypeScript content of bootscore.ts right before it’s sent to the compiler, letting you add to or change it programmatically — without editing the file on disk.

add_filter('bootscore/compiler/main_ts', function ($ts) {
  // Append an extra export before the real entry content compiles
  return $ts . "\nexport { default as MyExtra } from './bootstrap/my-extra.js'";
});

Errors

If something in your code went wrong, for example a typo in an import path or a syntax error, the compiler shows an error in a status bar at the bottom of the page instead of compiling