🔨 [#724] Support outputting UMD build of Open Forms SDK

package.json

@@ -70,6 +70,7 @@
     "start": "npm run build:design-tokens && node scripts/start.js",
     "build": "node scripts/build.js && npm run build:esm",
     "build:esm": "rimraf dist/esm && NODE_ENV=production babel --no-babelrc --config-file ./.babelrc.esm-build --ignore 'src/**/*.spec.js','src/**/fixtures/**','src/setupTests.js','src/reportWebVitals.js' src --out-dir dist/esm",
+    "build:vite": "BUILD_TARGET=umd vite build && BUILD_TARGET=esm vite build",
     "test": "TZ=Europe/Amsterdam vitest",
     "test:storybook": "test-storybook --coverage",
     "clean": "rimraf dist/*",

src/formio/components/Number.js

@@ -1,5 +1,5 @@
 import {maskInput} from '@formio/vanilla-text-mask';
-import {set} from 'lodash';
+import set from 'lodash/set';
 import {Formio} from 'react-formio';
 
 import {setErrorAttributes} from '../utils';

src/formio/validators/plugins.js

@@ -1,4 +1,4 @@
-import {isEmpty} from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 
 import {post} from '../../api';
 

src/sdk.jsx

@@ -1,5 +1,6 @@
 import ProtectedEval from '@formio/protected-eval';
 import 'flatpickr';
+import lodash from 'lodash';
 import {fixIconUrls as fixLeafletIconUrls} from 'map';
 import React from 'react';
 import {createRoot} from 'react-dom/client';
@@ -23,6 +24,11 @@ import OpenFormsModule from './formio/module';
 import OFLibrary from './formio/templates';
 import './styles.scss';
 
+// lodash must be bundled for Formio templates to work properly...
+if (typeof window !== 'undefined') {
+  window._ = lodash;
+}
+
 // use protected eval to not rely on unsafe-eval (CSP)
 Formio.use(ProtectedEval);
 

vite.config.mts

@@ -1,13 +1,70 @@
 /// <reference types="vitest/config" />
 // https://vitejs.dev/config/
 import react from '@vitejs/plugin-react';
+import type {OutputOptions} from 'rollup';
 import {defineConfig} from 'vite';
 import jsconfigPaths from 'vite-jsconfig-paths';
 import {coverageConfigDefaults} from 'vitest/config';
 
 import {cjsTokens, ejsPlugin} from './build/plugins.mjs';
 import {packageRegexes} from './build/utils.mjs';
 
+// type definition for our custom envvars
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      BUILD_TARGET: 'umd' | 'esm';
+    }
+  }
+}
+
+const buildTarget = process.env.BUILD_TARGET || 'umd';
+
+/**
+ * Rollup output options for ESM build, which is what we package in the NPM package
+ * under the 'esm' subdirectory.
+ *
+ * The ESM package is experimental. Known issues:
+ * @fixme
+ *
+ * - the react-intl translations are not distributed yet (also broken in CRA/babel build!)
+ */
+const esmOutput = {
+  dir: 'dist-vite/esm',
+  format: 'esm',
+  preserveModules: true,
+  preserveModulesRoot: 'src',
+  entryFileNames: '[name].js',
+  assetFileNames: ({name}) => {
+    if (name?.endsWith('.css')) {
+      return '[name].[ext]';
+    }
+    return 'static/media/[name].[hash:8].[ext]';
+  },
+} satisfies OutputOptions;
+
+/**
+ * Rollup output options for UMD bundle, included in the NPM package but
+ * the primary distribution mechanism is in a Docker image.
+ *
+ * @todo - optimize with bundle splitting/chunk management.
+ */
+const umdOutput = {
+  dir: 'dist-vite',
+  format: 'umd',
+  exports: 'named',
+  name: 'OpenForms',
+  generatedCode: 'es2015',
+  entryFileNames: 'open-forms-sdk.js',
+  assetFileNames: ({name}) => {
+    if (name === 'style.css') {
+      return 'open-forms-sdk.css';
+    }
+    return 'static/media/[name].[hash:8].[ext]';
+  },
+  inlineDynamicImports: true,
+} satisfies OutputOptions;
+
 export default defineConfig({
   base: './',
   publicDir: false,
@@ -24,26 +81,15 @@ export default defineConfig({
   ],
   build: {
     target: 'modules', // the default
-    outDir: 'dist-vite',
     assetsInlineLimit: 8 * 1024, // 8 KiB
     cssCodeSplit: false,
+    sourcemap: buildTarget !== 'esm',
+    outDir: 'dist-vite/umd',
     rollupOptions: {
       input: 'src/sdk.jsx',
-      external: packageRegexes,
-      output: {
-        dir: 'dist-vite/esm',
-        format: 'esm',
-        preserveModules: true,
-        preserveModulesRoot: 'src',
-        entryFileNames: '[name].js',
-        assetFileNames: ({name}) => {
-          if (name?.endsWith('.css')) {
-            return '[name].[ext]';
-          }
-          return 'static/media/[name].[hash:8].[ext]';
-        },
-        sourcemap: false,
-      },
+      // do not externalize anything in UMD build - bundle everything
+      external: buildTarget === 'esm' ? packageRegexes : undefined,
+      output: buildTarget === 'esm' ? esmOutput : umdOutput,
       preserveEntrySignatures: 'strict',
     },
   },