diff --git a/addon/components/api/x-import-path.hbs b/addon/components/api/x-import-path.hbs index 2058d03da..ba7670b0f 100644 --- a/addon/components/api/x-import-path.hbs +++ b/addon/components/api/x-import-path.hbs @@ -1,4 +1,4 @@ -
+
     
       import
diff --git a/addon/components/api/x-meta-panel/header.hbs b/addon/components/api/x-meta-panel/header.hbs
index c82e7ec39..96200d426 100644
--- a/addon/components/api/x-meta-panel/header.hbs
+++ b/addon/components/api/x-meta-panel/header.hbs
@@ -1,3 +1,3 @@
-    

+    

       {{yield}}
     

\ No newline at end of file
diff --git a/addon/components/api/x-meta-panel/index.hbs b/addon/components/api/x-meta-panel/index.hbs
index b169da086..0d76c6ee3 100644
--- a/addon/components/api/x-meta-panel/index.hbs
+++ b/addon/components/api/x-meta-panel/index.hbs
@@ -1,4 +1,4 @@
-    

+    

       {{yield (hash
         header=(component 'api/x-meta-panel/header')
       )}}
diff --git a/addon/components/api/x-module/index.hbs b/addon/components/api/x-module/index.hbs
index 3b369f0c0..aae66c261 100644
--- a/addon/components/api/x-module/index.hbs
+++ b/addon/components/api/x-module/index.hbs
@@ -6,4 +6,5 @@
     functions=@module.functions
     variables=@module.variables
   }}
+  ...attributes
 />
\ No newline at end of file
diff --git a/addon/components/api/x-section/index.hbs b/addon/components/api/x-section/index.hbs
index 5fc30683b..94689eba8 100644
--- a/addon/components/api/x-section/index.hbs
+++ b/addon/components/api/x-section/index.hbs
@@ -1,4 +1,4 @@
-

+

   

+
    
   {{#each-in @toggles as |key toggle|}}
     {{#if (not-eq toggle undefined)}}
       
  • 
diff --git a/addon/components/docs-demo/index.hbs b/addon/components/docs-demo/index.hbs
index 7e4f1d006..8b2c9c779 100644
--- a/addon/components/docs-demo/index.hbs
+++ b/addon/components/docs-demo/index.hbs
@@ -13,7 +13,7 @@
         docs-border-grey-darkest
       ">
         {{#each this.snippets as |snippet|}}
-          
diff --git a/addon/components/docs-viewer/x-nav/index.js b/addon/components/docs-viewer/x-nav/index.js
index 3bbd9a898..fc962a68f 100644
--- a/addon/components/docs-viewer/x-nav/index.js
+++ b/addon/components/docs-viewer/x-nav/index.js
@@ -1,38 +1,35 @@
-import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { localCopy } from 'tracked-toolbox';
 import config from 'ember-get-config';
 import { classify } from '@ember/string';
 import { addonLogo } from 'ember-cli-addon-docs/utils/computed';
 
 const projectName = config['ember-cli-addon-docs'].projectName;
 
-export default Component.extend({
-  tagName: '',
+export default class XNav extends Component {
+  @localCopy('args.root', 'docs')
+  root;
 
-  root: 'docs',
+  @service store;
+  @service media;
 
-  store: service(),
-  media: service(),
+  @tracked isShowingMenu;
 
-  addonLogo: addonLogo(projectName),
+  addonLogo = addonLogo(projectName);
 
-  addonTitle: computed('addonLogo', function () {
+  get addonTitle() {
     let logo = this.addonLogo;
 
     return classify(projectName.replace(`${logo}-`, ''));
-  }),
-
-  /*
-    This is overwritten for the Sandbox.
-  */
-  project: computed({
-    get() {
-      return this.store.peekRecord('project', projectName);
-    },
-
-    set(key, val) {
-      return val;
-    },
-  }),
-});
+  }
+
+  get project() {
+    if (this.args.project) {
+      return this.args.project;
+    }
+
+    return this.store.peekRecord('project', projectName);
+  }
+}
diff --git a/addon/components/docs-viewer/x-section/index.hbs b/addon/components/docs-viewer/x-section/index.hbs
index fa2340e8e..f41948e6a 100644
--- a/addon/components/docs-viewer/x-section/index.hbs
+++ b/addon/components/docs-viewer/x-section/index.hbs
@@ -1,8 +1,8 @@
 
  • 
+  {{if (eq this.style "subsection") "docs-mt-2 docs-text-sm"}}"
+  ...attributes>
   {{#if (has-block)}}
     {{yield}}
   {{else}}
diff --git a/addon/components/docs-viewer/x-section/index.js b/addon/components/docs-viewer/x-section/index.js
index bb250f8f0..30b581918 100644
--- a/addon/components/docs-viewer/x-section/index.js
+++ b/addon/components/docs-viewer/x-section/index.js
@@ -1,8 +1,7 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { localCopy } from 'tracked-toolbox';
 
-export default Component.extend({
-  tagName: '',
-  style: 'regular',
-}).reopenClass({
-  positionalParams: ['label'],
-});
+export default class XSection extends Component {
+  @localCopy('args.style', 'regular')
+  style;
+}
diff --git a/addon/services/docs-routes.js b/addon/services/docs-routes.js
index e11083373..e1892c9e0 100644
--- a/addon/services/docs-routes.js
+++ b/addon/services/docs-routes.js
@@ -2,39 +2,38 @@ import { A } from '@ember/array';
 import Service, { inject as service } from '@ember/service';
 import { assert } from '@ember/debug';
 import { tracked } from '@glimmer/tracking';
+import { cached } from 'tracked-toolbox';
 
 export default class DocsRoutesService extends Service {
   @service('-routing') router;
 
-  @tracked items;
-
-  constructor() {
-    super(...arguments);
-    this.resetState();
-  }
+  @tracked items = A();
 
   resetState() {
     this.items = A();
   }
 
   // Each routeParam is [ routeName, model ] where model is optional
+  @cached
   get routes() {
     return this.items.map((item) => {
-      let routeParams = [item.route];
-      if (item.model) {
-        routeParams.push(item.model);
+      let routeParams = [item.args.route];
+      if (item.args.model) {
+        routeParams.push(item.args.model);
       }
 
       return routeParams;
     });
   }
 
+  @cached
   get routeUrls() {
     return this.routes.map(([routeName, model]) => {
       return this.router.generateURL(routeName, model ? [model] : []);
     });
   }
 
+  @cached
   get currentRouteIndex() {
     if (this.routeUrls.length) {
       let router = this.router.router;
@@ -60,6 +59,7 @@ export default class DocsRoutesService extends Service {
     return null;
   }
 
+  @cached
   get next() {
     let currentIndex = this.currentRouteIndex;
 
@@ -68,15 +68,16 @@ export default class DocsRoutesService extends Service {
       let route = this.items.objectAt(nextRouteIndex);
 
       return {
-        route: route.route,
-        models: route.model ? [route.model] : [],
-        label: route.label,
+        route: route.args.route,
+        models: route.args.model ? [route.args.model] : [],
+        label: route.args.label,
       };
     }
 
     return null;
   }
 
+  @cached
   get previous() {
     let currentIndex = this.currentRouteIndex;
 
@@ -85,9 +86,9 @@ export default class DocsRoutesService extends Service {
       let route = this.items.objectAt(previousRouteIndex);
 
       return {
-        route: route.route,
-        models: route.model ? [route.model] : [],
-        label: route.label,
+        route: route.args.route,
+        models: route.args.model ? [route.args.model] : [],
+        label: route.args.label,
       };
     }
 
diff --git a/blueprints/docs-page/index.js b/blueprints/docs-page/index.js
index c91328a1f..09ec07ad3 100644
--- a/blueprints/docs-page/index.js
+++ b/blueprints/docs-page/index.js
@@ -105,7 +105,9 @@ function updateDocsTemplate(options) {
         '',
         closingViewerNavTag.search(/\S/) * 2,
         ' '
-      )}{{nav.item "${dedasherize(routeName)}" "docs.${routeName}"}}`
+      )}`
     );
 
     fs.writeFileSync(docsTemplatePath, templateLines.join('\n'));
diff --git a/sandbox/app/components/simple-list/component.js b/sandbox/app/components/simple-list/component.js
index 08ae30782..db01754f4 100644
--- a/sandbox/app/components/simple-list/component.js
+++ b/sandbox/app/components/simple-list/component.js
@@ -8,11 +8,11 @@ import Component from '@glimmer/component';
   To use it, you could enter the following in your template:
 
   ```handlebars
-  {{#simple-list items=(arr 1 2 3) as |item|}}
-    {{#item as |value|}}
+  
+    
       {{value}}
-    {{/item}}
-  {{/simple-list}}
+    
+  
   ```
 
   @class SimpleList
diff --git a/sandbox/app/components/simple-list/item/component.js b/sandbox/app/components/simple-list/item/component.js
index 9a875eb20..f25028139 100644
--- a/sandbox/app/components/simple-list/item/component.js
+++ b/sandbox/app/components/simple-list/item/component.js
@@ -8,7 +8,7 @@ import Component from '@glimmer/component';
   To use it, you could enter the following in your template:
 
   ```handlebars
-    {{simple-list/item value=1}}
+    
   ```
 
   @class SimpleListItem
diff --git a/sandbox/app/components/yuidoc-component.js b/sandbox/app/components/yuidoc-component.js
index 7104d93ab..32f1114f8 100644
--- a/sandbox/app/components/yuidoc-component.js
+++ b/sandbox/app/components/yuidoc-component.js
@@ -9,7 +9,7 @@ import Component from '@glimmer/component';
   To use it, you could enter the following in your template:
 
   ```handlebars
-  {{yuidoc-component foo='bar'}}
+  {{yuidoc-component foo="bar"}}
   ```
 
   @class YUIDocComponent
diff --git a/test-apps/new-addon/tests/dummy/app/templates/docs.hbs b/test-apps/new-addon/tests/dummy/app/templates/docs.hbs
index 78b564099..4c3267df8 100644
--- a/test-apps/new-addon/tests/dummy/app/templates/docs.hbs
+++ b/test-apps/new-addon/tests/dummy/app/templates/docs.hbs
@@ -1,10 +1,10 @@
-{{#docs-viewer as |viewer|}}
-  {{#viewer.nav as |nav|}}
-    {{nav.section "Introduction"}}
-    {{nav.item "Overview" "docs.index"}}
-  {{/viewer.nav}}
+
+  
+    
+    
+  
 
-  {{#viewer.main}}
+  
     {{outlet}}
-  {{/viewer.main}}
-{{/docs-viewer}}
+  
+
\ No newline at end of file
diff --git a/tests-node/fixtures/blueprints/docs-subnav.hbs b/tests-node/fixtures/blueprints/docs-subnav.hbs
index ea8975bec..799fcb91f 100644
--- a/tests-node/fixtures/blueprints/docs-subnav.hbs
+++ b/tests-node/fixtures/blueprints/docs-subnav.hbs
@@ -1,16 +1,16 @@
 
 
-{{#docs-viewer as |viewer|}}
-  {{#viewer.nav as |nav|}}
-    {{nav.item "Introduction" "docs.index"}}
-    {{nav.item "Usage" "docs.usage"}}
+
+  
+    
+    
 
-    {{#nav.subnav as |nav|}}
-      {{nav.item "Subitem" "docs.items.subitem"}}
-    {{/nav.subnav}}
-  {{/viewer.nav}}
+    
+      
+    
+  
 
-  {{#viewer.main}}
+  
     {{outlet}}
-  {{/viewer.main}}
-{{/docs-viewer}}
\ No newline at end of file
+  
+
\ No newline at end of file
diff --git a/tests-node/fixtures/blueprints/docs.hbs b/tests-node/fixtures/blueprints/docs.hbs
index b1bcb7e0f..4bc0f15a5 100644
--- a/tests-node/fixtures/blueprints/docs.hbs
+++ b/tests-node/fixtures/blueprints/docs.hbs
@@ -1,12 +1,12 @@
 
 
-{{#docs-viewer as |viewer|}}
-  {{#viewer.nav as |nav|}}
-    {{nav.item "Introduction" "docs.index"}}
-    {{nav.item "Usage" "docs.usage"}}
-  {{/viewer.nav}}
+
+  
+    
+    
+  
 
-  {{#viewer.main}}
+  
     {{outlet}}
-  {{/viewer.main}}
-{{/docs-viewer}}
\ No newline at end of file
+  
+
\ No newline at end of file
diff --git a/tests-node/unit/blueprints/docs-page-test.js b/tests-node/unit/blueprints/docs-page-test.js
index cd1eee257..9ef5dc754 100644
--- a/tests-node/unit/blueprints/docs-page-test.js
+++ b/tests-node/unit/blueprints/docs-page-test.js
@@ -50,7 +50,9 @@ describe('Blueprints | non-pods docs page test', function () {
 
           expect(
             file('tests/dummy/app/templates/docs.hbs')
-          ).to.exist.to.contain('{{nav.item "Foo bar" "docs.foo-bar"}}');
+          ).to.exist.to.contain(
+            ''
+          );
         });
       });
   });
@@ -75,7 +77,9 @@ describe('Blueprints | non-pods docs page test', function () {
 
           expect(
             file('tests/dummy/app/templates/docs.hbs')
-          ).to.exist.to.contain('{{nav.item "Foo bar" "docs.foo-bar"}}');
+          ).to.exist.to.contain(
+            ''
+          );
         });
       });
   });
diff --git a/tests/dummy/app/pods/sandbox/template.hbs b/tests/dummy/app/pods/sandbox/template.hbs
index fb6f9e10d..6a785981b 100644
--- a/tests/dummy/app/pods/sandbox/template.hbs
+++ b/tests/dummy/app/pods/sandbox/template.hbs
@@ -1,13 +1,13 @@
-{{#docs-viewer as |viewer|}}
-  {{#viewer.nav project=this.model root="sandbox" as |nav|}}
-    {{nav.section "The Sandbox"}}
-    {{nav.item "Welcome" "sandbox.index"}}
-    {{nav.item "One" "sandbox.docs.one"}}
-    {{nav.item "Two" "sandbox.docs.two"}}
-  {{/viewer.nav}}
+
+  
+    
+    
+    
+    
+  
 
-  {{#viewer.main}}
+  
     {{outlet}}
-  {{/viewer.main}}
+  
 
-{{/docs-viewer}}
+
\ No newline at end of file
diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js
index 8dca142f6..c82e3f7f9 100644
--- a/tests/dummy/app/router.js
+++ b/tests/dummy/app/router.js
@@ -4,10 +4,10 @@ import AddonDocsRouter, {
 } from 'ember-cli-addon-docs/router';
 import config from 'dummy/config/environment';
 
-const Router = AddonDocsRouter.extend({
-  location: config.locationType,
-  rootURL: config.rootURL,
-});
+export default class Router extends AddonDocsRouter {
+  location = config.locationType;
+  rootURL = config.rootURL;
+}
 
 Router.map(function () {
   docsRoute(this, function () {
@@ -41,5 +41,3 @@ Router.map(function () {
 
   this.route('not-found', { path: '/*path' });
 });
-
-export default Router;
diff --git a/tests/dummy/app/templates/docs.hbs b/tests/dummy/app/templates/docs.hbs
index f090dbce3..0eb943794 100644
--- a/tests/dummy/app/templates/docs.hbs
+++ b/tests/dummy/app/templates/docs.hbs
@@ -1,28 +1,28 @@
 {{! BEGIN-SNIPPET docs-viewer.hbs }}
-{{#docs-viewer as |viewer|}}
-  {{#viewer.nav as |nav|}}
-    {{nav.section "Introduction"}}
-    {{nav.item "What is AddonDocs?" "docs.index"}}
-    {{nav.item "Usage" "docs.usage"}}
-    {{nav.item "Quickstart" "docs.quickstart"}}
-    {{nav.item "Patterns" "docs.patterns"}}
-    {{nav.item "Build options" "docs.build-options"}}
-    {{nav.item "Deploying" "docs.deploying"}}
-    {{nav.item "Standalone Apps" "docs.standalone-apps"}}
-    {{nav.item "Upgrade to v5" "docs.upgrade-to-5"}}
+
+  
+    
+    
+    
+    
+    
+    
+    
+    
+    
 
-    {{nav.section "Components"}}
-    {{nav.item "Header" "docs.components.docs-header"}}
-    {{nav.item "Hero" "docs.components.docs-hero"}}
-    {{nav.item "Viewer" "docs.components.docs-viewer"}}
-    {{nav.item "Snippet" "docs.components.docs-snippet"}}
-    {{nav.item "Demo" "docs.components.docs-demo"}}
-    {{nav.item "Logo" "docs.components.docs-logo"}}
-  {{/viewer.nav}}
+    
+    
+    
+    
+    
+    
+    
+  
 
-  {{#viewer.main}}
+  
     {{outlet}}
-  {{/viewer.main}}
+  
 
-{{/docs-viewer}}
+
 {{! END-SNIPPET }}
\ No newline at end of file
diff --git a/tests/dummy/app/templates/docs/components/docs-demo.md b/tests/dummy/app/templates/docs/components/docs-demo.md
index 37d377089..3f37e48c0 100644
--- a/tests/dummy/app/templates/docs/components/docs-demo.md
+++ b/tests/dummy/app/templates/docs/components/docs-demo.md
@@ -21,7 +21,7 @@ Let's look at a basic example:
     
    I am a handlebars template!
    
     
    The value is: {{this.val}}
    
     
    
-      {{input value=this.val class="docs-border"}}
+      
     
    
   
 
diff --git a/tests/dummy/app/templates/docs/upgrade-to-5.md b/tests/dummy/app/templates/docs/upgrade-to-5.md
index e76c6bd5d..5e7f26830 100644
--- a/tests/dummy/app/templates/docs/upgrade-to-5.md
+++ b/tests/dummy/app/templates/docs/upgrade-to-5.md
@@ -44,9 +44,9 @@ Example:
     {{#docs-demo as |demo|}}
       {{#demo.example name="docs-demo-basic.hbs"}}
         
    I am a handlebars template!
    
-        
    The value is: {{val}}
    
+        
    The value is: {{this.val}}
    
         
    
-          {{input value=val class="docs-border"}}
+          
         
    
       {{/demo.example}}
 
@@ -59,9 +59,9 @@ Example:
     
       
         
    I am a handlebars template!
    
-        
    The value is: {{val}}
    
+        
    The value is: {{this.val}}
    
         
    
-          {{input value=val class="docs-border"}}
+          
         
    
           
 
@@ -123,7 +123,7 @@ Example:
 
 #### Actions:
 1. Use angle bracket invocation syntax
-2. Replace the `{{docs-link}}` positional argument with named `@route` and/or `@model` argument
+2. Replace the `{{docs-link}}` positional arguments with named `@route` and/or `@model` arguments
 3. blockless usage is *not* supported
 
 Example:
@@ -138,4 +138,51 @@ Example:
     
       go to post
     
+
+
+### Viewer
+
+`` is now a glimmer component.
+
+#### Actions:
+1. Use angle bracket invocation syntax on the component and all its yielded components
+2. Replace the `{{nav.item}}` positional arguments with named `@label`, `@route` and/or `@model` arguments
+3. Replace the `{{nav.section}}` positional argument with named `@label` argument
+
+Example:
+
+
+
+    {{#docs-viewer as |viewer|}}
+      {{#viewer.nav as |nav|}}
+        {{nav.item "Introduction" "docs.index"}}
+        {{nav.item "Usage" "docs.usage"}}
+
+        {{#nav.subnav as |nav|}}
+          {{nav.item "Subitem" "docs.items.subitem"}}
+        {{/nav.subnav}}
+      {{/viewer.nav}}
+
+      {{#viewer.main}}
+        {{outlet}}
+      {{/viewer.main}}
+    {{/docs-viewer}}
+
+
+
+
+    
+      
+        
+        
+
+        
+          
+        
+      
+
+      
+        {{outlet}}
+      
+    
 
\ No newline at end of file