convert article component to class

Author: jaredgalanis

.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   root: true,
+  parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module'

app/components/deprecation-article.js

@@ -1,19 +1,24 @@
-import Component from '@ember/component';
-import { computed } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { computed, get } from '@ember/object';
 import { inject as service } from '@ember/service';
-import $ from 'jquery';
-
-export default Component.extend({
-  prism: service(),
-  renderIdOrUntil: true,
-  idForTitle: computed('model.title', function() {
-    return `toc_${this.get('model.title')}`;
-  }),
-  idForUntil: computed('model.until', function() {
-    return `toc_until-${this.get('model.until')}`;
-  }),
-
-  didRender() {
+
+export default class DeprecationArticle extends Component {
+  @service prism;
+
+  @tracked renderIdOrUntil = true;
+
+  @computed('model.title')
+  get idForTitle() {
+    return `toc_${get(this, 'model.title')}`;
+  }
+
+  @computed('model.until')
+  get idForUntil() {
+    return `toc_until-${get(this, 'model.until')}`;
+  }
+
+  setupCodeSnippets() {
     let nodeList = document.querySelectorAll('pre:not(.no-line-numbers) > code');
 
     if (nodeList) {
@@ -54,12 +59,9 @@ export default Component.extend({
         }
         wrapperDiv.style.position = 'relative';
 
-        // code.parentNode.classList.add(ext);
         code.parentNode.parentNode.appendChild(wrapperDiv);
         wrapperDiv.appendChild(code.parentNode);
 
-        // this.$(code.parentNode).wrap(`<div class="filename ${ext}" style="position: relative;"></div>`);
-
         if (filename) {
           let span = document.createElement('span');
           span.innerHTML = filename;
@@ -71,12 +73,14 @@ export default Component.extend({
       });
     }
 
-    this.$(".anchorable-toc").each(function () {
+    document.querySelectorAll(".anchorable-toc").forEach(function (anchorable) {
       let currentToc = $(this);
 
+      let link = document.createElement('a');
       currentToc.wrap(`<a class="bg-none toc-anchor" href="#${currentToc.attr('id')}"></a>`)
+
     })
 
     this.prism.highlight();
   }
-});
+}

app/templates/components/deprecation-article.hbs

@@ -1,5 +1,5 @@
-<div class="padding-vertical-small bg-light-muted rounded-sm">
-  <h3 class="anchorable-toc" id="{{id-for-deprecation model.id}}">{{model.title}}</h3>
+<div class="padding-vertical-small bg-light-muted rounded-sm" {{did-insert this.setupCodeSnippets}}>
+  <h3 class="anchorable-toc" id="{{id-for-deprecation this.args.model.id}}">{{this.args.model.title}}</h3>
   <p class="em">
     {{#if renderIdOrUntil}}
       <div><span class="bold">until: </span>{{model.until}}</div>

package.json

@@ -21,6 +21,7 @@
   "devDependencies": {
     "@ember/jquery": "^1.1.0",
     "@ember/optional-features": "^1.3.0",
+    "@ember/render-modifiers": "^1.0.2",
     "@sinonjs/fake-timers": "^6.0.1",
     "algoliasearch": "^3.35.1",
     "broccoli-asset-rev": "^3.0.0",