vite: fix emojis

vite: build stuff into static/packs like before
Fix crypto icons
2023-01-18 21:00:21 -06:00 · 2023-01-18 20:47:13 -06:00 · 2023-01-18 20:39:08 -06:00 · 2023-01-18 20:06:32 -06:00 · 2023-01-18 16:01:15 -06:00 · 2023-01-18 15:24:42 -06:00
--- a/app/index.html
+++ b/app/index.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <link href="/manifest.json" rel="manifest">
+    <!--server-generated-meta-->
+    <script type="module" src="./soapbox/main.tsx"></script>
+  </head>
+  <body class="theme-mode-light no-reduce-motion">
+    <div id="soapbox" class="h-full">
+      <div class="loading-indicator-wrapper">
+        <div class="loading-indicator">
+          <div class="loading-indicator__container">
+            <div class="loading-indicator__figure"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <noscript>To use this website, please enable JavaScript.</noscript>
+  </body>
+</html>
--- a/app/soapbox/build-config-compiletime.ts
+++ b/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,
+  },
+});
--- a/app/soapbox/build-config.js
+++ b/app/soapbox/build-config.js
@ -1,46 +0,0 @@
-// @preval
-/**
- * Build config: configuration set at build time.
- * @module soapbox/build-config
- */
-
-const trim = require('lodash/trim');
-const trimEnd = require('lodash/trimEnd');
-
-const {
-  NODE_ENV,
-  BACKEND_URL,
-  FE_SUBDIRECTORY,
-  FE_BUILD_DIR,
-  FE_INSTANCE_SOURCE_DIR,
-  SENTRY_DSN,
-} = process.env;
-
-const sanitizeURL = url => {
-  try {
-    return trimEnd(new URL(url).toString(), '/');
-  } catch {
-    return '';
-  }
-};
-
-const sanitizeBasename = path => {
-  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({
-  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,
-});
--- a/app/soapbox/build-config.ts
+++ b/app/soapbox/build-config.ts
@ -0,0 +1,18 @@
+// @ts-nocheck
+const {
+  NODE_ENV,
+  BACKEND_URL,
+  FE_SUBDIRECTORY,
+  FE_BUILD_DIR,
+  FE_INSTANCE_SOURCE_DIR,
+  SENTRY_DSN,
+} = import.meta.compileTime('./build-config-compiletime.ts');
+
+export {
+  NODE_ENV,
+  BACKEND_URL,
+  FE_SUBDIRECTORY,
+  FE_BUILD_DIR,
+  FE_INSTANCE_SOURCE_DIR,
+  SENTRY_DSN,
+};
--- a/app/soapbox/custom.ts
+++ b/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;
 };
--- a/app/soapbox/features/crypto-donate/components/crypto-icon.tsx
+++ b/app/soapbox/features/crypto-donate/components/crypto-icon.tsx
@ -1,12 +1,11 @@
+import genericIcon from 'cryptocurrency-icons/svg/color/generic.svg';
 import React from 'react';

 /** Get crypto icon URL by ticker symbol, or fall back to generic icon */
 const getIcon = (ticker: string): string => {
-  try {
-    return require(`cryptocurrency-icons/svg/color/${ticker.toLowerCase()}.svg`);
-  } catch {
-    return require('cryptocurrency-icons/svg/color/generic.svg');
-  }
+  const modules: Record<string, any> = import.meta.glob('../../../../../node_modules/cryptocurrency-icons/svg/color/*.svg', { eager: true });
+  const key = `../../../../../node_modules/cryptocurrency-icons/svg/color/${ticker}.svg`;
+  return modules[key]?.default || genericIcon;
 };

 interface ICryptoIcon {
--- a/app/soapbox/features/emoji/emoji-compressed.ts
+++ b/app/soapbox/features/emoji/emoji-compressed.ts
@ -1,20 +1,23 @@
-// @preval
+// @ts-nocheck
 // http://www.unicode.org/Public/emoji/5.0/emoji-test.txt
 // This file contains the compressed version of the emoji data from
 // both emoji-map.json and from emoji-mart's emojiIndex and data objects.
 // It's designed to be emitted in an array format to take up less space
 // over the wire.

-const { emojiIndex } = require('emoji-mart');
-let data = require('emoji-mart/data/all.json');
-const { uncompress: emojiMartUncompress } = require('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';

-const emojiMap = require('./emoji-map.json');
-const { unicodeToFilename } = require('./unicode-to-filename');
-const { unicodeToUnifiedName } = require('./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';
+
+const data = { ...allJson };
+const emojiIndex = wtf.default;

 if (data.compressed) {
-  data = emojiMartUncompress(data);
+  emojiMartUncompress(data);
 }

 const emojiMartData = data;
@ -113,12 +116,14 @@ Object.keys(emojiIndex.emojis).forEach(key => {
  shortCodesToEmojiData[key].push(searchData);
 });

-// JSON.parse/stringify is to emulate what @preval is doing and avoid any
-// inconsistent behavior in dev mode
-module.exports = JSON.parse(JSON.stringify([
-  shortCodesToEmojiData,
-  emojiMartData.skins,
-  emojiMartData.categories,
-  emojiMartData.aliases,
-  emojisWithoutShortCodes,
-]));
+export default async() => {
+  return {
+    data: [
+      shortCodesToEmojiData,
+      emojiMartData.skins,
+      emojiMartData.categories,
+      emojiMartData.aliases,
+      emojisWithoutShortCodes,
+    ],
+  };
+};
--- a/app/soapbox/features/emoji/emoji-mart-data-light.ts
+++ b/app/soapbox/features/emoji/emoji-mart-data-light.ts
@ -1,10 +1,10 @@
 // The output of this module is designed to mimic emoji-mart's
 // "data" object, such that we can use it for a light version of emoji-mart's
 // emojiIndex.search functionality.
-import emojiCompressed from './emoji-compressed';
 import { unicodeToUnifiedName } from './unicode-to-unified-name';

-const [ shortCodesToEmojiData, skins, categories, short_names ] = emojiCompressed;
+// @ts-ignore
+const [ shortCodesToEmojiData, skins, categories, short_names ] = import.meta.compileTime('./emoji-compressed.ts');

 const emojis: Record<string, any> = {};

--- a/app/soapbox/features/emoji/emoji-unicode-mapping-light.js
+++ b/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;
--- a/app/soapbox/features/emoji/unicode-to-filename.js
+++ b/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;
--- a/app/soapbox/features/emoji/unicode-to-unified-name.js
+++ b/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) {
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@ -400,8 +400,6 @@ const Thread: React.FC<IThread> = (props) => {
      index: ancestorsIds.size,
      offset: -80,
    });
-
-    setImmediate(() => statusRef.current?.querySelector<HTMLDivElement>('.detailed-actualStatus')?.focus());
  }, [props.params.statusId, status?.id, ancestorsIds.size, isLoaded]);

  const handleRefresh = () => {
--- a/app/soapbox/reducers/auth.ts
+++ b/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';

--- a/app/soapbox/utils/code-compiletime.ts
+++ b/app/soapbox/utils/code-compiletime.ts
@ -1,14 +1,13 @@
-// @preval
-const { execSync } = require('child_process');
+import { execSync } from 'child_process';

-const pkg = require('../../../package.json');
+import pkg from '../../../package.json';

 const { CI_COMMIT_TAG, CI_COMMIT_REF_NAME, CI_COMMIT_SHA } = process.env;

-const shortRepoName = url => new URL(url).pathname.substring(1);
-const trimHash = hash => hash.substring(0, 7);
+const shortRepoName = (url: string): string => new URL(url).pathname.substring(1);
+const trimHash = (hash: string): string => hash.substring(0, 7);

-const tryGit = cmd => {
+const tryGit = (cmd: string): string | undefined => {
  try {
    return String(execSync(cmd));
  } catch (e) {
@ -16,7 +15,7 @@ const tryGit = cmd => {
  }
 };

-const version = pkg => {
+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;
@ -36,12 +35,14 @@ const version = pkg => {
  return pkg.version;
 };

-module.exports = {
-  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: {
+    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'),
+  },
+});
--- a/app/soapbox/utils/code.ts
+++ b/app/soapbox/utils/code.ts
@ -0,0 +1,3 @@
+const data: any = import.meta.compileTime('./code-compiletime.ts');
+
+export default data;
--- a/app/soapbox/utils/static.ts
+++ b/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';

--- a/jest.config.cjs
+++ b/jest.config.cjs
@ -22,7 +22,7 @@ module.exports = {
    'app/soapbox/**/*.mjs',
    'app/soapbox/**/*.ts',
    'app/soapbox/**/*.tsx',
-    '!app/soapbox/features/emoji/emoji-compressed.js',
+    '!app/soapbox/features/emoji/emoji-compressed.ts',
    '!app/soapbox/service-worker/entry.ts',
    '!app/soapbox/jest/test-setup.ts',
    '!app/soapbox/jest/test-helpers.ts',
--- a/package.json
+++ b/package.json
@ -2,6 +2,7 @@
  "name": "soapbox",
  "displayName": "Soapbox",
  "version": "3.1.0",
+  "type": "module",
  "description": "Soapbox frontend for the Fediverse.",
  "homepage": "https://soapbox.pub/",
  "repository": {
@ -16,9 +17,9 @@
    "url": "https://gitlab.com/soapbox-pub/soapbox/-/issues"
  },
  "scripts": {
-    "start": "npx webpack-dev-server",
+    "start": "npx vite serve",
    "dev": "${npm_execpath} run start",
-    "build": "npx webpack",
+    "build": "npx vite build",
    "audit:fix": "npx yarn-audit-fix",
    "manage:translations": "npx ts-node ./scripts/translationRunner.ts",
    "test": "npx cross-env NODE_ENV=test npx jest",
@ -79,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",
@ -96,6 +98,7 @@
    "@types/webpack-assets-manifest": "^5.1.0",
    "@types/webpack-bundle-analyzer": "^4.6.0",
    "@types/webpack-deadcode-plugin": "^0.1.2",
+    "@vitejs/plugin-react": "^3.0.1",
    "autoprefixer": "^10.4.2",
    "axios": "^1.2.2",
    "axios-mock-adapter": "^1.21.1",
@ -187,6 +190,11 @@
    "typescript": "^4.4.4",
    "util": "^0.12.4",
    "uuid": "^9.0.0",
+    "vite": "^4.0.4",
+    "vite-plugin-compile-time": "^0.1.2",
+    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-require": "^1.1.10",
+    "vite-plugin-static-copy": "^0.13.0",
    "webpack": "^5.72.1",
    "webpack-assets-manifest": "^5.1.0",
    "webpack-bundle-analyzer": "^4.5.0",
--- a/tsconfig.json
+++ b/tsconfig.json
@ -6,13 +6,17 @@
    "strict": true,
    "module": "es2022",
    "lib": ["es2019", "es6", "dom", "webworker"],
-    "target": "es5",
+    "target": "es2022",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
-    "typeRoots": [ "./types", "./node_modules/@types"]
+    "typeRoots": [ "./types", "./node_modules/@types"],
+    "types": [
+      "vite/client",
+      "vite-plugin-compile-time/client"
+    ]
  },
  "ts-node": {
    "compilerOptions": {
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,42 @@
+import path from 'path';
+
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import compileTime from 'vite-plugin-compile-time';
+import { createHtmlPlugin } from 'vite-plugin-html';
+import vitePluginRequire from 'vite-plugin-require';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+export default defineConfig({
+  root: 'app',
+  build: {
+    // Relative to the root
+    outDir: '../static',
+    assetsDir: 'packs',
+  },
+  plugins: [
+    createHtmlPlugin({
+      template: 'index.html',
+    }),
+    react({
+      // Use React plugin in all *.jsx and *.tsx files
+      include: '**/*.{jsx,tsx}',
+    }),
+    // @ts-ignore
+    vitePluginRequire.default(),
+    compileTime(),
+    viteStaticCopy({
+      targets: [{
+        src: '../node_modules/twemoji/assets/svg/*',
+        dest: 'packs/emoji/',
+      }],
+    }),
+  ],
+  resolve: {
+    alias: [
+      { find: 'soapbox', replacement: path.resolve(__dirname, 'app', 'soapbox') },
+      { find: 'assets', replacement: path.resolve(__dirname, 'app', 'assets') },
+    ],
+  },
+  assetsInclude: ['**/*.oga'],
+});
--- a/yarn.lock
+++ b/yarn.lock
Autor	SHA1	Wiadomość	Data
Alex Gleason	930572c5e4	vite: fix emojis	2023-01-18 21:00:21 -06:00
Alex Gleason	208edab4e6	vite: build stuff into static/packs like before	2023-01-18 20:47:13 -06:00
Alex Gleason	9c9c86d8f9	Fix crypto icons	2023-01-18 20:39:08 -06:00
Alex Gleason	d900cd0c9c	OKAY, GET IT KIND OF WORKIGN AGAIN	2023-01-18 20:06:32 -06:00
Alex Gleason	c59cfbfe22	Merge remote-tracking branch 'origin/develop' into vite2	2023-01-18 16:01:15 -06:00
Alex Gleason	4bc768ee98	Vite: install vite-plugin-compile-time, start converting preval files	2023-01-18 15:24:42 -06:00
Alex Gleason	6543bf440f	Vite: preliminary setup	2023-01-18 12:27:02 -06:00