Bump dependencies, add missing typing libraries (#2753)

* Bump dependencies and add missing typing libraries

* Fix expose-loader breaking changes

* Expose jQuery using its own typings instead of ours

* Extend jQuery typings with our own custom $.fn helpers

* Use jQuery typings for Component's `this.$` attribute

* Format webpack config file

* Use Spin.js 3.1.0

framework/core/js/package.json

@@ -2,29 +2,33 @@
   "private": true,
   "name": "@flarum/core",
   "dependencies": {
-    "@babel/preset-typescript": "^7.10.1",
-    "@types/mithril": "^2.0.3",
     "bootstrap": "^3.4.1",
     "clsx": "^1.1.1",
     "color-thief-browser": "^2.0.2",
-    "dayjs": "^1.8.28",
+    "dayjs": "^1.10.4",
-    "expose-loader": "^0.7.5",
+    "expose-loader": "^1.0.3",
-    "flarum-webpack-config": "0.1.0-beta.10",
+    "jquery": "^3.6.0",
-    "jquery": "^3.5.1",
     "jquery.hotkeys": "^0.1.0",
-    "lodash-es": "^4.17.14",
+    "lodash-es": "^4.17.21",
     "mithril": "^2.0.4",
     "punycode": "^2.1.1",
     "spin.js": "^3.1.0",
-    "textarea-caret": "^3.1.0",
+    "textarea-caret": "^3.1.0"
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-merge": "^4.1.4"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.13.0",
+    "@types/jquery": "^3.5.5",
+    "@types/lodash-es": "^4.17.4",
+    "@types/mithril": "^2.0.7",
+    "@types/punycode": "^2.1.0",
+    "@types/textarea-caret": "^3.0.0",
     "bundlewatch": "^0.3.2",
-    "husky": "^4.2.5",
+    "flarum-webpack-config": "0.1.0-beta.10",
-    "prettier": "2.0.2"
+    "husky": "^4.3.8",
+    "prettier": "^2.2.1",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-merge": "^4.2.2"
   },
   "scripts": {
     "dev": "webpack --mode development --watch",

framework/core/js/shims.d.ts

@@ -19,9 +19,21 @@ import Application from './src/common/Application';
  * to (and should not) bundle these themselves.
  */
 declare global {
-  const $: typeof _$;
+  // $ is already defined by `@types/jquery`
   const m: Mithril.Static;
   const dayjs: typeof _dayjs;
+
+  // Extend JQuery with our custom functions, defined with $.fn
+  interface JQuery {
+    /**
+     * Creates a tooltip on a jQuery element reference.
+     *
+     * Optionally accepts placement and delay options.
+     *
+     * Returns the same reference to allow for method chaining.
+     */
+    tooltip: (tooltipOptions?: { placement?: 'top' | 'bottom' | 'left' | 'right'; delay?: number }) => JQuery;
+  }
 }
 
 /**

framework/core/js/src/common/Component.ts

@@ -77,12 +77,12 @@ export default abstract class Component<T extends ComponentAttrs = ComponentAttr
    * containing all of the `li` elements inside the DOM element of this
    * component.
    *
-   * @param {String} [selector] a jQuery-compatible selector string
+   * @param [selector] a jQuery-compatible selector string
-   * @returns {jQuery} the jQuery object for the DOM node
+   * @returns the jQuery object for the DOM node
    * @final
    */
-  protected $(selector) {
+  protected $(selector: string): JQuery {
-    const $element = $(this.element);
+    const $element = $(this.element) as JQuery<HTMLElement>;
 
     return selector ? $element.find(selector) : $element;
   }
@@ -94,7 +94,7 @@ export default abstract class Component<T extends ComponentAttrs = ComponentAttr
    * @see https://mithril.js.org/hyperscript.html#mselector,-attributes,-children
    */
   static component(attrs = {}, children = null): Mithril.Vnode {
-    const componentAttrs = Object.assign({}, attrs);
+    const componentAttrs = Object.assign({}, attrs) as Record<string, unknown>;
 
     return m(this as any, componentAttrs, children);
   }

framework/core/js/src/common/index.js

@@ -1,6 +1,8 @@
-import 'expose-loader?$!expose-loader?jQuery!jquery';
+// Expose jQuery, mithril and dayjs to the window browser object
-import 'expose-loader?m!mithril';
+import 'expose-loader?exposes[]=$&exposes[]=jQuery!jquery';
-import 'expose-loader?dayjs!dayjs';
+import 'expose-loader?exposes=m!mithril';
+import 'expose-loader?exposes=dayjs!dayjs';
+
 import 'bootstrap/js/affix';
 import 'bootstrap/js/dropdown';
 import 'bootstrap/js/modal';

framework/core/js/src/forum/index.js

@@ -1,5 +1,6 @@
-import 'expose-loader?punycode!punycode';
+// Expose punycode and ColorThief to the window browser object
-import 'expose-loader?ColorThief!color-thief-browser';
+import 'expose-loader?exposes=punycode!punycode';
+import 'expose-loader?exposes=ColorThief!color-thief-browser';
 
 import app from './app';
 

framework/core/js/webpack.config.js

@@ -3,7 +3,7 @@ const merge = require('webpack-merge');
 
 module.exports = merge(config(), {
   output: {
-    library: 'flarum.core'
+    library: 'flarum.core',
   },
 
   // temporary TS configuration