Building and Packaging JS Bundles

Production bundles are generated by Vite lib mode (IIFE) and emitted as config/config.<component>.jsbundle.js.

Build command

npm run build

Template script from templates/base/package.json:

{
  "scripts": {
    "build": "for dir in src/*/; do COMPONENT=$(basename \"$dir\") vite build; done"
  }
}

Build output contract

• One output file per component folder in src/*/.
• Output format is IIFE with inline dynamic imports.
• Target usage is FlowMaker uiConfig.type = "js-bundle" with base64 encoded content.

[NOTE!lightbulb/IIFE CONSTRAINT] Because the bundle format is IIFE, do not rely on top-level await in main.js. Use async wrappers with await import(...).

Registering in worker config

import { readFileSync } from 'fs';

const jsBundle = readFileSync('./config/config.my-config.jsbundle.js', 'utf-8');
const base64Bundle = Buffer.from(jsBundle).toString('base64');

uiConfig: {
  type: 'js-bundle',
  implementation: base64Bundle
}

[WARNING!shield/JS-BUNDLE REQUIREMENT] implementation cannot be null when type is js-bundle.

Reference

• sdk/config/flowbox-ui/templates/base/package.json
• sdk/config/flowbox-ui/templates/base/vite.config.js
• sdk/config/flowbox-ui/README.md