Merge branch 'next-ts-entrypoint' into 'next'

Next: convert entrypoint files to Typescript

See merge request soapbox-pub/soapbox-fe!1228

app/application.ts

@@ -1,5 +1,6 @@
 import loadPolyfills from './soapbox/load_polyfills';
 
+// @ts-ignore
 require.context('./images/', true);
 
 // Load stylesheet

app/soapbox/actions/settings.js

@@ -1,12 +1,11 @@
 import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { defineMessages } from 'react-intl';
 import { createSelector } from 'reselect';
+import { v4 as uuid } from 'uuid';
 
 import { patchMe } from 'soapbox/actions/me';
 import { isLoggedIn } from 'soapbox/utils/auth';
 
-import uuid from '../uuid';
-
 import { showAlertForError } from './alerts';
 import snackbar from './snackbar';
 

app/soapbox/load_polyfills.ts

@@ -14,11 +14,16 @@ function importExtraPolyfills() {
 
 function loadPolyfills() {
   const needsBasePolyfills = !(
+    // @ts-ignore
     Array.prototype.includes &&
+    // @ts-ignore
     HTMLCanvasElement.prototype.toBlob &&
     window.Intl &&
+    // @ts-ignore
     Number.isNaN &&
+    // @ts-ignore
     Object.assign &&
+    // @ts-ignore
     Object.values &&
     window.Symbol
   );

app/soapbox/main.tsx

@@ -5,7 +5,7 @@ import * as OfflinePluginRuntime from '@lcdp/offline-plugin/runtime';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { NODE_ENV } from 'soapbox/build_config';
+import * as BuildConfig from 'soapbox/build_config';
 
 import { default as Soapbox } from './containers/soapbox';
 import * as monitoring from './monitoring';
@@ -19,11 +19,11 @@ function main() {
   monitoring.start();
 
   ready(() => {
-    const mountNode = document.getElementById('soapbox');
+    const mountNode = document.getElementById('soapbox') as HTMLElement;
 
     ReactDOM.render(<Soapbox />, mountNode);
 
-    if (NODE_ENV === 'production') {
+    if (BuildConfig.NODE_ENV === 'production') {
       // avoid offline in dev mode because it's harder to debug
       OfflinePluginRuntime.install();
     }

app/soapbox/monitoring.ts

@@ -1,13 +1,13 @@
-import { NODE_ENV, SENTRY_DSN } from 'soapbox/build_config';
+import * as BuildConfig from 'soapbox/build_config';
 
-export const start = () => {
+export const start = (): void => {
   Promise.all([
     import(/* webpackChunkName: "error" */'@sentry/react'),
     import(/* webpackChunkName: "error" */'@sentry/tracing'),
   ]).then(([Sentry, { Integrations: Integrations }]) => {
     Sentry.init({
-      dsn: SENTRY_DSN,
+      dsn: BuildConfig.SENTRY_DSN,
-      environment: NODE_ENV,
+      environment: BuildConfig.NODE_ENV,
       debug: false,
       integrations: [new Integrations.BrowserTracing()],
 
@@ -18,7 +18,7 @@ export const start = () => {
   }).catch(console.error);
 };
 
-export const captureException = error => {
+export const captureException = (error: Error): void => {
   import(/* webpackChunkName: "error" */'@sentry/react')
     .then(Sentry => {
       Sentry.captureException(error);

app/soapbox/performance.ts

@@ -1,6 +1,6 @@
 'use strict';
 
-import { NODE_ENV } from 'soapbox/build_config';
+import * as BuildConfig from 'soapbox/build_config';
 
 //
 // Tools for performance debugging, only enabled in development mode.
@@ -8,9 +8,9 @@ import { NODE_ENV } from 'soapbox/build_config';
 // Also see config/webpack/loaders/mark.js for the webpack loader marks.
 //
 
-let marky;
+let marky: any;
 
-if (NODE_ENV === 'development') {
+if (BuildConfig.NODE_ENV === 'development') {
   if (typeof performance !== 'undefined' && performance.setResourceTimingBufferSize) {
     // Increase Firefox's performance entry limit; otherwise it's capped to 150.
     // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1331135
@@ -22,14 +22,10 @@ if (NODE_ENV === 'development') {
   //window.ReactPerf.start();
 }
 
-export function start(name) {
+export function start(name: string): void {
-  if (NODE_ENV === 'development') {
+  marky?.mark(name);
-    marky.mark(name);
-  }
 }
 
-export function stop(name) {
+export function stop(name: string): void {
-  if (NODE_ENV === 'development') {
+  marky?.stop(name);
-    marky.stop(name);
-  }
 }

app/soapbox/ready.ts

@@ -1,6 +1,6 @@
 'use strict';
 
-export default function ready(loaded) {
+export default function ready(loaded: () => void): void {
   if (['interactive', 'complete'].includes(document.readyState)) {
     loaded();
   } else {

app/soapbox/reducers/compose.js

@@ -1,4 +1,5 @@
 import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable';
+import { v4 as uuid } from 'uuid';
 
 import { tagHistory } from 'soapbox/settings';
 import { PLEROMA } from 'soapbox/utils/features';
@@ -55,7 +56,6 @@ import { SETTING_CHANGE, FE_NAME } from '../actions/settings';
 import { REDRAFT } from '../actions/statuses';
 import { TIMELINE_DELETE } from '../actions/timelines';
 import { unescapeHTML } from '../utils/html';
-import uuid from '../uuid';
 
 const initialState = ImmutableMap({
   id: null,

app/soapbox/uuid.js

@@ -1,5 +0,0 @@
-'use strict';
-
-export default function uuid(a) {
-  return a ? (a^Math.random() * 16 >> a / 4).toString(16) : ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, uuid);
-}

tsconfig.json

@@ -3,7 +3,7 @@
     "baseUrl": "app/",
     "sourceMap": true,
     "strict": true,
-    "module": "es6",
+    "module": "es2022",
     "target": "es5",
     "jsx": "react",
     "allowJs": true,

webpack/shared.js

@@ -35,7 +35,7 @@ const makeHtmlConfig = (params = {}) => {
 
 module.exports = {
   entry: {
-    application: resolve('app/application.js'),
+    application: resolve('app/application.ts'),
   },
 
   output: {