UNPKG

@glimmer/runtime

Version:

Minimal runtime needed to render Glimmer templates

104 lines (81 loc) 8.36 kB
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