Add support for Component.$() as part of RFC386

Author: simonihmig

index.js

@@ -1,40 +1,59 @@
 'use strict';
 
+const EMBER_VERSION_WITH_JQUERY_DEPRECATION = '3.0.0'; // @todo replace with real version
+
 module.exports = {
   name: require('./package').name,
   included() {
     this._super.included.apply(this, arguments);
+
+    const VersionChecker = require('ember-cli-version-checker');
+
     let app = this._findHost();
     let optionalFeatures = app.project.findAddonByName("@ember/optional-features");
 
     if (!app.vendorFiles || !app.vendorFiles['jquery.js']) {
       app.import('vendor/jquery/jquery.js', { prepend: true });
     }
 
+    let checker = new VersionChecker(this);
+    let ember = checker.forEmber();
+
+    if (ember.gte(EMBER_VERSION_WITH_JQUERY_DEPRECATION)) {
+      app.import('vendor/jquery/component.dollar.js');
+    }
+
     if (optionalFeatures && !optionalFeatures.isFeatureEnabled('jquery-integration')) {
       app.project.ui.writeDeprecateLine('You have disabled the `jquery-integration` optional feature. You now have to delete `@ember/jquery` from your package.json');
     }
   },
 
   treeForVendor: function() {
+    const BroccoliMergeTrees = require('broccoli-merge-trees');
     const Funnel = require('broccoli-funnel');
     const resolve = require('resolve');
     const path = require('path');
 
-    var jqueryPath;
+    let jqueryPath;
     try {
       jqueryPath = path.dirname(
         resolve.sync('jquery/package.json', { basedir: this.project.root })
       );
-    } catch (error) {
+    } catch(error) {
       jqueryPath = path.dirname(require.resolve('jquery/package.json'));
     }
 
-    var jquery = new Funnel(jqueryPath + '/dist', {
+    let jquery = new Funnel(jqueryPath + '/dist', {
       destDir: 'jquery',
       files: ['jquery.js'],
     });
 
-    return jquery;
+    let babelAddon = this.project.findAddonByName('ember-cli-babel');
+    let componentDollarTree = new Funnel(path.join(__dirname, 'vendor'), {
+      destDir: 'jquery',
+    });
+    let transpiledComponentDollarTree = babelAddon.transpileTree(componentDollarTree);
+
+    return new BroccoliMergeTrees([jquery, transpiledComponentDollarTree]);
   },
 };

package.json

@@ -21,7 +21,9 @@
   },
   "dependencies": {
     "broccoli-funnel": "^2.0.1",
+    "broccoli-merge-trees": "^3.0.2",
     "ember-cli-babel": "^7.1.2",
+    "ember-cli-version-checker": "^3.0.0",
     "jquery": "^3.3.1",
     "resolve": "^1.9.0"
   },

tests/integration/components/component-dot-dollar-test.js

@@ -0,0 +1,35 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+import Component from '@ember/component';
+import jQuery from 'jquery';
+
+const component = Component.extend({
+  didInsertElement() {
+    this.setJQueryElement(this.$(this.get('selector')));
+  }
+});
+
+module('Integration | Component | component-dot-dollar', function(hooks) {
+  setupRenderingTest(hooks);
+  hooks.beforeEach(function() {
+    this.owner.register('component:jquery-component', component);
+    this.$element = null;
+    this.setJQueryElement = ($) => this.$element = $;
+  });
+
+  test('it implements Component.$()', async function(assert) {
+    await render(hbs`{{jquery-component id="jq" setJQueryElement=setJQueryElement}}`);
+
+    assert.ok(this.$element, 'Component.$() is available');
+    assert.ok(this.$element instanceof jQuery, 'Component.$() returns a jQuery object');
+    assert.equal(this.$element.get(0), this.element.querySelector('#jq'), 'Component.$() is a jQuery wrapper around Component.element');
+  });
+
+  test('it implements Component.$(selector)', async function(assert) {
+    await render(hbs`{{#jquery-component id="jq" selector="div" setJQueryElement=setJQueryElement}}<div id="child"/>{{/jquery-component}}`);
+
+    assert.equal(this.$element.get(0), this.element.querySelector('#child'), 'Component.$(selector) is a jQuery object of the child elements matching selector');
+  });
+});

vendor/component.dollar.js

@@ -0,0 +1,16 @@
+import Component from '@ember/component';
+import jQuery from 'jquery';
+import { assert } from '@ember/debug';
+
+Component.reopen({
+  $(sel) {
+    assert(
+      "You cannot access this.$() on a component with `tagName: ''` specified.",
+      this.tagName !== ''
+    );
+
+    if (this.element) {
+      return sel ? jQuery(sel, this.element) : jQuery(this.element);
+    }
+  }
+});

yarn.lock

@@ -2877,6 +2877,13 @@ ember-cli-version-checker@^2.0.0, ember-cli-version-checker@^2.1.0, ember-cli-ve
     resolve "^1.3.3"
     semver "^5.3.0"
 
+ember-cli-version-checker@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ember-cli-version-checker/-/ember-cli-version-checker-3.0.1.tgz#2d084d2b261374582c68edb658a7df3a10112749"
+  dependencies:
+    resolve "^1.9.0"
+    semver "^5.6.0"
+
 ember-cli@~3.6.1:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/ember-cli/-/ember-cli-3.6.1.tgz#2a8394bb6d3859d3cdb9e6e79d6d7455f80db9e1"
@@ -6473,6 +6480,10 @@ sax@^1.2.4:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
 
+semver@^5.6.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
+
 send@0.16.2:
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
@@ -7108,14 +7119,7 @@ ultron@~1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
 
-underscore.string@^3.2.2:
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-3.3.5.tgz#fc2ad255b8bd309e239cbc5816fd23a9b7ea4023"
-  dependencies:
-    sprintf-js "^1.0.3"
-    util-deprecate "^1.0.2"
-
-underscore.string@~3.3.4:
+underscore.string@^3.2.2, underscore.string@~3.3.4:
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-3.3.5.tgz#fc2ad255b8bd309e239cbc5816fd23a9b7ea4023"
   dependencies: