Update to glimmer components

.github/workflows/ci.yml

@@ -91,9 +91,11 @@ jobs:
       fail-fast: false
       matrix:
         try-scenario:
+          - ember-lts-3.28
           - ember-lts-4.4
           - ember-lts-4.8
           - ember-lts-4.12
+          - ember-5.0
           - ember-release
           - ember-beta
           - ember-canary

CHANGELOG.md

@@ -0,0 +1 @@
+liquid-fire/CHANGELOG.md

docs/.eslintrc.js

@@ -23,22 +23,10 @@ module.exports = {
     browser: true,
   },
   rules: {
-    'no-var': 'error',
-    semi: ['error', 'always'],
-    'ember/no-actions-hash': 'off',
-    'ember/no-classic-classes': 'off',
-    'ember/no-classic-components': 'off',
-    'ember/no-component-lifecycle-hooks': 'off',
-    'ember/no-get': 'off',
-    'ember/no-new-mixins': 'off',
-    'ember/no-old-shims': 'error',
-    'ember/new-module-imports': 'error',
-    'ember/no-jquery': 'off',
-    'ember/no-mixins': 'off',
-    'ember/no-side-effects': 'error',
-    'ember/require-return-from-computed': 'off',
-    'ember/require-tagless-components': 'off',
-    'no-prototype-builtins': 'off',
+    eqeqeq: ['error'],
+    'no-console': ['error'],
+    'no-var': ['error'],
+    'prefer-const': ['error'],
   },
   overrides: [
     // node files
@@ -68,6 +56,9 @@ module.exports = {
       // test files
       files: ['tests/**/*-test.{js,ts}'],
       extends: ['plugin:qunit/recommended'],
+      rules: {
+        'qunit/require-expect': 'off',
+      },
     },
   ],
 };

docs/.template-lintrc.js

@@ -3,23 +3,9 @@
 module.exports = {
   extends: 'recommended',
   rules: {
-    'block-indentation': false,
     'link-href-attributes': false,
-    'no-action': false,
     'no-curly-component-invocation': {
-      allow: [
-        'liquid-child',
-        'liquid-container',
-        'liquid-versions',
-        'liquid-outlet',
-        '-with-dynamic-vars',
-      ],
+      allow: ['-with-dynamic-vars'],
     },
-    'no-implicit-this': false,
-    'no-invalid-role': false,
-    'no-outlet-outside-routes': false,
-    'no-yield-only': false,
-    'require-input-label': false,
-    'require-valid-alt-text': false,
   },
 };

docs/app/components/code-snippet.js

@@ -1,7 +1,6 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { getCodeSnippet } from 'ember-code-snippet';
 import { htmlSafe } from '@ember/template';
-import { computed } from '@ember/object';
 
 import Prism from 'prismjs/components/prism-core';
 import 'prismjs/components/prism-clike';
@@ -11,13 +10,13 @@ import 'prismjs/components/prism-markup';
 import 'prismjs/components/prism-markup-templating';
 import 'prismjs/components/prism-css';
 
-export default Component.extend({
-  source: computed('name', function () {
-    let { source, language } = getCodeSnippet(this.name);
-    let grammar = Prism.languages[language];
+export default class CodeSnippetComponent extends Component {
+  get source() {
+    const { source, language } = getCodeSnippet(this.args.name);
+    const grammar = Prism.languages[language];
     if (!grammar) {
       throw new Error(`missing language ${language}`);
     }
     return htmlSafe(Prism.highlight(source, grammar, language));
-  }),
-});
+  }
+}

docs/app/components/grid-overlay.js

@@ -1,11 +1,26 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import isBrowser from 'liquid-fire/is-browser';
+
+export default class GridOverlayComponent extends Component {
+  constructor() {
+    super(...arguments);
+    if (isBrowser()) {
+      document.addEventListener('keydown', function (e) {
+        // Ctrl-Alt-g shows vertical rhythm
+        if (e.ctrlKey && e.altKey && e.keyCode === 71) {
+          toggleGrid(22);
+        }
+      });
+    }
+  }
+}
 
 function show_lead(space, offset) {
-  let max = document.querySelector('body').clientHeight / space;
+  const max = document.querySelector('body').clientHeight / space;
   hide_lead();
   for (let i = 0; i < max; i++) {
     const element = document.createElement('div');
-    element.class = 'grid';
+    element.classList.add('grid');
     element.id = `vgrid${i}`;
     const body = document.querySelector('body');
     body.appendChild(element);
@@ -31,11 +46,15 @@ function css(element, styles) {
 }
 
 function hide_lead() {
-  document.querySelector('.grid').remove();
+  if (document.querySelector('.grid')) {
+    document.querySelectorAll('.grid').forEach((grid) => {
+      grid.remove();
+    });
+  }
 }
 
 function toggleGrid(leading, leading_offset) {
-  if (leading_offset == null) {
+  if (!leading_offset) {
     leading_offset = 0;
   }
   if (document.querySelector('#vgrid0')) {
@@ -44,15 +63,3 @@ function toggleGrid(leading, leading_offset) {
     return show_lead(leading, leading_offset);
   }
 }
-
-export default Component.extend({
-  didInsertElement: function () {
-    this._super(...arguments);
-    document.addEventListener('keydown', function (e) {
-      // Ctrl-Alt-g shows vertical rhythm
-      if (e.ctrlKey && e.altKey && e.keyCode === 71) {
-        toggleGrid(22);
-      }
-    });
-  },
-});

docs/app/components/liquid-bind-demo.js

@@ -1,42 +1,51 @@
-import moment from 'moment';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { run } from '@ember/runloop';
+import isBrowser from 'liquid-fire/is-browser';
+import moment from 'moment';
+
+export default class LiquidBindDemoComponent extends Component {
+  @tracked now;
+  @tracked hours;
+  @tracked minutes;
+  @tracked seconds;
+
+  constructor() {
+    super(...arguments);
 
-export default Component.extend({
-  init() {
-    this._super();
     this.tick();
-  },
 
-  didInsertElement() {
-    this._super(...arguments);
-    let self = this;
+    const self = this;
+
+    if (!isBrowser()) {
+      return;
+    }
+
     this.interval = setInterval(function () {
       run(self, 'tick');
     }, 1000);
-  },
+  }
 
-  willDestroyElement() {
-    clearInterval(this.interval);
-    this._super();
-  },
-
-  tick: function (now) {
+  tick(now) {
     if (!now) {
       now = moment();
     }
-    this.setProperties({
-      now: now,
-      hours: now.format('hh'),
-      minutes: now.format('mm'),
-      seconds: now.format('ss'),
-    });
-  },
-
-  actions: {
-    forceTick: function () {
-      clearInterval(this.interval);
-      this.tick(this.now.add({ hours: 1, minutes: 1, seconds: 1 }));
-    },
-  },
-});
+
+    this.now = now;
+    this.hours = now.format('hh');
+    this.minutes = now.format('mm');
+    this.seconds = now.format('ss');
+  }
+
+  @action
+  destroyElement() {
+    clearInterval(this.interval);
+  }
+
+  @action
+  forceTick() {
+    clearInterval(this.interval);
+    this.tick(this.now.add({ hours: 1, minutes: 1, seconds: 1 }));
+  }
+}

docs/app/components/nav-link.js

@@ -1,15 +1,11 @@
-import { computed } from '@ember/object';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 
-export default Component.extend({
-  classNames: ['page-item'],
-  classNameBindings: ['direction'],
+export default class NavLinkComponent extends Component {
+  get back() {
+    return this.args.topic && this.args.direction === 'back';
+  }
 
-  back: computed('direction', 'topic', function () {
-    return this.topic && this.direction === 'back';
-  }),
-
-  forward: computed('direction', 'topic', function () {
-    return this.topic && this.direction === 'forward';
-  }),
-});
+  get forward() {
+    return this.args.topic && this.args.direction === 'forward';
+  }
+}

docs/app/components/simple-select.js

@@ -1,5 +1,9 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 
-export default Component.extend({
-  value: null,
-});
+export default class SimpleSelectComponent extends Component {
+  @action
+  change(evt) {
+    this.args.onChange(evt.target.value);
+  }
+}