PowerCalendar incompatible with Embroider-optimized app

[patocallaghan]

👋 It appears things are stabilising around Embroider because in the next version of ember-cli all newly-created addons will have Embroider testing baked into ember-try by default. I've been experimenting with Embroider and various addons and it appears that ember-power-calendar is incompatible with an Embroider "optimized" app, i.e. an app with component tree-shaking enabled.

When I try to use an example in my app like:

<PowerCalendar as |calendar|>
  <calendar.Days/>
</PowerCalendar

I get the following error:

broccoliBuilderErrorStack: ModuleError: Module Error (from /Users/pat/hacking/embroider-spike/node_modules/@embroider/hbs-loader/src/index.js):
Unsafe dynamic component: this.navComponent in node_modules/ember-power-calendar/templates/components/power-calendar.hbs

This points to the fact we should use the new ensureSafeComponent @embroider/util helper (documented here) when passing around the power-calendar/nav and power-calendar/days components.

ember-power-calendar/addon/components/power-calendar.js

Lines 17 to 18 in 2855dac

	navComponent = 'power-calendar/nav'
	daysComponent = 'power-calendar/days'

I tried to spike out adding Embroider ember-try testing in the following branch, but it appears this repo's usage of ember-cli-custom-assertions is causing a lot of failures as that is also incompatible with Embroider (issue here: DockYard/ember-cli-custom-assertions#46).

[LowBP]

[@embroider/webpack]The exported identifier "Error" is not declared in Babel's scope tracker
as a JavaScript value binding, and "@babel/plugin-transform-typescript"
never encountered it as a TypeScript type declaration.
It will be treated as a JavaScript value.

This problem is likely caused by another plugin injecting
"Error" without registering it in the scope tracker. If you are the author
 of that plugin, please use "scope.registerDeclaration(declarationPath)".
cleaning up...
Build Error (PackagerRunner) in ../../node_modules/ember-power-calendar/templates/components/power-calendar.hbs

Module Error (from ../../../../../../../../../../../../core/node_modules/thread-loader/dist/cjs.js):
Unsafe dynamic component: this.navComponent in $TMPDIR/embroider/20abeb/packages/core/node_modules/ember-power-calendar/templates/components/power-calendar.hbs/power-calendar.hbs

Getting error when i run my addons with embroider-optimized try scenario. please take a look at the above error message.

"ember-cli-babel": "^7.26.6",
"ember-cli-typescript": "^4.2.1",
 "ember-source": "~3.27.5",
 "ember-power-calendar": "^0.16.4",
 "ember-power-calendar-luxon": "^0.1.9",

[gwak]

Just for reference, I followed the following Simplelabs bolg post about making old addons work in your Embroider Optimized app using packageRules and here's my current configuration to make this addon work with Embroider static component mode:

return require('@embroider/compat').compatBuild(app, Webpack, {
    staticAddonTestSupportTrees: true,
    staticAddonTrees: true,
    staticHelpers: true,
    staticModifiers: true,
    staticComponents: true,
    packageRules: [
      {
        package: 'ember-power-calendar',
        components: {
          '<PowerCalendar />': {
            acceptsComponentArguments: ['this.navComponent', 'this.daysComponent'],
            layout: {
              addonPath: 'templates/components/power-calendar.hbs'
            }
          }
        }
      }
    ]
  });

Additionally, when instantiating the <PowerCalendar/> component you need to provide actual components to @navComponent and @daysComponent args instead of component names, like so:

<PowerCalendar
    @navComponent={{component "my-nav-component"}}
    @daysComponent={{component "my-days-component"}}
/>

Instead of :

<PowerCalendar
    @navComponent="my-nav-component"
    @daysComponent="my-days-component"
/>

[mkszepp]

v0.19.0 is now ready for embroider