[migrate] upgrade to ES Decorator stage-3 & Husky 9

[optimize] update Upstream packages

.husky/pre-commit

@@ -1,5 +1 @@
-#!/bin/sh
-
-. "$(dirname "$0")/_/husky.sh"
-
 npm test

.husky/pre-push

@@ -1,5 +1 @@
-#!/bin/sh
-
-. "$(dirname "$0")/_/husky.sh"
-
 npm run build

babel.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+  presets: [
+    // https://babeljs.io/docs/babel-preset-typescript
+    [
+      '@babel/preset-typescript',
+      {
+        allowDeclareFields: true,
+        allowNamespaces: true,
+        allExtensions: true,
+        isTSX: true,
+      },
+    ],
+    // https://babeljs.io/docs/babel-preset-react
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+        development: process.env.BABEL_ENV === 'development',
+      },
+    ],
+  ],
+  // https://babeljs.io/docs/babel-plugin-proposal-decorators#note-compatibility-with-babelplugin-transform-class-properties
+  plugins: [['@babel/plugin-proposal-decorators', { version: '2023-05' }]],
+};

components/Activity/ActivityEditor.tsx

@@ -1,5 +1,5 @@
 import { Loading } from 'idea-react';
-import { makeObservable, observable } from 'mobx';
+import { observable } from 'mobx';
 import { textJoin } from 'mobx-i18n';
 import { observer } from 'mobx-react';
 import { BadgeInput, FileUploader } from 'mobx-restful-table';
@@ -26,16 +26,11 @@ export interface ActivityEditorProps {
 
 @observer
 export class ActivityEditor extends PureComponent<ActivityEditorProps> {
-  constructor(props: ActivityEditorProps) {
-    super(props);
-    makeObservable(this);
-  }
-
   @observable
-  detailHTML = '';
+  accessor detailHTML = '';
 
   @observable
-  validated = false;
+  accessor validated = false;
 
   async componentDidMount() {
     const { name } = this.props;

components/DateTimeInput.tsx

@@ -1,4 +1,4 @@
-import { computed, makeObservable, observable } from 'mobx';
+import { computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { ChangeEvent, PureComponent } from 'react';
 import { Col, Form, InputGroup, Row } from 'react-bootstrap';
@@ -19,16 +19,11 @@ export interface DateTimeInputProps {
 
 @observer
 export class DateTimeInput extends PureComponent<DateTimeInputProps> {
-  constructor(props: DateTimeInputProps) {
-    super(props);
-    makeObservable(this);
-  }
-
   @observable
-  start = '';
+  accessor start = '';
 
   @observable
-  end = '';
+  accessor end = '';
 
   @computed
   get isInvalid() {

components/Git/Logo.tsx

@@ -1,4 +1,4 @@
-import { makeObservable, observable } from 'mobx';
+import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { PureComponent } from 'react';
 import { Image } from 'react-bootstrap';
@@ -9,13 +9,8 @@ export interface GitLogoProps {
 
 @observer
 export class GitLogo extends PureComponent<GitLogoProps> {
-  constructor(props: GitLogoProps) {
-    super(props);
-    makeObservable(this);
-  }
-
   @observable
-  path = '';
+  accessor path = '';
 
   async componentDidMount() {
     const { name } = this.props;

components/Git/Modal.tsx

@@ -1,4 +1,4 @@
-import { makeObservable, observable } from 'mobx';
+import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { FormEvent, PureComponent } from 'react';
 import {
@@ -25,16 +25,11 @@ const { t } = i18n;
 
 @observer
 export class GitModal extends PureComponent<GitModalProps> {
-  constructor(props: GitModalProps) {
-    super(props);
-    makeObservable(this);
-  }
-
   @observable
-  value = '';
+  accessor value = '';
 
   @observable
-  validated = false;
+  accessor validated = false;
 
   submitHandler = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();

components/Message/MessageList.tsx

@@ -1,6 +1,6 @@
 import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { makeObservable, observable } from 'mobx';
+import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { ScrollList, ScrollListProps } from 'mobx-restful-table';
 import { FC, PureComponent } from 'react';
@@ -115,13 +115,8 @@ export type MessageListProps = Pick<ScrollListProps<Message>, 'store'> &
 
 @observer
 export class MessageList extends PureComponent<MessageListProps> {
-  constructor(props: MessageListProps) {
-    super(props);
-    makeObservable(this);
-  }
-
   @observable
-  selectedIds: string[] = [];
+  accessor selectedIds: string[] = [];
 
   onSelect = (list: string[]) =>
     (this.selectedIds = list) && this.props.onSelect?.(list);

components/PlatformAdmin/PlatformAdminFrame.tsx

@@ -14,7 +14,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Loading } from 'idea-react';
-import { makeObservable, observable } from 'mobx';
+import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Fragment, PureComponent } from 'react';
 import { Container, Nav } from 'react-bootstrap';
@@ -50,13 +50,8 @@ export interface PlatformAdminFrameProps extends ServerSessionBoxProps {
 
 @observer
 export class PlatformAdminFrame extends PureComponent<PlatformAdminFrameProps> {
-  constructor(props: PlatformAdminFrameProps) {
-    super(props);
-    makeObservable(this);
-  }
-
   @observable
-  loading = false;
+  accessor loading = false;
 
   async componentDidMount() {
     this.loading = true;

components/PlatformAdmin/PlatformAdminModal.tsx

@@ -1,4 +1,4 @@
-import { makeObservable, observable } from 'mobx';
+import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { FormEvent, PureComponent } from 'react';
 import { Button, Form, Modal, ModalProps } from 'react-bootstrap';
@@ -18,13 +18,8 @@ export interface PlatformAdminModalProps
 
 @observer
 export class PlatformAdminModal extends PureComponent<PlatformAdminModalProps> {
-  constructor(props: PlatformAdminModalProps) {
-    super(props);
-    makeObservable(this);
-  }
-
   @observable
-  userId = '';
+  accessor userId = '';
 
   increaseId = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();

components/Team/TeamManageFrame.tsx

@@ -7,7 +7,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Loading } from 'idea-react';
-import { computed, makeObservable, observable } from 'mobx';
+import { computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { JWTProps, RouteProps } from 'next-ssr-middleware';
 import { Fragment, PureComponent } from 'react';
@@ -38,16 +38,11 @@ export interface TeamManageFrameProps extends ActivityManageFrameProps {
 
 @observer
 export class TeamManageFrame extends PureComponent<TeamManageFrameProps> {
-  constructor(props: TeamManageFrameProps) {
-    super(props);
-    makeObservable(this);
-  }
-
   @observable
-  teamMemberRole = '';
+  accessor teamMemberRole = '';
 
   @observable
-  isLoading = false;
+  accessor isLoading = false;
 
   async componentDidMount() {
     const { name, tid } = this.props,

components/Team/WorkEditor.tsx

@@ -1,5 +1,5 @@
 import { SpinnerButton } from 'idea-react';
-import { computed, makeObservable, observable } from 'mobx';
+import { computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { FileUploader } from 'mobx-restful-table';
 import { FormEvent, PureComponent } from 'react';
@@ -16,11 +16,6 @@ export type WorkEditorProps = Record<'name' | 'tid', string> & { wid?: string };
 
 @observer
 export class WorkEditor extends PureComponent<WorkEditorProps> {
-  constructor(props: WorkEditorProps) {
-    super(props);
-    makeObservable(this);
-  }
-
   store = activityStore.teamOf(this.props.name).workOf(this.props.tid);
 
   @computed
@@ -47,7 +42,7 @@ export class WorkEditor extends PureComponent<WorkEditorProps> {
   }
 
   @observable
-  currentType = this.workTypes[0].value;
+  accessor currentType = this.workTypes[0].value;
 
   async componentDidMount() {
     const { wid } = this.props;

components/User/ActivityAdministratorModal.tsx

@@ -1,4 +1,4 @@
-import { makeObservable, observable } from 'mobx';
+import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { FormEvent, PureComponent } from 'react';
 import { Button, Col, Form, Modal, ModalProps, Row } from 'react-bootstrap';
@@ -19,13 +19,8 @@ export interface AdministratorModalProps
 
 @observer
 export class AdministratorModal extends PureComponent<AdministratorModalProps> {
-  constructor(props: AdministratorModalProps) {
-    super(props);
-    makeObservable(this);
-  }
-
   @observable
-  userId = '';
+  accessor userId = '';
 
   increaseId = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();

components/User/SessionBox.tsx

@@ -1,4 +1,4 @@
-import { makeObservable, observable } from 'mobx';
+import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import dynamic from 'next/dynamic';
 import { HTMLAttributes, PureComponent, UIEvent } from 'react';
@@ -14,13 +14,8 @@ export interface SessionBoxProps extends HTMLAttributes<HTMLDivElement> {
 
 @observer
 export class SessionBox extends PureComponent<SessionBoxProps> {
-  constructor(props: SessionBoxProps) {
-    super(props);
-    makeObservable(this);
-  }
-
   @observable
-  cover = false;
+  accessor cover = false;
 
   openDialog = ({ target }: UIEvent<HTMLElement>) =>
     !(target as HTMLElement).closest('#session-dialog') && (this.cover = true);

models/Activity/Enrollment.ts

@@ -1,4 +1,4 @@
-import { computed, makeObservable, observable } from 'mobx';
+import { computed, observable } from 'mobx';
 import { ListModel, Statistic, Stream, toggle } from 'mobx-restful';
 import { buildURLData, countBy, groupBy } from 'web-utility';
 
@@ -36,7 +36,6 @@ export class EnrollmentModel extends Stream<Enrollment, EnrollmentFilter>(
 ) {
   constructor(baseURI: string) {
     super();
-    makeObservable(this);
 
     this.baseURI = `${baseURI}/enrollment`;
   }
@@ -45,7 +44,7 @@ export class EnrollmentModel extends Stream<Enrollment, EnrollmentFilter>(
   indexKey = 'userId' as const;
 
   @observable
-  sessionOne?: Enrollment = undefined;
+  accessor sessionOne: Enrollment | undefined;
 
   declare statistic: EnrollmentStatistic;
 

models/Activity/Team.ts

@@ -1,4 +1,4 @@
-import { action, computed, makeObservable, observable } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import { ListModel, Stream, toggle } from 'mobx-restful';
 import { buildURLData } from 'web-utility';
 
@@ -70,7 +70,6 @@ export interface JoinTeamReqBody extends Pick<TeamMember, 'role'> {
 export class TeamModel extends Stream<Team, TeamFilter>(ListModel) {
   constructor(baseURI: string) {
     super();
-    makeObservable(this);
 
     this.baseURI = `${baseURI}/team`;
   }
@@ -82,7 +81,7 @@ export class TeamModel extends Stream<Team, TeamFilter>(ListModel) {
   currentAssignment?: TeamAssignmentModel;
 
   @observable
-  sessionOne?: Team = undefined;
+  accessor sessionOne: Team | undefined;
 
   @computed
   get exportURL() {
@@ -180,15 +179,13 @@ export class TeamMemberModel extends Stream<TeamMember, Filter<TeamMember>>(
 ) {
   constructor(baseURI: string) {
     super();
-    makeObservable(this);
-
     this.baseURI = `${baseURI}/member`;
   }
 
   client = sessionStore.client;
 
   @observable
-  sessionOne?: TeamMember = undefined;
+  accessor sessionOne: TeamMember | undefined;
 
   openStream(filter: Filter<TeamMember>) {
     return createListStream<TeamMember>(