chore: dist-typings & TS cleanup (#127)

* chore: `dist-typings` * chore: export `RankingImage` * chore: adjust shims * chore: typo * chore: resolve TS errors * chore: regression * chore: continue * refactor * chore * chore: remove default
FriendsOfFlarum · Nov 24, 2024 · 67759e6 · 67759e6
1 parent 83f80ac
commit 67759e6
Show file tree

Hide file tree

Showing 10 changed files with 1,457 additions and 931 deletions.
diff --git a/js/package.json b/js/package.json
@@ -3,19 +3,27 @@
     "private": true,
     "prettier": "@flarum/prettier-config",
     "dependencies": {
-        "flarum-webpack-config": "^2.0.0",
-        "flarum-tsconfig": "^1.0.2",
+        "lodash.debounce": "^4.0.8"
+    },
+    "devDependencies": {
         "@flarum/prettier-config": "^1.0.0",
-        "lodash.debounce": "^4.0.8",
+        "flarum-tsconfig": "^1.0.3",
+        "flarum-webpack-config": "^2.0.0",
+        "prettier": "^3.0.3",
+        "typescript-coverage-report": "^0.6.1",
         "webpack": "^5.89.0",
         "webpack-cli": "^5.1.4"
     },
     "scripts": {
         "dev": "webpack --mode development --watch",
         "build": "webpack --mode production",
-        "format": "prettier --write src"
-    },
-    "devDependencies": {
-        "prettier": "^3.0.3"
+        "analyze": "cross-env ANALYZER=true yarn run build",
+        "format": "prettier --write src",
+        "format-check": "prettier --check src",
+        "clean-typings": "npx rimraf dist-typings && mkdir dist-typings",
+        "build-typings": "yarn run clean-typings && ([ -e src/@types ] && cp -r src/@types dist-typings/@types || true) && tsc && yarn run post-build-typings",
+        "post-build-typings": "find dist-typings -type f -name '*.d.ts' -print0 | xargs -0 sed -i 's,../src/@types,@types,g'",
+        "check-typings": "tsc --noEmit --emitDeclarationOnly false",
+        "check-typings-coverage": "typescript-coverage-report"
     }
 }
diff --git a/js/src/@types/shims.d.ts b/js/src/@types/shims.d.ts
@@ -1,4 +1,9 @@
+import 'flarum/common/models/Discussion';
+import 'flarum/common/models/Post';
+import 'flarum/common/models/User';
+
 import Rank from '../common/models/Rank';
+import type User from 'flarum/common/models/User';
 
 declare module 'flarum/common/models/Discussion' {
   export default interface Discussion {
@@ -12,8 +17,8 @@ declare module 'flarum/common/models/Discussion' {
 
 declare module 'flarum/common/models/Post' {
   export default interface Post {
-    upvotes(): unknown;
-    downvotes(): unknown;
+    upvotes(): User[];
+    downvotes(): User[];
     votes(): number;
     canVote(): boolean;
     canSeeVotes(): boolean;

diff --git a/js/src/forum/addVotersToDiscussionPageSideBar.tsx b/js/src/forum/addVotersToDiscussionPageSideBar.tsx
@@ -10,7 +10,7 @@ import type Mithril from 'mithril';
  * Adds our custom {@link Voters} component to the discussion sidebar.
  */
 export default function addVotersToDiscussionPageSideBar() {
-  extend(DiscussionPage.prototype, 'sidebarItems', function (this: DiscussionPage, items: ItemList<Mithril.Chilren>) {
+  extend(DiscussionPage.prototype, 'sidebarItems', function (this: DiscussionPage, items: ItemList<Mithril.Children>) {
     const discussion = this.discussion;
     const posts = discussion!.posts() || [];
     const firstPost = posts?.[0];

diff --git a/js/src/forum/components/RankingImage.tsx b/js/src/forum/components/RankingImage.tsx
@@ -1,9 +1,8 @@
 import app from 'flarum/forum/app';
 import Component, { ComponentAttrs } from 'flarum/common/Component';
-import type Mithril from 'mithril';
 import icon from 'flarum/common/helpers/icon';
 
-interface RankingImageAttrs extends ComponentAttrs {
+export interface RankingImageAttrs extends ComponentAttrs {
   place: number;
 }
 

diff --git a/js/src/forum/components/Voters.tsx b/js/src/forum/components/Voters.tsx
@@ -1,6 +1,5 @@
 import app from 'flarum/forum/app';
-
-import Component from 'flarum/common/Component';
+import Component, { ComponentAttrs } from 'flarum/common/Component';
 import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
 import Link from 'flarum/common/components/Link';
 import Tooltip from 'flarum/common/components/Tooltip';
@@ -9,8 +8,13 @@ import icon from 'flarum/common/helpers/icon';
 import SubtreeRetainer from 'flarum/common/utils/SubtreeRetainer';
 
 import type Mithril from 'mithril';
+import type Post from 'flarum/common/models/Post';
+
+export interface VotersAttrs extends ComponentAttrs {
+  post: Post;
+}
 
-export default class Voters extends Component {
+export default class Voters extends Component<VotersAttrs> {
   subtreeRetainer!: SubtreeRetainer;
   lastRenderVotes: number = -1;
   loading: boolean = false;
@@ -37,7 +41,7 @@ export default class Voters extends Component {
     return this.subtreeRetainer.needsRebuild();
   }
 
-  onupdate(vnode: Mithril.Vnode) {
+  onupdate() {
     if (this.lastRenderVotes !== this.attrs.post.votes()) {
       this.loading = true;
       setTimeout(() => m.redraw(), 0);
@@ -47,8 +51,7 @@ export default class Voters extends Component {
   }
 
   view() {
-    // if (this.loading) {
-    if (this.attrs.post.votes() === false || this.attrs.post.upvotes() === false) {
+    if (!this.attrs.post.votes() || !this.attrs.post.upvotes()) {
       return (
         <div className="VotingContainer">
           <div className="FoFGamification-voters">
@@ -106,7 +109,11 @@ export default class Voters extends Component {
   }
 
   async load() {
-    await app.store.find('posts', this.attrs.post.id(), {
+    const postId = this.attrs.post.id();
+
+    if (!postId) return;
+
+    await app.store.find<Post>('posts', postId, {
       include: 'upvotes',
     });
 

diff --git a/js/src/forum/components/VotesUserPage.ts b/js/src/forum/components/VotesUserPage.ts
@@ -1,6 +1,9 @@
 import app from 'flarum/forum/app';
 import PostsUserPage from 'flarum/forum/components/PostsUserPage';
 
+import type Post from 'flarum/common/models/Post';
+import type { ApiQueryParamsPlural } from 'flarum/common/Store';
+
 /**
  * The `VotesUserPage` component shows posts which user voted on.
  */
@@ -12,13 +15,15 @@ export default class VotesUserPage extends PostsUserPage {
    * @protected
    */
   loadResults(offset: number) {
-    return app.store.find('posts', {
+    const params: ApiQueryParamsPlural = {
       filter: {
         type: 'comment',
-        voted: this.user.id(),
+        ...(this.user?.id() && { voted: this.user.id() }),
       },
       page: { offset, limit: this.loadLimit },
       sort: '-createdAt',
-    });
+    };
+
+    return app.store.find<Post[]>('posts', params);
   }
 }
diff --git a/js/src/forum/components/index.js → js/src/forum/components/index.ts b/js/src/forum/components/index.js → js/src/forum/components/index.ts
@@ -2,8 +2,10 @@ import RankingsPage from './RankingsPage';
 import VoteNotification from './VoteNotification';
 import VotesModal from './VotesModal';
 import Voters from './Voters';
+import RankingImage from './RankingImage';
 
 export const components = {
+  RankingImage,
   RankingsPage,
   VoteNotification,
   VotesModal,

diff --git a/js/src/forum/useAlternatePostVoteLayout.tsx b/js/src/forum/useAlternatePostVoteLayout.tsx
@@ -6,13 +6,14 @@ import CommentPost from 'flarum/forum/components/CommentPost';
 import Button from 'flarum/common/components/Button';
 import abbreviateNumber from 'flarum/common/utils/abbreviateNumber';
 import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
-import type ItemList from 'flarum/common/utils/ItemList';
-
 import setting from './helpers/setting';
 import saveVote from './helpers/saveVote';
 
+import type ItemList from 'flarum/common/utils/ItemList';
+import type Mithril from 'mithril';
+
 export default function useAlternatePostVoteLayout() {
-  extend(CommentPost.prototype, 'actionItems', function (this: CommentPost, items: ItemList) {
+  extend(CommentPost.prototype, 'actionItems', function (this: CommentPost, items: ItemList<Mithril.Children>) {
     if (this.attrs.post.isHidden()) return;
 
     items.remove('votes');
@@ -30,7 +31,11 @@ export default function useAlternatePostVoteLayout() {
     }
   });
 
-  extend(CommentPost.prototype, 'headerItems', function (this: CommentPost, items: ItemList) {
+  extend(CommentPost.prototype, 'oninit', function () {
+    (this as any).voteLoading = false;
+  });
+
+  extend(CommentPost.prototype, 'headerItems', function (this: CommentPost, items: ItemList<Mithril.Children>) {
     const post = this.attrs.post;
 
     if (post.isHidden()) return;
@@ -47,9 +52,9 @@ export default function useAlternatePostVoteLayout() {
     // We set canVote to true for guest users so that they can access the login by clicking the button
     const canVote = !app.session.user || post.canVote();
 
-    const onclick = (upvoted, downvoted) =>
-      saveVote(post, upvoted, downvoted, (val) => {
-        this.voteLoading = val;
+    const onclick = (upvoted: boolean, downvoted: boolean) =>
+      saveVote(post, upvoted, downvoted, (val: boolean) => {
+        (this as any).voteLoading = val;
       });
 
     items.add(
@@ -59,7 +64,7 @@ export default function useAlternatePostVoteLayout() {
           className="Post-voteButton Post-voteButton--up Button Button--icon Button--text"
           icon={`fas fa-fw fa-${icon}-up`}
           data-active={hasUpvoted}
-          disabled={!canVote || this.voteLoading || !canSeeVotes}
+          disabled={!canVote || (this as any).voteLoading || !canSeeVotes}
           onclick={() => onclick(!hasUpvoted, false)}
           aria-label={app.translator.trans('fof-gamification.forum.post.upvote_button')}
         />
@@ -71,13 +76,13 @@ export default function useAlternatePostVoteLayout() {
             className="Post-voteButton Post-voteButton--down Button Button--icon Button--text"
             icon={`fas fa-fw fa-${icon}-down`}
             data-active={hasDownvoted}
-            disabled={!canVote || this.voteLoading}
+            disabled={!canVote || (this as any).voteLoading}
             onclick={() => onclick(false, !hasDownvoted)}
             aria-label={app.translator.trans('fof-gamification.forum.post.downvote_button')}
           />
         )}
 
-        {this.voteLoading && <LoadingIndicator display="inline" size="small" />}
+        {(this as any).voteLoading && <LoadingIndicator display="inline" size="small" />}
       </div>,
       10000
     );

diff --git a/js/tsconfig.json b/js/tsconfig.json
@@ -1,16 +1,14 @@
 {
-  // Use Flarum's tsconfig as a starting point
   "extends": "flarum-tsconfig",
-  // This will match all .ts, .tsx, .d.ts, .js, .jsx files in your `src` folder
-  // and also tells your Typescript server to read core's global typings for
-  // access to `dayjs` and `$` in the global namespace.
-  "include": ["src/**/*", "../vendor/flarum/core/js/dist-typings/@types/**/*"],
+  "include": ["src/**/*", "../vendor/*/*/js/dist-typings/@types/**/*", "@types/**/*"],
   "compilerOptions": {
-    // This will output typings to `dist-typings`
     "declarationDir": "./dist-typings",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "baseUrl": ".",
     "paths": {
-      "flarum/*": ["../vendor/flarum/core/js/dist-typings/*"]
+      "flarum/*": ["../vendor/flarum/core/js/dist-typings/*"],
+      "@flarum/core/*": ["../vendor/flarum/core/js/dist-typings/*"]
     }
   }
 }