@warp-drive-mirror/ember 5.8.0-beta.0 → 5.8.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,26 +1,47 @@
1
1
  <p align="center">
2
2
  <img
3
3
  class="project-logo"
4
- src="./logos/NCC-1701-a-blue.svg#gh-light-mode-only"
4
+ src="./logos/logo-yellow-slab.svg"
5
5
  alt="WarpDrive"
6
- width="120px"
7
- title="WarpDrive" />
8
- <img
9
- class="project-logo"
10
- src="./logos/NCC-1701-a.svg#gh-dark-mode-only"
11
- alt="WarpDrive"
12
- width="120px"
13
- title="WarpDrive" />
6
+ width="180px"
7
+ title="WarpDrive"
8
+ />
14
9
  </p>
15
10
 
16
- <h3 align="center">:electron: Data utilities for using <em style="color: lightgreen">Warp</em><strong style="color: magenta">Drive</strong> with 🐹 <em style="color: orange">Ember</em><em style="color: lightblue">.js</em></h3>
17
- <h4 align="center">And of course, <em style="color: orange">Ember</em><strong style="color: lightblue">Data</strong> too! </h4>
11
+ ![NPM Stable Version](https://img.shields.io/npm/v/ember-data/latest?label=version&style=flat&color=fdb155)
12
+ ![NPM Downloads](https://img.shields.io/npm/dm/ember-data.svg?style=flat&color=fdb155)
13
+ ![License](https://img.shields.io/github/license/warp-drive-data/warp-drive.svg?style=flat&color=fdb155)
14
+ [![EmberJS Discord Community Server](https://img.shields.io/badge/EmberJS-grey?logo=discord&logoColor=fdb155)](https://discord.gg/zT3asNS
15
+ )
16
+ [![WarpDrive Discord Server](https://img.shields.io/badge/WarpDrive-grey?logo=discord&logoColor=fdb155)](https://discord.gg/PHBbnWJx5S
17
+ )
18
+
19
+ <h3 align="center">Signals Integration and Component API for using <em>Warp</em><strong>Drive</strong> with 🐹 <em style="color: orange">Ember.js</em></h3>
20
+
21
+ ***Warp*Drive** makes it easy to build scalable, fast, feature
22
+ rich applications &mdash; letting you ship better experiences more quickly without re-architecting your app or API. ***Warp*Drive** is:
23
+
24
+ - 🌌 Seamless Reactivity in any Framework
25
+ - ⚡️ Committed to Best-In-Class Performance
26
+ - 💚 Typed
27
+ - ⚛️ Works with any API
28
+ - 🌲 Focused on being as tiny as possible
29
+ - 🚀 SSR Ready
30
+ - 🐹 Built with ♥️ by [Ember](https://emberjs.com)
31
+
32
+ <br>
33
+ <br>
34
+
35
+ *Get Started* → [Guides](https://warp-drive.io/guides/)
36
+
37
+ <br>
18
38
 
19
39
  ---
20
40
 
21
- ```sh
22
- pnpm install @warp-drive-mirror/ember
23
- ```
41
+ <br>
42
+
43
+ # @warp-drive-mirror/ember
44
+
24
45
 
25
46
  **Tagged Releases**
26
47
 
@@ -568,7 +589,7 @@ export { Await as default } from '@warp-drive-mirror/ember';
568
589
  img.project-logo {
569
590
  padding: 0 5em 1em 5em;
570
591
  width: 100px;
571
- border-bottom: 2px solid #0969da;
592
+ border-bottom: 2px solid #bbb;
572
593
  margin: 0 auto;
573
594
  display: block;
574
595
  }
@@ -584,7 +605,7 @@ export { Await as default } from '@warp-drive-mirror/ember';
584
605
  display: inline-block;
585
606
  padding: .2rem 0;
586
607
  color: #000;
587
- border-bottom: 3px solid #0969da;
608
+ border-bottom: 3px solid #bbb;
588
609
  }
589
610
 
590
611
  details > details {
@@ -1,7 +1,7 @@
1
1
  import type Owner from "@ember/owner";
2
2
  import Component from "@glimmer/component";
3
+ import { type PromiseState } from "@warp-drive-mirror/core/reactive";
3
4
  import type { Awaitable } from "@warp-drive-mirror/core/request";
4
- import { type PromiseState } from "@warp-drive-mirror/core/store/-private";
5
5
  export declare const and: (x: unknown, y: unknown) => boolean;
6
6
  interface ThrowSignature<E = Error | string | object> {
7
7
  Args: {
@@ -14,11 +14,11 @@ interface ThrowSignature<E = Error | string | object> {
14
14
  * That's all it does. So don't use it unless the application should
15
15
  * throw an error if it reaches this point in the template.
16
16
  *
17
- * ```hbs
17
+ * ```gts
18
18
  * <Throw @error={{anError}} />
19
19
  * ```
20
20
  *
21
- * @class <Throw />
21
+ * @category Components
22
22
  * @public
23
23
  */ export declare class Throw<T> extends Component<ThrowSignature<T>> {
24
24
  constructor(owner: Owner, args: ThrowSignature<T>["Args"]);
@@ -37,13 +37,13 @@ interface AwaitSignature<
37
37
  };
38
38
  }
39
39
  /**
40
- * The <Await /> component allow you to utilize reactive control flow
40
+ * The `<Await />` component allow you to utilize reactive control flow
41
41
  * for asynchronous states in your application.
42
42
  *
43
43
  * Await is ideal for handling "boundaries", outside which some state is
44
44
  * still allowed to be unresolved and within which it MUST be resolved.
45
45
  *
46
- * ```gjs
46
+ * ```gts
47
47
  * import { Await } from '@warp-drive-mirror/ember';
48
48
  *
49
49
  * <template>
@@ -63,12 +63,12 @@ interface AwaitSignature<
63
63
  * </template>
64
64
  * ```
65
65
  *
66
- * The <Await /> component requires that error states are properly handled.
66
+ * The `<Await />` component requires that error states are properly handled.
67
67
  *
68
68
  * If no error block is provided and the promise rejects, the error will
69
69
  * be thrown.
70
70
  *
71
- * @class <Await />
71
+ * @category Components
72
72
  * @public
73
73
  */ export declare class Await<
74
74
  T,
@@ -1,7 +1,8 @@
1
1
  import Component from "@glimmer/component";
2
2
  import type { ComponentLike } from "@glint/template";
3
3
  import type { RequestManager, Store } from "@warp-drive-mirror/core";
4
- import type { ContentFeatures, RecoveryFeatures, RequestArgs, RequestLoadingState, RequestState, RequestSubscription } from "@warp-drive-mirror/core/store/-private";
4
+ import type { RequestLoadingState, RequestState, RequestSubscription } from "@warp-drive-mirror/core/reactive";
5
+ import type { ContentFeatures, RecoveryFeatures, RequestArgs } from "@warp-drive-mirror/core/signals/-leaked";
5
6
  import type { StructuredErrorDocument } from "@warp-drive-mirror/core/types/request";
6
7
  export { ContentFeatures, RecoveryFeatures };
7
8
  export interface EmberRequestArgs<
@@ -118,7 +119,7 @@ interface RequestSignature<
118
119
  *
119
120
  * The loading state exposes the download `ReadableStream` instance for consumption
120
121
  *
121
- * ```gjs
122
+ * ```gts
122
123
  * import { Request } from '@warp-drive-mirror/ember';
123
124
  *
124
125
  * <template>
@@ -153,7 +154,7 @@ interface RequestSignature<
153
154
  *
154
155
  * Reload and refresh are available as methods on the `content` state.
155
156
  *
156
- * ```gjs
157
+ * ```gts
157
158
  * import { Request } from '@warp-drive-mirror/ember';
158
159
  *
159
160
  * <template>
@@ -177,7 +178,7 @@ interface RequestSignature<
177
178
  * We can nest our usage of `<Request />` to handle more advanced
178
179
  * reloading scenarios.
179
180
  *
180
- * ```gjs
181
+ * ```gts
181
182
  * import { Request } from '@warp-drive-mirror/ember';
182
183
  *
183
184
  * <template>
@@ -239,7 +240,7 @@ interface RequestSignature<
239
240
  * timer or on a websocket subscription.
240
241
  *
241
242
  *
242
- * ```gjs
243
+ * ```gts
243
244
  * import { Request } from '@warp-drive-mirror/ember';
244
245
  *
245
246
  * <template>
@@ -263,7 +264,7 @@ interface RequestSignature<
263
264
  * from multiple `<Request />` components, even if the request is not referentially the
264
265
  * same, only one actual request will be made.
265
266
  *
266
- *
267
+ * @category Components
267
268
  * @public
268
269
  */ export declare class Request<
269
270
  RT,
@@ -1,215 +1,8 @@
1
1
  /**
2
- * <h3 align="center">⚛️ Data utilities for using <em style="color: lightgreen">Warp</em><strong style="color: magenta">Drive</strong> with 🐹 <em style="color: orange">Ember</em><em style="color: lightblue">.js</em></h3>
3
- *
4
- * ## Installation
5
- *
6
- * ```sh
7
- * pnpm install @warp-drive-mirror/ember
8
- * ```
9
- *
10
- * ## About
11
- *
12
- * This library provides reactive utilities for working with promises
13
- * and requests, building over these primitives to provide functions
14
- * and components that enable you to build robust performant apps with
15
- * elegant control flow.
16
- *
17
- * ## Using .hbs
18
- *
19
- * The components and utils this library exports are intended for use with Glimmer
20
- * Flavored JavaScript (gjs). To use them in handlebars files, your app should re-
21
- * export them. For instance:
22
- *
23
- * *app/components/await.ts*
24
- * ```ts
25
- * export { Await as default } from '@warp-drive-mirror/ember';
26
- * ```
27
- *
28
- * ```hbs
29
- * <Await @promise={{this.getTheData}}></Await>
30
- * ```
31
- *
32
- * This allows renaming them to avoid conflicts just by using a different filename
33
- * if desired:
34
- *
35
- * *app/components/warp-drive-await.ts*
36
- * ```ts
37
- * export { Await as default } from '@warp-drive-mirror/ember';
38
- * ```
39
- *
40
- * ```hbs
41
- * <WarpDriveAwait @promise={{this.getTheData}}></WarpDriveAwait>
42
- * ```
43
- *
44
2
  * @module
3
+ * @mergeModuleWith <project>
45
4
  */
46
5
  export { Request, type ContentFeatures, type RecoveryFeatures } from "./-private/request.js";
47
6
  export { Await, Throw } from "./-private/await.js";
48
- /**
49
- * PromiseState provides a reactive wrapper for a promise which allows you write declarative
50
- * code around a promise's control flow. It is useful in both Template and JavaScript contexts,
51
- * allowing you to quickly derive behaviors and data from pending, error and success states.
52
- *
53
- * ```ts
54
- * interface PromiseState<T = unknown, E = unknown> {
55
- * isPending: boolean;
56
- * isSuccess: boolean;
57
- * isError: boolean;
58
- * result: T | null;
59
- * error: E | null;
60
- * }
61
- * ```
62
- *
63
- * To get the state of a promise, use `getPromiseState`.
64
- *
65
- * @class PromiseState
66
- * @public
67
- */
68
- /**
69
- * Returns a reactive state-machine for the provided promise or awaitable.
70
- *
71
- * Repeat calls to `getPromiseState` with the same promise will return the same state object
72
- * making is safe and easy to use in templates and JavaScript code to produce reactive
73
- * behaviors around promises.
74
- *
75
- * `getPromiseState` can be used in both JavaScript and Template contexts.
76
- *
77
- * ```ts
78
- * import { getPromiseState } from '@warp-drive-mirror/ember';
79
- *
80
- * const state = getPromiseState(promise);
81
- * ```
82
- *
83
- * For instance, we could write a getter on a component that updates whenever
84
- * the promise state advances or the promise changes, by combining the function
85
- * with the use of `@cached`
86
- *
87
- * ```ts
88
- * class Component {
89
- * @cached
90
- * get title() {
91
- * const state = getPromiseState(this.args.request);
92
- * if (state.isPending) {
93
- * return 'loading...';
94
- * }
95
- * if (state.isError) { return null; }
96
- * return state.result.title;
97
- * }
98
- * }
99
- * ```
100
- *
101
- * Or in a template as a helper:
102
- *
103
- * ```gjs
104
- * import { getPromiseState } from '@warp-drive-mirror/ember';
105
- *
106
- * <template>
107
- * {{#let (getPromiseState @request) as |state|}}
108
- * {{#if state.isPending}} <Spinner />
109
- * {{else if state.isError}} <ErrorForm @error={{state.error}} />
110
- * {{else}}
111
- * <h1>{{state.result.title}}</h1>
112
- * {{/if}}
113
- * {{/let}}
114
- * </template>
115
- * ```
116
- *
117
- * If looking to use in a template, consider also the `<Await />` component.
118
-
119
- * @public
120
- * @param {Promise<T> | Awaitable<T, E>} promise
121
- * @return {PromiseState<T, E>}
122
- */
123
- export { getPromiseState } from "@warp-drive-mirror/core/store/-private";
124
- /**
125
- * Lazily consumes the stream of a request, providing a number of
126
- * reactive properties that can be used to build UIs that respond
127
- * to the progress of a request.
128
- *
129
- * @class RequestLoadingState
130
- * @public
131
- */
132
- /**
133
- * RequestState extends the concept of PromiseState to provide a reactive
134
- * wrapper for a request `Future` which allows you write declarative code
135
- * around a Future's control flow.
136
- *
137
- * It is useful in both Template and JavaScript contexts, allowing you
138
- * to quickly derive behaviors and data from pending, error and success
139
- * states.
140
- *
141
- * The key difference between a Promise and a Future is that Futures provide
142
- * access to a stream of their content, the identity of the request (if any)
143
- * as well as the ability to attempt to abort the request.
144
- *
145
- * ```ts
146
- * interface Future<T> extends Promise<T>> {
147
- * getStream(): Promise<ReadableStream>;
148
- * abort(): void;
149
- * lid: RequestKey | null;
150
- * }
151
- * ```
152
- *
153
- * These additional APIs allow us to craft even richer state experiences.
154
- *
155
- * To get the state of a request, use `getRequestState`.
156
- *
157
- * @class RequestState
158
- * @public
159
- */
160
- /**
161
- *
162
- *
163
- * `getRequestState` can be used in both JavaScript and Template contexts.
164
- *
165
- * ```ts
166
- * import { getRequestState } from '@warp-drive-mirror/ember';
167
- *
168
- * const state = getRequestState(future);
169
- * ```
170
- *
171
- * For instance, we could write a getter on a component that updates whenever
172
- * the request state advances or the future changes, by combining the function
173
- * with the use of `@cached`
174
- *
175
- * ```ts
176
- * class Component {
177
- * @cached
178
- * get title() {
179
- * const state = getRequestState(this.args.request);
180
- * if (state.isPending) {
181
- * return 'loading...';
182
- * }
183
- * if (state.isError) { return null; }
184
- * return state.result.title;
185
- * }
186
- * }
187
- * ```
188
- *
189
- * Or in a template as a helper:
190
- *
191
- * ```gjs
192
- * import { getRequestState } from '@warp-drive-mirror/ember';
193
- *
194
- * <template>
195
- * {{#let (getRequestState @request) as |state|}}
196
- * {{#if state.isPending}}
197
- * <Spinner />
198
- * {{else if state.isError}}
199
- * <ErrorForm @error={{state.error}} />
200
- * {{else}}
201
- * <h1>{{state.result.title}}</h1>
202
- * {{/if}}
203
- * {{/let}}
204
- * </template>
205
- * ```
206
- *
207
- * If looking to use in a template, consider also the `<Request />` component
208
- * which offers a numbe of additional capabilities for requests *beyond* what
209
- * `RequestState` provides.
210
- *
211
- * @public
212
- * @param future
213
- * @return {RequestState}
214
- */
215
- export { getRequestState, createRequestSubscription, type RequestLoadingState } from "@warp-drive-mirror/core/store/-private";
7
+ export { getRequestState, createRequestSubscription, type RequestLoadingState, type RequestState } from "@warp-drive-mirror/core/reactive";
8
+ export { getPromiseState, type PromiseState } from "@warp-drive-mirror/core/reactive";
package/dist/index.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import { service } from '@ember/service';
2
2
  import Component from '@glimmer/component';
3
3
  import { macroCondition, getGlobalConfig, moduleExists, importSync } from '@embroider/macros';
4
- import { getPromiseState, DISPOSE, createRequestSubscription, memoized } from '@warp-drive-mirror/core/store/-private';
5
- export { createRequestSubscription, getPromiseState, getRequestState } from '@warp-drive-mirror/core/store/-private';
4
+ import { getPromiseState, createRequestSubscription } from '@warp-drive-mirror/core/reactive';
5
+ export { createRequestSubscription, getPromiseState, getRequestState } from '@warp-drive-mirror/core/reactive';
6
+ import { DISPOSE, memoized } from '@warp-drive-mirror/core/signals/-leaked';
6
7
  import { precompileTemplate } from '@ember/template-compilation';
7
8
  import { setComponentTemplate } from '@ember/component';
8
9
  import templateOnly from '@ember/component/template-only';
@@ -14,11 +15,11 @@ const and = (x, y) => Boolean(x && y);
14
15
  * That's all it does. So don't use it unless the application should
15
16
  * throw an error if it reaches this point in the template.
16
17
  *
17
- * ```hbs
18
+ * ```gts
18
19
  * <Throw @error={{anError}} />
19
20
  * ```
20
21
  *
21
- * @class <Throw />
22
+ * @category Components
22
23
  * @public
23
24
  */
24
25
  class Throw extends Component {
@@ -41,13 +42,13 @@ class Throw extends Component {
41
42
  }
42
43
  }
43
44
  /**
44
- * The <Await /> component allow you to utilize reactive control flow
45
+ * The `<Await />` component allow you to utilize reactive control flow
45
46
  * for asynchronous states in your application.
46
47
  *
47
48
  * Await is ideal for handling "boundaries", outside which some state is
48
49
  * still allowed to be unresolved and within which it MUST be resolved.
49
50
  *
50
- * ```gjs
51
+ * ```gts
51
52
  * import { Await } from '@warp-drive-mirror/ember';
52
53
  *
53
54
  * <template>
@@ -67,12 +68,12 @@ class Throw extends Component {
67
68
  * </template>
68
69
  * ```
69
70
  *
70
- * The <Await /> component requires that error states are properly handled.
71
+ * The `<Await />` component requires that error states are properly handled.
71
72
  *
72
73
  * If no error block is provided and the promise rejects, the error will
73
74
  * be thrown.
74
75
  *
75
- * @class <Await />
76
+ * @category Components
76
77
  * @public
77
78
  */
78
79
  class Await extends Component {
@@ -249,7 +250,7 @@ const DefaultChrome = setComponentTemplate(precompileTemplate("{{yield}}", {
249
250
  *
250
251
  * The loading state exposes the download `ReadableStream` instance for consumption
251
252
  *
252
- * ```gjs
253
+ * ```gts
253
254
  * import { Request } from '@warp-drive-mirror/ember';
254
255
  *
255
256
  * <template>
@@ -284,7 +285,7 @@ const DefaultChrome = setComponentTemplate(precompileTemplate("{{yield}}", {
284
285
  *
285
286
  * Reload and refresh are available as methods on the `content` state.
286
287
  *
287
- * ```gjs
288
+ * ```gts
288
289
  * import { Request } from '@warp-drive-mirror/ember';
289
290
  *
290
291
  * <template>
@@ -308,7 +309,7 @@ const DefaultChrome = setComponentTemplate(precompileTemplate("{{yield}}", {
308
309
  * We can nest our usage of `<Request />` to handle more advanced
309
310
  * reloading scenarios.
310
311
  *
311
- * ```gjs
312
+ * ```gts
312
313
  * import { Request } from '@warp-drive-mirror/ember';
313
314
  *
314
315
  * <template>
@@ -370,7 +371,7 @@ const DefaultChrome = setComponentTemplate(precompileTemplate("{{yield}}", {
370
371
  * timer or on a websocket subscription.
371
372
  *
372
373
  *
373
- * ```gjs
374
+ * ```gts
374
375
  * import { Request } from '@warp-drive-mirror/ember';
375
376
  *
376
377
  * <template>
@@ -394,7 +395,7 @@ const DefaultChrome = setComponentTemplate(precompileTemplate("{{yield}}", {
394
395
  * from multiple `<Request />` components, even if the request is not referentially the
395
396
  * same, only one actual request will be made.
396
397
  *
397
- *
398
+ * @category Components
398
399
  * @public
399
400
  */
400
401
  class Request extends Component {