William S William S - 1 month ago 20
TypeScript Question

How do I import a jQuery plugin via webpack and put it under $/jQuery? (ES6 + TypeScript)

I have these lines of code:

import * as $ from "jquery";
import * as jQuery from "jquery";
import "exports?Arrive!arrive";


The arrivejs npm package is a jquery plugin. It lacked module.exports and basically just had "var Arrive" in it. Thanks to WebPack I managed to get it into my app, but now I want to put its methods underneath jQuery and $. Like following

$.arrive(".coolclass", function() { // do something });
jQuery.arrive(".coolclass", function() { // do something });


I have made by own interface for arrivejs. I recently added JQueryStatic because it didn't seem to work otherwise (I just started following ES6 compliancy)

interface JQuery {
arrive(selector: string, options: ArriveOptions, callback: Function): JQuery;
arrive(selector: string, callback: Function): JQuery;
unbindArrive(): JQuery;
unbindArrive(selector: string): JQuery;
unbindArrive(callback: Function): JQuery;
unbindArrive(selector: string, callback: Function): JQuery;
unbindAllArrive(): JQuery;
leave(selector: string, options: LeaveOptions, callback: Function): JQuery;
leave(selector: string, callback: Function): JQuery;
unbindLeave(): JQuery;
unbindLeave(selector: string): JQuery;
unbindLeave(callback: Function): JQuery;
unbindLeave(selector: string, callback: Function): JQuery;
unbindAllLeave(): JQuery;
}

interface JQueryStatic {
arrive(selector: string, options: ArriveOptions, callback: Function): JQuery;
arrive(selector: string, callback: Function): JQuery;
unbindArrive(): JQuery;
unbindArrive(selector: string): JQuery;
unbindArrive(callback: Function): JQuery;
unbindArrive(selector: string, callback: Function): JQuery;
unbindAllArrive(): JQuery;
leave(selector: string, options: LeaveOptions, callback: Function): JQuery;
leave(selector: string, callback: Function): JQuery;
unbindLeave(): JQuery;
unbindLeave(selector: string): JQuery;
unbindLeave(callback: Function): JQuery;
unbindLeave(selector: string, callback: Function): JQuery;
unbindAllLeave(): JQuery;
}


Is there any way to achieve this? I've been at it for hours now..

Update: I want to put arrive and the rest under window/jquery elements.

Currently, this is working properly:

document.arrive("div", function () { console.log("works!");});


But I want to change that to

$(document).arrive("div", function () { console.log("works!");});

Answer

For anyone who was struggling with this for my particular situation (ES6, Typescript, webpack), I had to add this to the top of the arrive.js file.

window.$ = window.jQuery = require("jquery");

Then when I imported arrive to global scope, I had to do it like this:

import * as $ from "jquery"; //Present since before, likely relevant
import * as jQuery from "jquery"; //Present since before, likely relevant

import "exports?Arrive!arrive"; // <-

Thanks to Uzair for supporting me on Skype. His answer makes perfect sense too, just wasn't directly relevant to my issue.

As a bonus, this is what my typescript definition looks like for arrive. I haven't made a PR with it because I haven't written tests for it (required to submit) but someone is free to do it for me, or just create your own file straight off.

// Type definitions for Arrive 2.3.1
// Project: https://github.com/uzairfarooq/arrive
// Definitions by: William Bernting <https://github.com/qvazzler>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

interface ArriveOptions {
    fireOnAttributesModification?: boolean;
    onceOnly?: boolean;
    existing?: boolean;
}

interface LeaveOptions {
    fireOnAttributesModification?: boolean;
    onceOnly?: boolean;
    existing?: boolean;
}

interface Document {
    arrive(selector: string, options: ArriveOptions, callback: Function): JQuery;
    arrive(selector: string, callback: Function): JQuery;
    unbindArrive(): JQuery;
    unbindArrive(selector: string): JQuery;
    unbindArrive(callback: Function): JQuery;
    unbindArrive(selector: string, callback: Function): JQuery;
    unbindAllArrive(): JQuery;
    leave(selector: string, options: LeaveOptions, callback: Function): JQuery;
    leave(selector: string, callback: Function): JQuery;
    unbindLeave(): JQuery;
    unbindLeave(selector: string): JQuery;
    unbindLeave(callback: Function): JQuery;
    unbindLeave(selector: string, callback: Function): JQuery;
    unbindAllLeave(): JQuery;
}

interface JQuery {
    arrive(selector: string, options: ArriveOptions, callback: Function): JQuery;
    arrive(selector: string, callback: Function): JQuery;
    unbindArrive(): JQuery;
    unbindArrive(selector: string): JQuery;
    unbindArrive(callback: Function): JQuery;
    unbindArrive(selector: string, callback: Function): JQuery;
    unbindAllArrive(): JQuery;
    leave(selector: string, options: LeaveOptions, callback: Function): JQuery;
    leave(selector: string, callback: Function): JQuery;
    unbindLeave(): JQuery;
    unbindLeave(selector: string): JQuery;
    unbindLeave(callback: Function): JQuery;
    unbindLeave(selector: string, callback: Function): JQuery;
    unbindAllLeave(): JQuery;
}
Comments