Integration: move files to ts (jquery) (#31692)

Author: anna-shakhova

packages/devextreme/js/__internal/integration/jquery.ts

@@ -0,0 +1,26 @@
+/* eslint-disable import/first */
+
+import errors from '@ts/core/utils/m_error';
+import { compare as compareVersions } from '@ts/core/utils/m_version';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import jQuery from 'jquery';
+
+import useJQueryMethod from './jquery/use_jquery';
+
+const useJQuery = useJQueryMethod();
+
+if (useJQuery && compareVersions(jQuery.fn.jquery, [1, 10]) < 0) {
+  // @ts-expect-error
+  throw errors.Error('E0012');
+}
+
+import './jquery/renderer';
+import './jquery/hooks';
+import './jquery/deferred';
+import './jquery/hold_ready';
+import './jquery/events';
+import './jquery/easing';
+import './jquery/element_data';
+import './jquery/element';
+import './jquery/component_registrator';
+import './jquery/ajax';

packages/devextreme/js/__internal/integration/jquery/ajax.ts

@@ -0,0 +1,20 @@
+import { Ajax } from '@ts/core/utils/m_ajax';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import jQuery from 'jquery';
+
+import useJQueryFn from './use_jquery';
+
+const useJQuery = useJQueryFn();
+
+if (useJQuery) {
+  Ajax.inject({
+    sendRequest(options) {
+      if (!options.responseType && !options.upload) {
+        return jQuery.ajax(options);
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return this.callBase.apply(this, [options]);
+    },
+  });
+}

packages/devextreme/js/__internal/integration/jquery/component_registrator.ts

@@ -0,0 +1,55 @@
+import { componentRegistratorCallbacks } from '@ts/core/m_component_registrator_callbacks';
+import errors from '@ts/core/m_errors';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import jQuery from 'jquery';
+
+if (jQuery) {
+  // eslint-disable-next-line func-names
+  const registerJQueryComponent = function (name, componentClass): void {
+    // @ts-expect-error
+    // eslint-disable-next-line func-names
+    jQuery.fn[name] = function (options): unknown {
+      const isMemberInvoke = typeof options === 'string';
+      // eslint-disable-next-line @typescript-eslint/init-declarations
+      let result: unknown | undefined;
+
+      if (isMemberInvoke) {
+        const memberName = options;
+        // eslint-disable-next-line prefer-rest-params
+        const memberArgs = [].slice.call(arguments).slice(1);
+
+        this.each(function () {
+          const instance = componentClass.getInstance(this);
+
+          if (!instance) {
+            throw errors.Error('E0009', name);
+          }
+
+          const member = instance[memberName];
+          const memberValue = member.apply(instance, memberArgs);
+
+          if (result === undefined) {
+            result = memberValue;
+          }
+        });
+      } else {
+        this.each(function () {
+          const instance = componentClass.getInstance(this);
+          if (instance) {
+            instance.option(options);
+          } else {
+            // eslint-disable-next-line no-new,new-cap
+            new componentClass(this, options);
+          }
+        });
+
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        result = this;
+      }
+
+      return result;
+    };
+  };
+
+  componentRegistratorCallbacks.add(registerJQueryComponent);
+}

packages/devextreme/js/__internal/integration/jquery/deferred.ts

@@ -0,0 +1,36 @@
+import type { DeferredObj } from '@js/core/utils/deferred';
+import { setStrategy } from '@ts/core/utils/m_deferred';
+import { compare as compareVersion } from '@ts/core/utils/m_version';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import jQuery from 'jquery';
+
+import useJQueryFn from './use_jquery';
+
+const useJQuery = useJQueryFn();
+
+if (useJQuery) {
+  const { Deferred } = jQuery;
+  const strategy = { Deferred };
+
+  // @ts-expect-error
+  strategy.when = compareVersion(jQuery.fn.jquery, [3]) < 0
+    ? jQuery.when
+    // eslint-disable-next-line func-names
+    : function (singleArg): DeferredObj<unknown> {
+      if (arguments.length === 0) {
+        // @ts-expect-error
+        return (new Deferred() as DeferredObj<unknown>).resolve();
+      } if (arguments.length === 1) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return singleArg?.then
+          ? singleArg
+          // @ts-expect-error
+          : (new Deferred() as DeferredObj<unknown>).resolve(singleArg);
+      }
+      // @ts-expect-error
+      // eslint-disable-next-line prefer-spread, prefer-rest-params
+      return jQuery.when.apply(jQuery, arguments);
+    };
+
+  setStrategy(strategy);
+}

packages/devextreme/js/__internal/integration/jquery/easing.ts

@@ -0,0 +1,7 @@
+import { setEasing } from '@ts/common/core/animation/easing';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import jQuery from 'jquery';
+
+if (jQuery) {
+  setEasing(jQuery.easing);
+}

packages/devextreme/js/__internal/integration/jquery/element.ts

@@ -0,0 +1,16 @@
+import { setPublicElementWrapper } from '@ts/core/m_element';
+
+import useJQueryFn from './use_jquery';
+
+const useJQuery = useJQueryFn();
+
+// eslint-disable-next-line @stylistic/max-len
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types
+export function getPublicElementJQuery($element) {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return $element;
+}
+
+if (useJQuery) {
+  setPublicElementWrapper(getPublicElementJQuery);
+}

packages/devextreme/js/__internal/integration/jquery/element_data.ts

@@ -0,0 +1,11 @@
+import { setDataStrategy } from '@ts/core/m_element_data';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import jQuery from 'jquery';
+
+import useJQueryFn from './use_jquery';
+
+const useJQuery = useJQueryFn();
+
+if (useJQuery) {
+  setDataStrategy(jQuery);
+}

packages/devextreme/js/__internal/integration/jquery/events.ts

@@ -0,0 +1,54 @@
+import registerEventCallbacks from '@js/common/core/events/core/event_registrator_callbacks';
+import domAdapter from '@ts/core/m_dom_adapter';
+import eventsEngine from '@ts/events/core/m_events_engine';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import jQuery from 'jquery';
+
+import useJQueryFn from './use_jquery';
+
+const useJQuery = useJQueryFn();
+
+if (useJQuery) {
+  registerEventCallbacks.add((name, eventObject) => {
+    jQuery.event.special[name] = eventObject;
+  });
+
+  if (eventsEngine.passiveEventHandlersSupported()) {
+    eventsEngine.forcePassiveFalseEventNames.forEach((eventName) => {
+      jQuery.event.special[eventName] = {
+        setup(data, namespaces, handler): void {
+          domAdapter.listen(this, eventName, handler, { passive: false });
+        },
+      };
+    });
+  }
+
+  eventsEngine.set({
+    on(element) {
+      // @ts-expect-error
+      // eslint-disable-next-line prefer-spread,prefer-rest-params
+      jQuery(element).on.apply(jQuery(element), Array.prototype.slice.call(arguments, 1));
+    },
+    one(element) {
+      // @ts-expect-error
+      // eslint-disable-next-line prefer-spread,prefer-rest-params
+      jQuery(element).one.apply(jQuery(element), Array.prototype.slice.call(arguments, 1));
+    },
+    off(element) {
+      // @ts-expect-error
+      // eslint-disable-next-line prefer-spread,prefer-rest-params
+      jQuery(element).off.apply(jQuery(element), Array.prototype.slice.call(arguments, 1));
+    },
+    trigger(element) {
+      // @ts-expect-error
+      // eslint-disable-next-line prefer-spread,prefer-rest-params
+      jQuery(element).trigger.apply(jQuery(element), Array.prototype.slice.call(arguments, 1));
+    },
+    triggerHandler(element) {
+      // @ts-expect-error
+      // eslint-disable-next-line prefer-spread,prefer-rest-params,@stylistic/max-len
+      jQuery(element).triggerHandler.apply(jQuery(element), Array.prototype.slice.call(arguments, 1));
+    },
+    Event: jQuery.Event,
+  });
+}

packages/devextreme/js/__internal/integration/jquery/hold_ready.ts

@@ -0,0 +1,17 @@
+import readyCallbacks from '@ts/core/utils/m_ready_callbacks';
+import { themeReadyCallback } from '@ts/ui/m_themes_callback';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import jQuery from 'jquery';
+
+if (jQuery && !themeReadyCallback.fired()) {
+  // @ts-expect-error
+  const holdReady = jQuery.holdReady || jQuery.fn.holdReady;
+
+  holdReady(true);
+
+  themeReadyCallback.add(() => {
+    readyCallbacks.add(() => {
+      holdReady(false);
+    });
+  });
+}

packages/devextreme/js/__internal/integration/jquery/hooks.ts

@@ -0,0 +1,125 @@
+import { each } from '@ts/core/utils/m_iterator';
+import { isNumeric } from '@ts/core/utils/m_type';
+import { compare as compareVersion } from '@ts/core/utils/m_version';
+import registerEvent from '@ts/events/core/m_event_registrator';
+import hookTouchProps from '@ts/events/core/m_hook_touch_props';
+import { setEventFixMethod } from '@ts/events/utils/index';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import jQuery from 'jquery';
+
+import useJQueryFn from './use_jquery';
+
+const useJQuery = useJQueryFn();
+
+if (useJQuery) {
+  if (compareVersion(jQuery.fn.jquery, [3]) < 0) {
+    const POINTER_TYPE_MAP = {
+      2: 'touch',
+      3: 'pen',
+      4: 'mouse',
+    };
+
+    each([
+      'MSPointerDown', 'MSPointerMove', 'MSPointerUp', 'MSPointerCancel', 'MSPointerOver', 'MSPointerOut', 'mouseenter', 'mouseleave',
+      'pointerdown', 'pointermove', 'pointerup', 'pointercancel', 'pointerover', 'pointerout', 'pointerenter', 'pointerleave',
+      // eslint-disable-next-line func-names
+    ], function () {
+      // @ts-expect-error
+      jQuery.event.fixHooks[this] = {
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        filter(event, originalEvent) {
+          const { pointerType } = originalEvent;
+
+          if (isNumeric(pointerType)) {
+            event.pointerType = POINTER_TYPE_MAP[pointerType];
+          }
+
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+          return event;
+        },
+        // @ts-expect-error
+        props: jQuery.event.mouseHooks.props.concat([
+          'pointerId',
+          'pointerType',
+          'originalTarget',
+          'width',
+          'height',
+          'pressure',
+          'result',
+          'tiltX',
+          'charCode',
+          'tiltY',
+          'detail',
+          'isPrimary',
+          'prevValue',
+        ]),
+      };
+    });
+
+    each(['touchstart', 'touchmove', 'touchend', 'touchcancel'], function () {
+      // @ts-expect-error
+      jQuery.event.fixHooks[this] = {
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        filter(event, originalEvent) {
+          hookTouchProps((name, hook) => {
+            event[name] = hook(originalEvent);
+          });
+
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+          return event;
+        },
+
+        // @ts-expect-error
+        props: jQuery.event.mouseHooks.props.concat([
+          'touches',
+          'changedTouches',
+          'targetTouches',
+          'detail',
+          'result',
+          'originalTarget',
+          'charCode',
+          'prevValue',
+        ]),
+      };
+    });
+
+    // @ts-expect-error
+    jQuery.event.fixHooks.wheel = jQuery.event.mouseHooks;
+
+    const DX_EVENT_HOOKS = {
+      // @ts-expect-error
+      props: jQuery.event.mouseHooks.props.concat(['pointerType', 'pointerId', 'pointers']),
+    };
+
+    registerEvent.callbacks.add((name) => {
+      // @ts-expect-error
+      jQuery.event.fixHooks[name] = DX_EVENT_HOOKS;
+    });
+
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    const fix = function (event, originalEvent) {
+      // @ts-expect-error
+      const fixHook = jQuery.event.fixHooks[originalEvent.type] || jQuery.event.mouseHooks;
+
+      // @ts-expect-error
+      const props = fixHook.props ? jQuery.event.props.concat(fixHook.props) : jQuery.event.props;
+      let propIndex: number = props.length;
+
+      // eslint-disable-next-line no-cond-assign
+      while (propIndex -= 1) {
+        const prop = props[propIndex];
+        event[prop] = originalEvent[prop];
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return fixHook.filter ? fixHook.filter(event, originalEvent) : event;
+    };
+
+    setEventFixMethod(fix);
+  } else {
+    hookTouchProps((name, hook) => {
+      // @ts-expect-error
+      jQuery.event.addProp(name, hook);
+    });
+  }
+}