@glimmer/runtime
Version:
Minimal runtime needed to render Glimmer templates
104 lines (81 loc) • 8.36 kB
JavaScript
import { getPath, setPath } from '@glimmer/global-context';
import { isDict } from '@glimmer/util';
import { createComputeRef, UNDEFINED_REFERENCE, valueForRef } from '@glimmer/reference';
import { internalHelper } from './internal-helper';
/**
Dynamically look up a property on an object. The second argument to `{{get}}`
should have a string value, although it can be bound.
For example, these two usages are equivalent:
```app/components/developer-detail.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class extends Component {
@tracked developer = {
name: "Sandi Metz",
language: "Ruby"
}
}
```
```handlebars
{{this.developer.name}}
{{get this.developer "name"}}
```
If there were several facts about a person, the `{{get}}` helper can dynamically
pick one:
```app/templates/application.hbs
<DeveloperDetail @factName="language" />
```
```handlebars
{{get this.developer @factName}}
```
For a more complex example, this template would allow the user to switch
between showing the user's height and weight with a click:
```app/components/developer-detail.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class extends Component {
@tracked developer = {
name: "Sandi Metz",
language: "Ruby"
}
@tracked currentFact = 'name'
showFact = (fact) => {
this.currentFact = fact;
}
}
```
```app/components/developer-detail.js
{{get this.developer this.currentFact}}
<button {{on 'click' (fn this.showFact "name")}}>Show name</button>
<button {{on 'click' (fn this.showFact "language")}}>Show language</button>
```
The `{{get}}` helper can also respect mutable values itself. For example:
```app/components/developer-detail.js
<Input @value={{mut (get this.person this.currentFact)}} />
<button {{on 'click' (fn this.showFact "name")}}>Show name</button>
<button {{on 'click' (fn this.showFact "language")}}>Show language</button>
```
Would allow the user to swap what fact is being displayed, and also edit
that fact via a two-way mutable binding.
@public
@method get
*/
export default internalHelper(({
positional
}) => {
var _a, _b;
let sourceRef = (_a = positional[0]) !== null && _a !== void 0 ? _a : UNDEFINED_REFERENCE;
let pathRef = (_b = positional[1]) !== null && _b !== void 0 ? _b : UNDEFINED_REFERENCE;
return createComputeRef(() => {
let source = valueForRef(sourceRef);
if (isDict(source)) {
return getPath(source, String(valueForRef(pathRef)));
}
}, value => {
let source = valueForRef(sourceRef);
if (isDict(source)) {
return setPath(source, String(valueForRef(pathRef)), value);
}
}, 'get');
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL0BnbGltbWVyL3J1bnRpbWUvbGliL2hlbHBlcnMvZ2V0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLFNBQVMsT0FBVCxFQUFrQixPQUFsQixRQUFpQyx5QkFBakM7QUFDQSxTQUFTLE1BQVQsUUFBdUIsZUFBdkI7QUFFQSxTQUFTLGdCQUFULEVBQTJCLG1CQUEzQixFQUFnRCxXQUFoRCxRQUFtRSxvQkFBbkU7QUFDQSxTQUFTLGNBQVQsUUFBK0IsbUJBQS9CO0FBRUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQTZFQSxlQUFlLGNBQWMsQ0FBQyxDQUFDO0FBQUUsRUFBQTtBQUFGLENBQUQsS0FBc0M7OztBQUNsRSxNQUFJLFNBQVMsR0FBQSxDQUFBLEVBQUEsR0FBRyxVQUFVLENBQUMsQ0FBRCxDQUFiLE1BQWdCLElBQWhCLElBQWdCLEVBQUEsS0FBQSxLQUFBLENBQWhCLEdBQWdCLEVBQWhCLEdBQW9CLG1CQUFqQztBQUNBLE1BQUksT0FBTyxHQUFBLENBQUEsRUFBQSxHQUFHLFVBQVUsQ0FBQyxDQUFELENBQWIsTUFBZ0IsSUFBaEIsSUFBZ0IsRUFBQSxLQUFBLEtBQUEsQ0FBaEIsR0FBZ0IsRUFBaEIsR0FBb0IsbUJBQS9CO0FBRUEsU0FBTyxnQkFBZ0IsQ0FDckIsTUFBSztBQUNILFFBQUksTUFBTSxHQUFHLFdBQVcsQ0FBQyxTQUFELENBQXhCOztBQUVBLFFBQUksTUFBTSxDQUFDLE1BQUQsQ0FBVixFQUFvQjtBQUNsQixhQUFPLE9BQU8sQ0FBQyxNQUFELEVBQVMsTUFBTSxDQUFDLFdBQVcsQ0FBQyxPQUFELENBQVosQ0FBZixDQUFkO0FBQ0Q7QUFDRixHQVBvQixFQVFwQixLQUFELElBQVU7QUFDUixRQUFJLE1BQU0sR0FBRyxXQUFXLENBQUMsU0FBRCxDQUF4Qjs7QUFFQSxRQUFJLE1BQU0sQ0FBQyxNQUFELENBQVYsRUFBb0I7QUFDbEIsYUFBTyxPQUFPLENBQUMsTUFBRCxFQUFTLE1BQU0sQ0FBQyxXQUFXLENBQUMsT0FBRCxDQUFaLENBQWYsRUFBdUMsS0FBdkMsQ0FBZDtBQUNEO0FBQ0YsR0Fkb0IsRUFlckIsS0FmcUIsQ0FBdkI7QUFpQkQsQ0FyQjRCLENBQTdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0UGF0aCwgc2V0UGF0aCB9IGZyb20gJ0BnbGltbWVyL2dsb2JhbC1jb250ZXh0JztcbmltcG9ydCB7IGlzRGljdCB9IGZyb20gJ0BnbGltbWVyL3V0aWwnO1xuaW1wb3J0IHsgQ2FwdHVyZWRBcmd1bWVudHMgfSBmcm9tICdAZ2xpbW1lci9pbnRlcmZhY2VzJztcbmltcG9ydCB7IGNyZWF0ZUNvbXB1dGVSZWYsIFVOREVGSU5FRF9SRUZFUkVOQ0UsIHZhbHVlRm9yUmVmIH0gZnJvbSAnQGdsaW1tZXIvcmVmZXJlbmNlJztcbmltcG9ydCB7IGludGVybmFsSGVscGVyIH0gZnJvbSAnLi9pbnRlcm5hbC1oZWxwZXInO1xuXG4vKipcbiAgRHluYW1pY2FsbHkgbG9vayB1cCBhIHByb3BlcnR5IG9uIGFuIG9iamVjdC4gVGhlIHNlY29uZCBhcmd1bWVudCB0byBge3tnZXR9fWBcbiAgc2hvdWxkIGhhdmUgYSBzdHJpbmcgdmFsdWUsIGFsdGhvdWdoIGl0IGNhbiBiZSBib3VuZC5cblxuICBGb3IgZXhhbXBsZSwgdGhlc2UgdHdvIHVzYWdlcyBhcmUgZXF1aXZhbGVudDpcblxuICBgYGBhcHAvY29tcG9uZW50cy9kZXZlbG9wZXItZGV0YWlsLmpzXG4gIGltcG9ydCBDb21wb25lbnQgZnJvbSAnQGdsaW1tZXIvY29tcG9uZW50JztcbiAgaW1wb3J0IHsgdHJhY2tlZCB9IGZyb20gJ0BnbGltbWVyL3RyYWNraW5nJztcblxuICBleHBvcnQgZGVmYXVsdCBjbGFzcyBleHRlbmRzIENvbXBvbmVudCB7XG4gICAgQHRyYWNrZWQgZGV2ZWxvcGVyID0ge1xuICAgICAgbmFtZTogXCJTYW5kaSBNZXR6XCIsXG4gICAgICBsYW5ndWFnZTogXCJSdWJ5XCJcbiAgICB9XG4gIH1cbiAgYGBgXG5cbiAgYGBgaGFuZGxlYmFyc1xuICB7e3RoaXMuZGV2ZWxvcGVyLm5hbWV9fVxuICB7e2dldCB0aGlzLmRldmVsb3BlciBcIm5hbWVcIn19XG4gIGBgYFxuXG4gIElmIHRoZXJlIHdlcmUgc2V2ZXJhbCBmYWN0cyBhYm91dCBhIHBlcnNvbiwgdGhlIGB7e2dldH19YCBoZWxwZXIgY2FuIGR5bmFtaWNhbGx5XG4gIHBpY2sgb25lOlxuXG4gIGBgYGFwcC90ZW1wbGF0ZXMvYXBwbGljYXRpb24uaGJzXG4gIDxEZXZlbG9wZXJEZXRhaWwgQGZhY3ROYW1lPVwibGFuZ3VhZ2VcIiAvPlxuICBgYGBcblxuICBgYGBoYW5kbGViYXJzXG4gIHt7Z2V0IHRoaXMuZGV2ZWxvcGVyIEBmYWN0TmFtZX19XG4gIGBgYFxuXG4gIEZvciBhIG1vcmUgY29tcGxleCBleGFtcGxlLCB0aGlzIHRlbXBsYXRlIHdvdWxkIGFsbG93IHRoZSB1c2VyIHRvIHN3aXRjaFxuICBiZXR3ZWVuIHNob3dpbmcgdGhlIHVzZXIncyBoZWlnaHQgYW5kIHdlaWdodCB3aXRoIGEgY2xpY2s6XG5cbiAgYGBgYXBwL2NvbXBvbmVudHMvZGV2ZWxvcGVyLWRldGFpbC5qc1xuICBpbXBvcnQgQ29tcG9uZW50IGZyb20gJ0BnbGltbWVyL2NvbXBvbmVudCc7XG4gIGltcG9ydCB7IHRyYWNrZWQgfSBmcm9tICdAZ2xpbW1lci90cmFja2luZyc7XG5cbiAgZXhwb3J0IGRlZmF1bHQgY2xhc3MgZXh0ZW5kcyBDb21wb25lbnQge1xuICAgIEB0cmFja2VkIGRldmVsb3BlciA9IHtcbiAgICAgIG5hbWU6IFwiU2FuZGkgTWV0elwiLFxuICAgICAgbGFuZ3VhZ2U6IFwiUnVieVwiXG4gICAgfVxuXG4gICAgQHRyYWNrZWQgY3VycmVudEZhY3QgPSAnbmFtZSdcblxuICAgIHNob3dGYWN0ID0gKGZhY3QpID0+IHtcbiAgICAgIHRoaXMuY3VycmVudEZhY3QgPSBmYWN0O1xuICAgIH1cbiAgfVxuICBgYGBcblxuICBgYGBhcHAvY29tcG9uZW50cy9kZXZlbG9wZXItZGV0YWlsLmpzXG4gIHt7Z2V0IHRoaXMuZGV2ZWxvcGVyIHRoaXMuY3VycmVudEZhY3R9fVxuXG4gIDxidXR0b24ge3tvbiAnY2xpY2snIChmbiB0aGlzLnNob3dGYWN0IFwibmFtZVwiKX19PlNob3cgbmFtZTwvYnV0dG9uPlxuICA8YnV0dG9uIHt7b24gJ2NsaWNrJyAoZm4gdGhpcy5zaG93RmFjdCBcImxhbmd1YWdlXCIpfX0+U2hvdyBsYW5ndWFnZTwvYnV0dG9uPlxuICBgYGBcblxuICBUaGUgYHt7Z2V0fX1gIGhlbHBlciBjYW4gYWxzbyByZXNwZWN0IG11dGFibGUgdmFsdWVzIGl0c2VsZi4gRm9yIGV4YW1wbGU6XG5cbiAgYGBgYXBwL2NvbXBvbmVudHMvZGV2ZWxvcGVyLWRldGFpbC5qc1xuICA8SW5wdXQgQHZhbHVlPXt7bXV0IChnZXQgdGhpcy5wZXJzb24gdGhpcy5jdXJyZW50RmFjdCl9fSAvPlxuXG4gIDxidXR0b24ge3tvbiAnY2xpY2snIChmbiB0aGlzLnNob3dGYWN0IFwibmFtZVwiKX19PlNob3cgbmFtZTwvYnV0dG9uPlxuICA8YnV0dG9uIHt7b24gJ2NsaWNrJyAoZm4gdGhpcy5zaG93RmFjdCBcImxhbmd1YWdlXCIpfX0+U2hvdyBsYW5ndWFnZTwvYnV0dG9uPlxuICBgYGBcblxuICBXb3VsZCBhbGxvdyB0aGUgdXNlciB0byBzd2FwIHdoYXQgZmFjdCBpcyBiZWluZyBkaXNwbGF5ZWQsIGFuZCBhbHNvIGVkaXRcbiAgdGhhdCBmYWN0IHZpYSBhIHR3by13YXkgbXV0YWJsZSBiaW5kaW5nLlxuXG4gIEBwdWJsaWNcbiAgQG1ldGhvZCBnZXRcbiAqL1xuZXhwb3J0IGRlZmF1bHQgaW50ZXJuYWxIZWxwZXIoKHsgcG9zaXRpb25hbCB9OiBDYXB0dXJlZEFyZ3VtZW50cykgPT4ge1xuICBsZXQgc291cmNlUmVmID0gcG9zaXRpb25hbFswXSA/PyBVTkRFRklORURfUkVGRVJFTkNFO1xuICBsZXQgcGF0aFJlZiA9IHBvc2l0aW9uYWxbMV0gPz8gVU5ERUZJTkVEX1JFRkVSRU5DRTtcblxuICByZXR1cm4gY3JlYXRlQ29tcHV0ZVJlZihcbiAgICAoKSA9PiB7XG4gICAgICBsZXQgc291cmNlID0gdmFsdWVGb3JSZWYoc291cmNlUmVmKTtcblxuICAgICAgaWYgKGlzRGljdChzb3VyY2UpKSB7XG4gICAgICAgIHJldHVybiBnZXRQYXRoKHNvdXJjZSwgU3RyaW5nKHZhbHVlRm9yUmVmKHBhdGhSZWYpKSk7XG4gICAgICB9XG4gICAgfSxcbiAgICAodmFsdWUpID0+IHtcbiAgICAgIGxldCBzb3VyY2UgPSB2YWx1ZUZvclJlZihzb3VyY2VSZWYpO1xuXG4gICAgICBpZiAoaXNEaWN0KHNvdXJjZSkpIHtcbiAgICAgICAgcmV0dXJuIHNldFBhdGgoc291cmNlLCBTdHJpbmcodmFsdWVGb3JSZWYocGF0aFJlZikpLCB2YWx1ZSk7XG4gICAgICB9XG4gICAgfSxcbiAgICAnZ2V0J1xuICApO1xufSk7XG4iXSwic291cmNlUm9vdCI6IiJ9