Get rid of jQuery dependency

CHANGELOG.md

@@ -1,3 +1,8 @@
+## Unreleased
+
+### Breaking changes
+- The jQuery dependency has been removed ([#46](https://github.com/DevExpress/devextreme-angular/issues/46)). You can include jQuery integration into your application to use jQuery. For more information, please see: [Include jQuery integration](https://github.com/DevExpress/devextreme-angular#include-jquery-integration)
+
 ## 17.2.1-beta.2 (2017-10-10)
 
 ### Features

README.md

@@ -1,5 +1,7 @@
 [![Run Status](https://api.shippable.com/projects/575802872a8192902e22e62a/badge?branch=master)](https://app.shippable.com/projects/575802872a8192902e22e62a) [![npm version](https://badge.fury.io/js/devextreme-angular.svg)](https://badge.fury.io/js/devextreme-angular)
 
+### If you are looking for the 17.1 branch, please forward the following [link](https://github.com/DevExpress/devextreme-angular/tree/17.1).
+
 # Angular UI and Visualization Components Based on DevExtreme Widgets #
 
 This project allows you to use [DevExtreme Widgets](http://js.devexpress.com/Demos/WidgetsGallery/) in [Angular](https://angular.io/) applications.
@@ -137,6 +139,13 @@ npm start
 
 Navigate to [http://127.0.0.1:8875/examples/](http://127.0.0.1:8875/examples/) in the opened browser window. Explore the **examples** folder of this repository for the examples source code.
 
+### <a name="jquery integration"></a>Include jQuery integration ###
+Starting with version 17.2, DevExtreme doesn't depend on jQuery. It means that our widgets work without jQuery elements. If you need to use jQuery, you can include the jQuery integration as described below:
+
+```js
+import 'devextreme/integration/jquery';
+```
+
 ## <a name="usage-samples"></a>Usage Samples ##
 
 ### <a name="static-option"></a>Static String Option Value ###

examples/systemjs.config.js

@@ -18,7 +18,6 @@
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
       // devextreme & devextreme deps
       'devextreme': 'npm:devextreme',
-      'jquery': 'npm:jquery/dist/jquery.min.js',
       'jszip': 'npm:jszip/dist/jszip.min.js',
       '../../dist': '../../dist',
       // other libraries

karma.conf.js

@@ -28,7 +28,6 @@ module.exports = function(config) {
             { pattern: 'node_modules/@angular/!(compiler-cli|tsc-wrapped)/**/*.+(js|js.map)', included: false, watched: false },
 
             // DevExtreme & DevExtreme Deps
-            { pattern: 'node_modules/jquery/dist/jquery.min.js', included: false, watched: false },
             { pattern: 'node_modules/jszip/dist/jszip.min.js', included: false, watched: false },
             { pattern: 'node_modules/devextreme/**/*.js', included: false, watched: false },
 

karma.systemjs.conf.js

@@ -26,7 +26,6 @@
 
       // devextreme & devextreme deps
       'devextreme': 'npm:devextreme',
-      'jquery': 'npm:jquery/dist/jquery.min.js',
       'jszip': 'npm:jszip/dist/jszip.min.js',
 
       // other libraries

karma.test.shim.js

@@ -31,11 +31,6 @@ System.import('karma.systemjs.conf.js')
             browserTesting.BrowserDynamicTestingModule,
             browserTesting.platformBrowserDynamicTesting());
   })
-  .then(function() {
-    return System.import('jquery').then(function($) {
-      $.noConflict(true); 
-    });
-  })
   .then(function() {
     return Promise.all(
       allSpecFiles.map(function (moduleName) {

package.json

@@ -16,17 +16,14 @@
   },
   "author": "Developer Express Inc.",
   "license": "MIT",
-  "dependencies": {
-    "jquery": "^2.0.0 || ^3.0.0"
-  },
   "peerDependencies": {
     "devextreme": "~17.2.1-0",
     "@angular/core": "^2.4.2 || ^4.0.0 || ^5.0.0-rc.1",
     "@angular/common": "^2.4.2 || ^4.0.0 || ^5.0.0-rc.1",
     "@angular/forms": "^2.4.2 || ^4.0.0 || ^5.0.0-rc.1"
   },
   "devDependencies": {
-    "devextreme": "~17.2.1-0",
+    "devextreme": "~17.2.1-pre-17291",
     "zone.js": "^0.8.17",
     "@angular/core": "^5.0.0-rc.1",
     "@angular/common": "^5.0.0-rc.1",
@@ -38,7 +35,6 @@
     "@angular/compiler-cli": "^5.0.0-rc.1",
     "@types/dot": "^1.0.29",
     "@types/jasmine": "2.5.38",
-    "@types/jquery": "ts2.0",
     "@types/mkdirp": "^0.3.29",
     "@types/node": "^6.0.51",
     "@types/yargs": "^6.3.2",

src/core/component.ts

@@ -9,15 +9,14 @@ import { DxTemplateDirective } from './template';
 import { IDxTemplateHost, DxTemplateHost } from './template-host';
 import { EmitterHelper } from './events-strategy';
 import { WatcherHelper } from './watcher-helper';
+import * as events from 'devextreme/events';
 import {
     INestedOptionContainer,
     ICollectionNestedOption,
     ICollectionNestedOptionContainer,
     CollectionNestedOptionContainerImpl
 } from './nested-option';
 
-import 'devextreme/integration/jquery';
-
 export abstract class DxComponent implements AfterViewInit,
         INestedOptionContainer, ICollectionNestedOptionContainer, IDxTemplateHost {
     private _initialOptions: any = {};
@@ -99,7 +98,8 @@ export abstract class DxComponent implements AfterViewInit,
     protected _destroyWidget() {
         if (this.instance) {
             let element = this.instance.element();
-            element.triggerHandler({ type: 'dxremove', _angularIntegration: true });
+            events.triggerHandler(element, { type: 'dxremove', _angularIntegration: true });
+            this.instance.dispose();
             element.remove();
         }
     }

src/core/nested-option.ts

@@ -1,9 +1,9 @@
 import { QueryList, ElementRef } from '@angular/core';
 
-declare function require(params: any): any;
-let $ = require('jquery');
-
 import { DX_TEMPLATE_WRAPPER_CLASS } from './template';
+import { Utils } from './utils';
+
+import * as events from 'devextreme/events';
 
 const VISIBILITY_CHANGE_SELECTOR = 'dx-visibility-change-handler';
 
@@ -126,6 +126,29 @@ export abstract class CollectionNestedOption extends BaseNestedOption implements
 export interface IOptionWithTemplate extends BaseNestedOption {
     template: any;
 }
+
+let triggerShownEvent = function(element) {
+    let changeHandlers = [],
+        containsSelector = false;
+
+    if (element.classList) {
+        containsSelector = element.classList.contains(VISIBILITY_CHANGE_SELECTOR);
+    } else {
+        containsSelector = element.className.split(' ').indexOf(VISIBILITY_CHANGE_SELECTOR) >= 0;
+    }
+
+    if (containsSelector) {
+        changeHandlers.push(element);
+    }
+
+
+    changeHandlers.push.apply(changeHandlers, element.querySelectorAll('.' + VISIBILITY_CHANGE_SELECTOR));
+
+    for (let i = 0; i < changeHandlers.length; i++) {
+        events.triggerHandler(changeHandlers[i], 'dxshown');
+    }
+};
+
 export function extractTemplate(option: IOptionWithTemplate, element: ElementRef) {
     if (!option.template === undefined || !element.nativeElement.hasChildNodes()) {
         return;
@@ -144,40 +167,28 @@ export function extractTemplate(option: IOptionWithTemplate, element: ElementRef
         return;
     }
 
-    function triggerShownEvent($element) {
-        let changeHandlers = $();
-
-        if ($element.hasClass(VISIBILITY_CHANGE_SELECTOR)) {
-            changeHandlers = $element;
-        }
-
-        changeHandlers = changeHandlers.add($element.find('.' + VISIBILITY_CHANGE_SELECTOR));
-
-        for (let i = 0; i < changeHandlers.length; i++) {
-            $(changeHandlers[i]).triggerHandler('dxshown');
-        }
-    }
-
     option.template = {
         render: (renderData) => {
-            let $result = $(element.nativeElement).addClass(DX_TEMPLATE_WRAPPER_CLASS);
+            let result = element.nativeElement;
+
+            Utils.addClass(result, DX_TEMPLATE_WRAPPER_CLASS);
 
             if (renderData.container) {
-                let container = renderData.container.get(0);
+                let container = Utils.getElement(renderData.container);
                 let resultInContainer = container.contains(element.nativeElement);
 
-                renderData.container.append(element.nativeElement);
+                container.appendChild(element.nativeElement);
 
                 if (!resultInContainer) {
                     let resultInBody = document.body.contains(container);
 
                     if (resultInBody) {
-                        triggerShownEvent($result);
+                        triggerShownEvent(result);
                     }
                 }
             }
 
-            return $result;
+            return result;
         }
     };
 }

src/core/template.ts

@@ -10,9 +10,8 @@ import {
 } from '@angular/core';
 
 import { DxTemplateHost } from './template-host';
-
-declare function require(params: any): any;
-let $ = require('jquery');
+import { Utils } from './utils';
+import * as events from 'devextreme/events';
 
 export const DX_TEMPLATE_WRAPPER_CLASS = 'dx-template-wrapper';
 
@@ -44,22 +43,29 @@ export class DxTemplateDirective {
             '$implicit': renderData.model,
             index: renderData.index
         });
+        let container = Utils.getElement(renderData.container);
         if (renderData.container) {
-            renderData.container.append(childView.rootNodes);
+            childView.rootNodes.forEach((element) => {
+                container.appendChild(element);
+            });
         }
         // =========== WORKAROUND =============
         // https://github.com/angular/angular/issues/12243
         this.ngZone.run(() => {
             childView['detectChanges']();
         });
         // =========== /WORKAROUND =============
-        return $(childView.rootNodes)
-            .addClass(DX_TEMPLATE_WRAPPER_CLASS)
-            .one('dxremove', (e) => {
+        childView.rootNodes.forEach((element) => {
+            Utils.addClass(element, DX_TEMPLATE_WRAPPER_CLASS);
+
+            events.one(element, 'dxremove', (e) => {
                 if (!e._angularIntegration) {
                     childView.destroy();
                 }
             });
+        });
+
+        return childView.rootNodes;
     }
 }
 

src/core/utils.ts

@@ -0,0 +1,15 @@
+export class Utils {
+    public static addClass(element: any, name: string) {
+        if (element.nodeType === 1) {
+            if (element.classList) {
+                element.classList.add(name);
+            } else {
+                element.className = element.className ? element.className + ' ' + name : name;
+            }
+        }
+    };
+
+    public static getElement(element: any) {
+         return element.get ? element.get(0) : element;
+    };
+}

tests/src/core/component-extension.spec.ts

@@ -23,7 +23,7 @@ import DxButton from 'devextreme/ui/button';
 let DxTestExtension = DxButton['inherit']({
     _render() {
         this.callBase();
-        this.element()[0].classList.add('dx-test-extension');
+        this.element().classList.add('dx-test-extension');
     }
 });
 

tests/src/core/component.spec.ts

@@ -30,7 +30,7 @@ import DxButton from 'devextreme/ui/button';
 let DxTestWidget = DxButton['inherit']({
     _render() {
         this.callBase();
-        this.element()[0].classList.add('dx-test-widget');
+        this.element().classList.add('dx-test-widget');
         this.option('testCalculatedOption', 'changed');
     }
 });
@@ -136,7 +136,7 @@ describe('DevExtreme Angular widget', () => {
         let fixture = TestBed.createComponent(TestContainerComponent);
         fixture.detectChanges();
 
-        let element = getWidget(fixture).element().get(0);
+        let element = getWidget(fixture).element();
 
         expect(element.classList).toContain('dx-test-widget');
 

tests/src/core/nested-option.spec.ts

@@ -33,14 +33,14 @@ import {
     extractTemplate
 } from '../../../dist/core/nested-option';
 
-let $ = require('jquery');
+import * as events from 'devextreme/events';
 
 // TODO: Try to replace dxButton to Widget ('require' required)
 import DxButton from 'devextreme/ui/button';
 let DxTestWidget = DxButton['inherit']({
     _render() {
         this.callBase();
-        this.element()[0].classList.add('dx-test-widget');
+        this.element().classList.add('dx-test-widget');
     }
 });
 
@@ -124,16 +124,18 @@ export class DxiTestCollectionOptionWithTemplateComponent extends CollectionNest
     }
 
     ngAfterViewInit() {
-        let $element = $(this.element.nativeElement);
+        let element = this.element.nativeElement;
 
         extractTemplate(this, this.element);
 
-        $element.addClass('dx-visibility-change-handler');
-        $element.on('dxshown', function() {
+        element.classList.add('dx-visibility-change-handler');
+        events.on(element, 'dxshown', function() {
             this.shownEventFired = true;
         }.bind(this));
 
-        this.template.render({ container: $('dx-test-widget') });
+        this.template.render({
+            container: document.querySelector('dx-test-widget')
+        });
     }
 }
 

tests/src/core/template.spec.ts

@@ -1,7 +1,5 @@
 /* tslint:disable:component-selector */
 
-import $ = require('jquery');
-
 import {
     Component,
     ElementRef,
@@ -31,7 +29,7 @@ import {
 import DxButton from 'devextreme/ui/button';
 let DxTestWidget = DxButton['inherit']({
     _render() {
-        this.element()[0].classList.add('dx-test-widget');
+        this.element().classList.add('dx-test-widget');
     }
 });
 
@@ -87,7 +85,7 @@ export class DxTestComponent extends DxComponent implements AfterViewInit {
     ngAfterViewInit() {
         this.templates[0].render({
             model: {},
-            container: $(this.element.nativeElement),
+            container: this.element.nativeElement,
             index: 5
         });
     }
@@ -156,13 +154,14 @@ describe('DevExtreme Angular widget\'s template', () => {
             innerComponent = testComponent.innerWidgets.first,
             templatesHash = innerComponent.instance.option('integrationOptions.templates'),
             template = innerComponent.testTemplate,
-            $container = $('<div>');
+            container = document.createElement('div');
 
         expect(template).not.toBeUndefined;
 
-        templatesHash[template].render({ container: $container });
+        templatesHash[template].render({ container: container });
         fixture.detectChanges();
-        expect($container.children().eq(0).hasClass('dx-template-wrapper')).toBe(true);
+
+        expect(container.children[0].classList.contains('dx-template-wrapper')).toBe(true);
 
     }));
 
@@ -171,7 +170,7 @@ describe('DevExtreme Angular widget\'s template', () => {
         TestBed.overrideComponent(TestContainerComponent, {
             set: {
                 template: `
-            <dx-test> 
+            <dx-test>
                 <div *dxTemplate="let d of 'templateName'; let i = index">index: {{i}}</div>
             </dx-test>
            `}