Remove jQuery, use flatpickr instead of pikaday (emberjs#842)

* Remove jQuery, use flatpickr instead of pikaday ember-pikaday was using jQuery internally, so we had to move away from it. I chose flatpickr, but we could use anything else. I'm having trouble getting the tests to pass currently. Resolves emberjs#590 * Fix test * Check ember version before removing jQuery Co-Authored-By: Robert Jackson <[email protected]> * Stop trying to use ember-native-dom-dispatcher * Remove unused project * Add travis_retry to attempt to retry builds automatically
cyril-sf · Mar 30, 2022 · b18121c · b18121c
1 parent 547e20c
commit b18121c
Show file tree

Hide file tree

Showing 12 changed files with 75 additions and 56 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -49,13 +49,13 @@ before_install:
   - export PATH=$HOME/.yarn/bin:$PATH
 
 install:
-  - yarn install --ignore-engines
+  - travis_retry yarn install --ignore-engines
 
 script:
-  - node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO --skip-cleanup=true --- node_modules/.bin/ember test --filter="Ember Debug"
+  - travis_retry node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO --skip-cleanup=true --- node_modules/.bin/ember test --filter="Ember Debug"
 
 after_success:
-  - test $TRAVIS_BRANCH == "stable" && yarn run upload
+  - travis_retry test $TRAVIS_BRANCH == "stable" && yarn run upload
 
 branches:
   only:

diff --git a/app/components/date-property-field.js b/app/components/date-property-field.js
@@ -1,27 +1,20 @@
 import { on } from '@ember/object/evented';
-import { once } from '@ember/runloop';
-import DatePicker from "ember-inspector/components/pikaday-input";
+import { scheduleOnce } from '@ember/runloop';
+import DatePicker from "ember-inspector/components/ember-flatpickr";
 const KEY_EVENTS = {
   escape: 27
 };
 
 export default DatePicker.extend({
-  /**
-   * Workaround bug of `onPikadayClose` being called
-   * on a destroyed component.
-   */
-  onPikadayClose() {
-    if (!this.element) { return; }
-    return this._super(...arguments);
-  },
-
   openDatePicker: on('didInsertElement', function() {
-    once(this.element, 'click');
+    scheduleOnce('afterRender', this, function() {
+      this.flatpickrRef.open();
+    });
   }),
 
   keyUp(e) {
     if (e.keyCode === KEY_EVENTS.escape) {
-      this.sendAction('cancel');
+      this.flatpickrRef.close();
     }
     return this._super(...arguments);
   }

diff --git a/app/components/mixin-property.js b/app/components/mixin-property.js
@@ -1,6 +1,7 @@
 import { computed } from '@ember/object';
 import Component from '@ember/component';
 import { equal, alias, and } from '@ember/object/computed';
+import { next } from '@ember/runloop';
 
 export default Component.extend({
   isEdit: false,
@@ -103,10 +104,12 @@ export default Component.extend({
     },
 
     finishedEditing() {
-      this.set('isEdit', false);
+      next(() => {
+        this.set('isEdit', false);
+      });
     },
 
-    dateSelected(val) {
+    dateSelected([val]) {
       this.set('dateValue', val);
       this.send('saveProperty');
       this.send('finishedEditing');

diff --git a/app/models/promise.js b/app/models/promise.js
@@ -1,5 +1,5 @@
+import { assign } from '@ember/polyfills';
 import { once } from '@ember/runloop';
-import $ from 'jquery';
 import { typeOf, isEmpty } from '@ember/utils';
 import EmberObject, { computed, observer } from '@ember/object';
 import { not, equal, or } from '@ember/object/computed';
@@ -180,17 +180,17 @@ export default EmberObject.extend({
   }),
 
   _allChildren() {
-    let children = $.extend([], this.get('children'));
+    let children = assign([], this.get('children'));
     children.forEach(item => {
-      children = $.merge(children, item._allChildren());
+      children = assign(children, item._allChildren());
     });
     return children;
   },
 
   _allParents() {
     let parent = this.get('parent');
     if (parent) {
-      return $.merge([parent], parent._allParents());
+      return assign([parent], parent._allParents());
     } else {
       return [];
     }

diff --git a/app/routes/route-tree.js b/app/routes/route-tree.js
@@ -1,5 +1,5 @@
-import $ from 'jquery';
-import TabRoute from "ember-inspector/routes/tab";
+import { assign } from '@ember/polyfills';
+import TabRoute from 'ember-inspector/routes/tab';
 
 export default TabRoute.extend({
   setupController() {
@@ -27,7 +27,7 @@ export default TabRoute.extend({
 
 function topSort(tree, list) {
   list = list || [];
-  let route = $.extend({}, tree);
+  let route = assign({}, tree);
   delete route.children;
   // Firt node in the tree doesn't have a value
   if (route.value) {

diff --git a/app/routes/view-tree.js b/app/routes/view-tree.js
@@ -1,4 +1,4 @@
-import $ from 'jquery';
+import { assign } from '@ember/polyfills';
 import TabRoute from "ember-inspector/routes/tab";
 
 export default TabRoute.extend({
@@ -43,7 +43,7 @@ export default TabRoute.extend({
 
 function topSort(tree, list) {
   list = list || [];
-  let view = $.extend({}, tree);
+  let view = assign({}, tree);
   view.parentCount = view.parentCount || 0;
   delete view.children;
   list.push(view);

diff --git a/app/templates/components/mixin-details.hbs b/app/templates/components/mixin-details.hbs
@@ -110,11 +110,12 @@
                       class="mixin__property-value-txt js-object-property-value-txt"}}
                   {{else}}
                     {{date-property-field
-                      value=property.dateValue
-                      format="YYYY-MM-DD"
+                      allowInput=true
+                      date=(readonly property.dateValue)
+                      dateFormat="Y-m-d"
                       class="mixin__property-value-txt js-object-property-value-date"
-                      onSelection=(action "dateSelected" target=property)
-                      cancel=(action "finishedEditing" target=property)}}
+                      onChange=(action "dateSelected" target=property)
+                      onClose=(action "finishedEditing" target=property)}}
                   {{/unless}}
                 {{/unless}}
 

diff --git a/config/ember-try.js b/config/ember-try.js
@@ -110,8 +110,7 @@ module.exports = function() {
           name: 'ember-lts-2.16',
           npm: {
             devDependencies: {
-              'ember-source': '~2.16.0',
-              'ember-native-dom-event-dispatcher': null
+              'ember-source': '~2.16.0'
             }
           }
         },

diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -4,6 +4,7 @@
 /* global require, module */
 
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
+const VersionChecker = require('ember-cli-version-checker');
 const mergeTrees = require('broccoli-merge-trees');
 const concatFiles = require('broccoli-concat');
 const stew = require('broccoli-stew');
@@ -23,7 +24,6 @@ const options = {
   fingerprint: {
     enabled: false
   },
-
   svgJar: {
     sourceDirs: [
       'public/assets/svg'
@@ -36,6 +36,13 @@ options.minifyJS = { enabled: false };
 options.minifyCSS = { enabled: false };
 
 module.exports = function(defaults) {
+  let checker = new VersionChecker(defaults);
+  let emberChecker = checker.forEmber();
+
+  if (emberChecker.isAbove('3.0.0')) {
+    options.vendorFiles = { 'jquery.js': null };
+  }
+
   let app = new EmberApp(defaults, options);
 
   // Use `app.import` to add additional libraries to the generated

diff --git a/package.json b/package.json
@@ -59,12 +59,13 @@
     "ember-cli-sass": "^7.1.7",
     "ember-cli-shims": "^1.2.0",
     "ember-cli-uglify": "^2.1.0",
+    "ember-cli-version-checker": "^2.1.2",
     "ember-concurrency": "^0.8.19",
     "ember-export-application-global": "^2.0.0",
+    "ember-flatpickr": "^2.5.0",
     "ember-load-initializers": "^1.1.0",
     "ember-math-helpers": "^2.5.0",
     "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-pikaday": "^2.2.2",
     "ember-resolver": "^4.0.0",
     "ember-route-action-helper": "^2.0.6",
     "ember-source": "~3.3.0",

diff --git a/tests/acceptance/object-inspector-test.js b/tests/acceptance/object-inspector-test.js
@@ -559,7 +559,9 @@ module('Object Inspector', function(hooks) {
 
     let field = find('.js-object-property-value-date');
     assert.ok(field);
+    await click(field);
     await fillIn(field, '2015-01-01');
+    await triggerKeyEvent(field, 'keydown', 13);
 
     assert.equal(name, 'objectInspector:saveProperty');
     assert.equal(message.property, 'dateProperty');

diff --git a/yarn.lock b/yarn.lock
@@ -1732,7 +1732,7 @@ broccoli-uglify-sourcemap@^2.1.1:
     walk-sync "^0.3.2"
     workerpool "^2.3.0"
 
-browserslist@^3.2.6:
+browserslist@^3.1.1, browserslist@^3.2.6:
   version "3.2.8"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.8.tgz#b0005361d6471f0f5952797a76fc985f1f978fc6"
   dependencies:
@@ -2674,7 +2674,7 @@ ember-cli-app-version@^3.2.0:
     ember-cli-babel "^6.12.0"
     git-repo-version "^1.0.2"
 
-ember-cli-babel@^5.1.5, ember-cli-babel@^5.1.7:
+ember-cli-babel@^5.1.5:
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-5.2.8.tgz#0356b03cc3fdff5d0f2ecaa46a0e1cfaebffd876"
   dependencies:
@@ -2756,7 +2756,7 @@ ember-cli-htmlbars-inline-precompile@^1.0.0, ember-cli-htmlbars-inline-precompil
     heimdalljs-logger "^0.1.9"
     silent-error "^1.1.0"
 
-ember-cli-htmlbars@^1.0.1, ember-cli-htmlbars@^1.1.1:
+ember-cli-htmlbars@^1.0.1:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-1.3.4.tgz#461289724b34af372a6a0c4b6635819156963353"
   dependencies:
@@ -3024,6 +3024,13 @@ ember-debug-handlers-polyfill@^1.0.2:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ember-debug-handlers-polyfill/-/ember-debug-handlers-polyfill-1.1.1.tgz#e9ae0a720271a834221179202367421b580002ef"
 
+ember-diff-attrs@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/ember-diff-attrs/-/ember-diff-attrs-0.2.1.tgz#ad9592ab8ba63d796bb9b1633801fe27ca43fc74"
+  dependencies:
+    ember-cli-babel "^6.6.0"
+    ember-weakmap "^3.0.0"
+
 ember-export-application-global@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ember-export-application-global/-/ember-export-application-global-2.0.0.tgz#8d6d7619ac8a1a3f8c43003549eb21ebed685bd2"
@@ -3036,6 +3043,16 @@ ember-factory-for-polyfill@^1.3.1:
   dependencies:
     ember-cli-version-checker "^2.1.0"
 
+ember-flatpickr@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/ember-flatpickr/-/ember-flatpickr-2.5.0.tgz#e32b4e475fadd2c16d6582496dca39dea0ff1238"
+  dependencies:
+    ember-cli-babel "^6.6.0"
+    ember-cli-node-assets "^0.2.2"
+    ember-diff-attrs "^0.2.1"
+    fastboot-transform "^0.1.3"
+    flatpickr "^4.4.6"
+
 ember-getowner-polyfill@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/ember-getowner-polyfill/-/ember-getowner-polyfill-2.2.0.tgz#38e7dccbcac69d5ec694000329ec0b2be651d2b2"
@@ -3066,16 +3083,6 @@ ember-maybe-import-regenerator@^0.1.5, ember-maybe-import-regenerator@^0.1.6:
     ember-cli-babel "^6.0.0-beta.4"
     regenerator-runtime "^0.9.5"
 
-ember-pikaday@^2.2.2:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/ember-pikaday/-/ember-pikaday-2.2.4.tgz#72c2ada3e5c028f66b56df760bf9f1583e6d5b99"
-  dependencies:
-    ember-cli-babel "^5.1.7"
-    ember-cli-htmlbars "^1.1.1"
-    ember-cli-node-assets "^0.2.2"
-    fastboot-transform "^0.1.1"
-    pikaday "^1.5.1"
-
 ember-qunit@^3.3.2:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/ember-qunit/-/ember-qunit-3.4.1.tgz#204a2d39a5d44d494c56bf17cf3fd12f06210359"
@@ -3199,6 +3206,14 @@ ember-try@^1.0.0-beta.3:
     rimraf "^2.3.2"
     rsvp "^4.7.0"
 
+ember-weakmap@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/ember-weakmap/-/ember-weakmap-3.3.0.tgz#2842aaf8468cad40f90d4381ca7a7fb1ee7c267b"
+  dependencies:
+    browserslist "^3.1.1"
+    debug "^3.1.0"
+    ember-cli-babel "^6.6.0"
+
 [email protected]:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/emit-function/-/emit-function-0.0.2.tgz#e3a50b3d61be1bf8ca88b924bf713157a5bec124"
@@ -3620,7 +3635,7 @@ fast-sourcemap-concat@^1.3.1:
     source-map-url "^0.3.0"
     sourcemap-validator "^1.1.0"
 
-fastboot-transform@^0.1.1:
+fastboot-transform@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/fastboot-transform/-/fastboot-transform-0.1.3.tgz#7dea0b117594afd8772baa6c9b0919644e7f7dcd"
   dependencies:
@@ -3772,6 +3787,10 @@ flat-cache@^1.2.1:
     graceful-fs "^4.1.2"
     write "^0.2.1"
 
+flatpickr@^4.4.6:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.5.1.tgz#f65eaf54c07538f87d6f68a67b03cf816d7fb82f"
+
 follow-redirects@^1.0.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.1.tgz#67a8f14f5a1f67f962c2c46469c79eaec0a90291"
@@ -6132,7 +6151,7 @@ moment-timezone@^0.5.13:
   dependencies:
     moment ">= 2.9.0"
 
-[email protected], "moment@>= 2.9.0", moment@^2.19.3:
+"moment@>= 2.9.0", moment@^2.19.3:
   version "2.22.2"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
 
@@ -6709,12 +6728,6 @@ pify@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
 
-pikaday@^1.5.1:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/pikaday/-/pikaday-1.7.0.tgz#78bf26e709f7c135b674762bbab79d75ac589ab6"
-  optionalDependencies:
-    moment "2.x"
-
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"