@warp-drive-mirror/ember 5.8.0-alpha.4 → 5.8.0-alpha.40

package/dist/unpkg/dev/index.js

@@ -0,0 +1,467 @@
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { DISPOSE, createRequestSubscription, memoized } from '@warp-drive-mirror/core/store/-private';
+export { createRequestSubscription, getRequestState } from '@warp-drive-mirror/core/store/-private';
+import { getPromiseState } from '@warp-drive-mirror/core/reactive';
+export { getPromiseState } from '@warp-drive-mirror/core/reactive';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+const and = (x, y) => Boolean(x && y);
+/**
+ * The `<Throw />` component is used to throw an error in a template.
+ *
+ * That's all it does. So don't use it unless the application should
+ * throw an error if it reaches this point in the template.
+ *
+ * ```gts
+ * <Throw @error={{anError}} />
+ * ```
+ *
+ * @category Components
+ * @public
+ */
+class Throw extends Component {
+  constructor(owner, args) {
+    super(owner, args);
+    // this error is opaque (user supplied) so we don't validate it
+    // as an Error instance.
+
+    {
+      // eslint-disable-next-line @typescript-eslint/only-throw-error
+      throw this.args.error;
+    }
+  }
+  static {
+    setComponentTemplate(precompileTemplate("", {
+      strictMode: true
+    }), this);
+  }
+}
+/**
+ * The `<Await />` component allow you to utilize reactive control flow
+ * for asynchronous states in your application.
+ *
+ * Await is ideal for handling "boundaries", outside which some state is
+ * still allowed to be unresolved and within which it MUST be resolved.
+ *
+ * ```gts
+ * import { Await } from '@warp-drive-mirror/ember';
+ *
+ * <template>
+ *   <Await @promise={{@request}}>
+ *     <:pending>
+ *       <Spinner />
+ *     </:pending>
+ *
+ *     <:error as |error|>
+ *       <ErrorForm @error={{error}} />
+ *     </:error>
+ *
+ *     <:success as |result|>
+ *       <h1>{{result.title}}</h1>
+ *     </:success>
+ *   </Await>
+ * </template>
+ * ```
+ *
+ * The `<Await />` component requires that error states are properly handled.
+ *
+ * If no error block is provided and the promise rejects, the error will
+ * be thrown.
+ *
+ * @category Components
+ * @public
+ */
+class Await extends Component {
+  get state() {
+    return getPromiseState(this.args.promise);
+  }
+  get error() {
+    return this.state.error;
+  }
+  get result() {
+    return this.state.result;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("\n    {{#if this.state.isPending}}\n      {{yield to=\"pending\"}}\n    {{else if (and this.state.isError (has-block \"error\"))}}\n      {{yield this.error to=\"error\"}}\n    {{else if this.state.isSuccess}}\n      {{yield this.result to=\"success\"}}\n    {{else}}\n      <Throw @error={{this.error}} />\n    {{/if}}\n  ", {
+      strictMode: true,
+      scope: () => ({
+        and,
+        Throw
+      })
+    }), this);
+  }
+}
+
+const deferred = /* @__PURE__ */new WeakMap();
+function deferDecorator(proto, prop, desc) {
+  let map = deferred.get(proto);
+  if (!map) {
+    map = /* @__PURE__ */new Map();
+    deferred.set(proto, map);
+  }
+  map.set(prop, desc);
+}
+function findDeferredDecorator(target, prop) {
+  var _a;
+  let cursor = target.prototype;
+  while (cursor) {
+    let desc = (_a = deferred.get(cursor)) == null ? void 0 : _a.get(prop);
+    if (desc) {
+      return desc;
+    }
+    cursor = cursor.prototype;
+  }
+}
+function decorateFieldV2(prototype, prop, decorators, initializer) {
+  let desc = {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    initializer: null
+  };
+  if (initializer) {
+    desc.initializer = initializer;
+  }
+  for (let decorator of decorators) {
+    desc = decorator(prototype, prop, desc) || desc;
+  }
+  if (desc.initializer === void 0) {
+    Object.defineProperty(prototype, prop, desc);
+  } else {
+    deferDecorator(prototype, prop, desc);
+  }
+}
+function decorateMethodV2(prototype, prop, decorators) {
+  const origDesc = Object.getOwnPropertyDescriptor(prototype, prop);
+  let desc = {
+    ...origDesc
+  };
+  for (let decorator of decorators) {
+    desc = decorator(prototype, prop, desc) || desc;
+  }
+  if (desc.initializer !== void 0) {
+    desc.value = desc.initializer ? desc.initializer.call(prototype) : void 0;
+    desc.initializer = void 0;
+  }
+  Object.defineProperty(prototype, prop, desc);
+}
+function initializeDeferredDecorator(target, prop) {
+  let desc = findDeferredDecorator(target.constructor, prop);
+  if (desc) {
+    Object.defineProperty(target, prop, {
+      enumerable: desc.enumerable,
+      configurable: desc.configurable,
+      writable: desc.writable,
+      value: desc.initializer ? desc.initializer.call(target) : void 0
+    });
+  }
+}
+
+function notNull(x) {
+  (test => {
+    if (!test) {
+      throw new Error('Expected a non-null value, but got null');
+    }
+  })(x !== null);
+  return x;
+}
+const not = x => !x;
+const IdleBlockMissingError = new Error('No idle block provided for <Request> component, and no query or request was provided.');
+let consume = service;
+const DefaultChrome = setComponentTemplate(precompileTemplate("{{yield}}", {
+  strictMode: true
+}), templateOnly());
+/**
+ * The `<Request />` component is a powerful tool for managing data fetching and
+ * state in your Ember application. It provides a declarative approach to reactive
+ * control-flow for managing requests and state in your application.
+ *
+ * The `<Request />` component is ideal for handling "boundaries", outside which some
+ * state is still allowed to be unresolved and within which it MUST be resolved.
+ *
+ * ## Request States
+ *
+ * `<Request />` has five states, only one of which will be active and rendered at a time.
+ *
+ * - `idle`: The component is waiting to be given a request to monitor
+ * - `loading`: The request is in progress
+ * - `error`: The request failed
+ * - `content`: The request succeeded
+ * - `cancelled`: The request was cancelled
+ *
+ * Additionally, the `content` state has a `refresh` method that can be used to
+ * refresh the request in the background, which is available as a sub-state of
+ * the `content` state.
+ *
+ * As with the `<Await />` component, if no error block is provided and the request
+ * rejects, the error will be thrown. Cancellation errors are swallowed instead of
+ * rethrown if no error block or cancellation block is present.
+ *
+ * ```gts
+ * import { Request } from '@warp-drive-mirror/ember';
+ *
+ * <template>
+ *   <Request @request={{@request}}>
+ *     <:loading as |state|>
+ *       <Spinner @percentDone={{state.completedRatio}} />
+ *       <button {{on "click" state.abort}}>Cancel</button>
+ *     </:loading>
+ *
+ *     <:error as |error state|>
+ *       <ErrorForm @error={{error}} />
+ *       <button {{on "click" state.retry}}>Retry</button>
+ *     </:error>
+ *
+ *     <:content as |data state|>
+ *       <h1>{{data.title}}</h1>
+ *       {{#if state.isBackgroundReloading}}
+ *         <SmallSpinner />
+ *         <button {{on "click" state.abort}}>Cancel</button>
+ *       {{else}}
+ *         <button {{on "click" state.refresh}}>Refresh</button>
+ *       {{/if}}
+ *     </:content>
+ *
+ *     <:cancelled as |error state|>
+ *       <h2>The Request was cancelled</h2>
+ *       <button {{on "click" state.retry}}>Retry</button>
+ *     </:cancelled>
+ *
+ *     <:idle>
+ *       <button {{on "click" @kickOffRequest}}>Load Preview?</button>
+ *     </:idle>
+ *
+ *   </Request>
+ * </template>
+ * ```
+ *
+ * ## Streaming Data
+ *
+ * The loading state exposes the download `ReadableStream` instance for consumption
+ *
+ * ```gts
+ * import { Request } from '@warp-drive-mirror/ember';
+ *
+ * <template>
+ *   <Request @request={{@request}}>
+ *     <:loading as |state|>
+ *       <Video @stream={{state.stream}} />
+ *     </:loading>
+ *
+ *     <:error as |error|>
+ *       <ErrorForm @error={{error}} />
+ *     </:error>
+ *   </Request>
+ * </template>
+ * ```
+ *
+ * ## Retry
+ *
+ * Cancelled and error'd requests may be retried by calling the `retry` method.
+ *
+ * Retry will restart the state progression, using the loading, error, cancelled,
+ * and content blocks as appropriate.
+ *
+ * ## Reloading
+ *
+ * The `reload` method will force the request to be fully re-executed, bypassing
+ * cache and restarting the state progression through the loading, error, and
+ * content blocks as appropriate.
+ *
+ * Background reload (refresh) is a special substate of the content state that
+ * allows you to refresh the request in the background. This is useful for when
+ * you want to update the data in the background without blocking the UI.
+ *
+ * Reload and refresh are available as methods on the `content` state.
+ *
+ * ```gts
+ * import { Request } from '@warp-drive-mirror/ember';
+ *
+ * <template>
+ *   <Request @request={{@request}}>
+ *     <:content as |data state|>
+ *       <h1>{{data.title}}</h1>
+ *       {{#if state.isBackgroundReloading}}
+ *         <SmallSpinner />
+ *         <button {{on "click" state.abort}}>Cancel</button>
+ *       {{/if}}
+ *
+ *       <button {{on "click" state.refresh}}>Refresh</button>
+ *       <button {{on "click" state.reload}}>Reload</button>
+ *     </:content>
+ *  </Request>
+ * </template>
+ * ```
+ *
+ * ## Advanced Reloading
+ *
+ * We can nest our usage of `<Request />` to handle more advanced
+ * reloading scenarios.
+ *
+ * ```gts
+ * import { Request } from '@warp-drive-mirror/ember';
+ *
+ * <template>
+ *   <Request @request={{@request}}>
+ *     <:cancelled>
+ *       <h2>The Request Cancelled</h2>
+ *     </:cancelled>
+ *
+ *     <:error as |error|>
+ *       <ErrorForm @error={{error}} />
+ *     </:error>
+ *
+ *     <:content as |result state|>
+ *       <Request @request={{state.latestRequest}}>
+ *         <!-- Handle Background Request -->
+ *       </Request>
+ *
+ *       <h1>{{result.title}}</h1>
+ *
+ *       <button {{on "click" state.refresh}}>Refresh</button>
+ *     </:content>
+ *   </Request>
+ * </template>
+ * ```
+ *
+ * ## Autorefresh
+ *
+ * `<Request />` supports automatic refresh and reload under certain conditions.
+ *
+ * - `online`: This occurs when a browser window or tab comes back to the foreground
+ *   after being backgrounded or when the network reports as being online after
+ *   having been offline.
+ * - `interval`: This occurs when a specified amount of time has passed.
+ * - `invalid`: This occurs when the store emits a notification that the request
+ *   has become invalid.
+ *
+ * You can specify when autorefresh should occur by setting the `autorefresh` arg
+ * to `true` or a comma-separated list of the above values.
+ *
+ * A value of `true` is equivalent to `'online,invalid'`.
+ *
+ * By default, an autorefresh will only occur if the browser was backgrounded or
+ * offline for more than 30s before coming back available. This amount of time can
+ * be tweaked by setting the number of milliseconds via `@autorefreshThreshold`.
+ *
+ * This arg also controls the interval at which the request will be refreshed
+ * if the `interval` autorefresh type is enabled.
+ *
+ * Finally, the behavior of the request initiated by autorefresh can be adjusted
+ * by setting the `autorefreshBehavior` arg to `'refresh'`, `'reload'`, or `'policy'`.
+ *
+ * - `'refresh'`: Refresh the request in the background
+ * - `'reload'`: Force a reload of the request
+ * - `'policy'` (**default**): Let the store's configured CachePolicy decide whether to
+ *    reload, refresh, or do nothing.
+ *
+ * More advanced refresh and reload behaviors can be created by passing the reload and
+ * refresh actions into another component. For instance, refresh could be set up on a
+ * timer or on a websocket subscription.
+ *
+ *
+ * ```gts
+ * import { Request } from '@warp-drive-mirror/ember';
+ *
+ * <template>
+ *   <Request @request={{@request}}>
+ *     <:content as |result state|>
+ *       <h1>{{result.title}}</h1>
+ *
+ *       <Interval @period={{30_000}} @fn={{state.refresh}} />
+ *       <Subscribe @channel={{@someValue}} @fn={{state.refresh}} />
+ *     </:content>
+ *   </Request>
+ * </template>
+ * ```
+ *
+ * If a matching request is refreshed or reloaded by any other component,
+ * the `Request` component will react accordingly.
+ *
+ * ## Deduping
+ *
+ * The store dedupes requests by identity. If a request is made for the same identity
+ * from multiple `<Request />` components, even if the request is not referentially the
+ * same, only one actual request will be made.
+ *
+ * @category Components
+ * @public
+ */
+class Request extends Component {
+  static {
+    decorateFieldV2(this.prototype, "_store", [consume('store')]);
+  }
+  #_store = (initializeDeferredDecorator(this, "_store"), void 0);
+  /**
+  * The store instance to use for making requests. If contexts are available, this
+  * will be the `store` on the context, else it will be the store service.
+  *
+  * @internal
+  */
+  get store() {
+    const store = this.args.store || this._store;
+    (test => {
+      if (!test) {
+        throw new Error(`No store was provided to the <Request> component. Either provide a store via the @store arg or by registering a store service.`);
+      }
+    })(store);
+    return store;
+  }
+  _state = null;
+  get state() {
+    let {
+      _state
+    } = this;
+    const {
+      store
+    } = this;
+    const {
+      subscription
+    } = this.args;
+    if (_state && (_state.store !== store || subscription)) {
+      _state[DISPOSE]();
+      _state = null;
+    }
+    if (subscription) {
+      return subscription;
+    }
+    if (!_state) {
+      this._state = _state = createRequestSubscription(store, this.args);
+    }
+    return _state;
+  }
+  /**
+  * The chrome component to use for rendering the request.
+  *
+  * @private
+  */
+  get Chrome() {
+    return this.args.chrome || DefaultChrome;
+  }
+  static {
+    decorateMethodV2(this.prototype, "Chrome", [memoized]);
+  }
+  willDestroy() {
+    if (this._state) {
+      this._state[DISPOSE]();
+      this._state = null;
+    }
+  }
+  static {
+    setComponentTemplate(precompileTemplate("\n    <this.Chrome @state={{if this.state.isIdle null this.state.reqState}} @features={{this.state.contentFeatures}}>\n      {{#if (and this.state.isIdle (has-block \"idle\"))}}\n        {{yield to=\"idle\"}}\n\n      {{else if this.state.isIdle}}\n        <Throw @error={{IdleBlockMissingError}} />\n\n      {{else if this.state.reqState.isLoading}}\n        {{yield this.state.reqState.loadingState to=\"loading\"}}\n\n      {{else if (and this.state.reqState.isCancelled (has-block \"cancelled\"))}}\n        {{yield (notNull this.state.reqState.reason) this.state.errorFeatures to=\"cancelled\"}}\n\n      {{else if (and this.state.reqState.isError (has-block \"error\"))}}\n        {{yield (notNull this.state.reqState.reason) this.state.errorFeatures to=\"error\"}}\n\n      {{else if this.state.reqState.isSuccess}}\n        {{yield this.state.result this.state.contentFeatures to=\"content\"}}\n\n      {{else if (not this.state.reqState.isCancelled)}}\n        <Throw @error={{(notNull this.state.reqState.reason)}} />\n      {{/if}}\n\n      {{yield this.state.reqState to=\"always\"}}\n    </this.Chrome>\n  ", {
+      strictMode: true,
+      scope: () => ({
+        and,
+        Throw,
+        IdleBlockMissingError,
+        notNull,
+        not
+      })
+    }), this);
+  }
+}
+
+export { Await, Request, Throw };

package/dist/unpkg/dev/install.js

@@ -0,0 +1,49 @@
+import { tagForProperty } from '@ember/-internals/metal';
+import { _backburner } from '@ember/runloop';
+import { createCache, getValue, dirtyTag, consumeTag } from '@glimmer/validator';
+import { setupSignals } from '@warp-drive-mirror/core/configure';
+import * as _importSync20 from '@ember/test-waiters';
+
+function esCompat(m) {
+  return m?.__esModule ? m : {
+    default: m,
+    ...m
+  };
+}
+
+const emberDirtyTag = dirtyTag;
+function buildSignalConfig(options) {
+  options.wellknown.Array;
+  return {
+    createSignal(obj, key) {
+      return tagForProperty(obj, key);
+    },
+    consumeSignal(signal) {
+      consumeTag(signal);
+    },
+    notifySignal(signal) {
+      emberDirtyTag(signal);
+    },
+    createMemo: (object, key, fn) => {
+      {
+        const memo = createCache(fn);
+        return () => getValue(memo);
+      }
+    },
+    willSyncFlushWatchers: () => {
+      //@ts-expect-error
+      return !!_backburner.currentInstance && _backburner._autorun !== true;
+    },
+    waitFor: async promise => {
+      {
+        const {
+          waitForPromise
+        } = esCompat(_importSync20);
+        return waitForPromise(promise);
+      }
+    }
+  };
+}
+setupSignals(buildSignalConfig);
+
+export { buildSignalConfig };