UNPKG

@glimmer/runtime

Version:

Minimal runtime needed to render Glimmer templates

104 lines (80 loc) 8.39 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(function (_ref) { var positional = _ref.positional; var _a, _b; var sourceRef = (_a = positional[0]) !== null && _a !== void 0 ? _a : UNDEFINED_REFERENCE; var pathRef = (_b = positional[1]) !== null && _b !== void 0 ? _b : UNDEFINED_REFERENCE; return createComputeRef(function () { var source = valueForRef(sourceRef); if (isDict(source)) { return getPath(source, String(valueForRef(pathRef))); } }, function (value) { var source = valueForRef(sourceRef); if (isDict(source)) { return setPath(source, String(valueForRef(pathRef)), value); } }, 'get'); }); //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL0BnbGltbWVyL3J1bnRpbWUvbGliL2hlbHBlcnMvZ2V0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLFNBQUEsT0FBQSxFQUFBLE9BQUEsUUFBQSx5QkFBQTtBQUNBLFNBQUEsTUFBQSxRQUFBLGVBQUE7QUFFQSxTQUFBLGdCQUFBLEVBQUEsbUJBQUEsRUFBQSxXQUFBLFFBQUEsb0JBQUE7QUFDQSxTQUFBLGNBQUEsUUFBQSxtQkFBQTtBQUVBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUE2RUEsZUFBZSxjQUFjLENBQUMsZ0JBQXNDO0FBQUEsTUFBbkMsVUFBbUMsUUFBbkMsVUFBbUM7Ozs7QUFDbEUsTUFBSSxTQUFTLEdBQUEsQ0FBQSxFQUFBLEdBQUcsVUFBVSxDQUFiLENBQWEsQ0FBYixNQUFBLElBQUEsSUFBZ0IsRUFBQSxLQUFBLEtBQWhCLENBQUEsR0FBQSxFQUFBLEdBQWIsbUJBQUE7QUFDQSxNQUFJLE9BQU8sR0FBQSxDQUFBLEVBQUEsR0FBRyxVQUFVLENBQWIsQ0FBYSxDQUFiLE1BQUEsSUFBQSxJQUFnQixFQUFBLEtBQUEsS0FBaEIsQ0FBQSxHQUFBLEVBQUEsR0FBWCxtQkFBQTtBQUVBLFNBQU8sZ0JBQWdCLENBQ3JCLFlBQUs7QUFDSCxRQUFJLE1BQU0sR0FBRyxXQUFXLENBQXhCLFNBQXdCLENBQXhCOztBQUVBLFFBQUksTUFBTSxDQUFWLE1BQVUsQ0FBVixFQUFvQjtBQUNsQixhQUFPLE9BQU8sQ0FBQSxNQUFBLEVBQVMsTUFBTSxDQUFDLFdBQVcsQ0FBekMsT0FBeUMsQ0FBWixDQUFmLENBQWQ7QUFDRDtBQU5rQixHQUFBLEVBUXBCLFVBQUEsS0FBRCxFQUFVO0FBQ1IsUUFBSSxNQUFNLEdBQUcsV0FBVyxDQUF4QixTQUF3QixDQUF4Qjs7QUFFQSxRQUFJLE1BQU0sQ0FBVixNQUFVLENBQVYsRUFBb0I7QUFDbEIsYUFBTyxPQUFPLENBQUEsTUFBQSxFQUFTLE1BQU0sQ0FBQyxXQUFXLENBQTNCLE9BQTJCLENBQVosQ0FBZixFQUFkLEtBQWMsQ0FBZDtBQUNEO0FBYmtCLEdBQUEsRUFBdkIsS0FBdUIsQ0FBdkI7QUFKRixDQUE2QixDQUE3QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldFBhdGgsIHNldFBhdGggfSBmcm9tICdAZ2xpbW1lci9nbG9iYWwtY29udGV4dCc7XG5pbXBvcnQgeyBpc0RpY3QgfSBmcm9tICdAZ2xpbW1lci91dGlsJztcbmltcG9ydCB7IENhcHR1cmVkQXJndW1lbnRzIH0gZnJvbSAnQGdsaW1tZXIvaW50ZXJmYWNlcyc7XG5pbXBvcnQgeyBjcmVhdGVDb21wdXRlUmVmLCBVTkRFRklORURfUkVGRVJFTkNFLCB2YWx1ZUZvclJlZiB9IGZyb20gJ0BnbGltbWVyL3JlZmVyZW5jZSc7XG5pbXBvcnQgeyBpbnRlcm5hbEhlbHBlciB9IGZyb20gJy4vaW50ZXJuYWwtaGVscGVyJztcblxuLyoqXG4gIER5bmFtaWNhbGx5IGxvb2sgdXAgYSBwcm9wZXJ0eSBvbiBhbiBvYmplY3QuIFRoZSBzZWNvbmQgYXJndW1lbnQgdG8gYHt7Z2V0fX1gXG4gIHNob3VsZCBoYXZlIGEgc3RyaW5nIHZhbHVlLCBhbHRob3VnaCBpdCBjYW4gYmUgYm91bmQuXG5cbiAgRm9yIGV4YW1wbGUsIHRoZXNlIHR3byB1c2FnZXMgYXJlIGVxdWl2YWxlbnQ6XG5cbiAgYGBgYXBwL2NvbXBvbmVudHMvZGV2ZWxvcGVyLWRldGFpbC5qc1xuICBpbXBvcnQgQ29tcG9uZW50IGZyb20gJ0BnbGltbWVyL2NvbXBvbmVudCc7XG4gIGltcG9ydCB7IHRyYWNrZWQgfSBmcm9tICdAZ2xpbW1lci90cmFja2luZyc7XG5cbiAgZXhwb3J0IGRlZmF1bHQgY2xhc3MgZXh0ZW5kcyBDb21wb25lbnQge1xuICAgIEB0cmFja2VkIGRldmVsb3BlciA9IHtcbiAgICAgIG5hbWU6IFwiU2FuZGkgTWV0elwiLFxuICAgICAgbGFuZ3VhZ2U6IFwiUnVieVwiXG4gICAgfVxuICB9XG4gIGBgYFxuXG4gIGBgYGhhbmRsZWJhcnNcbiAge3t0aGlzLmRldmVsb3Blci5uYW1lfX1cbiAge3tnZXQgdGhpcy5kZXZlbG9wZXIgXCJuYW1lXCJ9fVxuICBgYGBcblxuICBJZiB0aGVyZSB3ZXJlIHNldmVyYWwgZmFjdHMgYWJvdXQgYSBwZXJzb24sIHRoZSBge3tnZXR9fWAgaGVscGVyIGNhbiBkeW5hbWljYWxseVxuICBwaWNrIG9uZTpcblxuICBgYGBhcHAvdGVtcGxhdGVzL2FwcGxpY2F0aW9uLmhic1xuICA8RGV2ZWxvcGVyRGV0YWlsIEBmYWN0TmFtZT1cImxhbmd1YWdlXCIgLz5cbiAgYGBgXG5cbiAgYGBgaGFuZGxlYmFyc1xuICB7e2dldCB0aGlzLmRldmVsb3BlciBAZmFjdE5hbWV9fVxuICBgYGBcblxuICBGb3IgYSBtb3JlIGNvbXBsZXggZXhhbXBsZSwgdGhpcyB0ZW1wbGF0ZSB3b3VsZCBhbGxvdyB0aGUgdXNlciB0byBzd2l0Y2hcbiAgYmV0d2VlbiBzaG93aW5nIHRoZSB1c2VyJ3MgaGVpZ2h0IGFuZCB3ZWlnaHQgd2l0aCBhIGNsaWNrOlxuXG4gIGBgYGFwcC9jb21wb25lbnRzL2RldmVsb3Blci1kZXRhaWwuanNcbiAgaW1wb3J0IENvbXBvbmVudCBmcm9tICdAZ2xpbW1lci9jb21wb25lbnQnO1xuICBpbXBvcnQgeyB0cmFja2VkIH0gZnJvbSAnQGdsaW1tZXIvdHJhY2tpbmcnO1xuXG4gIGV4cG9ydCBkZWZhdWx0IGNsYXNzIGV4dGVuZHMgQ29tcG9uZW50IHtcbiAgICBAdHJhY2tlZCBkZXZlbG9wZXIgPSB7XG4gICAgICBuYW1lOiBcIlNhbmRpIE1ldHpcIixcbiAgICAgIGxhbmd1YWdlOiBcIlJ1YnlcIlxuICAgIH1cblxuICAgIEB0cmFja2VkIGN1cnJlbnRGYWN0ID0gJ25hbWUnXG5cbiAgICBzaG93RmFjdCA9IChmYWN0KSA9PiB7XG4gICAgICB0aGlzLmN1cnJlbnRGYWN0ID0gZmFjdDtcbiAgICB9XG4gIH1cbiAgYGBgXG5cbiAgYGBgYXBwL2NvbXBvbmVudHMvZGV2ZWxvcGVyLWRldGFpbC5qc1xuICB7e2dldCB0aGlzLmRldmVsb3BlciB0aGlzLmN1cnJlbnRGYWN0fX1cblxuICA8YnV0dG9uIHt7b24gJ2NsaWNrJyAoZm4gdGhpcy5zaG93RmFjdCBcIm5hbWVcIil9fT5TaG93IG5hbWU8L2J1dHRvbj5cbiAgPGJ1dHRvbiB7e29uICdjbGljaycgKGZuIHRoaXMuc2hvd0ZhY3QgXCJsYW5ndWFnZVwiKX19PlNob3cgbGFuZ3VhZ2U8L2J1dHRvbj5cbiAgYGBgXG5cbiAgVGhlIGB7e2dldH19YCBoZWxwZXIgY2FuIGFsc28gcmVzcGVjdCBtdXRhYmxlIHZhbHVlcyBpdHNlbGYuIEZvciBleGFtcGxlOlxuXG4gIGBgYGFwcC9jb21wb25lbnRzL2RldmVsb3Blci1kZXRhaWwuanNcbiAgPElucHV0IEB2YWx1ZT17e211dCAoZ2V0IHRoaXMucGVyc29uIHRoaXMuY3VycmVudEZhY3QpfX0gLz5cblxuICA8YnV0dG9uIHt7b24gJ2NsaWNrJyAoZm4gdGhpcy5zaG93RmFjdCBcIm5hbWVcIil9fT5TaG93IG5hbWU8L2J1dHRvbj5cbiAgPGJ1dHRvbiB7e29uICdjbGljaycgKGZuIHRoaXMuc2hvd0ZhY3QgXCJsYW5ndWFnZVwiKX19PlNob3cgbGFuZ3VhZ2U8L2J1dHRvbj5cbiAgYGBgXG5cbiAgV291bGQgYWxsb3cgdGhlIHVzZXIgdG8gc3dhcCB3aGF0IGZhY3QgaXMgYmVpbmcgZGlzcGxheWVkLCBhbmQgYWxzbyBlZGl0XG4gIHRoYXQgZmFjdCB2aWEgYSB0d28td2F5IG11dGFibGUgYmluZGluZy5cblxuICBAcHVibGljXG4gIEBtZXRob2QgZ2V0XG4gKi9cbmV4cG9ydCBkZWZhdWx0IGludGVybmFsSGVscGVyKCh7IHBvc2l0aW9uYWwgfTogQ2FwdHVyZWRBcmd1bWVudHMpID0+IHtcbiAgbGV0IHNvdXJjZVJlZiA9IHBvc2l0aW9uYWxbMF0gPz8gVU5ERUZJTkVEX1JFRkVSRU5DRTtcbiAgbGV0IHBhdGhSZWYgPSBwb3NpdGlvbmFsWzFdID8/IFVOREVGSU5FRF9SRUZFUkVOQ0U7XG5cbiAgcmV0dXJuIGNyZWF0ZUNvbXB1dGVSZWYoXG4gICAgKCkgPT4ge1xuICAgICAgbGV0IHNvdXJjZSA9IHZhbHVlRm9yUmVmKHNvdXJjZVJlZik7XG5cbiAgICAgIGlmIChpc0RpY3Qoc291cmNlKSkge1xuICAgICAgICByZXR1cm4gZ2V0UGF0aChzb3VyY2UsIFN0cmluZyh2YWx1ZUZvclJlZihwYXRoUmVmKSkpO1xuICAgICAgfVxuICAgIH0sXG4gICAgKHZhbHVlKSA9PiB7XG4gICAgICBsZXQgc291cmNlID0gdmFsdWVGb3JSZWYoc291cmNlUmVmKTtcblxuICAgICAgaWYgKGlzRGljdChzb3VyY2UpKSB7XG4gICAgICAgIHJldHVybiBzZXRQYXRoKHNvdXJjZSwgU3RyaW5nKHZhbHVlRm9yUmVmKHBhdGhSZWYpKSwgdmFsdWUpO1xuICAgICAgfVxuICAgIH0sXG4gICAgJ2dldCdcbiAgKTtcbn0pO1xuIl0sInNvdXJjZVJvb3QiOiIifQ==