@movable/studio-framework 3.0.0-canary.0 → 3.0.0-esmodules.0

package/dist/index.es.js

@@ -44,13 +44,50 @@ function _extends() {
 }
 
 const {
-  entries
+  entries: entries$2
 } = Object;
-const STYLE_WHITELIST = new Set(['top', 'left', 'color', 'width', 'border', 'borderRadius', 'borderColor', 'borderStyle', 'borderWidth', 'boxSizing', 'boxShadow', 'height', 'marginTop', 'marginLeft', 'marginBottom', 'marginRight', 'zIndex', 'fontSize', 'position', 'textAlign', 'transform', 'textShadow', 'lineHeight', 'fontFamily', 'fontWeight', 'textTransform', 'letterSpacing', 'backgroundColor', 'backgroundImage', 'transformOrigin', 'opacity', 'overflow', 'display', 'flexDirection', 'justifyContent', 'whiteSpace']);
+const STYLE_WHITELIST = {
+  top: true,
+  left: true,
+  color: true,
+  width: true,
+  border: true,
+  borderRadius: true,
+  borderColor: true,
+  borderStyle: true,
+  borderWidth: true,
+  boxSizing: true,
+  boxShadow: true,
+  height: true,
+  marginTop: true,
+  marginLeft: true,
+  marginBottom: true,
+  marginRight: true,
+  zIndex: true,
+  fontSize: true,
+  position: true,
+  textAlign: true,
+  transform: true,
+  textShadow: true,
+  lineHeight: true,
+  fontFamily: true,
+  fontWeight: true,
+  textTransform: true,
+  letterSpacing: true,
+  backgroundColor: true,
+  backgroundImage: true,
+  transformOrigin: true,
+  opacity: true,
+  overflow: true,
+  display: true,
+  flexDirection: true,
+  justifyContent: true,
+  whiteSpace: true
+};
 const PROPERTY_TRANSFORMS = {
   transform: value => `rotate(${value}deg)`
 };
-const TRANSFORMS_MAP = new Map(entries(PROPERTY_TRANSFORMS));
+const TRANSFORMS_MAP = new Map(entries$2(PROPERTY_TRANSFORMS));
 
 function transformStyle(key, value) {
   const transform = TRANSFORMS_MAP.get(key);
@@ -58,9 +95,13 @@ function transformStyle(key, value) {
 }
 
 function styleFromAttributes(tag) {
-  return entries(tag).filter(([key]) => STYLE_WHITELIST.has(key)).map(([key, value]) => [key, transformStyle(key, value)]).reduce((result, [key, value]) => ({ ...result,
-    [key]: value
-  }), {});
+  const result = {};
+
+  for (const key of Object.keys(tag)) {
+    if (STYLE_WHITELIST[key]) result[key] = transformStyle(key, tag[key]);
+  }
+
+  return result;
 }
 
 function normalizeRichTextStyles(attributes = {}) {
@@ -121,7 +162,7 @@ class StyledElement extends React.Component {
         tag,
         registryResolver
       } = this.props;
-      const elementModifierFunctions = resolveElementModifiers((tag === null || tag === void 0 ? void 0 : tag.appliedElementModifiers) || [], registryResolver);
+      const elementModifierFunctions = resolveElementModifiers(tag?.appliedElementModifiers || [], registryResolver);
       runModifiers(domNode, elementModifierFunctions);
     }
   }
@@ -364,6 +405,13 @@ function StudioErrorWrapper(error, message) {
 
   return error.clone(wrappedMessage);
 }
+class StudioError extends BaseStudioError {
+  constructor(dynamicProperty, message) {
+    super(message);
+    this.setSourceDynamicProperty(dynamicProperty);
+  }
+
+}
 
 function getStateTuple(prop, resolver) {
   if (!prop) {
@@ -427,6 +475,7 @@ class TagComponent extends React.Component {
   getPropertyWithFallback(prop, fallback) {
     const {
       tag,
+      canvas,
       propertyResolver
     } = this.props;
     const [result, error] = getStateTuple(prop, propertyResolver);
@@ -436,7 +485,7 @@ class TagComponent extends React.Component {
 
     if (propertyFallback) {
       const warning = error ? StudioErrorWrapper(error, 'Fallback Warning') : new BaseStudioError('Fallback Warning');
-      const consoleMessage = warning.setErrorType('FallbackWarning').setTag(tag).setSourceDynamicProperty(prop).setEntryDynamicProperty(prop);
+      const consoleMessage = warning.setErrorType('FallbackWarning').setTag(tag).setCanvas(canvas).setSourceType('tag').setSourceDynamicProperty(prop).setEntryDynamicProperty(prop);
       console.warn(consoleMessage);
       return propertyFallback;
     }
@@ -444,10 +493,10 @@ class TagComponent extends React.Component {
     if (passedFallback) return fallback;
 
     if (error) {
-      throw StudioErrorWrapper(error).setTag(tag);
+      throw StudioErrorWrapper(error).setTag(tag).setCanvas(canvas).setSourceType('tag');
     }
 
-    throw new BaseStudioError('Missing Data').setErrorType('MissingData').setTag(tag).setSourceDynamicProperty(prop).setEntryDynamicProperty(prop);
+    throw new BaseStudioError('Missing Data').setErrorType('MissingData').setTag(tag).setCanvas(canvas).setSourceType('tag').setSourceDynamicProperty(prop).setEntryDynamicProperty(prop);
   }
 
   constructor(props) {
@@ -495,7 +544,8 @@ class Tags extends React.Component {
       registryResolver,
       propertyResolver,
       onPendingPromise,
-      tags
+      tags,
+      canvas
     } = this.props;
     return tags.map((tag, index) => {
       const {
@@ -507,11 +557,13 @@ class Tags extends React.Component {
         registryResolver: registryResolver
       }, subtags ? /*#__PURE__*/React.createElement(Tags, {
         tags: subtags,
+        canvas: canvas,
         registryResolver: registryResolver,
         propertyResolver: propertyResolver,
         onPendingPromise: onPendingPromise
       }) : /*#__PURE__*/React.createElement(TagComponent, {
         tag: tag,
+        canvas: canvas,
         registryResolver: registryResolver,
         propertyResolver: propertyResolver,
         onPendingPromise: onPendingPromise
@@ -530,7 +582,7 @@ class SizeContainer extends React.Component {
         canvas,
         registryResolver
       } = this.props;
-      const elementModifierFunctions = resolveElementModifiers((canvas === null || canvas === void 0 ? void 0 : canvas.appliedElementModifiers) || [], registryResolver);
+      const elementModifierFunctions = resolveElementModifiers(canvas?.appliedElementModifiers || [], registryResolver);
       runModifiers(domNode, elementModifierFunctions);
     }
   }
@@ -646,7 +698,6 @@ function contextAccessor(context, cb) {
 let _Symbol$iterator;
 
 const ERROR_KEY = Symbol('error');
-const TEMP_STORAGE = Symbol('temporary-key');
 
 function isError(t) {
   return t && typeof t === 'object' && ERROR_KEY in t;
@@ -666,6 +717,8 @@ class CacheMap {
     _defineProperty(this, "acceptingKeys", true);
 
     _defineProperty(this, "tempContext", void 0);
+
+    _defineProperty(this, "tempStorageKey", context => JSON.stringify(context));
   }
 
   get(context) {
@@ -703,11 +756,12 @@ class CacheMap {
 
   freezeContext() {
     this.acceptingKeys = false;
+    const temp = this.tempStorageKey(this.tempContext);
 
-    if (this.cache.has(TEMP_STORAGE)) {
-      const value = this.cache.get(TEMP_STORAGE);
+    if (this.cache.has(temp)) {
+      const value = this.cache.get(temp);
       const context = this.tempContext;
-      this.cache.delete(TEMP_STORAGE);
+      this.cache.delete(temp);
       this.cache.set(this.cacheKeyFor(context), value);
     }
   }
@@ -725,7 +779,7 @@ class CacheMap {
   cacheKeyFor(context) {
     if (this.acceptingKeys) {
       this.tempContext = context;
-      return TEMP_STORAGE;
+      return this.tempStorageKey(context);
     }
 
     if (this.keyCache.has(context)) {
@@ -784,6 +838,7 @@ class ComputeThrottler {
       result = compute();
     } catch (e) {
       this.isPending = false;
+      this.tryNextInQueue();
       throw e;
     }
 
@@ -874,6 +929,31 @@ function parseGetPropertyArgs(args) {
     return [false, '', arg3];
   }
 }
+function parseGetPropertyProxyArgs(args) {
+  let callback = null;
+
+  if (typeof args[args.length - 1] === 'function') {
+    callback = args.pop();
+  }
+
+  if (!callback) {
+    callback = (_, error) => {
+      if (error) {
+        throw error;
+      }
+    };
+  }
+
+  const [arg1, arg2, arg3] = args;
+
+  if (typeof arg2 === 'string' && typeof arg3 !== 'function') {
+    return [arg1, arg2, arg3, callback];
+  } else if (typeof arg1 === 'string' && typeof arg2 !== 'function' && typeof arg2 !== 'string') {
+    return [false, arg1, arg2, callback];
+  } else if (typeof arg3 !== 'function') {
+    return [false, '', arg3, callback];
+  }
+}
 function parseSetPropertyArgs(args) {
   if (args.length === 2) {
     const [arg1, arg2] = args;
@@ -883,18 +963,42 @@ function parseSetPropertyArgs(args) {
   }
 }
 
-let DebugType;
+/** This implementation is adapted from uuidjs rather than requiring the full library
+ * see: https://github.com/movableink/studio-framework/pull/762#discussion_r555175040
+ */
+const byteToHex = [];
+
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).substr(1));
+}
+
+function generateV4Uuid() {
+  // generate cryptographically strong random numbers
+  // see: github.com/uuidjs/uuid/blob/master/src/rng-browser.js
+  const unsigned8BitArray = new Uint8Array(16);
+  const getRandomValues = crypto.getRandomValues.bind(crypto);
+  const randomValues = getRandomValues(unsigned8BitArray); // per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+  // see: github.com/uuidjs/uuid/blob/master/src/v4.js
 
-(function (DebugType) {
-  DebugType["cacheRead"] = "cache-read";
-  DebugType["propertyRequest"] = "property-request";
-  DebugType["resolve"] = "resolve";
-  DebugType["await"] = "await";
-  DebugType["error"] = "error";
-  DebugType["override"] = "override";
-})(DebugType || (DebugType = {}));
+  randomValues[6] = randomValues[6] & 0x0f | 0x40;
+  randomValues[8] = randomValues[8] & 0x3f | 0x80; // strigify v4 format
+  // see: github.com/uuidjs/uuid/blob/master/src/stringify.js
 
-class InertDebugEvent {
+  return (byteToHex[randomValues[0]] + byteToHex[randomValues[1]] + byteToHex[randomValues[2]] + byteToHex[randomValues[3]] + '-' + byteToHex[randomValues[4]] + byteToHex[randomValues[5]] + '-' + byteToHex[randomValues[6]] + byteToHex[randomValues[7]] + '-' + byteToHex[randomValues[8]] + byteToHex[randomValues[9]] + '-' + byteToHex[randomValues[10]] + byteToHex[randomValues[11]] + byteToHex[randomValues[12]] + byteToHex[randomValues[13]] + byteToHex[randomValues[14]] + byteToHex[randomValues[15]]).toLowerCase();
+}
+
+let EventType;
+
+(function (EventType) {
+  EventType["cacheRead"] = "cache-read";
+  EventType["propertyRequest"] = "property-request";
+  EventType["resolve"] = "resolve";
+  EventType["await"] = "await";
+  EventType["error"] = "error";
+  EventType["override"] = "override";
+})(EventType || (EventType = {}));
+
+class InertEvent {
   makeChildEvent() {
     return this;
   } // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -907,8 +1011,12 @@ class InertDebugEvent {
 
 }
 
-class ActiveDebugEvent {
+class ActiveEvent {
   constructor(type, dynamicProperty) {
+    _defineProperty(this, "id", void 0);
+
+    _defineProperty(this, "createdAt", void 0);
+
     _defineProperty(this, "type", void 0);
 
     _defineProperty(this, "dynamicProperty", void 0);
@@ -921,10 +1029,12 @@ class ActiveDebugEvent {
 
     this.type = type;
     this.dynamicProperty = dynamicProperty;
+    this.id = generateV4Uuid();
+    this.createdAt = Date.now();
   }
 
   makeChildEvent(type, prop) {
-    const event = new ActiveDebugEvent(type, prop || this.dynamicProperty);
+    const event = new ActiveEvent(type, prop || this.dynamicProperty);
     this.childEvents.push(event);
     return event;
   }
@@ -939,10 +1049,10 @@ class ActiveDebugEvent {
 
 }
 function createEvent(type, prop) {
-  return new ActiveDebugEvent(type, prop);
+  return new ActiveEvent(type, prop);
 }
 function createInertEvent() {
-  return new InertDebugEvent();
+  return new InertEvent();
 }
 
 function deprecateGetContext(key) {
@@ -1004,6 +1114,10 @@ class Property {
     return this.overrideFn;
   }
 
+  get dependencies() {
+    return this.dependentProperties;
+  }
+
   getCacheFor(context) {
     if (this.memoizeCache) {
       return this.memoizeCache.get(context);
@@ -1072,8 +1186,9 @@ class Property {
 
   getPropertyProxy(context, requestEvent) {
     return (...args) => {
-      const [grouping, key, extraContext = {}] = parseGetPropertyArgs(args);
-      const property = this.computed.getPropertyInstance(grouping || this.grouping, key);
+      const [grouping, key, extraContext = {}, callback] = parseGetPropertyProxyArgs(args);
+      const propertyGroupKey = grouping || this.grouping;
+      const property = this.computed.getPropertyInstance(propertyGroupKey, key);
 
       if (!property) {
         return null;
@@ -1084,21 +1199,89 @@ class Property {
         ...extraContext
       };
       const prop = {
-        propertyGroupKey: grouping,
+        propertyGroupKey: propertyGroupKey,
         propertyPath: key,
         context: fullContext
       };
-      const childEvent = requestEvent.makeChildEvent(DebugType.propertyRequest, prop);
-      const result = property.compute(fullContext, childEvent);
+      const childEvent = requestEvent.makeChildEvent(EventType.propertyRequest, prop);
+      let result;
+      let error;
+      if (window.MICapture?.isPreview) this.throwIfDependencyCycleDetected(property);
+
+      try {
+        result = property.compute(fullContext, childEvent);
+      } catch (e) {
+        error = e;
+      }
 
       if (isPromise(result)) {
         throw new PromiseException(result);
       }
 
-      return result;
+      try {
+        if (error) {
+          callback(null, error);
+          return;
+        } else {
+          callback(result, null);
+          return result;
+        }
+      } catch (e) {
+        const wrappedError = StudioErrorWrapper(e).setSourceDynamicProperty(prop);
+        throw wrappedError;
+      }
     };
   }
 
+  throwIfDependencyCycleDetected(property) {
+    performance.now();
+    const hasDependentProperties = property.dependentProperties.size;
+
+    if (hasDependentProperties) {
+      const dependencyCycleProperties = this.getDependencyCycle(property.dependentProperties);
+      const isDependencyCycleDetected = dependencyCycleProperties.length;
+
+      if (isDependencyCycleDetected) {
+        throw new Error(`Dependency cycle detected: ${dependencyCycleProperties.map(prop => {
+          return prop.grouping ? prop.grouping + '::' + prop.propertyKey : prop.propertyKey;
+        }).join(' > ')}`);
+      }
+    }
+  }
+
+  getDependencyCycle(dependencies) {
+    const propsToInspect = [...dependencies.values()];
+    const propsInspected = new Set();
+    const propsCompleted = new Set();
+
+    while (propsToInspect.length) {
+      const currentProperty = propsToInspect.pop();
+      const detectionResult = this.detectCycle(currentProperty, propsInspected, propsCompleted);
+      if (detectionResult.length) return [currentProperty, ...detectionResult];
+    }
+
+    return [];
+  }
+
+  detectCycle(currentProperty, propsInspected, propsCompleted) {
+    if (!propsCompleted.has(currentProperty)) {
+      propsInspected.add(currentProperty);
+      propsCompleted.add(currentProperty);
+
+      for (const prop of currentProperty.dependencies) {
+        if (!propsCompleted.has(prop)) {
+          const detectionResult = this.detectCycle(prop, propsInspected, propsCompleted);
+          if (detectionResult.length) return [prop, ...detectionResult];
+        }
+
+        if (propsInspected.has(prop)) return [prop];
+      }
+    }
+
+    propsInspected.delete(currentProperty);
+    return [];
+  }
+
   generateComputeArgs(passedContext = {}, requestEvent) {
     const context = contextAccessor(passedContext, key => this.memoizeCache.addContextKey(key));
     const getProperty = this.getPropertyProxy(passedContext, requestEvent);
@@ -1128,7 +1311,7 @@ class Property {
     const overwrittenResult = overrideFn(result, context);
 
     if (overrideFn !== DEFAULT_OVERRIDE) {
-      const overrideEvent = event.makeChildEvent(DebugType.override);
+      const overrideEvent = event.makeChildEvent(EventType.override);
       overrideEvent.setValue(result);
     }
 
@@ -1147,7 +1330,7 @@ class Property {
     };
     const wrappedError = StudioErrorWrapper(error).setSourceDynamicProperty(dynamicProperty).setEntryDynamicProperty(dynamicProperty);
     this.memoizeCache.setError(context, wrappedError);
-    event.makeChildEvent(DebugType.error);
+    event.makeChildEvent(EventType.error);
     event.setError(wrappedError);
     throw wrappedError;
   }
@@ -1155,7 +1338,7 @@ class Property {
   async resolvePromiseResult(promise, context, event) {
     try {
       const result = await promise;
-      event.makeChildEvent(DebugType.resolve);
+      event.makeChildEvent(EventType.resolve);
       const overwrittenResult = this.overrideResult(result, context, event);
       this.memoizeCache.set(context, overwrittenResult);
       event.setValue(overwrittenResult);
@@ -1167,7 +1350,7 @@ class Property {
 
   async yieldPromiseException(exception, context, event) {
     try {
-      event.makeChildEvent(DebugType.await);
+      event.makeChildEvent(EventType.await);
       await exception.promise;
       return this.trySyncCompute(context, event);
     } catch (error) {
@@ -1181,10 +1364,10 @@ class Property {
       const result = this.computeFn(computeArgs);
 
       if (isPromise(result)) {
-        event.makeChildEvent(DebugType.await);
+        event.makeChildEvent(EventType.await);
         return this.resolvePromiseResult(result, context, event);
       } else {
-        event.makeChildEvent(DebugType.resolve);
+        event.makeChildEvent(EventType.resolve);
         const overwrittenResult = this.overrideResult(result, context, event);
         this.memoizeCache.set(context, overwrittenResult);
         event.setValue(overwrittenResult);
@@ -1198,7 +1381,7 @@ class Property {
   cachedCompute(context, event) {
     // If memoize cache is not set up, compute compute and set up the cache.
     if (this.memoizeCache.has(context)) {
-      event.makeChildEvent(DebugType.cacheRead);
+      event.makeChildEvent(EventType.cacheRead);
       return this.memoizeCache.get(context);
     } // Immediately cache the response (it wil be re-written when finalized if it's a promise).
 
@@ -1291,7 +1474,7 @@ class GroupedRegistry {
 }
 
 const {
-  entries: entries$2
+  entries
 } = Object;
 
 function isComputeFn(fn) {
@@ -1306,13 +1489,13 @@ class AsyncComputed {
 
     _defineProperty(this, "globProperties", new GroupedRegistry());
 
-    _defineProperty(this, "debugEnabled", false);
+    _defineProperty(this, "eventsEnabled", false);
 
-    _defineProperty(this, "propertyDebugEventsTree", []);
+    _defineProperty(this, "eventsTree", []);
   }
 
-  enableDebugMode() {
-    this.debugEnabled = true;
+  enableEvents() {
+    this.eventsEnabled = true;
   }
 
   setProperty(...args) {
@@ -1331,7 +1514,7 @@ class AsyncComputed {
   }
 
   setProperties(object, prefix) {
-    entries$2(object).forEach(([path, value]) => {
+    entries(object).forEach(([path, value]) => {
       const fullPath = prefix ? `${prefix}.${path}` : path;
       this.setProperty(fullPath, value);
     });
@@ -1347,8 +1530,8 @@ class AsyncComputed {
     return result;
   }
 
-  get propertyDebugEvents() {
-    return this.propertyDebugEventsTree;
+  get propertyEvents() {
+    return this.eventsTree;
   }
 
   getPropertyInstance(grouping, path) {
@@ -1419,14 +1602,14 @@ class AsyncComputed {
 
     let requestEvent;
 
-    if (this.debugEnabled) {
-      requestEvent = createEvent(DebugType.propertyRequest, {
+    if (this.eventsEnabled) {
+      requestEvent = createEvent(EventType.propertyRequest, {
         propertyGroupKey: property.grouping,
         // make sure we're using the property's actual grouping
         propertyPath: path,
         context: context
       });
-      this.propertyDebugEventsTree.push(requestEvent);
+      this.eventsTree.push(requestEvent);
     } else {
       requestEvent = createInertEvent();
     }
@@ -1530,7 +1713,7 @@ function trimTextOverflow(element) {
   const parentElement = element.parentElement;
   const parentBox = parentElement.getBoundingClientRect(); // It fits already; no need to resize.
 
-  if (!overflowsParent(element, parentBox)) {
+  if (!overflowsParent$1(element, parentBox)) {
     return;
   }
 
@@ -1555,7 +1738,7 @@ function truncateText(element, parentBox) {
     element.parentElement.nextElementSibling.remove();
   }
 
-  while (endPos > 0 && overflowsParent(element, parentBox)) {
+  while (endPos > 0 && overflowsParent$1(element, parentBox)) {
     endPos = currentText.lastIndexOf(' ');
     currentText = currentText.substr(0, endPos);
 
@@ -1586,7 +1769,7 @@ function findOverlappingElement(element, parentBox) {
   const children = Array.from(element.children);
 
   for (const child of children) {
-    if (overflowsParent(child, parentBox)) {
+    if (overflowsParent$1(child, parentBox)) {
       return findOverlappingElement(child, parentBox);
     }
   } // if no child is found to overlap, return self.
@@ -1595,14 +1778,14 @@ function findOverlappingElement(element, parentBox) {
   return element;
 }
 
-function overflowsParent(element, parentBox) {
+function overflowsParent$1(element, parentBox) {
   const selfBox = element.getBoundingClientRect();
   const isOutside = !(selfBox.left >= parentBox.left && selfBox.right <= parentBox.right && selfBox.bottom <= parentBox.bottom && element.scrollHeight <= parentBox.height && element.scrollWidth <= parentBox.width);
   return isOutside;
 }
 
 const {
-  min
+  min: min$1
 } = Math;
 function convertToEms(insertProperties, baseFontSize) {
   return insertProperties.map(prop => {
@@ -1623,16 +1806,16 @@ function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize) {
   } = element;
   const parentBox = parentElement.getBoundingClientRect(); // It fits already; no need to resize.
 
-  if (!overflowsParent$1(parentBox, element)) {
+  if (!overflowsParent(parentBox, element)) {
     return true;
   }
 
   const smallestFontRatio = richTextStructure.reduce((smallest, op) => {
-    smallest = min(smallest, getFontRatio(op));
+    smallest = min$1(smallest, getFontRatio(op));
 
     if (op.spans) {
       for (const span of op.spans) {
-        smallest = min(smallest, getFontRatio(span));
+        smallest = min$1(smallest, getFontRatio(span));
       }
     }
 
@@ -1658,7 +1841,7 @@ function resizeToFit(currentFontSize, selfElement, parentBox, minimumFontSize, s
 
   selfElement.style.fontSize = `${currentFontSize}px`; // Re-run if still outside of parent container
 
-  if (overflowsParent$1(parentBox, selfElement)) {
+  if (overflowsParent(parentBox, selfElement)) {
     // truncate if min font size reached
     const nextFontSize = currentFontSize - 1;
     return resizeToFit(nextFontSize, selfElement, parentBox, minimumFontSize, smallestRatio);
@@ -1667,7 +1850,7 @@ function resizeToFit(currentFontSize, selfElement, parentBox, minimumFontSize, s
   return true;
 }
 
-function overflowsParent$1(parentBox, selfElement) {
+function overflowsParent(parentBox, selfElement) {
   const range = document.createRange();
   range.selectNode(selfElement);
   const selfBox = range.getBoundingClientRect();
@@ -1707,7 +1890,7 @@ const DEFAULT_P_STYLES = {
   padding: 0
 };
 const {
-  min: min$1
+  min
 } = Math;
 function makeRenderStructure(ops, fitToOneLine) {
   const paragraphs = [];
@@ -1794,7 +1977,7 @@ function getMinFontSize(ops, defaultSize) {
     const fontSize = op.attributes && op.attributes.fontSize;
 
     if (fontSize) {
-      return min$1(curMin, parseFloat(fontSize.toString()));
+      return min(curMin, parseFloat(fontSize.toString()));
     }
 
     return curMin;
@@ -1959,7 +2142,12 @@ function ImageTag({
     throw new Error('Could not render image as no URL was provided');
   }
 
-  CD.waitForAsset(imageUrl);
+  const isDataURL = imageUrl.match(/^data:/);
+
+  if (!isDataURL) {
+    CD.waitForAsset(imageUrl);
+  }
+
   const styles = {
     height: '100%',
     width: '100%',
@@ -2001,13 +2189,22 @@ const HIDDEN_IMAGE_STYLE = {
   position: 'absolute',
   opacity: 0
 };
-function stylesForImage(imageUrl, cropStyle) {
+function stylesForImage(imageUrl, cropStyle, imageAnchor = {
+  horizontalPosition: 'left',
+  verticalPosition: 'top'
+}) {
   const cropStyles = CROPPING_OPTIONS[cropStyle];
-  return {
+  const {
+    horizontalPosition,
+    verticalPosition
+  } = imageAnchor;
+  const imageStyles = {
     background: `url("${imageUrl}")`,
     ...BASE_STYLES,
     ...cropStyles
   };
+  imageStyles.backgroundPosition = `${horizontalPosition} ${verticalPosition}`;
+  return imageStyles;
 }
 
 class DynamicImageTag extends StudioTool {
@@ -2024,15 +2221,21 @@ class DynamicImageTag extends StudioTool {
       tag: {
         dynamicProperty,
         isCropped,
-        dynamicAltText
+        dynamicAltText,
+        imageAnchor
       },
       getPropertyWithFallback
     } = this.props;
     const src = getPropertyWithFallback(dynamicProperty);
     const altText = getPropertyWithFallback(dynamicAltText, '');
-    CD.waitForAsset(src);
+    const isDataURL = src.match(/^data:/);
+
+    if (!isDataURL) {
+      CD.waitForAsset(src);
+    }
+
     const styleType = isCropped ? 'cropped' : 'contained';
-    const styles = stylesForImage(src, styleType);
+    const styles = stylesForImage(src, styleType, imageAnchor);
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: "studio-dynamic-image",
       role: "image",
@@ -2140,6 +2343,7 @@ class App extends React.Component {
       canvas: canvas
     }, /*#__PURE__*/React.createElement(Tags, {
       tags: tags || [],
+      canvas: canvas,
       registryResolver: registryResolver,
       propertyResolver: propertyResolver,
       onPendingPromise: this.onPendingPromise
@@ -2304,12 +2508,15 @@ function makeCustomTool(toolData) {
       } = this.props;
       const {
         code,
-        propertyInputs = []
+        propertyInputs = [],
+        context_options: contextOptionsInputs = []
       } = toolData;
       const propertyNames = propertyInputs.map(input => input.variableName);
-      const Tool = new Function(...propertyNames, 'html', 'CD', 'tag', code);
-      const values = propertyInputs.map(prop => getPropertyWithFallback(prop));
-      return Tool(...values, html, CD, tag);
+      const contextOptionsNames = contextOptionsInputs.map(input => input.name);
+      const Tool = new Function(...propertyNames, ...contextOptionsNames, 'html', 'CD', 'tag', code);
+      const propertyValues = propertyInputs.map(prop => getPropertyWithFallback(prop));
+      const contextValues = contextOptionsInputs.map(input => tag.toolProperties[input.name]);
+      return Tool(...propertyValues, ...contextValues, html, CD, tag);
     }
 
   };
@@ -2343,9 +2550,9 @@ function cleanHTML(element) {
   newBody.style.cssText = BASE_STYLE;
   newBody.appendChild(element);
 
-  if (analyticsLength > 250) {
+  if (analyticsLength > 500) {
     analytics.setAttribute('data-mi-data', '{}');
-    console.log('extraData trying to be set exceeds 250 characters, setting extraData to be empty to avoid breaking crops');
+    console.log('extraData trying to be set exceeds 500 characters, setting extraData to be empty to avoid breaking crops');
   }
 
   if (analytics) {
@@ -2382,6 +2589,85 @@ function addBrowserContent(baseElement) {
   rootNode.body.appendChild(script);
 }
 
+const COUNT_OF_SCRIPT_TAGS_COMPILED_BY_STUDIO = 5;
+
+const stringMatch = (original, comparable, ignoreRegExp) => {
+  return original.replace(ignoreRegExp, '') === comparable;
+};
+
+const studioOverwritableJs = 'var app = new studio[a-zA-Z0-9]*.A\\(\\);';
+const jsIgnoreRE = new RegExp(`\\s|${studioOverwritableJs}`, 'g');
+const jsCompareString = `(function(){app.render(document.getElementById('react-root')).then(function(){window.APP_SUCCESSFULLY_RENDERED=true;});})();`;
+const isPristinePicJsTag = scriptTag => {
+  const script = scriptTag.innerHTML;
+  return stringMatch(script, jsCompareString, jsIgnoreRE);
+};
+const isDocumentEligibleForStaticHandling = rootNode => {
+  const document = getDocumentNode(rootNode);
+  const scriptTags = document.getElementsByTagName('script');
+  const hasTagContainingPristinePicJs = Array.from(scriptTags).some(isPristinePicJsTag);
+
+  if (!hasTagContainingPristinePicJs) {
+    console.log('static status is false - user-altered js detected');
+    return false;
+  }
+
+  if (scriptTags.length > COUNT_OF_SCRIPT_TAGS_COMPILED_BY_STUDIO) {
+    console.log('static status is false - user-added script tags detected');
+    return false;
+  }
+
+  return true;
+};
+
+const basicTypes = new Set(['group', 'image', 'rectangle', 'richText', 'staticPic', 'text']);
+
+const isTagStatic = tag => {
+  const {
+    appliedElementModifiers,
+    conditionalDynamicProperty,
+    dynamicAltText,
+    dynamicProperty,
+    richText,
+    subtags,
+    type
+  } = tag;
+  if (subtags?.length) return subtags.some(isTagStatic);
+  const isCustomTool = type.startsWith('customTool.');
+  const hasDynamicRichText = richText?.some(({
+    insert
+  }) => typeof insert === 'object' && insert.dynamicProperty);
+  if (appliedElementModifiers || !basicTypes.has(type) || conditionalDynamicProperty || dynamicAltText || dynamicProperty || hasDynamicRichText || isCustomTool) return false;
+  return true;
+};
+
+const areAttributesStatic = attributes => {
+  const {
+    canvases
+  } = attributes;
+
+  for (const {
+    appliedElementModifiers,
+    tags = [],
+    clickthroughDynamicProperty,
+    conditionalDynamicProperty
+  } of canvases) {
+    if (appliedElementModifiers || clickthroughDynamicProperty || conditionalDynamicProperty) {
+      console.log('static status is false - dynamic properties on canvas detected');
+      return false;
+    }
+
+    for (const tag of tags) {
+      if (!isTagStatic(tag)) {
+        console.log('static status is false - dynamic properties on tag detected');
+        return false;
+      }
+    }
+  }
+
+  return true;
+};
+
 class StudioFramework {
   constructor(opts = setupAppDefaults()) {
     _defineProperty(this, "currentGrouping", false);
@@ -2406,22 +2692,40 @@ class StudioFramework {
 
     _defineProperty(this, "debug", {
       CD,
+      enableDebugMode: () => {
+        this.asyncComputed.enableEvents();
+      },
       getAllProperties: () => this.asyncComputed.dumpState(),
-      getPropertyEvents: () => this.asyncComputed.propertyDebugEvents,
+      getPropertyEvents: () => {
+        console.warn('`app.debug.getPropertyEvents()` is deprecated. Please use `app.meta.enableEvents()` and `app.meta.getEvents([consoleLog])`.');
+        return this.asyncComputed.propertyEvents;
+      },
       logProperties: () => {
         const state = this.asyncComputed.dumpState();
-        console.warn('`app.debug.logProperties()` is deprecated. Please use `app.debug.logPropertyTree()`');
+        console.warn('`app.debug.logProperties()` is deprecated. Please use `app.meta.enableEvents` and `app.meta.getEvents([consoleLog])`.');
         console.log(JSON.stringify(state, null, 2));
       },
-      enableDebugMode: () => {
-        this.asyncComputed.enableDebugMode();
-      },
       logPropertyTree: () => {
-        const events = this.asyncComputed.propertyDebugEvents;
+        const events = this.asyncComputed.propertyEvents;
         console.log(JSON.stringify(events, null, 2));
       }
     });
 
+    _defineProperty(this, "meta", {
+      eventsEnabled: false,
+      enableEvents: () => {
+        // tbd: options for pruning which events are captured
+        this.meta.eventsEnabled = true;
+        this.asyncComputed.enableEvents();
+      },
+      getEvents: consoleLog => {
+        if (!this.meta.eventsEnabled) console.warn('`app.metadata.getEvents()` was called, however `app.metadata.enableEvents([...options])` was not set first. No events will be returned.');
+        const events = this.asyncComputed.propertyEvents;
+        if (consoleLog) console.log(JSON.stringify(events, null, 2));
+        return events;
+      }
+    });
+
     const {
       canvases = [],
       customProps = [],
@@ -2434,6 +2738,12 @@ class StudioFramework {
       namespacedOptions = [],
       queryParams = {}
     } = opts;
+
+    if (window.MICapture?.isPreview) {
+      console.log('static status is true - static check has started');
+      window.RENDERED_STATICALLY = true;
+    }
+
     this.options = options;
     this.namespacedOptions = namespacedOptions;
     this.customProps = customProps;
@@ -2451,7 +2761,25 @@ class StudioFramework {
       return queryParams;
     });
     animation(this);
-    this.setup();
+
+    if (this.shouldPerformStaticCheck) {
+      const proxy = new Proxy(this, {
+        set(target, key, value) {
+          if (key in target && key !== 'currentGrouping') {
+            window.RENDERED_STATICALLY = false;
+            console.log(`static status is false - overridden StudioFramework class method `, key);
+          }
+
+          return Reflect.set(target, key, value);
+        }
+
+      });
+      this.setup.call(proxy);
+      if (this.shouldPerformStaticCheck) window.RENDERED_STATICALLY = areAttributesStatic(opts);
+    } else {
+      this.setup();
+    }
+
     this.setupOptions();
     this.setupNamespacedOptions();
     this.setupCustomTools();
@@ -2459,16 +2787,20 @@ class StudioFramework {
     this.setupModifiedProps();
   }
 
+  get shouldPerformStaticCheck() {
+    return window.MICapture?.isPreview && window.RENDERED_STATICALLY;
+  }
+
   triggerRerender() {
     if (this.appComponent) {
       this.appComponent.forceUpdate();
     }
   }
 
-  async isCurrentCanvas(canvas) {
+  async resolveConditionalDynamicProperty(model) {
     const {
       conditionalDynamicProperty
-    } = canvas;
+    } = model;
     if (!conditionalDynamicProperty) return [true, null];
     const {
       propertyGroupKey = '',
@@ -2485,7 +2817,7 @@ class StudioFramework {
     } = this;
 
     for (const canvas of canvases) {
-      const [result, error] = await this.isCurrentCanvas(canvas);
+      const [result, error] = await this.resolveConditionalDynamicProperty(canvas);
       if (result) return canvas;
 
       if (error) {
@@ -2555,28 +2887,41 @@ class StudioFramework {
   setup() {} // eslint-disable-next-line
 
 
-  setupTags(tags) {
-    return tags;
-  } // eslint-disable-next-line
+  async getCurrentTags(tags, canvas) {
+    const filteredTags = [];
 
+    for (const tag of tags) {
+      const [result, error] = await this.resolveConditionalDynamicProperty(tag);
 
-  async clickthrough(currentCanvas) {
-    let {
-      clickthrough_dynamic_property
-    } = this.options;
+      if (result) {
+        filteredTags.push(tag);
+      }
 
-    if (currentCanvas === null || currentCanvas === void 0 ? void 0 : currentCanvas.clickthroughDynamicProperty) {
-      clickthrough_dynamic_property = currentCanvas.clickthroughDynamicProperty;
+      if (error) {
+        const wrappedError = StudioErrorWrapper(error, `Skipped ${tag.label || tag.displayName} because conditional dynamic property threw an error`).setSourceType('tag-condition').setSourceDynamicProperty(tag.conditionalDynamicProperty).setEntryDynamicProperty(tag.conditionalDynamicProperty).setTag(tag).setCanvas(canvas);
+        console.warn(wrappedError);
+      }
     }
 
-    if (clickthrough_dynamic_property) {
+    return this.setupTags(filteredTags);
+  }
+
+  setupTags(tags) {
+    return tags;
+  }
+
+  async clickthrough(currentCanvas) {
+    const canvasCDP = currentCanvas?.clickthroughDynamicProperty;
+
+    if (canvasCDP) {
       const {
         context,
         propertyPath,
-        propertyValue
-      } = clickthrough_dynamic_property;
+        propertyValue,
+        propertyGroupKey
+      } = canvasCDP;
       if (propertyValue) return propertyValue;
-      const [result, error] = await this.getPropertyTuple(propertyPath, context);
+      const [result, error] = await this.getPropertyTuple(propertyGroupKey, propertyPath, context);
 
       if (error) {
         throw StudioErrorWrapper(error).setSourceType('dynamic-clickthrough').setCanvas(currentCanvas);
@@ -2658,18 +3003,25 @@ class StudioFramework {
         const {
           propertyGroupKey,
           propertyPath,
+          propertyValue,
           context
         } = value;
-        this.setProperty(`options.${key}`, ({
-          getProperty
-        }) => {
-          return getProperty(propertyGroupKey, propertyPath, context);
-        });
-        this.setProperty(key, ({
-          getProperty
-        }) => {
-          return getProperty(propertyGroupKey, propertyPath, context);
-        });
+
+        if (propertyGroupKey === 'static') {
+          this.setProperty(`options.${key}`, propertyValue);
+          this.setProperty(key, propertyValue);
+        } else {
+          this.setProperty(`options.${key}`, ({
+            getProperty
+          }) => {
+            return getProperty(propertyGroupKey, propertyPath, context);
+          });
+          this.setProperty(key, ({
+            getProperty
+          }) => {
+            return getProperty(propertyGroupKey, propertyPath, context);
+          });
+        }
       } else {
         this.setProperty(`options.${key}`, value);
         this.setProperty(key, value);
@@ -2695,13 +3047,19 @@ class StudioFramework {
             const {
               propertyGroupKey,
               propertyPath,
+              propertyValue,
               context
             } = value;
-            this.setProperty(`options.${fieldName}`, ({
-              getProperty
-            }) => {
-              return getProperty(propertyGroupKey, propertyPath, context);
-            });
+
+            if (propertyGroupKey === 'static') {
+              this.setProperty(`options.${fieldName}`, propertyValue);
+            } else {
+              this.setProperty(`options.${fieldName}`, ({
+                getProperty
+              }) => {
+                return getProperty(propertyGroupKey, propertyPath, context);
+              });
+            }
           } else {
             this.setProperty(`options.${fieldName}`, value);
           }
@@ -2795,19 +3153,47 @@ class StudioFramework {
     throw e;
   }
 
+  handleAndPreventFutureAnalyticsCalls(data) {
+    if (typeof data !== 'object') {
+      throw new Error('The result of `analyticsData` must be an object');
+    }
+
+    const format = window.MICapture?.format;
+    const analytics = document.querySelector('#mi-data');
+
+    if (format === 'html') {
+      const analyticsLength = analytics ? (analytics.getAttribute('data-mi-data') || '').length : 0;
+
+      if (analyticsLength > 500) {
+        analytics.setAttribute('data-mi-data', '{}');
+        console.log('extraData trying to be set exceeds 500 characters, setting extraData to be empty to avoid breaking crops');
+      }
+    } // Force a full overwrite
+
+
+    if (analytics) document.querySelector('#mi-data').remove();
+    CD.setExtraData(data);
+
+    CD.setExtraData = () => {
+      console.log('setExtraData call was prevented via handleAndPreventFutureAnalyticsCalls');
+    };
+
+    CD.resume();
+  }
+
   async render(targetElement) {
+    if (window.MICapture?.isPreview) console.log('Preview Render');
     let currentCanvas;
 
     try {
-      var _currentCanvas;
-
       CD.pause();
       currentCanvas = await this.getCurrentCanvas();
       const clickthroughURL = await this.handleClickthrough(currentCanvas);
-      const canvasTags = ((_currentCanvas = currentCanvas) === null || _currentCanvas === void 0 ? void 0 : _currentCanvas.tags) || [];
-      const tags = this.setupTags(canvasTags);
+      const canvasTags = currentCanvas?.tags || [];
+      const tags = await this.getCurrentTags(canvasTags, currentCanvas);
       const height = currentCanvas.height || this.options.height;
       const width = currentCanvas.width || this.options.width;
+      const format = window.MICapture?.format;
       const renderPromise = this.renderApp(targetElement, clickthroughURL, tags, {
         height,
         width
@@ -2819,12 +3205,23 @@ class StudioFramework {
         this.setupAnimation();
       }
 
-      cleanHTML(targetElement);
-      addBrowserContent(targetElement);
-      CD.resume();
+      if (this.shouldPerformStaticCheck) {
+        if (window.RENDERED_STATICALLY = isDocumentEligibleForStaticHandling(targetElement)) {
+          console.log('static status is true - static check has finished');
+        } else {
+          console.log('static status is false - static check has finished');
+        }
+      }
+
+      if (format === 'html') {
+        cleanHTML(targetElement);
+        addBrowserContent(targetElement);
+      }
     } catch (e) {
       const wrappedError = StudioErrorWrapper(e).setCanvas(currentCanvas);
       this.handleRenderError(wrappedError);
+    } finally {
+      CD.resume();
     }
   }
 
@@ -3116,4 +3513,4 @@ if (window.MICapture && window.MICapture.captureAppLog) {
 }
 
 export default StudioFramework;
-export { App, StudioTool, computedPath, makeDynamicProperty };
+export { App, StudioError, StudioTool, computedPath, makeDynamicProperty };