emberjs / babel-plugin-ember-template-compilation

Babel implementation of Ember's low-level template-compilation API
9 stars 11 forks source link

Reason for only allowing direct references to in-scope values? #14

Closed simonihmig closed 1 year ago

simonihmig commented 1 year ago

This assertion seems to allow only scopes defined as { foo } or { foo: foo }, but not { foo: bar }. I wonder why that is?

The problem I was running into:

I am using rollup-plugin-glimmer-template-tag and rollup-plugin-ts in a v2 addon, I was importing the default export of a component HeadlessFormFieldComponent under a shorter name, like this:

import FieldComponent from './field';

But during the compilation process (/dist output of v2 addon), this gets implicitly transformed to something like this:

import HeadlessFormFieldComponent from './field';

setComponentTemplate(precompileTemplate(`...`, {
  strictMode: true,
  scope: () => ({
    FieldComponent: HeadlessFormFieldComponent
  })

Idk why this is being done, but it seems perfectly valid from a pure JS standpoint. But the babel plugin then throws Scope objects for precompileTemplate may only contain direct references to in-scope values, e.g. { FieldComponent } or { FieldComponent: FieldComponent }

Similar things happen when you import by assigning an alias, like

import { EnsureSafeComponentHelper as ensureSafeComponent } from '@embroider/util';

...which gets rewritten to

import { EnsureSafeComponentHelper } from '@embroider/util';

setComponentTemplate(precompileTemplate(`...`, {
  strictMode: true,
  scope: () => ({
    ensureSafeComponent: EnsureSafeComponentHelper
  })
candunaj commented 1 year ago

This was solved with the following PRs and released in 2.0.2 https://github.com/emberjs/babel-plugin-ember-template-compilation/pull/17 https://github.com/emberjs/babel-plugin-ember-template-compilation/pull/19