-css-blocks-classnames is not a helper

[mrosenberg]

ember-cli: 3.3.0 node: 8.11.4 os: darwin x64

I have an ember-cli Glimmer app up and running and using the .20.0beta.0 and I'm running into a roadblock when trying to use states. I get this message. It looks like the template engine is looking for a helper that isn't there. Here's the console output.

app.js:1857 Uncaught (in promise) Error: Compile Error: -css-blocks-classnames is not a helper
    at EXPRESSIONS.add (app.js:1857)
    at Compilers.compile (app.js:1613)
    at LazyOpcodeBuilder.expr (app.js:2538)
    at EXPRESSIONS.add (app.js:1832)
    at Compilers.compile (app.js:1613)
    at LazyOpcodeBuilder.expr (app.js:2538)
    at dynamicAttr (app.js:1800)
    at STATEMENTS.add (app.js:1656)
    at Compilers.compile (app.js:1613)
    at CompilableTemplate.compile (app.js:2272)

CSS-Blocks has a lot of moving parts with the Ember-Cli part wrapping the Glimmer part wrapping the Core logic and I'm having trouble figuring out where this is breaking down.

I have a repo here that demonstrates the problem.

[rondale-sc]

I ran into this as well. In my application these boils down to it looking for -css-blocks-classnames inside a registry that contains only helpers from my own application. The css blocks ember-cli addon does in fact have this helper, not sure why the registry doesn't contain it.

[rondale-sc]

This helper is only used when there is a dynamic bit, static values are fine.

Fine:

state:selected=true

Errors:

state:selected={{someBool}}

[mrosenberg]

This makes sense given what I saw. I was working on a toy app and have shelved this for the time being though.

[rondale-sc]

Okay @mrosenberg You're not going to like this hack lolol:

// in src/index.ts
// hax until runtime helpers are properly imported in css-blocks for glimmer
import { classnames } from '@css-blocks/glimmer/dist/cjs/src/helpers/classnames';

app.registerInitializer({
  initialize(registry) {
    registry._resolver.registry._entries[
      `helper:/<root-name-of-your-app>/components/-css-blocks-classnames`
    ] = classnames;
  }
});

Then if you want tests to pass:

// create a setupRenderingTest helper in src/utils/test-helpers/setup-rendering-test.ts

import { classnames } from '@css-blocks/glimmer/dist/cjs/src/helpers/classnames';
import { setupRenderingTest as originalSetupRenderingTest } from '@glimmer/test-helpers';

export const setupRenderingTest = function(hooks) {
  originalSetupRenderingTest(hooks);

  hooks.beforeEach(function beforeEach() {
    this.app.registerInitializer({
      initialize(registry) {
        // tslint:disable-next-line
        registry._resolver.registry._entries[
          `helper:/glimmer-pdp-viewer/components/-css-blocks-classnames`
        ] = classnames;
      }
    });
  });
};

This just hacks the resolver to lookup up our runtime helper imported at the top of the file and return it.

Please help @amiller-gh, save me from myself lol (all kidding aside, excellent work you've been doing :beers:)

[amiller-gh]

Oh hello! Sorry, didn't see this pass by! Looking 👀

[rondale-sc]

We might be able to have a quick repro in the mono repo by adding something like state:colllapsed={{true}} to https://github.com/linkedin/css-blocks/blob/07a44b91d0e7b2291bf6131b02705d258a6b81e9/packages/%40css-blocks/glimmer/test/fixtures/readme-app/src/ui/components/page-layout/template.hbs.

[amiller-gh]

Well I'm having trouble even getting a basic test case to run 😅 Going to have to spend some more time on this later tonight!

[amiller-gh]

The relevant helper import code lives here – and go figure its Ember only! Would love a PR that automates Glimmer helper delivery.

https://github.com/linkedin/css-blocks/blob/master/packages/%40css-blocks/ember-cli/index.js#L134

[rondale-sc]

@amiller-gh I'll give it a try tomorrow. I'm not sure what to register it as though, my solution relies on putting the registration into helper:/glimmer-pdp-viewer/components/-css-blocks-classnames . and I'm not sure how to get the rootName of the project at that stage.

[amiller-gh]

That would be amazing 👍 I think the add-on already has code to discover the project rootDir in getEnv(). I would't be surprised if we can fetch rootName from either the app instance (parent), somewhere in the moduleConfig, or from the package.json in that same method. Would be nice to normalize in getEnv() across Ember and Glimmer.

[rondale-sc]

I didn't continue my comments here, but I think the correct solution is to rename the -css-blocks-classnames helper to css-blocks-classnames so that consuming applciations can re-export it from their own application. Then we could make the blueprint install the re-export.

The crux of the problem is that glimmer applications disallow helpers prefixed with a - dash.