Merge pull request #113 from bustle/type-improvements

chore(types): adopt Ember 5.1 stable types, add local typings and CI lint

Author: lukemelia

.github/workflows/ci.yml

@@ -1,5 +1,37 @@
 name: CI
 
+on:
+  push:
+    branches: ["**"]
+  pull_request:
+    branches: ["**"]
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: '10'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run lint
+        run: pnpm run lint
+name: CI
+
 on:
   push:
     branches:

addon/components/render-mobiledoc.gts

@@ -55,6 +55,12 @@ type RenderMobiledocArgs = {
   onWillDestroy?: () => void;
 };
 
+type Signature = {
+  Args: RenderMobiledocArgs;
+  Element: HTMLElement;
+  Blocks: never;
+};
+
 type HookArgs = [
   {
     env: {
@@ -107,7 +113,7 @@ function createComponentAtom(name: string) {
   };
 }
 
-export default class RenderMobiledocComponent extends Component<RenderMobiledocArgs> {
+export default class RenderMobiledocComponent extends Component<Signature> {
   @tracked private componentCardsStore: CardRegistration[] = [];
   @tracked private componentAtomsStore: AtomRegistration[] = [];
   private teardownRender: (() => void) | null = null;
@@ -382,22 +388,21 @@ export default class RenderMobiledocComponent extends Component<RenderMobiledocA
 
     {{#each this.componentCards as |card|}}
       {{#in-element card.destinationElement}}
-        {{component
-          card.componentDefinition
-          options=(readonly card.options)
-          payload=(readonly card.payload)
-        }}
+        {{#let card.componentDefinition as |CardComponent|}}
+          <CardComponent @options={{card.options}} @payload={{card.payload}} />
+        {{/let}}
       {{/in-element}}
     {{/each}}
 
     {{#each this.componentAtoms as |atom|}}
       {{#in-element atom.destinationElement}}
-        {{component
-          atom.componentDefinition
-          options=(readonly atom.options)
-          payload=(readonly atom.payload)
-          value=(readonly atom.value)
-        }}
+        {{#let atom.componentDefinition as |AtomComponent|}}
+          <AtomComponent
+            @options={{atom.options}}
+            @payload={{atom.payload}}
+            @value={{atom.value}}
+          />
+        {{/let}}
       {{/in-element}}
     {{/each}}
   </template>

addon/index.ts

@@ -1,5 +1,7 @@
-import Renderer from 'ember-mobiledoc-dom-renderer/mobiledoc-dom-renderer/index';
-import { RENDER_TYPE } from 'ember-mobiledoc-dom-renderer/mobiledoc-dom-renderer/index';
+// Re-export the runtime mobiledoc-dom-renderer package's default export and
+// named exports. Importing directly from the runtime package makes the
+// module resolution straightforward during type-checking and at runtime.
+import Renderer, { RENDER_TYPE } from 'mobiledoc-dom-renderer';
 
 export { RENDER_TYPE };
 export default Renderer;

addon/utils/document.ts

@@ -2,8 +2,12 @@ import { getOwner } from '@ember/application';
 
 // Private Ember API usage. Get the dom implementation used by the current
 // renderer, be it native browser DOM or Fastboot SimpleDOM
-export function getDocument(context) {
-  const documentService = getOwner(context).lookup('service:-document');
+export function getDocument(context: object) {
+  // getOwner can return undefined in some edge cases; use a minimal Owner-like
+  // shape to call `lookup` safely without using `any`.
+  type OwnerLike = { lookup?(name: string): unknown } | undefined;
+  const owner = getOwner(context as object) as OwnerLike;
+  const documentService = owner?.lookup && owner.lookup('service:-document');
   if (!documentService) {
     throw new Error('ember-mobiledoc-dom-renderer could not get DOM');
   }

tests/fastboot/rendering-mobiledoc-test.ts

@@ -1,11 +1,13 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { module, test } from 'qunit';
 import { setup, visit } from 'ember-cli-fastboot-testing/test-support';
 
 module('FastBoot | rendering tests', function (hooks) {
   setup(hooks);
 
   test('renders', async function (assert) {
-    const res = await visit('/fastboot');
+    const res = (await visit('/fastboot')) as any;
     assert.strictEqual(res.statusCode, 200);
 
     assert.dom('body', res.htmlDocument).exists({ count: 1 });
@@ -14,7 +16,7 @@ module('FastBoot | rendering tests', function (hooks) {
 
   test('renders simple mobiledoc', async function (assert) {
     const name = 'simple';
-    const { htmlDocument } = await visit('/fastboot');
+    const { htmlDocument } = (await visit('/fastboot')) as any;
     const wrapper = `.render-mobiledoc-wrapper.${name}`;
     assert.dom(wrapper, htmlDocument).exists({ count: 1 });
 
@@ -25,7 +27,7 @@ module('FastBoot | rendering tests', function (hooks) {
 
   test('renders mobiledoc with markup', async function (assert) {
     const name = 'with-markup';
-    const { htmlDocument } = await visit('/fastboot');
+    const { htmlDocument } = (await visit('/fastboot')) as any;
 
     const wrapper = `.render-mobiledoc-wrapper.${name}`;
     assert.dom(wrapper, htmlDocument).exists({ count: 1 });
@@ -37,7 +39,7 @@ module('FastBoot | rendering tests', function (hooks) {
 
   test('renders mobiledoc with link', async function (assert) {
     const name = 'with-link';
-    const { htmlDocument } = await visit('/fastboot');
+    const { htmlDocument } = (await visit('/fastboot')) as any;
 
     const wrapper = `.render-mobiledoc-wrapper.${name}`;
     assert.dom(wrapper, htmlDocument).exists({ count: 1 });
@@ -52,7 +54,7 @@ module('FastBoot | rendering tests', function (hooks) {
 
   test('renders mobiledoc with unsafe link', async function (assert) {
     const name = 'with-unsafe-link';
-    const { htmlDocument } = await visit('/fastboot');
+    const { htmlDocument } = (await visit('/fastboot')) as any;
 
     const wrapper = `.render-mobiledoc-wrapper.${name}`;
     assert.dom(wrapper, htmlDocument).exists({ count: 1 });
@@ -70,7 +72,7 @@ module('FastBoot | rendering tests', function (hooks) {
     const componentClassName = 'test-card-component';
     const payloadClassName = 'test-card-component-payload';
 
-    const { htmlDocument, statusCode } = await visit('/fastboot');
+    const { htmlDocument, statusCode } = (await visit('/fastboot')) as any;
     assert.strictEqual(statusCode, 200);
 
     const wrapper = `.render-mobiledoc-wrapper.${name}`;
@@ -89,7 +91,7 @@ module('FastBoot | rendering tests', function (hooks) {
     const payloadClassName = 'test-atom-component-payload';
     const valueClassName = 'test-atom-component-value';
 
-    const { htmlDocument, statusCode } = await visit('/fastboot');
+    const { htmlDocument, statusCode } = (await visit('/fastboot')) as any;
     assert.strictEqual(statusCode, 200);
 
     const wrapper = `.render-mobiledoc-wrapper.${name}`;