Skip to content

Use gts components for examples #1689

@barryofguilder

Description

@barryofguilder

Is there a way to use gts components for the examples? I've tried doing this, but I get runtime errors.

My example component (menu-default.gts) for the docs:

// BEGIN-SNIPPET docs-menu-default.gts
import Component from '@glimmer/component';
import UiMenu from '@onwardcare/ui-components/components/ui-menu';
import UiPortalTargets from '@onwardcare/ui-components/components/ui-portal-targets';
import DocsDemo from 'ember-cli-addon-docs/components/docs-demo';

interface Signature {
  Element: null;
}

export default class MenuDefault extends Component<Signature> {
  <template>
    <DocsDemo as |demo|>
      <demo.example @name='docs-menu-default.gts'>
        <UiPortalTargets />

        <UiMenu as |menu|>
          <menu.Trigger>Open Menu</menu.Trigger>

          <menu.Content as |content|>
            <content.Item>Item 1</content.Item>
            <content.Item>Item 2</content.Item>
          </menu.Content>
        </UiMenu>
      </demo.example>

      <demo.snippet @name='docs-menu-default.gts' />
    </DocsDemo>
  </template>
}
// END-SNIPPET

The runtime error I receive:
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions