chore: prepare dist-typings (#89)

* chore: prepare `build-typings` * chore: resolve * chore: improve * chore * chore: refactor admin component * chore: try to get over 80% threshold * chore * chore: typings Co-authored-by: IanM <[email protected]> * chore: typings Co-authored-by: IanM <[email protected]> * chore: leftover debugging code Co-authored-by: IanM <[email protected]> * chore: convert to async --------- Co-authored-by: IanM <[email protected]>
FriendsOfFlarum · Nov 2, 2024 · 4d496e7 · 4d496e7
1 parent dffb0f0
commit 4d496e7
Show file tree

Hide file tree

Showing 11 changed files with 1,568 additions and 1,049 deletions.
diff --git a/js/package.json b/js/package.json
@@ -3,20 +3,27 @@
     "private": true,
     "prettier": "@flarum/prettier-config",
     "dependencies": {
+        "html5sortable": "^0.9.18"
+    },
+    "devDependencies": {
+        "@flarum/prettier-config": "^1.0.0",
+        "flarum-tsconfig": "^1.0.3",
         "flarum-webpack-config": "^2.0.0",
-        "html5sortable": "^0.9.18",
-        "webpack": "^5.89.0",
+        "prettier": "^3.0.3",
+        "typescript-coverage-report": "^0.6.1",
+        "webpack": "^5.94.0",
         "webpack-cli": "^5.1.4"
     },
     "scripts": {
         "dev": "webpack --mode development --watch",
         "build": "webpack --mode production",
+        "analyze": "cross-env ANALYZER=true yarn run build",
         "format": "prettier --write src",
-        "format-check": "prettier --check src"
-    },
-    "devDependencies": {
-        "@flarum/prettier-config": "^1.0.0",
-        "flarum-tsconfig": "^1.0.2",
-        "prettier": "^3.0.3"
+        "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,3 +1,5 @@
+import 'flarum/common/models/User';
+
 import type Field from '../lib/models/Field';
 import type Answer from '../lib/models/Answer';
 

diff --git a/js/src/admin/components/FieldList.js → js/src/admin/components/FieldList.ts b/js/src/admin/components/FieldList.js → js/src/admin/components/FieldList.ts
@@ -1,13 +1,22 @@
-import Button from 'flarum/common/components/Button';
 import FieldEdit from './FieldEdit';
 
+import type { Vnode } from 'mithril';
+import type Field from '../../lib/models/Field';
+
+interface FieldListAttrs {
+  existing: Field[];
+  new: Field;
+  loading: boolean;
+  onUpdate: () => void;
+}
+
 export default class FieldList {
-  view(vnode) {
+  view(vnode: Vnode<FieldListAttrs>) {
     const { existing, new: newField, loading, onUpdate } = vnode.attrs;
 
     return m(
       'form.js-sortable-fields',
-      existing.map((field) => {
+      existing.map((field: Field) => {
         return m(FieldEdit, { field, loading, onUpdate });
       }),
       m(FieldEdit, { field: newField, loading, onUpdate })

diff --git a/js/src/forum/addProfilePane.js → js/src/forum/addProfilePane.ts b/js/src/forum/addProfilePane.js → js/src/forum/addProfilePane.ts
@@ -5,6 +5,9 @@ import LinkButton from 'flarum/common/components/LinkButton';
 import UserPage from 'flarum/forum/components/UserPage';
 import RootMasqueradePane from './panes/RootMasqueradePane';
 
+import type ItemList from 'flarum/common/utils/ItemList';
+import type Mithril from 'mithril';
+
 export default function addProfilePane() {
   app.routes['fof-masquerade'] = {
     path: '/u/:username/masquerade',
@@ -17,15 +20,15 @@ export default function addProfilePane() {
     },
   };
 
-  extend(UserPage.prototype, 'navItems', function (items) {
-    if (app.forum.attribute('canViewMasquerade') || this.user.canEditMasqueradeProfile()) {
-      const edit = this.user.canEditMasqueradeProfile();
+  extend(UserPage.prototype, 'navItems', function (items: ItemList<Mithril.Children>) {
+    if (app.forum.attribute<boolean>('canViewMasquerade') || this.user?.canEditMasqueradeProfile()) {
+      const edit = this.user?.canEditMasqueradeProfile();
 
       items.add(
         'masquerade',
         LinkButton.component(
           {
-            href: app.route('fof-masquerade', { username: this.user.slug() }),
+            href: app.route('fof-masquerade', { username: this.user?.slug() }),
             icon: 'far fa-id-card',
             'data-editProfile': edit,
           },

diff --git a/js/src/forum/mutateUserHero.js → js/src/forum/mutateUserHero.tsx b/js/src/forum/mutateUserHero.js → js/src/forum/mutateUserHero.tsx
@@ -3,9 +3,14 @@ import app from 'flarum/forum/app';
 import UserCard from 'flarum/forum/components/UserCard';
 import TypeFactory from './types/TypeFactory';
 
+import type ItemList from 'flarum/common/utils/ItemList';
+import type Mithril from 'mithril';
+import type User from 'flarum/common/models/User';
+
 export default function mutateUserHero() {
-  extend(UserCard.prototype, 'infoItems', function (items) {
-    const answers = app.forum.attribute('canViewMasquerade') ? this.attrs.user.bioFields() || [] : [];
+  extend(UserCard.prototype, 'infoItems', function (items: ItemList<Mithril.Children>) {
+    const user = (this.attrs as { user: User }).user;
+    const answers = app.forum.attribute<boolean>('canViewMasquerade') ? user.bioFields() || [] : [];
 
     items.add(
       'masquerade-bio',
@@ -14,7 +19,7 @@ export default function mutateUserHero() {
           const field = answer.attribute('field');
           const type = TypeFactory.typeForField({
             field,
-            value: answer.content(),
+            value: answer.attribute('content'),
           });
 
           return type.answerField();

diff --git a/js/src/forum/panes/ProfileConfigurePane.js b/js/src/forum/panes/ProfileConfigurePane.js
@@ -128,7 +128,6 @@ export default class ProfileConfigurePane extends Component {
   }
 
   parseResponse(response) {
-    console.log(response);
     this.answers = app.store.pushPayload(response);
     this.loading = false;
     m.redraw();

diff --git a/js/src/forum/panes/ProfilePane.tsx b/js/src/forum/panes/ProfilePane.tsx
@@ -1,23 +1,32 @@
 import app from 'flarum/forum/app';
 
-import Component from 'flarum/common/Component';
+import Component, { ComponentAttrs } from 'flarum/common/Component';
 import TypeFactory from '../types/TypeFactory';
+
 import type Answer from '../../lib/models/Answer';
 import type Field from 'src/lib/models/Field';
 import type User from 'flarum/common/models/User';
+import type Mithril from 'mithril';
+
+export interface ProfilePaneAttrs extends ComponentAttrs {
+  answers: Answer[];
+  user: User;
+  loading: boolean;
+}
 
-export default class ProfilePane extends Component {
+export default class ProfilePane extends Component<ProfilePaneAttrs> {
   answers!: Answer[];
   user!: User;
+  loading!: boolean;
 
-  oninit(vnode) {
+  oninit(vnode: Mithril.Vnode) {
     super.oninit(vnode);
     this.loading = true;
 
     this.answers = [];
     this.user = this.attrs.user;
 
-    this.load(this.user);
+    this.load();
   }
 
   view() {
@@ -26,18 +35,18 @@ export default class ProfilePane extends Component {
         <div class="Fields">
           {app.store
             .all('masquerade-field')
-            .sort((a, b) => a.sort() - b.sort())
+            .sort((a, b) => (a as Field).sort() - (b as Field).sort())
             .map((field) => {
               const answer = this.answers.find((a) => a.field()?.id() === field.id());
 
-              return this.field(field, answer?.content() || '');
+              return this.field(field as Field, (answer?.content() as Answer) || null);
             })}
         </div>
       </div>
     );
   }
 
-  field(field: Field, content) {
+  field(field: Field, content: Answer | null) {
     const type = TypeFactory.typeForField({
       field,
       value: content,
@@ -46,16 +55,19 @@ export default class ProfilePane extends Component {
     return type.answerField();
   }
 
-  load() {
+  async load() {
     this.answers = this.user.masqueradeAnswers();
+    const userId = this.user.id();
+
+    if (!userId) return;
 
-    if (this.answers === false) {
-      this.answers = [];
-      app.store.find('users', this.user.id(), { include: 'masqueradeAnswers' }).then(() => {
-        this.answers = this.user.masqueradeAnswers();
-        m.redraw();
-      });
-    }
+    if (this.answers) return;
+
+    this.answers = [];
+    app.store.find<User>('users', userId, { include: 'masqueradeAnswers' }).then(() => {
+      this.answers = this.user.masqueradeAnswers();
+      m.redraw();
+    });
 
     m.redraw();
   }

diff --git a/js/src/forum/panes/RootMasqueradePane.tsx b/js/src/forum/panes/RootMasqueradePane.tsx
@@ -3,10 +3,13 @@ import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
 import ProfilePane from './ProfilePane';
 import ProfileConfigurePane from './ProfileConfigurePane';
 
+import type User from 'flarum/common/models/User';
+import type Mithril from 'mithril';
+
 export default class RootMasqueradePane extends UserPage {
   loading = true;
 
-  oninit(vnode) {
+  oninit(vnode: Mithril.Vnode) {
     super.oninit(vnode);
 
     this.loadUser(m.route.param('username'));
@@ -19,7 +22,7 @@ export default class RootMasqueradePane extends UserPage {
     else return <ProfilePane user={this.user} />;
   }
 
-  show(user) {
+  show(user: User) {
     super.show(user);
 
     this.loading = false;

diff --git a/js/src/lib/models/Answer.ts b/js/src/lib/models/Answer.ts
@@ -7,6 +7,7 @@ import type Field from './Field';
 export default class Answer extends Model {
   content = Model.attribute('content');
   fieldId = Model.attribute('fieldId');
+  // @ts-ignore
   field = computed<Field>('fieldId', (fieldId: string) => {
     return app.store.getById('masquerade-field', fieldId);
   });

diff --git a/js/tsconfig.json b/js/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "flarum-tsconfig",
   "include": ["src/**/*", "../vendor/*/*/js/dist-typings/@types/**/*", "@types/**/*"],
   "compilerOptions": {
+    "declarationDir": "./dist-typings",
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "baseUrl": ".",