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.
Files changed (122) hide show
  1. package/build-metadata.json +3 -3
  2. package/dist/dev/packages/@ember/-internals/glimmer/index.js +7 -7
  3. package/dist/dev/packages/@ember/-internals/routing/index.js +2 -2
  4. package/dist/dev/packages/@ember/-internals/runtime/index.js +1 -1
  5. package/dist/dev/packages/@ember/-internals/runtime/lib/ext/rsvp.js +1 -1
  6. package/dist/dev/packages/@ember/application/index.js +3 -3
  7. package/dist/dev/packages/@ember/application/instance.js +1 -1
  8. package/dist/dev/packages/@ember/component/helper.js +1 -1
  9. package/dist/dev/packages/@ember/component/index.js +3 -3
  10. package/dist/dev/packages/@ember/engine/index.js +3 -3
  11. package/dist/dev/packages/@ember/engine/instance.js +1 -1
  12. package/dist/dev/packages/@ember/helper/index.js +1132 -79
  13. package/dist/dev/packages/@ember/modifier/on.js +1 -1
  14. package/dist/dev/packages/@ember/object/compat.js +0 -32
  15. package/dist/dev/packages/@ember/renderer/index.js +1 -1
  16. package/dist/dev/packages/@ember/routing/-internals.js +2 -2
  17. package/dist/dev/packages/@ember/routing/index.js +6 -26
  18. package/dist/dev/packages/@ember/routing/lib/utils.js +2 -2
  19. package/dist/dev/packages/@ember/routing/route.js +2 -2
  20. package/dist/dev/packages/@ember/routing/router-service.js +9 -9
  21. package/dist/dev/packages/@ember/routing/router.js +2 -2
  22. package/dist/dev/packages/@ember/template-compiler/lib/compile-options.js +3 -3
  23. package/dist/dev/packages/@glimmer/runtime/index.js +7 -7
  24. package/dist/dev/packages/ember/version.js +1 -1
  25. package/dist/dev/packages/router_js/index.js +2 -2
  26. package/dist/dev/packages/rsvp/index.js +1 -2281
  27. package/dist/dev/packages/shared-chunks/{arguments-CDkbOqTS.js → arguments-BDcCvRM4.js} +5 -1
  28. package/dist/dev/packages/shared-chunks/{curly-Ei5G8jhk.js → curly-CxVJYzMX.js} +1 -1
  29. package/dist/dev/packages/shared-chunks/{element-BYLB-q7a.js → element-Cgoi4ldD.js} +0 -24
  30. package/dist/dev/packages/shared-chunks/get-BAZ7dSW_.js +40 -0
  31. package/dist/dev/packages/shared-chunks/hash-CKwikdMv.js +57 -0
  32. package/dist/dev/packages/shared-chunks/{helper-DIj85_-f.js → helper--ZiOCQkd.js} +2 -2
  33. package/dist/dev/packages/shared-chunks/{index-B3pPx1fL.js → index-CuorsWcn.js} +208 -84
  34. package/dist/dev/packages/shared-chunks/{invoke-d9sqa50M.js → invoke-DCF-tTDb.js} +1 -1
  35. package/dist/dev/packages/shared-chunks/{not-DYh6AY9Z.js → not-n3KAqx1U.js} +1 -1
  36. package/dist/dev/packages/shared-chunks/{on-DlF0Wy7P.js → on-CsI9Xgvl.js} +22 -11
  37. package/dist/dev/packages/shared-chunks/{render-87_sKZ_k.js → render-WPz2Nl45.js} +1 -1
  38. package/dist/{prod/packages/shared-chunks/rsvp.es-DR7yS7qg.js → dev/packages/shared-chunks/rsvp-aLN_pQtn.js} +152 -148
  39. package/dist/dev/packages/shared-chunks/{setup-registry-9DCmHTFF.js → setup-registry-5_gLCFs4.js} +3 -3
  40. package/dist/dev/packages/shared-chunks/{textarea-C4lYkaHj.js → textarea-B5TmhnQU.js} +2 -22
  41. package/dist/dev/packages/shared-chunks/{unique-id-DQOhouG1.js → unique-id-Csxuh1I7.js} +0 -4
  42. package/dist/dev/packages/shared-chunks/{unrecognized-url-error-BJHjL30Q.js → unrecognized-url-error-DyurFqvv.js} +1 -1
  43. package/dist/prod/packages/@ember/-internals/glimmer/index.js +7 -7
  44. package/dist/prod/packages/@ember/-internals/routing/index.js +2 -2
  45. package/dist/prod/packages/@ember/-internals/runtime/index.js +1 -1
  46. package/dist/prod/packages/@ember/-internals/runtime/lib/ext/rsvp.js +1 -1
  47. package/dist/prod/packages/@ember/application/index.js +3 -3
  48. package/dist/prod/packages/@ember/application/instance.js +1 -1
  49. package/dist/prod/packages/@ember/component/helper.js +1 -1
  50. package/dist/prod/packages/@ember/component/index.js +3 -3
  51. package/dist/prod/packages/@ember/engine/index.js +3 -3
  52. package/dist/prod/packages/@ember/engine/instance.js +1 -1
  53. package/dist/prod/packages/@ember/helper/index.js +1132 -79
  54. package/dist/prod/packages/@ember/modifier/on.js +1 -1
  55. package/dist/prod/packages/@ember/object/compat.js +0 -32
  56. package/dist/prod/packages/@ember/renderer/index.js +1 -1
  57. package/dist/prod/packages/@ember/routing/index.js +6 -26
  58. package/dist/prod/packages/@ember/routing/lib/utils.js +2 -2
  59. package/dist/prod/packages/@ember/routing/route.js +2 -2
  60. package/dist/prod/packages/@ember/routing/router-service.js +9 -9
  61. package/dist/prod/packages/@ember/routing/router.js +2 -2
  62. package/dist/prod/packages/@ember/template-compiler/lib/compile-options.js +3 -3
  63. package/dist/prod/packages/@glimmer/runtime/index.js +7 -7
  64. package/dist/prod/packages/ember/version.js +1 -1
  65. package/dist/prod/packages/router_js/index.js +2 -2
  66. package/dist/prod/packages/rsvp/index.js +1 -2281
  67. package/dist/prod/packages/shared-chunks/{arguments-BzAkZVBa.js → arguments-DxmU3uk4.js} +5 -1
  68. package/dist/prod/packages/shared-chunks/{curly-IY06zACp.js → curly-D2WsNyFi.js} +1 -1
  69. package/dist/prod/packages/shared-chunks/{element-DgHdPZ8u.js → element-BmBjPjkQ.js} +0 -24
  70. package/dist/prod/packages/shared-chunks/get-CMIqiKkx.js +40 -0
  71. package/dist/prod/packages/shared-chunks/hash-BPZcn79q.js +57 -0
  72. package/dist/prod/packages/shared-chunks/{helper-DkXiTBjc.js → helper-Df5MpdcT.js} +2 -2
  73. package/dist/prod/packages/shared-chunks/{index-CslMfEpb.js → index-DyYpsxuM.js} +208 -84
  74. package/dist/prod/packages/shared-chunks/{invoke-DhQ5QRp2.js → invoke-D7d52XJk.js} +1 -1
  75. package/dist/prod/packages/shared-chunks/{not-BOIVROuv.js → not-BGYHtDIW.js} +1 -1
  76. package/dist/prod/packages/shared-chunks/{on-BZHAxzdq.js → on-Ch0e_hqJ.js} +22 -11
  77. package/dist/prod/packages/shared-chunks/{render-Dx7lr1hR.js → render-CO2mZxto.js} +1 -1
  78. package/dist/{dev/packages/shared-chunks/rsvp.es-DR7yS7qg.js → prod/packages/shared-chunks/rsvp-aLN_pQtn.js} +152 -148
  79. package/dist/prod/packages/shared-chunks/{setup-registry-U-6VaNQG.js → setup-registry-jfUHS-vs.js} +3 -3
  80. package/dist/prod/packages/shared-chunks/{textarea-DOmZ1x0E.js → textarea-CQmTzSKe.js} +2 -22
  81. package/dist/prod/packages/shared-chunks/{unique-id-o2pS74go.js → unique-id-BJb1p8EG.js} +0 -4
  82. package/dist/prod/packages/shared-chunks/{unrecognized-url-error-EgNrnFu_.js → unrecognized-url-error-DgXBAzKl.js} +1 -1
  83. package/docs/data.json +1216 -1380
  84. package/package.json +3 -6
  85. package/types/stable/@ember/-internals/glimmer/index.d.ts +7 -380
  86. package/types/stable/@ember/-internals/glimmer/lib/component.d.ts +1 -1
  87. package/types/stable/@ember/-internals/glimmer/lib/helper.d.ts +2 -2
  88. package/types/stable/@ember/-internals/glimmer/lib/helpers/each-in.d.ts +171 -62
  89. package/types/stable/@ember/-internals/glimmer/lib/helpers/element.d.ts +0 -24
  90. package/types/stable/@ember/-internals/glimmer/lib/helpers/mut.d.ts +3 -2
  91. package/types/stable/@ember/-internals/glimmer/lib/helpers/readonly.d.ts +3 -1
  92. package/types/stable/@ember/-internals/glimmer/lib/helpers/unbound.d.ts +6 -2
  93. package/types/stable/@ember/-internals/glimmer/lib/helpers/unique-id.d.ts +0 -3
  94. package/types/stable/@ember/-internals/glimmer/lib/syntax/mount.d.ts +4 -2
  95. package/types/stable/@ember/-internals/glimmer/lib/syntax/outlet.d.ts +7 -2
  96. package/types/stable/@ember/helper/index.d.ts +1113 -73
  97. package/types/stable/@ember/object/compat.d.ts +0 -32
  98. package/types/stable/@ember/routing/router-service.d.ts +9 -9
  99. package/types/stable/@glimmer/runtime/lib/helpers/array.d.ts +0 -33
  100. package/types/stable/@glimmer/runtime/lib/helpers/concat.d.ts +0 -25
  101. package/types/stable/@glimmer/runtime/lib/helpers/fn.d.ts +0 -70
  102. package/types/stable/@glimmer/runtime/lib/helpers/get.d.ts +0 -69
  103. package/types/stable/@glimmer/runtime/lib/helpers/hash.d.ts +0 -36
  104. package/types/stable/index.d.ts +0 -14
  105. package/dist/dev/packages/shared-chunks/get-6I3sjd-I.js +0 -135
  106. package/dist/dev/packages/shared-chunks/hash-6NDs_5_f.js +0 -198
  107. package/dist/prod/packages/shared-chunks/get-Dago5uGl.js +0 -135
  108. package/dist/prod/packages/shared-chunks/hash-gEXIsSO4.js +0 -198
  109. package/types/stable/@ember/-internals/glimmer/lib/helpers/array.d.ts +0 -43
  110. package/types/stable/@ember/-internals/glimmer/lib/helpers/component.d.ts +0 -93
  111. package/types/stable/@ember/-internals/glimmer/lib/helpers/concat.d.ts +0 -32
  112. package/types/stable/@ember/-internals/glimmer/lib/helpers/fn.d.ts +0 -77
  113. package/types/stable/@ember/-internals/glimmer/lib/helpers/get.d.ts +0 -94
  114. package/types/stable/@ember/-internals/glimmer/lib/helpers/hash.d.ts +0 -46
  115. package/types/stable/@ember/-internals/glimmer/lib/helpers/helper.d.ts +0 -43
  116. package/types/stable/@ember/-internals/glimmer/lib/helpers/if-unless.d.ts +0 -228
  117. package/types/stable/@ember/-internals/glimmer/lib/helpers/log.d.ts +0 -19
  118. package/types/stable/@ember/-internals/glimmer/lib/helpers/modifier.d.ts +0 -42
  119. package/types/stable/@ember/-internals/glimmer/lib/helpers/page-title.d.ts +0 -24
  120. package/types/stable/@ember/-internals/glimmer/lib/modifiers/on.d.ts +0 -95
  121. package/types/stable/@ember/-internals/glimmer/lib/syntax/in-element.d.ts +0 -49
  122. 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
- }