diff --git a/package.json b/package.json index 95e2d010..b63e874e 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "sass": "^1.70.0", "sass-loader": "^13.3.3", "semver": "^7.6.3", + "svelte-preprocess": "^6.0.2", "url": "^0.11.3" }, "dependencies": { @@ -53,7 +54,9 @@ "@codemirror/lang-less": "^6.0.2", "@heroicons/react": "^2.1.3", "@million/lint": "latest", + "@sveltejs/vite-plugin-svelte": "^3.1.2", "@tailwindcss/forms": "^0.5.7", + "@tsconfig/svelte": "^5.0.4", "@types/color": "^3.0.6", "@types/dompurify": "^3.0.5", "@types/lodash": "^4.17.4", @@ -85,10 +88,13 @@ "react-toastify": "^10.0.5", "rimraf": "^5.0.5", "sortablejs": "^1.15.2", + "svelte": "^4.2.19", + "svelte-hash-router": "^1.0.1", + "svelte-motion": "^0.12.2", "swiper": "latest", "tailwindcss": "^3.4.1", "ts-loader": "^9.5.1", - "typescript": "^5.3.3", + "typescript": "^5.5.4", "uuid": "^9.0.1", "vite": "^5.4.2", "webextension-polyfill": "^0.10.0" diff --git a/src/SEQTA.ts b/src/SEQTA.ts index 0c4f18f1..b7593c7b 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -35,6 +35,7 @@ import coursesicon from '@/seqta/icons/coursesIcon' import iframeCSS from '@/css/iframe.scss?raw' import injectedCSS from '@/css/injected.scss?inline' import documentLoadCSS from '@/css/documentload.scss?inline' +import initSvelteInterface from './svelte-interface/main' let SettingsClicked = false export let MenuOptionsOpen = false @@ -936,7 +937,7 @@ export function AppendElementsToDisabledPage() { export function closeSettings() { const ExtensionSettings = document.getElementById('ExtensionPopup')! - const ExtensionIframe = document.getElementById('ExtensionIframe') as HTMLIFrameElement + // = document.getElementById('ExtensionIframe') as HTMLIFrameElement if (SettingsClicked == true) { ExtensionSettings!.classList.add('hide') @@ -952,9 +953,7 @@ export function closeSettings() { } SettingsClicked = false - if (ExtensionIframe.contentWindow) { - ExtensionIframe.contentWindow.postMessage('popupClosed', '*') - } + // hide extension frame } ExtensionSettings!.classList.add('hide') @@ -968,23 +967,26 @@ export function addExtensionSettings() { const extensionContainer = document.querySelector('#container') as HTMLDivElement if (extensionContainer) extensionContainer.appendChild(extensionPopup) - const extensionIframe: HTMLIFrameElement = document.createElement('iframe') - extensionIframe.src = `${browser.runtime.getURL('interface/index.html')}#settings/embedded` + /* const extensionIframe: HTMLIFrameElement = document.createElement('iframe') + extensionIframe.src = `${browser.runtime.getURL('svelte-interface/index.html')}#settings/embedded` extensionIframe.id = 'ExtensionIframe' extensionIframe.setAttribute('allowTransparency', 'true') extensionIframe.setAttribute('excludeDarkCheck', 'true') extensionIframe.style.width = '384px' extensionIframe.style.height = '100%' extensionIframe.style.border = 'none' - extensionPopup.appendChild(extensionIframe) + extensionPopup.appendChild(extensionIframe) */ + + // create shadow dom and render svelte app + const shadow = extensionPopup.attachShadow({ mode: 'open' }); + const svelteApp = initSvelteInterface(shadow); + console.log(svelteApp) const container = document.getElementById('container') new SettingsResizer(); const closeExtensionPopup = () => { - const ExtensionIframe = document.getElementById('ExtensionIframe') as HTMLIFrameElement - extensionPopup.classList.add('hide') if (settingsState.animations) { animate( @@ -996,14 +998,13 @@ export function addExtensionSettings() { extensionPopup.style.opacity = '0' extensionPopup.style.transform = 'scale(0)' } - if (ExtensionIframe.contentWindow) { - ExtensionIframe.contentWindow.postMessage('popupClosed', '*') - } + // tell it popup closed SettingsClicked = false } container!.onclick = (event) => { if ((event.target as HTMLElement).closest('#AddedSettings') == null && SettingsClicked) { + if (event.target == extensionPopup) return; closeExtensionPopup() } } @@ -1247,7 +1248,7 @@ export function setupSettingsButton() { extensionPopup!.style.opacity = '0' extensionPopup!.style.transform = 'scale(0)' } - (document.getElementById('ExtensionIframe')! as HTMLIFrameElement).contentWindow!.postMessage('popupClosed', '*'); + /* (document.getElementById('ExtensionIframe')! as HTMLIFrameElement).contentWindow!.postMessage('popupClosed', '*'); */ SettingsClicked = false; } else { extensionPopup!.classList.remove('hide'); diff --git a/src/manifests/manifest.json b/src/manifests/manifest.json index a7a04d35..41f5bb08 100644 --- a/src/manifests/manifest.json +++ b/src/manifests/manifest.json @@ -10,7 +10,7 @@ }, "action": { "browser_style": true, - "default_popup": "interface/index.html#settings", + "default_popup": "svelte-interface/index.html#settings", "default_icon": { "32": "resources/icons/icon-32.png", "48": "resources/icons/icon-48.png", @@ -30,10 +30,6 @@ } ], "web_accessible_resources": [ - { - "resources": ["interface/index.html"], - "matches": ["*://*/*"] - }, { "resources": ["seqta/ui/background/background.html"], "matches": ["*://*/*"] diff --git a/src/interface/SettingsContext.tsx b/src/old-interface/SettingsContext.tsx similarity index 100% rename from src/interface/SettingsContext.tsx rename to src/old-interface/SettingsContext.tsx diff --git a/src/interface/assets/presetBackgrounds.tsx b/src/old-interface/assets/presetBackgrounds.tsx similarity index 100% rename from src/interface/assets/presetBackgrounds.tsx rename to src/old-interface/assets/presetBackgrounds.tsx diff --git a/src/interface/assets/react.svg b/src/old-interface/assets/react.svg similarity index 100% rename from src/interface/assets/react.svg rename to src/old-interface/assets/react.svg diff --git a/src/interface/components/Accordian.tsx b/src/old-interface/components/Accordian.tsx similarity index 100% rename from src/interface/components/Accordian.tsx rename to src/old-interface/components/Accordian.tsx diff --git a/src/interface/components/BackgroundSelector.css b/src/old-interface/components/BackgroundSelector.css similarity index 100% rename from src/interface/components/BackgroundSelector.css rename to src/old-interface/components/BackgroundSelector.css diff --git a/src/interface/components/BackgroundSelector.tsx b/src/old-interface/components/BackgroundSelector.tsx similarity index 100% rename from src/interface/components/BackgroundSelector.tsx rename to src/old-interface/components/BackgroundSelector.tsx diff --git a/src/interface/components/Checkbox.tsx b/src/old-interface/components/Checkbox.tsx similarity index 100% rename from src/interface/components/Checkbox.tsx rename to src/old-interface/components/Checkbox.tsx diff --git a/src/interface/components/CodeEditor.css b/src/old-interface/components/CodeEditor.css similarity index 100% rename from src/interface/components/CodeEditor.css rename to src/old-interface/components/CodeEditor.css diff --git a/src/interface/components/CodeEditor.tsx b/src/old-interface/components/CodeEditor.tsx similarity index 100% rename from src/interface/components/CodeEditor.tsx rename to src/old-interface/components/CodeEditor.tsx diff --git a/src/interface/components/LoadingSpinner.tsx b/src/old-interface/components/LoadingSpinner.tsx similarity index 100% rename from src/interface/components/LoadingSpinner.tsx rename to src/old-interface/components/LoadingSpinner.tsx diff --git a/src/interface/components/Picker.css b/src/old-interface/components/Picker.css similarity index 100% rename from src/interface/components/Picker.css rename to src/old-interface/components/Picker.css diff --git a/src/interface/components/Picker.tsx b/src/old-interface/components/Picker.tsx similarity index 100% rename from src/interface/components/Picker.tsx rename to src/old-interface/components/Picker.tsx diff --git a/src/interface/components/PickerSwatch.tsx b/src/old-interface/components/PickerSwatch.tsx similarity index 100% rename from src/interface/components/PickerSwatch.tsx rename to src/old-interface/components/PickerSwatch.tsx diff --git a/src/interface/components/Select.tsx b/src/old-interface/components/Select.tsx similarity index 100% rename from src/interface/components/Select.tsx rename to src/old-interface/components/Select.tsx diff --git a/src/interface/components/Slider.css b/src/old-interface/components/Slider.css similarity index 100% rename from src/interface/components/Slider.css rename to src/old-interface/components/Slider.css diff --git a/src/interface/components/Slider.tsx b/src/old-interface/components/Slider.tsx similarity index 100% rename from src/interface/components/Slider.tsx rename to src/old-interface/components/Slider.tsx diff --git a/src/interface/components/Switch.css b/src/old-interface/components/Switch.css similarity index 100% rename from src/interface/components/Switch.css rename to src/old-interface/components/Switch.css diff --git a/src/interface/components/Switch.tsx b/src/old-interface/components/Switch.tsx similarity index 100% rename from src/interface/components/Switch.tsx rename to src/old-interface/components/Switch.tsx diff --git a/src/interface/components/TabbedContainer.tsx b/src/old-interface/components/TabbedContainer.tsx similarity index 100% rename from src/interface/components/TabbedContainer.tsx rename to src/old-interface/components/TabbedContainer.tsx diff --git a/src/interface/components/ThemeCover.tsx b/src/old-interface/components/ThemeCover.tsx similarity index 100% rename from src/interface/components/ThemeCover.tsx rename to src/old-interface/components/ThemeCover.tsx diff --git a/src/interface/components/ThemeSelector.tsx b/src/old-interface/components/ThemeSelector.tsx similarity index 100% rename from src/interface/components/ThemeSelector.tsx rename to src/old-interface/components/ThemeSelector.tsx diff --git a/src/interface/components/store/header.tsx b/src/old-interface/components/store/header.tsx similarity index 100% rename from src/interface/components/store/header.tsx rename to src/old-interface/components/store/header.tsx diff --git a/src/interface/components/useVisibility.tsx b/src/old-interface/components/useVisibility.tsx similarity index 100% rename from src/interface/components/useVisibility.tsx rename to src/old-interface/components/useVisibility.tsx diff --git a/src/interface/dark.ts b/src/old-interface/dark.ts similarity index 100% rename from src/interface/dark.ts rename to src/old-interface/dark.ts diff --git a/src/interface/hooks/BackgroundDataLoader.tsx b/src/old-interface/hooks/BackgroundDataLoader.tsx similarity index 100% rename from src/interface/hooks/BackgroundDataLoader.tsx rename to src/old-interface/hooks/BackgroundDataLoader.tsx diff --git a/src/interface/hooks/ThemeManagment.ts b/src/old-interface/hooks/ThemeManagment.ts similarity index 100% rename from src/interface/hooks/ThemeManagment.ts rename to src/old-interface/hooks/ThemeManagment.ts diff --git a/src/interface/hooks/settingsState.ts b/src/old-interface/hooks/settingsState.ts similarity index 100% rename from src/interface/hooks/settingsState.ts rename to src/old-interface/hooks/settingsState.ts diff --git a/src/interface/index.css b/src/old-interface/index.css similarity index 100% rename from src/interface/index.css rename to src/old-interface/index.css diff --git a/src/interface/index.html b/src/old-interface/index.html similarity index 100% rename from src/interface/index.html rename to src/old-interface/index.html diff --git a/src/interface/main.d.ts b/src/old-interface/main.d.ts similarity index 100% rename from src/interface/main.d.ts rename to src/old-interface/main.d.ts diff --git a/src/interface/main.tsx b/src/old-interface/main.tsx similarity index 100% rename from src/interface/main.tsx rename to src/old-interface/main.tsx diff --git a/src/interface/pages/SettingsPage.tsx b/src/old-interface/pages/SettingsPage.tsx similarity index 100% rename from src/interface/pages/SettingsPage.tsx rename to src/old-interface/pages/SettingsPage.tsx diff --git a/src/interface/pages/SettingsPage/About.tsx b/src/old-interface/pages/SettingsPage/About.tsx similarity index 100% rename from src/interface/pages/SettingsPage/About.tsx rename to src/old-interface/pages/SettingsPage/About.tsx diff --git a/src/interface/pages/SettingsPage/Settings.tsx b/src/old-interface/pages/SettingsPage/Settings.tsx similarity index 100% rename from src/interface/pages/SettingsPage/Settings.tsx rename to src/old-interface/pages/SettingsPage/Settings.tsx diff --git a/src/interface/pages/SettingsPage/Shortcuts.tsx b/src/old-interface/pages/SettingsPage/Shortcuts.tsx similarity index 100% rename from src/interface/pages/SettingsPage/Shortcuts.tsx rename to src/old-interface/pages/SettingsPage/Shortcuts.tsx diff --git a/src/interface/pages/SettingsPage/Themes.tsx b/src/old-interface/pages/SettingsPage/Themes.tsx similarity index 100% rename from src/interface/pages/SettingsPage/Themes.tsx rename to src/old-interface/pages/SettingsPage/Themes.tsx diff --git a/src/interface/pages/Store.tsx b/src/old-interface/pages/Store.tsx similarity index 100% rename from src/interface/pages/Store.tsx rename to src/old-interface/pages/Store.tsx diff --git a/src/interface/pages/ThemeCreator.tsx b/src/old-interface/pages/ThemeCreator.tsx similarity index 100% rename from src/interface/pages/ThemeCreator.tsx rename to src/old-interface/pages/ThemeCreator.tsx diff --git a/src/interface/types/AppProps.ts b/src/old-interface/types/AppProps.ts similarity index 100% rename from src/interface/types/AppProps.ts rename to src/old-interface/types/AppProps.ts diff --git a/src/interface/types/ColorPickerProps.ts b/src/old-interface/types/ColorPickerProps.ts similarity index 100% rename from src/interface/types/ColorPickerProps.ts rename to src/old-interface/types/ColorPickerProps.ts diff --git a/src/interface/types/CustomThemes.ts b/src/old-interface/types/CustomThemes.ts similarity index 100% rename from src/interface/types/CustomThemes.ts rename to src/old-interface/types/CustomThemes.ts diff --git a/src/interface/types/SettingsProps.ts b/src/old-interface/types/SettingsProps.ts similarity index 100% rename from src/interface/types/SettingsProps.ts rename to src/old-interface/types/SettingsProps.ts diff --git a/src/interface/types/SliderProps.ts b/src/old-interface/types/SliderProps.ts similarity index 100% rename from src/interface/types/SliderProps.ts rename to src/old-interface/types/SliderProps.ts diff --git a/src/interface/types/SwitchProps.ts b/src/old-interface/types/SwitchProps.ts similarity index 100% rename from src/interface/types/SwitchProps.ts rename to src/old-interface/types/SwitchProps.ts diff --git a/src/interface/types/TabbedContainerProps.ts b/src/old-interface/types/TabbedContainerProps.ts similarity index 100% rename from src/interface/types/TabbedContainerProps.ts rename to src/old-interface/types/TabbedContainerProps.ts diff --git a/src/interface/types/pocketbase-types.ts b/src/old-interface/types/pocketbase-types.ts similarity index 100% rename from src/interface/types/pocketbase-types.ts rename to src/old-interface/types/pocketbase-types.ts diff --git a/src/interface/vite-env.d.ts b/src/old-interface/vite-env.d.ts similarity index 100% rename from src/interface/vite-env.d.ts rename to src/old-interface/vite-env.d.ts diff --git a/src/seqta/ui/themes/UpdateThemePreview.ts b/src/seqta/ui/themes/UpdateThemePreview.ts index b60aebc0..26002f75 100644 --- a/src/seqta/ui/themes/UpdateThemePreview.ts +++ b/src/seqta/ui/themes/UpdateThemePreview.ts @@ -1,4 +1,4 @@ -import { CustomThemeBase64 } from '@/interface/types/CustomThemes'; +import type { CustomThemeBase64 } from '@/old-interface/types/CustomThemes'; import { applyCustomCSS, imageData, removeImageFromDocument, UpdateImageData } from './Themes'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/seqta/ui/themes/applyTheme.ts b/src/seqta/ui/themes/applyTheme.ts index 7e2fae0f..9851c8fd 100644 --- a/src/seqta/ui/themes/applyTheme.ts +++ b/src/seqta/ui/themes/applyTheme.ts @@ -1,4 +1,4 @@ -import { CustomImage, CustomTheme } from '@/interface/types/CustomThemes'; +import type { CustomImage, CustomTheme } from '@/old-interface/types/CustomThemes'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; import { applyCustomCSS } from './Themes'; diff --git a/src/seqta/ui/themes/deleteTheme.ts b/src/seqta/ui/themes/deleteTheme.ts index 2f9d1a38..03451eaf 100644 --- a/src/seqta/ui/themes/deleteTheme.ts +++ b/src/seqta/ui/themes/deleteTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { CustomTheme } from '@/interface/types/CustomThemes'; +import type { CustomTheme } from '@/old-interface/types/CustomThemes'; import { removeTheme } from './removeTheme'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/seqta/ui/themes/disableTheme.ts b/src/seqta/ui/themes/disableTheme.ts index cebd5983..f45d5fc0 100644 --- a/src/seqta/ui/themes/disableTheme.ts +++ b/src/seqta/ui/themes/disableTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { CustomTheme } from '@/interface/types/CustomThemes'; +import type { CustomTheme } from '@/old-interface/types/CustomThemes'; import { removeTheme } from './removeTheme'; import { Mutex } from '@/seqta/utils/mutex'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/seqta/ui/themes/downloadTheme.ts b/src/seqta/ui/themes/downloadTheme.ts index 83ea5623..32e72eed 100644 --- a/src/seqta/ui/themes/downloadTheme.ts +++ b/src/seqta/ui/themes/downloadTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { Theme } from '@/interface/pages/Store'; +import type { Theme } from '@/old-interface/pages/Store'; import base64ToBlob from '@/seqta/utils/base64ToBlob'; type ThemeContent = { diff --git a/src/seqta/ui/themes/enableCurrent.ts b/src/seqta/ui/themes/enableCurrent.ts index 40379d2e..94a05076 100644 --- a/src/seqta/ui/themes/enableCurrent.ts +++ b/src/seqta/ui/themes/enableCurrent.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { CustomTheme } from '@/interface/types/CustomThemes'; +import type { CustomTheme } from '@/old-interface/types/CustomThemes'; import { applyTheme } from './applyTheme'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/seqta/ui/themes/getAvailableThemes.ts b/src/seqta/ui/themes/getAvailableThemes.ts index 429c04a3..0d86f2f0 100644 --- a/src/seqta/ui/themes/getAvailableThemes.ts +++ b/src/seqta/ui/themes/getAvailableThemes.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { CustomTheme, ThemeList } from '@/interface/types/CustomThemes'; +import type { CustomTheme, ThemeList } from '@/old-interface/types/CustomThemes'; import { blobToBase64 } from '@/seqta/utils/blobToBase64'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/seqta/ui/themes/getTheme.ts b/src/seqta/ui/themes/getTheme.ts index c698e13e..36b3cd7e 100644 --- a/src/seqta/ui/themes/getTheme.ts +++ b/src/seqta/ui/themes/getTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { CustomImageBase64, CustomTheme, CustomThemeBase64 } from '@/interface/types/CustomThemes'; +import type { CustomImageBase64, CustomTheme, CustomThemeBase64 } from '@/old-interface/types/CustomThemes'; import { blobToBase64 } from '@/seqta/utils/blobToBase64'; diff --git a/src/seqta/ui/themes/removeTheme.ts b/src/seqta/ui/themes/removeTheme.ts index bfb5a613..a78cebce 100644 --- a/src/seqta/ui/themes/removeTheme.ts +++ b/src/seqta/ui/themes/removeTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { CustomTheme } from '@/interface/types/CustomThemes'; +import type { CustomTheme } from '@/old-interface/types/CustomThemes'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; export const removeTheme = async (theme: CustomTheme) => { diff --git a/src/seqta/ui/themes/saveTheme.ts b/src/seqta/ui/themes/saveTheme.ts index 060eaa6b..5be6bc3e 100644 --- a/src/seqta/ui/themes/saveTheme.ts +++ b/src/seqta/ui/themes/saveTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { CustomTheme, CustomThemeBase64 } from '@/interface/types/CustomThemes'; +import type { CustomTheme, CustomThemeBase64 } from '@/old-interface/types/CustomThemes'; import { disableTheme } from './disableTheme'; diff --git a/src/seqta/ui/themes/setTheme.ts b/src/seqta/ui/themes/setTheme.ts index 0646408a..5e414b39 100644 --- a/src/seqta/ui/themes/setTheme.ts +++ b/src/seqta/ui/themes/setTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { CustomTheme } from '@/interface/types/CustomThemes'; +import type { CustomTheme } from '@/old-interface/types/CustomThemes'; import { applyTheme } from './applyTheme'; import { removeTheme } from './removeTheme'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/seqta/utils/listeners/SettingsState.ts b/src/seqta/utils/listeners/SettingsState.ts index ad46b139..057afb54 100644 --- a/src/seqta/utils/listeners/SettingsState.ts +++ b/src/seqta/utils/listeners/SettingsState.ts @@ -1,5 +1,5 @@ import browser from 'webextension-polyfill'; -import { SettingsState } from '@/types/storage'; +import type { SettingsState } from '@/types/storage'; type ChangeListener = (newValue: any, oldValue: any) => void; diff --git a/src/seqta/utils/listeners/StorageChanges.ts b/src/seqta/utils/listeners/StorageChanges.ts index 271cd2b9..8f35ee91 100644 --- a/src/seqta/utils/listeners/StorageChanges.ts +++ b/src/seqta/utils/listeners/StorageChanges.ts @@ -12,7 +12,7 @@ import { } from '@/SEQTA'; import { updateBgDurations } from '@/seqta/ui/Animation'; import browser from 'webextension-polyfill'; -import { CustomShortcut } from '@/types/storage'; +import type { CustomShortcut } from '@/types/storage'; export class StorageChangeHandler { constructor() { diff --git a/src/seqta/utils/sendThemeUpdate.ts b/src/seqta/utils/sendThemeUpdate.ts index 0fa6f4a4..8e895b8e 100644 --- a/src/seqta/utils/sendThemeUpdate.ts +++ b/src/seqta/utils/sendThemeUpdate.ts @@ -1,6 +1,6 @@ export default function sendThemeUpdate() { - const iframe = document.getElementById('ExtensionIframe') as HTMLIFrameElement + /* const iframe = document.getElementById('ExtensionIframe') as HTMLIFrameElement if (iframe) { iframe.contentWindow?.postMessage({ type: 'themeChanged' }, '*'); - } + } */ } \ No newline at end of file diff --git a/src/svelte-interface/+layout.svelte b/src/svelte-interface/+layout.svelte new file mode 100644 index 00000000..57fc0131 --- /dev/null +++ b/src/svelte-interface/+layout.svelte @@ -0,0 +1,19 @@ + + + diff --git a/src/svelte-interface/components/Button.svelte b/src/svelte-interface/components/Button.svelte new file mode 100644 index 00000000..944b98ff --- /dev/null +++ b/src/svelte-interface/components/Button.svelte @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/src/svelte-interface/components/ColorPicker.svelte b/src/svelte-interface/components/ColorPicker.svelte new file mode 100644 index 00000000..e69de29b diff --git a/src/svelte-interface/components/PickerSwatch.svelte b/src/svelte-interface/components/PickerSwatch.svelte new file mode 100644 index 00000000..a8d040e6 --- /dev/null +++ b/src/svelte-interface/components/PickerSwatch.svelte @@ -0,0 +1,129 @@ + + + \ No newline at end of file diff --git a/src/svelte-interface/components/Slider.svelte b/src/svelte-interface/components/Slider.svelte new file mode 100644 index 00000000..0c60c8d0 --- /dev/null +++ b/src/svelte-interface/components/Slider.svelte @@ -0,0 +1,36 @@ + + +
+ onChange(Number(e.currentTarget.value))} + class="w-full h-1 rounded-full appearance-none cursor-pointer dark:bg-[#38373D] bg-[#DDDDDD] slider" + /> +
+ + \ No newline at end of file diff --git a/src/svelte-interface/components/Switch.css b/src/svelte-interface/components/Switch.css new file mode 100644 index 00000000..6be68af7 --- /dev/null +++ b/src/svelte-interface/components/Switch.css @@ -0,0 +1,4 @@ +.dark .switch[data-ison="true"], +.switch[data-ison="true"] { + background-color: #30D259; +} \ No newline at end of file diff --git a/src/svelte-interface/components/Switch.svelte b/src/svelte-interface/components/Switch.svelte new file mode 100644 index 00000000..d41ca9fd --- /dev/null +++ b/src/svelte-interface/components/Switch.svelte @@ -0,0 +1,64 @@ + + +
e.key === "Enter" && toggleSwitch()} + role="switch" + aria-checked={$settingsState[setting]} + tabindex="0" +> +
+
\ No newline at end of file diff --git a/src/svelte-interface/components/TabbedContainer.css b/src/svelte-interface/components/TabbedContainer.css new file mode 100644 index 00000000..a0ce8c97 --- /dev/null +++ b/src/svelte-interface/components/TabbedContainer.css @@ -0,0 +1,3 @@ +.tab-width { + width: var(--tab-width); +} \ No newline at end of file diff --git a/src/svelte-interface/components/TabbedContainer.svelte b/src/svelte-interface/components/TabbedContainer.svelte new file mode 100644 index 00000000..6b7a0b5f --- /dev/null +++ b/src/svelte-interface/components/TabbedContainer.svelte @@ -0,0 +1,83 @@ + + +
+ +
+ + {#each tabs as { title }, index} + + {/each} +
+
+
+ +
+ {#each tabs as { content }, index} +
+ +
+ {/each} +
+ +
+ + \ No newline at end of file diff --git a/src/svelte-interface/index.css b/src/svelte-interface/index.css new file mode 100644 index 00000000..51d129cb --- /dev/null +++ b/src/svelte-interface/index.css @@ -0,0 +1,17 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +::-webkit-scrollbar { + display: none; +} \ No newline at end of file diff --git a/src/svelte-interface/index.html b/src/svelte-interface/index.html new file mode 100644 index 00000000..165bf492 --- /dev/null +++ b/src/svelte-interface/index.html @@ -0,0 +1,12 @@ + + + + + + BetterSEQTA+ Settings + + + asdasds + + + diff --git a/src/svelte-interface/main.d.ts b/src/svelte-interface/main.d.ts new file mode 100644 index 00000000..6687dd4c --- /dev/null +++ b/src/svelte-interface/main.d.ts @@ -0,0 +1,6 @@ +import './index.css'; + +declare module "*.png"; +declare module "*.svg"; +declare module "*.jpeg"; +declare module "*.jpg"; \ No newline at end of file diff --git a/src/svelte-interface/main.ts b/src/svelte-interface/main.ts new file mode 100644 index 00000000..fed4601c --- /dev/null +++ b/src/svelte-interface/main.ts @@ -0,0 +1,25 @@ +// @ts-expect-error - Svelte Hash Router is not typed (yet) +import { routes } from 'svelte-hash-router' +import App from './+layout.svelte'; +import Settings from './pages/settings.svelte'; +import styles from './index.css?inline'; + +export default function initSvelteInterface(shadow: ShadowRoot) { + console.log(shadow) + + routes.set({ + 'settings': Settings, + '*': Settings + }) + + const app = new App({ + target: shadow, + }); + + const style2 = document.createElement("style"); + style2.setAttribute("type", "text/css"); + style2.innerHTML = styles; + shadow.appendChild(style2); + + return app; +} \ No newline at end of file diff --git a/src/svelte-interface/pages/settings.svelte b/src/svelte-interface/pages/settings.svelte new file mode 100644 index 00000000..b2dbec4a --- /dev/null +++ b/src/svelte-interface/pages/settings.svelte @@ -0,0 +1,35 @@ + + +
+
+ Light logo + + +
+ + +
\ No newline at end of file diff --git a/src/svelte-interface/pages/settings/general.svelte b/src/svelte-interface/pages/settings/general.svelte new file mode 100644 index 00000000..4ff8e5ef --- /dev/null +++ b/src/svelte-interface/pages/settings/general.svelte @@ -0,0 +1,118 @@ + + +
+ {#each settings as { title, description, component: Component, props, id } (id)} +
+
+

{title}

+

{description}

+
+
+ {#if props?.state !== undefined} + + {:else} + + {/if} +
+
+ {/each} +
\ No newline at end of file diff --git a/src/svelte-interface/pages/settings/shortcuts.svelte b/src/svelte-interface/pages/settings/shortcuts.svelte new file mode 100644 index 00000000..81e784b3 --- /dev/null +++ b/src/svelte-interface/pages/settings/shortcuts.svelte @@ -0,0 +1 @@ +
shortcuts tab
\ No newline at end of file diff --git a/src/svelte-interface/pages/settings/theme.svelte b/src/svelte-interface/pages/settings/theme.svelte new file mode 100644 index 00000000..bcd2b978 --- /dev/null +++ b/src/svelte-interface/pages/settings/theme.svelte @@ -0,0 +1 @@ +
theme tab
\ No newline at end of file diff --git a/src/svelte-interface/state/SettingsState.ts b/src/svelte-interface/state/SettingsState.ts new file mode 100644 index 00000000..98bce624 --- /dev/null +++ b/src/svelte-interface/state/SettingsState.ts @@ -0,0 +1,91 @@ +import browser from "webextension-polyfill"; +import type { MainConfig, SettingsState } from "../types/AppProps"; +import { writable } from "svelte/store"; + +const initialState: SettingsState = { + notificationCollector: false, + lessonAlerts: false, + telemetry: false, + animatedBackground: false, + animatedBackgroundSpeed: '0', + customThemeColor: '', + betterSEQTAPlus: false, + shortcuts: [], + customshortcuts: [], + transparencyEffects: false, + theme: '' +}; + +const keyToStateMap: { [key: string]: string } = { + notificationcollector: 'notificationCollector', + lessonalert: 'lessonAlerts', + telemetry: 'telemetry', + animatedbk: 'animatedBackground', + bksliderinput: 'animatedBackgroundSpeed', + selectedColor: 'customThemeColor', + onoff: 'betterSEQTAPlus', + shortcuts: 'shortcuts', + customshortcuts: 'customshortcuts', + transparencyEffects: 'transparencyEffects' +}; + +const stateToKeyMap = Object.fromEntries( + Object.entries(keyToStateMap).map(([key, value]) => [value, key]) +); + +const storageChangeListener = async (changes: browser.Storage.StorageChange) => { + for (const [key, { newValue }] of Object.entries(changes)) { + const stateKey = keyToStateMap[key] || key; + + if (stateKey === 'DarkMode') { + if (newValue) { + document.body.classList.add('dark'); + } else { + document.body.classList.remove('dark'); + } + } + settingsState.update((prevState) => ({ ...prevState, [stateKey]: newValue })); + } +} + +const initialStorageLoad = async (storage: MainConfig) => { + for (const [key, value] of Object.entries(storage)) { + const stateKey = keyToStateMap[key] || key; + + if (stateKey === 'DarkMode') { + if (value) { + document.body.classList.add('dark'); + } else { + document.body.classList.remove('dark'); + } + } + settingsState.update((prevState) => ({ ...prevState, [stateKey]: value })); + } +} + +const settingsSubscription = (/* set: (value: SettingsState) => void */) => { + settingsState.subscribe((newState) => { + const stateToSave = Object.fromEntries( + Object.entries(newState).map(([key, value]) => [stateToKeyMap[key] || key, value]) + ); + browser.storage.local.set(stateToSave); + /* set(newState); */ + }); +} + +export const initializeListeners = async () => { + const result = await browser.storage.local.get() as MainConfig; + + await initialStorageLoad(result); + + settingsSubscription(); + + browser.storage.onChanged.addListener(storageChangeListener); +} + + +export const settingsState = writable(initialState); + +export const setSettingsValue = (key: K, value: SettingsState[K]) => { + settingsState.update((prevState) => ({ ...prevState, [key]: value })); +} \ No newline at end of file diff --git a/src/svelte-interface/test.svelte b/src/svelte-interface/test.svelte new file mode 100644 index 00000000..20d5be8c --- /dev/null +++ b/src/svelte-interface/test.svelte @@ -0,0 +1 @@ +

HI THERE!!!!

\ No newline at end of file diff --git a/src/svelte-interface/types/AppProps.ts b/src/svelte-interface/types/AppProps.ts new file mode 100644 index 00000000..0ec056c2 --- /dev/null +++ b/src/svelte-interface/types/AppProps.ts @@ -0,0 +1,64 @@ +export interface SettingsState { + notificationCollector: boolean; + theme: string; + lessonAlerts: boolean; + telemetry: boolean; + animatedBackground: boolean; + animatedBackgroundSpeed: string; + customThemeColor: string; + betterSEQTAPlus: boolean; + shortcuts: Shortcut[]; + customshortcuts: CustomShortcut[]; + transparencyEffects: boolean; +} + +interface ToggleItem { + toggle: boolean; +} + +interface Shortcut { + enabled: boolean; + name: string; +} + +export interface CustomShortcut { + name: string; + url: string; + icon: string; +} + +export interface MainConfig { + DarkMode: boolean; + animatedbk: boolean; + bksliderinput: string; + customshortcuts: CustomShortcut[]; + defaultmenuorder: any[]; + lessonalert: boolean; + menuitems: { + assessments: ToggleItem; + courses: ToggleItem; + dashboard: ToggleItem; + documents: ToggleItem; + forums: ToggleItem; + goals: ToggleItem; + home: ToggleItem; + messages: ToggleItem; + myed: ToggleItem; + news: ToggleItem; + notices: ToggleItem; + portals: ToggleItem; + reports: ToggleItem; + settings: ToggleItem; + timetable: ToggleItem; + welcome: ToggleItem; + }; + menuorder: any[]; + notificationcollector: boolean; + telemetry: boolean; + onoff: boolean; + selectedColor: string; + shortcuts: Shortcut[]; + subjectfilters: Record; + transparencyEffects: boolean; + theme: string; +} diff --git a/src/svelte-interface/types/ColorPickerProps.ts b/src/svelte-interface/types/ColorPickerProps.ts new file mode 100644 index 00000000..ae888971 --- /dev/null +++ b/src/svelte-interface/types/ColorPickerProps.ts @@ -0,0 +1,5 @@ +export interface ColorPickerProps { + color: string; + onChange: (color: string) => void; + id: string; +} \ No newline at end of file diff --git a/src/svelte-interface/types/SettingsProps.ts b/src/svelte-interface/types/SettingsProps.ts new file mode 100644 index 00000000..418e4049 --- /dev/null +++ b/src/svelte-interface/types/SettingsProps.ts @@ -0,0 +1,14 @@ +import type { SettingsState } from './AppProps'; +import { ComponentType } from 'svelte'; + +export interface SettingsList { + title: string; + id: number; + description: string; + component: ComponentType; + props?: any; +} +export interface SettingsProps { + settingsState: SettingsState; + setSettingsState: React.Dispatch>; +} diff --git a/src/svelte-interface/types/SliderProps.ts b/src/svelte-interface/types/SliderProps.ts new file mode 100644 index 00000000..7ae50459 --- /dev/null +++ b/src/svelte-interface/types/SliderProps.ts @@ -0,0 +1,7 @@ +import React from 'react'; +import "./Slider.css"; +export interface Slider { + onValueChange: (value: number) => void; +} +declare const Slider: React.FC; +export default Slider; diff --git a/src/svelte-interface/types/SwitchProps.ts b/src/svelte-interface/types/SwitchProps.ts new file mode 100644 index 00000000..8a43742d --- /dev/null +++ b/src/svelte-interface/types/SwitchProps.ts @@ -0,0 +1,6 @@ +import "./Switch.css"; + +export interface SwitchProps { + onChange: (isOn: boolean) => void; + state: boolean; +} \ No newline at end of file diff --git a/src/svelte-interface/types/TabbedContainerProps.ts b/src/svelte-interface/types/TabbedContainerProps.ts new file mode 100644 index 00000000..cea6689d --- /dev/null +++ b/src/svelte-interface/types/TabbedContainerProps.ts @@ -0,0 +1,10 @@ +import React, { JSX } from 'react'; +export interface Tab { + title: string; + content: JSX.Element; +} +export interface TabbedContainerProps { + tabs: Tab[]; +} +declare const TabbedContainer: React.FC; +export default TabbedContainer; diff --git a/src/svelte.config.js b/src/svelte.config.js new file mode 100644 index 00000000..c099a835 --- /dev/null +++ b/src/svelte.config.js @@ -0,0 +1,7 @@ +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; + +export default { + // Consult https://svelte.dev/docs#compile-time-svelte-preprocess + // for more information about preprocessors + preprocess: vitePreprocess(), +} diff --git a/tsconfig.json b/tsconfig.json index 93693431..075b026a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,4 +1,5 @@ { + "extends": "@tsconfig/svelte/tsconfig.json", "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, @@ -24,4 +25,5 @@ "@/*": ["./src/*"] } }, + "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"] } diff --git a/vite-project/.gitignore b/vite-project/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/vite-project/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/vite-project/README.md b/vite-project/README.md new file mode 100644 index 00000000..e6cd94fc --- /dev/null +++ b/vite-project/README.md @@ -0,0 +1,47 @@ +# Svelte + TS + Vite + +This template should help get you started developing with Svelte and TypeScript in Vite. + +## Recommended IDE Setup + +[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). + +## Need an official Svelte framework? + +Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more. + +## Technical considerations + +**Why use this over SvelteKit?** + +- It brings its own routing solution which might not be preferable for some users. +- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app. + +This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project. + +Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate. + +**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?** + +Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information. + +**Why include `.vscode/extensions.json`?** + +Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project. + +**Why enable `allowJs` in the TS template?** + +While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant. + +**Why is HMR not preserving my local component state?** + +HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr). + +If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR. + +```ts +// store.ts +// An extremely simple external store +import { writable } from 'svelte/store' +export default writable(0) +``` diff --git a/vite-project/index.html b/vite-project/index.html new file mode 100644 index 00000000..b6c5f0af --- /dev/null +++ b/vite-project/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Svelte + TS + + +
+ + + diff --git a/vite-project/package.json b/vite-project/package.json new file mode 100644 index 00000000..7cf16f79 --- /dev/null +++ b/vite-project/package.json @@ -0,0 +1,21 @@ +{ + "name": "vite-project", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview", + "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json" + }, + "devDependencies": { + "@sveltejs/vite-plugin-svelte": "^3.1.2", + "@tsconfig/svelte": "^5.0.4", + "svelte": "^4.2.18", + "svelte-check": "^3.8.5", + "tslib": "^2.6.3", + "typescript": "^5.5.3", + "vite": "^5.4.1" + } +} diff --git a/vite-project/public/vite.svg b/vite-project/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/vite-project/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/vite-project/src/App.svelte b/vite-project/src/App.svelte new file mode 100644 index 00000000..e8b590f1 --- /dev/null +++ b/vite-project/src/App.svelte @@ -0,0 +1,47 @@ + + +
+ +

Vite + Svelte

+ +
+ +
+ +

+ Check out SvelteKit, the official Svelte app framework powered by Vite! +

+ +

+ Click on the Vite and Svelte logos to learn more +

+
+ + diff --git a/vite-project/src/app.css b/vite-project/src/app.css new file mode 100644 index 00000000..617f5e93 --- /dev/null +++ b/vite-project/src/app.css @@ -0,0 +1,79 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +.card { + padding: 2em; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/vite-project/src/assets/svelte.svg b/vite-project/src/assets/svelte.svg new file mode 100644 index 00000000..c5e08481 --- /dev/null +++ b/vite-project/src/assets/svelte.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/vite-project/src/lib/Counter.svelte b/vite-project/src/lib/Counter.svelte new file mode 100644 index 00000000..979b4dfc --- /dev/null +++ b/vite-project/src/lib/Counter.svelte @@ -0,0 +1,10 @@ + + + diff --git a/vite-project/src/main.ts b/vite-project/src/main.ts new file mode 100644 index 00000000..4d67e2ac --- /dev/null +++ b/vite-project/src/main.ts @@ -0,0 +1,8 @@ +import './app.css' +import App from './App.svelte' + +const app = new App({ + target: document.getElementById('app')!, +}) + +export default app diff --git a/vite-project/src/vite-env.d.ts b/vite-project/src/vite-env.d.ts new file mode 100644 index 00000000..4078e747 --- /dev/null +++ b/vite-project/src/vite-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/vite-project/svelte.config.js b/vite-project/svelte.config.js new file mode 100644 index 00000000..b0683fd2 --- /dev/null +++ b/vite-project/svelte.config.js @@ -0,0 +1,7 @@ +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' + +export default { + // Consult https://svelte.dev/docs#compile-time-svelte-preprocess + // for more information about preprocessors + preprocess: vitePreprocess(), +} diff --git a/vite-project/tsconfig.json b/vite-project/tsconfig.json new file mode 100644 index 00000000..df56300c --- /dev/null +++ b/vite-project/tsconfig.json @@ -0,0 +1,21 @@ +{ + "extends": "@tsconfig/svelte/tsconfig.json", + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "module": "ESNext", + "resolveJsonModule": true, + /** + * Typecheck JS in `.svelte` and `.js` files by default. + * Disable checkJs if you'd like to use dynamic types in JS. + * Note that setting allowJs false does not prevent the use + * of JS in `.svelte` files. + */ + "allowJs": true, + "checkJs": true, + "isolatedModules": true, + "moduleDetection": "force" + }, + "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/vite-project/tsconfig.node.json b/vite-project/tsconfig.node.json new file mode 100644 index 00000000..6c2d8703 --- /dev/null +++ b/vite-project/tsconfig.node.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "strict": true, + "noEmit": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite-project/vite.config.ts b/vite-project/vite.config.ts new file mode 100644 index 00000000..d7019694 --- /dev/null +++ b/vite-project/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import { svelte } from '@sveltejs/vite-plugin-svelte' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [svelte()], +}) diff --git a/vite.config.ts b/vite.config.ts index d31518f5..3a8c88fa 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -8,6 +8,8 @@ import react from '@vitejs/plugin-react-swc'; import million from "million/compiler"; //import MillionLint from '@million/lint'; +import { svelte } from '@sveltejs/vite-plugin-svelte' + import { chrome } from './src/manifests/chrome'; import { brave } from './src/manifests/brave'; import { edge } from './src/manifests/edge'; @@ -25,8 +27,11 @@ const mode = process.env.MODE || 'chrome'; export default defineConfig({ plugins: [ base64Loader, - react(), - million.vite({ auto: true }), + //react(), + svelte({ + emitCss: false, + }), + //million.vite({ auto: true }), //MillionLint.vite(), /* enable for testing and debugging performance */ crx({ manifest: targets.find(t => t.browser === mode.toLowerCase())?.manifest ?? chrome.manifest, @@ -53,7 +58,7 @@ export default defineConfig({ minify: false, rollupOptions: { input: { - settings: join(__dirname, 'src', 'interface', 'index.html'), + settings: join(__dirname, 'src', 'svelte-interface', 'index.html'), backgrounds: join(__dirname, 'src', 'seqta', 'ui', 'background', 'background.html') } }