Expanding integration of @formio/core into renderer.

embed.d.ts

@@ -1 +1 @@
-export * from './types/Embed';
+export * from './lib/cjs/InlineEmbed';

form.d.ts

@@ -0,0 +1 @@
+export * from './lib/cjs/formio.form';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-rc.43",
+  "version": "5.0.0-rc.54",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -21,14 +21,18 @@
       "require": "./lib/cjs/formio.form.js"
     },
     "./embed": {
-      "import": "./lib/cjs/Embed.js",
-      "require": "./lib/cjs/Embed.js"
+      "import": "./lib/cjs/InlineEmbed.js",
+      "require": "./lib/cjs/InlineEmbed.js"
     },
     "./dist/*": "./dist/*"
   },
   "files": [
     "dist",
-    "lib"
+    "lib",
+    "embed.d.ts",
+    "form.d.ts",
+    "sdk.d.ts",
+    "utils.d.ts"
   ],
   "pre-commit": [
     "lint"
@@ -75,9 +79,9 @@
   },
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
-    "@formio/bootstrap": "^3.0.0-rc.22",
+    "@formio/bootstrap": "^3.0.0-rc.24",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "^2.1.0-dev.tt.2",
+    "@formio/core": "^2.1.0-dev.tt.8",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",
@@ -86,10 +90,10 @@
     "browser-cookies": "^1.2.0",
     "browser-md5-file": "^1.1.1",
     "compare-versions": "^6.0.0-rc.2",
-    "core-js": "^3.37.0",
+    "core-js": "^3.37.1",
     "dialog-polyfill": "^0.5.6",
     "dom-autoscroller": "^2.3.4",
-    "dompurify": "^3.1.0",
+    "dompurify": "^3.1.3",
     "downloadjs": "^1.4.7",
     "dragula": "^3.7.3",
     "eventemitter3": "^5.0.1",
@@ -105,17 +109,17 @@
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.44",
-    "quill": "^2.0.0-rc.4",
+    "quill": "^2.0.2",
     "signature_pad": "^4.2.0",
     "string-hash": "^1.1.3",
     "tippy.js": "^6.3.7",
     "uuid": "^9.0.0",
     "vanilla-picker": "^2.12.3"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
-    "ace-builds": "1.33.0",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/parser": "^7.9.0",
+    "ace-builds": "1.33.2",
     "async-limiter": "^2.0.0",
     "bootstrap-icons": "^1.10.5",
     "bootswatch": "^5.3.3",
@@ -125,7 +129,7 @@
     "ejs-loader": "^0.5.0",
     "escape-string-regexp": "^5.0.0",
     "eslint": "^8.57.0",
-    "eslint-plugin-jsdoc": "^48.2.3",
+    "eslint-plugin-jsdoc": "^48.2.5",
     "fetch-mock": "^9.11.0",
     "file-loader": "^6.2.0",
     "flatpickr": "^4.6.13",
@@ -157,7 +161,7 @@
     "pretty": "^2.0.0",
     "pygments-css": "^1.0.0",
     "raw-loader": "^4.0.2",
-    "sass": "^1.74.1",
+    "sass": "^1.77.1",
     "shortcut-buttons-flatpickr": "^0.4.0",
     "sinon": "^17.0.1",
     "string-replace-loader": "^3.1.0",

sdk.d.ts

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

src/InlineEmbed.js

@@ -0,0 +1,113 @@
+import { Formio } from './Embed';
+/**
+ * Inline embed a form within a webpage.
+ * @param {*} config - Configuration to configure how the inline embed is rendered.
+ */
+export function embed(config = {}) {
+    const scripts = document.getElementsByTagName('script');
+    config = Object.assign({}, window.FormioConfig || {}, config);
+    let thisScript = null;
+    let i = scripts.length;
+    const scriptName = config.scriptName || 'formio.embed.';
+    while (i--) {
+        if (
+            scripts[i].src && (scripts[i].src.indexOf(scriptName) !== -1)
+        ) {
+            thisScript = scripts[i];
+            break;
+        }
+    }
+
+    if (thisScript) {
+        const query = {};
+        const queryString = thisScript.src.replace(/^[^?]+\??/, '');
+        queryString.replace(/\?/g, '&').split('&').forEach((item) => {
+            query[item.split('=')[0]] = item.split('=')[1] && decodeURIComponent(item.split('=')[1]);
+        });
+
+        let scriptSrc = thisScript.src.replace(/^([^?]+).*/, '$1').split('/');
+        scriptSrc.pop();
+        if (config.formioPath) {
+            config.formioPath(scriptSrc);
+        }
+        scriptSrc = scriptSrc.join('/');
+        const debug = (query.debug === 'true' || query.debug === '1');
+        const renderer = debug ? 'formio.form' : 'formio.form.min';
+        Formio.config = Object.assign({
+            script: query.script || (`${config.updatePath ? config.updatePath() : scriptSrc}/${renderer}.js`),
+            style: query.styles || (`${config.updatePath ? config.updatePath() : scriptSrc}/${renderer}.css`),
+            cdn: query.cdn,
+            class: (query.class || 'formio-form-wrapper'),
+            src: query.src,
+            form: null,
+            submission: null,
+            project: query.project,
+            base: query.base || 'https://api.form.io',
+            submit: query.submit,
+            includeLibs: (query.libs === 'true' || query.libs === '1'),
+            template: query.template,
+            debug: debug,
+            config: {},
+            redirect: (query.return || query.redirect),
+            embedCSS: (`${config.updatePath ? config.updatePath() : scriptSrc}/formio.embed.css`),
+            success: query.success || 'Thank you for your submission!',
+            before: null,
+            after: null
+        }, config);
+        const form = (Formio.config.form || Formio.config.src);
+        if (form) {
+            Formio.debug('Embedding Configuration', config);
+            if (Formio.config.addPremiumLib) {
+                Formio.config.addPremiumLib(Formio.config, scriptSrc);
+            }
+
+            // The id for this embedded form.
+            Formio.config.id = `formio-${Math.random().toString(36).substring(7)}`;
+            Formio.debug('Creating form element');
+            const element = Formio.createElement('div', {
+                'id': Formio.config.id,
+                class: Formio.config.class
+            });
+
+            // insertAfter doesn't exist, but effect is identical.
+            thisScript.parentNode.insertBefore(element, thisScript.parentNode.firstElementChild.nextSibling);
+            Formio.createForm(element, form, Formio.config.config).then((instance) => {
+                if (Formio.config.submit) {
+                    instance.nosubmit = true;
+                }
+
+                // Configure a redirect.
+                instance.on('submit', (submission) => {
+                    Formio.debug("on('submit')", submission);
+                    if (Formio.config.submit) {
+                        Formio.debug(`Sending submission to ${Formio.config.submit}`);
+                        const headers = {
+                            'content-type': 'application/json'
+                        };
+                        const token = Formio.FormioClass.getToken();
+                        if (token) {
+                            headers['x-jwt-token'] = token;
+                        }
+                        Formio.FormioClass.fetch(Formio.config.submit, {
+                            body: JSON.stringify(submission),
+                            headers: headers,
+                            method: 'POST',
+                            mode: 'cors',
+                        })
+                            .then(resp => resp.json())
+                            .then(submission => Formio.submitDone(instance, submission));
+                    }
+                    else {
+                        Formio.submitDone(instance, submission);
+                    }
+                });
+            });
+        }
+    }
+    else {
+        // Show an error if the script cannot be found.
+        document.write('<span>Could not locate the Embedded form.</span>');
+    }
+}
+
+export { Formio };

src/Webform.js

@@ -57,6 +57,98 @@ function getOptions(options) {
     return options;
 }
 
+/**
+ * Represents a JSON value.
+ * @typedef {(string | number | boolean | null | JSONArray | JSONObject)} JSON
+ */
+
+/**
+ * Represents a JSON array.
+ * @typedef {Array<JSON>} JSONArray
+ */
+
+/**
+ * Represents a JSON object.
+ * @typedef {{[key: string]: JSON}} JSONObject
+ */
+
+/**
+ * @typedef {object} FormioHooks
+ * @property {Function} [beforeSubmit] - A function that is called before the form is submitted.
+ * @property {Function} [beforeCancel] - A function that is called before the form is canceled.
+ * @property {Function} [beforeNext] - A function that is called before moving to the next page in a multi-page form.
+ * @property {Function} [beforePrev] - A function that is called before moving to the previous page in a multi-page form.
+ * @property {Function} [attachComponent] - A function that is called when a component is attached to the form.
+ * @property {Function} [setDataValue] - A function that is called when setting the value of a data component.
+ * @property {Function} [addComponents] - A function that is called when adding multiple components to the form.
+ * @property {Function} [addComponent] - A function that is called when adding a single component to the form.
+ * @property {Function} [customValidation] - A function that is called for custom validation of the form.
+ * @property {Function} [attachWebform] - A function that is called when attaching a webform to the form.
+ */
+
+/**
+ * @typedef {object} SanitizeConfig
+ * @property {string[]} [addAttr] - The attributes to add.
+ * @property {string[]} [addTags] - The tags to add.
+ * @property {string[]} [allowedAttrs] - The allowed attributes.
+ * @property {string[]} [allowedTags] - The allowed tags.
+ * @property {string[]} [allowedUriRegex] - The allowed URI regex.
+ * @property {string[]} [addUriSafeAttr] - The URI safe attributes.
+ */
+
+/**
+ * @typedef {object} ButtonSettings
+ * @property {boolean} [showPrevious] - Show the "Previous" button.
+ * @property {boolean} [showNext] - Show the "Next" button.
+ * @property {boolean} [showCancel] - Show the "Cancel" button.
+ * @property {boolean} [showSubmit] - Show the "Submit" button.
+ */
+
+/**
+ * @typedef {object} FormOptions
+ * @property {boolean} [saveDraft] - Enable the save draft feature.
+ * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
+ * @property {boolean} [readOnly] - Set this form to readOnly.
+ * @property {boolean} [noAlerts] - Disable the alerts dialog.
+ * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+ * @property {string} [template] - Custom logic for creation of elements.
+ * @property {boolean} [noDefaults] - Exclude default values from the settings.
+ * @property {any} [fileService] - The file service for this form.
+ * @property {EventEmitter} [events] - The EventEmitter for this form.
+ * @property {string} [language] - The language to render this form in.
+ * @property {{[key: string]: string}} [i18next] - The i18next configuration for this form.
+ * @property {boolean} [viewAsHtml] - View the form as raw HTML.
+ * @property {'form' | 'html' | 'flat' | 'builder' | 'pdf'} [renderMode] - The render mode for this form.
+ * @property {boolean} [highlightErrors] - Highlight any errors on the form.
+ * @property {string} [componentErrorClass] - The error class for components.
+ * @property {any} [templates] - The templates for this form.
+ * @property {string} [iconset] - The iconset for this form.
+ * @property {import('@formio/core').Component[]} [components] - The components for this form.
+ * @property {{[key: string]: boolean}} [disabled] - Disabled components for this form.
+ * @property {boolean} [showHiddenFields] - Show hidden fields.
+ * @property {{[key: string]: boolean}} [hide] - Hidden components for this form.
+ * @property {{[key: string]: boolean}} [show] - Components to show for this form.
+ * @property {Formio} [formio] - The Formio instance for this form.
+ * @property {string} [decimalSeparator] - The decimal separator for this form.
+ * @property {string} [thousandsSeparator] - The thousands separator for this form.
+ * @property {FormioHooks} [hooks] - The hooks for this form.
+ * @property {boolean} [alwaysDirty] - Always be dirty.
+ * @property {boolean} [skipDraftRestore] - Skip restoring a draft.
+ * @property {'form' | 'wizard' | 'pdf'} [display] - The display for this form.
+ * @property {string} [cdnUrl] - The CDN url for this form.
+ * @property {boolean} [flatten] - Flatten the form.
+ * @property {boolean} [sanitize] - Sanitize the form.
+ * @property {SanitizeConfig} [sanitizeConfig] - The sanitize configuration for this form.
+ * @property {ButtonSettings} [buttonSettings] - The button settings for this form.
+ * @property {object} [breadcrumbSettings] - The breadcrumb settings for this form.
+ * @property {boolean} [allowPrevious] - Allow the previous button (for Wizard forms).
+ * @property {string[]} [wizardButtonOrder] - The order of the buttons (for Wizard forms).
+ * @property {boolean} [showCheckboxBackground] - Show the checkbox background.
+ * @property {boolean} [inputsOnly] - Only show inputs in the form and no labels.
+ * @property {boolean} [building] - If we are in the process of building the form.
+ * @property {number} [zoom] - The zoom for PDF forms.
+ */
+
 /**
  * Renders a Form.io form within the webpage.
  */
@@ -1600,7 +1692,7 @@ export default class Webform extends NestedDataComponent {
      * @param {any} options - The options to use when submitting this form.
      * @returns {Promise} - A promise when the form is done submitting.
      */
-    submit(before, options = {}) {
+    submit(before = false, options = {}) {
         this.submissionInProcess = true;
         if (!before) {
             return this.beforeSubmit(options).then(() => this.executeSubmit(options));