@warp-drive/ember 0.0.0-alpha.5 → 0.0.0-alpha.51

package/README.md

@@ -22,6 +22,14 @@
 pnpm install @warp-drive/ember
 ```
 
+**Tagged Releases**
+
+- ![NPM Canary Version](https://img.shields.io/npm/v/%40warp-drive%2Fember/canary?label=@canary&color=FFBF00)
+- ![NPM Beta Version](https://img.shields.io/npm/v/%40warp-drive%2Fember/bet?label=@beta&color=ff00ff)
+- ![NPM Stable Version](https://img.shields.io/npm/v/%40warp-drive%2Fember/latest?label=@latest&color=90EE90)
+- ![NPM LTS Version](https://img.shields.io/npm/v/%40warp-drive%2Fember/lts?label=@lts&color=0096FF)
+- ![NPM LTS-4-12 Version](https://img.shields.io/npm/v/%40warp-drive%2Fember/lts-4-12?label=@lts-4-12&color=bbbbbb)
+
 ## About
 
 This library provides reactive utilities for working with promises and requests, building over these primitives to provide functions and components that enable you to build robust performant apps with elegant control flow
@@ -30,10 +38,10 @@ Documentation
 
 - [PromiseState](#promisestate)
   - [getPromiseState](#getpromisestate)
-  - [\<Await />](#await)
+  - [\<Await />](#await-)
 - [RequestState](#requeststate)
   - [getRequestState](#getrequeststate)
-  - [\<Request />](#request)
+  - [\<Request />](#request-)
 
 ---
 
@@ -210,6 +218,9 @@ import { Await } from '@warp-drive/ember';
 </template>
 ```
 
+When using the Await component, if no error block is provided and the promise rejects,
+the error will be thrown.
+
 ### RequestState
 
 RequestState extends PromiseState to provide a reactive wrapper for a request `Future` which
@@ -297,7 +308,7 @@ import { Request } from '@warp-drive/ember';
 <template>
   <Request @request={{@request}}>
     <:loading as |state|>
-      <Spinner @percentDone={{state.completeRatio}} />
+      <Spinner @percentDone={{state.completedRatio}} />
       <button {{on "click" state.abort}}>Cancel</button>
     </:loading>
 
@@ -312,6 +323,10 @@ import { Request } from '@warp-drive/ember';
 </template>
 ```
 
+When using the Await component, if no error block is provided and the request rejects,
+the error will be thrown. Cancellation errors are not rethrown if no error block or
+cancellation block is present.
+
 - Streaming Data
 
 The loading state exposes the download `ReadableStream` instance for consumption
@@ -357,7 +372,36 @@ import { Request } from '@warp-drive/ember';
 If a request is aborted but no cancelled block is present, the error will be given
 to the error block to handle.
 
-If no error block is present, the error will be rethrown.
+If no error block is present, the cancellation error will be swallowed.
+
+- retry
+
+Cancelled and error'd requests may be retried,
+retry will reuse the error, cancelled and loading
+blocks as appropriate.
+
+```gjs
+import { Request } from '@warp-drive/ember';
+import { on } from '@ember/modifier';
+
+<template>
+  <Request @request={{@request}}>
+    <:cancelled as |error state|>
+      <h2>The Request Cancelled</h2>
+      <button {{on "click" state.retry}}>Retry</button>
+    </:cancelled>
+
+    <:error as |error state|>
+      <ErrorForm @error={{error}} />
+      <button {{on "click" state.retry}}>Retry</button>
+    </:error>
+
+    <:content as |result|>
+      <h1>{{result.title}}</h1>
+    </:content>
+  </Request>
+</template>
+```
 
 - Reloading states
 
@@ -426,21 +470,36 @@ import { Request } from '@warp-drive/ember';
 </template>
 ```
 
-- AutoRefresh behavior
+- Autorefresh behavior
 
 Requests can be made to automatically refresh when a browser window or tab comes back to the
-foreground after being backgrounded.
+foreground after being backgrounded or when the network reports as being online after having
+been offline.
 
 ```gjs
 import { Request } from '@warp-drive/ember';
 
 <template>
-  <Request @request={{@request}} @autoRefresh={{true}}>
+  <Request @request={{@request}} @autorefresh={{true}}>
     <!-- ... -->
   </Request>
 </template>
 ```
 
+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`.
+
+The behavior of the fetch initiated by the autorefresh can also be adjusted by `@autorefreshBehavior`
+
+Options are:
+
+- `refresh` update while continuing to show the current state.
+- `reload` update and show the loading state until update completes)
+- `delegate` (**default**) trigger the request, but let the cache handler decide whether the update should occur or if the cache is still valid.
+
+---
+
 Similarly, refresh could be set up on a timer or on a websocket subscription by using the yielded
 refresh function and passing it to another component.
 
@@ -448,7 +507,7 @@ refresh function and passing it to another component.
 import { Request } from '@warp-drive/ember';
 
 <template>
-  <Request @request={{@request}} @autoRefresh={{true}}>
+  <Request @request={{@request}}>
     <:content as |result state|>
       <h1>{{result.title}}</h1>
 

package/addon-main.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const { addonV1Shim } = require('@embroider/addon-shim');
+const { addonShim } = require('@warp-drive/build-config/addon-shim.cjs');
 
-module.exports = addonV1Shim(__dirname);
+module.exports = addonShim(__dirname);

package/{addon → dist}/index.js

@@ -1,16 +1,17 @@
 import { tracked, cached } from '@glimmer/tracking';
 import { getPromiseResult, setPromiseResult } from '@ember-data/request';
-import { assert } from '@ember/debug';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
-import { macroCondition, moduleExists, importSync } from '@embroider/macros';
+import { macroCondition, moduleExists, importSync, getGlobalConfig } from '@embroider/macros';
+import { EnableHydration } from '@warp-drive/core-types/request';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
 };
 
 // src/runtime.ts
@@ -24,11 +25,11 @@ __export(runtime_exports, {
   n: () => decorateMethodV2,
   p: () => decoratePOJO
 });
-var deferred = /* @__PURE__ */ new WeakMap();
+var deferred = /* @__PURE__ */new WeakMap();
 function deferDecorator(proto, prop, desc) {
   let map = deferred.get(proto);
   if (!map) {
-    map = /* @__PURE__ */ new Map();
+    map = /* @__PURE__ */new Map();
     deferred.set(proto, map);
   }
   map.set(prop, desc);
@@ -65,12 +66,16 @@ function decorateFieldV2(prototype, prop, decorators, initializer) {
     deferDecorator(prototype, prop, desc);
   }
 }
-function decorateMethodV1({ prototype }, prop, decorators) {
+function decorateMethodV1({
+  prototype
+}, prop, decorators) {
   return decorateMethodV2(prototype, prop, decorators);
 }
 function decorateMethodV2(prototype, prop, decorators) {
   const origDesc = Object.getOwnPropertyDescriptor(prototype, prop);
-  let desc = { ...origDesc };
+  let desc = {
+    ...origDesc
+  };
   for (let decorator of decorators) {
     desc = decorator(prototype, prop, desc) || desc;
   }
@@ -92,10 +97,7 @@ function initializeDeferredDecorator(target, prop) {
   }
 }
 function decorateClass(target, decorators) {
-  return decorators.reduce(
-    (accum, decorator) => decorator(accum) || accum,
-    target
-  );
+  return decorators.reduce((accum, decorator) => decorator(accum) || accum, target);
 }
 function decoratePOJO(pojo, decorated) {
   for (let [type, prop, decorators] of decorated) {
@@ -123,7 +125,6 @@ function decoratePojoField(pojo, prop, decorators) {
   }
   Object.defineProperty(pojo, prop, desc);
 }
-
 const RequestCache = new WeakMap();
 function isAbortError(error) {
   return error instanceof DOMException && error.name === 'AbortError';
@@ -339,11 +340,11 @@ class RequestLoadingState {
   get elapsedTime() {
     return (this.endTime || this.lastPacketTime) - this.startTime;
   }
-  get completeRatio() {
+  get completedRatio() {
     return this.sizeHint ? this.bytesLoaded / this.sizeHint : 0;
   }
   get remainingRatio() {
-    return 1 - this.completeRatio;
+    return 1 - this.completedRatio;
   }
   get duration() {
     return this.endTime - this.startTime;
@@ -355,9 +356,9 @@ class RequestLoadingState {
   constructor(future) {
     this._future = future;
   }
-  abort() {
+  abort = () => {
     this._future.abort();
-  }
+  };
 }
 class RequestState {
   #request;
@@ -460,7 +461,6 @@ function getRequestState(future) {
   }
   return state;
 }
-
 const PromiseCache = new WeakMap();
 class PromiseState {
   static {
@@ -526,23 +526,29 @@ class PromiseState {
     }
   }
 }
+const LegacyPromiseProxy = Symbol.for('LegacyPromiseProxy');
+function isLegacyAwaitable(promise) {
+  return LegacyPromiseProxy in promise && 'promise' in promise && promise[LegacyPromiseProxy] === true;
+}
+function getPromise(promise) {
+  return isLegacyAwaitable(promise) ? promise.promise : promise;
+}
 function getPromiseState(promise) {
-  let state = PromiseCache.get(promise);
+  const _promise = getPromise(promise);
+  let state = PromiseCache.get(_promise);
   if (!state) {
-    state = new PromiseState(promise);
-    PromiseCache.set(promise, state);
+    state = new PromiseState(_promise);
+    PromiseCache.set(_promise, state);
   }
   return state;
 }
-
-function notNull(x1) {
-  assert('Expected a non-null value, but got null', x1 !== null);
-  return x1;
-}
 const and = (x1, y1) => Boolean(x1 && y1);
 class Throw extends Component {
   constructor(owner1, args1) {
     super(owner1, args1);
+    // this error is opaque (user supplied) so we don't validate it
+    // as an Error instance.
+    // eslint-disable-next-line @typescript-eslint/no-throw-literal
     throw this.args.error;
   }
   static {
@@ -555,46 +561,251 @@ 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 (notNull this.state.error) to=\"error\"}}\n    {{else if this.state.isSuccess}}\n      {{yield (notNull this.state.result) to=\"success\"}}\n    {{else}}\n      <Throw @error={{(notNull this.state.error)}} />\n    {{/if}}\n  ", {
+    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,
-        notNull,
         Throw
-      }),
-      strictMode: true
+      })
     }), this);
   }
 }
-
-let provide = service;
+function notNull(x1) {
+  macroCondition(getGlobalConfig().WarpDrive.env.DEBUG) ? (test => {
+    if (!test) {
+      throw new Error('Expected a non-null value, but got null');
+    }
+  })(x1 !== null) : {};
+  return x1;
+}
+const not = x1 => !x1;
+// default to 30 seconds unavailable before we refresh
+const DEFAULT_DEADLINE = 30_000;
+let consume = service;
 if (macroCondition(moduleExists('ember-provide-consume-context'))) {
   const {
-    consume
+    consume: contextConsume
   } = importSync('ember-provide-consume-context');
-  provide = consume;
+  consume = contextConsume;
+}
+function isNeverString(val1) {
+  return val1;
 }
 class Request extends Component {
   static {
-    decorateFieldV2(this.prototype, "_store", [provide('store')]);
+    decorateFieldV2(this.prototype, "_store", [consume('store')]);
   }
   #_store = (initializeDeferredDecorator(this, "_store"), void 0);
   /**
   * @internal
   */
-  retry = () => {};
-  reload = () => {};
-  refresh = () => {};
+  static {
+    decorateFieldV2(this.prototype, "isOnline", [tracked], function () {
+      return true;
+    });
+  }
+  #isOnline = (initializeDeferredDecorator(this, "isOnline"), void 0);
+  static {
+    decorateFieldV2(this.prototype, "isHidden", [tracked], function () {
+      return true;
+    });
+  }
+  #isHidden = (initializeDeferredDecorator(this, "isHidden"), void 0);
+  static {
+    decorateFieldV2(this.prototype, "isRefreshing", [tracked], function () {
+      return false;
+    });
+  }
+  #isRefreshing = (initializeDeferredDecorator(this, "isRefreshing"), void 0);
+  static {
+    decorateFieldV2(this.prototype, "_localRequest", [tracked]);
+  }
+  #_localRequest = (initializeDeferredDecorator(this, "_localRequest"), void 0);
+  static {
+    decorateFieldV2(this.prototype, "_latestRequest", [tracked]);
+  }
+  #_latestRequest = (initializeDeferredDecorator(this, "_latestRequest"), void 0);
+  unavailableStart;
+  onlineChanged;
+  backgroundChanged;
+  _originalRequest;
+  _originalQuery;
+  constructor(owner1, args1) {
+    super(owner1, args1);
+    this.installListeners();
+  }
+  installListeners() {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    this.isOnline = window.navigator.onLine;
+    this.unavailableStart = this.isOnline ? null : Date.now();
+    this.isHidden = document.visibilityState === 'hidden';
+    this.onlineChanged = event1 => {
+      this.isOnline = event1.type === 'online';
+      if (event1.type === 'offline' && this.unavailableStart === null) {
+        this.unavailableStart = Date.now();
+      }
+      this.maybeUpdate();
+    };
+    this.backgroundChanged = () => {
+      const isHidden1 = document.visibilityState === 'hidden';
+      this.isHidden = isHidden1;
+      if (isHidden1 && this.unavailableStart === null) {
+        this.unavailableStart = Date.now();
+      }
+      this.maybeUpdate();
+    };
+    window.addEventListener('online', this.onlineChanged, {
+      passive: true,
+      capture: true
+    });
+    window.addEventListener('offline', this.onlineChanged, {
+      passive: true,
+      capture: true
+    });
+    document.addEventListener('visibilitychange', this.backgroundChanged, {
+      passive: true,
+      capture: true
+    });
+  }
+  maybeUpdate(mode1) {
+    if (this.isOnline && !this.isHidden && (mode1 || this.args.autorefresh)) {
+      const deadline1 = typeof this.args.autorefreshThreshold === 'number' ? this.args.autorefreshThreshold : DEFAULT_DEADLINE;
+      const shouldAttempt1 = mode1 || this.unavailableStart && Date.now() - this.unavailableStart > deadline1;
+      this.unavailableStart = null;
+      if (shouldAttempt1) {
+        const request1 = Object.assign({}, this.reqState.request);
+        const val1 = mode1 ?? this.args.autorefreshBehavior ?? 'policy';
+        switch (val1) {
+          case 'reload':
+            request1.cacheOptions = Object.assign({}, request1.cacheOptions, {
+              reload: true
+            });
+            break;
+          case 'refresh':
+            request1.cacheOptions = Object.assign({}, request1.cacheOptions, {
+              backgroundReload: true
+            });
+            break;
+          case 'policy':
+            break;
+          default:
+            throw new Error(`Invalid ${mode1 ? 'update mode' : '@autorefreshBehavior'} for <Request />: ${isNeverString(val1)}`);
+        }
+        const wasStoreRequest1 = request1[EnableHydration] === true;
+        macroCondition(getGlobalConfig().WarpDrive.env.DEBUG) ? (test => {
+          if (!test) {
+            throw new Error(`Cannot supply a different store via context than was used to create the request`);
+          }
+        })(!request1.store || request1.store === this.store) : {};
+        this._latestRequest = wasStoreRequest1 ? this.store.request(request1) : this.store.requestManager.request(request1);
+        if (val1 !== 'refresh') {
+          this._localRequest = this._latestRequest;
+        }
+        return;
+      }
+    }
+    if (mode1) {
+      throw new Error(`Reload not available: the network is not online or the tab is hidden`);
+    }
+  }
+  retry = async () => {
+    this.maybeUpdate('reload');
+    await this._localRequest;
+  };
+  refresh = async () => {
+    this.isRefreshing = true;
+    this.maybeUpdate('refresh');
+    try {
+      await this._latestRequest;
+    } finally {
+      this.isRefreshing = false;
+    }
+  };
+  get errorFeatures() {
+    return {
+      isHidden: this.isHidden,
+      isOnline: this.isOnline,
+      retry: this.retry
+    };
+  }
+  static {
+    decorateMethodV2(this.prototype, "errorFeatures", [cached]);
+  }
+  get contentFeatures() {
+    const feat1 = {
+      isHidden: this.isHidden,
+      isOnline: this.isOnline,
+      reload: this.retry,
+      refresh: this.refresh,
+      isRefreshing: this.isRefreshing,
+      latestRequest: this._latestRequest
+    };
+    if (feat1.isRefreshing) {
+      feat1.abort = () => {
+        this._latestRequest?.abort();
+      };
+    }
+    return feat1;
+  }
+  static {
+    decorateMethodV2(this.prototype, "contentFeatures", [cached]);
+  }
+  willDestroy() {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    window.removeEventListener('online', this.onlineChanged, {
+      passive: true,
+      capture: true
+    });
+    window.removeEventListener('offline', this.onlineChanged, {
+      passive: true,
+      capture: true
+    });
+    document.removeEventListener('visibilitychange', this.backgroundChanged, {
+      passive: true,
+      capture: true
+    });
+  }
   get request() {
     const {
       request: request1,
       query: query1
     } = this.args;
-    assert(`Cannot use both @request and @query args with the <Request> component`, !request1 || !query1);
+    macroCondition(getGlobalConfig().WarpDrive.env.DEBUG) ? (test => {
+      if (!test) {
+        throw new Error(`Cannot use both @request and @query args with the <Request> component`);
+      }
+    })(!request1 || !query1) : {};
+    const {
+      _localRequest: _localRequest1,
+      _originalRequest: _originalRequest1,
+      _originalQuery: _originalQuery1
+    } = this;
+    const isOriginalRequest1 = request1 === _originalRequest1 && query1 === _originalQuery1;
+    if (_localRequest1 && isOriginalRequest1) {
+      return _localRequest1;
+    }
+    // update state checks for the next time
+    this._originalQuery = query1;
+    this._originalRequest = request1;
     if (request1) {
       return request1;
     }
-    assert(`You must provide either @request or an @query arg with the <Request> component`, query1);
+    macroCondition(getGlobalConfig().WarpDrive.env.DEBUG) ? (test => {
+      if (!test) {
+        throw new Error(`You must provide either @request or an @query arg with the <Request> component`);
+      }
+    })(query1) : {};
     return this.store.request(query1);
   }
   static {
@@ -602,23 +813,29 @@ class Request extends Component {
   }
   get store() {
     const store1 = this.args.store || this._store;
-    assert(moduleExists('ember-provide-consume-context') ? `No store was provided to the <Request> component. Either provide a store via the @store arg or via the context API provided by ember-provide-consume-context.` : `No store was provided to the <Request> component. Either provide a store via the @store arg or by registering a store service.`, store1);
+    macroCondition(getGlobalConfig().WarpDrive.env.DEBUG) ? (test => {
+      if (!test) {
+        throw new Error(moduleExists('ember-provide-consume-context') ? `No store was provided to the <Request> component. Either provide a store via the @store arg or via the context API provided by ember-provide-consume-context.` : `No store was provided to the <Request> component. Either provide a store via the @store arg or by registering a store service.`);
+      }
+    })(store1) : {};
     return store1;
   }
   get reqState() {
     return getRequestState(this.request);
   }
+  get result() {
+    return this.reqState.result;
+  }
   static {
-    setComponentTemplate(precompileTemplate("\n    {{#if this.reqState.isLoading}}\n      {{yield this.reqState.loadingState to=\"loading\"}}\n    {{else if (and this.reqState.isCancelled (has-block \"cancelled\"))}}\n      {{yield (notNull this.reqState.error) to=\"cancelled\"}}\n    {{else if (and this.reqState.isError (has-block \"error\"))}}\n      {{yield (notNull this.reqState.error) to=\"error\"}}\n    {{else if this.reqState.isSuccess}}\n      {{yield (notNull this.reqState.result) to=\"content\"}}\n    {{else}}\n      <Throw @error={{(notNull this.reqState.error)}} />\n    {{/if}}\n  ", {
+    setComponentTemplate(precompileTemplate("\n    {{#if this.reqState.isLoading}}\n      {{yield this.reqState.loadingState to=\"loading\"}}\n    {{else if (and this.reqState.isCancelled (has-block \"cancelled\"))}}\n      {{yield (notNull this.reqState.error) this.errorFeatures to=\"cancelled\"}}\n    {{else if (and this.reqState.isError (has-block \"error\"))}}\n      {{yield (notNull this.reqState.error) this.errorFeatures to=\"error\"}}\n    {{else if this.reqState.isSuccess}}\n      {{yield this.result this.contentFeatures to=\"content\"}}\n    {{else if (not this.reqState.isCancelled)}}\n      <Throw @error={{(notNull this.reqState.error)}} />\n    {{/if}}\n    {{yield this.reqState to=\"always\"}}\n  ", {
+      strictMode: true,
       scope: () => ({
         and,
         notNull,
+        not,
         Throw
-      }),
-      strictMode: true
+      })
     }), this);
   }
 }
-
-export { Await, Request, Throw, getPromiseState, getRequestState };
-//# sourceMappingURL=index.js.map
+export { Await, Request, Throw, getPromiseState, getRequestState };