Auto merge of #2069 - Turbo87:prism-modifier, r=locks

Simplify README rendering using a new `highlight-syntax` modifier

This PR implements a new `highlight-syntax` modifier based on https://github.com/ember-modifier/ember-modifier and the existing `ember-prism` addon. That modifier is then used to apply the Prism.js syntax highlighting to all code blocks in the README, making the `CrateReadme` component obsolete.

r? @locks

Author: bors

app/components/crate-readme.js

@@ -0,0 +1,10 @@
+/* global Prism */
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, _, { selector }) => {
+  let elements = selector ? element.querySelectorAll(selector) : [element];
+
+  for (let element of elements) {
+    Prism.highlightElement(element);
+  }
+});

app/modifiers/highlight-syntax.js

@@ -71,8 +71,8 @@
         {{/if}}
       </div>
       {{#if this.crate.readme}}
-        <section class="crate-readme" aria-label="Readme">
-          <CrateReadme @rendered={{this.crate.readme}} />
+        <section class="crate-readme" aria-label="Readme" {{highlight-syntax selector="pre > code"}}>
+          {{html-safe this.crate.readme}}
         </section>
       {{else}}
         {{#if this.crate.description}}

app/templates/components/crate-readme.hbs

@@ -61,6 +61,7 @@
     "ember-keyboard": "^5.0.0",
     "ember-load-initializers": "^2.1.1",
     "ember-maybe-import-regenerator": "^0.1.6",
+    "ember-modifier": "^1.0.2",
     "ember-moment": "^8.0.0",
     "ember-qunit": "^4.6.0",
     "ember-page-title": "^5.1.0",

app/templates/crate/version.hbs

@@ -0,0 +1,37 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Modifier | highlight-syntax', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('uses Prism.js to apply syntax highlighting', async function(assert) {
+    await render(hbs`
+      <pre class="language-rust" {{highlight-syntax}}>
+#[macro_use]
+extern crate bitflags;
+      </pre>
+    `);
+    assert.dom('.token').exists();
+    assert.dom('.keyword').exists({ count: 2 });
+  });
+
+  test('accepts a `selector` argument', async function(assert) {
+    await render(hbs`
+      <div {{highlight-syntax selector=".b"}}>
+        <pre class="language-rust a">
+  #[macro_use]
+  extern crate bitflags;
+        </pre>
+        <pre class="language-rust b">
+  #[macro_use]
+  extern crate bitflags;
+        </pre>
+      </div>
+    `);
+    assert.dom('.a .token').doesNotExist();
+    assert.dom('.b .token').exists();
+    assert.dom('.b .keyword').exists({ count: 2 });
+  });
+});