Propose top-level exports as declaration of public API

addon/index.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// Public API
+//
+// Tradeoffs with using the short-hand imports:
+//  - the entirety of the addon will be included in the bundle
+//  - tree-shaking will be required to undo including everything in the bundle
+//
+//  Pros:
+//    - unified import, `import { Menu } from 'ember-headlessui';`
+//    - Public API is clearly declared
+//      any other components / modifiers / etc, are considered Private API
+export { default as Dialog } from './components/dialog';
+export { default as ListBox } from './components/listbox';
+export { default as Menu } from './components/menu';
+export { default as Switch } from './components/switch';
+export { default as Transition } from './components/transition';

package.json

@@ -92,6 +92,7 @@
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.1",
     "ember-css-transitions": "^2.1.0",
+    "ember-deep-tracked": "^1.3.7",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
@@ -103,6 +104,7 @@
     "ember-resolver": "^8.0.3",
     "ember-source": "~3.28.1",
     "ember-source-channel-url": "^3.0.0",
+    "ember-template-imports": "^2.0.1",
     "ember-template-lint": "^3.5.1",
     "ember-template-lint-plugin-prettier": "^2.0.1",
     "ember-test-selectors": "^6.0.0",

tests/strict-mode-test.gts

@@ -0,0 +1,44 @@
+import { module, test } from 'qunit'
+import { render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'ember-qunit';
+import { tracked } from 'ember-deep-tracked';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+
+import { Dialog, ListBox, Menu, Swift, Transition } from 'ember-headlessui';
+
+import { DialogState, assertDialog } from './accessibility-assertions';
+
+/**
+  * Until strict mode becomes default, these tests are somewhat
+  * "bare minimum" to ensure that we don't break anything in strict mode.
+  * The component-specific tests should still be used for most of the tests.
+  */
+module('Strict Mode', function (hooks) {
+  setupRenderingTest(hooks);
+
+  let state: any;
+  let set = (prop: string, value: any) => state[prop] = value;
+
+  hooks.beforeEach(function() {
+    state = tracked({})
+  });
+
+  test('Dialog works', async function() {
+    await render(
+      <template>
+        <button {{on 'click' (fn set 'isOpen' true)}}>Trigger</button>
+        <Dialog @isOpen={{state.isOpen}} @onClose={{fn set 'isOpen' false}}>
+          Hello
+          <div tabindex="0"></div>
+        </Dialog>
+      </template>
+    );
+
+    assertDialog({ state: DialogState.InvisibleUnmounted });
+
+    await click(document.getElementById('trigger'));
+
+    assertDialog({ state: DialogState.Visible, textContent: 'Hello' });
+  });
+});