Experimental component changes

experimental.d.ts

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

experimental.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./lib/experimental"), exports);

package.json

@@ -43,7 +43,9 @@
     "dist",
     "lib",
     "types.js",
-    "types.d.ts"
+    "types.d.ts",
+    "experimental.js",
+    "experimental.d.ts"
   ],
   "homepage": "https://github.com/formio/core#readme",
   "devDependencies": {

src/experimental/base/component/Component.ts

@@ -1,7 +1,7 @@
 import { merge } from 'lodash';
 import { Components } from '../Components';
 import { Template } from '../../template';
-import { Evaluator } from 'utils';
+import { Evaluator } from 'utils/Evaluator';
 import * as dom from 'utils/dom';
 import { sanitize } from 'utils/sanitize';
 import { Model, ModelDecoratorInterface,  ModelInterface } from '../../model';

src/experimental/core.ts

@@ -3,112 +3,97 @@ import { Formio } from '../sdk';
 import { Evaluator, Utils } from '../utils';
 import { Components, render } from './base';
 import { Template } from './template';
-(Formio as any).render = render;
-(Formio as any).Components = Components;
-(Formio as any).Evaluator = Evaluator;
-(Formio as any).Utils = Utils;
-(Formio as any).Templates = Template;
 import { merge } from 'lodash';
+import components from './components';
+import modules from '../modules';
 
-/**
- * Register a specific plugin.
- *
- * @param key
- * @param plugin
- * @returns
- */
-export function usePlugin(key: string, plugin: any) {
-    switch (key) {
-        case 'options':
-            if (!(Formio as any).options) {
-                return;
-            }
-            (Formio as any).options = merge((Formio as any).options, plugin);
-            break;
-        case 'templates':
-            if (!(Formio as any).Templates) {
-                return;
-            }
-            const current = (Formio as any).Templates.framework || 'bootstrap';
-            for (const framework of Object.keys(plugin)) {
-                (Formio as any).Templates.extendTemplate(framework, plugin[framework]);
-            }
-            if (plugin[current]) {
-                (Formio as any).Templates.current = plugin[current];
-            }
-            break;
-        case 'components':
-            if (!(Formio as any).Components) {
-                return;
-            }
-            (Formio as any).Components.setComponents(plugin);
-            break;
-        case 'framework':
-            if (!(Formio as any).Templates) {
-                return;
-            }
-            (Formio as any).Templates.framework = plugin;
-            break;
-        case 'fetch':
-            for (const name of Object.keys(plugin)) {
-                Formio.registerPlugin(plugin[name], name);
-            }
-            break;
-        case 'rules':
-            if (!(Formio as any).Rules) {
-                return;
-            }
-            (Formio as any).Rules.addRules(plugin);
-            break;
-        case 'evaluator':
-            if (!(Formio as any).Evaluator) {
-                return;
-            }
-            (Formio as any).Evaluator.registerEvaluator(plugin);
-            break;
-        default:
-            console.log('Unknown plugin option', key);
-    }
-};
-
-/**
- * Register a new module.
- *
- * @param module
- * @returns
- */
-export function useModule(module: any) {
-    // Sanity check.
-    if (typeof module !== 'object') {
-        return;
-    }
-    for (const key of Object.keys(module)) {
-        usePlugin(key, module[key]);
+export default class FormioCore extends Formio {
+    static Components = Components;
+    static render = render;
+    static Evaluator = Evaluator;
+    static Utils = Utils;
+    static Templates = Template;
+    static usePlugin(key: string, plugin: any) {
+        switch (key) {
+            case 'options':
+                if (!(Formio as any).options) {
+                    return;
+                }
+                (Formio as any).options = merge((Formio as any).options, plugin);
+                break;
+            case 'templates':
+                if (!(Formio as any).Templates) {
+                    return;
+                }
+                const current = (Formio as any).Templates.framework || 'bootstrap';
+                for (const framework of Object.keys(plugin)) {
+                    (Formio as any).Templates.extendTemplate(framework, plugin[framework]);
+                }
+                if (plugin[current]) {
+                    (Formio as any).Templates.current = plugin[current];
+                }
+                break;
+            case 'components':
+                if (!(Formio as any).Components) {
+                    return;
+                }
+                (Formio as any).Components.setComponents(plugin);
+                break;
+            case 'framework':
+                if (!(Formio as any).Templates) {
+                    return;
+                }
+                (Formio as any).Templates.framework = plugin;
+                break;
+            case 'fetch':
+                for (const name of Object.keys(plugin)) {
+                    Formio.registerPlugin(plugin[name], name);
+                }
+                break;
+            case 'rules':
+                if (!(Formio as any).Rules) {
+                    return;
+                }
+                (Formio as any).Rules.addRules(plugin);
+                break;
+            case 'evaluator':
+                if (!(Formio as any).Evaluator) {
+                    return;
+                }
+                (Formio as any).Evaluator.registerEvaluator(plugin);
+                break;
+            default:
+                console.log('Unknown plugin option', key);
+        }
     }
-};
 
-/**
-* Allows passing in plugins as multiple arguments or an array of plugins.
-*
-* Formio.plugins(plugin1, plugin2, etc);
-* Formio.plugins([plugin1, plugin2, etc]);
-*/
-export function use(...mods: any) {
-    mods.forEach((mod: any) => {
-        if (Array.isArray(mod)) {
-            mod.forEach(p => useModule(p));
+    static useModule(module: any) {
+        // Sanity check.
+        if (typeof module !== 'object') {
+            return;
         }
-        else {
-            useModule(mod);
+        for (const key of Object.keys(module)) {
+            FormioCore.usePlugin(key, module[key]);
         }
-    });
-};
+    }
 
-(Formio as any).useModule = useModule;
-(Formio as any).usePlugin = usePlugin;
-(Formio as any).use = use;
-import components from './components';
-(Formio as any).use(components);
-import modules from '../modules';
-(Formio as any).use(modules);
-export { Formio };
+    /**
+     * Allows passing in plugins as multiple arguments or an array of plugins.
+     *
+     * Formio.plugins(plugin1, plugin2, etc);
+     * Formio.plugins([plugin1, plugin2, etc]);
+     */
+    static use(...mods: any) {
+        mods.forEach((mod: any) => {
+            if (Array.isArray(mod)) {
+                mod.forEach(p => FormioCore.useModule(p));
+            }
+            else {
+                FormioCore.useModule(mod);
+            }
+        });
+    }
+}
+
+FormioCore.use(components);
+FormioCore.use(modules);

src/experimental/index.ts

@@ -1,2 +1,7 @@
+import FormioCore from './core';
+export * from './base';
+export * from './model';
+export * from './components';
 export * from './template';
-export * from './core';
+export { FormioCore as Formio };
+export default FormioCore;

src/experimental/model/Model.ts

@@ -96,7 +96,7 @@ export function Model(props: any = {}) : ModelDecoratorInterface {
              * Returns the data value for this component.
              */
             public get dataValue(): any {
-                return get(this.data, this.component.key);
+                return this.component.key ? get(this.data, this.component.key) : this.data;
             }
 
             /**

src/experimental/model/NestedArrayModel.ts

@@ -130,7 +130,7 @@ export function NestedArrayModel(props: any = {}) : ModelDecoratorInterface {
              * Returns the dataValue for this component.
              */
             public get dataValue() {
-                return get(this.data, this.component.key);
+                return this.component.key ? get(this.data, this.component.key) : this.data;
             }
 
             /**

src/experimental/model/NestedDataModel.ts

@@ -15,6 +15,9 @@ export function NestedDataModel(props: any = {}) : ModelDecoratorInterface {
              * Get the component data.
              */
             componentData() {
+                if (!this.component.key) {
+                    return this.data;
+                }
                 const compData: any = get(this.data, this.component.key, this.defaultValue);
                 if (!Object.keys(compData).length) {
                     set(this.data, this.component.key, compData);
@@ -23,7 +26,7 @@ export function NestedDataModel(props: any = {}) : ModelDecoratorInterface {
             }
 
             public get dataValue() {
-                return get(this.data, this.component.key);
+                return this.component.key ? get(this.data, this.component.key) : this.data;
             }
 
             public set dataValue(value: any) {

src/experimental/template/Template.ts

@@ -4,7 +4,7 @@ import { merge } from 'lodash';
  * Manages all the available templates which can be rendered.
  */
 export class Template {
-    public static templates: any = [];
+    public static templates: any = {};
     public static _current: any = {};
     public static _framework: string = 'bootstrap';