Import glimmer component into non-ember build pipeline

[gossi]

For storybook I want to import a glimmer component. Storybook spawns two processes: one for your ember app and another one for storybook itself, which is managed through webpack.

Stories are loaded through webpack and the idea is to have named exports but keep the file as POJO. This is how a story is written:

export const Default = () => {
  return {
    template: hbs`
      <Button {{on "click" (fn this.invoke)}}>Button</Button>
      <Button disabled={{true}}>Disabled Button</Button>
    `,
    context: {
      invoke: action('button invoked')
    }
  };
};

with template and context they are put into a classic ember component, hoisted into the running ember instance and rendered.

Now, I want to write a story in which I want to test a tracked property. Ideally, I would write something like this:

import { action } from '@ember/action';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export const Default = () => {
  return {
    template: hbs`
      <Select @value={{this.selection}} @select={{this.select}}/>
    `,
    component: class extends Component {
      @tracked selection;
      
      @action
      select(selection) {
        this.selection = selection;
      }
    }
  };
};

This I see as a nice way to write stories, because it wraps it in a component and gives you the same mechanics as in a real ember app.

However, there is a gotcha, that I haven't figured out yet and I am seeking for help. The three imports I put there are not working, when this is run through webpack with babel. I only have limited knowledge here how the magic in ember works. Installing plenty missing glimmer packages did not help either, it stopped the same way (just a little later).

Is this possible and how? If not, what would be my options?

Thanks a lot.