@airtable/blocks 0.0.0-experimental-20e3506bd-20250428

package/dist/cjs/shared/ui/use_synced.js

@@ -0,0 +1,45 @@
+"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");
+/**
+ * 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.
+ *
+ * @param globalConfigKey
+ * @example
+ * ```js
+ * import {useBase, useSynced} from '@airtable/blocks/ui';
+ *
+ * function CustomInputSynced() {
+ *    const [value, setValue, canSetValue] = useSynced('myGlobalConfigKey');
+ *
+ *     return (
+ *         <input
+ *              type="text"
+ *              value={value}
+ *              onChange={e => setValue(e.target.value)}
+ *              disabled={!canSetValue}
+ *          />
+ *     );
+ * }
+ * ```
+ * @docsPath UI/hooks/useSynced
+ * @hook
+ */
+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);
+  function setValue(newValue) {
+    sdk.globalConfig.setAsync(globalConfigKey, newValue);
+  }
+  return [value, setValue, canSetValue];
+}

package/dist/cjs/shared/ui/use_watchable.js

@@ -0,0 +1,169 @@
+"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 */ /** */
+/**
+ * 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
+ * automatically re-render when data in the models changes. You can also provide an optional
+ * callback if you need to do anything other than re-render when the data changes.
+ *
+ * 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 Viewport}, use {@link useViewport}.
+ * * For {@link SettingsButton}, use {@link useSettingsButton}.
+ *
+ * If you're writing a class component and still want to be able to use hooks, try {@link withHooks}.
+ *
+ * @param models The model or models to watch.
+ * @param keys The key or keys to watch. Non-optional, but may be null.
+ * @param callback An optional callback to call when any of the watch keys change.
+ *
+ * @example
+ * ```js
+ * import {useWatchable} from '@airtable/blocks/ui';
+ *
+ * function TableName({table}) {
+ *     useWatchable(table, 'name');
+ *     return <span>The table name is {table.name}</span>;
+ * }
+ *
+ * function ViewNameAndType({view}) {
+ *     useWatchable(view, ['name', 'type']);
+ *     return <span>The view name is {view.name} and the type is {view.type}</span>;
+ * }
+ *
+ * function RecordValuesAndColorInViewIfExists({record, field, view}) {
+ *     useWatchable(record, ['cellValues', view ? `colorInView:${view.id}` : null]);
+ *     return <span>
+ *         The record has cell value {record.getCellValue(field)} in {field.name}.
+ *         {view ? `The record has color ${record.getColorInView(view)} in ${view.name}.` : null}
+ *     </span>
+ * }
+ * ```
+ *
+ * @example
+ * ```js
+ * import {useWatchable} from '@airtable/blocks/ui';
+ *
+ * function ActiveView({cursor}) {
+ *     useWatchable(cursor, 'activeViewId', () => {
+ *          alert('active view changed!!!')
+ *     });
+ *
+ *     return <span>Active view id: {cursor.activeViewId}</span>;
+ * }
+ * ```
+ * @docsPath UI/hooks/useWatchable
+ * @hook
+ */
+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]));
+
+  // 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);
+  callbackRef.current = callback;
+
+  // we use a subscription to model.__getWatchableKey() to track changes. This is because
+  // __getWatchableKey will return a value that is:
+  //   1. identical by === if nothing watchable in the model has changed. That means we won't
+  //      trigger unnecessary re-renders if nothing has changed. Without this, every initial
+  //      mount will be double-rendered as useSubscription will think the model changed in the
+  //      async gap
+  //   2. will be !== if anything watchable in the model has changed. Without this, we might not
+  //      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)(() => {
+    return {
+      getCurrentValue: () => compactModels.map(model => model.__getWatchableKey()).join(','),
+      subscribe: notifyChange => {
+        // sometimes, watching and unwatching a key has side effects - typically, these
+        // only happen when watching or unwatching something for the first or last time, as
+        // we use ref-counting to avoid unnecessary side effects. When the keys or models
+        // for this subscription change, we teardown the old subscription and create a new
+        // one. Often though, underlying model-key pairs will be the same - we'll remove
+        // the old subscription, but instantly re-add it. In this case, we don't want to
+        // trigger any side effects. To work around this, we defer unwatching the previous
+        // 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) {
+          if (isDisabled) {
+            return;
+          }
+          notifyChange();
+          if (callbackRef.current) {
+            for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+              args[_key - 2] = arguments[_key];
+            }
+            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();
+        }
+        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();
+            }
+          }, 0);
+        };
+      }
+    };
+  }, [compactModels, compactKeys]);
+
+  // we don't care about the return value - we just want useSubscription to correctly handle
+  // re-rendering the component for us
+  (0, _useSubscription.useSubscription)(watchSubscription);
+}

package/dist/cjs/shared/ui/with_hooks.js

@@ -0,0 +1,151 @@
+"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 _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 */ /** */
+
+/**
+ * @hidden
+ * A higher-order component for working with React hooks in class-based components. It takes a React
+ * component and wraps it, injecting values from hooks as additional props. `withHooks` uses
+ * [`React.forwardRef`](https://reactjs.org/docs/forwarding-refs.html) to make sure that you can
+ * use refs with your wrapped component in exactly the same way you would if you weren't using
+ * `withHooks`.
+ *
+ * If you need an reference to the actual component instance, you can return a `ref` prop.
+ *
+ * @param Component The React component you want to inject hooks into.
+ * @param getAdditionalPropsToInject A function that takes props and returns more props to be injected into the wrapped component.
+ * @example
+ * ```js
+ * import React from 'react';
+ * import {useRecords, withHooks} from '@airtable/blocks/ui';
+ *
+ * // RecordList takes a list of records and renders it
+ * class RecordList extends React.Component {
+ *      render() {
+ *          const records = this.props.records.map(record => {
+ *              return <li key={record.id}>{record.name}</li>
+ *          });
+ *
+ *          return <ul>{records}</ul>;
+ *      }
+ * }
+ *
+ * // using withHooks, we wrap up RecordList. It takes a table prop, and injects a records
+ * // prop from useRecords
+ * const WrappedRecordList = withHooks(RecordList, ({table}) => {
+ *      const records = useRecords(table);
+ *
+ *      const instanceRef = React.useRef();
+ *      useEffect(() => {
+ *          console.log('RecordList instance:', instanceRef.current);
+ *      });
+ *
+ *      return {
+ *          records: records,
+ *          ref: instanceRef,
+ *      };
+ * });
+ *
+ * // when we use WrappedRecordList, we only need to pass in table:
+ * <WrappedRecordList table={someTable} />
+ * ```
+ *
+ * @example
+ * ```js
+ * import React from 'react';
+ * import {Record, Table} from '@airtable/blocks/models';
+ * import {withHooks, useRecords} from '@airtable/blocks/ui';
+ * // with typescript, things are a little more complex: we need to provide some type annotations to
+ * // indicate which props are injected:
+ *
+ * type RequiredProps = {
+ *      table: Table,
+ * };
+ *
+ * type InjectedProps = {
+ *      records: Array<Record>,
+ * };
+ *
+ * type RecordListProps = RequiredProps & InjectedProps;
+ *
+ * class RecordList extends React.Component<RecordListProps> {
+ *      // implementation is the same as the example above
+ * }
+ *
+ * // you need to annotate the call to withHooks. This takes three type args:
+ * //   - The injected props
+ * //   - The full resulting props passed to the element
+ * //   - the instance type (what you get out of a ref) of the resulting component
+ * const WrappedRecordList = withHooks<InjectedProps, RecordListProps, RecordList>(
+ *      RecordList,
+ *      ({table}) => {
+ *          const records = useRecords(table);
+ *          return {
+ *              records
+ *          };
+ *      },
+ * );
+ *
+ * // when using a ref to the component, you can't refer to it as WrappedRecordList like a normal
+ * // class component. Instead, you need to wrap it in React.ElementRef:
+ * const ref: React.ElementRef<typeof WrappedRecordList> = getTheRefSomehow();
+ * ```
+ */
+function withHooks(Component, getAdditionalPropsToInject) {
+  if (!getAdditionalPropsToInject) {
+    throw (0, _error_utils.spawnError)('withHooks: getAdditionalPropsToInject is required');
+  }
+  return /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+    var 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;
+
+    // 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(() => {
+      if (!injectedRef && !forwardedRef) {
+        return undefined;
+      }
+      return instance => {
+        if (injectedRef && typeof injectedRef === 'object') {
+          injectedRef.current = instance;
+        } else if (typeof injectedRef === 'function') {
+          injectedRef(instance);
+        }
+        if (forwardedRef && typeof forwardedRef === 'object') {
+          forwardedRef.current = instance;
+        } else if (typeof forwardedRef === 'function') {
+          forwardedRef(instance);
+        }
+      };
+    }, [injectedRef, forwardedRef]);
+
+    // 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, {
+      ref: mergedRef
+    }));
+  });
+}

package/dist/cjs/shared/unstable_private_utils.js

@@ -0,0 +1,51 @@
+"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
+});
+var _private_utils = require("./private_utils");
+Object.keys(_private_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _private_utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _private_utils[key];
+    }
+  });
+});
+var _error_utils = require("./error_utils");
+Object.keys(_error_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _error_utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _error_utils[key];
+    }
+  });
+});
+var _event_tracker = require("./event_tracker");
+Object.keys(_event_tracker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _event_tracker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _event_tracker[key];
+    }
+  });
+});
+var _block_stats = require("../stats/block_stats");
+Object.keys(_block_stats).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _block_stats[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _block_stats[key];
+    }
+  });
+});

package/dist/cjs/shared/warning.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.__injectSdkIntoWarning = __injectSdkIntoWarning;
+exports.default = void 0;
+var usedWarnings = {};
+var _default = msgLines => {
+  var msg = typeof msgLines === 'string' ? msgLines : msgLines.join('\n');
+  var 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));
+  }
+};
+exports.default = _default;
+var sdk;
+
+// The application-level Sdk instance must be injected dynamically to avoid
+// circular dependencies at the time of module resolution.
+function __injectSdkIntoWarning(_sdk) {
+  sdk = _sdk;
+}

package/dist/cjs/shared/watchable.js

@@ -0,0 +1,216 @@
+"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.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 = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _private_utils = require("./private_utils");
+var _error_utils = require("./error_utils");
+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/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
+ */
+var Watchable = /*#__PURE__*/function () {
+  /**
+   * @internal
+   */
+  function Watchable() {
+    (0, _classCallCheck2.default)(this, Watchable);
+    /** @internal */
+    (0, _defineProperty2.default)(this, "_changeCount", 0);
+    /** @internal */
+    (0, _defineProperty2.default)(this, "_watchableId", (0, _private_utils.getLocallyUniqueId)());
+    /** @internal */
+    (0, _defineProperty2.default)(this, "_changeWatchersByKey", void 0);
+    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
+   */
+  return (0, _createClass2.default)(Watchable, [{
+    key: "__getWatchableKey",
+    value: function __getWatchableKey() {
+      return "".concat(this._watchableId, " ").concat(this._changeCount);
+    }
+    /**
+     * Helper method to get only the valid watchable keys - or throw if a key is invalid
+     *
+     * @param keys
+     * @internal
+     */
+  }, {
+    key: "_getWatchableValidKeysOrThrow",
+    value: function _getWatchableValidKeysOrThrow(keys, errorMethodName, shouldWarnInsteadOfThrow) {
+      var arrayKeys = Array.isArray(keys) ? keys : [keys];
+      var validKeys = [];
+      var _iterator = _createForOfIteratorHelper(arrayKeys),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var key = _step.value;
+          if (this.constructor._isWatchableKey(key)) {
+            validKeys.push(key);
+          } else {
+            var className = this.constructor._className;
+            var errorString = "Invalid key to ".concat(errorMethodName, " for ").concat(className, ": ").concat(key);
+            if (shouldWarnInsteadOfThrow) {
+              // eslint-disable-next-line no-console
+              console.warn(errorString);
+            } else {
+              throw (0, _error_utils.spawnError)(errorString);
+            }
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      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`.
+     */
+  }, {
+    key: "watch",
+    value: function watch(keys, callback, context) {
+      var validKeys = this._getWatchableValidKeysOrThrow(keys, 'watch');
+      var _iterator2 = _createForOfIteratorHelper(validKeys),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var key = _step2.value;
+          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
+          }];
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      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`
+     */
+  }, {
+    key: "unwatch",
+    value: function unwatch(keys, callback, context) {
+      var validKeys = this._getWatchableValidKeysOrThrow(keys, 'unwatch', true);
+      var _iterator3 = _createForOfIteratorHelper(validKeys),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var key = _step3.value;
+          var watchers = this._changeWatchersByKey[key];
+          if (watchers) {
+            var filteredWatchers = watchers.filter(watcher => {
+              return watcher.callback !== callback || watcher.context !== context;
+            });
+            if (filteredWatchers.length > 0) {
+              this._changeWatchersByKey[key] = filteredWatchers;
+            } else {
+              delete this._changeWatchersByKey[key];
+            }
+          }
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      return validKeys;
+    }
+    /**
+     * @internal
+     */
+  }, {
+    key: "_onChange",
+    value: function _onChange(key) {
+      this._changeCount += 1;
+      var 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];
+        }
+        var _iterator4 = _createForOfIteratorHelper(watchers),
+          _step4;
+        try {
+          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+            var watcher = _step4.value;
+            watcher.callback.call(watcher.context, this, key, ...args);
+          }
+        } catch (err) {
+          _iterator4.e(err);
+        } finally {
+          _iterator4.f();
+        }
+      }
+    }
+  }], [{
+    key: "_isWatchableKey",
+    value: /** @internal */
+    function _isWatchableKey(_key) {
+      // Override to return whether `key` is a valid watchable key.
+      return false;
+    }
+  }]);
+}();
+/** @internal */
+(0, _defineProperty2.default)(Watchable, "_className", 'Watchable');
+var _default = exports.default = Watchable;