Hotpatching / Hosted Site Script

.env.dev

@@ -3,3 +3,4 @@ VITE_APP_API="http://localhost:3100/v3"
 VITE_APP_API_GQL="http://localhost:3000/v3/gql"
 VITE_APP_API_REST_OLD="http://localhost:3100/v2"
 VITE_APP_API_EVENTS="ws://localhost:3700/v3"
+VITE_APP_HOST="http://localhost:8080"

.env.production

@@ -3,3 +3,4 @@ VITE_APP_API="https://7tv.io/v3"
 VITE_APP_API_GQL="https://7tv.io/v3/gql"
 VITE_APP_API_REST_OLD="https://7tv.io/v2"
 VITE_APP_API_EVENTS="wss://events.7tv.io/v3"
+VITE_APP_HOST="https://extension.7tv.gg"

.github/workflows/ci.yaml

@@ -28,6 +28,11 @@ on:
                 default: false
                 description: "Upload to CWS/AMO"
 
+            deploy:
+                type: boolean
+                default: false
+                description: "Deploy Hosted Build"
+
 concurrency:
     group: ${{ github.workflow }}-${{ github.ref }}
     cancel-in-progress: true
@@ -110,6 +115,10 @@ jobs:
 
             - name: Structure Files
               run: |
+                  if [ -f ${{ steps.web-ext-build.outputs.target }} ]; then
+                      mv ${{ steps.web-ext-build.outputs.target }} dist/ext.xpi
+                  fi
+
                   mkdir -p dist/manifest
                   cp dist/mv2/manifest.json dist/manifest/manifest.mv2.json
                   cp dist/mv3/manifest.json dist/manifest/manifest.mv3.json
@@ -211,6 +220,41 @@ jobs:
                   name: v${{ fromJson(env.PACKAGE_JSON).version }}
                   tag: v${{ fromJson(env.PACKAGE_JSON).version }}
 
+    deploy:
+        name: Deploy Hosted Build
+        runs-on: aws-runner
+        needs: [ci, release]
+        if: ${{ inputs.deploy }}
+
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: "18"
+
+            - name: Install Yarn
+              run: npm install -g yarn
+
+            - name: Install Dependencies
+              run: |
+                  yarn
+
+            - name: Build (Hosted)
+              env:
+                  BRANCH: ${{ inputs.nightly && 'nightly' || ''  }}
+              run: |
+                  yarn build-hosted:prod
+
+            - name: Upload to Host
+              uses: shallwefootball/s3-upload-action@master
+              with:
+                  endpoint: ${{ secrets.R2_API_ENDPOINT }}
+                  aws_key_id: ${{ secrets.R2_API_AK }}
+                  aws_secret_access_key: ${{ secrets.R2_API_SECRET }}
+                  aws_bucket: 7tv-extension
+                  source_dir: "dist-hosted/"
+                  destination_dir: ""
+
     push:
         name: Submit to CWS/AMO
         runs-on: aws-runner
@@ -224,12 +268,18 @@ jobs:
                   node-version: "18"
 
             # Retrieve the non-CRX MV3 zip to be uploaded to CWS
-            - name: Download Artifact (Chromium)
+            - name: Download Artifact (Build)
               uses: actions/download-artifact@v3
               with:
                   name: build
                   path: ext
 
+            - name: Download Artifact (Installable)
+              uses: actions/download-artifact@v3
+              with:
+                  name: installable
+                  path: ext
+
             # Get the XPI File for Firefox
             # It will be uploaded to AMO
             - name: Download Manifest
@@ -257,6 +307,7 @@ jobs:
                     --refresh-token "$(sed '3q;d' c)"
 
             - name: Upload to AMO
+              if: always()
               uses: trmcnvn/firefox-addon@v1
               with:
                   uuid: ${{ env.NIGHTLY_EXTENSION_ID_AMO }}

.gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+dist-hosted
 *.local
 
 # Editor directories and files

CHANGELOG-nightly.md

@@ -1,5 +1,8 @@
 ### Untitled Version
 
+**The changes listed here are not assigned to an official release**.
+
+- Added hot-patching functionality to the extension
 - Fixed an issue which caused flickering when hovering on a deleted message
 
 ### Version 3.0.3.1000

package.json

@@ -3,17 +3,20 @@
 	"displayName": "7TV",
 	"description": "Improve your viewing experience on Twitch & YouTube with new features, emotes, vanity and performance.",
 	"private": true,
-	"version": "3.0.3",
-	"dev_version": "1.0",
+	"version": "3.0.4",
+	"dev_version": "3.0",
 	"scripts": {
 		"start": "NODE_ENV=dev yarn build:dev && NODE_ENV=dev vite --mode dev",
 		"build:section:app": "vite build --config vite.config.ts",
 		"build:section:background": "vite build --config vite.config.background.ts",
 		"build:section:content": "vite build --config vite.config.content.ts",
 		"build:section:worker": "vite build -c vite.config.worker.ts",
+		"build-hosted:section:worker": "vite build --config vite.config.worker.ts",
+		"build-hosted:section:site": "vite build --config vite.config.hosted.ts",
 		"build:dev": "NODE_ENV=dev run-s build:section:*",
 		"build:prod": "NODE_ENV=production vue-tsc --noEmit && run-s build:section:*",
-		"build:mv2:prod": "vue-tsc --noEmit && MV2=true vite build --minify es2021 && vite build -c vite.config.worker.ts --minify es2021",
+		"build-hosted:dev": "NODE_ENV=dev run-s build-hosted:section:*",
+		"build-hosted:prod": "NODE_ENV=production vue-tsc --noEmit && run-s build-hosted:section:*",
 		"watch:section:background": "vite build --config vite.config.background.ts --watch",
 		"watch:section:content": "vite build --config vite.config.content.ts --watch",
 		"watch:section:worker": "vite build --config vite.config.worker.ts --watch",

src/assets/svg/icons/CloudIcon.vue

@@ -0,0 +1,8 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="1em" height="1em" fill="currentColor">
+		<!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+		<path
+			d="M0 480H144 512 640V352c0-59.6-40.8-109.8-96-124V192c0-53-43-96-96-96c-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32C167.6 32 96 103.6 96 192v8.2C40.1 220 0 273.3 0 336V480z"
+		/>
+	</svg>
+</template>

src/composable/chat/useChatEmotes.ts

@@ -2,28 +2,6 @@ import { reactive } from "vue";
 import type { ChannelContext } from "@/composable/channel/useChannelContext";
 import { useEmoji } from "@/composable/useEmoji";
 
-const { emojiList } = useEmoji();
-const emojiSets = {} as Record<string, SevenTV.EmoteSet>;
-const emojis = {} as Record<string, SevenTV.ActiveEmote>;
-emojiList.forEach((e) => {
-	const es = emojiSets[e.group];
-	if (!es) {
-		emojiSets[e.group] = {
-			id: e.group,
-			name: e.group,
-			provider: "EMOJI",
-			emotes: [],
-			tags: [],
-			immutable: true,
-			privileged: true,
-			flags: 0,
-		};
-	}
-
-	emojiSets[e.group].emotes.push(e.emote);
-	emojis[e.emote.name] = e.emote;
-});
-
 interface ChatEmotes {
 	active: Record<string, SevenTV.ActiveEmote>;
 	sets: Record<string, SevenTV.EmoteSet>;
@@ -32,6 +10,8 @@ interface ChatEmotes {
 }
 
 const m = new WeakMap<ChannelContext, ChatEmotes>();
+const emojiSets = {} as Record<string, SevenTV.EmoteSet>;
+const emojis = {} as Record<string, SevenTV.ActiveEmote>;
 
 export function useChatEmotes(ctx: ChannelContext) {
 	let x = m.get(ctx);
@@ -102,3 +82,25 @@ export function useChatEmotes(ctx: ChannelContext) {
 
 	return r;
 }
+
+export function convertEmojis(): void {
+	const { emojiList } = useEmoji();
+	emojiList.forEach((e) => {
+		const es = emojiSets[e.group];
+		if (!es) {
+			emojiSets[e.group] = {
+				id: e.group,
+				name: e.group,
+				provider: "EMOJI",
+				emotes: [],
+				tags: [],
+				immutable: true,
+				privileged: true,
+				flags: 0,
+			};
+		}
+
+		emojiSets[e.group].emotes.push(e.emote);
+		emojis[e.emote.name] = e.emote;
+	});
+}

src/composable/useEmoji.ts

@@ -1,5 +1,5 @@
-import { reactive } from "vue";
-import emojiList from "@/assets/blob/emoji.json";
+import { inject, reactive } from "vue";
+import { SITE_ASSETS_URL } from "@/common/Constant";
 
 export interface Emoji {
 	codes: string;
@@ -14,25 +14,35 @@ export interface Emoji {
 const emojiByName = new Map<string, Emoji>();
 const emojiByCode = new Map<string, Emoji>();
 
-for (const e of emojiList) {
-	const emoji = e as Emoji;
+const cached = [] as Emoji[];
+export async function loadEmojiList() {
+	if (cached.length) return cached;
 
-	emoji.emote = {
-		id: emoji.codes,
-		name: emoji.name,
-		unicode: emoji.char,
-		provider: "EMOJI",
-		flags: 0,
-	} as SevenTV.ActiveEmote;
+	const assetsBase = inject(SITE_ASSETS_URL, "");
+	const data = (await (await fetch(assetsBase + "/emoji/emoji.json")).json().catch(() => void 0)) as Emoji[];
 
-	emojiByName.set(emoji.name, emoji);
-	emojiByCode.set(emoji.char, emoji);
+	for (const e of data) {
+		const emoji = e as Emoji;
+
+		emoji.emote = {
+			id: emoji.codes,
+			name: emoji.name,
+			unicode: emoji.char,
+			provider: "EMOJI",
+			flags: 0,
+		} as SevenTV.ActiveEmote;
+
+		emojiByName.set(emoji.name, emoji);
+		emojiByCode.set(emoji.char, emoji);
+	}
+
+	cached.push(...data);
 }
 
-export const useEmoji = () => {
+export function useEmoji() {
 	return reactive({
-		emojiList: emojiList as Emoji[],
+		emojiList: cached,
 		emojiByCode,
 		emojiByName,
 	});
-};
+}

src/composable/useWorker.ts

@@ -44,9 +44,11 @@ async function init(bc: BroadcastChannel, originURL: string): Promise<SharedWork
 		}
 
 		// Fetch worker data
-		const data = await (await fetch(workerURL || "")).blob().catch((err) => {
-			log.error("Unable to fetch worker data", err);
-		});
+		const data = await fetch(workerURL || "")
+			.then((r) => r.blob())
+			.catch((err) => {
+				log.error("Unable to fetch worker data", err);
+			});
 		if (!data) return Promise.reject("There was an error fetching worker data");
 
 		log.info("Received worker data", `(${data.size} bytes)`);

src/content/content.ts

@@ -1,4 +1,5 @@
 import { APP_BROADCAST_CHANNEL } from "@/common/Constant";
+import { insertEmojiVectors } from "./emoji";
 
 // Inject extension into site
 const inject = () => {
@@ -25,6 +26,11 @@ const inject = () => {
 	}
 
 	(document.head || document.documentElement).appendChild(script);
+
+	// Insert emojis
+	setTimeout(() => {
+		insertEmojiVectors();
+	}, 1e3);
 };
 
 const bc = new BroadcastChannel(APP_BROADCAST_CHANNEL);

src/content/emoji.ts

@@ -0,0 +1,27 @@
+/**
+ * Inserts the emoji vectors into the DOM.
+ */
+export async function insertEmojiVectors(): Promise<void> {
+	const container = document.createElement("div");
+	container.id = "seventv-emoji-container";
+	container.style.display = "none";
+	container.style.position = "fixed";
+	container.style.top = "-1px";
+	container.style.left = "-1px";
+
+	// Get path to emoji blocks in assets
+	const base = chrome.runtime.getURL("assets/emoji");
+	const blocks = 11;
+
+	for (let i = 0; i < blocks; i++) {
+		const data = (await fetch(base + "/emojis" + i + ".svg")).text();
+
+		const element = document.createElement("div");
+		element.id = "emojis" + i;
+		element.innerHTML = await data;
+
+		container.appendChild(element);
+	}
+
+	document.head.appendChild(container);
+}

src/site/App.vue

@@ -4,10 +4,6 @@
 		<Suspense>
 			<component :is="platformComponent" v-if="platformComponent" />
 		</Suspense>
-
-		<div id="seventv-emoji-container" :style="{ display: 'none' }">
-			<component :is="EmojiContainer" />
-		</div>
 	</template>
 
 	<!-- Render tooltip -->
@@ -24,14 +20,15 @@ import { markRaw, onMounted, ref } from "vue";
 import { APP_BROADCAST_CHANNEL, SITE_WORKER_URL } from "@/common/Constant";
 import { log } from "@/common/Logger";
 import { db } from "@/db/idb";
+import { convertEmojis } from "@/composable/chat/useChatEmotes";
+import { loadEmojiList } from "@/composable/useEmoji";
 import { useFrankerFaceZ } from "@/composable/useFrankerFaceZ";
 import { fillSettings, useConfig, useSettings } from "@/composable/useSettings";
 import { useWorker } from "@/composable/useWorker";
 import Global from "./global/Global.vue";
-import YouTubeSite from "./youtube.com/YouTubeSite.vue";
 
-const EmojiContainer = defineAsyncComponent(() => import("@/site/EmojiContainer.vue"));
 const TwitchSite = defineAsyncComponent(() => import("@/site/twitch.tv/TwitchSite.vue"));
+const YouTubeSite = defineAsyncComponent(() => import("@/site/youtube.com/YouTubeSite.vue"));
 
 if (import.meta.hot) {
 	import.meta.hot.on("full-reload", () => {
@@ -89,6 +86,9 @@ bc.addEventListener("message", (ev) => {
 	}
 });
 
+// Load emojis
+loadEmojiList().then(() => convertEmojis());
+
 log.setContextName(`site/${domain}`);
 
 onMounted(() => {