[WIP] Create bootstrap 3, ember 4 compatible fork

.github/workflows/ci.yml

@@ -7,8 +7,6 @@ on:
     tags:
       - '*'
   pull_request:
-  schedule:
-    - cron:  '0 4 * * 5' # Fridays at 4am
 
 jobs:
   test:
@@ -20,7 +18,7 @@ jobs:
       - name: Setup node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 12
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
       - name: Lint
@@ -39,7 +37,7 @@ jobs:
       - name: Setup node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 12
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
         with:
@@ -50,7 +48,7 @@ jobs:
   test-try:
     name: Scenario ${{ matrix.scenario }}, BS${{ matrix.bootstrap }}, ${{ matrix.browser}}
     runs-on: ubuntu-latest
-    timeout-minutes: 10
+    timeout-minutes: 14
     continue-on-error: ${{ matrix.allow-failure || false }}
     needs:
       - test
@@ -62,12 +60,14 @@ jobs:
         scenario:
           - ember-lts-3.16
           - ember-lts-3.20
+          - ember-lts-3.24
+          - ember-lts-3.28
+          - ember-lts-4.4
           - ember-release
           - ember-beta
           - ember-canary
           - ember-default-with-jquery
           - ember-classic
-          - ember-concurrency-2.x
           - embroider-safe
           - embroider-optimized
         bootstrap:
@@ -77,10 +77,22 @@ jobs:
         browser:
           - Chrome
         include:
-          - scenario: ember-release
+          - scenario: ember-lts-3.28
+            browser: Firefox
+            bootstrap: 3
+          - scenario: ember-lts-3.28
             browser: Firefox
             bootstrap: 4
-          - scenario: ember-release
+          - scenario: ember-lts-3.28
+            browser: Firefox
+            bootstrap: 5
+          - scenario: ember-lts-4.4
+            browser: Firefox
+            bootstrap: 3
+          - scenario: ember-lts-4.4
+            browser: Firefox
+            bootstrap: 4
+          - scenario: ember-lts-4.4
             browser: Firefox
             bootstrap: 5
           - scenario: node-tests
@@ -90,37 +102,10 @@ jobs:
       - name: Setup node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 12
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
       - name: Test
         run: yarn ember try:one ${{ matrix.scenario }} --- ember test --launch ${{ matrix.browser }}
         env:
           BOOTSTRAPVERSION: ${{ matrix.bootstrap }}
-
-#  test-browserstack:
-#    name: Browserstack Tests
-#    runs-on: ubuntu-latest
-#    needs:
-#      - test
-#    env:
-#      BROWSERSTACK_USERNAME: simonihmig1
-#      BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
-#    steps:
-#      - name: Checkout code
-#        uses: actions/checkout@v2
-#      - name: Setup node.js
-#        uses: actions/setup-node@v1
-#        with:
-#          node-version: 10
-#      - name: Install dependencies
-#        uses: bahmutov/npm-install@v1
-#      - name: Connect to Browserstack
-#        run: yarn ember browserstack:connect
-#      - name: Test
-#        run: yarn ember test --filter !FastBoot --config-file testem.browserstack.js
-#        env:
-#          BABELPOLYFILL: true
-#      - name: Disconnect from Browserstack
-#        if: always()
-#        run: yarn ember browserstack:disconnect

README.md

@@ -27,8 +27,9 @@ Ember Bootstrap works and is fully [tested](https://github.com/kaliber5/ember-bo
 * Ember.js 3.16+ (including all optional features)
 * Ember CLI 3.15+
 * Bootstrap 3 and 4
-* all modern evergreen browsers (Chrome, Firefox, Safari, Edge) and IE 11 (the latter requires the use of the [Babel polyfill](https://github.com/babel/ember-cli-babel#polyfill)).
-* FastBoot 1.0+
+* all modern evergreen browsers (Chrome, Firefox, Safari, Edge)
+* node.js 12+
+* FastBoot 3.0+
 * Embroider: we strive (and test) for maximum compatibility with Embroider, including the most aggressive setting 
 (`staticComponents`) for tree shaking and code splitting. However as Embroider itself is still considered beta software, 
 we won't be able to *guarantee* that for the time being.

addon/components/bs-alert.js

@@ -74,6 +74,12 @@ export default class Alert extends Component {
   @tracked
   hidden = !this.visible;
 
+  /**
+   * This is an unfortunate duplication of the previous property, but this is untracked to avoid causing the dreaded "same computation" assertion in GlimmerVM when reading a tracked property before setting it.
+   * @private
+   */
+  _hidden = !this.visible;
+
   /**
    * This property controls if the alert should be visible. If false it might still be in the DOM until the fade animation
    * has completed.
@@ -174,7 +180,7 @@ export default class Alert extends Component {
    * @private
    */
   show() {
-    this.hidden = false;
+    this.hidden = this._hidden = false;
   }
 
   /**
@@ -185,7 +191,7 @@ export default class Alert extends Component {
    * @private
    */
   hide() {
-    if (this.hidden) {
+    if (this._hidden) {
       return;
     }
 
@@ -194,14 +200,14 @@ export default class Alert extends Component {
         this,
         function () {
           if (!this.isDestroyed) {
-            this.hidden = true;
+            this.hidden = this._hidden = true;
             this.args.onDismissed?.();
           }
         },
         this.fadeDuration
       );
     } else {
-      this.hidden = true;
+      this.hidden = this._hidden = true;
       this.args.onDismissed?.();
     }
   }

addon/components/bs-collapse.js

@@ -56,7 +56,6 @@ export default class Collapse extends Component {
    * @property active
    * @private
    */
-  @tracked
   active = !this.collapsed;
 
   get collapse() {

addon/components/bs-contextual-help/element.js

@@ -1,7 +1,5 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-import { scheduleOnce } from '@ember/runloop';
 import arg from 'ember-bootstrap/utils/decorators/arg';
 import { tracked } from '@glimmer/tracking';
 import { getOwnConfig, macroCondition } from '@embroider/macros';
@@ -106,54 +104,52 @@ export default class ContextualHelpElement extends Component {
    * @type {object}
    * @private
    */
-  get popperModifiers() {
-    const context = this;
+  get popperOptions() {
+    let options = {
+      placement: this.placement,
+      onFirstUpdate: this.updatePlacement,
+    };
 
-    // We need popeerElement, so we wait for this getter to recompute once it's available
+    // We need popperElement, so we wait for this getter to recompute once it's available
     if (!this.popperElement) {
-      return {};
+      return options;
     }
 
-    return {
-      arrow: {
-        element: this.popperElement.querySelector(`.${this.arrowClass}`),
+    options.modifiers = [
+      {
+        name: 'arrow',
+        options: {
+          element: this.popperElement.querySelector(`.${this.arrowClass}`),
+          padding: 4,
+        },
       },
-      offset: {
-        offset: this.offset.join(','),
-        fn(data) {
-          let tip = context.popperElement;
-          assert('Contextual help element needs existing popper element', tip);
-
-          // manually read margins because getBoundingClientRect includes difference
-          let marginTop = parseInt(window.getComputedStyle(tip).marginTop, 10);
-          let marginLeft = parseInt(window.getComputedStyle(tip).marginLeft, 10);
-
-          // we must check for NaN for ie 8/9
-          if (isNaN(marginTop) || marginTop > 0) {
-            marginTop = 0;
-          }
-          if (isNaN(marginLeft) || marginLeft > 0) {
-            marginLeft = 0;
-          }
-
-          data.offsets.popper.top += marginTop;
-          data.offsets.popper.left += marginLeft;
-
-          return window.Popper.Defaults.modifiers.offset.fn.apply(this, arguments);
+      {
+        name: 'offset',
+        options: {
+          offset: this.offset,
         },
       },
-      preventOverflow: {
+      {
+        name: 'preventOverflow',
         enabled: this.args.autoPlacement,
-        boundariesElement: this.args.viewportElement,
-        padding: this.args.viewportPadding,
+        options: {
+          boundary: this.args.viewportElement,
+          padding: this.args.viewportPadding,
+        },
       },
-      hide: {
+      {
+        name: 'flip',
         enabled: this.args.autoPlacement,
       },
-      flip: {
-        enabled: this.args.autoPlacement,
+      {
+        name: 'onChange',
+        enabled: true,
+        phase: 'afterWrite',
+        fn: this.updatePlacement,
       },
-    };
+    ];
+
+    return options;
   }
 
   get actualPlacementClass() {
@@ -173,11 +169,13 @@ export default class ContextualHelpElement extends Component {
   }
 
   @action
-  updatePlacement(popperDataObject) {
-    if (this.actualPlacement === popperDataObject.placement) {
+  updatePlacement(state) {
+    // normalize argument
+    state = state.state ?? state;
+
+    if (this.actualPlacement === state.placement) {
       return;
     }
-    this.actualPlacement = popperDataObject.placement;
-    scheduleOnce('afterRender', popperDataObject.instance, popperDataObject.instance.scheduleUpdate);
+    this.actualPlacement = state.placement;
   }
 }

addon/components/bs-dropdown.hbs

@@ -20,7 +20,6 @@
         menu=(component (ensure-safe-component (bs-default @menuComponent (component "bs-dropdown/menu")))
           isOpen=this.isOpen
           direction=this.direction
-          inNav=@inNav
           toggleElement=this.toggleElement
           registerChildElement=this.registerChildElement
           unregisterChildElement=this.unregisterChildElement