refactor: Migrate to Vite (#31)

* chore: Initial vite migration

* lint: Fix vite eslint

* chore: Migrate HtmlWebpackPlugin

* chore: Migrate CopyPlugin

* chore: Replace webpack script with vite

* ci: Trigger for refactor/ branches

* fix: Snippets

* chore: Rename index.ejs -> index.html

* ci: `static/` -> `dist/`

* chore: Migrate ServiceWorker to Vite

* chore: Import locales at compile time

* chore: Exported locales should contain `data` property

* chore: Register SW

* ci: Keep it `static/`

* refactor: Set output dir from vite config

* chore: Add `require(...)` support back

* feat: Resolve and stuff

* fix: Move index.html

* fix: Resolve ambigous import

* fix: Browserify path

* chore: Remove crypto related stuff
I don't do crypto

* fix: Use `@akryum/flexsearch-es`

REF: nextapps-de/flexsearch#341

* fix: webpack -> vite-ignore

* fix: Vite env

* chore: Ignore some vite temp files

* revert: Vite env

* revert: Vite env

* chore: More vite env stuff

* fix: CSP
Imported CSS still doesn't work

* fix: Entrypoint shouldn't be a relative path

* fix: Adjust initial nonce

* chore: TS Checker

* fix: Adjust eslintignore

* lint: Adjust eslintignore

* fix: Adjust lint command

* chore: Disable eslint checker for now
For some reason it keep ignoring eslintignore (ironic)

* chore: It's actually ts checker that keep checking node_modules

* fix: lint command

* chore: Disable stylelint

* fix: Yarn can't be used for lint command

* chore: Temporarily disable eslint

* fix: CSP in dev mode

* chore: CSP adjustment
CSP may or may not be fine on prod... we'll see...

* fix: Slight adjustment

* fix: CSP forr vite-plugin-checker

* fix: Resolve warnings

* fix: More warning fixing

* fix: Yet another warning fixes

* fix: SW typing

* fix: It's webworker not dom

* chore: Remove webpack

* chore: Disable eslint and stylelint

* fix: Hopefully one last error fix

* chore: Update immer to v10

* fix: Regex

* chore: Update more deps

* chore: Downgrade toast to v2.4.0

* chore: Remove dangerfile

* fix: Dynamic locale import

* fix: Try use __webpack_nonce__ just in case

* fix: vite-plugin-require

* revert: Revert "fix: vite-plugin-require"

This reverts commit 7c4e15f.

* chore: Remove keymap temporarily

* fix: Goober

* fix: nonce

* chore: Temporarily disable hotkey

* fix: Properly null check textarea

* fix: NODE_ENV

.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 };