Upgrade ember-code-snippet to v3.0.0 (#436)

Author: josemarluedke

addon/components/docs-code-highlight/component.js

@@ -0,0 +1,39 @@
+import Component from '@ember/component';
+import layout from './template';
+import hljs from 'highlight.js/lib/highlight';
+
+// Installed languages
+import javascript from 'highlight.js/lib/languages/javascript';
+import css from 'highlight.js/lib/languages/css';
+import handlebars from 'highlight.js/lib/languages/handlebars';
+import htmlbars from 'highlight.js/lib/languages/htmlbars';
+import json from 'highlight.js/lib/languages/json';
+import xml from 'highlight.js/lib/languages/xml';
+import diff from 'highlight.js/lib/languages/diff';
+import shell from 'highlight.js/lib/languages/shell';
+import typescript from 'highlight.js/lib/languages/typescript';
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('js', javascript);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('handlebars', handlebars);
+hljs.registerLanguage('htmlbars', htmlbars);
+hljs.registerLanguage('hbs', htmlbars);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('diff', diff);
+hljs.registerLanguage('shell', shell);
+hljs.registerLanguage('sh', shell);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('ts', typescript);
+
+export default Component.extend({
+  tagName: 'pre',
+  classNameBindings: ['language'],
+  layout,
+  didInsertElement() {
+    this._super.apply(this, arguments);
+
+    hljs.highlightBlock(this.element);
+  }
+});

addon/components/docs-code-highlight/template.hbs

@@ -0,0 +1 @@
+{{yield}}

addon/components/docs-snippet/component.js

@@ -1,8 +1,5 @@
-import { computed } from '@ember/object';
 import Component from '@ember/component';
 import layout from './template';
-import config from 'ember-get-config';
-import require from 'require';
 
 /**
   A snippet component for demonstrating some code
@@ -56,37 +53,5 @@ export default Component.extend({
     @argument unindent
     @type Boolean
   */
-  unindent: false,
-
-  _unindent: function(src) {
-    if (!this.get('unindent')) {
-      return src;
-    }
-    var match, min, lines = src.split("\n").filter(l => l !== '');
-    for (var i = 0; i < lines.length; i++) {
-      match = /^[ \t]*/.exec(lines[i]);
-      if (match && (typeof min === 'undefined' || min > match[0].length)) {
-        min = match[0].length;
-      }
-    }
-    if (typeof min !== 'undefined' && min > 0) {
-      src = src.replace(new RegExp("^[ \t]{" + min + "}", 'gm'), "");
-    }
-    return src;
-  },
-
-  snippetText: computed('name', function(){
-    let name = this.get('name');
-    if (!/\..+/.test(name)) {
-      name += '.hbs';
-    }
-
-    let snippet = require(config.modulePrefix + "/snippets").default[name] || "";
-
-    return this._unindent(
-      snippet
-        .replace(/^(\s*\n)*/, '')
-        .replace(/\s*$/, '')
-    );
-  }),
+  unindent: true,
 });

addon/components/docs-snippet/template.hbs

@@ -3,29 +3,33 @@
     docs-bg-black docs-text-grey-lighter docs-text-xs
     docs-font-medium docs-py-2 docs-px-4 docs-rounded-t
     docs-border-b docs-border-grey-darkest
+    docs-subpixel-antialiased
   ">
     {{title}}
   </div>
 {{/if}}
 
 <div class="
-    docs-text-sm docs-px-2 docs-py-1 docs-bg-code-base docs-relative
+    docs-text-xs docs-px-2 docs-py-1 docs-bg-code-base
+    docs-relative docs-subpixel-antialiased
     {{if title "docs-rounded-b" "docs-rounded"}}
   "
   data-test-id={{name}}
 >
-  {{#if showCopy}}
-    {{#copy-button
-      clipboardText=snippetText
-      title="copy to clipboard"
-      class="
-        docs-absolute docs-top-0 docs-right-0 docs-bg-transparent hover:docs-bg-transparent
-        docs-border-none docs-opacity-50 hover:docs-opacity-100 docs-p-3 docs-text-white
-      "
-    }}
-      Copy
-    {{/copy-button}}
-  {{/if}}
+  {{#with (get-code-snippet name unindent=unindent) as |snippet|}}
+    {{#if showCopy}}
+      {{#copy-button
+        clipboardText=snippet.source
+        title="copy to clipboard"
+        class="
+          docs-absolute docs-top-0 docs-right-0 docs-bg-transparent hover:docs-bg-transparent
+          docs-border-none docs-opacity-50 hover:docs-opacity-100 docs-p-3 docs-text-white
+        "
+      }}
+        Copy
+      {{/copy-button}}
+    {{/if}}
 
-  {{code-snippet name=name language=language}}
+    <DocsCodeHighlight @language={{language}}>{{snippet.source}}</DocsCodeHighlight>
+  {{/with}}
 </div>

addon/styles/components/_docs-md.scss

@@ -50,7 +50,7 @@
 
 /* Applied to fenced code in compiled markdown */
 .docs-md__code {
-  @apply docs-my-8 docs-px-4 docs-py-3 docs-overflow-x-scroll docs-text-sm docs-rounded;
+  @apply docs-my-8 docs-px-4 docs-py-3 docs-overflow-x-scroll docs-text-xs docs-rounded docs-subpixel-antialiased;
 
   /* These values are copied from atom-one-dark theme, imported from highlight.js */
   background: #282c34;

index.js

@@ -132,8 +132,6 @@ module.exports = {
       begin: /(?:{{#|<)(?:DocsSnippet|docs-snippet|demo\.example)\s@?name=['"](\S*)['"]/,
       end: /(?:{{|<)\/(?:DocsSnippet|docs-snippet|demo\.example)(?:}}|>)/,
     }, includer.options.snippetRegexes);
-    includer.options.includehighlightJS = false;
-    includer.options.includeHighlightStyle = false;
 
     let snippetExtensions = includer.options.snippetExtensions;
 
@@ -226,7 +224,6 @@ module.exports = {
   treeForVendor(vendor) {
     return new MergeTrees([
       vendor,
-      // this._highlightJSTree(),
       this._lunrTree()
     ].filter(Boolean));
   },
@@ -285,13 +282,6 @@ module.exports = {
     return new Funnel(path.dirname(require.resolve('lunr/package.json')), { destDir: 'lunr' });
   },
 
-  _highlightJSTree() {
-    return new Funnel(path.dirname(require.resolve('highlightjs/package.json')), { // eslint-disable-line node/no-missing-require
-      srcDir: 'styles',
-      destDir: 'highlightjs-styles'
-    });
-  },
-
   _readUserConfig() {
     if (!this._userConfig) {
       const readConfig = require('./lib/utils/read-config');

package.json

@@ -48,7 +48,7 @@
     "ember-cli-sass": "10.0.1",
     "ember-cli-string-helpers": "^4.0.5",
     "ember-cli-string-utils": "^1.1.0",
-    "ember-code-snippet": "^2.4.1",
+    "ember-code-snippet": "^3.0.0",
     "ember-component-css": "^0.7.4",
     "ember-composable-helpers": "^2.3.1",
     "ember-concurrency": "^0.9.0 || ^0.10.0 || ^1.0.0",

yarn.lock

@@ -3011,7 +3011,7 @@ broccoli-funnel@^2.0.0, broccoli-funnel@^2.0.1, broccoli-funnel@^2.0.2:
     symlink-or-copy "^1.0.0"
     walk-sync "^0.3.1"
 
-broccoli-kitchen-sink-helpers@^0.2.0, broccoli-kitchen-sink-helpers@^0.2.5:
+broccoli-kitchen-sink-helpers@^0.2.5:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/broccoli-kitchen-sink-helpers/-/broccoli-kitchen-sink-helpers-0.2.9.tgz#a5e0986ed8d76fb5984b68c3f0450d3a96e36ecc"
   integrity sha1-peCYbtjXb7WYS2jD8EUNOpbjbsw=
@@ -3306,15 +3306,6 @@ broccoli-sri-hash@^2.1.0:
     sri-toolbox "^0.2.0"
     symlink-or-copy "^1.0.1"
 
-broccoli-static-compiler@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/broccoli-static-compiler/-/broccoli-static-compiler-0.1.4.tgz#713d18f08eb3131530575a0c5ad2951bba10af41"
-  integrity sha1-cT0Y8I6zExUwV1oMWtKVG7oQr0E=
-  dependencies:
-    broccoli-kitchen-sink-helpers "^0.2.0"
-    broccoli-writer "^0.1.1"
-    mkdirp "^0.3.5"
-
 broccoli-stew@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/broccoli-stew/-/broccoli-stew-1.6.0.tgz#01f6d92806ed6679ddbe48d405066a0e164dfbef"
@@ -3433,14 +3424,6 @@ broccoli-uglify-sourcemap@^3.1.0:
     walk-sync "^1.1.3"
     workerpool "^5.0.1"
 
-broccoli-writer@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/broccoli-writer/-/broccoli-writer-0.1.1.tgz#d4d71aa8f2afbc67a3866b91a2da79084b96ab2d"
-  integrity sha1-1NcaqPKvvGejhmuRotp5CEuWqy0=
-  dependencies:
-    quick-temp "^0.1.0"
-    rsvp "^3.0.6"
-
 broccoli@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/broccoli/-/broccoli-3.2.0.tgz#6b5a89b8d6d0c733d39aa23ac5b43d85f56fafab"
@@ -5622,15 +5605,16 @@ ember-cli@~3.13.1:
     watch-detector "^1.0.0"
     yam "^1.0.0"
 
-ember-code-snippet@^2.4.1:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/ember-code-snippet/-/ember-code-snippet-2.4.2.tgz#17a125c5afc9b134caf7ab8df3d7f68c09019669"
-  integrity sha512-JO2HKVsL2tUAGj9atJ7Q3bS9DK2ZijdhXDUsu6iJPS2PBvWGKKktHq572sl5cPc4tj+Girgrq3zp/5Wy95Xmsg==
+ember-code-snippet@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ember-code-snippet/-/ember-code-snippet-3.0.0.tgz#5e3108a68cc76740355cbbca840656d96c6b7ba1"
+  integrity sha512-pvIpGPLma7m6WQ5+uOjwkzozIzRAqlUSQk9TMCrQQ/AeEGWtqTJvZyAtH9LoarPtudHtWCZkUqJXIqKsjIqAbw==
   dependencies:
     broccoli-flatiron "^0.1.3"
     broccoli-merge-trees "^1.0.0"
-    broccoli-static-compiler "^0.1.4"
-    broccoli-writer "^0.1.1"
+    broccoli-plugin "^1.3.1"
+    ember-cli-babel "^7.7.3"
+    ember-cli-htmlbars "^3.0.1"
     es6-promise "^1.0.0"
     glob "^7.1.3"
 
@@ -10571,7 +10555,7 @@ quibble@^0.5.6:
     lodash "^4.17.14"
     resolve "^1.11.1"
 
-quick-temp@^0.1.0, quick-temp@^0.1.2, quick-temp@^0.1.3, quick-temp@^0.1.5, quick-temp@^0.1.8:
+quick-temp@^0.1.2, quick-temp@^0.1.3, quick-temp@^0.1.5, quick-temp@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/quick-temp/-/quick-temp-0.1.8.tgz#bab02a242ab8fb0dd758a3c9776b32f9a5d94408"
   integrity sha1-urAqJCq4+w3XWKPJd2sy+aXZRAg=