Merge pull request #522 from camerondubas/fix/doc-code-snippets

Fix code blocks not rendering on documentation site

Author: maxfierke

ember-cli-build.js

@@ -13,6 +13,10 @@ module.exports = function (defaults) {
     snippetPaths: ['tests/dummy/snippets'],
     snippetSearchPaths: ['app', 'tests/dummy/app', 'addon'],
 
+    'ember-prism': {
+      components: ['javascript', 'typescript', 'bash', 'markup'],
+    },
+
     emberCliFontAwesome: {
       useScss: true,
     },

package.json

@@ -58,12 +58,13 @@
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sass": "^10.0.1",
     "ember-cli-terser": "^4.0.2",
-    "ember-code-snippet": "^2.4.0",
+    "ember-code-snippet": "^3.0.0",
     "ember-concurrency-ts": "^0.3.1",
     "ember-fn-helper-polyfill": "^1.0.2",
     "ember-load-initializers": "^2.1.2",
     "ember-modifier": "^3.2.7",
     "ember-page-title": "^7.0.0",
+    "ember-prism": "^0.13.0",
     "ember-qunit": "^6.2.0",
     "ember-resolver": "^10.0.0",
     "ember-sinon-qunit": "^7.1.4",

tests/dummy/app/components/code-snippet/component.js

@@ -0,0 +1,20 @@
+import Component from '@ember/component';
+import { getCodeSnippet } from 'ember-code-snippet';
+import { computed } from '@ember/object';
+
+export default class CodeTemplateToggleComponent extends Component {
+  tagName = '';
+
+  @computed('name')
+  get snippet() {
+    return getCodeSnippet(this.name);
+  }
+
+  get language() {
+    if (this.snippet.language === 'handlebars') {
+      return 'markup';
+    }
+
+    return this.snippet.language;
+  }
+}

tests/dummy/app/components/code-snippet/template.hbs

@@ -0,0 +1 @@
+<CodeBlock @code={{this.snippet.source}} @language={{this.language}} />

tests/dummy/app/components/code-template-toggle/component.js

@@ -1,7 +1,6 @@
 import Component from '@ember/component';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
-import { cancel, schedule } from '@ember/runloop';
 
 export default class CodeTemplateToggleComponent extends Component {
   tagName = '';
@@ -10,40 +9,53 @@ export default class CodeTemplateToggleComponent extends Component {
   showCode = true;
   _toggleTimer = null;
 
+  maxHeight = 0;
+  resizeObserver;
+
   didInsertElement() {
     super.didInsertElement(...arguments);
-    this._toggleTimer = schedule('afterRender', null, () => {
-      const element = document.getElementById(this.id);
-
-      if (!element) {
-        return;
-      }
-
-      let sectionToggles = element.querySelectorAll(
-        '.code-template-toggle-section'
-      );
-      let maxHeight = Math.max.apply(
-        null,
-        [].map.call(sectionToggles, function (el) {
-          return el.offsetHeight;
-        })
-      );
-
-      let toggle = element.querySelector('.code-template-toggle');
+    const element = document.getElementById(this.id);
+    if (!element) {
+      return;
+    }
 
+    const resizeObserver = this._createResizeObserver((maxHeight) => {
+      const toggle = element.querySelector('.code-template-toggle');
       if (toggle) {
         toggle.style.height = `${maxHeight}px`;
       }
     });
+    this.set('resizeObserver', resizeObserver);
+
+    const sectionToggles = element.querySelectorAll(
+      '.code-template-toggle-section'
+    );
+
+    sectionToggles.forEach((sectionToggle) => {
+      resizeObserver.observe(sectionToggle);
+    });
   }
 
   willDestroyElement() {
     super.willDestroyElement(...arguments);
-    cancel(this._toggleTimer);
+    this.resizeObserver.disconnect();
   }
 
   @action
   toggle() {
     this.toggleProperty('showCode');
   }
+
+  _createResizeObserver(onMaxHeightChange) {
+    return new ResizeObserver((entries) => {
+      const maxHeight = entries
+        .map((entry) => entry.contentRect.height)
+        .reduce((a, b) => Math.max(a, b));
+
+      if (maxHeight > this.maxHeight) {
+        this.maxHeight = maxHeight;
+        onMaxHeightChange && onMaxHeightChange(maxHeight);
+      }
+    });
+  }
 }