Flowmaker SDK [beta]Docs
search
GitHub

ESM await import, @cdn-cache Helper, and Peer Dependencies

@cdn-cache imports are handled by toolkit Vite plugins in:

  • templates/base/vite.config.js (prod)
  • templates/dev/vite.config.dev.js (dev)

Why async import is required

Build output format is IIFE, so top-level await is not safe in entry files. Use an async wrapper and dynamic imports.

import ConfigForm from './ConfigForm.svelte';
import { FlowBoxSvelteUI } from '@industream/flowmaker-flowbox-ui';

(async () => {
  const [lodash, dayjs] = await Promise.all([
    import('@cdn-cache/lodash-es@4.17.21/lodash.js'),
    import('@cdn-cache/dayjs@1.11.10')
  ]);

  console.log(lodash.range(1, 4));
  console.log(dayjs().format());

  register('box-config-frontend', new FlowBoxSvelteUI(ConfigForm));
})();

[WARNING!shield/SEMVER ENFORCEMENT] @cdn-cache imports must include exact x.y.z versions. Missing or loose versions fail validation.

@cdn-cache format

@cdn-cache/package@version[/path]
@cdn-cache/@scope/package@version[/path]

Dev vs prod behavior

Mode Behavior
Dev (flowbox-ui start) Rewrites to real CDN URL (https://esm.sh/ by default). Warns on missing/mismatched peer deps.
Build (npm run build) Preserves dynamic imports as http://@cdn-cache/... externals in output bundle.
Runtime in FlowMaker Replaces http://@cdn-cache/ with configured CDN endpoint before execution.

[NOTE!lightbulb/PEER-DEPENDENCY CONTRACT] Add CDN-loaded packages to peerDependencies and pin the exact version used in import paths.

Example:

{
  "peerDependencies": {
    "codemirror": "5.65.18",
    "lodash-es": "4.17.21"
  }
}

Docker integration

See the dedicated page: Docker worker integration and peer-dependency caching.

CodeMirror loading examples

JS modules

<script>
  import { onMount } from 'svelte';

  let CodeMirror;

  onMount(async () => {
    const cmModule = await import('@cdn-cache/codemirror@5.65.18/lib/codemirror.js');
    await import('@cdn-cache/codemirror@5.65.18/mode/sql/sql.js');

    CodeMirror = cmModule.default || cmModule;
  });
</script>

CSS via <svelte:head>

<svelte:head>
  <link rel="stylesheet" href="http://@cdn-cache/codemirror@5.65.18/lib/codemirror.css" />
  <link rel="stylesheet" href="http://@cdn-cache/codemirror@5.65.18/theme/material.css" />
</svelte:head>

[WARNING!schedule/CSS SOURCE OF TRUTH] Keep CSS URLs version-aligned with JS imports. Mixed versions can create hard-to-debug editor behavior and theme issues.

Reference

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