@airtable/blocks 0.0.0-experimental-c4b2228f4-20250630 → 0.0.0-experimental-3649c7162-20250904

package/dist/{cjs → esm}/shared/ui/use_base.js

@@ -1,19 +1,20 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _use_watchable = _interopRequireDefault(require("./use_watchable"));
 var _sdk_context = require("./sdk_context");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * @hidden
  */
-var useBase = () => {
-  var _useSdk = (0, _sdk_context.useSdk)(),
-    base = _useSdk.base,
-    session = _useSdk.session;
+const useBase = () => {
+  const {
+    base,
+    session
+  } = (0, _sdk_context.useSdk)();
   (0, _use_watchable.default)(base, ['schema']);
   (0, _use_watchable.default)(session, ['permissionLevel']);
   return base;

package/dist/{cjs → esm}/shared/ui/use_color_scheme.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useColorScheme = useColorScheme;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 /** @module @airtable/blocks/ui: useColorScheme */ /** */
 
@@ -37,15 +35,12 @@ var _react = require("react");
 // color scheme from within extensions, whether the preference is directly set or inherited from
 // the browser, etc.
 function useColorScheme() {
-  var _useState = (0, _react.useState)(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    colorScheme = _useState2[0],
-    setColorScheme = _useState2[1];
+  const [colorScheme, setColorScheme] = (0, _react.useState)(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
   (0, _react.useEffect)(() => {
-    var darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
     // Fires when e.matches changes. If there are more color schemes than light and dark,
     // we'll need multiple listeners (and corresponding media queries)
-    var darkModeListener = e => {
+    const darkModeListener = e => {
       setColorScheme(e.matches ? 'dark' : 'light');
     };
     darkModeQuery.addEventListener('change', darkModeListener);

package/dist/{cjs → esm}/shared/ui/use_global_config.js

@@ -1,12 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useGlobalConfig;
 var _use_watchable = _interopRequireDefault(require("./use_watchable"));
 var _sdk_context = require("./sdk_context");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks/ui: useGlobalConfig */ /** */
 
 /**
@@ -43,9 +43,10 @@ var _sdk_context = require("./sdk_context");
  * @hook
  */
 function useGlobalConfig() {
-  var _useSdk = (0, _sdk_context.useSdk)(),
-    globalConfig = _useSdk.globalConfig,
-    session = _useSdk.session;
+  const {
+    globalConfig,
+    session
+  } = (0, _sdk_context.useSdk)();
   (0, _use_watchable.default)(session, ['permissionLevel']);
   (0, _use_watchable.default)(globalConfig, ['*']);
   return globalConfig;

package/dist/{cjs → esm}/shared/ui/use_session.js

@@ -1,17 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _use_watchable = _interopRequireDefault(require("./use_watchable"));
 var _sdk_context = require("./sdk_context");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @internal */
-var useSession = () => {
-  var _useSdk = (0, _sdk_context.useSdk)(),
-    session = _useSdk.session,
-    base = _useSdk.base;
+const useSession = () => {
+  const {
+    session,
+    base
+  } = (0, _sdk_context.useSdk)();
   (0, _use_watchable.default)(session, ['permissionLevel', 'currentUser']);
   // permission checks depend on the base schema, so we need to track that too:
   (0, _use_watchable.default)(base, ['schema']);

package/dist/{cjs → esm}/shared/ui/use_synced.js

@@ -1,12 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useSynced;
 var _global_config_synced_component_helpers = _interopRequireDefault(require("./global_config_synced_component_helpers"));
 var _sdk_context = require("./sdk_context");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * A hook for syncing a component to {@link GlobalConfig}.
  * Useful if you are dealing with a custom input component and can‘t use one of our `Synced` components.
@@ -34,10 +34,12 @@ var _sdk_context = require("./sdk_context");
  */
 function useSynced(globalConfigKey) {
   _global_config_synced_component_helpers.default.useDefaultWatchesForSyncedComponent(globalConfigKey);
-  var sdk = (0, _sdk_context.useSdk)();
-  var globalConfig = sdk.globalConfig;
-  var value = globalConfig.get(globalConfigKey);
-  var canSetValue = globalConfig.hasPermissionToSet(globalConfigKey);
+  const sdk = (0, _sdk_context.useSdk)();
+  const {
+    globalConfig
+  } = sdk;
+  const value = globalConfig.get(globalConfigKey);
+  const canSetValue = globalConfig.hasPermissionToSet(globalConfigKey);
   function setValue(newValue) {
     sdk.globalConfig.setAsync(globalConfigKey, newValue);
   }

package/dist/{cjs → esm}/shared/ui/use_watchable.js

@@ -1,28 +1,17 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.symbol.description.js");
-require("core-js/modules/es.array.from.js");
-require("core-js/modules/es.array.slice.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.regexp.exec.js");
-require("core-js/modules/es.regexp.to-string.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useWatchable;
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.array.map.js");
-require("core-js/modules/web.dom-collections.iterator.js");
 var _react = require("react");
 var _useSubscription = require("use-subscription");
 var _error_utils = require("../error_utils");
 var _private_utils = require("../private_utils");
 var _use_array_identity = _interopRequireDefault(require("./use_array_identity"));
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } /** @module @airtable/blocks/ui: useWatchable */ /** */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** @module @airtable/blocks/ui: useWatchable */ /** */
+
 /**
  * A React hook for watching data in Airtable models like {@link Table} and {@link Record}. Each
  * model has several watchable keys that can be used with this hook to have your component
@@ -32,10 +21,12 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  * This is a low-level tool that you should only use when you specifically need it. There are more
  * convenient model-specific hooks available:
  *
- * * For {@link Base}, {@link Table}, {@link View}, or {@link Field}, use {@link useBase}.
- * * For {@link RecordQueryResult} or {@link Record}, use {@link useRecords}, {@link useRecordIds}, or {@link useRecordById}.
+ * * For {@link Base}, {@link Table}, {base-only} {@link View},{/base-only}or {@link Field}, use {@link useBase}.
+ * * For {base-only}{@link RecordQueryResult} or {/base-only}{@link Record}, use {@link useRecords}, {@link useRecordIds}, or {@link useRecordById}.
+ * {base-only}
  * * For {@link Viewport}, use {@link useViewport}.
  * * For {@link SettingsButton}, use {@link useSettingsButton}.
+ * {/base-only}
  *
  * If you're writing a class component and still want to be able to use hooks, try {@link withHooks}.
  *
@@ -66,12 +57,12 @@ function useWatchable(models, keys, callback) {
   if (keys === undefined) {
     throw (0, _error_utils.spawnError)('Invalid call to useWatchable: keys cannot be undefined. ' + 'Pass a key or array of keys corresponding to the model being watched as the second ' + 'argument.');
   }
-  var compactModels = (0, _use_array_identity.default)((0, _private_utils.compact)(Array.isArray(models) ? models : [models]));
-  var compactKeys = (0, _use_array_identity.default)((0, _private_utils.compact)(Array.isArray(keys) ? keys : [keys]));
+  const compactModels = (0, _use_array_identity.default)((0, _private_utils.compact)(Array.isArray(models) ? models : [models]));
+  const compactKeys = (0, _use_array_identity.default)((0, _private_utils.compact)(Array.isArray(keys) ? keys : [keys]));
 
   // use a ref to the callback so consumers don't have to provide their own memoization to avoid
   // unwatching and rewatching every render
-  var callbackRef = (0, _react.useRef)(callback);
+  const callbackRef = (0, _react.useRef)(callback);
   callbackRef.current = callback;
 
   // we use a subscription to model.__getWatchableKey() to track changes. This is because
@@ -84,7 +75,7 @@ function useWatchable(models, keys, callback) {
   //      re-render when information that we care about has changed.
   //   3. is unique to that model. This means that if we change models, we're guaranteed to get
   //      re-rendered.
-  var watchSubscription = (0, _react.useMemo)(() => {
+  const watchSubscription = (0, _react.useMemo)(() => {
     return {
       getCurrentValue: () => compactModels.map(model => model.__getWatchableKey()).join(','),
       subscribe: notifyChange => {
@@ -98,8 +89,8 @@ function useWatchable(models, keys, callback) {
         // models and keys until _after_ we've watched the new ones. That way, the ref-
         // count never reaches 0. We don't want the old watches to actually trigger in that
         // time though - so `isDisabled` prevents that.
-        var isDisabled = false;
-        var onChange = function onChange(model, key) {
+        let isDisabled = false;
+        const onChange = function (model, key) {
           if (isDisabled) {
             return;
           }
@@ -111,32 +102,14 @@ function useWatchable(models, keys, callback) {
             callbackRef.current(model, key, ...args);
           }
         };
-        var _iterator = _createForOfIteratorHelper(compactModels),
-          _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var model = _step.value;
-            model.watch(compactKeys, onChange);
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
+        for (const model of compactModels) {
+          model.watch(compactKeys, onChange);
         }
         return () => {
           isDisabled = true;
           setTimeout(() => {
-            var _iterator2 = _createForOfIteratorHelper(compactModels),
-              _step2;
-            try {
-              for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-                var model = _step2.value;
-                model.unwatch(compactKeys, onChange);
-              }
-            } catch (err) {
-              _iterator2.e(err);
-            } finally {
-              _iterator2.f();
+            for (const model of compactModels) {
+              model.unwatch(compactKeys, onChange);
             }
           }, 0);
         };

package/dist/{cjs → esm}/shared/ui/with_hooks.js

@@ -1,21 +1,14 @@
 "use strict";
 
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/web.dom-collections.iterator.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = withHooks;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _error_utils = require("../error_utils");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @module @airtable/blocks/ui: withHooks */ /** */
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /** @module @airtable/blocks/ui: withHooks */ /** */
 /**
  * @hidden
  * A higher-order component for working with React hooks in class-based components. It takes a React
@@ -110,21 +103,21 @@ function withHooks(Component, getAdditionalPropsToInject) {
     throw (0, _error_utils.spawnError)('withHooks: getAdditionalPropsToInject is required');
   }
   return /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
-    var propsToInject = getAdditionalPropsToInject(props);
+    const propsToInject = getAdditionalPropsToInject(props);
     if (propsToInject === null || typeof propsToInject !== 'object') {
       throw (0, _error_utils.spawnError)('withHooks: getAdditionalPropsToInject must return an object');
     }
 
     // getAdditionalPropsToInject may return a ref. We want to make sure this ref gets populated
     // with the component instance, so we need to pass it down to the component we're wrapping.
-    var injectedRef = propsToInject.ref;
+    const injectedRef = propsToInject.ref;
 
     // we might have a second ref passed in from the parent though - a consumer trying to use
     // the wrapped component who also wants a reference to the component instance. in order to
     // support both these use-cases, we need to set both refs. to do this, we create a function
     // ref that sets both the injectedRef and forwardedRef. Each ref can be either a function
     // ref or object ref, so we handle both these cases.
-    var mergedRef = React.useMemo(() => {
+    const mergedRef = React.useMemo(() => {
       if (!injectedRef && !forwardedRef) {
         return undefined;
       }
@@ -144,7 +137,7 @@ function withHooks(Component, getAdditionalPropsToInject) {
 
     // It's important that the ref prop comes at the end, so it overrides
     // any 'ref's in props or propsToInject.
-    return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, props, propsToInject, {
+    return /*#__PURE__*/React.createElement(Component, _extends({}, props, propsToInject, {
       ref: mergedRef
     }));
   });

package/dist/{cjs → esm}/shared/unstable_private_utils.js

@@ -1,7 +1,5 @@
 "use strict";
 
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/web.dom-collections.for-each.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +9,7 @@ Object.keys(_private_utils).forEach(function (key) {
   if (key in exports && exports[key] === _private_utils[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _private_utils[key];
     }
   });
@@ -22,7 +20,7 @@ Object.keys(_error_utils).forEach(function (key) {
   if (key in exports && exports[key] === _error_utils[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _error_utils[key];
     }
   });
@@ -33,7 +31,7 @@ Object.keys(_event_tracker).forEach(function (key) {
   if (key in exports && exports[key] === _event_tracker[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _event_tracker[key];
     }
   });
@@ -44,7 +42,7 @@ Object.keys(_block_stats).forEach(function (key) {
   if (key in exports && exports[key] === _block_stats[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _block_stats[key];
     }
   });

package/dist/{cjs → esm}/shared/warning.js

@@ -5,19 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.__injectSdkIntoWarning = __injectSdkIntoWarning;
 exports.default = void 0;
-var usedWarnings = {};
+const usedWarnings = {};
 var _default = msgLines => {
-  var msg = typeof msgLines === 'string' ? msgLines : msgLines.join('\n');
-  var mayUseConsole = !sdk || sdk.runInfo.isDevelopmentMode;
+  const msg = typeof msgLines === 'string' ? msgLines : msgLines.join('\n');
+  const mayUseConsole = !sdk || sdk.runInfo.isDevelopmentMode;
   if (mayUseConsole && usedWarnings[msg] !== true) {
     usedWarnings[msg] = true;
 
     // eslint-disable-next-line no-console
-    console.warn("[@airtable/blocks] ".concat(msg));
+    console.warn(`[@airtable/blocks] ${msg}`);
   }
 };
 exports.default = _default;
-var sdk;
+let sdk;
 
 // The application-level Sdk instance must be injected dynamically to avoid
 // circular dependencies at the time of module resolution.

package/dist/esm/shared/watchable.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _private_utils = require("./private_utils");
+var _error_utils = require("./error_utils");
+/** @module @airtable/blocks/models: Abstract models */ /** */
+
+/**
+ * Abstract superclass for watchable models. All watchable models expose `watch`
+ * and `unwatch` methods that allow consumers to subscribe to changes to that model.
+ *
+ * This class should not be used directly.
+ *
+ * @docsPath models/advanced/Watchable
+ */
+class Watchable {
+  /** @internal */
+  static _className = 'Watchable';
+  /** @internal */
+  static _isWatchableKey(_key) {
+    // Override to return whether `key` is a valid watchable key.
+    return false;
+  }
+  /** @internal */
+  _changeCount = 0;
+  /** @internal */
+  _watchableId = (0, _private_utils.getLocallyUniqueId)();
+  /** @internal */
+
+  /**
+   * @internal
+   */
+  constructor() {
+    this._changeWatchersByKey = {};
+  }
+  // React integrations (e.g. useSubscription) rely on referential equality (===) to determine
+  // when things have changed. This doesn't work with our mutable models, since the identity
+  // of the model doesn't change, but the data inside it might. Rather than never returning two equal values
+  // those integrations can use __getWatchableKey, a string key that is guaranteed to be unique
+  // to each watchable and will change whenever the watch keys are fired.
+  /**
+   * @internal
+   */
+  __getWatchableKey() {
+    return `${this._watchableId} ${this._changeCount}`;
+  }
+  /**
+   * Helper method to get only the valid watchable keys - or throw if a key is invalid
+   *
+   * @param keys
+   * @internal
+   */
+  _getWatchableValidKeysOrThrow(keys, errorMethodName, shouldWarnInsteadOfThrow) {
+    const arrayKeys = Array.isArray(keys) ? keys : [keys];
+    const validKeys = [];
+    for (const key of arrayKeys) {
+      if (this.constructor._isWatchableKey(key)) {
+        validKeys.push(key);
+      } else {
+        const className = this.constructor._className;
+        const errorString = `Invalid key to ${errorMethodName} for ${className}: ${key}`;
+        if (shouldWarnInsteadOfThrow) {
+          // eslint-disable-next-line no-console
+          console.warn(errorString);
+        } else {
+          throw (0, _error_utils.spawnError)(errorString);
+        }
+      }
+    }
+    return validKeys;
+  }
+  /**
+   * Get notified of changes to the model.
+   *
+   * Every call to `.watch` should have a matching call to `.unwatch`.
+   *
+   * Returns the array of keys that were watched.
+   *
+   * @param keys the keys to watch
+   * @param callback a function to call when those keys change
+   * @param context an optional context for `this` in `callback`.
+   */
+  watch(keys, callback, context) {
+    const validKeys = this._getWatchableValidKeysOrThrow(keys, 'watch');
+    for (const key of validKeys) {
+      if (!this._changeWatchersByKey[key]) {
+        this._changeWatchersByKey[key] = [];
+      }
+      // Rather than pushing onto this array, we initialize a new array.
+      // This is necessary since watches can change as a result of an
+      // event getting triggered. It would be bad if as we iterate over
+      // our watchers, new watchers get pushed onto the array that we
+      // are iterating over.
+      // TODO(jb): as a perf optimization, we *could* push onto this array
+      // as long as we are not in the middle of iterating over it.
+      this._changeWatchersByKey[key] = [...this._changeWatchersByKey[key], {
+        callback,
+        context
+      }];
+    }
+    return validKeys;
+  }
+  /**
+   * Unwatch keys watched with `.watch`.
+   *
+   * Should be called with the same arguments given to `.watch`.
+   *
+   * Returns the array of keys that were unwatched.
+   *
+   * @param keys the keys to unwatch
+   * @param callback the function passed to `.watch` for these keys
+   * @param context the context that was passed to `.watch` for this `callback`
+   */
+  unwatch(keys, callback, context) {
+    const validKeys = this._getWatchableValidKeysOrThrow(keys, 'unwatch', true);
+    for (const key of validKeys) {
+      const watchers = this._changeWatchersByKey[key];
+      if (watchers) {
+        const filteredWatchers = watchers.filter(watcher => {
+          return watcher.callback !== callback || watcher.context !== context;
+        });
+        if (filteredWatchers.length > 0) {
+          this._changeWatchersByKey[key] = filteredWatchers;
+        } else {
+          delete this._changeWatchersByKey[key];
+        }
+      }
+    }
+    return validKeys;
+  }
+  /**
+   * @internal
+   */
+  _onChange(key) {
+    this._changeCount += 1;
+    const watchers = this._changeWatchersByKey[key];
+    if (watchers) {
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key2 = 1; _key2 < _len; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+      for (const watcher of watchers) {
+        watcher.callback.call(watcher.context, this, key, ...args);
+      }
+    }
+  }
+}
+var _default = exports.default = Watchable;

package/dist/esm/stats/block_stats.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.blockStats = void 0;
+var _airtable_interface = _interopRequireDefault(require("../injected/airtable_interface"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// NOTE(richsinn): this client is effectively an implementation of the StatsClient interface
+// for Datadog. For example, see https://github.com/Hyperbase/hyperbase/blob/development/client_server_shared/stats/stats_client.tsx
+
+/** @hidden */
+class BlockStats {
+  increment(stat, tags) {
+    this.incrementBy(stat, 1, tags);
+  }
+  incrementBy(stat, value, tags) {
+    (0, _airtable_interface.default)().sendStat({
+      metricType: 'incrementBy',
+      stat,
+      value,
+      tags
+    });
+  }
+  decrement(stat, tags) {
+    this.decrementBy(stat, 1, tags);
+  }
+  decrementBy(stat, value, tags) {
+    (0, _airtable_interface.default)().sendStat({
+      metricType: 'decrementBy',
+      stat,
+      value,
+      tags
+    });
+  }
+  gauge(stat, value, tags) {
+    (0, _airtable_interface.default)().sendStat({
+      metricType: 'gauge',
+      stat,
+      value,
+      tags
+    });
+  }
+  histogram(stat, value, tags) {
+    (0, _airtable_interface.default)().sendStat({
+      metricType: 'histogram',
+      stat,
+      value,
+      tags
+    });
+  }
+  distribution(stat, value, tags) {
+    (0, _airtable_interface.default)().sendStat({
+      metricType: 'distribution',
+      stat,
+      value,
+      tags
+    });
+  }
+  timing(stat, time, tags) {
+    (0, _airtable_interface.default)().sendStat({
+      metricType: 'timing',
+      stat,
+      value: time,
+      tags
+    });
+  }
+  timingWithSum(stat, time, tags) {
+    this.timing(stat, time, tags);
+    this.incrementBy(stat + '.sum', time, tags);
+  }
+}
+const blockStats = exports.blockStats = new BlockStats();