diff --git a/svelte-app/package.json b/svelte-app/package.json
index 93c35aa29..80e9ba9a3 100644
--- a/svelte-app/package.json
+++ b/svelte-app/package.json
@@ -63,7 +63,6 @@
"svelte-eslint-parser": "^0.32.2",
"svelte-highlight": "^7.3.0",
"svelte-maybe-transition": "^0.1.2",
- "svelte-preprocess": "^5.0.4",
"tailwindcss": "^3.3.3",
"tippy.js": "^6.3.7",
"typescript": "^5.2.2",
diff --git a/svelte-app/pnpm-lock.yaml b/svelte-app/pnpm-lock.yaml
index 87ccd8097..18fae1fb8 100644
--- a/svelte-app/pnpm-lock.yaml
+++ b/svelte-app/pnpm-lock.yaml
@@ -141,9 +141,6 @@ devDependencies:
svelte-maybe-transition:
specifier: ^0.1.2
version: 0.1.2(svelte@4.2.1)
- svelte-preprocess:
- specifier: ^5.0.4
- version: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.14)(sass@1.58.3)(svelte@4.2.1)(typescript@5.2.2)
tailwindcss:
specifier: ^3.3.3
version: 3.3.3
diff --git a/svelte-app/src/app.html b/svelte-app/src/app.html
index 04ef7c925..5c892fd31 100644
--- a/svelte-app/src/app.html
+++ b/svelte-app/src/app.html
@@ -2,6 +2,12 @@
+
+
+
@@ -9,14 +15,8 @@
-
-
-
%sveltekit.head%
diff --git a/svelte-app/src/app.scss b/svelte-app/src/app.scss
index e4eee6377..87dbf2f03 100644
--- a/svelte-app/src/app.scss
+++ b/svelte-app/src/app.scss
@@ -118,124 +118,3 @@ body {
}
}
}
-
-.loading-spinner {
- &-container {
- width: 40px;
- height: 40px;
- position: relative;
- animation: chase 2.5s infinite linear both;
- }
- &-spinner {
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- animation: chase-dot 2s infinite ease-in-out both;
-
- &:before {
- content: '';
- display: block;
- width: 25%;
- height: 25%;
- background-color: #f1f5f9;
- border-radius: 9999px;
- animation: chase-dot-before 2s infinite ease-in-out both;
- }
-
- &:nth-child(1) {
- &,
- &:before {
- animation-delay: -1.1s;
- }
- }
- &:nth-child(2) {
- &,
- &:before {
- animation-delay: -1s;
- }
- }
- &:nth-child(3) {
- &,
- &:before {
- animation-delay: -0.9s;
- }
- }
- &:nth-child(4) {
- &,
- &:before {
- animation-delay: -0.8s;
- }
- }
- &:nth-child(5) {
- &,
- &:before {
- animation-delay: -0.7s;
- }
- }
- &:nth-child(6) {
- &,
- &:before {
- animation-delay: -0.6s;
- }
- }
- }
-}
-
-.loading-line-wrapper {
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- top: 0;
- margin: auto;
-
- > div {
- height: 100%;
- display: flex;
- transform: translateZ(0);
-
- div {
- flex: 1;
- animation: pulse 700ms infinite alternate cubic-bezier(0.16, -0.05, 0.35, 1.02);
-
- @for $i from 1 through 8 {
- &:nth-child(#{$i}) {
- animation-delay: -(calc(700ms / 8) * (8 - $i));
- }
- }
- }
- }
-}
-
-@keyframes pulse {
- 100% {
- background: transparent;
- flex: 10;
- box-shadow: 0 0 0 rgba(196 181 253 / 0.25);
- }
-}
-
-@keyframes chase {
- 100% {
- transform: rotate(360deg);
- }
-}
-
-@keyframes chase-dot {
- 80%,
- 100% {
- transform: rotate(360deg);
- }
-}
-
-@keyframes chase-dot-before {
- 50% {
- transform: scale(0.4);
- }
- 100%,
- 0% {
- transform: scale(1);
- }
-}
diff --git a/svelte-app/src/components/loading/animations/line.svelte b/svelte-app/src/components/loading/animations/line.svelte
deleted file mode 100644
index d0c9a9185..000000000
--- a/svelte-app/src/components/loading/animations/line.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
- {#each Array(7) as _}
-
- {/each}
-
-
diff --git a/svelte-app/src/components/loading/animations/spinner.svelte b/svelte-app/src/components/loading/animations/spinner.svelte
deleted file mode 100644
index 88aa8e9f7..000000000
--- a/svelte-app/src/components/loading/animations/spinner.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-
- {#each Array(6) as _}
-
- {/each}
-
diff --git a/svelte-app/src/components/loading/bar.svelte b/svelte-app/src/components/loading/bar.svelte
deleted file mode 100644
index c515de6f1..000000000
--- a/svelte-app/src/components/loading/bar.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
diff --git a/svelte-app/src/components/loading/spinner.svelte b/svelte-app/src/components/loading/spinner.svelte
index e792fa05d..94fc92b0b 100644
--- a/svelte-app/src/components/loading/spinner.svelte
+++ b/svelte-app/src/components/loading/spinner.svelte
@@ -6,12 +6,13 @@
viewBox="0 0 24 24"
>
;
+
const transformName = (name: string) => {
return name
- .replace(/([a-z])([A-Z])/g, '$1-$2')
- .replace(/([A-Z])([A-Z])(?=[a-z])/g, '$1-$2')
- .replace(/([a-zA-Z])(\d)/g, '$1-$2')
+ .replace(/([a-z])([A-Z])|([A-Z])([A-Z](?=[a-z]))|([a-zA-Z])(\d)/g, '$1$3$5-$2$4$6')
.toLowerCase();
};
-const iconProxy = new Proxy(
- new Map([
- ['alert', Alert],
- ['sun', Sun],
- ['moon-stars', MoonStars]
- ]),
- {
- get: (target, prop) => {
- switch (prop) {
- case 'get': {
- return (iconName: string) => {
- iconName = transformName(iconName);
- if (!target.has(iconName)) {
- return import(`../../node_modules/pixelarticons/svg/${iconName}.svg`)
- .then((res: { default: PixelIcon } | undefined) => {
- if (!res) {
- Logger.error(`Icon ${iconName} not found`);
- return target.get('alert');
- }
- target.set(iconName, res.default);
- return res.default;
- })
- .catch(() => target.get('alert'));
- }
- return target.get(iconName);
- };
- }
- default: {
- return undefined;
- }
- }
- }
+const getIcon = (iconName: string) => {
+ const name = transformName(iconName) as (typeof iconNames)[number];
+ if (!iconMap.has(name)) {
+ Logger.error(`Icon ${name} not found`);
+ return iconMap.get('alert');
}
-) as unknown as {
- get: (iconName: string) => PixelIcon;
+ return iconMap.get(name);
};
-export default iconProxy;
+export default { get: getIcon };
diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte
index 6aa123f07..5d9a3219c 100644
--- a/svelte-app/src/routes/+layout.svelte
+++ b/svelte-app/src/routes/+layout.svelte
@@ -3,14 +3,13 @@
import { onDestroy, onMount, setContext } from 'svelte';
import { circInOut } from 'svelte/easing';
- import { fade, fly, slide } from 'svelte/transition';
+ import { fly, slide } from 'svelte/transition';
import { classList } from 'svelte-body';
import { useMediaQuery } from 'svelte-breakpoints';
import { browser } from '$app/environment';
import { navigating, page } from '$app/stores';
- import { isDesktop } from '$helpers/responsive';
import { check as checkTranslations, currentLang, isLocalized, t } from '$i18n';
import { APP_LANGS, BASE_ANIMATION_DURATION, DEFAULT_APP_LANG } from '$lib/consts';
import { ENV, SELF_BASE_URL } from '$lib/env';
@@ -21,7 +20,6 @@
import ContextMenu from '$components/context-menu.svelte';
import PageTransition from '$components/layouts/page-transition.svelte';
import ScrollContainer from '$components/layouts/scroll-container.svelte';
- import BarLoader from '$components/loading/bar.svelte';
import Nav from '$components/nav.svelte';
import type { Navigation } from '@sveltejs/kit';
@@ -112,16 +110,6 @@
on:contextmenu|preventDefault={(e) => setMenuState(e, pageContainer)}
/>
-{#if !$isDesktop && $loading}
-
-
-
-{/if}
-
{#if $menuState.open}
{/if}
diff --git a/svelte-app/svelte.config.js b/svelte-app/svelte.config.js
index 9c1f3bd7f..4c7cc13f2 100644
--- a/svelte-app/svelte.config.js
+++ b/svelte-app/svelte.config.js
@@ -1,17 +1,10 @@
-import preprocess from 'svelte-preprocess';
-
import NetlifyAdapter from '@sveltejs/adapter-netlify';
import NodeAdapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
export default {
- preprocess: [
- vitePreprocess(),
- preprocess({
- postcss: true
- })
- ],
+ preprocess: [vitePreprocess({ script: true, style: true })],
kit: {
alias: {
$components: 'src/components',
@@ -25,7 +18,7 @@ export default {
process.env.SVELTE_ADAPTER_ENV === 'netlify'
? NetlifyAdapter({
edge: false,
- split: false
+ split: true
})
: NodeAdapter({ out: './dist' }),
files: {
diff --git a/svelte-app/vite.config.ts b/svelte-app/vite.config.ts
index d65f29218..cb3093f1c 100644
--- a/svelte-app/vite.config.ts
+++ b/svelte-app/vite.config.ts
@@ -37,31 +37,22 @@ export default defineConfig(({ command, mode }) => {
build: {
rollupOptions: {
output: {
+ generatedCode: {
+ constBindings: true
+ },
inlineDynamicImports: false,
- // TOOD: Fix manual chunking
manualChunks: (id: string) => {
// check for svelte-highlight / highlight.js and portabletext,
// chunk into their own dirs
switch (true) {
case id.includes('svelte-highlight/styles'):
- return 'svelte-highlight/styles';
+ return 'svelt-highlight/styles';
case id.includes('highlight.js/lib/core'):
- return 'highlight.js/core';
- case id.includes('@portabletext'):
- return 'portabletext';
- }
- // check for hljs langs, chunk into dirs based on first letter
- // to reduce size of chunks
- const matchHlLang = id.match(
- /highlight\.js(?:\/lib){0,1}\/languages\/([a-zA-Z])+/
- ),
- matchSHlLang = id.match(
- /svelte-highlight(?:\/lib){0,1}\/languages\/([a-zA-Z])+/
- );
- if (matchHlLang) {
- return `highlight.js/languages/${matchHlLang[1]}`;
- } else if (matchSHlLang) {
- return `svelte-highlight/languages/${matchSHlLang[1]}`;
+ return 'hljs/core';
+ case id.includes('svelte-highlight'):
+ return 'svelte-highlight';
+ case id.includes('highlight.js'):
+ return 'hljs';
}
}
}