@next-core/brick-kit 2.122.3 → 2.122.6

package/dist/index.esm.js

@@ -10,7 +10,7 @@ import i18next, { getFixedT } from 'i18next';
 import { parsePath, createBrowserHistory, locationsAreEqual, createPath } from 'history';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { JsonStorage, toPath, computeRealRoutePath, hasOwnProperty, isObject, isEvaluable, transformAndInject, transform, trackContext, trackState, scanPermissionActionsInStoryboard, precookFunction, cook, resolveContextConcurrently, syncResolveContextConcurrently, shouldAllowRecursiveEvaluations, preevaluate, inject, deepFreeze, createProviderClass, loadScript, getTemplateDepsOfStoryboard, getDllAndDepsOfStoryboard, asyncProcessStoryboard, getDllAndDepsByResource, scanRouteAliasInStoryboard, prefetchScript, scanBricksInBrickConf, scanProcessorsInAny, matchPath, scanAppGetMenuInAny, asyncProcessBrick, restoreDynamicTemplates, scanStoryboard, mapCustomApisToNameAndNamespace } from '@next-core/brick-utils';
-import lodash, { set, get, difference, identity, uniqueId, cloneDeep, clamp, isNil, sortBy, merge, pick, orderBy, omit, findLastIndex, noop, isObject as isObject$1, isString } from 'lodash';
+import _, { set, get, difference, identity, uniqueId, cloneDeep, clamp, isNil, sortBy, merge, pick, orderBy, omit, findLastIndex, noop, isObject as isObject$1, isString } from 'lodash';
 import moment from 'moment';
 import { pipes } from '@next-core/pipes';
 import yaml from 'js-yaml';
@@ -564,24 +564,6 @@ var InstanceApi_postSearch = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
-/**
- * @description 搜索实例V3 (支持多属性排序)
- * @endpoint POST /v3/object/:objectId/instance/_search
- */
-
-
-var InstanceApi_postSearchV3 = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator$3(function* (objectId, data, options) {
-    return (
-      /**! @contract easyops.api.cmdb.instance.PostSearchV3 */
-      (yield http.post("api/gateway/cmdb.instance.PostSearchV3/v3/object/".concat(objectId, "/instance/_search"), data, options)).data
-    );
-  });
-
-  return function InstanceApi_postSearchV3(_x, _x2, _x3) {
-    return _ref.apply(this, arguments);
-  };
-}();
 
 function supply(attemptToVisitGlobals, providedGlobalVariables, mock) {
   var globalVariables = _objectSpread({}, providedGlobalVariables); // Allow limited browser builtin values.
@@ -626,7 +608,7 @@ function supplyIndividual(variableName, mock) {
       return delegateMethods(Object, ["entries", "fromEntries", "keys", "values"]);
 
     case "_":
-      return Object.fromEntries(Object.entries(lodash).filter(entry => !shouldOmitInLodash.has(entry[0])).concat(mock ? [["uniqueId", prefix => "".concat(prefix !== null && prefix !== void 0 ? prefix : "", "42")]] : []));
+      return Object.fromEntries(Object.entries(_).filter(entry => !shouldOmitInLodash.has(entry[0])).concat(mock ? [["uniqueId", prefix => "".concat(prefix !== null && prefix !== void 0 ? prefix : "", "42")]] : []));
 
     case "moment":
       return Object.assign(function () {
@@ -3402,6 +3384,11 @@ function _dev_only_updateTemplatePreviewSettings(appId, templateId, settings) {
 function _dev_only_updateSnippetPreviewSettings(appId, snippetData) {
   kernel._dev_only_updateSnippetPreviewSettings(appId, snippetData);
 }
+/* istanbul ignore next */
+
+function _dev_only_updateFormPreviewSettings(appId, formId, settings) {
+  kernel._dev_only_updateFormPreviewSettings(appId, formId, settings);
+}
 class Runtime {
   constructor() {
     _defineProperty$1(this, "registerBrickTemplate", registerBrickTemplate);
@@ -5842,51 +5829,6 @@ var ContractApi_searchSingleContract = /*#__PURE__*/function () {
   };
 }();
 
-var mocks = {
-  mockId: null,
-  mockList: []
-};
-function registerMock(useMocks) {
-  var _useMocks$mockList;
-
-  if (useMocks) mocks = _objectSpread(_objectSpread({}, useMocks), {}, {
-    mockList: (_useMocks$mockList = useMocks.mockList) === null || _useMocks$mockList === void 0 ? void 0 : _useMocks$mockList.map(item => {
-      var isFlowAPi = isCustomApiProvider(item.provider);
-      return _objectSpread(_objectSpread({}, item), {}, {
-        uri: "".concat(isFlowAPi ? item.uri.replace(/(.+?)\/(.+)/, (_match, p1, p2) => {
-          return "/".concat(p1, "(@\\d+\\.\\d+\\.\\d+)?/").concat(p2, "$");
-        }) : "/".concat(item.uri.split(".").slice(2).join("."), "$")).replace(/:\w+/g, "([^/]+)")
-      });
-    })
-  });
-}
-function getMockList() {
-  return mocks.mockList;
-}
-var getMockInfo = (requestUrl, method) => {
-  var transformGetMethod = method => {
-    if (method.toUpperCase() === "LIST") {
-      return "GET";
-    }
-
-    return method === null || method === void 0 ? void 0 : method.toUpperCase();
-  };
-
-  var item = mocks.mockList.find(item => new RegExp(item.uri).test(requestUrl) && transformGetMethod(item.method) === (method === null || method === void 0 ? void 0 : method.toUpperCase()));
-
-  if (item) {
-    return {
-      url: requestUrl.replace(/(api\/gateway\/.+?)(@\d+\.\d+\.\d+)?\/(.+)/, (_match, p1, _p2, p3) => {
-        // 忽略版本
-        return "".concat(p1, "/").concat(p3);
-      }).replace(/(api\/gateway)/, "api/gateway/mock_server.proxy.".concat(mocks.mockId)),
-      mockId: mocks.mockId
-    };
-  }
-
-  return;
-};
-
 var contractsMap = new Map();
 function collectContract(contracts) {
   contracts === null || contracts === void 0 ? void 0 : contracts.forEach(contract => {
@@ -6023,75 +5965,40 @@ function _fetchFlowApiDefinition2() {
   _fetchFlowApiDefinition2 = _asyncToGenerator$4(function* (provider) {
     var [namespaceName, nameWithVersion] = provider.split("@");
     var [name, version] = nameWithVersion.split(":");
-    var isUseMock = getMockList().find(item => item.provider === "".concat(namespaceName, "@").concat(name));
-
-    if (isUseMock) {
-      var _list$;
+    var contract;
 
-      var {
-        list
-      } = yield InstanceApi_postSearchV3("FLOW_BUILDER_API_CONTRACT@EASYOPS", {
-        fields: ["name", "namespaceId", "endpoint", "response", "version", "serviceName"],
-        query: {
-          namespaceId: {
-            $eq: namespaceName
-          },
-          name: {
-            $eq: name
-          }
+    if (contract = getContract("".concat(namespaceName, ".").concat(name))) {
+      return {
+        name: contract.name,
+        namespace: contract.namespaceId,
+        serviceName: contract.serviceName,
+        version: contract.version,
+        contract: {
+          endpoint: contract.endpoint,
+          response: contract.response
         }
-      });
-
-      if ((_list$ = list[0]) !== null && _list$ !== void 0 && _list$.instanceId) {
-        var _list$2, _list$3;
-
-        return {
-          name: list[0].name,
-          namespace: (_list$2 = list[0]) === null || _list$2 === void 0 ? void 0 : _list$2.namespaceId,
-          serviceName: (_list$3 = list[0]) === null || _list$3 === void 0 ? void 0 : _list$3.serviceName,
-          version: list[0].version,
-          contract: {
-            endpoint: list[0].endpoint,
-            response: list[0].response
-          }
-        };
-      }
+      };
     } else {
-      var contract;
+      var {
+        contractData
+      } = yield ContractApi_searchSingleContract({
+        contractName: "".concat(namespaceName, ".").concat(name),
+        version
+      }); // return undefined if don't found contract
+
+      if (contractData) {
+        var _contractData$namespa, _contractData$namespa2;
 
-      if (contract = getContract("".concat(namespaceName, ".").concat(name))) {
         return {
-          name: contract.name,
-          namespace: contract.namespaceId,
-          serviceName: contract.serviceName,
-          version: contract.version,
+          name: contractData.name,
+          namespace: (_contractData$namespa = contractData.namespace) === null || _contractData$namespa === void 0 ? void 0 : (_contractData$namespa2 = _contractData$namespa[0]) === null || _contractData$namespa2 === void 0 ? void 0 : _contractData$namespa2.name,
+          serviceName: contractData.serviceName,
+          version: contractData.version,
           contract: {
-            endpoint: contract.endpoint,
-            response: contract.response
+            endpoint: contractData.endpoint,
+            response: contractData.response
           }
         };
-      } else {
-        var {
-          contractData
-        } = yield ContractApi_searchSingleContract({
-          contractName: "".concat(namespaceName, ".").concat(name),
-          version
-        }); // return undefined if don't found contract
-
-        if (contractData) {
-          var _contractData$namespa, _contractData$namespa2;
-
-          return {
-            name: contractData.name,
-            namespace: (_contractData$namespa = contractData.namespace) === null || _contractData$namespa === void 0 ? void 0 : (_contractData$namespa2 = _contractData$namespa[0]) === null || _contractData$namespa2 === void 0 ? void 0 : _contractData$namespa2.name,
-            serviceName: contractData.serviceName,
-            version: contractData.version,
-            contract: {
-              endpoint: contractData.endpoint,
-              response: contractData.response
-            }
-          };
-        }
       }
     }
   });
@@ -8047,6 +7954,9 @@ function applyColorTheme(options) {
   }
 }
 
+var formRenderer = "form-renderer.form-renderer";
+var filterProperties = ["brick", "slots", "properties", "events", "if", "context", "bricks", "mountPoint"];
+
 class Kernel {
   constructor() {
     var _this = this;
@@ -8415,6 +8325,31 @@ class Kernel {
     }
   }
 
+  _dev_only_updateFormPreviewSettings(appId, formId, formData) {
+    var {
+      routes
+    } = this.bootstrapData.storyboards.find(item => item.app.id === appId);
+    var previewPath = "${APP.homepage}/_dev_only_/form-preview/".concat(formId);
+    var previewRouteIndex = routes.findIndex(route => route.path === previewPath);
+    var newPreviewRoute = {
+      path: previewPath,
+      bricks: [{
+        brick: formRenderer,
+        properties: {
+          formData: formData
+        }
+      }],
+      menu: false,
+      exact: true
+    };
+
+    if (previewRouteIndex === -1) {
+      routes.unshift(newPreviewRoute);
+    } else {
+      routes.splice(previewRouteIndex, 1, newPreviewRoute);
+    }
+  }
+
   loadDepsOfStoryboard(storyboard) {
     return this.gracefullyLoadDeps(this._loadDepsOfStoryboard, storyboard);
   }
@@ -9115,6 +9050,299 @@ function listenOnTrackingContext(brick, trackingContextList, context) {
   }
 }
 
+function ExpandCustomForm(formData, brickConf) {
+  var errorBrick = {
+    brick: "presentational-bricks.brick-illustration",
+    properties: {
+      category: "default",
+      header: {
+        title: "参数错误"
+      },
+      mode: "guide",
+      name: "search-empty"
+    }
+  };
+
+  try {
+    var formStoryboard = getStoryboard([formData.formSchema], [], formData.fields);
+    formStoryboard[0] = _.isEmpty(formStoryboard[0]) ? errorBrick : formStoryboard[0];
+    return _objectSpread(_objectSpread({}, brickConf), {}, {
+      brick: "div",
+      slots: {
+        "": {
+          bricks: formStoryboard,
+          type: "bricks"
+        }
+      }
+    });
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn(error.message);
+    return {
+      brick: "div",
+      slots: {
+        "": {
+          bricks: [errorBrick],
+          type: "bricks"
+        }
+      }
+    };
+  }
+}
+function getDefaultProperties(_name, fields) {
+  var field = fields.filter(item => item.id === _name)[0];
+  var defaultValue = {};
+
+  if (field) {
+    switch (field.type) {
+      case "STRING":
+        defaultValue = {
+          brick: "forms.general-input",
+          properties: {
+            id: field.id,
+            name: field.id,
+            label: field.name,
+            readOnly: field.limit.includes("readOnly"),
+            required: field.limit.includes("required"),
+            placeholder: field.description
+          }
+        };
+        break;
+
+      case "INT":
+        defaultValue = {
+          brick: "forms.general-input-number",
+          properties: {
+            id: field.id,
+            name: field.id,
+            label: field.name,
+            readOnly: field.limit.includes("readOnly"),
+            required: field.limit.includes("required"),
+            placeholder: field.description,
+            precision: 0,
+            inputBoxStyle: {
+              width: "100%"
+            }
+          }
+        };
+        break;
+
+      case "BOOLEAN":
+        defaultValue = {
+          brick: "forms.general-switch",
+          properties: {
+            id: field.id,
+            name: field.id,
+            label: field.name,
+            readOnly: field.limit.includes("readOnly"),
+            required: field.limit.includes("required")
+          }
+        };
+        break;
+
+      case "FLOAT":
+        defaultValue = {
+          brick: "forms.general-input-number",
+          properties: {
+            id: field.id,
+            name: field.id,
+            label: field.name,
+            readOnly: field.limit.includes("readOnly"),
+            required: field.limit.includes("required"),
+            placeholder: field.description,
+            inputBoxStyle: {
+              width: "100%"
+            }
+          }
+        };
+        break;
+
+      case "ENUMERATED_SINGLE_OPTION":
+        defaultValue = {
+          brick: "forms.general-select",
+          properties: {
+            id: field.id,
+            name: field.id,
+            label: field.name,
+            readOnly: field.limit.includes("readOnly"),
+            required: field.limit.includes("required"),
+            options: [{
+              label: "选项一",
+              value: 1
+            }, {
+              label: "选项二",
+              value: 2
+            }],
+            placeholder: field.description,
+            inputBoxStyle: {
+              width: "100%"
+            }
+          }
+        };
+        break;
+
+      case "SELECT_MULTIPLE_ENUMERATED_TYPE":
+        defaultValue = {
+          brick: "forms.general-select",
+          properties: {
+            id: field.id,
+            name: field.id,
+            label: field.name,
+            readOnly: field.limit.includes("readOnly"),
+            required: field.limit.includes("required"),
+            mode: "multiple",
+            options: [{
+              label: "选项一",
+              value: 1
+            }, {
+              label: "选项二",
+              value: 2
+            }],
+            placeholder: field.description,
+            inputBoxStyle: {
+              width: "100%"
+            }
+          }
+        };
+        break;
+
+      case "DATE":
+        defaultValue = {
+          brick: "forms.general-date-picker",
+          properties: {
+            id: field.id,
+            name: field.id,
+            label: field.name,
+            readOnly: field.limit.includes("readOnly"),
+            required: field.limit.includes("required"),
+            placeholder: field.description
+          }
+        };
+        break;
+
+      case "TIME":
+        defaultValue = {
+          brick: "forms.general-date-picker",
+          properties: {
+            id: field.id,
+            name: field.id,
+            label: field.name,
+            readOnly: field.limit.includes("readOnly"),
+            required: field.limit.includes("required"),
+            placeholder: field.description
+          }
+        };
+        break;
+
+      case "IP":
+        defaultValue = {
+          brick: "forms.general-input",
+          properties: {
+            id: field.id,
+            name: field.id,
+            label: field.name,
+            readOnly: field.limit.includes("readOnly"),
+            required: field.limit.includes("required"),
+            placeholder: field.description,
+            pattern: /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))/
+          }
+        };
+        break;
+
+      case "JSON":
+        defaultValue = {};
+        break;
+
+      case "ARRAY":
+        defaultValue = {};
+        break;
+
+      case "STRUCTURE":
+        defaultValue = {
+          brick: "forms.cmdb-instance-select-panel",
+          properties: {
+            id: field.id,
+            name: field.id,
+            label: field.name,
+            readOnly: field.limit.includes("readOnly"),
+            required: field.limit.includes("required")
+          }
+        };
+        break;
+
+      case "STRUCTURE_ARRAY":
+        defaultValue = {
+          brick: "forms.cmdb-instance-select-panel",
+          properties: {
+            id: field.id,
+            name: field.id,
+            label: field.name,
+            readOnly: field.limit.includes("readOnly"),
+            required: field.limit.includes("required")
+          }
+        };
+        break;
+
+      default:
+        defaultValue = {
+          brick: "forms.general-input",
+          properties: {
+            id: field.id,
+            name: field.id,
+            label: field.name,
+            readOnly: field.limit.includes("readOnly"),
+            required: field.limit.includes("required"),
+            placeholder: field.description
+          }
+        };
+        break;
+    }
+  }
+
+  return defaultValue;
+}
+function getStoryboard(datasource, result, fields) {
+  var _loop = function (i) {
+    var dataItem = datasource[i];
+    var resultItem = {}; //数据初始化：根据id,字段类型获取默认属性
+
+    var defaultProperties = getDefaultProperties(dataItem.id, fields); //数据初始化：与默认属性进行合并
+
+    Object.keys(defaultProperties).forEach(item => {
+      if (!dataItem[item]) {
+        dataItem[item] = defaultProperties[item];
+      } else if (dataItem[item] && typeof dataItem[item] === "object") {
+        dataItem[item] = _objectSpread(_objectSpread({}, defaultProperties[item]), dataItem[item]);
+      }
+    });
+    Object.keys(dataItem).forEach(item => {
+      if (filterProperties.includes(item)) {
+        resultItem[item] = dataItem[item];
+      }
+    });
+
+    if (Array.isArray(dataItem.bricks)) {
+      var _Object$keys;
+
+      resultItem["slots"] = _.groupBy(getStoryboard(dataItem.bricks, [], fields), "mountPoint");
+      (_Object$keys = Object.keys(resultItem["slots"])) === null || _Object$keys === void 0 ? void 0 : _Object$keys.forEach(item => {
+        resultItem.slots[item] = {
+          bricks: resultItem.slots[item],
+          type: "bricks"
+        };
+      });
+    }
+
+    result[i] = resultItem;
+  };
+
+  for (var i = 0; i < datasource.length; i++) {
+    _loop(i);
+  }
+
+  return result;
+}
+
 class LocationContext {
   constructor(kernel, location) {
     _defineProperty$1(this, "query", void 0);
@@ -9611,6 +9839,12 @@ class LocationContext {
         yield _this6.kernel.loadDynamicBricksInBrickConf(expandedBrickConf);
       }
 
+      if (brick.type === formRenderer) {
+        var formData = brick.properties.formData;
+        expandedBrickConf = ExpandCustomForm(formData, brickConf);
+        yield _this6.kernel.loadDynamicBricksInBrickConf(expandedBrickConf);
+      }
+
       if (expandedBrickConf.exports) {
         for (var [prop, ctxName] of Object.entries(expandedBrickConf.exports)) {
           if (typeof ctxName === "string" && ctxName.startsWith("CTX.")) {
@@ -10339,6 +10573,57 @@ function shouldBeDefaultCollapsed(defaultCollapsed, defaultCollapsedBreakpoint)
   return defaultCollapsed || defaultCollapsedBreakpoint && document.documentElement.clientWidth < defaultCollapsedBreakpoint;
 }
 
+var mocks = {
+  mockId: null,
+  mockList: []
+};
+function registerMock(useMocks) {
+  var _useMocks$mockList;
+
+  if (useMocks) mocks = _objectSpread(_objectSpread({}, useMocks), {}, {
+    mockList: (_useMocks$mockList = useMocks.mockList) === null || _useMocks$mockList === void 0 ? void 0 : _useMocks$mockList.map(item => {
+      var isFlowAPi = isCustomApiProvider(item.provider);
+      return _objectSpread(_objectSpread({}, item), {}, {
+        uri: "".concat(isFlowAPi ? item.uri.replace(/(.+?)\/(.+)/, (_match, p1, p2) => {
+          return "/".concat(p1, "(@\\d+\\.\\d+\\.\\d+)?/").concat(p2, "$");
+        }) : "/".concat(item.uri.split(".").slice(2).join("."), "$")).replace(/:\w+/g, "([^/]+)")
+      });
+    })
+  });
+}
+var getMockInfo = (requestUrl, method) => {
+  var transformGetMethod = method => {
+    if (method.toUpperCase() === "LIST") {
+      return "GET";
+    }
+
+    return method === null || method === void 0 ? void 0 : method.toUpperCase();
+  };
+
+  var item = mocks.mockList.find(item => new RegExp(item.uri).test(requestUrl) && transformGetMethod(item.method) === (method === null || method === void 0 ? void 0 : method.toUpperCase()));
+
+  if (item) {
+    return {
+      url: requestUrl.replace(/(api\/gateway\/.+?)(@\d+\.\d+\.\d+)?\/(.+)/, (_match, p1, _p2, p3) => {
+        // 忽略版本
+        return "".concat(p1, "/").concat(p3);
+      }).replace(/(api\/gateway)/, "api/gateway/mock_server.proxy.".concat(mocks.mockId)),
+      mockId: mocks.mockId
+    };
+  }
+
+  return;
+};
+
+function registerFormRenderer() {
+  customElements.get(formRenderer) || customElements.define(formRenderer, class FormElement extends HTMLElement {
+    get $$typeof() {
+      return "formRenderer";
+    }
+
+  });
+}
+
 class Router {
   constructor(kernel) {
     _defineProperty$1(this, "defaultCollapsed", false);
@@ -10547,6 +10832,7 @@ class Router {
 
         registerStoryboardFunctions((_storyboard$meta = storyboard.meta) === null || _storyboard$meta === void 0 ? void 0 : _storyboard$meta.functions, storyboard.app);
         registerMock((_storyboard$meta2 = storyboard.meta) === null || _storyboard$meta2 === void 0 ? void 0 : _storyboard$meta2.mocks);
+        registerFormRenderer();
         collectContract((_storyboard$meta3 = storyboard.meta) === null || _storyboard$meta3 === void 0 ? void 0 : _storyboard$meta3.contracts);
       }
 
@@ -10606,23 +10892,8 @@ class Router {
         };
 
         try {
-          var specificTemplatePreviewIndex = findLastIndex(storyboard.routes, route => route.path.startsWith("${APP.homepage}/_dev_only_/template-preview/"));
-          var specificSnippetPreviewIndex = findLastIndex(storyboard.routes, route => route.path.startsWith("${APP.homepage}/_dev_only_/snippet-preview/"));
-          var mergedRoutes = [...storyboard.routes.slice(0, specificTemplatePreviewIndex + 1), ...storyboard.routes.slice(0, specificSnippetPreviewIndex + 1), {
-            path: "${APP.homepage}/_dev_only_/template-preview/:templateId",
-            bricks: [{
-              brick: "span"
-            }],
-            menu: false,
-            exact: true
-          }, {
-            path: "${APP.homepage}/_dev_only_/snippet-preview/:snippetId",
-            bricks: [{
-              brick: "span"
-            }],
-            menu: false,
-            exact: true
-          }, ...storyboard.routes.slice(specificTemplatePreviewIndex + 1)];
+          var mergedRoutes = _this3.MergePreviewRouter(storyboard.routes);
+
           yield locationContext.mountRoutes(mergedRoutes, undefined, mountRoutesResult);
         } catch (error) {
           // eslint-disable-next-line no-console
@@ -10832,6 +11103,50 @@ class Router {
       subMenu: mountResult.menuBar.subMenu
     };
   }
+
+  MergePreviewRouter(router) {
+    var mergedRoutes = router;
+    var specificTemplatePreviewIndex = findLastIndex(mergedRoutes, route => route.path.startsWith("${APP.homepage}/_dev_only_/template-preview/"));
+
+    if (specificTemplatePreviewIndex > -1) {
+      mergedRoutes = [...mergedRoutes.slice(0, specificTemplatePreviewIndex + 1), {
+        path: "${APP.homepage}/_dev_only_/template-preview/:templateId",
+        bricks: [{
+          brick: "span"
+        }],
+        menu: false,
+        exact: true
+      }, ...mergedRoutes.slice(specificTemplatePreviewIndex + 1)];
+    }
+
+    var specificSnippetPreviewIndex = findLastIndex(mergedRoutes, route => route.path.startsWith("${APP.homepage}/_dev_only_/snippet-preview/"));
+
+    if (specificSnippetPreviewIndex > -1) {
+      mergedRoutes = [...mergedRoutes.slice(0, specificSnippetPreviewIndex + 1), {
+        path: "${APP.homepage}/_dev_only_/snippet-preview/:snippetId",
+        bricks: [{
+          brick: "span"
+        }],
+        menu: false,
+        exact: true
+      }, ...mergedRoutes.slice(specificSnippetPreviewIndex + 1)];
+    }
+
+    var specificFormPreviewIndex = findLastIndex(mergedRoutes, route => route.path.startsWith("${APP.homepage}/_dev_only_/form-preview/"));
+
+    if (specificFormPreviewIndex > -1) {
+      mergedRoutes = [...mergedRoutes.slice(0, specificFormPreviewIndex + 1), {
+        path: "${APP.homepage}/_dev_only_/form-preview/:FormId",
+        bricks: [{
+          brick: "span"
+        }],
+        menu: false,
+        exact: true
+      }, ...mergedRoutes.slice(specificFormPreviewIndex + 1)];
+    }
+
+    return mergedRoutes;
+  }
   /* istanbul ignore next */
 
 
@@ -13252,7 +13567,8 @@ var developHelper = {
   checkoutTplContext: noop,
   updateStoryboard: _dev_only_updateStoryboard,
   updateTemplatePreviewSettings: _dev_only_updateTemplatePreviewSettings,
-  updateSnippetPreviewSettings: _dev_only_updateSnippetPreviewSettings
+  updateSnippetPreviewSettings: _dev_only_updateSnippetPreviewSettings,
+  updateFormPreviewSettings: _dev_only_updateFormPreviewSettings
 };
 
 var _excluded$2 = ["type"];