migrations to parcel

.eslintrc.json

@@ -10,5 +10,22 @@
     "ecmaVersion": "latest",
     "sourceType": "module" // add this line to allow 'import' and 'export' statements
   },
-  "rules": {}
+  "rules": {
+    // allow importing ts extensions
+    "sort-imports": ["error", {
+      "ignoreCase": true,
+      "ignoreDeclarationSort": true,
+      "ignoreMemberSort": false,
+      "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
+    }],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ]
+  }
 }

.gitignore

@@ -3,6 +3,9 @@ node_modules/
 package-lock.json
 bun.lockb
 pnpm-lock.yaml
+yarn.lock
+
+.parcel-cache
 
 # Build
 package.zip

.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "tailwindcss": {}
+  }
+}

manifest.json

@@ -4,23 +4,24 @@
   "version": "3.2.2",
   "description": "Make SEQTA usable and beautiful! A fork of BetterSEQTA to continue development and add WAY more features!!!",
   "icons": {
-    "32": "icons/icon-32.png",
+    "32": "src/resources/icons/icon-32.png",
-    "48": "icons/icon-48.png",
+    "48": "src/resources/icons/icon-48.png",
-    "64": "icons/icon-64.png"
+    "64": "src/resources/icons/icon-64.png"
   },
   "action": {
     "browser_style": true,
     "default_popup": "src/interface/index.html#settings",
     "default_icon": {
-      "32": "icons/icon-32.png",
+      "32": "src/resources/icons/icon-32.png",
-      "48": "icons/icon-48.png",
+      "48": "src/resources/icons/icon-48.png",
-      "64": "icons/icon-64.png"
+      "64": "src/resources/icons/icon-64.png"
     }
   },
   "permissions": ["tabs", "notifications", "storage"],
   "host_permissions": ["https://newsapi.org/", "*://*/*"],
   "background": {
-    "service_worker": "src/background.ts"
+    "service_worker": "src/background.ts",
+    "type": "module"
   },
   "content_scripts": [
     {
@@ -32,11 +33,8 @@
   "web_accessible_resources": [
     {
       "resources": [
-        "icons/*",
+        "public/*",
-        "fonts/*",
+        "src/*"
-        "images/*",
-        "resources/*",
-        "backgrounds/*"
       ],
       "matches": ["*://*/*"]
     }

package.json

@@ -3,8 +3,9 @@
   "version": "3.2.2",
   "type": "module",
   "description": "BetterSEQTA+ is a browser extension that adds features to SEQTA.",
-  "main": "webpack.config.js",
   "scripts": {
+    "start": "parcel watch manifest.json --host localhost --config @parcel/config-webextension",
+    "build-test": "parcel build manifest.json --config @parcel/config-webextension",
     "build": "vite build",
     "dev": "vite dev",
     "build-old": "webpack --config webpack.config.js --mode production && sh ./package.sh",
@@ -16,22 +17,31 @@
   "license": "MIT",
   "devDependencies": {
     "@crxjs/vite-plugin": "latest",
-    "copy-webpack-plugin": "^11.0.0",
+    "@parcel/config-webextension": "^2.10.3",
-    "css-loader": "^6.8.1",
+    "@parcel/optimizer-data-url": "2.10.3",
-    "dompurify": "^3.0.6",
+    "@parcel/transformer-inline-string": "2.10.3",
+    "@parcel/transformer-sass": "2.10.3",
+    "assert": "^2.0.0",
+    "browserify-zlib": "^0.2.0",
+    "crypto-browserify": "^3.12.0",
     "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-webpack-plugin": "^4.0.1",
-    "file-loader": "^6.2.0",
+    "https-browserify": "^1.0.0",
-    "mini-css-extract-plugin": "^2.7.6",
+    "os-browserify": "^0.3.0",
+    "parcel": "^2.10.3",
+    "path-browserify": "^1.0.0",
     "prettier": "3.0.2",
+    "querystring-es3": "^0.2.1",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.1.0",
     "style-loader": "^3.3.3",
-    "vite": "^5.0.10",
+    "tty-browserify": "^0.0.1",
-    "webextension-polyfill": "^0.10.0",
+    "url": "^0.11.0",
-    "webpack": "^5.88.2",
+    "util": "^0.12.3",
-    "webpack-cli": "^5.1.4"
+    "yarn": "^1.22.21"
   },
   "dependencies": {
     "@sentry/browser": "^7.85.0",
@@ -45,6 +55,7 @@
     "@types/webextension-polyfill": "^0.10.7",
     "autoprefixer": "^10.4.15",
     "color": "^4.2.3",
+    "dompurify": "^3.0.6",
     "framer-motion": "^10.16.16",
     "install": "^0.13.0",
     "localforage": "^1.10.0",
@@ -58,6 +69,7 @@
     "sortablejs": "^1.15.0",
     "tailwindcss": "^3.3.3",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "webextension-polyfill": "^0.10.0"
   }
 }

postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: [
-    require("tailwindcss"),
-    require("autoprefixer"),
-  ],
-};

src/SEQTA.ts

@@ -3,6 +3,14 @@ import * as Sentry from "@sentry/browser"
 import { animate, spring, stagger } from 'motion'
 import loading, { AppendLoadingSymbol } from './seqta/ui/Loading'
 
+import updateVideo from 'url:./resources/update-video.mp4'
+import IconFamily from 'url:./resources/fonts/IconFamily.woff'
+import LogoLight from 'url:./resources/icons/betterseqta-light-icon.png'
+import LogoLightOutline from 'url:./resources/icons/betterseqta-light-outline.png'
+import icon48 from 'url:./resources/icons/icon-48.png'
+
+import Popup from 'url:./interface/index.html'
+
 import Color from 'color'
 import MenuitemSVGKey from './seqta/content/MenuItemSVGKey.json'
 import { MessageHandler } from './seqta/utils/MessageListener'
@@ -16,7 +24,7 @@ import browser from 'webextension-polyfill'
 import coursesicon from './seqta/icons/coursesIcon'
 import { delay } from "./seqta/utils/delay"
 import { enableCurrentTheme } from './seqta/ui/Themes'
-import iframeCSS from "./css/iframe.scss?inline"
+import iframeCSS from "url:./css/iframe.scss"
 import { onError } from './seqta/utils/onError'
 import stringToHTML from './seqta/utils/stringToHTML'
 import { updateAllColors } from './seqta/ui/colors/Manager'
@@ -53,7 +61,8 @@ document.addEventListener(
 
       import('./css/injected.scss')
       import('./css/documentload.scss')
-      /* const link = GetCSSElement()
+
+        /* const link = GetCSSElement()
       document.getElementsByTagName('html')[0].appendChild(link); */
 
       enableCurrentTheme()
@@ -123,7 +132,7 @@ function OpenWhatsNewPopup() {
   imagecont.classList.add('whatsnewImgContainer')
   let video = document.createElement('video')
   let source = document.createElement('source')
-  source.setAttribute('src', browser.runtime.getURL('resources/update-video.mp4'))
+  source.setAttribute('src', updateVideo)
   source.setAttribute('type', 'video/mp4')
   video.autoplay = true
   video.muted = true
@@ -253,7 +262,7 @@ function OpenWhatsNewPopup() {
     { easing: spring({ stiffness: 220, damping: 18 }) }
   )
 
-  animate(
+  /* animate(
     '.whatsnewTextContainer *',
     { opacity: [0, 1], y: [10, 0] },
     {
@@ -261,7 +270,7 @@ function OpenWhatsNewPopup() {
       duration: 0.5,
       easing: [.22, .03, .26, 1]  
     }
-  )
+  ) */
 
   browser.storage.local.remove(['justupdated'])
 
@@ -280,6 +289,7 @@ function OpenWhatsNewPopup() {
 
 async function finishLoad() {
   try {
+    document.querySelector('.legacy-root')!.classList.remove('hidden')
     var loadingbk = document.getElementById('loading')
     loadingbk!.style.opacity = '0'
     await delay(501)
@@ -366,7 +376,7 @@ export function waitForElm(selector: any) {
   })
 }
 
-export function GetCSSElement (file: string) {
+export function GetCSSElement(file: string) {
   const cssFile = browser.runtime.getURL(file)
   const fileref = document.createElement('link')
   fileref.setAttribute('rel', 'stylesheet')
@@ -678,6 +688,8 @@ function main(storedSetting: SettingsState) {
     console.log('[BetterSEQTA+] Enabled')
     if (DarkMode) document.documentElement.classList.add('dark')
 
+    document.querySelector('.legacy-root')?.classList.add('hidden')
+
     new StorageListener()
     new MessageHandler()
     
@@ -697,14 +709,13 @@ function main(storedSetting: SettingsState) {
 
 function InjectCustomIcons() {
   console.log('[BetterSEQTA+] Injecting Icons')
-  const fontURL = browser.runtime.getURL('fonts/IconFamily.woff')
 
   const style = document.createElement('style')
   style.setAttribute('type', 'text/css')
   style.innerHTML = `
     @font-face {
       font-family: 'IconFamily';
-      src: url('${fontURL}') format('woff');
+      src: url('${IconFamily}') format('woff');
       font-weight: normal;
       font-style: normal;
     }`
@@ -790,7 +801,7 @@ function addExtensionSettings() {
   document.body.appendChild(extensionPopup)
 
   const extensionIframe: HTMLIFrameElement = document.createElement('iframe')
-  extensionIframe.src = `${browser.runtime.getURL('src/interface/index.html')}#settings/embedded`
+  extensionIframe.src = `${Popup}#settings/embedded`
   extensionIframe.id = 'ExtensionIframe'
   extensionIframe.setAttribute('allowTransparency', 'true')
   extensionIframe.setAttribute('excludeDarkCheck', 'true')
@@ -1600,13 +1611,14 @@ function callHomeTimetable(date: string, change?: any) {
           })
         }
       } else {
-        console.log(DayContainer)
+        if (DayContainer == null) {
-        if (DayContainer.innerText || change) {
+
-          DayContainer.innerText = ''
+        } else (!DayContainer.innerHTML || change); {
+          DayContainer.innerHTML = ''
           var dummyDay = document.createElement('div')
           dummyDay.classList.add('day-empty')
           let img = document.createElement('img')
-          img.src = browser.runtime.getURL('icons/betterseqta-light-icon.png')
+          img.src = LogoLight
           let text = document.createElement('p')
           text.innerText = 'No lessons available.'
           dummyDay.append(img)
@@ -2141,12 +2153,10 @@ async function loadHomePage() {
 
   // Remove all current elements in the main div to add new elements
   var main = document.getElementById('main')
-  main!.innerHTML = ''
+  main!.innerHTML = '';
 
-  const titlediv = document.getElementById('title')!.firstChild;
+  const icon = document.querySelector('link[rel*="icon"]')! as HTMLLinkElement
-  ((titlediv!) as HTMLElement).innerHTML = 'Home';
+  icon.href = icon48
-  (document.querySelector('link[rel*="icon"]')! as HTMLLinkElement).href =
-    browser.runtime.getURL('icons/icon-48.png')
 
   currentSelectedDate = new Date()
 
@@ -2154,36 +2164,30 @@ async function loadHomePage() {
   var html = stringToHTML('<div class="home-root"><div class="home-container" id="home-container"></div></div>')
   
   // Appends the html file to main div
-  // Note : firstChild of html is done due to needing to grab the body from the stringToHTML function
+  // Note: firstChild of html is done due to needing to grab the body from the stringToHTML function
   main!.append(html.firstChild!)
 
   // Gets the current date
   const date = new Date()
 
   // Formats the current date used send a request for timetable and notices later
-  var TodayFormatted =
+  const TodayFormatted =
     date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() < 10 ? '0' : '') + date.getDate()
 
-  // Replaces actual date with a selected date. Used for testing.
-  // TodayFormatted = "2020-08-31"
 
   // Creates the shortcut container into the home container
-  var ShortcutStr = '<div class="shortcut-container border"><div class="shortcuts border" id="shortcuts"></div></div>'
+  const Shortcut = stringToHTML('<div class="shortcut-container border"><div class="shortcuts border" id="shortcuts"></div></div>')
-  var Shortcut = stringToHTML(ShortcutStr)
   // Appends the shortcut container into the home container
   document.getElementById('home-container')!.append(Shortcut.firstChild!)
 
   // Creates the container div for the timetable portion of the home page
-  var TimetableStr = '<div class="timetable-container border"><div class="home-subtitle"><h2 id="home-lesson-subtitle">Today\'s Lessons</h2><div class="timetable-arrows"><svg width="24" height="24" viewBox="0 0 24 24" style="transform: scale(-1,1)" id="home-timetable-back"><g style="fill: currentcolor;"><path d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path></g></svg><svg width="24" height="24" viewBox="0 0 24 24" id="home-timetable-forward"><g style="fill: currentcolor;"><path d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path></g></svg></div></div><div class="day-container" id="day-container"></div></div>'
+  const Timetable = stringToHTML('<div class="timetable-container border"><div class="home-subtitle"><h2 id="home-lesson-subtitle">Today\'s Lessons</h2><div class="timetable-arrows"><svg width="24" height="24" viewBox="0 0 24 24" style="transform: scale(-1,1)" id="home-timetable-back"><g style="fill: currentcolor;"><path d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path></g></svg><svg width="24" height="24" viewBox="0 0 24 24" id="home-timetable-forward"><g style="fill: currentcolor;"><path d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path></g></svg></div></div><div class="day-container" id="day-container"></div></div>')
-  var Timetable = stringToHTML(TimetableStr)
   // Appends the timetable container into the home container
   document.getElementById('home-container')!.append(Timetable.firstChild!)
   callHomeTimetable(TodayFormatted, true)
 
-  var timetablearrowback = document.getElementById('home-timetable-back')
+  const timetablearrowback = document.getElementById('home-timetable-back')
-  var timetablearrowforward = document.getElementById(
+  const timetablearrowforward = document.getElementById('home-timetable-forward')
-    'home-timetable-forward',
-  )
 
   function SetTimetableSubtitle() {
     var homelessonsubtitle = document.getElementById('home-lesson-subtitle')
@@ -2287,7 +2291,7 @@ async function loadHomePage() {
   // Appends the shortcut container into the home container
   document.getElementById('home-container')!.append(Notices.firstChild!)
 
-  animate(
+  /* animate(
     '.home-container > div',
     { opacity: [0, 1], y: [10, 0] },
     {
@@ -2295,7 +2299,7 @@ async function loadHomePage() {
       duration: 0.6,
       easing: [.22, .03, .26, 1]  
     }
-  )
+  ) */
 
   callHomeTimetable(TodayFormatted)
 
@@ -2634,9 +2638,7 @@ function SendNewsPage() {
         articleimage.classList.add('articleimage')
 
         if (newsarticles[i].urlToImage == 'null') {
-          articleimage.style.backgroundImage = `url(${browser.runtime.getURL(
+          articleimage.style.backgroundImage = `url(${LogoLightOutline})`
-            'icons/betterseqta-light-outline.png',
-          )})`
           articleimage.style.width = '20%'
           articleimage.style.margin = '0 7.5%'
         } else {

src/css/injected.scss

@@ -1,16 +1,19 @@
 @charset "UTF-8";
-@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600");
+@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,600');
 
-@import "./injected/popup.scss";
+@import './injected/popup.scss';
-@import "./injected/sidebar-animation.scss";
+@import './injected/sidebar-animation.scss';
-@import "./injected/theme.scss";
+@import './injected/theme.scss';
-@import "./injected/transparency.scss";
+@import './injected/transparency.scss';
 
 :root {
   background: var(--better-main) !important;
   --navy: #1a1a1a !important;
   --auto-background: var(--better-pale, var(--background-secondary)) !important;
 }
+.hidden {
+  display: none;
+}
 body,
 html {
   font-family: Rubik, sans-serif !important;
@@ -167,9 +170,6 @@ ul.magicDelete > li.deleting {
   background: transparent !important;
   color: var(--text-color) !important;
 }
-.tooltip {
-  z-index: 5 !important;
-}
 
 #menu li,
 #menu section {
@@ -321,7 +321,7 @@ ol:has(.MessageList__avatar___2wxyb svg) {
   box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
 }
 
-[style="--better-sub: #161616; --better-alert-highlight: #c61851; --background-primary: #ffffff; --background-secondary: #e5e7eb; --text-primary: black; --text-color: white; --betterseqta-logo: url(chrome-extension://boikofabjaholheekefimfojfncpjfib/icons/betterseqta-light-full.png); --better-main: #1a1a1a; --better-light: #333333;"] .menuShown > :last-child
+[style="--better-sub: #161616; --better-alert-highlight: #c61851; --background-primary: #ffffff; --background-secondary: #e5e7eb; --text-primary: black; --text-color: white; --better-main: #1a1a1a; --better-light: #333333;"] .menuShown > :last-child
 {
   top: 18% !important;
 }
@@ -526,7 +526,7 @@ div > ol:has(.uiFileHandlerWrapper) {
   width: 280px; // TODO: I know its 10px larger than its parent, but for some reason there is a 10px right padding that doesn't show up properly in devtools???
 }
 .student #menu > ul::before {
-  background-image: var(--betterseqta-logo);
+  background-image: url(data-url:../resources/icons/betterseqta-dark-full.png);
   position: -webkit-sticky;
   position: sticky;
   top: 0;
@@ -534,6 +534,10 @@ div > ol:has(.uiFileHandlerWrapper) {
   height: 69.5px;
   box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
 }
+.dark .student #menu > ul::before {
+  background-image: url(data-url:../resources/icons/betterseqta-light-full.png);
+}
+
 .assessmentsWrapper .message {
   display: none;
 }
@@ -681,8 +685,12 @@ div > ol:has(.uiFileHandlerWrapper) {
   left: 0;
   width: 100%;
 }
+.dark #title::before {
+  background-image: url(data-url:../resources/icons/betterseqta-light-full.png);
+}
+
 #title::before {
-  background-image: var(--betterseqta-logo);
+  background-image: url(data-url:../resources/icons/betterseqta-dark-full.png);
   background-position: left;
   background-repeat: no-repeat;
   background-size: auto 48px;
@@ -1674,7 +1682,7 @@ li.MessageList__unread___3imtO {
   content: "";
   width: 14px;
   height: 12px;
-  background-image: url("../../public/icons/betterseqta-light-outline.png");
+  background-image: url("data-url:../resources/icons/betterseqta-light-outline.png");
   display: inline-block;
   background-size: 18px 18px;
   color: #fff;
@@ -2528,6 +2536,8 @@ li.MessageList__unread___3imtO {
 }
 .tooltip {
   display: inline-block;
+  background: transparent;
+  z-index: 5 !important;
   width: 28px;
   background: none;
   box-shadow: none;

src/declarations.d.ts

@@ -0,0 +1,5 @@
+declare module '*.mp4';
+declare module '*.woff';
+declare module '*.scss';
+declare module '*.png';
+declare module '*.html';

src/interface/index.html

@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>

src/seqta/ui/colors/Manager.ts

@@ -1,9 +1,11 @@
 import browser from 'webextension-polyfill'
-import { GetThresholdOfColor, GetCSSElement } from '../../../SEQTA';
+import { GetThresholdOfColor } from '../../../SEQTA';
 import { lightenAndPaleColor } from './lightenAndPaleColor';
 import ColorLuminance from './ColorLuminance';
 import { SettingsState } from '../../../types/storage';
 
+import iFrameCSS from 'url:../../../css/iframe.scss';
+
 // Helper functions
 const setCSSVar = (varName: any, value: any) => document.documentElement.style.setProperty(varName, value);
 const getChromeURL = (path: any) => browser.runtime.getURL(path);
@@ -35,12 +37,9 @@ export function updateAllColors(storedSetting: any, newColor = null) {
   // Mode-based properties, applied if storedSetting is provided
   let modeProps = {};
   if (DarkMode !== null) {
-    modeProps = DarkMode ? {
+    if (!DarkMode) {
-      '--betterseqta-logo': `url(${getChromeURL('icons/betterseqta-light-full.png')})`
+      modeProps = { '--better-pale': lightenAndPaleColor(selectedColor) };
-    } : {
+    }
-      '--better-pale': lightenAndPaleColor(selectedColor),
-      '--betterseqta-logo': `url(${getChromeURL('icons/betterseqta-dark-full.png')})`
-    };
 
     if (DarkMode) {
       document.documentElement.style.removeProperty('--better-pale');
@@ -67,7 +66,7 @@ export function updateAllColors(storedSetting: any, newColor = null) {
   }
 
   let alliframes = document.getElementsByTagName('iframe');
-  let fileref = GetCSSElement('css/iframe.css');
+  let fileref = iFrameCSS;
 
   for (let i = 0; i < alliframes.length; i++) {
     const element = alliframes[i];

src/seqta/utils/StorageListener.ts

@@ -45,7 +45,6 @@ export default class StorageListener {
 
       case 'DarkMode':
         this.darkMode = changes.DarkMode.newValue;
-        console.log(this.darkMode);
         break;
 
       case 'customshortcuts':

vite.config.js

@@ -1,14 +0,0 @@
-import { crx } from '@crxjs/vite-plugin'
-import { defineConfig } from 'vite'
-import manifest from './manifest.json'
-
-export default defineConfig({
-  plugins: [crx({ manifest })],
-  server: {
-    port: 3004,
-    hmr: {
-      port: 8989,
-      overlay: false,
-    }
-  }
-})