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

package/dist/index.es.js

@@ -10,39 +10,6 @@ if (typeof Object.entries === 'undefined') {
   };
 }
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
 const {
   entries: entries$2
 } = Object;
@@ -170,10 +137,6 @@ class StyledElement extends React.Component {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "styleElementRef", void 0);
-
-    _defineProperty(this, "setStyleElementRef", void 0);
-
     this.setStyleElementRef = element => {
       this.styleElementRef = element;
     };
@@ -355,26 +318,6 @@ class BaseStudioError extends Error {
   constructor(message, sourceError, errorType) {
     super(message);
 
-    _defineProperty(this, "errorType", void 0);
-
-    _defineProperty(this, "tag", void 0);
-
-    _defineProperty(this, "sourceType", void 0);
-
-    _defineProperty(this, "sourceError", void 0);
-
-    _defineProperty(this, "sourceDynamicProperty", void 0);
-
-    _defineProperty(this, "entryDynamicProperty", void 0);
-
-    _defineProperty(this, "canvas", void 0);
-
-    _defineProperty(this, "data", void 0);
-
-    _defineProperty(this, "status", void 0);
-
-    _defineProperty(this, "uuid", void 0);
-
     if (sourceError) {
       this.sourceError = sourceError;
     }
@@ -431,6 +374,11 @@ function getStateTuple(prop, resolver) {
 }
 
 class TagComponent extends React.Component {
+  state = {
+    StudioTool: null,
+    readyToRender: false
+  };
+
   static getDerivedStateFromProps(props) {
     const {
       tag,
@@ -501,12 +449,6 @@ class TagComponent extends React.Component {
 
   constructor(props) {
     super(props);
-
-    _defineProperty(this, "state", {
-      StudioTool: null,
-      readyToRender: false
-    });
-
     this.getPropertyState = this.getPropertyState.bind(this);
     this.getPropertyWithFallback = this.getPropertyWithFallback.bind(this);
   }
@@ -590,10 +532,6 @@ class SizeContainer extends React.Component {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "containerElementRef", void 0);
-
-    _defineProperty(this, "setContainerElementRef", void 0);
-
     this.setContainerElementRef = element => {
       this.containerElementRef = element;
     };
@@ -625,13 +563,9 @@ class SizeContainer extends React.Component {
 }
 
 class Resolver {
-  constructor() {
-    _defineProperty(this, "componentContainer", new Map());
-
-    _defineProperty(this, "elementModifierContainer", new Map());
-
-    _defineProperty(this, "propertyModifierContainer", new Map());
-  }
+  componentContainer = new Map();
+  elementModifierContainer = new Map();
+  propertyModifierContainer = new Map();
 
   registerComponent(path, registryItem) {
     this.componentContainer.set(path, registryItem);
@@ -695,31 +629,19 @@ function contextAccessor(context, cb) {
   return freeze(wrappedContext);
 }
 
-let _Symbol$iterator;
-
 const ERROR_KEY = Symbol('error');
 
 function isError(t) {
   return t && typeof t === 'object' && ERROR_KEY in t;
 }
 
-_Symbol$iterator = Symbol.iterator;
 class CacheMap {
-  constructor() {
-    _defineProperty(this, "contextKeys", new Set());
-
-    _defineProperty(this, "cache", new Map());
-
-    _defineProperty(this, "reverseContext", new Map());
-
-    _defineProperty(this, "keyCache", new WeakMap());
-
-    _defineProperty(this, "acceptingKeys", true);
-
-    _defineProperty(this, "tempContext", void 0);
-
-    _defineProperty(this, "tempStorageKey", context => JSON.stringify(context));
-  }
+  contextKeys = new Set();
+  cache = new Map();
+  reverseContext = new Map();
+  keyCache = new WeakMap();
+  acceptingKeys = true;
+  tempStorageKey = context => JSON.stringify(context);
 
   get(context) {
     const result = this.cache.get(this.cacheKeyFor(context));
@@ -739,7 +661,7 @@ class CacheMap {
     this.cache.delete(this.cacheKeyFor(context));
   }
 
-  *[_Symbol$iterator]() {
+  *[Symbol.iterator]() {
     for (const [key, value] of this.cache) {
       if (typeof key === 'string') {
         const context = this.reverseContext.get(key);
@@ -818,15 +740,11 @@ function defer() {
 }
 
 class ComputeThrottler {
-  constructor(afterFirst) {
-    _defineProperty(this, "queue", []);
-
-    _defineProperty(this, "hasSuccessfullyComputed", false);
-
-    _defineProperty(this, "isPending", false);
-
-    _defineProperty(this, "afterFirst", void 0);
+  queue = [];
+  hasSuccessfullyComputed = false;
+  isPending = false;
 
+  constructor(afterFirst) {
     this.afterFirst = afterFirst;
   }
 
@@ -1012,21 +930,10 @@ class InertEvent {
 }
 
 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);
-
-    _defineProperty(this, "value", null);
-
-    _defineProperty(this, "error", void 0);
-
-    _defineProperty(this, "childEvents", []);
+  value = null;
+  childEvents = [];
 
+  constructor(type, dynamicProperty) {
     this.type = type;
     this.dynamicProperty = dynamicProperty;
     this.id = generateV4Uuid();
@@ -1061,8 +968,6 @@ function deprecateGetContext(key) {
 
 class PromiseException {
   constructor(promise) {
-    _defineProperty(this, "promise", void 0);
-
     this.promise = promise;
   }
 
@@ -1071,23 +976,11 @@ class PromiseException {
 const DEFAULT_OVERRIDE = value => value;
 
 class Property {
-  constructor(computeFn, computed, grouping, propertyKey, overrideFn = DEFAULT_OVERRIDE) {
-    _defineProperty(this, "computeFn", void 0);
-
-    _defineProperty(this, "propertyKey", void 0);
-
-    _defineProperty(this, "grouping", void 0);
-
-    _defineProperty(this, "dependentProperties", new Set());
-
-    _defineProperty(this, "firstCompute", new ComputeThrottler(() => this.finalizeCache()));
-
-    _defineProperty(this, "memoizeCache", new CacheMap());
-
-    _defineProperty(this, "computed", void 0);
-
-    _defineProperty(this, "overrideFn", void 0);
+  dependentProperties = new Set();
+  firstCompute = new ComputeThrottler(() => this.finalizeCache());
+  memoizeCache = new CacheMap();
 
+  constructor(computeFn, computed, grouping, propertyKey, overrideFn = DEFAULT_OVERRIDE) {
     this.computed = computed;
     this.computeFn = computeFn;
     this.grouping = grouping;
@@ -1407,13 +1300,9 @@ function getPartsFromGroupingKey(groupingKey) {
 }
 
 class GroupedRegistry {
-  constructor() {
-    _defineProperty(this, "fallbackMap", new Map());
-
-    _defineProperty(this, "globalMap", new Map());
-
-    _defineProperty(this, "groupingMap", new Map());
-  }
+  fallbackMap = new Map();
+  globalMap = new Map();
+  groupingMap = new Map();
 
   get(grouping, path, allowFallback = true) {
     const groupingKey = generateGroupingKey(grouping, path);
@@ -1482,17 +1371,11 @@ function isComputeFn(fn) {
 }
 
 class AsyncComputed {
-  constructor() {
-    _defineProperty(this, "propertyRegistry", new GroupedRegistry());
-
-    _defineProperty(this, "propertyOverridesBuffer", new GroupedRegistry());
-
-    _defineProperty(this, "globProperties", new GroupedRegistry());
-
-    _defineProperty(this, "eventsEnabled", false);
-
-    _defineProperty(this, "eventsTree", []);
-  }
+  propertyRegistry = new GroupedRegistry();
+  propertyOverridesBuffer = new GroupedRegistry();
+  globProperties = new GroupedRegistry();
+  eventsEnabled = false;
+  eventsTree = [];
 
   enableEvents() {
     this.eventsEnabled = true;
@@ -1700,6 +1583,24 @@ class AsyncComputed {
 
 const ShapeTag = () => /*#__PURE__*/React.createElement("div", null);
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 class StudioTool extends React.Component {
   // TODO: We need to be able to extend StudioTool and create a new call signature for dynamicProperties
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -2012,17 +1913,10 @@ const mapSpans = (spans, fitToOneLine) => spans.map((span, n) => isNewLine(span)
 })));
 
 class RichTextElement extends StudioTool {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "lastRichText", void 0);
-
-    _defineProperty(this, "state", {
-      didOverflow: false
-    });
-
-    _defineProperty(this, "elementRef", /*#__PURE__*/React.createRef());
-  }
+  state = {
+    didOverflow: false
+  };
+  elementRef = /*#__PURE__*/React.createRef();
 
   static dynamicProperties(tag) {
     return getDynamicTokens(tag.richText);
@@ -2261,22 +2155,19 @@ var bootstrapApp = (resolver => {
 });
 
 class App extends React.Component {
+  dimensionsDefault = {
+    width: 400,
+    height: 300
+  };
+  pendingProperties = new Set();
+  onPendingPromise = promises => {
+    for (const promise of promises) {
+      this.pendingProperties.add(promise);
+    }
+  };
+
   constructor(props) {
     super(props);
-
-    _defineProperty(this, "dimensionsDefault", {
-      width: 400,
-      height: 300
-    });
-
-    _defineProperty(this, "pendingProperties", new Set());
-
-    _defineProperty(this, "onPendingPromise", promises => {
-      for (const promise of promises) {
-        this.pendingProperties.add(promise);
-      }
-    });
-
     const {
       asyncComputed,
       resolver
@@ -2669,63 +2560,45 @@ const areAttributesStatic = attributes => {
 };
 
 class StudioFramework {
-  constructor(opts = setupAppDefaults()) {
-    _defineProperty(this, "currentGrouping", false);
-
-    _defineProperty(this, "asyncComputed", new AsyncComputed());
-
-    _defineProperty(this, "resolver", new Resolver());
-
-    _defineProperty(this, "canvases", void 0);
-
-    _defineProperty(this, "customProps", void 0);
-
-    _defineProperty(this, "customTools", void 0);
-
-    _defineProperty(this, "modifiedProps", void 0);
-
-    _defineProperty(this, "appComponent", void 0);
-
-    _defineProperty(this, "options", void 0);
-
-    _defineProperty(this, "namespacedOptions", void 0);
-
-    _defineProperty(this, "debug", {
-      CD,
-      enableDebugMode: () => {
-        this.asyncComputed.enableEvents();
-      },
-      getAllProperties: () => this.asyncComputed.dumpState(),
-      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.meta.enableEvents` and `app.meta.getEvents([consoleLog])`.');
-        console.log(JSON.stringify(state, null, 2));
-      },
-      logPropertyTree: () => {
-        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;
-      }
-    });
+  currentGrouping = false;
+  asyncComputed = new AsyncComputed();
+  resolver = new Resolver();
+  debug = {
+    CD,
+    enableDebugMode: () => {
+      this.asyncComputed.enableEvents();
+    },
+    getAllProperties: () => this.asyncComputed.dumpState(),
+    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.meta.enableEvents` and `app.meta.getEvents([consoleLog])`.');
+      console.log(JSON.stringify(state, null, 2));
+    },
+    logPropertyTree: () => {
+      const events = this.asyncComputed.propertyEvents;
+      console.log(JSON.stringify(events, null, 2));
+    }
+  };
+  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;
+    }
+  };
 
+  constructor(opts = setupAppDefaults()) {
     const {
       canvases = [],
       customProps = [],
@@ -3325,11 +3198,9 @@ let ConsoleMethods;
 })(ConsoleMethods || (ConsoleMethods = {}));
 
 class Console {
-  constructor() {
-    _defineProperty(this, "selectedLogLevel", 'debug');
-
-    _defineProperty(this, "console", Console.originalConsole);
-  }
+  selectedLogLevel = 'debug';
+  static originalConsole = console;
+  console = Console.originalConsole;
 
   static install() {
     // eslint-disable-next-line
@@ -3506,8 +3377,6 @@ class Console {
 
 }
 
-_defineProperty(Console, "originalConsole", console);
-
 if (window.MICapture && window.MICapture.captureAppLog) {
   Console.install();
 }

package/dist/index.js

@@ -20,39 +20,6 @@ if (typeof Object.entries === 'undefined') {
   };
 }
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
 const {
   entries: entries$2
 } = Object;
@@ -180,10 +147,6 @@ class StyledElement extends React__default['default'].Component {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "styleElementRef", void 0);
-
-    _defineProperty(this, "setStyleElementRef", void 0);
-
     this.setStyleElementRef = element => {
       this.styleElementRef = element;
     };
@@ -365,26 +328,6 @@ class BaseStudioError extends Error {
   constructor(message, sourceError, errorType) {
     super(message);
 
-    _defineProperty(this, "errorType", void 0);
-
-    _defineProperty(this, "tag", void 0);
-
-    _defineProperty(this, "sourceType", void 0);
-
-    _defineProperty(this, "sourceError", void 0);
-
-    _defineProperty(this, "sourceDynamicProperty", void 0);
-
-    _defineProperty(this, "entryDynamicProperty", void 0);
-
-    _defineProperty(this, "canvas", void 0);
-
-    _defineProperty(this, "data", void 0);
-
-    _defineProperty(this, "status", void 0);
-
-    _defineProperty(this, "uuid", void 0);
-
     if (sourceError) {
       this.sourceError = sourceError;
     }
@@ -441,6 +384,11 @@ function getStateTuple(prop, resolver) {
 }
 
 class TagComponent extends React__default['default'].Component {
+  state = {
+    StudioTool: null,
+    readyToRender: false
+  };
+
   static getDerivedStateFromProps(props) {
     const {
       tag,
@@ -511,12 +459,6 @@ class TagComponent extends React__default['default'].Component {
 
   constructor(props) {
     super(props);
-
-    _defineProperty(this, "state", {
-      StudioTool: null,
-      readyToRender: false
-    });
-
     this.getPropertyState = this.getPropertyState.bind(this);
     this.getPropertyWithFallback = this.getPropertyWithFallback.bind(this);
   }
@@ -600,10 +542,6 @@ class SizeContainer extends React__default['default'].Component {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "containerElementRef", void 0);
-
-    _defineProperty(this, "setContainerElementRef", void 0);
-
     this.setContainerElementRef = element => {
       this.containerElementRef = element;
     };
@@ -635,13 +573,9 @@ class SizeContainer extends React__default['default'].Component {
 }
 
 class Resolver {
-  constructor() {
-    _defineProperty(this, "componentContainer", new Map());
-
-    _defineProperty(this, "elementModifierContainer", new Map());
-
-    _defineProperty(this, "propertyModifierContainer", new Map());
-  }
+  componentContainer = new Map();
+  elementModifierContainer = new Map();
+  propertyModifierContainer = new Map();
 
   registerComponent(path, registryItem) {
     this.componentContainer.set(path, registryItem);
@@ -705,31 +639,19 @@ function contextAccessor(context, cb) {
   return freeze(wrappedContext);
 }
 
-let _Symbol$iterator;
-
 const ERROR_KEY = Symbol('error');
 
 function isError(t) {
   return t && typeof t === 'object' && ERROR_KEY in t;
 }
 
-_Symbol$iterator = Symbol.iterator;
 class CacheMap {
-  constructor() {
-    _defineProperty(this, "contextKeys", new Set());
-
-    _defineProperty(this, "cache", new Map());
-
-    _defineProperty(this, "reverseContext", new Map());
-
-    _defineProperty(this, "keyCache", new WeakMap());
-
-    _defineProperty(this, "acceptingKeys", true);
-
-    _defineProperty(this, "tempContext", void 0);
-
-    _defineProperty(this, "tempStorageKey", context => JSON.stringify(context));
-  }
+  contextKeys = new Set();
+  cache = new Map();
+  reverseContext = new Map();
+  keyCache = new WeakMap();
+  acceptingKeys = true;
+  tempStorageKey = context => JSON.stringify(context);
 
   get(context) {
     const result = this.cache.get(this.cacheKeyFor(context));
@@ -749,7 +671,7 @@ class CacheMap {
     this.cache.delete(this.cacheKeyFor(context));
   }
 
-  *[_Symbol$iterator]() {
+  *[Symbol.iterator]() {
     for (const [key, value] of this.cache) {
       if (typeof key === 'string') {
         const context = this.reverseContext.get(key);
@@ -828,15 +750,11 @@ function defer() {
 }
 
 class ComputeThrottler {
-  constructor(afterFirst) {
-    _defineProperty(this, "queue", []);
-
-    _defineProperty(this, "hasSuccessfullyComputed", false);
-
-    _defineProperty(this, "isPending", false);
-
-    _defineProperty(this, "afterFirst", void 0);
+  queue = [];
+  hasSuccessfullyComputed = false;
+  isPending = false;
 
+  constructor(afterFirst) {
     this.afterFirst = afterFirst;
   }
 
@@ -1022,21 +940,10 @@ class InertEvent {
 }
 
 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);
-
-    _defineProperty(this, "value", null);
-
-    _defineProperty(this, "error", void 0);
-
-    _defineProperty(this, "childEvents", []);
+  value = null;
+  childEvents = [];
 
+  constructor(type, dynamicProperty) {
     this.type = type;
     this.dynamicProperty = dynamicProperty;
     this.id = generateV4Uuid();
@@ -1071,8 +978,6 @@ function deprecateGetContext(key) {
 
 class PromiseException {
   constructor(promise) {
-    _defineProperty(this, "promise", void 0);
-
     this.promise = promise;
   }
 
@@ -1081,23 +986,11 @@ class PromiseException {
 const DEFAULT_OVERRIDE = value => value;
 
 class Property {
-  constructor(computeFn, computed, grouping, propertyKey, overrideFn = DEFAULT_OVERRIDE) {
-    _defineProperty(this, "computeFn", void 0);
-
-    _defineProperty(this, "propertyKey", void 0);
-
-    _defineProperty(this, "grouping", void 0);
-
-    _defineProperty(this, "dependentProperties", new Set());
-
-    _defineProperty(this, "firstCompute", new ComputeThrottler(() => this.finalizeCache()));
-
-    _defineProperty(this, "memoizeCache", new CacheMap());
-
-    _defineProperty(this, "computed", void 0);
-
-    _defineProperty(this, "overrideFn", void 0);
+  dependentProperties = new Set();
+  firstCompute = new ComputeThrottler(() => this.finalizeCache());
+  memoizeCache = new CacheMap();
 
+  constructor(computeFn, computed, grouping, propertyKey, overrideFn = DEFAULT_OVERRIDE) {
     this.computed = computed;
     this.computeFn = computeFn;
     this.grouping = grouping;
@@ -1417,13 +1310,9 @@ function getPartsFromGroupingKey(groupingKey) {
 }
 
 class GroupedRegistry {
-  constructor() {
-    _defineProperty(this, "fallbackMap", new Map());
-
-    _defineProperty(this, "globalMap", new Map());
-
-    _defineProperty(this, "groupingMap", new Map());
-  }
+  fallbackMap = new Map();
+  globalMap = new Map();
+  groupingMap = new Map();
 
   get(grouping, path, allowFallback = true) {
     const groupingKey = generateGroupingKey(grouping, path);
@@ -1492,17 +1381,11 @@ function isComputeFn(fn) {
 }
 
 class AsyncComputed {
-  constructor() {
-    _defineProperty(this, "propertyRegistry", new GroupedRegistry());
-
-    _defineProperty(this, "propertyOverridesBuffer", new GroupedRegistry());
-
-    _defineProperty(this, "globProperties", new GroupedRegistry());
-
-    _defineProperty(this, "eventsEnabled", false);
-
-    _defineProperty(this, "eventsTree", []);
-  }
+  propertyRegistry = new GroupedRegistry();
+  propertyOverridesBuffer = new GroupedRegistry();
+  globProperties = new GroupedRegistry();
+  eventsEnabled = false;
+  eventsTree = [];
 
   enableEvents() {
     this.eventsEnabled = true;
@@ -1710,6 +1593,24 @@ class AsyncComputed {
 
 const ShapeTag = () => /*#__PURE__*/React__default['default'].createElement("div", null);
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 class StudioTool extends React__default['default'].Component {
   // TODO: We need to be able to extend StudioTool and create a new call signature for dynamicProperties
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -2022,17 +1923,10 @@ const mapSpans = (spans, fitToOneLine) => spans.map((span, n) => isNewLine(span)
 })));
 
 class RichTextElement extends StudioTool {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "lastRichText", void 0);
-
-    _defineProperty(this, "state", {
-      didOverflow: false
-    });
-
-    _defineProperty(this, "elementRef", /*#__PURE__*/React__default['default'].createRef());
-  }
+  state = {
+    didOverflow: false
+  };
+  elementRef = /*#__PURE__*/React__default['default'].createRef();
 
   static dynamicProperties(tag) {
     return getDynamicTokens(tag.richText);
@@ -2271,22 +2165,19 @@ var bootstrapApp = (resolver => {
 });
 
 class App extends React__default['default'].Component {
+  dimensionsDefault = {
+    width: 400,
+    height: 300
+  };
+  pendingProperties = new Set();
+  onPendingPromise = promises => {
+    for (const promise of promises) {
+      this.pendingProperties.add(promise);
+    }
+  };
+
   constructor(props) {
     super(props);
-
-    _defineProperty(this, "dimensionsDefault", {
-      width: 400,
-      height: 300
-    });
-
-    _defineProperty(this, "pendingProperties", new Set());
-
-    _defineProperty(this, "onPendingPromise", promises => {
-      for (const promise of promises) {
-        this.pendingProperties.add(promise);
-      }
-    });
-
     const {
       asyncComputed,
       resolver
@@ -2679,63 +2570,45 @@ const areAttributesStatic = attributes => {
 };
 
 class StudioFramework {
-  constructor(opts = setupAppDefaults()) {
-    _defineProperty(this, "currentGrouping", false);
-
-    _defineProperty(this, "asyncComputed", new AsyncComputed());
-
-    _defineProperty(this, "resolver", new Resolver());
-
-    _defineProperty(this, "canvases", void 0);
-
-    _defineProperty(this, "customProps", void 0);
-
-    _defineProperty(this, "customTools", void 0);
-
-    _defineProperty(this, "modifiedProps", void 0);
-
-    _defineProperty(this, "appComponent", void 0);
-
-    _defineProperty(this, "options", void 0);
-
-    _defineProperty(this, "namespacedOptions", void 0);
-
-    _defineProperty(this, "debug", {
-      CD: CD__default['default'],
-      enableDebugMode: () => {
-        this.asyncComputed.enableEvents();
-      },
-      getAllProperties: () => this.asyncComputed.dumpState(),
-      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.meta.enableEvents` and `app.meta.getEvents([consoleLog])`.');
-        console.log(JSON.stringify(state, null, 2));
-      },
-      logPropertyTree: () => {
-        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;
-      }
-    });
+  currentGrouping = false;
+  asyncComputed = new AsyncComputed();
+  resolver = new Resolver();
+  debug = {
+    CD: CD__default['default'],
+    enableDebugMode: () => {
+      this.asyncComputed.enableEvents();
+    },
+    getAllProperties: () => this.asyncComputed.dumpState(),
+    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.meta.enableEvents` and `app.meta.getEvents([consoleLog])`.');
+      console.log(JSON.stringify(state, null, 2));
+    },
+    logPropertyTree: () => {
+      const events = this.asyncComputed.propertyEvents;
+      console.log(JSON.stringify(events, null, 2));
+    }
+  };
+  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;
+    }
+  };
 
+  constructor(opts = setupAppDefaults()) {
     const {
       canvases = [],
       customProps = [],
@@ -3335,11 +3208,9 @@ let ConsoleMethods;
 })(ConsoleMethods || (ConsoleMethods = {}));
 
 class Console {
-  constructor() {
-    _defineProperty(this, "selectedLogLevel", 'debug');
-
-    _defineProperty(this, "console", Console.originalConsole);
-  }
+  selectedLogLevel = 'debug';
+  static originalConsole = console;
+  console = Console.originalConsole;
 
   static install() {
     // eslint-disable-next-line
@@ -3516,8 +3387,6 @@ class Console {
 
 }
 
-_defineProperty(Console, "originalConsole", console);
-
 if (window.MICapture && window.MICapture.captureAppLog) {
   Console.install();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movable/studio-framework",
-  "version": "3.0.0-esmodules.0",
+  "version": "3.0.0-esmodules.1",
   "description": "A Component library for reactive Studio apps.",
   "author": "Movable Ink",
   "repository": "movableink/studio-framework",
@@ -27,13 +27,12 @@
   },
   "devDependencies": {
     "@babel/core": "^7.14.0",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.13.0",
     "@movable/eslint-config-react": "^1.0.1",
-    "@movable/framework-types": "^3.0.0-esmodules.0",
-    "@movable/studio-framework-test-helpers": "^3.0.0-esmodules.0",
+    "@movable/framework-types": "^3.0.0-esmodules.1",
+    "@movable/studio-framework-test-helpers": "^3.0.0-esmodules.1",
     "@types/qunit": "^2.11.1",
     "@types/qunit-dom": "^0.7.0",
     "@types/react": "^17.0.6",
@@ -65,5 +64,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "70ac10408686fdf679ee04cde278285f7778eaf1"
+  "gitHead": "ea2420f0db42b95a3e1e877da7f2a0c6ac4b0240"
 }