update docs viewer (#1134)

Co-authored-by: Robert Wagner <[email protected]>

addon/components/api/x-import-path.hbs

@@ -1,4 +1,4 @@
-<div class="import-path docs-mb-6" data-test-import-path>
+<div class="import-path docs-mb-6" data-test-import-path ...attributes>
   <pre class="docs-md__code docs-whitespace-no-wrap">
     <span class="hljs-keyword">
       import

addon/components/api/x-meta-panel/header.hbs

@@ -1,3 +1,3 @@
-    <h4 class="docs-mb-2 docs-text-grey docs-font-bold docs-tracking-wide docs-uppercase docs-text-xxs">
+    <h4 class="docs-mb-2 docs-text-grey docs-font-bold docs-tracking-wide docs-uppercase docs-text-xxs" ...attributes>
       {{yield}}
     </h4>

addon/components/api/x-meta-panel/index.hbs

@@ -1,4 +1,4 @@
-    <div class="docs-px-6 docs-pt-3 docs-mt-4 docs-border docs-border-grey-light docs-rounded docs-text-xs">
+    <div class="docs-px-6 docs-pt-3 docs-mt-4 docs-border docs-border-grey-light docs-rounded docs-text-xs" ...attributes>
       {{yield (hash
         header=(component 'api/x-meta-panel/header')
       )}}

addon/components/api/x-module/index.hbs

@@ -6,4 +6,5 @@
     functions=@module.functions
     variables=@module.variables
   }}
+  ...attributes
 />

addon/components/api/x-section/index.hbs

@@ -1,4 +1,4 @@
-<div data-test-item class="docs-pb-8">
+<div data-test-item class="docs-pb-8" ...attributes>
   <h3
     id={{@item.name}}
     data-text={{@item.name}}

addon/components/api/x-toggles.hbs

@@ -1,4 +1,4 @@
-<ul class="docs-mb-6">
+<ul class="docs-mb-6" ...attributes>
   {{#each-in @toggles as |key toggle|}}
     {{#if (not-eq toggle undefined)}}
       <li class="docs-inline docs-ml-4">

addon/components/docs-demo/index.hbs

@@ -13,7 +13,7 @@
         docs-border-grey-darkest
       ">
         {{#each this.snippets as |snippet|}}
-          <button {{action "selectSnippet" snippet}}
+          <button {{on "click" (fn this.selectSnippet snippet)}}
             class="
               docs-mr-4 docs-text-xs docs-no-underline outline-none
               hover:docs-text-grey-lighter

addon/components/docs-demo/index.js

@@ -11,9 +11,9 @@ import { tracked } from '@glimmer/tracking';
   <DocsDemo as |demo|>
     <demo.example @name="docs-demo-basic.hbs">
       <p>I am a <strong>handlebars</strong> template!</p>
-      <p>The value is: {{val}}</p>
+      <p>The value is: {{this.val}}</p>
       <div>
-        {{input value=val}}
+        <Input @value={{this.val}}/>
       </div>
     </demo.example>
 

addon/components/docs-header/search-box/index.hbs

@@ -8,7 +8,7 @@
     }}
 
     {{!--
-      This is a dumb input - so why not use the {{input}} helper? Because apparently
+      This is a dumb input - so why not use the <Input/> helper? Because apparently
       it takes over enter and ctrl+n/p keys. We are using those for our own shortcuts
       so we stick with the dumb html element. Maybe there's a way to disable them
       and get the convenient two-way binding.

addon/components/docs-keyboard-shortcuts/index.hbs

@@ -5,6 +5,7 @@
     @wrapperClass="docs-fullscreen-modal docs-keyboard-shortcuts-modal modal-fade"
     @clickOutsideToClose={{true}}
     @onClose={{this.toggleKeyboardShortcuts}}
+    ...attributes
   >
     <div class="docs-fullscreen-modal__header">
       <h2 class="docs-fullscreen-modal__title">

addon/components/docs-viewer/index.hbs

@@ -1,8 +1,12 @@
-<div class="md:docs-flex docs-w-full">
-  {{yield (hash
-    nav=(component "docs-viewer/x-nav")
-    main=(component "docs-viewer/x-main" onReindex=(set this "pageIndex"))
-  )}}
+<div class="docs-viewer docs-flex docs-flex-1" ...attributes>
+  <div class="md:docs-flex docs-w-full">
+    {{yield
+      (hash
+        nav=(component "docs-viewer/x-nav")
+        main=(component "docs-viewer/x-main" onReindex=(set this "pageIndex"))
+      )
+    }}
 
-  <DocsViewer::XCurrentPageIndex @pageIndex={{this.pageIndex}} />
-</div>
+    <DocsViewer::XCurrentPageIndex @pageIndex={{this.pageIndex}} />
+  </div>
+</div>

addon/components/docs-viewer/index.js

@@ -1,27 +1,27 @@
 import { inject as service } from '@ember/service';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { keyResponder, onKey } from 'ember-keyboard';
-import { classNames } from '@ember-decorators/component';
 import { formElementHasFocus } from '../../keyboard-config';
 
 /**
   The main docs viewer component for EmberCLI AddonDocs. This component must be placed
 
 
   ```hbs
-  {{#docs-viewer as |viewer|}}
-    {{#viewer.nav as |nav|}}
-      {{nav.item 'Introduction' 'docs.index'}}
+  <DocsViewer as |viewer|>
+    <viewer.nav as |nav|>
+      <nav.item @label="Introduction" @route="docs.index"/>
 
-      {{#nav.subnav as |nav|}}
-        {{nav.item 'Subitem' 'docs.items.subitem'}}
-      {{/nav.subnav}}
-    {{/viewer.nav}}
+      <nav.subnav as |nav|>
+        <nav.item @label="Subitem" @route="docs.items.subitem"/>
+      </nav.subnav>
+    </viewer.nav>
 
-    {{#viewer.main}}
+    <viewer.main>
       {{outlet}}
-    {{/viewer.main}}
-  {{/docs-viewer}}
+    </viewer.main>
+  </DocsViewer>
   ```
 
   @class DocsViewer
@@ -30,25 +30,29 @@ import { formElementHasFocus } from '../../keyboard-config';
   @yield {Component} viewer.main
   @public
 */
-
-@classNames('docs-viewer docs-flex docs-flex-1')
 @keyResponder
 export default class DocsViewerComponent extends Component {
   @service docsRoutes;
   @service router;
 
-  willDestroyElement() {
-    super.willDestroyElement(...arguments);
+  @tracked pageIndex;
+
+  constructor() {
+    super(...arguments);
 
+    // for some reason the glimmer willDestroy hook was not
+    // being ran when switching to the sandbox app but the contructor was.
+    // If we're rendering a new docs-viewer, it's safe to assume we want
+    // to reset the doc routes
     this.docsRoutes.resetState();
   }
 
   @onKey('KeyJ')
   @onKey('ArrowRight')
   nextPage() {
     if (!formElementHasFocus()) {
-      if (this.get('docsRoutes.next')) {
-        const { route, model } = this.get('docsRoutes.next');
+      if (this.docsRoutes.next) {
+        const { route, model } = this.docsRoutes.next;
         this.router.transitionTo(route, model);
       }
     }
@@ -58,8 +62,8 @@ export default class DocsViewerComponent extends Component {
   @onKey('ArrowLeft')
   previousPage() {
     if (!formElementHasFocus()) {
-      if (this.get('docsRoutes.previous')) {
-        const { route, model } = this.get('docsRoutes.previous');
+      if (this.docsRoutes.previous) {
+        const { route, model } = this.docsRoutes.previous;
         this.router.transitionTo(route, model);
       }
     }

addon/components/docs-viewer/x-autogenerated-api-docs/index.hbs

@@ -1,18 +1,25 @@
 {{#if (gt @project.modules.length 0)}}
-  {{docs-viewer/x-section "API Reference" style="large"}}
+  <DocsViewer::XSection @label="API Reference" @style="large" />
 
   {{#each this.resolvedTypeSections as |section|}}
-    {{docs-viewer/x-section section.type}}
+    <DocsViewer::XSection @label={{section.type}} />
 
     {{#each section.items as |item|}}
-      {{docs-viewer/x-nav-item (break-on item.name "/") (concat @root ".api.item") item.path}}
+      <DocsViewer::XNavItem
+        @label={{break-on item.name "/"}}
+        @route={{concat @root ".api.item"}}
+        @model={{item.path}}
+      />
     {{/each}}
   {{/each}}
 
   {{#if this.moduleIndex}}
-    {{docs-viewer/x-section "Modules"}}
+    <DocsViewer::XSection @label="Modules" />
 
-    <DocsViewer::XAutogeneratedApiDocs::ModuleNav @node={{this.moduleIndex}} @root={{@root}} />
+    <DocsViewer::XAutogeneratedApiDocs::ModuleNav
+      @node={{this.moduleIndex}}
+      @root={{@root}}
+    />
   {{/if}}
 
-{{/if}}
+{{/if}}

addon/components/docs-viewer/x-autogenerated-api-docs/index.js

@@ -1,16 +1,12 @@
-import { tagName } from '@ember-decorators/component';
-import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { readOnly } from '@ember/object/computed';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { set as _set } from 'lodash';
 
-@tagName('')
 export default class XAutogeneratedApiDocs extends Component {
-  @service
-  store;
+  @service store;
 
-  @readOnly('project.navigationIndex')
+  @readOnly('args.project.navigationIndex')
   sections;
 
   /*
@@ -20,7 +16,6 @@ export default class XAutogeneratedApiDocs extends Component {
 
     These are the sections for the resolved types.
   */
-  @computed('sections')
   get resolvedTypeSections() {
     return this.sections.filter((section) => section.type !== 'modules');
   }
@@ -59,7 +54,6 @@ export default class XAutogeneratedApiDocs extends Component {
     };
     ```
   */
-  @computed('sections')
   get moduleIndex() {
     let modulesSection = this.sections.filter(
       (section) => section.type === 'modules'

addon/components/docs-viewer/x-autogenerated-api-docs/module-nav/index.hbs

@@ -1,20 +1,20 @@
-<DocsViewer::XNavList @class='docs-ml-4' as |subnav|>
-  <DocsViewer::XSection @style='subsection'>
-    {{this.node.name}}
+<DocsViewer::XNavList @class="docs-ml-4" ...attributes as |subnav|>
+  <DocsViewer::XSection @style="subsection">
+    {{@node.name}}
   </DocsViewer::XSection>
 
-  {{#each this.node.children as |child|}}
+  {{#each @node.children as |child|}}
     {{#if child.children}}
       <DocsViewer::XAutogeneratedApiDocs::ModuleNav
         @node={{child}}
         @root={{@root}}
       />
     {{else}}
-      {{subnav.item
-        child.name
-        (concat @root '.api.item')
-        (concat 'modules/' child.id)
-      }}
+      <subnav.item
+        @label={{child.name}}
+        @route={{concat @root ".api.item"}}
+        @model={{concat "modules/" child.id}}
+      />
     {{/if}}
   {{/each}}
 </DocsViewer::XNavList>

addon/components/docs-viewer/x-current-page-index/index.hbs

@@ -1,13 +1,13 @@
-<nav class="AddonDocs-DocsViewer-CurrentPageIndex docs-hidden xl:docs-block docs-flex-no-shrink docs-mr-auto" data-test-current-page-index>
+<nav class="AddonDocs-DocsViewer-CurrentPageIndex docs-hidden xl:docs-block docs-flex-no-shrink docs-mr-auto" data-test-current-page-index ...attributes>
   <div class="docs-sticky docs-top-0 docs-pt-4 docs-pb-8 docs-pr-8 docs-max-h-screen docs-overflow-y-scroll">
     <ul class="docs-border-l docs-border-grey-lighter docs-pl-6 docs-leading-normal">
-      {{#if this.pageIndex.length}}
+      {{#if @pageIndex.length}}
         <li class="docs-mt-12 docs-text-grey docs-font-bold docs-tracking-wide docs-uppercase docs-text-xxs">
           On This Page
         </li>
       {{/if}}
 
-      {{#each this.pageIndex as |item|}}
+      {{#each @pageIndex as |item|}}
         <li class="
           docs-leading-tight docs-tracking-tight
           {{if item.indent (concat "docs-ml-" item.indent)}}