I recently watched (and enjoyed!) @serenaf's talk about this addon at EmberCamp London 2016.

I had an idea for how this might be doable without having to resort to a Babel transform (which I had a few concerns about) while still maintaining the same interface. I gave it a shot and was able to get this to work using a computed property macro and a RegExp.

The idea behind my approach relies on three observations:

• We can use a regular expression to find all the properties/paths in the template string
• The String.prototype.replace function supports having a function passed as a second parameter which lets you dynamically replace a match based on the contents of the match
• Computed property macros can be generated with dynamic keys based on the passed value

The approach is then to create a computed property macro which:

• Constructs and uses a regular expression to get all properties/paths in the passed template string, then
• Uses those properties (after a uniq to avoid duplication) as the dependent keys of the generated computed property, and finally
• Uses String.prototype.replace to replace instances of ${property} with the get() lookup of those properties.

You can see my solution in a twiddle (source). For the tests I copied the tests in this project's tests/unit/custom-replace-call-paths-test.js, and they seem to all pass.

Happens in the host app which includes an addon which includes ember-computed-template-string.

Cannot read property 'replaceCallPaths' of undefined
TypeError: Cannot read property 'replaceCallPaths' of undefined
    at ComputedTemplateStringTransform (/home/lolmaus/Code/launchpad2/node_modules/ember-computed-template-string/plugins/computed-template-string-transform.js:5:43)
    at CoreObject.module.exports.included (/home/lolmaus/Code/launchpad2/node_modules/ember-computed-template-string/index.js:16:38)
    at CoreObject.superWrapper [as included] (/home/lolmaus/Code/launchpad2/node_modules/core-object/lib/assign-properties.js:32:18)
    at EmberApp.<anonymous> (/home/lolmaus/Code/launchpad2/node_modules/ember-cli/lib/broccoli/ember-app.js:468:15)
    at Array.filter (native)
    at EmberApp._notifyAddonIncluded (/home/lolmaus/Code/launchpad2/node_modules/ember-cli/lib/broccoli/ember-app.js:463:45)
    at new EmberApp (/home/lolmaus/Code/launchpad2/node_modules/ember-cli/lib/broccoli/ember-app.js:138:8)
    at module.exports (/home/lolmaus/Code/launchpad2/ember-cli-build.js:8:15)
    at CoreObject.module.exports.Task.extend.setupBroccoliBuilder (/home/lolmaus/Code/launchpad2/node_modules/ember-cli/lib/models/builder.js:74:19)
    at CoreObject.module.exports.Task.extend.init (/home/lolmaus/Code/launchpad2/node_modules/ember-cli/lib/models/builder.js:54:10)

Process finished with exit code 1

Immediate issue is here.

The problem is that ComputedTemplateStringTransform function is called with app.options.emberComputedTemplateString, but emberComputedTemplateString property is never set and thus is undefined.

Context:

• https://embercommunity.slack.com/archives/-ember-cli/p1470864929001722
• babel/broccoli-babel-transpiler#89

We should warn on uses likes this:

• Computed.templateString('${adminName}') - use Computed.reads or Computed.alias
• Computed.templateString('this has no dynamic section')

Hey there,

what do you think about using {{variable}} as variable interpolation syntax? So that instead of writing

fullName: templateString("${firstName} ${lastName}")

You would write instead

fullName: templateString("{{firstName}} {{lastName}}")

The motivation for that is that the addon is called ember-computed-template-string and this would be more consistent with handlebars variable interpolation, while using the ${variable} syntax looks much more like ES6 variable interpolation.