ember-source 7.2.0-beta.1 → 7.2.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/build-metadata.json +3 -3
- package/dist/dev/packages/@ember/-internals/glimmer/index.js +7 -7
- package/dist/dev/packages/@ember/-internals/routing/index.js +2 -2
- package/dist/dev/packages/@ember/-internals/runtime/index.js +1 -1
- package/dist/dev/packages/@ember/-internals/runtime/lib/ext/rsvp.js +1 -1
- package/dist/dev/packages/@ember/application/index.js +3 -3
- package/dist/dev/packages/@ember/application/instance.js +1 -1
- package/dist/dev/packages/@ember/component/helper.js +1 -1
- package/dist/dev/packages/@ember/component/index.js +3 -3
- package/dist/dev/packages/@ember/engine/index.js +3 -3
- package/dist/dev/packages/@ember/engine/instance.js +1 -1
- package/dist/dev/packages/@ember/helper/index.js +1132 -79
- package/dist/dev/packages/@ember/modifier/on.js +1 -1
- package/dist/dev/packages/@ember/object/compat.js +0 -32
- package/dist/dev/packages/@ember/renderer/index.js +1 -1
- package/dist/dev/packages/@ember/routing/-internals.js +2 -2
- package/dist/dev/packages/@ember/routing/index.js +6 -26
- package/dist/dev/packages/@ember/routing/lib/utils.js +2 -2
- package/dist/dev/packages/@ember/routing/route.js +2 -2
- package/dist/dev/packages/@ember/routing/router-service.js +9 -9
- package/dist/dev/packages/@ember/routing/router.js +2 -2
- package/dist/dev/packages/@ember/template-compiler/lib/compile-options.js +3 -3
- package/dist/dev/packages/@glimmer/runtime/index.js +7 -7
- package/dist/dev/packages/ember/version.js +1 -1
- package/dist/dev/packages/router_js/index.js +2 -2
- package/dist/dev/packages/rsvp/index.js +1 -2281
- package/dist/dev/packages/shared-chunks/{arguments-CDkbOqTS.js → arguments-BDcCvRM4.js} +5 -1
- package/dist/dev/packages/shared-chunks/{curly-Ei5G8jhk.js → curly-CxVJYzMX.js} +1 -1
- package/dist/dev/packages/shared-chunks/{element-BYLB-q7a.js → element-Cgoi4ldD.js} +0 -24
- package/dist/dev/packages/shared-chunks/get-BAZ7dSW_.js +40 -0
- package/dist/dev/packages/shared-chunks/hash-CKwikdMv.js +57 -0
- package/dist/dev/packages/shared-chunks/{helper-DIj85_-f.js → helper--ZiOCQkd.js} +2 -2
- package/dist/dev/packages/shared-chunks/{index-B3pPx1fL.js → index-CuorsWcn.js} +208 -84
- package/dist/dev/packages/shared-chunks/{invoke-d9sqa50M.js → invoke-DCF-tTDb.js} +1 -1
- package/dist/dev/packages/shared-chunks/{not-DYh6AY9Z.js → not-n3KAqx1U.js} +1 -1
- package/dist/dev/packages/shared-chunks/{on-DlF0Wy7P.js → on-CsI9Xgvl.js} +22 -11
- package/dist/dev/packages/shared-chunks/{render-87_sKZ_k.js → render-WPz2Nl45.js} +1 -1
- package/dist/{prod/packages/shared-chunks/rsvp.es-DR7yS7qg.js → dev/packages/shared-chunks/rsvp-aLN_pQtn.js} +152 -148
- package/dist/dev/packages/shared-chunks/{setup-registry-9DCmHTFF.js → setup-registry-5_gLCFs4.js} +3 -3
- package/dist/dev/packages/shared-chunks/{textarea-C4lYkaHj.js → textarea-B5TmhnQU.js} +2 -22
- package/dist/dev/packages/shared-chunks/{unique-id-DQOhouG1.js → unique-id-Csxuh1I7.js} +0 -4
- package/dist/dev/packages/shared-chunks/{unrecognized-url-error-BJHjL30Q.js → unrecognized-url-error-DyurFqvv.js} +1 -1
- package/dist/prod/packages/@ember/-internals/glimmer/index.js +7 -7
- package/dist/prod/packages/@ember/-internals/routing/index.js +2 -2
- package/dist/prod/packages/@ember/-internals/runtime/index.js +1 -1
- package/dist/prod/packages/@ember/-internals/runtime/lib/ext/rsvp.js +1 -1
- package/dist/prod/packages/@ember/application/index.js +3 -3
- package/dist/prod/packages/@ember/application/instance.js +1 -1
- package/dist/prod/packages/@ember/component/helper.js +1 -1
- package/dist/prod/packages/@ember/component/index.js +3 -3
- package/dist/prod/packages/@ember/engine/index.js +3 -3
- package/dist/prod/packages/@ember/engine/instance.js +1 -1
- package/dist/prod/packages/@ember/helper/index.js +1132 -79
- package/dist/prod/packages/@ember/modifier/on.js +1 -1
- package/dist/prod/packages/@ember/object/compat.js +0 -32
- package/dist/prod/packages/@ember/renderer/index.js +1 -1
- package/dist/prod/packages/@ember/routing/index.js +6 -26
- package/dist/prod/packages/@ember/routing/lib/utils.js +2 -2
- package/dist/prod/packages/@ember/routing/route.js +2 -2
- package/dist/prod/packages/@ember/routing/router-service.js +9 -9
- package/dist/prod/packages/@ember/routing/router.js +2 -2
- package/dist/prod/packages/@ember/template-compiler/lib/compile-options.js +3 -3
- package/dist/prod/packages/@glimmer/runtime/index.js +7 -7
- package/dist/prod/packages/ember/version.js +1 -1
- package/dist/prod/packages/router_js/index.js +2 -2
- package/dist/prod/packages/rsvp/index.js +1 -2281
- package/dist/prod/packages/shared-chunks/{arguments-BzAkZVBa.js → arguments-DxmU3uk4.js} +5 -1
- package/dist/prod/packages/shared-chunks/{curly-IY06zACp.js → curly-D2WsNyFi.js} +1 -1
- package/dist/prod/packages/shared-chunks/{element-DgHdPZ8u.js → element-BmBjPjkQ.js} +0 -24
- package/dist/prod/packages/shared-chunks/get-CMIqiKkx.js +40 -0
- package/dist/prod/packages/shared-chunks/hash-BPZcn79q.js +57 -0
- package/dist/prod/packages/shared-chunks/{helper-DkXiTBjc.js → helper-Df5MpdcT.js} +2 -2
- package/dist/prod/packages/shared-chunks/{index-CslMfEpb.js → index-DyYpsxuM.js} +208 -84
- package/dist/prod/packages/shared-chunks/{invoke-DhQ5QRp2.js → invoke-D7d52XJk.js} +1 -1
- package/dist/prod/packages/shared-chunks/{not-BOIVROuv.js → not-BGYHtDIW.js} +1 -1
- package/dist/prod/packages/shared-chunks/{on-BZHAxzdq.js → on-Ch0e_hqJ.js} +22 -11
- package/dist/prod/packages/shared-chunks/{render-Dx7lr1hR.js → render-CO2mZxto.js} +1 -1
- package/dist/{dev/packages/shared-chunks/rsvp.es-DR7yS7qg.js → prod/packages/shared-chunks/rsvp-aLN_pQtn.js} +152 -148
- package/dist/prod/packages/shared-chunks/{setup-registry-U-6VaNQG.js → setup-registry-jfUHS-vs.js} +3 -3
- package/dist/prod/packages/shared-chunks/{textarea-DOmZ1x0E.js → textarea-CQmTzSKe.js} +2 -22
- package/dist/prod/packages/shared-chunks/{unique-id-o2pS74go.js → unique-id-BJb1p8EG.js} +0 -4
- package/dist/prod/packages/shared-chunks/{unrecognized-url-error-EgNrnFu_.js → unrecognized-url-error-DgXBAzKl.js} +1 -1
- package/docs/data.json +1216 -1380
- package/package.json +3 -6
- package/types/stable/@ember/-internals/glimmer/index.d.ts +7 -380
- package/types/stable/@ember/-internals/glimmer/lib/component.d.ts +1 -1
- package/types/stable/@ember/-internals/glimmer/lib/helper.d.ts +2 -2
- package/types/stable/@ember/-internals/glimmer/lib/helpers/each-in.d.ts +171 -62
- package/types/stable/@ember/-internals/glimmer/lib/helpers/element.d.ts +0 -24
- package/types/stable/@ember/-internals/glimmer/lib/helpers/mut.d.ts +3 -2
- package/types/stable/@ember/-internals/glimmer/lib/helpers/readonly.d.ts +3 -1
- package/types/stable/@ember/-internals/glimmer/lib/helpers/unbound.d.ts +6 -2
- package/types/stable/@ember/-internals/glimmer/lib/helpers/unique-id.d.ts +0 -3
- package/types/stable/@ember/-internals/glimmer/lib/syntax/mount.d.ts +4 -2
- package/types/stable/@ember/-internals/glimmer/lib/syntax/outlet.d.ts +7 -2
- package/types/stable/@ember/helper/index.d.ts +1113 -73
- package/types/stable/@ember/object/compat.d.ts +0 -32
- package/types/stable/@ember/routing/router-service.d.ts +9 -9
- package/types/stable/@glimmer/runtime/lib/helpers/array.d.ts +0 -33
- package/types/stable/@glimmer/runtime/lib/helpers/concat.d.ts +0 -25
- package/types/stable/@glimmer/runtime/lib/helpers/fn.d.ts +0 -70
- package/types/stable/@glimmer/runtime/lib/helpers/get.d.ts +0 -69
- package/types/stable/@glimmer/runtime/lib/helpers/hash.d.ts +0 -36
- package/types/stable/index.d.ts +0 -14
- package/dist/dev/packages/shared-chunks/get-6I3sjd-I.js +0 -135
- package/dist/dev/packages/shared-chunks/hash-6NDs_5_f.js +0 -198
- package/dist/prod/packages/shared-chunks/get-Dago5uGl.js +0 -135
- package/dist/prod/packages/shared-chunks/hash-gEXIsSO4.js +0 -198
- package/types/stable/@ember/-internals/glimmer/lib/helpers/array.d.ts +0 -43
- package/types/stable/@ember/-internals/glimmer/lib/helpers/component.d.ts +0 -93
- package/types/stable/@ember/-internals/glimmer/lib/helpers/concat.d.ts +0 -32
- package/types/stable/@ember/-internals/glimmer/lib/helpers/fn.d.ts +0 -77
- package/types/stable/@ember/-internals/glimmer/lib/helpers/get.d.ts +0 -94
- package/types/stable/@ember/-internals/glimmer/lib/helpers/hash.d.ts +0 -46
- package/types/stable/@ember/-internals/glimmer/lib/helpers/helper.d.ts +0 -43
- package/types/stable/@ember/-internals/glimmer/lib/helpers/if-unless.d.ts +0 -228
- package/types/stable/@ember/-internals/glimmer/lib/helpers/log.d.ts +0 -19
- package/types/stable/@ember/-internals/glimmer/lib/helpers/modifier.d.ts +0 -42
- package/types/stable/@ember/-internals/glimmer/lib/helpers/page-title.d.ts +0 -24
- package/types/stable/@ember/-internals/glimmer/lib/modifiers/on.d.ts +0 -95
- package/types/stable/@ember/-internals/glimmer/lib/syntax/in-element.d.ts +0 -49
- package/types/stable/@ember/-internals/glimmer/lib/syntax/let.d.ts +0 -43
|
@@ -1,198 +0,0 @@
|
|
|
1
|
-
import { c as createComputeRef, b as isInvokableRef, u as updateRef, v as valueForRef } from './reference-BqOLhKFy.js';
|
|
2
|
-
import { f as reifyPositional, g as buildUntouchableThis, h as check, e as reifyNamed } from './arguments-CDkbOqTS.js';
|
|
3
|
-
import { j as setInternalHelperManager } from './api-DuLOZMO_.js';
|
|
4
|
-
|
|
5
|
-
function internalHelper(helper) {
|
|
6
|
-
return setInternalHelperManager(helper, {});
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
Use the `{{array}}` helper to create an array to pass as an option to your
|
|
11
|
-
components.
|
|
12
|
-
|
|
13
|
-
```handlebars
|
|
14
|
-
<MyComponent @people={{array
|
|
15
|
-
'Tom Dale'
|
|
16
|
-
'Yehuda Katz'
|
|
17
|
-
this.myOtherPerson}}
|
|
18
|
-
/>
|
|
19
|
-
```
|
|
20
|
-
or
|
|
21
|
-
```handlebars
|
|
22
|
-
{{yield people=(array
|
|
23
|
-
'Tom Dale'
|
|
24
|
-
'Yehuda Katz'
|
|
25
|
-
this.myOtherPerson)
|
|
26
|
-
}}
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
Would result in an object such as:
|
|
30
|
-
|
|
31
|
-
```js
|
|
32
|
-
['Tom Dale', 'Yehuda Katz', this.get('myOtherPerson')]
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
Where the 3rd item in the array is bound to updates of the `myOtherPerson` property.
|
|
36
|
-
|
|
37
|
-
@method array
|
|
38
|
-
@param {Array} options
|
|
39
|
-
@return {Array} Array
|
|
40
|
-
@public
|
|
41
|
-
*/
|
|
42
|
-
|
|
43
|
-
const array = internalHelper(({
|
|
44
|
-
positional
|
|
45
|
-
}) => {
|
|
46
|
-
return createComputeRef(() => reifyPositional(positional), null, 'array');
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
const context = buildUntouchableThis('`fn` helper');
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
The `fn` helper allows you to ensure a function that you are passing off
|
|
53
|
-
to another component, helper, or modifier has access to arguments that are
|
|
54
|
-
available in the template.
|
|
55
|
-
|
|
56
|
-
For example, if you have an `each` helper looping over a number of items, you
|
|
57
|
-
may need to pass a function that expects to receive the item as an argument
|
|
58
|
-
to a component invoked within the loop. Here's how you could use the `fn`
|
|
59
|
-
helper to pass both the function and its arguments together:
|
|
60
|
-
|
|
61
|
-
```app/components/items-listing.gjs
|
|
62
|
-
import DisplayItem from './display-item';
|
|
63
|
-
|
|
64
|
-
<template>
|
|
65
|
-
{{#each @items as |item|}}
|
|
66
|
-
<DisplayItem @item=item @select={{fn this.handleSelected item}} />
|
|
67
|
-
{{/each}}
|
|
68
|
-
</template>
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
```app/components/items-list.gjs
|
|
72
|
-
import Component from '@glimmer/component';
|
|
73
|
-
import { action } from '@ember/object';
|
|
74
|
-
|
|
75
|
-
export default class ItemsList extends Component {
|
|
76
|
-
handleSelected = (item) => {
|
|
77
|
-
// ...snip...
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
In this case the `DisplayItem` component will receive a normal function
|
|
83
|
-
that it can invoke. When it invokes the function, the `handleSelected`
|
|
84
|
-
function will receive the `item` and any arguments passed, thanks to the
|
|
85
|
-
`fn` helper.
|
|
86
|
-
|
|
87
|
-
Let's take look at what that means in a couple circumstances:
|
|
88
|
-
|
|
89
|
-
- When invoked as `this.args.select()` the `handleSelected` function will
|
|
90
|
-
receive the `item` from the loop as its first and only argument.
|
|
91
|
-
- When invoked as `this.args.select('foo')` the `handleSelected` function
|
|
92
|
-
will receive the `item` from the loop as its first argument and the
|
|
93
|
-
string `'foo'` as its second argument.
|
|
94
|
-
|
|
95
|
-
In the example above, we used an arrow function to ensure that
|
|
96
|
-
`handleSelected` is properly bound to the `items-list`, but let's explore what
|
|
97
|
-
happens if we left out the arrow function:
|
|
98
|
-
|
|
99
|
-
```app/components/items-list.gjs
|
|
100
|
-
import Component from '@glimmer/component';
|
|
101
|
-
|
|
102
|
-
export default class ItemsList extends Component {
|
|
103
|
-
handleSelected(item) {
|
|
104
|
-
// ...snip...
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
In this example, when `handleSelected` is invoked inside the `display-item`
|
|
110
|
-
component, it will **not** have access to the component instance. In other
|
|
111
|
-
words, it will have no `this` context, so please make sure your functions
|
|
112
|
-
are bound (via an arrow function or other means) before passing into `fn`!
|
|
113
|
-
|
|
114
|
-
See also [partial application](https://en.wikipedia.org/wiki/Partial_application).
|
|
115
|
-
|
|
116
|
-
`fn` is built-in and does not require any additional imports.
|
|
117
|
-
|
|
118
|
-
@method fn
|
|
119
|
-
@public
|
|
120
|
-
*/
|
|
121
|
-
const fn = internalHelper(({
|
|
122
|
-
positional
|
|
123
|
-
}) => {
|
|
124
|
-
let callbackRef = check(positional[0]);
|
|
125
|
-
return createComputeRef(() => {
|
|
126
|
-
return (...invocationArgs) => {
|
|
127
|
-
let [fn, ...args] = reifyPositional(positional);
|
|
128
|
-
assertCallbackIsFn(callbackRef);
|
|
129
|
-
if (isInvokableRef(callbackRef)) {
|
|
130
|
-
let value = args.length > 0 ? args[0] : invocationArgs[0];
|
|
131
|
-
return void updateRef(callbackRef, value);
|
|
132
|
-
} else {
|
|
133
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-return -- @fixme
|
|
134
|
-
return fn.call(context, ...args, ...invocationArgs);
|
|
135
|
-
}
|
|
136
|
-
};
|
|
137
|
-
}, null, 'fn');
|
|
138
|
-
});
|
|
139
|
-
function assertCallbackIsFn(callbackRef) {
|
|
140
|
-
if (!(callbackRef && (isInvokableRef(callbackRef) || typeof valueForRef(callbackRef) === 'function'))) {
|
|
141
|
-
throw new Error(`You must pass a function as the \`fn\` helper's first argument, you passed ${callbackRef ? valueForRef(callbackRef) : callbackRef}. While rendering:\n\n${callbackRef?.debugLabel}`);
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
/**
|
|
146
|
-
Use the `{{hash}}` helper to create a hash to pass as an option to your
|
|
147
|
-
components. This is especially useful for contextual components where you can
|
|
148
|
-
just yield a hash:
|
|
149
|
-
|
|
150
|
-
```handlebars
|
|
151
|
-
{{yield (hash
|
|
152
|
-
name='Sarah'
|
|
153
|
-
title=office
|
|
154
|
-
)}}
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
Would result in an object such as:
|
|
158
|
-
|
|
159
|
-
```js
|
|
160
|
-
{ name: 'Sarah', title: this.get('office') }
|
|
161
|
-
```
|
|
162
|
-
|
|
163
|
-
Where the `title` is bound to updates of the `office` property.
|
|
164
|
-
|
|
165
|
-
Note that the hash is an empty object with no prototype chain, therefore
|
|
166
|
-
common methods like `toString` are not available in the resulting hash.
|
|
167
|
-
If you need to use such a method, you can use the `call` or `apply`
|
|
168
|
-
approach:
|
|
169
|
-
|
|
170
|
-
```js
|
|
171
|
-
function toString(obj) {
|
|
172
|
-
return Object.prototype.toString.apply(obj);
|
|
173
|
-
}
|
|
174
|
-
```
|
|
175
|
-
|
|
176
|
-
@method hash
|
|
177
|
-
@param {Object} options
|
|
178
|
-
@return {Object} Hash
|
|
179
|
-
@public
|
|
180
|
-
*/
|
|
181
|
-
const hash = internalHelper(({
|
|
182
|
-
named
|
|
183
|
-
}) => {
|
|
184
|
-
let ref = createComputeRef(() => {
|
|
185
|
-
return reifyNamed(named);
|
|
186
|
-
}, null, 'hash');
|
|
187
|
-
|
|
188
|
-
// Setup the children so that templates can bypass getting the value of
|
|
189
|
-
// the reference and treat children lazily
|
|
190
|
-
let children = new Map();
|
|
191
|
-
for (let name in named) {
|
|
192
|
-
children.set(name, named[name]);
|
|
193
|
-
}
|
|
194
|
-
ref.children = children;
|
|
195
|
-
return ref;
|
|
196
|
-
});
|
|
197
|
-
|
|
198
|
-
export { array as a, fn as f, hash as h, internalHelper as i };
|
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
import { c as createComputeRef, U as UNDEFINED_REFERENCE, v as valueForRef } from './reference-CG0yPgLy.js';
|
|
2
|
-
import { f as reifyPositional } from './arguments-BzAkZVBa.js';
|
|
3
|
-
import { i as internalHelper } from './hash-gEXIsSO4.js';
|
|
4
|
-
import { setPath, getPath } from '../@glimmer/global-context/index.js';
|
|
5
|
-
import { i as isDict } from './collections-GpG8lT2g.js';
|
|
6
|
-
|
|
7
|
-
const isEmpty = value => {
|
|
8
|
-
return value === null || value === undefined || typeof value.toString !== 'function';
|
|
9
|
-
};
|
|
10
|
-
const normalizeTextValue = value => {
|
|
11
|
-
if (isEmpty(value)) {
|
|
12
|
-
return '';
|
|
13
|
-
}
|
|
14
|
-
return String(value);
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
Concatenates the given arguments into a string.
|
|
19
|
-
|
|
20
|
-
Example:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
```gjs
|
|
24
|
-
import { concat } from '@ember/helper';
|
|
25
|
-
|
|
26
|
-
<template>
|
|
27
|
-
{{yield (concat firstName " " lastName)}}
|
|
28
|
-
|
|
29
|
-
{{! would yield name="<first name value> <last name value>" to the component}}
|
|
30
|
-
</template>
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
or for angle bracket invocation, you actually don't need concat at all.
|
|
34
|
-
|
|
35
|
-
```handlebars
|
|
36
|
-
<SomeComponent @name="{{firstName}} {{lastName}}" />
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
@public
|
|
40
|
-
@method concat
|
|
41
|
-
*/
|
|
42
|
-
const concat = internalHelper(({
|
|
43
|
-
positional
|
|
44
|
-
}) => {
|
|
45
|
-
return createComputeRef(() => reifyPositional(positional).map(normalizeTextValue).join(''), null, 'concat');
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
Dynamically look up a property on an object. The second argument to `{{get}}`
|
|
50
|
-
should have a string value, although it can be bound.
|
|
51
|
-
|
|
52
|
-
For example, these two usages are equivalent:
|
|
53
|
-
|
|
54
|
-
```app/components/developer-detail.gjs
|
|
55
|
-
import Component from '@glimmer/component';
|
|
56
|
-
import { tracked } from '@glimmer/tracking';
|
|
57
|
-
import { get } from '@ember/object';
|
|
58
|
-
|
|
59
|
-
export default class extends Component {
|
|
60
|
-
@tracked developer = {
|
|
61
|
-
name: "Sandi Metz",
|
|
62
|
-
language: "Ruby"
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
<template>
|
|
66
|
-
{{this.developer.name}}
|
|
67
|
-
{{get this.developer "name"}}
|
|
68
|
-
</template>
|
|
69
|
-
}
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
If there were several facts about a person, the `{{get}}` helper can dynamically
|
|
73
|
-
pick one:
|
|
74
|
-
|
|
75
|
-
```app/templates/application.gjs
|
|
76
|
-
<template>
|
|
77
|
-
<DeveloperDetail @factName="language" />
|
|
78
|
-
</template>
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
```handlebars
|
|
82
|
-
{{get this.developer @factName}}
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
For a more complex example, this template would allow the user to switch
|
|
86
|
-
between showing the user's height and weight with a click:
|
|
87
|
-
|
|
88
|
-
```app/components/developer-detail.gjs
|
|
89
|
-
import Component from '@glimmer/component';
|
|
90
|
-
import { tracked } from '@glimmer/tracking';
|
|
91
|
-
import { get } from '@ember/object';
|
|
92
|
-
|
|
93
|
-
export default class extends Component {
|
|
94
|
-
@tracked developer = {
|
|
95
|
-
name: "Sandi Metz",
|
|
96
|
-
language: "Ruby"
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
@tracked currentFact = 'name'
|
|
100
|
-
|
|
101
|
-
showFact = (fact) => {
|
|
102
|
-
this.currentFact = fact;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
<template>
|
|
106
|
-
{{get this.developer this.currentFact}}
|
|
107
|
-
|
|
108
|
-
<button {{on 'click' (fn this.showFact "name")}}>Show name</button>
|
|
109
|
-
<button {{on 'click' (fn this.showFact "language")}}>Show language</button>
|
|
110
|
-
</template>
|
|
111
|
-
}
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
@public
|
|
115
|
-
@method get
|
|
116
|
-
*/
|
|
117
|
-
const get = internalHelper(({
|
|
118
|
-
positional
|
|
119
|
-
}) => {
|
|
120
|
-
let sourceRef = positional[0] ?? UNDEFINED_REFERENCE;
|
|
121
|
-
let pathRef = positional[1] ?? UNDEFINED_REFERENCE;
|
|
122
|
-
return createComputeRef(() => {
|
|
123
|
-
let source = valueForRef(sourceRef);
|
|
124
|
-
if (isDict(source)) {
|
|
125
|
-
return getPath(source, String(valueForRef(pathRef)));
|
|
126
|
-
}
|
|
127
|
-
}, value => {
|
|
128
|
-
let source = valueForRef(sourceRef);
|
|
129
|
-
if (isDict(source)) {
|
|
130
|
-
return setPath(source, String(valueForRef(pathRef)), value);
|
|
131
|
-
}
|
|
132
|
-
}, 'get');
|
|
133
|
-
});
|
|
134
|
-
|
|
135
|
-
export { concat as c, get as g };
|
|
@@ -1,198 +0,0 @@
|
|
|
1
|
-
import { c as createComputeRef, d as isInvokableRef, u as updateRef } from './reference-CG0yPgLy.js';
|
|
2
|
-
import { f as reifyPositional, g as check, e as reifyNamed } from './arguments-BzAkZVBa.js';
|
|
3
|
-
import { j as setInternalHelperManager } from './api-DlJKfm_f.js';
|
|
4
|
-
|
|
5
|
-
/* eslint-disable @typescript-eslint/no-empty-object-type */
|
|
6
|
-
function buildUntouchableThis(source) {
|
|
7
|
-
let context = null;
|
|
8
|
-
return context;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
function internalHelper(helper) {
|
|
12
|
-
return setInternalHelperManager(helper, {});
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
Use the `{{array}}` helper to create an array to pass as an option to your
|
|
17
|
-
components.
|
|
18
|
-
|
|
19
|
-
```handlebars
|
|
20
|
-
<MyComponent @people={{array
|
|
21
|
-
'Tom Dale'
|
|
22
|
-
'Yehuda Katz'
|
|
23
|
-
this.myOtherPerson}}
|
|
24
|
-
/>
|
|
25
|
-
```
|
|
26
|
-
or
|
|
27
|
-
```handlebars
|
|
28
|
-
{{yield people=(array
|
|
29
|
-
'Tom Dale'
|
|
30
|
-
'Yehuda Katz'
|
|
31
|
-
this.myOtherPerson)
|
|
32
|
-
}}
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
Would result in an object such as:
|
|
36
|
-
|
|
37
|
-
```js
|
|
38
|
-
['Tom Dale', 'Yehuda Katz', this.get('myOtherPerson')]
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
Where the 3rd item in the array is bound to updates of the `myOtherPerson` property.
|
|
42
|
-
|
|
43
|
-
@method array
|
|
44
|
-
@param {Array} options
|
|
45
|
-
@return {Array} Array
|
|
46
|
-
@public
|
|
47
|
-
*/
|
|
48
|
-
|
|
49
|
-
const array = internalHelper(({
|
|
50
|
-
positional
|
|
51
|
-
}) => {
|
|
52
|
-
return createComputeRef(() => reifyPositional(positional), null, 'array');
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
const context = buildUntouchableThis();
|
|
56
|
-
|
|
57
|
-
/**
|
|
58
|
-
The `fn` helper allows you to ensure a function that you are passing off
|
|
59
|
-
to another component, helper, or modifier has access to arguments that are
|
|
60
|
-
available in the template.
|
|
61
|
-
|
|
62
|
-
For example, if you have an `each` helper looping over a number of items, you
|
|
63
|
-
may need to pass a function that expects to receive the item as an argument
|
|
64
|
-
to a component invoked within the loop. Here's how you could use the `fn`
|
|
65
|
-
helper to pass both the function and its arguments together:
|
|
66
|
-
|
|
67
|
-
```app/components/items-listing.gjs
|
|
68
|
-
import DisplayItem from './display-item';
|
|
69
|
-
|
|
70
|
-
<template>
|
|
71
|
-
{{#each @items as |item|}}
|
|
72
|
-
<DisplayItem @item=item @select={{fn this.handleSelected item}} />
|
|
73
|
-
{{/each}}
|
|
74
|
-
</template>
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
```app/components/items-list.gjs
|
|
78
|
-
import Component from '@glimmer/component';
|
|
79
|
-
import { action } from '@ember/object';
|
|
80
|
-
|
|
81
|
-
export default class ItemsList extends Component {
|
|
82
|
-
handleSelected = (item) => {
|
|
83
|
-
// ...snip...
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
In this case the `DisplayItem` component will receive a normal function
|
|
89
|
-
that it can invoke. When it invokes the function, the `handleSelected`
|
|
90
|
-
function will receive the `item` and any arguments passed, thanks to the
|
|
91
|
-
`fn` helper.
|
|
92
|
-
|
|
93
|
-
Let's take look at what that means in a couple circumstances:
|
|
94
|
-
|
|
95
|
-
- When invoked as `this.args.select()` the `handleSelected` function will
|
|
96
|
-
receive the `item` from the loop as its first and only argument.
|
|
97
|
-
- When invoked as `this.args.select('foo')` the `handleSelected` function
|
|
98
|
-
will receive the `item` from the loop as its first argument and the
|
|
99
|
-
string `'foo'` as its second argument.
|
|
100
|
-
|
|
101
|
-
In the example above, we used an arrow function to ensure that
|
|
102
|
-
`handleSelected` is properly bound to the `items-list`, but let's explore what
|
|
103
|
-
happens if we left out the arrow function:
|
|
104
|
-
|
|
105
|
-
```app/components/items-list.gjs
|
|
106
|
-
import Component from '@glimmer/component';
|
|
107
|
-
|
|
108
|
-
export default class ItemsList extends Component {
|
|
109
|
-
handleSelected(item) {
|
|
110
|
-
// ...snip...
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
In this example, when `handleSelected` is invoked inside the `display-item`
|
|
116
|
-
component, it will **not** have access to the component instance. In other
|
|
117
|
-
words, it will have no `this` context, so please make sure your functions
|
|
118
|
-
are bound (via an arrow function or other means) before passing into `fn`!
|
|
119
|
-
|
|
120
|
-
See also [partial application](https://en.wikipedia.org/wiki/Partial_application).
|
|
121
|
-
|
|
122
|
-
`fn` is built-in and does not require any additional imports.
|
|
123
|
-
|
|
124
|
-
@method fn
|
|
125
|
-
@public
|
|
126
|
-
*/
|
|
127
|
-
const fn = internalHelper(({
|
|
128
|
-
positional
|
|
129
|
-
}) => {
|
|
130
|
-
let callbackRef = check(positional[0]);
|
|
131
|
-
return createComputeRef(() => {
|
|
132
|
-
return (...invocationArgs) => {
|
|
133
|
-
let [fn, ...args] = reifyPositional(positional);
|
|
134
|
-
if (isInvokableRef(callbackRef)) {
|
|
135
|
-
let value = args.length > 0 ? args[0] : invocationArgs[0];
|
|
136
|
-
return void updateRef(callbackRef, value);
|
|
137
|
-
} else {
|
|
138
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-return -- @fixme
|
|
139
|
-
return fn.call(context, ...args, ...invocationArgs);
|
|
140
|
-
}
|
|
141
|
-
};
|
|
142
|
-
}, null, 'fn');
|
|
143
|
-
});
|
|
144
|
-
|
|
145
|
-
/**
|
|
146
|
-
Use the `{{hash}}` helper to create a hash to pass as an option to your
|
|
147
|
-
components. This is especially useful for contextual components where you can
|
|
148
|
-
just yield a hash:
|
|
149
|
-
|
|
150
|
-
```handlebars
|
|
151
|
-
{{yield (hash
|
|
152
|
-
name='Sarah'
|
|
153
|
-
title=office
|
|
154
|
-
)}}
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
Would result in an object such as:
|
|
158
|
-
|
|
159
|
-
```js
|
|
160
|
-
{ name: 'Sarah', title: this.get('office') }
|
|
161
|
-
```
|
|
162
|
-
|
|
163
|
-
Where the `title` is bound to updates of the `office` property.
|
|
164
|
-
|
|
165
|
-
Note that the hash is an empty object with no prototype chain, therefore
|
|
166
|
-
common methods like `toString` are not available in the resulting hash.
|
|
167
|
-
If you need to use such a method, you can use the `call` or `apply`
|
|
168
|
-
approach:
|
|
169
|
-
|
|
170
|
-
```js
|
|
171
|
-
function toString(obj) {
|
|
172
|
-
return Object.prototype.toString.apply(obj);
|
|
173
|
-
}
|
|
174
|
-
```
|
|
175
|
-
|
|
176
|
-
@method hash
|
|
177
|
-
@param {Object} options
|
|
178
|
-
@return {Object} Hash
|
|
179
|
-
@public
|
|
180
|
-
*/
|
|
181
|
-
const hash = internalHelper(({
|
|
182
|
-
named
|
|
183
|
-
}) => {
|
|
184
|
-
let ref = createComputeRef(() => {
|
|
185
|
-
return reifyNamed(named);
|
|
186
|
-
}, null, 'hash');
|
|
187
|
-
|
|
188
|
-
// Setup the children so that templates can bypass getting the value of
|
|
189
|
-
// the reference and treat children lazily
|
|
190
|
-
let children = new Map();
|
|
191
|
-
for (let name in named) {
|
|
192
|
-
children.set(name, named[name]);
|
|
193
|
-
}
|
|
194
|
-
ref.children = children;
|
|
195
|
-
return ref;
|
|
196
|
-
});
|
|
197
|
-
|
|
198
|
-
export { array as a, fn as f, hash as h, internalHelper as i };
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
declare module '@ember/-internals/glimmer/lib/helpers/array' {
|
|
2
|
-
/**
|
|
3
|
-
@module ember
|
|
4
|
-
*/
|
|
5
|
-
/**
|
|
6
|
-
Use the `{{array}}` helper to create an array to pass as an option to your
|
|
7
|
-
components.
|
|
8
|
-
|
|
9
|
-
```handlebars
|
|
10
|
-
<MyComponent @people={{array
|
|
11
|
-
'Tom Dale'
|
|
12
|
-
'Yehuda Katz'
|
|
13
|
-
this.myOtherPerson}}
|
|
14
|
-
/>
|
|
15
|
-
```
|
|
16
|
-
or
|
|
17
|
-
```handlebars
|
|
18
|
-
{{yield people=(array
|
|
19
|
-
'Tom Dale'
|
|
20
|
-
'Yehuda Katz'
|
|
21
|
-
this.myOtherPerson)
|
|
22
|
-
}}
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
Would result in an object such as:
|
|
26
|
-
|
|
27
|
-
```js
|
|
28
|
-
['Tom Dale', 'Yehuda Katz', this.get('myOtherPerson')]
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
Where the 3rd item in the array is bound to updates of the `myOtherPerson` property.
|
|
32
|
-
|
|
33
|
-
The `array` helper is built-in keyword and does not need to be imported as of v7.1.0.
|
|
34
|
-
|
|
35
|
-
@method array
|
|
36
|
-
@for @ember/helper
|
|
37
|
-
@param {Array} options
|
|
38
|
-
@return {Array} Array
|
|
39
|
-
@since 3.8.0
|
|
40
|
-
@public
|
|
41
|
-
*/
|
|
42
|
-
export {};
|
|
43
|
-
}
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
declare module '@ember/-internals/glimmer/lib/helpers/component' {
|
|
2
|
-
/**
|
|
3
|
-
@module ember
|
|
4
|
-
*/
|
|
5
|
-
/**
|
|
6
|
-
The `component` helper is used to package a Component with initial arguments.
|
|
7
|
-
The included arguments can then be merged during the final invocation.
|
|
8
|
-
|
|
9
|
-
See [Component](/ember/release/modules/@glimmer%2Fcomponent/) for
|
|
10
|
-
additional information on how a `Component` functions.
|
|
11
|
-
|
|
12
|
-
This is similar to the concept of Partial Application.
|
|
13
|
-
|
|
14
|
-
For example, given a `FullName` component:
|
|
15
|
-
|
|
16
|
-
```app/components/full-name.gjs
|
|
17
|
-
import MyInputComponent from './my-input-component';
|
|
18
|
-
|
|
19
|
-
<template>
|
|
20
|
-
{{yield (component MyInputComponent value=@model.name placeholder="Username")}}
|
|
21
|
-
</template>
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
The yielded component can be invoked by the calling component.
|
|
25
|
-
See the following snippet:
|
|
26
|
-
|
|
27
|
-
```app/components/person-form.gjs
|
|
28
|
-
import FullName from './full-name';
|
|
29
|
-
|
|
30
|
-
<template>
|
|
31
|
-
<FullName @model={{@model}} as |Field|>
|
|
32
|
-
<Field />
|
|
33
|
-
</FullName>
|
|
34
|
-
</template>
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
Which will output an input whose value is already bound to `@model.name` and `placeholder`
|
|
38
|
-
is "Username".
|
|
39
|
-
|
|
40
|
-
Any arguments passed at the invocation site of the component will override those applied via
|
|
41
|
-
the `component` helper. For example, if the invocation site of the component is:
|
|
42
|
-
|
|
43
|
-
```app/components/person-form.gjs
|
|
44
|
-
import FullName from './full-name';
|
|
45
|
-
|
|
46
|
-
<template>
|
|
47
|
-
<FullName @model={{@model}} as |Field|>
|
|
48
|
-
<Field @placeholder="Your name" />
|
|
49
|
-
</FullName>
|
|
50
|
-
</template>
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
The output will be an input whose value is bound to `@model.name` and `placeholder`
|
|
54
|
-
is "Your name".
|
|
55
|
-
|
|
56
|
-
The `component` helper is built-in and does not need to be imported.
|
|
57
|
-
|
|
58
|
-
Prior to Strict Mode aka "Template Tag" or gjs, the component helper was also used to invoke
|
|
59
|
-
components dynamically. This is no longer necessary, and they can be directly invoked, as above.
|
|
60
|
-
|
|
61
|
-
### Dynamic Component Invocation
|
|
62
|
-
|
|
63
|
-
```app/templates/application.gjs
|
|
64
|
-
import Component from '@glimmer/component';
|
|
65
|
-
import { tracked } from '@glimmer/tracking';
|
|
66
|
-
import { component } from '@ember/helper';
|
|
67
|
-
import LiveUpdatingChart from '../components/live-updating-chart';
|
|
68
|
-
import MarketCloseSummary from '../components/market-close-summary';
|
|
69
|
-
|
|
70
|
-
export default class Application extends Component {
|
|
71
|
-
@tracked isMarketOpen = false;
|
|
72
|
-
|
|
73
|
-
get infographicComponent() {
|
|
74
|
-
return this.isMarketOpen ? LiveUpdatingChart : MarketCloseSummary;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
<template>
|
|
78
|
-
{{!-- The component can be invoked directly --}}
|
|
79
|
-
<this.infographicComponent />
|
|
80
|
-
|
|
81
|
-
{{!-- The component helper here is no longer necessary --}}
|
|
82
|
-
{{component this.infographicComponentName}}
|
|
83
|
-
</template>
|
|
84
|
-
}
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
@method component
|
|
88
|
-
@since 1.11.0
|
|
89
|
-
@for Ember.Templates.helpers
|
|
90
|
-
@public
|
|
91
|
-
*/
|
|
92
|
-
export {};
|
|
93
|
-
}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
declare module '@ember/-internals/glimmer/lib/helpers/concat' {
|
|
2
|
-
/**
|
|
3
|
-
@module ember
|
|
4
|
-
*/
|
|
5
|
-
/**
|
|
6
|
-
Concatenates the given arguments into a string.
|
|
7
|
-
|
|
8
|
-
Example:
|
|
9
|
-
|
|
10
|
-
```gjs
|
|
11
|
-
import { concat } from '@ember/helper';
|
|
12
|
-
|
|
13
|
-
<template>
|
|
14
|
-
{{yield (concat firstName " " lastName)}}
|
|
15
|
-
|
|
16
|
-
{{! would yield name="<first name value> <last name value>" to the component}}
|
|
17
|
-
</template>
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
For invocation of components, you don't need concat at all.
|
|
21
|
-
|
|
22
|
-
```handlebars
|
|
23
|
-
<SomeComponent @name="{{firstName}} {{lastName}}" />
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
@public
|
|
27
|
-
@method concat
|
|
28
|
-
@for @ember/helper
|
|
29
|
-
@since 1.13.0
|
|
30
|
-
*/
|
|
31
|
-
export {};
|
|
32
|
-
}
|