Use ember-ref-bucket, bump Ember and deps (#328)

* Switch to ember-ref-bucket

* ember-cli 3.27, fix refs

* Update code-inline.js

* Run embroider-safe, update ember-auto-import, yarn upgrade

* Try without transform

* Try to fix ember-ref-bucket

* Use functional plugin

* Require canary and embroider

* Add ember-hbs-minifier

* Remove ember-hbs-minifier

.eslintignore

@@ -13,6 +13,8 @@
 # misc
 /coverage/
 !.*
+.*/
+.eslintcache
 
 # ember-try
 /.node_modules.ember-try/

.eslintrc.js

@@ -7,18 +7,17 @@ module.exports = {
     ecmaVersion: 2018,
     sourceType: 'module',
     ecmaFeatures: {
-      legacyDecorators: true
-    }
+      legacyDecorators: true,
+    },
   },
-  plugins: [
-    'ember'
-  ],
+  plugins: ['ember'],
   extends: [
     'eslint:recommended',
-    'plugin:ember/recommended'
+    'plugin:ember/recommended',
+    'plugin:prettier/recommended',
   ],
   env: {
-    browser: true
+    browser: true,
   },
   rules: {},
   overrides: [
@@ -33,23 +32,28 @@ module.exports = {
         'testem.js',
         'blueprints/*/index.js',
         'config/**/*.js',
-        'tests/dummy/config/**/*.js'
+        'tests/dummy/config/**/*.js',
       ],
       excludedFiles: [
         'addon/**',
         'addon-test-support/**',
         'app/**',
-        'tests/dummy/app/**'
+        'tests/dummy/app/**',
       ],
       parserOptions: {
-        sourceType: 'script'
+        sourceType: 'script',
       },
       env: {
         browser: false,
-        node: true
+        node: true,
       },
       plugins: ['node'],
-      extends: ['plugin:node/recommended']
-    }
-  ]
+      extends: ['plugin:node/recommended'],
+    },
+    {
+      // Test files:
+      files: ['tests/**/*-test.{js,ts}'],
+      extends: ['plugin:qunit/recommended'],
+    },
+  ],
 };

.github/workflows/main.yml

@@ -44,19 +44,18 @@ jobs:
       matrix:
         allow-failure: [false]
         ember-try-scenario:
-          - ember-lts-3.16
           - ember-lts-3.20
+          - ember-lts-3.24
           - ember-release
           - ember-beta
+          - ember-canary
           - ember-default-with-jquery
           - ember-classic
         include:
-          - ember-try-scenario: ember-canary
-            allow-failure: true
-          - ember-try-scenario: embroider
+          - ember-try-scenario: embroider-safe
             allow-failure: true
           - ember-try-scenario: embroider-optimized
-            allow-failure: true
+            allow-failure: true  
 
     steps:
       - uses: actions/checkout@v2

.gitignore

@@ -12,6 +12,7 @@
 /.env*
 /.pnp*
 /.sass-cache
+/.eslintcache
 /connect.lock
 /coverage/
 /libpeerconnection.log

.npmignore

@@ -10,10 +10,13 @@
 /.editorconfig
 /.ember-cli
 /.env*
+/.eslintcache
 /.eslintignore
 /.eslintrc.js
 /.git/
 /.gitignore
+/.prettierignore
+/.prettierrc.js
 /.template-lintrc.js
 /.travis.yml
 /.watchmanconfig
@@ -23,6 +26,7 @@
 /ember-cli-build.js
 /testem.js
 /tests/
+/yarn-error.log
 /yarn.lock
 .gitkeep
 

.prettierignore

@@ -0,0 +1,21 @@
+# unconventional js
+/blueprints/*/files/
+/vendor/
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/coverage/
+!.*
+.eslintcache
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/package.json.ember-try

.prettierrc.js

@@ -7,8 +7,8 @@ module.exports = {
       files: '**/*.hbs',
       options: {
         parser: 'glimmer',
-        singleQuote: false
-      }
-    }
-  ]
-};
+        singleQuote: false,
+      },
+    },
+  ],
+};

.template-lintrc.js

@@ -1,5 +1,5 @@
 'use strict';
 
 module.exports = {
-  extends: 'octane'
+  extends: 'recommended',
 };

CONTRIBUTING.md

@@ -8,9 +8,8 @@
 
 ## Linting
 
-* `yarn lint:hbs`
-* `yarn lint:js`
-* `yarn lint:js --fix`
+* `yarn lint`
+* `yarn lint:fix`
 
 ## Running tests
 

README.md

@@ -15,8 +15,8 @@ This project is packaged as an [EmberCLI](http://www.ember-cli.com) addon.
 Compatibility
 ------------------------------------------------------------------------------
 
-* Ember.js v3.16 or above
-* Ember CLI v2.13 or above
+* Ember.js v3.20 or above
+* Ember CLI v3.20 or above
 * Node.js v10 or above
 
 For Ember <= 3.12 use version 0.7.0 of ember-prism.

addon/components/code-inline.hbs

@@ -1,8 +1,7 @@
 <code
   ...attributes
   class="{{this.languageClass}}"
-  {{did-insert this.setPrismCode}}
-  {{did-update this.setPrismCode this.code @language}}
+  {{create-ref "codeElement" bucket=this tracked=true}}
 >
   {{~! ~}}{{this.prismCode}}{{~! ~}}
 </code>

addon/components/code-inline.js

@@ -1,24 +1,21 @@
 /* global Prism */
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { htmlSafe } from '@ember/template';
-import { tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
+import { trackedRef } from 'ember-ref-bucket';
 
 export default class CodeInlineComponent extends Component {
-  @tracked prismCode = '';
+  @trackedRef('codeElement') codeElement;
 
   get code() {
     const code = this.args.code;
-
     assert(
-      'ember-prism\'s <CodeBlock/> and <CodeInline/> components require a `code` parameter to be passed in.',
+      "ember-prism's <CodeBlock/> and <CodeInline/> components require a `code` parameter to be passed in.",
       code !== undefined
     );
     if (Prism?.plugins?.NormalizeWhitespace) {
       return Prism.plugins.NormalizeWhitespace.normalize(code);
     }
-
     return code;
   }
 
@@ -30,23 +27,26 @@ export default class CodeInlineComponent extends Component {
     return `language-${this.language}`;
   }
 
-  @action
-  setPrismCode(element) {
-    const code = this.code;
-    const language = this.language;
-    const grammar = Prism.languages[language];
+  get prismCode() {
+    let prismCode = '';
+
+    if (this.codeElement) {
+      const code = this.code;
+      const language = this.language;
+      const grammar = Prism.languages[language];
+
+      if (code && language && grammar) {
+        prismCode = htmlSafe(Prism.highlight(code, grammar, language));
+      }
 
-    if (code && language && grammar) {
-      this.prismCode = htmlSafe(Prism.highlight(code, grammar, language));
-    } else {
-      this.prismCode = '';
+      // Force plugin initialization, required for Prism.highlight usage.
+      // See https://github.com/PrismJS/prism/issues/1234
+      Prism.hooks.run('complete', {
+        code,
+        element: this.codeElement,
+      });
     }
 
-    // Force plugin initialization, required for Prism.highlight usage.
-    // See https://github.com/PrismJS/prism/issues/1234
-    Prism.hooks.run('complete', {
-      code,
-      element
-    });
+    return prismCode;
   }
 }

addon/index.js

@@ -1,7 +1,6 @@
 /* globals Prism */
 import { setup as glimmer } from 'prismjs-glimmer';
 
-
 export function setup() {
   glimmer(Prism);