More fixes for 5.x version of renderer.

embed.d.ts

@@ -0,0 +1 @@
+export * from './types/Embed';

package.json

@@ -5,10 +5,12 @@
   "main": "lib/cjs/index.js",
   "exports": {
     ".": {
+      "types": "index.d.ts",
       "import": "./lib/cjs/index.js",
       "require": "./lib/cjs/index.js"
     },
     "./sdk": {
+      "types": "./types/Formio.d.ts",
       "import": "./lib/cjs/Formio.js",
       "require": "./lib/cjs/Formio.js"
     },
@@ -21,6 +23,7 @@
       "require": "./lib/cjs/formio.form.js"
     },
     "./embed": {
+      "types": "./types/Embed.d.ts",
       "import": "./lib/cjs/Embed.js",
       "require": "./lib/cjs/Embed.js"
     },
@@ -146,7 +149,6 @@
     "gulp-sync": "^0.1.4",
     "gulp-watch": "^5.0.1",
     "hoek": "^6.1.3",
-    "jquery": "^3.7.0",
     "jsdom": "^22.1.0",
     "jsdom-global": "^3.0.2",
     "karma": "^6.4.2",

sdk.d.ts

@@ -0,0 +1 @@
+export * from './types/Formio';

src/CDN.js

@@ -3,13 +3,15 @@
 // like Formio.cdn.ace === 'http://cdn.form.io/ace/1.4.12'.
 // For latest version use empty string
 class CDN {
+  static defaultCDN = 'https://cdn.form.io';
   constructor(baseUrl, overrides = {}) {
-    this.baseUrl = baseUrl || 'https://cdn.form.io';
+    this.baseUrl = baseUrl || CDN.defaultCDN;
     this.overrides = overrides;
     this.libs = {
       'js': '',
       'ace': '1.4.12',
-      'bootstrap': '4.6.2',
+      'bootstrap': '5.3.2',
+      'bootstrap-icons': '1.11.1',
       'ckeditor': '19.0.0',
       'flatpickr': '4.6.8',
       'flatpickr-formio': '4.6.13-formio.3',

src/Embed.js

@@ -6,14 +6,22 @@ export class Formio {
     static pathType;
     static language;
     static config = {};
-    static cdn = new CDN();
+    static cdn;
     static modules = [];
     static icons = '';
+    static license = '';
     static formioReady = new Promise((ready, reject) => {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
     static version = 'FORMIO_VERSION';
+    static setLicense(license, norecurse = false) {
+        Formio.license = license;
+        if (!norecurse && Formio.FormioClass) {
+            Formio.FormioClass.setLicense(license);
+        }
+    }
+
     static setBaseUrl(url, norecurse = false) {
         Formio.baseUrl = url;
         if (!norecurse && Formio.FormioClass) {
@@ -102,9 +110,15 @@ export class Formio {
             return Promise.resolve(Formio.global(name));
         }
         Formio.debug('Adding Script', src);
-        wrapper.appendChild(Formio.createElement('script', {
-            src
-        }));
+        try {
+            wrapper.appendChild(Formio.createElement('script', {
+                src
+            }));
+        }
+        catch (err) {
+            Formio.debug(err);
+            return Promise.resolve();
+        }
         if (!name) {
             return Promise.resolve();
         }
@@ -178,6 +192,7 @@ export class Formio {
 
     // Return the full script if the builder is being used.
     static formioScript(script, builder) {
+        builder = builder || Formio.config.includeBuilder;
         if (Formio.fullAdded || builder) {
             Formio.fullAdded = true;
             return script.replace('formio.form', 'formio.full');
@@ -205,7 +220,7 @@ export class Formio {
 
         // Create a new wrapper and add the element inside of a new wrapper.
         let wrapper = Formio.createElement('div', {
-            'id': `"${id}-wrapper"`
+            'id': `${id}-wrapper`
         });
         element.parentNode.insertBefore(wrapper, element);
 
@@ -246,9 +261,11 @@ export class Formio {
             'Formio',
             builder ? 'isBuilder' : 'isRenderer'
         );
+        Formio.FormioClass.cdn = Formio.cdn;
         Formio.FormioClass.setBaseUrl(options.baseUrl || Formio.baseUrl || Formio.config.base);
         Formio.FormioClass.setProjectUrl(options.projectUrl || Formio.projectUrl || Formio.config.project);
         Formio.FormioClass.language = Formio.language;
+        Formio.setLicense(Formio.license || Formio.config.license || false);
         Formio.modules.forEach((module) => {
             Formio.FormioClass.use(module);
         });
@@ -261,17 +278,6 @@ export class Formio {
             Formio.FormioClass.setPathType(Formio.pathType);
         }
 
-        // Add premium modules
-        if (Formio.global('premium')) {
-            Formio.debug('Using premium module.');
-            Formio.FormioClass.use(Formio.global('premium'));
-        }
-
-        if (Formio.global('vpat')) {
-            Formio.debug('Using vpat module.');
-            Formio.FormioClass.use(Formio.global('vpat'));
-        }
-
         if (Formio.config.template) {
             if (Formio.config.includeLibs) {
                 await Formio.addStyles(wrapper, Formio.config.libs[Formio.config.template].css);
@@ -288,15 +294,31 @@ export class Formio {
                 Formio.FormioClass.use(await Formio.addScript(wrapper, `${templateSrc}.js`, Formio.config.template));
             }
         }
-        else if (Formio.global('uswds')) {
-            Formio.debug('Using uswds module.');
-            Formio.FormioClass.use(Formio.global('uswds'));
-        }
         // Default bootstrap + fontawesome.
         else if (Formio.config.includeLibs) {
             await Formio.addStyles(wrapper, Formio.config.libs.fontawesome.css);
             await Formio.addStyles(wrapper, Formio.config.libs.bootstrap.css);
         }
+
+        // Allow dynamic adding of modules.
+        if (Formio.config.modules) {
+            for (const name in Formio.config.modules) {
+                const moduleInfo = Formio.config.modules[name];
+                await Formio.addStyles(wrapper, moduleInfo.css);
+                const module = await Formio.addScript(wrapper, moduleInfo.js, name);
+                const options = moduleInfo.options || {};
+                if (!options.license && Formio.license) {
+                    options.license = Formio.license;
+                }
+                if (moduleInfo.use) {
+                    Formio.FormioClass.use(moduleInfo.use(module), options);
+                }
+                else {
+                    Formio.FormioClass.use(module, options);
+                }
+            }
+        }
+
         if (Formio.config.premium) {
             await Formio.addStyles(wrapper, Formio.config.premium.css);
             Formio.debug('Using premium');
@@ -359,8 +381,24 @@ export class Formio {
             return instance;
         });
     }
+
+    static Report = {
+        create: async(element, submission, options = {}) => {
+            const wrapper = await Formio.init(element, options, true);
+            return Formio.FormioClass.Report.create(element, submission, options).then((instance) => {
+                Formio.debug('Report created', instance);
+                Formio.debug('Removing loader');
+                wrapper.removeChild(wrapper.querySelector('.formio-loader'));
+                Formio.debug('Triggering embed event');
+                Formio.FormioClass.events.emit('reportEmbedded', instance);
+                return instance;
+            });
+        }
+    };
 }
 
+CDN.defaultCDN = Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';
+
 export class Form {
     constructor(element, form, options) {
         this.form = form;

src/Formio.js

@@ -1,13 +1,14 @@
-import { Formio } from '@formio/core/sdk';
+import { Formio as FormioCore } from '@formio/core/sdk';
 import { Formio as FormioEmbed } from './Embed';
 import CDN from './CDN';
 import Providers from './providers';
-Formio.cdn = new CDN();
-Formio.Providers = Providers;
-Formio.version = 'FORMIO_VERSION';
+FormioCore.cdn = new CDN();
+FormioCore.Providers = Providers;
+FormioCore.version = 'FORMIO_VERSION';
+CDN.defaultCDN = FormioCore.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';
 
 const isNil = (val) => val === null || val === undefined;
-Formio.prototype.uploadFile = function(storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {
+FormioCore.prototype.uploadFile = function(storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {
   const requestArgs = {
     provider: storage,
     method: 'upload',
@@ -16,9 +17,9 @@ Formio.prototype.uploadFile = function(storage, file, fileName, dir, progressCal
     dir: dir
   };
   fileKey = fileKey || 'file';
-  const request = Formio.pluginWait('preRequest', requestArgs)
+  const request = FormioCore.pluginWait('preRequest', requestArgs)
     .then(() => {
-      return Formio.pluginGet('fileRequest', requestArgs)
+      return FormioCore.pluginGet('fileRequest', requestArgs)
         .then((result) => {
           if (storage && isNil(result)) {
             const Provider = Providers.getProvider('storage', storage);
@@ -37,18 +38,18 @@ Formio.prototype.uploadFile = function(storage, file, fileName, dir, progressCal
         });
     });
 
-  return Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);
+  return FormioCore.pluginAlter('wrapFileRequestPromise', request, requestArgs);
 };
 
-Formio.prototype.downloadFile = function(file, options) {
+FormioCore.prototype.downloadFile = function(file, options) {
   const requestArgs = {
     method: 'download',
     file: file
   };
 
-  const request = Formio.pluginWait('preRequest', requestArgs)
+  const request = FormioCore.pluginWait('preRequest', requestArgs)
     .then(() => {
-      return Formio.pluginGet('fileRequest', requestArgs)
+      return FormioCore.pluginGet('fileRequest', requestArgs)
         .then((result) => {
           if (file.storage && isNil(result)) {
             const Provider = Providers.getProvider('storage', file.storage);
@@ -64,18 +65,18 @@ Formio.prototype.downloadFile = function(file, options) {
         });
     });
 
-  return Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);
+  return FormioCore.pluginAlter('wrapFileRequestPromise', request, requestArgs);
 };
 
-Formio.prototype.deleteFile = function(file, options) {
+FormioCore.prototype.deleteFile = function(file, options) {
   const requestArgs = {
     method: 'delete',
     file: file
   };
 
-  const request = Formio.pluginWait('preRequest', requestArgs)
+  const request = FormioCore.pluginWait('preRequest', requestArgs)
     .then(() => {
-      return Formio.pluginGet('fileRequest', requestArgs)
+      return FormioCore.pluginGet('fileRequest', requestArgs)
         .then((result) => {
           if (file.storage && isNil(result)) {
             const Provider = Providers.getProvider('storage', file.storage);
@@ -91,16 +92,26 @@ Formio.prototype.deleteFile = function(file, options) {
         });
     });
 
-  return Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);
+  return FormioCore.pluginAlter('wrapFileRequestPromise', request, requestArgs);
 };
 
+// Esnure we proxy the following methods to the FormioEmbed class.
+['setBaseUrl', 'setApiUrl', 'setAppUrl', 'setProjectUrl', 'setPathType', 'setLicense'].forEach((fn) => {
+  const baseFn = FormioCore[fn];
+  FormioCore[fn] = function(arg) {
+    const retVal = FormioEmbed[fn](arg, true);
+    return baseFn ? baseFn.call(this, arg) : retVal;
+  };
+});
+
 // For reverse compatability.
-Formio.Promise = Promise;
-Formio.formioReady = FormioEmbed.formioReady;
-Formio.config = FormioEmbed.config;
-Formio.builder = FormioEmbed.builder;
-Formio.Form = FormioEmbed.Form;
-Formio.FormBuilder = FormioEmbed.FormBuilder;
-Formio.use = FormioEmbed.use;
-Formio.createForm = FormioEmbed.createForm;
-export { Formio };
+FormioCore.Promise = Promise;
+FormioCore.formioReady = FormioEmbed.formioReady;
+FormioCore.config = FormioEmbed.config;
+FormioCore.builder = FormioEmbed.builder;
+FormioCore.Report = FormioEmbed.Report;
+FormioCore.Form = FormioEmbed.Form;
+FormioCore.FormBuilder = FormioEmbed.FormBuilder;
+FormioCore.use = FormioEmbed.use;
+FormioCore.createForm = FormioEmbed.createForm;
+export { FormioCore as Formio };

src/formio.form.js

@@ -42,7 +42,9 @@ Formio.Components.setComponents(AllComponents);
  * @returns
  */
 export function registerModule(mod, defaultFn = null, options = {}) {
-  // Sanity check.
+  if (typeof mod === 'function') {
+    return registerModule(mod(Formio), defaultFn, options);
+  }
   if (typeof mod !== 'object') {
     return;
   }

src/utils/formUtils.js

@@ -393,7 +393,7 @@ export function applyFormChanges(form, changes) {
  * @returns {Object}
  *   The flattened components map.
  */
-export function flattenComponents(components, includeAll) {
+export function flattenComponents(components, includeAll = false) {
   const flattened = {};
   eachComponent(components, (component, path) => {
     flattened[path] = component;

tsconfig.cjs.json

@@ -3,7 +3,6 @@
     "compilerOptions": {
         "module": "commonjs",
         "outDir": "./lib/cjs",
-        "target": "es2015",
-        "declaration": true
+        "target": "ES2015"
     }
 }

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "module": "commonjs",
     "outDir": "lib",
-    "target": "es2015",
+    "target": "ES2015",
     "allowJs": true,                          /* Allow javascript files to be compiled. */
     "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
     "noImplicitThis": false,                  /* Raise error on 'this' expressions with an implied 'any' type. */

tsconfig.mjs.json

@@ -3,7 +3,6 @@
     "compilerOptions": {
         "module": "esnext",
         "outDir": "./lib/mjs",
-        "target": "esnext",
-        "declaration": true
+        "target": "esnext"
     }
 }

types/Embed.d.ts

@@ -0,0 +1,13 @@
+export declare class Formio {
+    static config: any;
+    static icons: string;
+    static setBaseUrl(url: string): void;
+    static setApiUrl(url: string): void;
+    static setAppUrl(url: string): void;
+    static setProjectUrl(url: string): void;
+    static clearCache(): void;
+    static setPathType(type: string): void;
+    static createForm(element: HTMLElement, form: any, options: any): any;
+    static builder(element: HTMLElement, form: any, options: any): any;
+    static use(module: any): void;
+}