From 6267a77a713e69017349602211fb5d300e2061fa Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Fri, 20 Sep 2024 10:37:26 +1000 Subject: [PATCH] feat(themeCreator): add svelte theme creator --- package.json | 2 + src/SEQTA.ts | 1 - src/css/injected.scss | 107 ++++++++---- src/seqta/ui/ThemeCreator.ts | 129 +++++++------- .../components/CodeEditor.svelte | 4 + .../components/ColourPicker.css | 17 +- .../components/ColourPicker.svelte | 54 +++--- .../components/themeCreator/divider.svelte | 3 + src/svelte-interface/main.ts | 29 ++-- .../pages/themeCreator.svelte | 160 ++++++++++++++++++ src/svelte-interface/types/SettingsProps.ts | 9 +- vite.config.ts | 6 +- 12 files changed, 377 insertions(+), 144 deletions(-) create mode 100644 src/svelte-interface/components/CodeEditor.svelte create mode 100644 src/svelte-interface/components/themeCreator/divider.svelte create mode 100644 src/svelte-interface/pages/themeCreator.svelte diff --git a/package.json b/package.json index 623864bd..1b5e2214 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "@types/sortablejs": "^1.15.8", "@types/uuid": "^9.0.8", "@types/webextension-polyfill": "^0.10.7", + "@vitejs/plugin-react": "^4.3.1", "autoprefixer": "^10.4.20", "classnames": "^2.5.1", "color": "^4.2.3", @@ -75,6 +76,7 @@ "kolorist": "^1.8.0", "localforage": "^1.10.0", "lodash": "^4.17.21", + "million": "^3.1.11", "motion": "^10.18.0", "postcss": "^8.4.45", "publish-browser-extension": "^2.2.1", diff --git a/src/SEQTA.ts b/src/SEQTA.ts index 0f3ba37f..6bb36d76 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -37,7 +37,6 @@ import injectedCSS from '@/css/injected.scss?inline' import documentLoadCSS from '@/css/documentload.scss?inline' import renderSvelte from '@/svelte-interface/main' import Settings from '@/svelte-interface/pages/settings.svelte' -import { renderStore } from './seqta/ui/renderStore' import { settingsPopup } from './svelte-interface/hooks/SettingsPopup' let SettingsClicked = false diff --git a/src/css/injected.scss b/src/css/injected.scss index 6f2a04f9..6132c0f5 100644 --- a/src/css/injected.scss +++ b/src/css/injected.scss @@ -1,9 +1,9 @@ @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/sidebar-animation.scss'; -@import './injected/theme.scss'; -@import './injected/transparency.scss'; +@import "./injected/sidebar-animation.scss"; +@import "./injected/theme.scss"; +@import "./injected/transparency.scss"; :root { background: var(--better-main) !important; @@ -16,7 +16,12 @@ } body, -.legacy-root input, .legacy-root textarea, .legacy-root button, .legacy-root select, .legacy-root option, .legacy-root .input, +.legacy-root input, +.legacy-root textarea, +.legacy-root button, +.legacy-root select, +.legacy-root option, +.legacy-root .input, html { font-family: Rubik, sans-serif !important; } @@ -35,7 +40,8 @@ html { height: 100%; visibility: visible !important; } -#themeCreatorIframe { + +#themeCreator { position: fixed; right: 0; height: 100%; @@ -195,7 +201,8 @@ html { background: unset; } -.legacy-root button:active, .legacy-root a:active:not(.cke_combo_button) { +.legacy-root button:active, +.legacy-root a:active:not(.cke_combo_button) { background-image: unset !important; } @@ -205,7 +212,8 @@ html { } .dark .dashboard section { - input, select { + input, + select { background: rgba(255, 255, 255, 0.1); } } @@ -227,7 +235,7 @@ html { input, select { border: transparent; - background: rgba(0, 0, 0, .1); + background: rgba(0, 0, 0, 0.1); color: var(--text-primary); } @@ -269,7 +277,7 @@ html { color: var(--text-primary); } ul.magicDelete > li:hover { - background: rgba(0, 0, 0, .1); + background: rgba(0, 0, 0, 0.1); } .dashlet-notes > .editor { background: unset; @@ -292,7 +300,8 @@ ul.magicDelete > li.deleting { height: 100%; } -#media-container video, #media-container img { +#media-container video, +#media-container img { width: 100%; height: 100%; object-fit: cover; @@ -372,14 +381,16 @@ ul.magicDelete > li.deleting { position: relative; &::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--item-colour, transparent); - transition: width 100ms, transform 0.3s ease; + transition: + width 100ms, + transform 0.3s ease; border-radius: 8px 0 0 8px; } @@ -481,7 +492,7 @@ ol:has(.MessageList__avatar___2wxyb svg) { .quickbar .actions [title="Choose a colour"] > svg { scale: 0.9; } -.quickbar[data-yiq='light'] .actions { +.quickbar[data-yiq="light"] .actions { color: white !important; } .singleSelect > li { @@ -508,7 +519,7 @@ ol:has(.MessageList__avatar___2wxyb svg) { } #main .timetablepage .quickbar { border: none; - box-shadow: 0 4px 8px rgba(0,0,0,0.5); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); border-radius: 16px; } .quickbar .actions { @@ -539,7 +550,7 @@ ol:has(.MessageList__avatar___2wxyb svg) { margin: 0 0 0 -12px; background-color: rgba(255, 255, 255, 0.2); clip-path: polygon(50% 40%, 0 0, 100% 0); - border: 12px solid rgba(255,255,255,0); + border: 12px solid rgba(255, 255, 255, 0); border-top-color: transparent; } #main > .timetablepage > .quickbar.above::before { @@ -1328,7 +1339,9 @@ div > ol:has(.uiFileHandlerWrapper) { height: 25px; width: 24px; } -.notifications__notifications___3mmLY > button > .notifications__bubble___1EkSQ { +.notifications__notifications___3mmLY + > button + > .notifications__bubble___1EkSQ { background: var(--better-alert-highlight); width: 25px; height: 25px; @@ -1430,7 +1443,7 @@ div > ol:has(.uiFileHandlerWrapper) { font-size: 12px; margin-right: 4px; font-family: "IconFamily"; - pointer-events: none; + pointer-events: none; } .MessageList__MessageList___3DxoC ol .Button__Button___3SRFo { @@ -1534,7 +1547,9 @@ iframe.userHTML { .Collapsible__Collapsible___3O8P3 > .Collapsible__header___-Afvq { background: none; } -.AssessmentList__AssessmentList___1GdCl > .AssessmentList__searchFilter___3N70o + .AssessmentList__items___3LcmQ { +.AssessmentList__AssessmentList___1GdCl + > .AssessmentList__searchFilter___3N70o + + .AssessmentList__items___3LcmQ { color: var(--text-primary); } .Thermoscore__Thermoscore___2tWMi { @@ -1630,10 +1645,13 @@ ul { > .SelectedAssessment__clearBtn___21D85 { background: var(--better-main); } -.SelectedAssessment__SelectedAssessment___3Bu5D > .SelectedAssessment__meta___1gq_y { +.SelectedAssessment__SelectedAssessment___3Bu5D + > .SelectedAssessment__meta___1gq_y { border-bottom: 1px solid var(--better-main); } -.TabSet__TabSet___Vo-SZ > ol.TabSet__tabs___1RRZk > li.TabSet__selected___1psfF { +.TabSet__TabSet___Vo-SZ + > ol.TabSet__tabs___1RRZk + > li.TabSet__selected___1psfF { border-bottom-color: var(--better-main); } .TabSet__TabSet___Vo-SZ > ol.TabSet__tabs___1RRZk { @@ -1758,7 +1776,15 @@ div.entry.class[style*="left: 46.5%"] { div.entry.class[style*="width: 46.5%"] { width: 50% !important; } -.timetablepage .dailycal > .content > .wrapper > .days > tbody > tr > td > .entriesWrapper { +.timetablepage + .dailycal + > .content + > .wrapper + > .days + > tbody + > tr + > td + > .entriesWrapper { min-width: 0; width: auto !important; } @@ -1952,7 +1978,6 @@ div.bar.flat { .cke_toolbox > .cke_toolbar .cke_button_on { background-color: #3d3d3e !important; } - } .legacy-root input.singleSelect:focus { background: var(--auto-background); @@ -1996,7 +2021,15 @@ body { .forumView .assessment { background: var(--better-main); } -.dailycal > .content > .wrapper > .days > tbody > tr > td > .entriesWrapper > .entry { +.dailycal + > .content + > .wrapper + > .days + > tbody + > tr + > td + > .entriesWrapper + > .entry { padding: 3px; } .Viewer__Viewer___32BH- { @@ -2035,7 +2068,9 @@ li.MessageList__unread___3imtO { border-radius: 1600px; } -.MessageList__MessageList___3DxoC > ol > li.MessageList__selected___1SJNz.MessageList__unread___3imtO { +.MessageList__MessageList___3DxoC + > ol + > li.MessageList__selected___1SJNz.MessageList__unread___3imtO { box-shadow: none; } @@ -2055,7 +2090,9 @@ li.MessageList__unread___3imtO { transition: width 0.1s; } -.MessageList__MessageList___3DxoC > ol > li.MessageList__unread___3imtO::before { +.MessageList__MessageList___3DxoC + > ol + > li.MessageList__unread___3imtO::before { width: 3px; } .connectedNotificationsWrapper > div > button { @@ -2129,7 +2166,10 @@ li.MessageList__unread___3imtO { cursor: pointer; } -.dark .MessageList__MessageList___3DxoC > ol > li.MessageList__selected___1SJNz { +.dark + .MessageList__MessageList___3DxoC + > ol + > li.MessageList__selected___1SJNz { background: var(--background-secondary); } @@ -2620,7 +2660,9 @@ li.MessageList__unread___3imtO { width: 100%; display: flex; flex-direction: column; - box-shadow: inset 0px 6px 0 var(--item-colour, transparent), inset 0px 40px 50px -40px rgba(179, 179, 179, 0.9); + box-shadow: + inset 0px 6px 0 var(--item-colour, transparent), + inset 0px 40px 50px -40px rgba(179, 179, 179, 0.9); transition: 200ms; position: relative; height: 15em; @@ -2629,7 +2671,9 @@ li.MessageList__unread___3imtO { font-family: Rubik, sans-serif; } .dark .day { - box-shadow: inset 0px 6px 0 var(--item-colour, transparent), inset 0px 40px 50px -40px rgba(0,0,0,0.9); + box-shadow: + inset 0px 6px 0 var(--item-colour, transparent), + inset 0px 40px 50px -40px rgba(0, 0, 0, 0.9); } .clickable { cursor: pointer; @@ -2666,7 +2710,7 @@ li.MessageList__unread___3imtO { border-radius: 16px; } .dark .upcoming-items { - box-shadow: inset 0px 40px 80px -40px rgba(0,0,0,0.6); + box-shadow: inset 0px 40px 80px -40px rgba(0, 0, 0, 0.6); } .upcoming-assessment-title { color: var(--text-primary); @@ -2946,7 +2990,6 @@ li.MessageList__unread___3imtO { width: 90%; border-radius: 16px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); - } .whatsnewTextContainer { display: flex; @@ -3021,4 +3064,4 @@ li.MessageList__unread___3imtO { background: var(--background-primary) !important; z-index: 1; padding: 10px; -} \ No newline at end of file +} diff --git a/src/seqta/ui/ThemeCreator.ts b/src/seqta/ui/ThemeCreator.ts index efb47cf9..2dee76e3 100644 --- a/src/seqta/ui/ThemeCreator.ts +++ b/src/seqta/ui/ThemeCreator.ts @@ -1,73 +1,79 @@ -import browser from "webextension-polyfill"; +import renderSvelte from "@/svelte-interface/main" +import themeCreator from "@/svelte-interface/pages/themeCreator.svelte" +import { unmount } from "svelte" + +let themeCreatorSvelteApp: any = null /** * Open the Theme Creator sidebar, it is an embedded page loaded similar to the extension popup * @param themeID - The ID of the theme to load in the Theme Creator * @returns void */ -export function OpenThemeCreator( themeID: string = '' ) { - CloseThemeCreator(); - - const width = '310px'; +export function OpenThemeCreator(themeID: string = "") { + CloseThemeCreator() - const themeCreatorIframe: HTMLIFrameElement = document.createElement('iframe'); - themeCreatorIframe.src = `${browser.runtime.getURL('interface/index.html')}${ themeID != '' ? `?themeID=${themeID}` : '' }#themeCreator`; - themeCreatorIframe.id = 'themeCreatorIframe'; - themeCreatorIframe.setAttribute('allowTransparency', 'true'); - themeCreatorIframe.setAttribute('excludeDarkCheck', 'true'); - themeCreatorIframe.style.border = 'none'; - themeCreatorIframe.style.width = width; + const width = "310px" - const mainContent = document.querySelector('#container') as HTMLDivElement; - if (mainContent) mainContent.style.width = `calc(100% - ${width})`; + const themeCreatorDiv: HTMLDivElement = document.createElement("div") + themeCreatorDiv.id = "themeCreator" + themeCreatorDiv.style.width = width + + const shadow = themeCreatorDiv.attachShadow({ mode: "open" }) + themeCreatorSvelteApp = renderSvelte(themeCreator, shadow, { + themeID: themeID, + }) + + const mainContent = document.querySelector("#container") as HTMLDivElement + if (mainContent) mainContent.style.width = `calc(100% - ${width})` // close button - const closeButton = document.createElement('button'); - closeButton.classList.add('themeCloseButton'); - closeButton.textContent = '×'; - closeButton.addEventListener('click', CloseThemeCreator); - document.body.appendChild(closeButton); + const closeButton = document.createElement("button") + closeButton.classList.add("themeCloseButton") + closeButton.textContent = "×" + closeButton.addEventListener("click", CloseThemeCreator) + document.body.appendChild(closeButton) - const resizeBar = document.createElement('div'); - resizeBar.classList.add('resizeBar'); - resizeBar.style.right = '307.5px'; + const resizeBar = document.createElement("div") + resizeBar.classList.add("resizeBar") + resizeBar.style.right = "307.5px" - let isDragging = false; - let currentX: number; + let isDragging = false + let currentX: number const mouseDownHandler = (e: MouseEvent) => { - isDragging = true; - currentX = e.clientX; - document.addEventListener('mousemove', mouseMoveHandler); - document.addEventListener('mouseup', mouseUpHandler); - document.body.style.userSelect = 'none'; - themeCreatorIframe.style.pointerEvents = 'none'; // Disable pointer events on iframe during resize - }; + isDragging = true + currentX = e.clientX + document.addEventListener("mousemove", mouseMoveHandler) + document.addEventListener("mouseup", mouseUpHandler) + document.body.style.userSelect = "none" + themeCreatorDiv.style.pointerEvents = "none" + } const mouseMoveHandler = (e: MouseEvent) => { - if (!isDragging) return; - const dx = e.clientX - currentX; - currentX = e.clientX; - const newWidth = Math.min(Math.max(310, themeCreatorIframe.offsetWidth - dx), 600); - themeCreatorIframe.style.width = `${newWidth}px`; - mainContent.style.width = `calc(100% - ${newWidth}px)`; - resizeBar.style.right = `${newWidth - 2.5}px`; - }; + if (!isDragging) return + const windowWidth = window.innerWidth + const newWidth = Math.min(Math.max(310, windowWidth - e.clientX), 600) + themeCreatorDiv.style.width = `${newWidth}px` + mainContent.style.width = `calc(100% - ${newWidth}px)` + resizeBar.style.right = `${newWidth - 2.5}px` + + currentX = e.clientX + } const mouseUpHandler = () => { - isDragging = false; - document.removeEventListener('mousemove', mouseMoveHandler); - document.removeEventListener('mouseup', mouseUpHandler); - document.body.style.userSelect = ''; - themeCreatorIframe.style.pointerEvents = 'auto'; - }; + isDragging = false + document.removeEventListener("mousemove", mouseMoveHandler) + document.removeEventListener("mouseup", mouseUpHandler) + document.body.style.userSelect = "" + themeCreatorDiv.style.pointerEvents = "auto" + } - resizeBar.addEventListener('mousedown', mouseDownHandler); - resizeBar.addEventListener('mouseover', () => resizeBar.style.opacity = '1'); - resizeBar.addEventListener('mouseout', () => resizeBar.style.opacity = '0'); + resizeBar.addEventListener("mousedown", mouseDownHandler) + resizeBar.addEventListener("mouseover", () => (resizeBar.style.opacity = "1")) + resizeBar.addEventListener("mouseout", () => (resizeBar.style.opacity = "0")) - document.body.appendChild(themeCreatorIframe); - document.body.appendChild(resizeBar); + document.body.appendChild(themeCreatorDiv) + document.body.appendChild(resizeBar) } /** @@ -75,14 +81,17 @@ export function OpenThemeCreator( themeID: string = '' ) { * @returns void */ export function CloseThemeCreator() { - const themeCreatorIframe = document.getElementById('themeCreatorIframe'); - const closeButton = document.querySelector('.themeCloseButton') as HTMLButtonElement; - const resizeBar = document.querySelector('.resizeBar') as HTMLDivElement; - - if (themeCreatorIframe) themeCreatorIframe.remove(); - if (closeButton) closeButton.remove(); - if (resizeBar) resizeBar.remove(); + const themeCreator = document.getElementById("themeCreator") + const closeButton = document.querySelector( + ".themeCloseButton", + ) as HTMLButtonElement + const resizeBar = document.querySelector(".resizeBar") as HTMLDivElement - const mainContent = document.querySelector('#container') as HTMLDivElement; - if (mainContent) mainContent.style.width = '100%'; -} \ No newline at end of file + if (themeCreatorSvelteApp) unmount(themeCreatorSvelteApp) + if (themeCreator) themeCreator.remove() + if (closeButton) closeButton.remove() + if (resizeBar) resizeBar.remove() + + const mainContent = document.querySelector("#container") as HTMLDivElement + if (mainContent) mainContent.style.width = "100%" +} diff --git a/src/svelte-interface/components/CodeEditor.svelte b/src/svelte-interface/components/CodeEditor.svelte new file mode 100644 index 00000000..6cc5ca67 --- /dev/null +++ b/src/svelte-interface/components/CodeEditor.svelte @@ -0,0 +1,4 @@ + + +
Code Editor Here
diff --git a/src/svelte-interface/components/ColourPicker.css b/src/svelte-interface/components/ColourPicker.css index 825624c1..84533f88 100644 --- a/src/svelte-interface/components/ColourPicker.css +++ b/src/svelte-interface/components/ColourPicker.css @@ -1,8 +1,8 @@ -.dark { - div:has(> #rbgcp-wrapper) { - background: transparent !important; - } +div:has(> #rbgcp-wrapper) { + background: transparent !important; +} +.dark { #rbgcp-wrapper { div[style="padding-top: 11px; position: relative;"] div { color: white !important; @@ -31,11 +31,14 @@ #rbgcp-radial-btn, #rbgcp-linear-btn { &[style*="background: white;"] { - background-color: #28282B !important; + background-color: #28282b !important; } svg { - path, g, polyline, circle { + path, + g, + polyline, + circle { stroke: white !important; fill: transparent !important; } @@ -80,4 +83,4 @@ background-color: #37373b !important; } } -} \ No newline at end of file +} diff --git a/src/svelte-interface/components/ColourPicker.svelte b/src/svelte-interface/components/ColourPicker.svelte index 713f2be7..6634788e 100644 --- a/src/svelte-interface/components/ColourPicker.svelte +++ b/src/svelte-interface/components/ColourPicker.svelte @@ -5,14 +5,17 @@ import { animate, spring } from 'motion'; import { delay } from '@/seqta/utils/delay.ts' - const { hidePicker } = $props<{ - hidePicker: () => void + const { hidePicker, standalone = false } = $props<{ + hidePicker?: () => void, + standalone?: boolean }>(); let background: HTMLDivElement; let content: HTMLDivElement; const closePicker = async () => { + if (standalone) return; + animate( content, { scale: [1, 0.4], opacity: [1, 0] }, @@ -25,29 +28,36 @@ { easing: [0.4, 0, 0.2, 1] } ); - await delay(400); hidePicker(); } - + onMount(() => { + if (standalone) return; + animate( background, { opacity: [0, 1] }, { duration: 0.3, easing: [0.4, 0, 0.2, 1] } ); - + animate( content, { scale: [0.4, 1], opacity: [0, 1] }, { easing: spring({ stiffness: 400, damping: 30 }) } ); - document.addEventListener('keydown', (e) => { + const handleEscapeKey = (e: KeyboardEvent) => { if (e.key === 'Escape') { closePicker(); } - }); + }; + + document.addEventListener('keydown', handleEscapeKey); + + return () => { + document.removeEventListener('keydown', handleEscapeKey); + }; }); function handleBackgroundClick(event: MouseEvent) { @@ -57,17 +67,23 @@ } - -
{ e.key === 'Enter' && handleBackgroundClick }} -> -
+{#if standalone} +
-
\ No newline at end of file +{:else} + +
{ e.key === 'Enter' && handleBackgroundClick }} + > +
+ +
+
+{/if} diff --git a/src/svelte-interface/components/themeCreator/divider.svelte b/src/svelte-interface/components/themeCreator/divider.svelte new file mode 100644 index 00000000..adae5a68 --- /dev/null +++ b/src/svelte-interface/components/themeCreator/divider.svelte @@ -0,0 +1,3 @@ + + +
diff --git a/src/svelte-interface/main.ts b/src/svelte-interface/main.ts index 628bd089..0fe7d1c9 100644 --- a/src/svelte-interface/main.ts +++ b/src/svelte-interface/main.ts @@ -1,23 +1,24 @@ -import styles from './index.css?inline'; -import { mount } from 'svelte'; -import type { ComponentType } from 'svelte'; +import styles from "./index.css?inline" +import { mount } from "svelte" +import type { ComponentType } from "svelte" export default function renderSvelte( Component: ComponentType | any, mountPoint: ShadowRoot | HTMLElement, - props: Record = {} -) { + props: Record = {}, +) { const app = mount(Component, { target: mountPoint, props: { standalone: false, - ...props - } - }); + ...props, + }, + }) - const style = document.createElement("style"); - style.setAttribute("type", "text/css"); - style.innerHTML = styles; - mountPoint.appendChild(style); - return app; -} \ No newline at end of file + const style = document.createElement("style") + style.setAttribute("type", "text/css") + style.innerHTML = styles + mountPoint.appendChild(style) + + return app +} diff --git a/src/svelte-interface/pages/themeCreator.svelte b/src/svelte-interface/pages/themeCreator.svelte new file mode 100644 index 00000000..e829ea19 --- /dev/null +++ b/src/svelte-interface/pages/themeCreator.svelte @@ -0,0 +1,160 @@ + + +{#snippet settingItem(item: SettingItem)} +
+
+

{item.title}

+

{item.description}

+
+
+ {#if item.type === 'switch'} + + {:else if item.type === 'button'} +
+
+{/snippet} + +
+
+

Theme Creator

+ + {'\ueb44'} + + Need help? Check out the docs! + + + + + +
+
Theme Name
+ +
+ +
+
Description (optional)
+ +
+ + + + {#each [ + { + type: 'switch', + title: 'Hide Theme Name', + description: 'Useful when your cover image contains text', + props: { + state: theme.hideThemeName, + onChange: (value) => theme.hideThemeName = value + } + }, + { + type: 'switch', + title: 'Force Theme', + description: 'Force users to use either dark or light mode', + props: { + state: theme.forceDark !== undefined, + onChange: (value) => theme.forceDark = value ? false : undefined + } + }, + { + type: 'colourPicker', + title: 'Default Theme Colour', + description: 'Set the default color for your theme', + direction: 'vertical', + props: { + color: theme.defaultColour, + onChange: (color) => theme.defaultColour = color + } + }, + { + type: 'codeEditor', + title: 'Custom CSS', + description: 'Add custom CSS to your theme', + props: { + value: theme.CustomCSS, + onChange: (value) => theme.CustomCSS = value + } + } + ] as SettingItem[] as setting} + {@render settingItem(setting)} + {/each} +
+
diff --git a/src/svelte-interface/types/SettingsProps.ts b/src/svelte-interface/types/SettingsProps.ts index d0933b5d..bb20acc5 100644 --- a/src/svelte-interface/types/SettingsProps.ts +++ b/src/svelte-interface/types/SettingsProps.ts @@ -1,14 +1,7 @@ -import type { SettingsState } from './AppProps'; export interface SettingsList { title: string; id: number; description: string; Component: any; /* TODO: Give this a type */ props?: any; -} - - -export interface SettingsProps { - settingsState: SettingsState; - setSettingsState: React.Dispatch>; -} +} \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 8f114392..5416051b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,8 +4,8 @@ import { join, resolve } from 'path'; import { base64Loader } from './lib/base64loader'; import type { BuildTarget } from './lib/types'; -import react from '@vitejs/plugin-react-swc'; -//import million from "million/compiler"; +import react from '@vitejs/plugin-react'; +import million from "million/compiler"; //import MillionLint from '@million/lint'; import { svelte } from '@sveltejs/vite-plugin-svelte' @@ -31,7 +31,7 @@ export default defineConfig({ svelte({ emitCss: false }), - //million.vite({ auto: true }), + million.vite({ auto: true }), //MillionLint.vite(), /* enable for testing and debugging performance */ crx({ manifest: targets.find(t => t.browser === mode.toLowerCase())?.manifest ?? chrome.manifest,