Update dependencies

addon/components/freestyle-section/index.hbs

@@ -1,6 +1,5 @@
 <div
   class="FreestyleSection {{if this.show 'FreestyleSection--showing' 'FreestyleSection--hidden'}}"
-  {{did-insert (fn this.emberFreestyle.registerSection @name null)}}
   ...attributes
 >
   {{#if this.show}}

addon/components/freestyle-section/index.ts

@@ -1,9 +1,9 @@
 import Component from '@glimmer/component';
 import type EmberFreestyleService from '../../services/ember-freestyle';
 import type { WithBoundArgs } from '@glint/template';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { inject as service } from '@ember/service';
 import FreestyleSubsection from '../freestyle-subsection';
+import Owner from '@ember/owner';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -20,6 +20,11 @@ interface Signature {
 export default class FreestyleSection extends Component<Signature> {
   @service('ember-freestyle') declare emberFreestyle: EmberFreestyleService;
 
+  constructor(owner: Owner, args: Signature['Args']) {
+    super(owner, args);
+    this.emberFreestyle.registerSection(this.args.name);
+  }
+
   get show(): boolean {
     return this.emberFreestyle.shouldShowSection(this.args.name);
   }

addon/components/freestyle-source/index.hbs

@@ -2,5 +2,5 @@
   <div class="FreestyleSource-title">
     Source
   </div>
-  <pre class="handlebars" tabindex="0" {{did-insert this.highlight}}>{{this.renderableSource}}</pre>
+  <pre class="handlebars" tabindex="0" {{this.highlight}}>{{this.renderableSource}}</pre>
 {{/if}}

addon/components/freestyle-source/index.ts

@@ -1,11 +1,9 @@
 import Component from '@glimmer/component';
 import EmberFreestyleService from '../../services/ember-freestyle';
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { inject as service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
 import { reads } from 'macro-decorators';
-import { action, get } from '@ember/object';
-/* eslint-enable @typescript-eslint/no-unused-vars */
+import { get } from '@ember/object';
+import { modifier } from 'ember-modifier';
 
 interface Signature {
   Args: {
@@ -22,7 +20,7 @@ export default class FreestyleSource extends Component<Signature> {
     string,
     unknown
   >;
-  @tracked initialHighlightComplete = false;
+  initialHighlightComplete = false;
   preElement: HTMLElement | undefined;
 
   private dynamafy(sourceCode: string) {
@@ -78,12 +76,11 @@ export default class FreestyleSource extends Component<Signature> {
     return result;
   }
 
-  @action
-  highlight(preElement: HTMLElement): void {
+  highlight = modifier((preElement: HTMLElement) => {
     this.preElement = preElement;
     if (preElement && this.renderableSource) {
       this.emberFreestyle.highlight(preElement);
     }
     this.initialHighlightComplete = true;
-  }
+  });
 }

addon/components/freestyle-subsection/index.hbs

@@ -1,5 +1,4 @@
 <div class="FreestyleSubsection {{if this.show 'is-showing' 'is-hidden'}}"
-  {{did-insert (fn this.emberFreestyle.registerSection @section @name)}}
   ...attributes
 >
   {{#if this.show}}

addon/components/freestyle-subsection/index.ts

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { inject as service } from '@ember/service';
 import EmberFreestyleService from '../../services/ember-freestyle';
+import Owner from '@ember/owner';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -15,6 +15,12 @@ interface Signature {
 }
 export default class FreestyleSubsection extends Component<Signature> {
   @service('ember-freestyle') declare emberFreestyle: EmberFreestyleService;
+
+  constructor(owner: Owner, args: Signature['Args']) {
+    super(owner, args);
+    this.emberFreestyle.registerSection(this.args.section, this.args.name);
+  }
+
   get show(): boolean {
     return this.emberFreestyle.shouldShowSubsection(
       this.args.section,

addon/components/freestyle-usage-controls/index.hbs

@@ -1,4 +1,4 @@
-<div class="FreestyleUsageControls" {{did-insert this.setup}}>
+<div class="FreestyleUsageControls" {{this.setup}}>
   {{#if this.showHeader}}
     <div class="FreestyleUsageControls-header">
       Settings
@@ -7,41 +7,40 @@
   <div class="FreestyleUsageControls-item">
     <div class="FreestyleUsageControls-itemControl">
       <label class="FreestyleUsageControls-itemLabel">
-        <Input @type="checkbox" @checked={{this.showLabels}} />
+        <input type="checkbox" checked={{this.showLabels}} {{on 'click' (this.toggle 'showLabels')}} />
         Show Labels
       </label>
     </div>
   </div>
   <div class="FreestyleUsageControls-item">
     <div class="FreestyleUsageControls-itemControl">
       <label class="FreestyleUsageControls-itemLabel">
-        <Input @type="checkbox" @checked={{this.showNotes}} />
+        <input type="checkbox" checked={{this.showNotes}} {{on 'click' (this.toggle 'showNotes')}} />
         Show Notes
       </label>
     </div>
   </div>
   <div class="FreestyleUsageControls-item">
     <div class="FreestyleUsageControls-itemControl">
       <label class="FreestyleUsageControls-itemLabel">
-        <Input @type="checkbox" @checked={{this.showCode}} />
+        <input type="checkbox" checked={{this.showCode}} {{on 'click' (this.toggle 'showCode')}} />
         Show Code
       </label>
     </div>
   </div>
   <div class="FreestyleUsageControls-item">
     <div class="FreestyleUsageControls-itemControl">
       <label class="FreestyleUsageControls-itemLabel">
-        <Input @type="checkbox" @checked={{this.showApi}} />
+        <input type="checkbox" checked={{this.showApi}} {{on 'click' (this.toggle 'showApi')}} />
         Show API
       </label>
     </div>
   </div>
   {{#if this.showFocus}}
     <div class="FreestyleUsageControls-item FreestyleUsageControls-item--focus">
       <div class="FreestyleUsageControls-itemControl">
-        <label class="FreestyleUsageControls-label--focus">Focus a section
-          <Input class="FreestyleUsageControls-input--focus" @value={{this.focus}} @enter={{this.setFocus}} />
-        </label>
+        {{!-- template-lint-disable require-input-label --}}
+        <input type="text" class="FreestyleUsageControls-input--focus" value={{this.focus}} {{on 'input' this.updateFocus}} {{on 'keydown' this.setFocusOnEnterKey}} />
         <button class="FreestyleUsageControls-button" {{on 'click' this.setFocus}} type="button">Focus</button>
       </div>
     </div>

addon/components/freestyle-usage-controls/index.ts

@@ -2,11 +2,11 @@ import Component from '@glimmer/component';
 import { schedule } from '@ember/runloop';
 import { capitalize } from '@ember/string';
 import type EmberFreestyleService from '../../services/ember-freestyle';
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { inject as service } from '@ember/service';
 import { action, get, set } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-/* eslint-enable @typescript-eslint/no-unused-vars */
+import { modifier } from 'ember-modifier';
+import { helper } from '@ember/component/helper';
 
 export default class FreestyleUsageControls extends Component {
   @service('ember-freestyle') declare emberFreestyle: EmberFreestyleService;
@@ -40,11 +40,25 @@ export default class FreestyleUsageControls extends Component {
   showFocus = true;
   @tracked focus: string | null = null;
 
-  @action setup(): void {
+  setup = modifier(() => {
     schedule('afterRender', () => {
       this.focus = this.emberFreestyle.focus;
     });
-  }
+  });
+
+  toggle = helper(([prop]: [keyof this]) => {
+    return () => {
+      const currentValue = get(this, prop) as boolean;
+      const newValue = !currentValue;
+      return set(this, prop, newValue as this[keyof this]);
+    };
+  });
+
+  setFocusOnEnterKey = (ev: KeyboardEvent) => {
+    if (ev.key === 'Enter') {
+      this.setFocus();
+    }
+  };
 
   @action
   toggleUsage(usageType: 'labels' | 'notes' | 'code' | 'api'): void {
@@ -60,4 +74,8 @@ export default class FreestyleUsageControls extends Component {
   setFocus(): void {
     this.emberFreestyle.set('focus', this.focus);
   }
+
+  updateFocus = (ev: Event) => {
+    this.focus = (ev.target as HTMLInputElement).value;
+  };
 }

addon/components/freestyle-usage/index.hbs

@@ -1,6 +1,6 @@
 <div
   class="FreestyleUsage {{if @inline 'FreestyleUsage--inline'}}"
-  {{did-insert this.ensureTheme}}
+  {{ensure-freestyle-theme}}
   ...attributes
 >
   {{#if this.show}}

addon/components/freestyle/usage/index.hbs

@@ -84,7 +84,7 @@
     {{/if}}
 
     {{#if this.showSource}}
-      <div class="FreestyleUsage-sourceContainer" {{did-insert this.highlightSource}}>
+      <div class="FreestyleUsage-sourceContainer" {{ensure-freestyle-theme @highlightJsTheme}}>
         <FreestyleSource @source={{@source}} />
       </div>
     {{/if}}

addon/components/freestyle/usage/index.ts

@@ -71,14 +71,6 @@ export default class extends Component<Signature> {
     return this.args.slug || this.args.name;
   }
 
-  get computedTheme(): string {
-    return this.args.highlightJsTheme || this.emberFreestyle.defaultTheme;
-  }
-
-  @action highlightSource(): void {
-    this.emberFreestyle.ensureHljsTheme(this.computedTheme);
-  }
-
   @action setFocus(): void {
     this.emberFreestyle.focus = this.effectiveSlug ?? null;
   }

addon/modifiers/ensure-freestyle-theme.ts

@@ -0,0 +1,22 @@
+import Modifier from 'ember-modifier';
+import { inject as service } from '@ember/service';
+import type EmberFreestyleService from '../services/ember-freestyle';
+
+interface Signature {
+  Element: HTMLElement;
+  Args: {
+    Positional: [highlightJsTheme?: string];
+  };
+}
+
+export default class EnsureFreestyleTheme extends Modifier<Signature> {
+  @service declare emberFreestyle: EmberFreestyleService;
+
+  modify(
+    _element: HTMLElement,
+    positional: Signature['Args']['Positional'],
+  ): void {
+    const computedTheme = positional?.[0] || this.emberFreestyle.defaultTheme;
+    this.emberFreestyle.ensureHljsTheme(computedTheme);
+  }
+}

addon/services/ember-freestyle.ts

@@ -1,15 +1,13 @@
 import Service from '@ember/service';
 import { isBlank, isPresent } from '@ember/utils';
-import { TrackedArray } from 'tracked-built-ins';
 import { Promise } from 'rsvp';
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-/* eslint-enable @typescript-eslint/no-unused-vars */
+import { scheduleOnce } from '@ember/runloop';
 
 export interface Section {
   name: string;
-  subsections: TrackedArray<Subsection>;
+  subsections: Subsection[];
 }
 
 interface Subsection {
@@ -22,7 +20,7 @@ export default class EmberFreestyleService extends Service {
   @tracked showCode = true;
   @tracked showApi = true;
 
-  @tracked menu: TrackedArray<Section> | null = null;
+  @tracked menu: Section[] = [];
   @tracked showMenu = true;
   @tracked allowRenderingAllSections = true;
 
@@ -125,27 +123,32 @@ export default class EmberFreestyleService extends Service {
 
   @action
   registerSection(sectionName: string, subsectionName = ''): void {
-    const menu: TrackedArray<Section> =
-      this.menu || new TrackedArray<Section>();
-    if (!menu.find((s) => s.name === sectionName)) {
-      menu.push({
+    this.menu;
+    if (!this.menu.find((s) => s.name === sectionName)) {
+      this.menu.push({
         name: sectionName,
-        subsections: new TrackedArray<Subsection>(),
+        subsections: [],
       });
     }
     if (isPresent(subsectionName)) {
-      const section = menu.find((s) => s.name === sectionName);
+      const section = this.menu.find((s) => s.name === sectionName);
       if (
         section &&
         !section.subsections.find((s) => s.name === subsectionName)
       ) {
         section.subsections.push({
           name: subsectionName,
         });
+        section.subsections = [...section.subsections];
       }
     }
-    this.menu = menu;
+    scheduleOnce('afterRender', this, this.notifyMenuChanged);
   }
+
+  notifyMenuChanged = () => {
+    // eslint-disable-next-line no-self-assign
+    this.menu = this.menu;
+  };
 }
 
 // DO NOT DELETE: this is how TypeScript knows how to look up your services.

addon/template-registry.ts

@@ -34,6 +34,7 @@ import type FreestyleUsageString from 'ember-freestyle/components/freestyle/usag
 
 // modifiers
 import type FreestyleHighlight from 'ember-freestyle/modifiers/freestyle-highlight';
+import EnsureFreestyleTheme from './modifiers/ensure-freestyle-theme';
 
 export default interface EmberFreestyleRegistry {
   // components
@@ -104,4 +105,5 @@ export default interface EmberFreestyleRegistry {
 
   // modifiers
   'freestyle-highlight': typeof FreestyleHighlight;
+  'ensure-freestyle-theme': typeof EnsureFreestyleTheme;
 }

app/modifiers/ensure-freestyle-theme.js

@@ -0,0 +1 @@
+export { default } from 'ember-freestyle/modifiers/ensure-freestyle-theme';