Build Process

The IC framework frontend is a Svelte 5 application bundled with Vite. MATLAB’s uihtml loads the built index.html from disk, so the build output must exist locally for the framework to work. This guide covers how to set up the project, build the frontend, and what happens under the hood.

Getting started

Clone the repository and install the frontend dependencies:

git clone <repository-url>
cd ic

cd front
npm install

That is all you need. The front/ directory is a standard Vite project with Svelte 5 and TypeScript.

Building

To produce a production build:

npm run build

This runs Vite, which compiles all Svelte components, bundles the TypeScript, tree-shakes unused code, minifies everything, and writes the output to front/dist/. The build takes roughly 20 to 30 seconds depending on your machine, mostly because of heavy dependencies like CodeMirror, Mermaid, and the math renderers.

The output structure looks like this:

front/dist/
  index.html          # Entry point loaded by uihtml
  assets/
    index-*.js        # Main bundle
    Frame-*.js        # Frame component
    Button-*.js       # Lazy-loaded component chunks
    ...               # ~700 code-split chunks
  fonts/
    roboto-mono-*.woff2

MATLAB’s View.m resolves the absolute path to front/dist/index.html at runtime and passes it to the uihtml component. From there, the browser loads the page and all its assets using relative paths (./assets/...).

Available scripts

# Available scripts in front/package.json
npm run dev        # Start Vite dev server with hot reload
npm run build      # Production build to front/dist/
npm run preview    # Preview the production build locally
npm run check      # Type-check Svelte and TypeScript
npm run test       # Run tests in watch mode
npm run test:run   # Run tests once

npm run check is worth running before committing. It type-checks all Svelte components and TypeScript files without producing a build, so it catches type errors quickly.

Vite configuration

The Vite config has a few settings that are specific to the IC framework:

// front/vite.config.ts (simplified)
export default defineConfig({
    base: './',                    // Relative paths for local HTTPS serving
    plugins: [wasm(), lezer(), svelte()],
    worker: { format: 'iife' },   // Classic workers, not ES modules
    build: {
        chunkSizeWarningLimit: 2000,
    },
});

base: './' makes all asset references relative instead of absolute. This is necessary because uihtml serves files through a local HTTPS server at https://127.0.0.1:{port}, and absolute paths would not resolve correctly.

worker: { format: 'iife' } forces web workers to be emitted as classic IIFE scripts instead of ES modules. My MATLAB’s embedded Chromium (R2024b on macOS with Chromium 104) does not support module workers, so this is required for features like the PDF renderer and the Typst compiler that run in worker threads.

chunkSizeWarningLimit: 2000 raises the default warning threshold. The framework includes large dependencies (rich text editor, code editor, diagram renderer, math typesetting) that produce chunks well above Vite’s default 500 KB limit. The warning is suppressed because these chunks are loaded lazily and only fetched when the corresponding component is first used.

What the build produces

Vite code-splits the output into roughly 700 chunks. Each IC component gets its own chunk that is only loaded when MATLAB inserts that component for the first time (this is the “preload” phase described in the communication article).