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.
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
- Yarn
npm install @tripetto/runner-classic-fluentui
yarn add @tripetto/runner-classic-fluentui
This package needs the packages tripetto-runner-foundation, react, and Fluent UI to run. You have to install those peer dependencies yourself.
This package contains type declarations and supports TypeScript out-of-the-box.
⚛️ Components
▶️ Functions
🗂️ Modules
⛓️ Interfaces
IClassicIClassicControllerIClassicPropsIClassicRenderingIClassicRenderPropsIClassicRunnerIClassicStyles
🗿 Constants
📦 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.
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.
Please be aware that the stock runner needs the Tripetto Runner Foundation 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 foundation.
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.