Ember v4.12.1, Simplebar Core v1.2.4 (#17)

Co-authored-by: Artyom Melichow <artyom.melichow@voestalpine.com>

.ember-cli

@@ -8,8 +8,8 @@
   "disableAnalytics": false,
 
   /**
-  Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
-  rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
+    Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
+    rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
   */
   "isTypeScriptProject": false
 }

.eslintrc.js

@@ -2,12 +2,15 @@
 
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 'latest',
     sourceType: 'module',
-    ecmaFeatures: {
-      legacyDecorators: true,
+    requireConfigFile: false,
+    babelOptions: {
+      plugins: [
+        ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
+      ],
     },
   },
   plugins: ['ember'],
@@ -26,6 +29,7 @@ module.exports = {
       files: [
         './.eslintrc.js',
         './.prettierrc.js',
+        './.stylelintrc.js',
         './.template-lintrc.js',
         './ember-cli-build.js',
         './index.js',
@@ -41,8 +45,7 @@ module.exports = {
         browser: false,
         node: true,
       },
-      plugins: ['node'],
-      extends: ['plugin:node/recommended'],
+      extends: ['plugin:n/recommended'],
     },
     {
       // test files

.github/workflows/ci.yml

@@ -15,13 +15,14 @@ jobs:
   test:
     name: "Tests"
     runs-on: ubuntu-latest
+    timeout-minutes: 10
 
     steps:
       - uses: actions/checkout@v3
       - name: Install Node
         uses: actions/setup-node@v3
         with:
-          node-version: 12.x
+          node-version: 14.x
           cache: yarn
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
@@ -33,12 +34,13 @@ jobs:
   floating:
     name: "Floating Dependencies"
     runs-on: ubuntu-latest
+    timeout-minutes: 10
 
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 12.x
+          node-version: 14.x
           cache: yarn
       - name: Install Dependencies
         run: yarn install --no-lockfile
@@ -49,17 +51,17 @@ jobs:
     name: ${{ matrix.try-scenario }}
     runs-on: ubuntu-latest
     needs: "test"
+    timeout-minutes: 10
 
     strategy:
       fail-fast: false
       matrix:
         try-scenario:
-          - ember-lts-3.24
-          - ember-lts-3.28
+          - ember-lts-4.4
+          - ember-lts-4.8
           - ember-release
           - ember-beta
           - ember-canary
-          - ember-classic
           - embroider-safe
           - embroider-optimized
 
@@ -68,7 +70,7 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v3
         with:
-          node-version: 12.x
+          node-version: 14.x
           cache: yarn
       - name: Install Dependencies
         run: yarn install --frozen-lockfile

.npmignore

@@ -18,11 +18,12 @@
 /.gitignore
 /.prettierignore
 /.prettierrc.js
+/.stylelintignore
+/.stylelintrc.js
 /.template-lintrc.js
 /.travis.yml
 /.watchmanconfig
 /bower.json
-/config/ember-try.js
 /CONTRIBUTING.md
 /ember-cli-build.js
 /testem.js

.prettierrc.js

@@ -1,5 +1,12 @@
 'use strict';
 
 module.exports = {
-  singleQuote: true,
+  overrides: [
+    {
+      files: '*.{js,ts}',
+      options: {
+        singleQuote: true,
+      },
+    },
+  ],
 };

.stylelintignore

@@ -0,0 +1,8 @@
+# unconventional files
+/blueprints/*/files/
+
+# compiled output
+/dist/
+
+# addons
+/.node_modules.ember-try/

.stylelintrc.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
+};

README.md

@@ -8,9 +8,9 @@ A scrollbar component that wraps [SimpleBar](https://github.com/Grsmto/simplebar
 
 ## Compatibility
 
-- Ember.js v3.24 or above
-- Ember CLI v3.24 or above
-- Node.js v12 or above
+* Ember.js v4.4 or above
+* Ember CLI v4.4 or above
+* Node.js v14 or above
 
 ## Embroider
 

addon/components/simple-bar.js

@@ -1,11 +1,16 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import SimpleBarCore from 'simplebar-core';
 
 export default class SimpleBarComponent extends Component {
   @tracked
   instance = undefined;
 
+  get ariaLabel() {
+    return this.args.ariaLabel || SimpleBarCore.defaultOptions.ariaLabel;
+  }
+
   @action
   setInstance(instance) {
     this.instance = instance;

addon/modifiers/-private/ember-simplebar-init.js

@@ -1,6 +1,6 @@
 import Modifier from 'ember-modifier';
 import { registerDestructor } from '@ember/destroyable';
-import SimpleBar from 'simplebar/dist/simplebar-core.esm';
+import SimpleBarCore from 'simplebar-core';
 
 function cleanup(instance) {
   instance.sb?.unMount();
@@ -14,10 +14,10 @@ export default class EmberSimplebarInitModifier extends Modifier {
   }
 
   modify(element, [options], { onUpdate }) {
-    const sbOpts = { ...SimpleBar.defaultOptions, ...options };
+    const sbOpts = { ...SimpleBarCore.defaultOptions, ...options };
     if (!this.sb) {
       // init
-      this.sb = new SimpleBar(element, sbOpts);
+      this.sb = new SimpleBarCore(element, sbOpts);
       onUpdate?.(this.sb);
     } else {
       // update

addon/templates/components/simple-bar.hbs

@@ -1,4 +1,5 @@
 <div
+  data-simplebar="init"
   class="ember-simplebar"
   ...attributes
   {{-private/ember-simplebar-init this.args onUpdate=this.setInstance}}
@@ -9,7 +10,12 @@
     </div>
     <div class="simplebar-mask">
       <div class="simplebar-offset">
-        <div class="simplebar-content-wrapper">
+        <div
+          class="simplebar-content-wrapper"
+          tabIndex="0"
+          role="region"
+          aria-label={{this.ariaLabel}}
+        >
           <div class="simplebar-content">
             {{#if this.instance}}
               {{yield this.instance}}

ember-cli-build.js

@@ -3,7 +3,7 @@
 const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function (defaults) {
-  let app = new EmberAddon(defaults, {
+  const app = new EmberAddon(defaults, {
     // Add options here
   });
 

index.js

@@ -5,6 +5,6 @@ module.exports = {
 
   included(app) {
     this._super.included.apply(this, arguments);
-    app.import('node_modules/simplebar/dist/simplebar.css');
+    app.import('node_modules/simplebar-core/dist/simplebar.css');
   },
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-simplebar",
-  "version": "4.1.1",
+  "version": "5.0.0",
   "description": "Custom scrollbar component using SimpleBar",
   "keywords": [
     "ember-addon"
@@ -14,64 +14,72 @@
   },
   "scripts": {
     "build": "ember build --environment=production",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
-    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
+    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
+    "lint:css": "stylelint \"**/*.css\"",
+    "lint:css:fix": "concurrently \"npm:lint:css -- --fix\"",
+    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
-    "test": "npm-run-all lint test:*",
+    "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each"
   },
   "dependencies": {
     "@glimmer/tracking": "^1.1.2",
-    "ember-auto-import": "^2.4.1",
+    "ember-auto-import": "^2.6.3",
     "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.0.1",
-    "ember-modifier": "^3.1.0",
-    "simplebar": "^5.3.6"
+    "ember-cli-htmlbars": "^6.2.0",
+    "ember-modifier": "^4.1.0",
+    "simplebar-core": "^1.2.4"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.21.3",
+    "@babel/plugin-proposal-decorators": "^7.21.0",
     "@ember/optional-features": "^2.0.0",
     "@ember/render-modifiers": "^2.0.4",
-    "@ember/test-helpers": "^2.7.0",
-    "@embroider/test-setup": "^1.6.0",
+    "@ember/string": "^3.0.1",
+    "@ember/test-helpers": "^2.9.3",
+    "@embroider/test-setup": "^2.1.1",
     "@glimmer/component": "^1.1.2",
-    "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~4.4.1",
+    "concurrently": "^8.0.1",
+    "ember-cli": "~4.12.1",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
-    "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^7.0.0",
-    "ember-qunit": "^5.1.5",
-    "ember-resolver": "^8.0.3",
-    "ember-source": "~4.4.0",
+    "ember-qunit": "^6.2.0",
+    "ember-resolver": "^10.0.0",
+    "ember-source": "~4.12.0",
     "ember-source-channel-url": "^3.0.0",
-    "ember-template-lint": "^4.8.0",
+    "ember-template-lint": "^5.7.2",
     "ember-try": "^2.0.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-ember": "^10.6.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-qunit": "^7.2.0",
+    "eslint": "^8.37.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-ember": "^11.5.0",
+    "eslint-plugin-n": "^15.7.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-qunit": "^7.3.4",
     "loader.js": "^4.7.0",
     "lorem-ipsum": "^2.0.4",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.2",
-    "qunit": "^2.19.1",
+    "prettier": "^2.8.7",
+    "qunit": "^2.19.4",
     "qunit-dom": "^2.0.0",
-    "webpack": "^5.72.1"
+    "stylelint": "^15.4.0",
+    "stylelint-config-standard": "^33.0.0",
+    "stylelint-prettier": "^3.0.0",
+    "webpack": "^5.78.0"
+  },
+  "peerDependencies": {
+    "ember-source": "^4.0.0"
   },
   "engines": {
-    "node": "12.* || 14.* || >= 16"
+    "node": "14.* || 16.* || >= 18"
   },
   "ember": {
     "edition": "octane"

tests/dummy/app/styles/app.css

@@ -1,6 +1,7 @@
-@import "utils.css";
+@import url("utils.css");
 
-html, body {
+html,
+body {
   font-size: 1em;
   font-family: sans-serif;
   line-height: 2;
@@ -15,5 +16,5 @@ h1 {
 
 .custom-track .simplebar-track.simplebar-vertical,
 .custom-track .simplebar-track.simplebar-horizontal {
-  background: rgba(200,200,200,.125);
+  background: rgb(200 200 200 / 12.5%);
 }