Convert to Typescript (#34)

extensions/pusher/.gitignore

@@ -1,6 +1,8 @@
 /vendor
+composer.lock
 composer.phar
 .DS_Store
 Thumbs.db
 node_modules
 js/dist/*
+.idea

extensions/pusher/js/package.json

@@ -1,13 +1,20 @@
 {
   "private": true,
   "name": "@flarum/pusher",
+  "prettier": "@flarum/prettier-config",
   "dependencies": {
     "flarum-webpack-config": "^1.0.0",
+    "pusher-js": "^7.0.3",
     "webpack": "^4.46.0",
-    "webpack-cli": "^4.9.0"
+    "webpack-cli": "^4.9.1"
   },
   "scripts": {
     "dev": "webpack --mode development --watch",
     "build": "webpack --mode production"
+  },
+  "devDependencies": {
+    "@flarum/prettier-config": "^1.0.0",
+    "flarum-tsconfig": "^1.0.2",
+    "prettier": "^2.5.1"
   }
 }

extensions/pusher/js/shims.d.ts

@@ -0,0 +1,15 @@
+import * as PusherTypes from 'pusher-js';
+
+declare module 'flarum/forum/ForumApplication' {
+  export default interface ForumApplication {
+    pusher: Promise<{
+      channels: {
+        main: PusherTypes.Channel;
+        user: PusherTypes.Channel | null;
+      };
+      pusher: PusherTypes.default;
+    }>;
+
+    pushedUpdates: Array<any>;
+  }
+}

extensions/pusher/js/src/admin/index.ts

@@ -1,6 +1,6 @@
-import app from 'flarum/app';
+import app from 'flarum/admin/app';
 
-app.initializers.add('flarum-pusher', app => {
+app.initializers.add('flarum-pusher', () => {
   app.extensionData
     .for('flarum-pusher')
     .registerSetting(

extensions/pusher/js/src/forum/index.ts

@@ -1,43 +1,43 @@
-/*global Pusher*/
-
-import { extend } from 'flarum/extend';
-import app from 'flarum/app';
-import DiscussionList from 'flarum/components/DiscussionList';
-import DiscussionPage from 'flarum/components/DiscussionPage';
-import IndexPage from 'flarum/components/IndexPage';
-import Button from 'flarum/components/Button';
+import * as PusherTypes from 'pusher-js';
+import app from 'flarum/forum/app';
+import { extend } from 'flarum/common/extend';
+import DiscussionList from 'flarum/forum/components/DiscussionList';
+import DiscussionPage from 'flarum/forum/components/DiscussionPage';
+import IndexPage from 'flarum/forum/components/IndexPage';
+import Button from 'flarum/common/components/Button';
+import ItemList from 'flarum/common/utils/ItemList';
+import { VnodeDOM } from 'Mithril';
 
 app.initializers.add('flarum-pusher', () => {
-  const loadPusher = new Promise((resolve) => {
+  app.pusher = new Promise((resolve) => {
     $.getScript('//cdn.jsdelivr.net/npm/pusher-js@7.0.3/dist/web/pusher.min.js', () => {
-      const socket = new Pusher(app.forum.attribute('pusherKey'), {
-        authEndpoint: app.forum.attribute('apiUrl') + '/pusher/auth',
+      const socket: PusherTypes.default = new Pusher(app.forum.attribute('pusherKey'), {
+        authEndpoint: `${app.forum.attribute('apiUrl')}/pusher/auth`,
         cluster: app.forum.attribute('pusherCluster'),
         auth: {
           headers: {
-            'X-CSRF-Token': app.session.csrfToken
-          }
-        }
+            'X-CSRF-Token': app.session.csrfToken,
+          },
+        },
       });
 
       return resolve({
         channels: {
           main: socket.subscribe('public'),
-          user: app.session.user ? socket.subscribe('private-user' + app.session.user.id()) : null
+          user: app.session.user ? socket.subscribe(`private-user${app.session.user.id()}`) : null,
         },
-        pusher: socket
+        pusher: socket,
       });
     });
   });
 
-  app.pusher = loadPusher;
   app.pushedUpdates = [];
 
-  extend(DiscussionList.prototype, 'oncreate', function() {
-    app.pusher.then(binding => {
+  extend(DiscussionList.prototype, 'oncreate', function () {
+    app.pusher.then((binding) => {
       const pusher = binding.pusher;
 
-      pusher.bind('newPost', data => {
+      pusher.bind('newPost', (data: { tagIds: number[]; discussionId: number }) => {
         const params = app.discussions.getParams();
 
         if (!params.q && !params.sort && !params.filter) {
@@ -64,30 +64,33 @@ app.initializers.add('flarum-pusher', () => {
   });
 
   extend(DiscussionList.prototype, 'onremove', function () {
-    app.pusher.then(binding => {
+    app.pusher.then((binding) => {
       binding.pusher.unbind('newPost');
     });
   });
 
-  extend(DiscussionList.prototype, 'view', function(vdom) {
+  extend(DiscussionList.prototype, 'view', function (vdom: VnodeDOM) {
     if (app.pushedUpdates) {
       const count = app.pushedUpdates.length;
 
       if (count) {
         vdom.children.unshift(
-          Button.component({
-            className: 'Button Button--block DiscussionList-update',
-            onclick: () => {
-              this.attrs.state.refresh().then(() => {
-                this.loadingUpdated = false;
-                app.pushedUpdates = [];
-                app.setTitleCount(0);
-                m.redraw();
-              });
-              this.loadingUpdated = true;
+          Button.component(
+            {
+              className: 'Button Button--block DiscussionList-update',
+              onclick: () => {
+                this.attrs.state.refresh().then(() => {
+                  this.loadingUpdated = false;
+                  app.pushedUpdates = [];
+                  app.setTitleCount(0);
+                  m.redraw();
+                });
+                this.loadingUpdated = true;
+              },
+              loading: this.loadingUpdated,
             },
-            loading: this.loadingUpdated
-          }, app.translator.trans('flarum-pusher.forum.discussion_list.show_updates_text', { count }))
+            app.translator.trans('flarum-pusher.forum.discussion_list.show_updates_text', { count })
+          )
         );
       }
     }
@@ -97,7 +100,8 @@ app.initializers.add('flarum-pusher', () => {
   // update button showing.
   // TODO: Might be better pause the response to the push updates while the
   // composer is loading? idk
-  extend(DiscussionList.prototype, 'addDiscussion', function(returned, discussion) {
+  // TODO: It seems that this is not used
+  extend(DiscussionList.prototype, 'addDiscussion', function (returned, discussion) {
     const index = app.pushedUpdates.indexOf(discussion.id());
 
     if (index !== -1) {
@@ -111,11 +115,11 @@ app.initializers.add('flarum-pusher', () => {
     m.redraw();
   });
 
-  extend(DiscussionPage.prototype, 'oncreate', function() {
-    app.pusher.then(binding => {
+  extend(DiscussionPage.prototype, 'oncreate', function () {
+    app.pusher.then((binding) => {
       const pusher = binding.pusher;
 
-      pusher.bind('newPost', data => {
+      pusher.bind('newPost', (data: { discussionId: number }) => {
         const id = String(data.discussionId);
 
         if (this.discussion && this.discussion.id() === id && this.stream) {
@@ -136,23 +140,23 @@ app.initializers.add('flarum-pusher', () => {
   });
 
   extend(DiscussionPage.prototype, 'onremove', function () {
-    app.pusher.then(binding => {
+    app.pusher.then((binding) => {
       binding.pusher.unbind('newPost');
     });
   });
 
-  extend(IndexPage.prototype, 'actionItems', items => {
+  extend(IndexPage.prototype, 'actionItems', (items: ItemList) => {
     items.remove('refresh');
   });
 
-  app.pusher.then(binding => {
+  app.pusher.then((binding) => {
     const channels = binding.channels;
 
     if (channels.user) {
       channels.user.bind('notification', () => {
         app.session.user.pushAttributes({
           unreadNotificationCount: app.session.user.unreadNotificationCount() + 1,
-          newNotificationCount: app.session.user.newNotificationCount() + 1
+          newNotificationCount: app.session.user.newNotificationCount() + 1,
         });
         app.notifications.clear();
         m.redraw();

extensions/pusher/js/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "flarum-tsconfig",
+  "include": ["src/**/*", "../vendor/flarum/core/js/dist-typings/@types/**/*"],
+  "files": ["shims.d.ts"],
+  "compilerOptions": {
+    "declarationDir": "./dist-typings",
+    "baseUrl": ".",
+    "paths": {
+      "flarum/*": ["../vendor/flarum/core/js/dist-typings/*"]
+    }
+  }
+}