@next-core/brick-kit 2.130.0 → 2.132.0

package/dist/index.esm.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _asyncToGenerator$3 from '@babel/runtime/helpers/asyncToGenerator';
 import _defineProperty$1 from '@babel/runtime/helpers/defineProperty';
 import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle, useMemo, useContext, createContext, useReducer, useCallback } from 'react';
-import { JsonStorage, toPath, computeRealRoutePath, hasOwnProperty, isObject, isEvaluable, transformAndInject, transform, trackContext, trackState, scanPermissionActionsInStoryboard, precookFunction, cook, resolveContextConcurrently, syncResolveContextConcurrently, shouldAllowRecursiveEvaluations, preevaluate, inject, deepFreeze, createProviderClass, getTemplateDepsOfStoryboard, getDllAndDepsOfStoryboard, asyncProcessStoryboard, getDllAndDepsByResource, scanRouteAliasInStoryboard, prefetchScript, scanBricksInBrickConf, scanProcessorsInAny, loadScript, matchPath, scanAppGetMenuInAny, asyncProcessBrick, scanInstalledAppsInStoryboard, restoreDynamicTemplates, scanStoryboard, mapCustomApisToNameAndNamespace } from '@next-core/brick-utils';
+import { JsonStorage, toPath, computeRealRoutePath, hasOwnProperty, isObject, isEvaluable, transformAndInject, transform, trackContext, trackState, scanPermissionActionsInStoryboard, precookFunction, cook, resolveContextConcurrently, syncResolveContextConcurrently, trackUsedState, trackUsedContext, shouldAllowRecursiveEvaluations, preevaluate, inject, deepFreeze, createProviderClass, getTemplateDepsOfStoryboard, getDllAndDepsOfStoryboard, asyncProcessStoryboard, getDllAndDepsByResource, scanRouteAliasInStoryboard, prefetchScript, scanBricksInBrickConf, scanProcessorsInAny, loadScript, matchPath, scanAppGetMenuInAny, asyncProcessBrick, scanInstalledAppsInStoryboard, restoreDynamicTemplates, scanStoryboard, mapCustomApisToNameAndNamespace } from '@next-core/brick-utils';
 import _, { set, get, difference, identity, uniqueId, cloneDeep, clamp, isNil, isEmpty, sortBy, merge, isObject as isObject$1, pick, orderBy, omit, findLastIndex, noop, isString } from 'lodash';
 import { http, HttpResponseError, HttpFetchError } from '@next-core/brick-http';
 import moment from 'moment';
@@ -1565,44 +1565,6 @@ function getDynamicReadOnlyProxy(_ref) {
   });
 }
 
-var misc;
-function getRuntimeMisc() {
-  if (!misc) {
-    misc = {
-      isInIframe: false,
-      isInIframeOfSameSite: false,
-      isInIframeOfNext: false,
-      isInIframeOfVisualBuilder: false,
-      isInIframeOfLegacyConsole: false
-    };
-
-    if (window !== window.parent) {
-      misc.isInIframe = true;
-
-      try {
-        // Handle:
-        // - Previewing in visual builder by iframe.
-        // - Nesting next in next.
-        // - Nesting console in next.
-        if (window.origin === window.parent.origin) {
-          misc.isInIframeOfSameSite = true;
-          var selfIsNext = getBasePath() === "/next/";
-          var parentPathname = window.parent.location.pathname;
-          var parentIsNext = parentPathname.startsWith("/next/");
-          misc.isInIframeOfNext = (Number(selfIsNext) ^ Number(parentIsNext)) === 0;
-          misc.isInIframeOfVisualBuilder = parentPathname.startsWith("".concat(parentIsNext ? "/next" : "", "/visual-builder/"));
-          misc.isInIframeOfLegacyConsole = selfIsNext && !parentIsNext;
-        }
-      } catch (e) {// do nothing
-      }
-    }
-
-    Object.freeze(misc);
-  }
-
-  return misc;
-}
-
 // `GeneralGlobals` are globals which are page-state-agnostic,
 // thus they can be used both in storyboard expressions and functions.
 function getGeneralGlobals(attemptToVisitGlobals, options) {
@@ -1655,9 +1617,6 @@ function getIndividualGlobal(variableName, _ref) {
         getCssPropertyValue: collectCoverage ? () => "" : getCssPropertyValue
       };
 
-    case "RUNTIME_MISC":
-      return collectCoverage ? fakeRuntimeMisc() : getRuntimeMisc();
-
     case "console":
       return isStoryboardFunction ? getReadOnlyProxy(console) : undefined;
 
@@ -1693,16 +1652,6 @@ function fakeCheckPermissions() {
   return true;
 }
 
-function fakeRuntimeMisc() {
-  return {
-    isInIframe: false,
-    isInIframeOfSameSite: false,
-    isInIframeOfNext: false,
-    isInIframeOfVisualBuilder: false,
-    isInIframeOfLegacyConsole: false
-  };
-}
-
 /** @internal */
 
 /** @internal */
@@ -2041,7 +1990,7 @@ class StoryboardContextWrapper {
   }
 
   updateValue(name, value, method) {
-    var _item$eventTarget;
+    var _item$eventTarget2;
 
     if (!this.data.has(name)) {
       if (this.tplContextId) {
@@ -2065,6 +2014,22 @@ class StoryboardContextWrapper {
       return;
     }
 
+    if (method === "refresh") {
+      if (!item.refresh) {
+        throw new Error("You can not refresh the storyboard context \"".concat(name, "\" which has no resolve."));
+      }
+
+      item.refresh().then(val => {
+        var _item$eventTarget;
+
+        item.value = val;
+        (_item$eventTarget = item.eventTarget) === null || _item$eventTarget === void 0 ? void 0 : _item$eventTarget.dispatchEvent(new CustomEvent(this.tplContextId ? "state.change" : "context.change", {
+          detail: item.value
+        }));
+      }, handleHttpError);
+      return;
+    }
+
     if (method === "replace") {
       item.value = value;
     } else {
@@ -2077,7 +2042,7 @@ class StoryboardContextWrapper {
       }
     }
 
-    (_item$eventTarget = item.eventTarget) === null || _item$eventTarget === void 0 ? void 0 : _item$eventTarget.dispatchEvent(new CustomEvent(this.tplContextId ? "state.change" : "context.change", {
+    (_item$eventTarget2 = item.eventTarget) === null || _item$eventTarget2 === void 0 ? void 0 : _item$eventTarget2.dispatchEvent(new CustomEvent(this.tplContextId ? "state.change" : "context.change", {
       detail: item.value
     }));
   }
@@ -2158,30 +2123,65 @@ function _resolveNormalStoryboardContext() {
       return false;
     }
 
-    var isResolve = false;
-    var value = getDefinedTemplateState(!!storyboardContextWrapper.tplContextId, contextConf, brick);
+    var isTemplateState = !!storyboardContextWrapper.tplContextId;
+    var value = getDefinedTemplateState(isTemplateState, contextConf, brick);
+    var refresh = null;
+    var isLazyResolve = false;
 
     if (value === undefined) {
       if (contextConf.resolve) {
         if (looseCheckIf(contextConf.resolve, mergedContext)) {
-          isResolve = true;
-          var valueConf = {};
-          yield _internalApiGetResolver().resolveOne("reference", _objectSpread({
-            transform: "value",
-            transformMapArray: false
-          }, contextConf.resolve), valueConf, null, mergedContext);
-          value = valueConf.value;
+          refresh = /*#__PURE__*/function () {
+            var _ref = _asyncToGenerator$3(function* () {
+              var valueConf = {};
+              yield _internalApiGetResolver().resolveOne("reference", _objectSpread({
+                transform: "value",
+                transformMapArray: false
+              }, contextConf.resolve), valueConf, null, mergedContext);
+              return valueConf.value;
+            });
+
+            return function refresh() {
+              return _ref.apply(this, arguments);
+            };
+          }();
+
+          isLazyResolve = contextConf.resolve.lazy;
+
+          if (!isLazyResolve) {
+            value = yield refresh();
+          }
         } else if (!hasOwnProperty(contextConf, "value")) {
           return false;
         }
       }
 
-      if (!isResolve && contextConf.value !== undefined) {
+      if ((!refresh || isLazyResolve) && contextConf.value !== undefined) {
+        // If the context has no resolve, just use its `value`.
+        // Or if the resolve is ignored or lazy, use its `value` as a fallback.
         value = computeRealValue(contextConf.value, mergedContext, true);
       }
+
+      if (contextConf.track) {
+        // Track its dependencies and auto update when each of them changed.
+        var deps = (isTemplateState ? trackUsedState : trackUsedContext)(refresh ? contextConf.resolve : contextConf.value);
+
+        for (var dep of deps) {
+          var _eventTarget;
+
+          var ctx = storyboardContextWrapper.get().get(dep);
+          ctx === null || ctx === void 0 ? void 0 : (_eventTarget = ctx.eventTarget) === null || _eventTarget === void 0 ? void 0 : _eventTarget.addEventListener(isTemplateState ? "state.change" : "context.change", () => {
+            if (refresh) {
+              storyboardContextWrapper.updateValue(contextConf.name, undefined, "refresh");
+            } else {
+              storyboardContextWrapper.updateValue(contextConf.name, computeRealValue(contextConf.value, mergedContext, true), "replace");
+            }
+          });
+        }
+      }
     }
 
-    resolveFreeVariableValue(value, contextConf, mergedContext, storyboardContextWrapper, brick);
+    resolveFreeVariableValue(value, contextConf, mergedContext, storyboardContextWrapper, brick, refresh);
     return true;
   });
   return _resolveNormalStoryboardContext.apply(this, arguments);
@@ -2212,12 +2212,13 @@ function getDefinedTemplateState(isTemplateState, contextConf, brick) {
   }
 }
 
-function resolveFreeVariableValue(value, contextConf, mergedContext, storyboardContextWrapper, brick) {
+function resolveFreeVariableValue(value, contextConf, mergedContext, storyboardContextWrapper, brick, refresh) {
   var newContext = {
     type: "free-variable",
     value,
     // This is required for tracking context, even if no `onChange` is specified.
-    eventTarget: new EventTarget$1()
+    eventTarget: new EventTarget$1(),
+    refresh
   };
 
   if (contextConf.onChange) {
@@ -6288,10 +6289,12 @@ function listenerFactory(handler, context, runtimeBrick) {
 
       case "context.assign":
       case "context.replace":
+      case "context.refresh":
         return builtinContextListenerFactory(method, handler.args, handler, context);
 
       case "state.update":
-        return builtinStateListenerFactory(handler.args, handler, context);
+      case "state.refresh":
+        return builtinStateListenerFactory(method, handler.args, handler, context);
 
       case "tpl.dispatchEvent":
         return builtinTplDispatchEventFactory(handler.args, handler, context);
@@ -6435,7 +6438,7 @@ function builtinContextListenerFactory(method, args, ifContainer, context) {
   };
 }
 
-function builtinStateListenerFactory(args, ifContainer, context) {
+function builtinStateListenerFactory(method, args, ifContainer, context) {
   return function (event) {
     if (!looseCheckIf(ifContainer, _objectSpread(_objectSpread({}, context), {}, {
       event
@@ -6445,7 +6448,7 @@ function builtinStateListenerFactory(args, ifContainer, context) {
 
     var tplContext = getTplContext(context.tplContextId);
     var [name, value] = argsFactory(args, context, event);
-    tplContext.state.updateValue(name, value, "replace");
+    tplContext.state.updateValue(name, value, method === "refresh" ? method : "replace");
   };
 }
 
@@ -8766,6 +8769,44 @@ function getPropsOfCustomTemplate(tagName) {
   return ((_state$map = state === null || state === void 0 ? void 0 : state.map(item => item.name)) !== null && _state$map !== void 0 ? _state$map : []).concat(Object.keys((_proxy$properties = proxy === null || proxy === void 0 ? void 0 : proxy.properties) !== null && _proxy$properties !== void 0 ? _proxy$properties : {}));
 }
 
+var misc;
+function getRuntimeMisc() {
+  if (!misc) {
+    misc = {
+      isInIframe: false,
+      isInIframeOfSameSite: false,
+      isInIframeOfNext: false,
+      isInIframeOfVisualBuilder: false,
+      isInIframeOfLegacyConsole: false
+    };
+
+    if (window !== window.parent) {
+      misc.isInIframe = true;
+
+      try {
+        // Handle:
+        // - Previewing in visual builder by iframe.
+        // - Nesting next in next.
+        // - Nesting console in next.
+        if (window.origin === window.parent.origin) {
+          misc.isInIframeOfSameSite = true;
+          var selfIsNext = getBasePath() === "/next/";
+          var parentPathname = window.parent.location.pathname;
+          var parentIsNext = parentPathname.startsWith("/next/");
+          misc.isInIframeOfNext = (Number(selfIsNext) ^ Number(parentIsNext)) === 0;
+          misc.isInIframeOfVisualBuilder = parentPathname.startsWith("".concat(parentIsNext ? "/next" : "", "/visual-builder/"));
+          misc.isInIframeOfLegacyConsole = selfIsNext && !parentIsNext;
+        }
+      } catch (e) {// do nothing
+      }
+    }
+
+    Object.freeze(misc);
+  }
+
+  return misc;
+}
+
 class Kernel {
   constructor() {
     var _this = this;
@@ -8896,6 +8937,11 @@ class Kernel {
 
       listenDevtoolsEagerly();
       _this2.mountPoints = mountPoints;
+
+      if (getRuntimeMisc().isInIframeOfSameSite && !getRuntimeMisc().isInIframeOfVisualBuilder) {
+        document.body.classList.add("bars-hidden-in-iframe");
+      }
+
       yield Promise.all([_this2.loadCheckLogin(), _this2.loadMicroApps()]);
 
       if (_this2.bootstrapData.storyboards.length === 0) {
@@ -9177,7 +9223,8 @@ class Kernel {
 
   _dev_only_updateTemplatePreviewSettings(appId, templateId, settings) {
     var {
-      routes
+      routes,
+      app
     } = this.bootstrapData.storyboards.find(item => item.app.id === appId);
     var previewPath = "${APP.homepage}/_dev_only_/template-preview/".concat(templateId);
     var previewRouteIndex = routes.findIndex(route => route.path === previewPath);
@@ -9187,7 +9234,8 @@ class Kernel {
         brick: templateId
       }, pick(settings, "properties", "events", "lifeCycle", "context"))],
       menu: false,
-      exact: true
+      exact: true,
+      hybrid: app.legacy === "iframe"
     };
 
     if (previewRouteIndex === -1) {
@@ -9201,7 +9249,8 @@ class Kernel {
     var _snippetData$bricks;
 
     var {
-      routes
+      routes,
+      app
     } = this.bootstrapData.storyboards.find(item => item.app.id === appId);
     var previewPath = "${APP.homepage}/_dev_only_/snippet-preview/".concat(snippetData.snippetId);
     var previewRouteIndex = routes.findIndex(route => route.path === previewPath);
@@ -9211,7 +9260,8 @@ class Kernel {
         brick: "span"
       }],
       menu: false,
-      exact: true
+      exact: true,
+      hybrid: app.legacy === "iframe"
     };
 
     if (previewRouteIndex === -1) {
@@ -10802,7 +10852,7 @@ class LocationContext {
       if (expandedBrickConf.exports) {
         for (var [prop, ctxName] of Object.entries(expandedBrickConf.exports)) {
           if (typeof ctxName === "string" && ctxName.startsWith("CTX.")) {
-            _this6.storyboardContextWrapper.set(ctxName.substr(4), {
+            _this6.storyboardContextWrapper.set(ctxName.substring(4), {
               type: "brick-property",
               brick,
               prop
@@ -11381,19 +11431,33 @@ class Resolver {
         }
       }
 
-      var cacheKey = JSON.stringify({
-        provider,
-        useProvider,
-        method,
-        args
-      });
+      var actualArgs = args ? ref ? args // `args` are already computed for `defineResolves`
+      : context ? computeRealValue(args, context, true) : args : providerBrick.args || [];
+      var cacheKey;
+
+      try {
+        // `actualArgs` may contain circular references, which makes
+        // JSON stringify failed, thus we fallback to original args.
+        cacheKey = JSON.stringify({
+          provider,
+          useProvider,
+          method,
+          actualArgs
+        });
+      } catch (e) {
+        cacheKey = JSON.stringify({
+          provider,
+          useProvider,
+          method,
+          args
+        });
+      }
+
       var promise;
 
       if (_this2.cache.has(cacheKey)) {
         promise = _this2.cache.get(cacheKey);
       } else {
-        var actualArgs = args ? ref ? args // `args` are already computed for `defineResolves`
-        : context ? computeRealValue(args, context, true) : args : providerBrick.args || [];
         promise = _asyncToGenerator$3(function* () {
           if (useProvider) {
             actualArgs = yield getArgsOfCustomApi(useProvider, actualArgs);
@@ -14704,5 +14768,5 @@ function useProvider() {
   }));
 }
 
-export { BrickAsComponent, BrickWrapper, DisplayByFeatureFlags, EasyopsEmpty, ErrorBoundary, FeatureFlagsProvider, ForwardRefSingleBrickAsComponent, ModalElement, SingleBrickAsComponent, StoryboardFunctionRegistryFactory, UpdatingElement, authenticate, batchSetAppsLocalTheme, checkIf, checkIfByTransform, createHistory, createRuntime, developHelper, doTransform, event, getAuth, getCssPropertyValue, getCurrentTheme, getHistory, getMockInfo, getRuntime, handleHttpError, httpErrorToString, i18nText, initI18n, isLoggedIn, logout, looseCheckIf, looseCheckIfByTransform, looseCheckIfOfComputed, method, preprocessTransformProperties, property, reTransformForDevtools, renderEasyopsEmpty, transformElementProperties, transformIntermediateData, transformProperties, useApplyPageTitle, useCurrentApp, useCurrentMode, useCurrentTheme, useFeatureFlags, useLocation, useProvider, useRecentApps };
+export { BrickAsComponent, BrickWrapper, DisplayByFeatureFlags, EasyopsEmpty, ErrorBoundary, FeatureFlagsProvider, ForwardRefSingleBrickAsComponent, ModalElement, SingleBrickAsComponent, StoryboardFunctionRegistryFactory, UpdatingElement, authenticate, batchSetAppsLocalTheme, checkIf, checkIfByTransform, createHistory, createRuntime, developHelper, doTransform, event, getAuth, getCssPropertyValue, getCurrentTheme, getHistory, getMockInfo, getRuntime, getRuntimeMisc, handleHttpError, httpErrorToString, i18nText, initI18n, isLoggedIn, logout, looseCheckIf, looseCheckIfByTransform, looseCheckIfOfComputed, method, preprocessTransformProperties, property, reTransformForDevtools, renderEasyopsEmpty, transformElementProperties, transformIntermediateData, transformProperties, useApplyPageTitle, useCurrentApp, useCurrentMode, useCurrentTheme, useFeatureFlags, useLocation, useProvider, useRecentApps };
 //# sourceMappingURL=index.esm.js.map