From 7882bbf98fb68dc1ebe55a809e97dfa625195ff0 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 15 Apr 2022 19:54:40 -0500 Subject: [PATCH] Convert application entrypoint files into Typescript --- app/{application.js => application.ts} | 1 + .../{load_polyfills.js => load_polyfills.ts} | 5 +++++ app/soapbox/{main.js => main.tsx} | 6 +++--- app/soapbox/{monitoring.js => monitoring.ts} | 10 +++++----- app/soapbox/{performance.js => performance.ts} | 18 +++++++----------- app/soapbox/{ready.js => ready.ts} | 2 +- tsconfig.json | 2 +- webpack/shared.js | 2 +- 8 files changed, 24 insertions(+), 22 deletions(-) rename app/{application.js => application.ts} (95%) rename app/soapbox/{load_polyfills.js => load_polyfills.ts} (93%) rename app/soapbox/{main.js => main.tsx} (78%) rename app/soapbox/{monitoring.js => monitoring.ts} (73%) rename app/soapbox/{performance.js => performance.ts} (72%) rename app/soapbox/{ready.js => ready.ts} (74%) diff --git a/app/application.js b/app/application.ts similarity index 95% rename from app/application.js rename to app/application.ts index 59cd3374b..ba0d8f877 100644 --- a/app/application.js +++ b/app/application.ts @@ -1,5 +1,6 @@ import loadPolyfills from './soapbox/load_polyfills'; +// @ts-ignore require.context('./images/', true); // Load stylesheet diff --git a/app/soapbox/load_polyfills.js b/app/soapbox/load_polyfills.ts similarity index 93% rename from app/soapbox/load_polyfills.js rename to app/soapbox/load_polyfills.ts index 251fc14c0..e636098e7 100644 --- a/app/soapbox/load_polyfills.js +++ b/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 ); diff --git a/app/soapbox/main.js b/app/soapbox/main.tsx similarity index 78% rename from app/soapbox/main.js rename to app/soapbox/main.tsx index dfac430e0..0a9bbdb75 100644 --- a/app/soapbox/main.js +++ b/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(, mountNode); - if (NODE_ENV === 'production') { + if (BuildConfig.NODE_ENV === 'production') { // avoid offline in dev mode because it's harder to debug OfflinePluginRuntime.install(); } diff --git a/app/soapbox/monitoring.js b/app/soapbox/monitoring.ts similarity index 73% rename from app/soapbox/monitoring.js rename to app/soapbox/monitoring.ts index adb99a891..51e040b12 100644 --- a/app/soapbox/monitoring.js +++ b/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, - environment: NODE_ENV, + dsn: BuildConfig.SENTRY_DSN, + 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); diff --git a/app/soapbox/performance.js b/app/soapbox/performance.ts similarity index 72% rename from app/soapbox/performance.js rename to app/soapbox/performance.ts index 7444ad540..b524b6e15 100644 --- a/app/soapbox/performance.js +++ b/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) { - if (NODE_ENV === 'development') { - marky.mark(name); - } +export function start(name: string): void { + marky?.mark(name); } -export function stop(name) { - if (NODE_ENV === 'development') { - marky.stop(name); - } +export function stop(name: string): void { + marky?.stop(name); } diff --git a/app/soapbox/ready.js b/app/soapbox/ready.ts similarity index 74% rename from app/soapbox/ready.js rename to app/soapbox/ready.ts index 341ca425c..f74b03694 100644 --- a/app/soapbox/ready.js +++ b/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 { diff --git a/tsconfig.json b/tsconfig.json index 81de33908..9897be735 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,7 @@ "baseUrl": "app/", "sourceMap": true, "strict": true, - "module": "es6", + "module": "es2022", "target": "es5", "jsx": "react", "allowJs": true, diff --git a/webpack/shared.js b/webpack/shared.js index 8135fa512..55ac4d6a7 100644 --- a/webpack/shared.js +++ b/webpack/shared.js @@ -35,7 +35,7 @@ const makeHtmlConfig = (params = {}) => { module.exports = { entry: { - application: resolve('app/application.js'), + application: resolve('app/application.ts'), }, output: {