[Proposal] Make able to write React in Typescript

[takayamaki]

fix #6267

Mastodon has grow to very large class based React written in JavaScript now.

It's very hard for me to understand.
Newcomers will be even more so.

3 years after #6267, it seems that the mainstream of AltJS has become Typescript.

Many of the npm libraries provide own types definitions.
Most of the others are covered by third-party type definitions.

I think better to use Typescript now.

// I understand that Gargron wants prefer to delay large-scale PR merging by some reason.
// I made this PR to prevent duplicate work.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mashirozx]

Hope to know the attitude of the official, so we can decide whether to continue pushing on this migration

[mashirozx]

By the way, I think we can also drop the outdated Redux and so on. In stead of rewrite the v3 front end in TypeScript, it may be a better choice for us to refactory the whole fornt end in new tech stack and move into mastodon v4

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[github-actions]

This pull request has resolved merge conflicts and is ready for review.

[takayamaki]

@Gargron rebased now! Can I open this PR?

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[github-actions]

This pull request has resolved merge conflicts and is ready for review.

[mashirozx]

great job！

[ykzts]

Ready for merge?

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[mashirozx]

Where is big G 🫣

[github-actions]

This pull request has resolved merge conflicts and is ready for review.

[Gargron]

I am sorry for taking an outrageously long time to merge this, and I thank you for the persistence.

[ClearlyClaire]

Running RAILS_ENV=production bundle exec rails assets:precompile fails after this change.

Interestingly, the build error is different on my machine and in the job to build the Docker image.

On my machine, it chokes on the TypeScript ?? operator, so I guess it is trying to handle the file as Javascript rather than TypeScript:

ERROR in ./app/javascript/hooks/useHovering.ts 1:120
Module parse failed: Unexpected token (1:120)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> import{useCallback,useState}from'react';export const useHovering=animate=>{const[hovering,setHovering]=useState(animate??false);const handleMouseEnter=useCallback(()=>{if(animate)return;setHovering(true);},[animate]);const handleMouseLeave=useCallback(()=>{if(animate)return;setHovering(false);},[animate]);return{hovering,handleMouseEnter,handleMouseLeave};};
 @ ./app/javascript/mastodon/components/avatar.tsx 1:154-203 1:361-372
 @ ./app/javascript/mastodon/features/ui/components/header.jsx
 @ ./app/javascript/mastodon/features/ui/index.jsx
 @ ./app/javascript/mastodon/containers/mastodon.jsx
 @ ./app/javascript/mastodon/main.jsx
 @ ./app/javascript/packs/application.js

For the docker image build job, it fails with:

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@babel/preset-typescript' imported from /opt/mastodon/babel-virtual-resolve-base.js
    at new NodeError (/opt/mastodon/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2240:5)
    at packageResolve (/opt/mastodon/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2776:9)
    at moduleResolve (/opt/mastodon/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2804:18)
    at defaultResolve (/opt/mastodon/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2835:13)
    at /opt/mastodon/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2855:14
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/opt/mastodon/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:45:103)
    at _next (/opt/mastodon/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:46:194)
    at /opt/mastodon/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:46:364
    at new Promise (<anonymous>)
    at /opt/mastodon/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:46:97
    at resolve (/opt/mastodon/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2847:19)
    at /opt/mastodon/node_modules/@babel/core/lib/config/files/import-meta-resolve.js:20:38
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/opt/mastodon/node_modules/@babel/core/lib/config/files/import-meta-resolve.js:8:103)
    at _next (/opt/mastodon/node_modules/@babel/core/lib/config/files/import-meta-resolve.js:9:194) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Unfortunately, I'm not knowledgeable enough in webpack and babel to figure out what is going on exactly.

EDITED: This has been addressed in #24374