Migrate to Vite

.eslintignore

@@ -3,3 +3,5 @@ dist
 node_modules
 .eslintrc.js
 **/vite.config.ts
+jquery-ui-bundle.js
+jquery.js

.gitignore

@@ -13,3 +13,7 @@ __pycache__/
 .DS_Store
 venv/
 failure-test*.png
+
+# auto-generated html from vite
+src/html/*.html
+src/html/**/*.html

package.json

@@ -4,10 +4,11 @@
   "description": "Get live translations for YouTube and Twitch streams, crowdsourced from multilingual viewers!",
   "scripts": {
     "build": "webpack --mode development",
-    "build:production": "webpack --mode production",
+    "build:production": "vite build",
     "build:android": "webpack --mode production --env android",
     "package": "node utils/package.js",
     "start": "webpack serve",
+    "start:vite": "MINIFY=false vite build --watch",
     "ss": "node utils/screenshot.js",
     "update:list": "node utils/genlist.js",
     "type:check": "tsc -p tsconfig.json",
@@ -24,6 +25,8 @@
     "@babel/plugin-transform-modules-commonjs": "^7.15.4",
     "@babel/preset-env": "^7.15.6",
     "@fullhuman/postcss-purgecss": "^4.0.3",
+    "@rollup/plugin-alias": "^4.0.2",
+    "@sveltejs/vite-plugin-svelte": "^1.2.0",
     "@testing-library/dom": "^8.5.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/svelte": "^3.0.3",
@@ -62,6 +65,8 @@
     "postcss-loader": "^6.1.1",
     "postcss-preset-env": "^6.7.0",
     "request": "2.88.2",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-replace": "^2.2.0",
     "sass": "^1.32.8",
     "sass-loader": "^12.1.0",
     "sha-1": "^1.0.0",
@@ -78,6 +83,8 @@
     "ts-jest": "^26.5.5",
     "ts-loader": "^9.3.1",
     "typescript": "^4.7.4",
+    "vite": "^3.2.4",
+    "vite-plugin-web-extension": "^1.4.4",
     "webpack": "^5.86.0",
     "webpack-cli": "^4.7.2",
     "webpack-concat-files-plugin": "^0.5.2",

postcss.config.js

@@ -1,4 +1,5 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
+// Should be same as https://github.com/LiveTL/HyperChat/blob/mv3/postcss.config.js
+
 const extractor = require('smelte/src/utils/css-extractor.js');
 const tailwindConfig = require('./tailwind.config.js');
 
@@ -10,6 +11,7 @@ const safelistSelectors = [
   // Components with custom color prop might need its color to be whitelisted too
   'bg-blue-500',
   'hover:bg-blue-400',
+  // is not in HyperChat's postcss conf but was in LiveTL's
   'text-alert-500'
 ];
 
@@ -22,32 +24,25 @@ const safelistPatterns = [
   /^[mphw]\w?-\d\.5$/
 ];
 
-module.exports = (purge = false) => {
-  const postcss = [];
-  return [
-    require('postcss-import')(),
-    require('postcss-url')(),
-    require('postcss-input-range')(),
-    require('autoprefixer')(),
-    require('tailwindcss')(tailwindConfig),
-    ...postcss,
-    purge &&
-      require('cssnano')({
-        preset: 'default'
-      }),
-    purge &&
-      require('@fullhuman/postcss-purgecss')({
-        content: ['./**/*.svelte'],
-        extractors: [
-          {
-            extractor,
-            extensions: ['svelte']
-          }
-        ],
-        safelist: {
-          standard: safelistSelectors,
-          deep: safelistPatterns
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'postcss-url': {},
+    'postcss-input-range': {},
+    tailwindcss: tailwindConfig,
+    autoprefixer: {},
+    '@fullhuman/postcss-purgecss': {
+      content: ['./**/*.svelte'],
+      extractors: [
+        {
+          extractor,
+          extensions: ['svelte']
         }
-      })
-  ].filter(Boolean);
+      ],
+      safelist: {
+        standard: safelistSelectors,
+        deep: safelistPatterns
+      }
+    }
+  }
 };

src/components/Captions.svelte

@@ -1,7 +1,6 @@
 <script>
   import '../css/splash.css';
-  import * as j from 'jquery';
-  import 'jquery-ui-bundle';
+  import { j } from '../plugins/jquery.js';
   import 'jquery-ui-bundle/jquery-ui.css';
   import {
     captionLeft,

src/components/Watch.svelte

@@ -1,8 +1,6 @@
 <script>
-  import * as j from 'jquery';
-  import 'jquery-ui-bundle';
+  import { j } from '../plugins/jquery.js';
   import 'jquery-ui-bundle/jquery-ui.css';
-  import '../plugins/jquery.ui.touch-punch';
   import VideoEmbed from './VideoEmbed.svelte';
   import Wrapper from './Wrapper.svelte';
   import {

src/html/README.md

@@ -0,0 +1,23 @@
+# HTML
+
+This file will contain the html for the various pages of LiveTL.
+
+These are auto-generated from `src/empty.html` by our vite config.
+
+Each html should look something like
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons&display=swap" rel="stylesheet">
+  <script defer="defer" type="module" src="path-to-page-js"></script>
+</head>
+
+<body>
+</body>
+
+</html>
+```

src/html/hyperchat/README.md

@@ -0,0 +1,3 @@
+# HyperChat HTML
+
+HTML entry points from hyperchat.

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "LiveTL - Translation Filter for Streams",
   "options_ui": {
-    "page": "options.html",
+    "page": "html/options.html",
     "open_in_tab": false
   },
   "permissions": [
@@ -14,7 +14,7 @@
     "https://www.twitch.tv/*"
   ],
   "background": {
-    "page": "background.html",
+    "page": "html/background.html",
     "persistent": true
   },
   "icons": {
@@ -33,10 +33,10 @@
         "https://studio.youtube.com/live_chat_replay*"
       ],
       "js": [
-        "chat-interceptor.bundle.js",
-        "chat.bundle.js",
-        "injector.bundle.js",
-        "translatormode.bundle.js"
+        "submodules/chat/src/scripts/chat-interceptor.ts",
+        "submodules/chat/src/scripts/chat-injector.ts",
+        "ts/content_scripts/injector.ts",
+        "js/pages/translatormode.js"
       ],
       "all_frames": true
     },
@@ -45,7 +45,7 @@
         "https://www.youtube.com/error*?*"
       ],
       "js": [
-        "workaround-injector.bundle.js"
+        "ts/content_scripts/workaround-injector.ts"
       ],
       "all_frames": true
     },
@@ -54,7 +54,7 @@
         "https://www.twitch.tv/*"
       ],
       "js": [
-        "twitch-injector.bundle.js"
+        "ts/content_scripts/twitch-injector.ts"
       ],
       "all_frames": true
     }