Classic Fluent UI runner API reference

This reference covers the Tripetto Classic Fluent UI Stock Runner package. This runner is identical to the Classic stock runner but uses Fluent UI for its user-interface.

info

This package does not only contain the Runner library, but also:

• Locale data for the runner;
• Translations for the runner;
• Builder bundle with the builder part of all the blocks used in the runner;
• Translations for the builder part of the blocks.

See the Package section for more information.

📽️ Demo

This demo shows the builder and classic Fluent UI runner side by side. You can create a form in the builder and see a live preview of the form in the runner. The collected form data is outputted to the browser console (no data is sent).

🚀 Quickstart

✨ Installation

npm

npm install @tripetto/runner-classic-fluentui

Yarn

yarn add @tripetto/runner-classic-fluentui

pnpm

pnpm add @tripetto/runner-classic-fluentui

caution

This package needs the packages @tripetto/runner, react, and Fluent UI to run. You have to install those peer dependencies yourself.

Typescript support

This package contains type declarations and supports TypeScript out-of-the-box.

⚛️ Components

• Angular
• React

▶️ Functions

• run

🗂️ Modules

• TripettoClassic

⛓️ Interfaces

• IClassic
• IClassicController
• IClassicProps
• IClassicRendering
• IClassicRenderProps
• IClassicRunner
• IClassicStyles

🗿 Constants

• namespace

📦 Package

The classic runner package contains resources for both the runner and the builder part of Tripetto. Below is a quick reference of all the resources.

tip

Read the Package overview guide for more information about the structure of this package.

🏃 Runner

ESM/ES5 (learn more)

import { run } from "@tripetto/runner-classic-fluentui";

// The code above imports the ES5 or ESM version based on your project configuration.
// If you want to use the ES5 version, you can do an explicit import:
import { run } from "@tripetto/runner-classic-fluentui/runner/es5";

UMD

The UMD version of the Runner library (can run directly in the browser): ./runner/index.js.

caution

Please be aware that the stock runner needs the Tripetto Runner library package to run properly. If you use the UMD version of the stock runner, you should therefore also load the UMD version of the Runner library.

Locales (learn more)

import en from "@tripetto/runner-classic-fluentui/runner/locales/en.json";

Translations (learn more)

import runnerTranslations from "@tripetto/runner-classic-fluentui/runner/translations/nl.json";

🏗️ Builder

Blocks bundle (learn more)

import "@tripetto/runner-classic-fluentui/builder";

// The code above imports the ES5 or ESM version based on your project configuration.
// If you want to use the ES5 version, you can do an explicit import:
import "@tripetto/runner-classic-fluentui../builder/es5";

UMD

The UMD version of the blocks bundle (can run directly in the browser): .../builder/index.js.

Translations (learn more)

import blocksBundleTranslations from "@tripetto/runner-classic-fluentui../builder/translations/nl.json";

Styles contract (learn more)

import stylesContract from "@tripetto/runner-classic-fluentui../builder/styles";

L10n contract (learn more)

import l10nContract from "@tripetto/runner-classic-fluentui../builder/l10n";

📁 Source code

The Tripetto Classic Runner package is open-source and the code is on GitLab.