OKAY, GET IT KIND OF WORKIGN AGAIN

app/soapbox/build-config-compiletime.ts

@@ -0,0 +1,43 @@
+/**
+ * Build config: configuration set at build time.
+ * @module soapbox/build-config
+ */
+
+import trim from 'lodash/trim.js';
+import trimEnd from 'lodash/trimEnd.js';
+
+const {
+  NODE_ENV,
+  BACKEND_URL,
+  FE_SUBDIRECTORY,
+  FE_BUILD_DIR,
+  FE_INSTANCE_SOURCE_DIR,
+  SENTRY_DSN,
+} = process.env;
+
+const sanitizeURL = (url: string | undefined = ''): string => {
+  try {
+    return trimEnd(new URL(url).toString(), '/');
+  } catch {
+    return '';
+  }
+};
+
+const sanitizeBasename = (path: string | undefined = ''): string => {
+  return `/${trim(path, '/')}`;
+};
+
+const sanitizePath = (path: string | undefined = ''): string => {
+  return trim(path, '/');
+};
+
+export default () => ({
+  data: {
+    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,
+  },
+});

app/soapbox/build-config.ts

@@ -1,11 +1,4 @@
-/**
- * Build config: configuration set at build time.
- * @module soapbox/build-config
- */
-
-import trim from 'lodash/trim';
-import trimEnd from 'lodash/trimEnd';
-
+// @ts-nocheck
 const {
   NODE_ENV,
   BACKEND_URL,
@@ -13,29 +6,13 @@ const {
   FE_BUILD_DIR,
   FE_INSTANCE_SOURCE_DIR,
   SENTRY_DSN,
-} = process.env;
+} = import.meta.compileTime('./build-config-compiletime.ts');
 
-const sanitizeURL = (url: string | undefined = ''): string => {
-  try {
-    return trimEnd(new URL(url).toString(), '/');
-  } catch {
-    return '';
-  }
-};
-
-const sanitizeBasename = (path: string | undefined = ''): string => {
-  return `/${trim(path, '/')}`;
-};
-
-const sanitizePath = (path: string | undefined = ''): string => {
-  return trim(path, '/');
-};
-
-export default {
-  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',
+export {
+  NODE_ENV,
+  BACKEND_URL,
+  FE_SUBDIRECTORY,
+  FE_BUILD_DIR,
+  FE_INSTANCE_SOURCE_DIR,
   SENTRY_DSN,
-};
+};

app/soapbox/custom.ts

@@ -7,9 +7,8 @@ import * as BuildConfig from 'soapbox/build-config';
 export const custom = (filename: string, fallback: any = {}): any => {
   if (BuildConfig.NODE_ENV === 'test') return fallback;
 
-  // @ts-ignore: yes it does
-  const context = require.context('custom', false, /\.json$/);
-  const path = `./${filename}.json`;
+  const modules = import.meta.glob('../../custom/*.json', { eager: true });
+  const key = `../../custom/${filename}.json`;
 
-  return context.keys().includes(path) ? context(path) : fallback;
+  return modules[key] ? modules[key] : fallback;
 };

app/soapbox/features/emoji/emoji-compressed.ts

@@ -5,18 +5,19 @@
 // It's designed to be emitted in an array format to take up less space
 // over the wire.
 
-import { emojiIndex } from 'emoji-mart';
-import allJson from 'emoji-mart/data/all.json';
-import { uncompress as emojiMartUncompress } from 'emoji-mart/dist/utils/data';
+import allJson from 'emoji-mart/data/all.json' assert { type: 'json' };
+import { uncompress as emojiMartUncompress } from 'emoji-mart/dist/utils/data.js';
+import wtf from 'emoji-mart/dist/utils/emoji-index/emoji-index.js';
 
-import emojiMap from './emoji-map.json';
-import { unicodeToFilename } from './unicode-to-filename';
-import { unicodeToUnifiedName } from './unicode-to-unified-name';
+import emojiMap from './emoji-map.json' assert { type: 'json' };
+import { unicodeToFilename } from './unicode-to-filename.js';
+import { unicodeToUnifiedName } from './unicode-to-unified-name.js';
 
-let data = allJson;
+const data = { ...allJson };
+const emojiIndex = wtf.default;
 
 if (data.compressed) {
-  data = emojiMartUncompress(data);
+  emojiMartUncompress(data);
 }
 
 const emojiMartData = data;

app/soapbox/features/emoji/emoji-mart-data-light.ts

@@ -3,7 +3,8 @@
 // emojiIndex.search functionality.
 import { unicodeToUnifiedName } from './unicode-to-unified-name';
 
-const [ shortCodesToEmojiData, skins, categories, short_names ] = import.meta.compileTime<any[]>('./emoji-compressed.ts');
+// @ts-ignore
+const [ shortCodesToEmojiData, skins, categories, short_names ] = import.meta.compileTime('./emoji-compressed.ts');
 
 const emojis: Record<string, any> = {};
 

app/soapbox/features/emoji/emoji-unicode-mapping-light.js

@@ -1,6 +1,7 @@
 // A mapping of unicode strings to an object containing the filename
 // (i.e. the svg filename) and a shortCode intended to be shown
 // as a "title" attribute in an HTML element (aka tooltip).
+import { unicodeToFilename } from './unicode-to-filename';
 
 const [
   shortCodesToEmojiData,
@@ -8,8 +9,7 @@ const [
   categories, // eslint-disable-line @typescript-eslint/no-unused-vars
   short_names, // eslint-disable-line @typescript-eslint/no-unused-vars
   emojisWithoutShortCodes,
-] = require('./emoji-compressed');
-const { unicodeToFilename } = require('./unicode-to-filename');
+] = import.meta.compileTime('./emoji-compressed.ts');
 
 // decompress
 const unicodeMapping = {};
@@ -29,4 +29,4 @@ Object.keys(shortCodesToEmojiData).forEach((shortCode) => {
 });
 emojisWithoutShortCodes.forEach(emojiMapData => processEmojiMapData(emojiMapData));
 
-module.exports = unicodeMapping;
+export default unicodeMapping;

app/soapbox/features/emoji/unicode-to-filename.js

@@ -1,6 +1,6 @@
 // taken from:
 // https://github.com/twitter/twemoji/blob/47732c7/twemoji-generator.js#L848-L866
-exports.unicodeToFilename = (str) => {
+export const unicodeToFilename = (str) => {
   let result = '';
   let charCode = 0;
   let p = 0;

app/soapbox/features/emoji/unicode-to-unified-name.js

@@ -6,7 +6,7 @@ function padLeft(str, num) {
   return str;
 }
 
-exports.unicodeToUnifiedName = (str) => {
+export const unicodeToUnifiedName = (str) => {
   let output = '';
 
   for (let i = 0; i < str.length; i += 2) {

app/soapbox/reducers/auth.ts

@@ -2,7 +2,7 @@ import { List as ImmutableList, Map as ImmutableMap, Record as ImmutableRecord,
 import trim from 'lodash/trim';
 
 import { MASTODON_PRELOAD_IMPORT } from 'soapbox/actions/preload';
-import BuildConfig from 'soapbox/build-config';
+import * as BuildConfig from 'soapbox/build-config';
 import KVStore from 'soapbox/storage/kv-store';
 import { validId, isURL } from 'soapbox/utils/auth';
 

app/soapbox/utils/code-compiletime.ts

@@ -0,0 +1,48 @@
+import { execSync } from 'child_process';
+
+import pkg from '../../../package.json';
+
+const { CI_COMMIT_TAG, CI_COMMIT_REF_NAME, CI_COMMIT_SHA } = process.env;
+
+const shortRepoName = (url: string): string => new URL(url).pathname.substring(1);
+const trimHash = (hash: string): string => hash.substring(0, 7);
+
+const tryGit = (cmd: string): string | undefined => {
+  try {
+    return String(execSync(cmd));
+  } catch (e) {
+    return undefined;
+  }
+};
+
+const version = (pkg: Record<string, any>) => {
+  // Try to discern from GitLab CI first
+  if (CI_COMMIT_TAG === `v${pkg.version}` || CI_COMMIT_REF_NAME === 'stable') {
+    return pkg.version;
+  }
+
+  if (typeof CI_COMMIT_SHA === 'string') {
+    return `${pkg.version}-${trimHash(CI_COMMIT_SHA)}`;
+  }
+
+  // Fall back to git directly
+  const head = tryGit('git rev-parse HEAD');
+  const tag = tryGit(`git rev-parse v${pkg.version}`);
+
+  if (head && head !== tag) return `${pkg.version}-${trimHash(head)}`;
+
+  // Fall back to version in package.json
+  return pkg.version;
+};
+
+export default () => ({
+  data: {
+    name: pkg.name,
+    displayName: pkg.displayName,
+    url: pkg.repository.url,
+    repository: shortRepoName(pkg.repository.url),
+    version: version(pkg),
+    homepage: pkg.homepage,
+    ref: CI_COMMIT_TAG || CI_COMMIT_SHA || tryGit('git rev-parse HEAD'),
+  },
+});

app/soapbox/utils/code.ts

@@ -1,46 +1,3 @@
-import { execSync } from 'child_process';
+const data: any = import.meta.compileTime('./code-compiletime.ts');
 
-import pkg from '../../../package.json';
-
-const { CI_COMMIT_TAG, CI_COMMIT_REF_NAME, CI_COMMIT_SHA } = process.env;
-
-const shortRepoName = (url: string): string => new URL(url).pathname.substring(1);
-const trimHash = (hash: string): string => hash.substring(0, 7);
-
-const tryGit = (cmd: string): string | undefined => {
-  try {
-    return String(execSync(cmd));
-  } catch (e) {
-    return undefined;
-  }
-};
-
-const version = (pkg: Record<string, any>) => {
-  // Try to discern from GitLab CI first
-  if (CI_COMMIT_TAG === `v${pkg.version}` || CI_COMMIT_REF_NAME === 'stable') {
-    return pkg.version;
-  }
-
-  if (typeof CI_COMMIT_SHA === 'string') {
-    return `${pkg.version}-${trimHash(CI_COMMIT_SHA)}`;
-  }
-
-  // Fall back to git directly
-  const head = tryGit('git rev-parse HEAD');
-  const tag = tryGit(`git rev-parse v${pkg.version}`);
-
-  if (head && head !== tag) return `${pkg.version}-${trimHash(head)}`;
-
-  // Fall back to version in package.json
-  return pkg.version;
-};
-
-export default {
-  name: pkg.name,
-  displayName: pkg.displayName,
-  url: pkg.repository.url,
-  repository: shortRepoName(pkg.repository.url),
-  version: version(pkg),
-  homepage: pkg.homepage,
-  ref: CI_COMMIT_TAG || CI_COMMIT_SHA || tryGit('git rev-parse HEAD'),
-};
+export default data;

app/soapbox/utils/static.ts

@@ -3,7 +3,7 @@
  * @module soapbox/utils/static
  */
 
-import { join } from 'path';
+import { join } from 'path-browserify';
 
 import * as BuildConfig from 'soapbox/build-config';
 

package.json

@@ -80,6 +80,7 @@
     "@types/leaflet": "^1.8.0",
     "@types/lodash": "^4.14.180",
     "@types/object-assign": "^4.0.30",
+    "@types/path-browserify": "^1.0.0",
     "@types/react": "^18.0.26",
     "@types/react-color": "^3.0.6",
     "@types/react-datepicker": "^4.4.2",

tsconfig.json

@@ -6,7 +6,7 @@
     "strict": true,
     "module": "es2022",
     "lib": ["es2019", "es6", "dom", "webworker"],
-    "target": "es5",
+    "target": "es2022",
     "jsx": "react",
     "allowJs": true,
     "moduleResolution": "node",

vite.config.ts

@@ -20,9 +20,9 @@ export default defineConfig({
       // Use React plugin in all *.jsx and *.tsx files
       include: '**/*.{jsx,tsx}',
     }),
-    compileTime(),
     // @ts-ignore
     vitePluginRequire.default(),
+    compileTime(),
   ],
   resolve: {
     alias: [

yarn.lock

@@ -3148,6 +3148,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/path-browserify@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/path-browserify/-/path-browserify-1.0.0.tgz#294ec6e88b6b0d340a3897b7120e5b393f16690e"
+  integrity sha512-XMCcyhSvxcch8b7rZAtFAaierBYdeHXVvg2iYnxOV0MCQHmPuRRmGZPFDRzPayxcGiiSL1Te9UIO+f3cuj0tfw==
+
 "@types/prettier@^2.1.5":
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.3.2.tgz#fc8c2825e4ed2142473b4a81064e6e081463d1b3"