refactor: Migrate to Vite

.env.example

@@ -1,3 +1,3 @@
-NODE_ENV=development
+# NODE_ENV=development
 # BACKEND_URL="https://example.com"
 # PROXY_HTTPS_INSECURE=false

.eslintrc.cjs

@@ -260,7 +260,6 @@ module.exports = {
         alphabetize: { order: 'asc' },
       },
     ],
-    '@typescript-eslint/no-duplicate-imports': 'error',
     '@typescript-eslint/member-delimiter-style': [
       'error',
       {
@@ -285,6 +284,7 @@ module.exports = {
       },
     ],
     'tailwindcss/migration-from-tailwind-2': 'error',
+    'tailwindcss/no-custom-classname': 'warn',
   },
   overrides: [
     {

.github/workflows/build.yml

@@ -6,6 +6,7 @@ on:
       - develop
       - feat/**
       - fix/**
+      - refactor/**
   release:
     types: [ published ]
 
@@ -27,7 +28,7 @@ jobs:
         yarn install --ignore-scripts
         yarn patch-package
         env NODE_ENV=production yarn build
-        zip -r static.zip static
+        zip -r static.zip static/
         # -- For artifact
         mkdir __build/
         cp -r static/ __build/

.gitignore

@@ -9,6 +9,8 @@
 /.vs/
 yarn-error.log*
 /junit.xml
+*.timestamp-*
+*.bundled_*
 
 /static/
 /static-test/

app/soapbox/actions/settings.ts

@@ -4,7 +4,7 @@ import { createSelector } from 'reselect';
 import { v4 as uuid } from 'uuid';
 
 import { patchMe } from 'soapbox/actions/me';
-import messages from 'soapbox/locales/messages';
+import messages from 'soapbox/messages';
 import toast from 'soapbox/toast';
 import { isLoggedIn } from 'soapbox/utils/auth';
 

app/soapbox/actions/streaming.ts

@@ -2,7 +2,7 @@ import { getLocale, getSettings } from 'soapbox/actions/settings';
 import { importEntities } from 'soapbox/entity-store/actions';
 import { Entities } from 'soapbox/entity-store/entities';
 import { selectEntity } from 'soapbox/entity-store/selectors';
-import messages from 'soapbox/locales/messages';
+import messages from 'soapbox/messages';
 import { ChatKeys, IChat, isLastMessage } from 'soapbox/queries/chats';
 import { queryClient } from 'soapbox/queries/client';
 import { getUnreadChatsCount, updateChatListItem, updateChatMessage } from 'soapbox/utils/chats';

app/soapbox/build-config.js → app/soapbox/build-config-compiletime.ts

@@ -4,43 +4,41 @@
  * @module soapbox/build-config
  */
 
-const trim = require('lodash/trim');
-const trimEnd = require('lodash/trimEnd');
+// eslint-disable-next-line import/extensions
+import trim from 'lodash/trim.js';
+// eslint-disable-next-line import/extensions
+import trimEnd from 'lodash/trimEnd.js';
 
 const {
   NODE_ENV,
   BACKEND_URL,
   FE_SUBDIRECTORY,
-  FE_BUILD_DIR,
   FE_INSTANCE_SOURCE_DIR,
   SENTRY_DSN,
-} = process.env;
+} = process.env || {};
 
-const sanitizeURL = url => {
+const sanitizeURL = (url: string | undefined = '') => {
   try {
     return trimEnd(new URL(url).toString(), '/');
   } catch {
     return '';
   }
 };
 
-const sanitizeBasename = path => {
+const sanitizeBasename = (path: string | undefined = '') => {
   return `/${trim(path, '/')}`;
 };
 
-const sanitizePath = path => {
-  return trim(path, '/');
-};
-
-// JSON.parse/stringify is to emulate what @preval is doing and avoid any
-// inconsistent behavior in dev mode
-const sanitize = obj => JSON.parse(JSON.stringify(obj));
-
-module.exports = sanitize({
+const env = {
   NODE_ENV: NODE_ENV || 'development',
   BACKEND_URL: sanitizeURL(BACKEND_URL),
   FE_SUBDIRECTORY: sanitizeBasename(FE_SUBDIRECTORY),
-  FE_BUILD_DIR: sanitizePath(FE_BUILD_DIR) || 'static',
   FE_INSTANCE_SOURCE_DIR: FE_INSTANCE_SOURCE_DIR || 'instance',
   SENTRY_DSN,
+};
+
+export type BuildConfig = typeof env;
+
+export default () => ({
+  data: env,
 });

app/soapbox/build-config.ts

@@ -0,0 +1,9 @@
+import type { BuildConfig } from './build-config-compiletime';
+
+export const {
+  NODE_ENV,
+  BACKEND_URL,
+  FE_SUBDIRECTORY,
+  FE_INSTANCE_SOURCE_DIR,
+  SENTRY_DSN,
+} = import.meta.compileTime<BuildConfig>('./build-config-compiletime.ts');

app/soapbox/components/autosuggest-textarea.tsx

@@ -1,3 +1,4 @@
+import { install, uninstall } from '@github/hotkey';
 import clsx from 'clsx';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -30,12 +31,14 @@ interface IAutosuggesteTextarea {
   onFocus: () => void
   onBlur?: () => void
   condensed?: boolean
+  keymap?: string
   children: React.ReactNode
 }
 
 class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea> {
 
   textarea: HTMLTextAreaElement | null = null;
+  keymap?: string = undefined;
 
   static defaultProps = {
     autoFocus: true,
@@ -171,8 +174,13 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
 
   setTextarea: React.Ref<HTMLTextAreaElement> = (c) => {
     this.textarea = c;
+    if (this.textarea && this.keymap) install(this.textarea, this.keymap);
   };
 
+  componentWillUnmount(): void {
+    if (this.textarea && this.keymap) uninstall(this.textarea);
+  }
+
   onPaste: React.ClipboardEventHandler<HTMLTextAreaElement> = (e) => {
     if (e.clipboardData && e.clipboardData.files.length === 1) {
       this.props.onPaste(e.clipboardData.files);
@@ -227,7 +235,8 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
   }
 
   render() {
-    const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, children, condensed, id } = this.props;
+    const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, children, condensed, id, keymap } = this.props;
+    if (keymap) this.keymap = keymap;
     const { suggestionsHidden } = this.state;
     const style = { direction: 'ltr', minRows: 10 };