AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reduce bundle size by removing svelte-motion

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-11 22:16:28 +02:00
parent 81b783f317
commit 794c0d6ce1
9 changed files with 3 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
package-lock.json generated
View File

@ -49,7 +49,6 @@
"svelte-inview": "^4.0.2",
"svelte-lightweight-charts": "^2.2.0",
"svelte-loading-spinners": "^0.3.6",
"svelte-motion": "^0.12.2",
"svelte-progress-bar": "^3.0.2",
"svelte-range-slider-pips": "^2.3.1",
"svelte-sonner": "^0.3.27",
@ -3156,26 +3155,12 @@
"undici-types": "~5.26.4"
}
},
"node_modules/@types/prop-types": {
"version": "15.7.12",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
"integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
},
"node_modules/@types/pug": {
"version": "2.0.10",
"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.10.tgz",
"integrity": "sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==",
"dev": true
},
"node_modules/@types/react": {
"version": "18.3.3",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
"integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
"dependencies": {
"@types/prop-types": "*",
"csstype": "^3.0.2"
}
},
"node_modules/@types/resolve": {
"version": "1.20.2",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@ -4180,11 +4165,6 @@
"node": ">=4"
}
},
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
},
"node_modules/culori": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
@ -4911,19 +4891,6 @@
"url": "https://github.com/sponsors/rawify"
}
},
"node_modules/framesync": {
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.2.tgz",
"integrity": "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==",
"dependencies": {
"tslib": "2.4.0"
}
},
"node_modules/framesync/node_modules/tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
},
"node_modules/fs-minipass": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
@ -5201,11 +5168,6 @@
"node": ">= 0.4"
}
},
"node_modules/hey-listen": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
"integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
},
"node_modules/html2canvas": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
@ -6514,22 +6476,6 @@
"resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.21.3.tgz",
"integrity": "sha512-bsQRZ1mj4dhPJ4P5iSrDqWQtBX2NtuBkf6IOZwTv27zZOw6zrISgo963i5JD/99qKKD5aMSMDPGk1BE9ZyI7Cg=="
},
"node_modules/popmotion": {
"version": "11.0.5",
"resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz",
"integrity": "sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==",
"dependencies": {
"framesync": "6.1.2",
"hey-listen": "^1.0.8",
"style-value-types": "5.1.2",
"tslib": "2.4.0"
}
},
"node_modules/popmotion/node_modules/tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
},
"node_modules/possible-typed-array-names": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@ -7356,20 +7302,6 @@
"resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
"integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA=="
},
"node_modules/style-value-types": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.1.2.tgz",
"integrity": "sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==",
"dependencies": {
"hey-listen": "^1.0.8",
"tslib": "2.4.0"
}
},
"node_modules/style-value-types/node_modules/tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
},
"node_modules/sucrase": {
"version": "3.35.0",
"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@ -7579,21 +7511,6 @@
"resolved": "https://registry.npmjs.org/svelte-loading-spinners/-/svelte-loading-spinners-0.3.6.tgz",
"integrity": "sha512-mthHQ2TwiwzTWzbFry3CBnVEfzqPOD9WkVw84OfSYzHRq6N9wgQ+yv37u81uPeuLU/ZOIPqhujpXquB1aol5ZQ=="
},
"node_modules/svelte-motion": {
"version": "0.12.2",
"resolved": "https://registry.npmjs.org/svelte-motion/-/svelte-motion-0.12.2.tgz",
"integrity": "sha512-7RrdRz9iVP55B9HT/C0hYW3pyrKlF61kAby/AkDtOAP0uHFQDrfd0qQetDC81cEsK9b40jt+jfcqSAXcA7LPEw==",
"dependencies": {
"@types/react": "^18.2.42",
"framesync": "^6.1.2",
"popmotion": "^11.0.5",
"style-value-types": "5.1.2",
"tslib": "^2.6.2"
},
"peerDependencies": {
"svelte": ">=3.35.0 || ^4.0.0 || ^5.0.0 || ^5.0.0-next.0"
}
},
"node_modules/svelte-preprocess": {
"version": "5.1.4",
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz",

1
package.json
View File

@ -91,7 +91,6 @@
"svelte-inview": "^4.0.2",
"svelte-lightweight-charts": "^2.2.0",
"svelte-loading-spinners": "^0.3.6",
"svelte-motion": "^0.12.2",
"svelte-progress-bar": "^3.0.2",
"svelte-range-slider-pips": "^2.3.1",
"svelte-sonner": "^0.3.27",

10
src/lib/components/BullBearSay.svelte
View File

@ -1,7 +1,6 @@
<script lang='ts'>
import { stockTicker, displayCompanyName } from "$lib/store";
import InfoModal from '$lib/components/InfoModal.svelte';
import { Motion, AnimateSharedLayout } from "svelte-motion";
export let data;
export let marketMoods = {};
@ -78,7 +77,6 @@ $: {
{#if data?.user?.tier === 'Pro'}
<!--Start Header-->
<div class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 -mt-2">
<AnimateSharedLayout>
{#each tabs as item, i}
<button
on:click={() => handleMode(i)}
@ -87,16 +85,9 @@ $: {
: ''} "
>
{#if activeIdx === i}
<Motion
layoutId="clicked-btn"
transition={{ duration: 0.2 }}
let:motion
>
<div
use:motion
class="absolute inset-0 rounded-lg bg-purple-600"
></div>
</Motion>
{/if}
<span
class="relative text-sm block font-medium duration-200 text-white">
@ -104,7 +95,6 @@ $: {
</span>
</button>
{/each}
</AnimateSharedLayout>
</div>

10
src/lib/components/SECFilingsCard.svelte
View File

@ -1,6 +1,5 @@
<script lang="ts">
import {userRegion, secFilingsClicked, stockTicker, clientSideCache, } from '$lib/store';
import { Motion, AnimateSharedLayout } from "svelte-motion";
import { fade } from 'svelte/transition';
@ -175,7 +174,6 @@ $: {
<div class="relative right-0 bg-[#27272A] rounded-lg">
<div class="relative flex flex-row items-center p-1 list-none rounded-lg">
<AnimateSharedLayout>
{#each tabs as item, i}
<button
on:click={() => changeSECType(i)}
@ -184,16 +182,9 @@ $: {
: ''} "
>
{#if activeIdx === i}
<Motion
layoutId="clicked-btn"
transition={{ duration: 0.2 }}
let:motion
>
<div
use:motion
class="absolute inset-0 rounded-lg sm:rounded-lg {[0,1,2]?.includes(activeIdx) ? 'bg-[#00C806]' : 'bg-[#E02424]'}"
></div>
</Motion>
{/if}
{#if item?.title === '8-K'}
@ -215,7 +206,6 @@ $: {
</button>
{/each}
</AnimateSharedLayout>
</div>
</div>

15
src/lib/components/Swap.svelte
View File

@ -4,7 +4,6 @@
import { swapComponent, stockTicker, screenWidth, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { Motion, AnimateSharedLayout } from "svelte-motion";
import { init, use } from 'echarts/core'
import { ScatterChart } from 'echarts/charts'
@ -248,33 +247,23 @@
<div class="pb-2 rounded-lg bg-[#09090B]">
<div class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 mt-4">
<AnimateSharedLayout>
{#each tabs as item, i}
<button
on:click={() => changeTab(i)}
class="group relative z-[1] rounded-full px-3 py-1 {activeIdx === i
? 'z-0'
: ''} "
>
: ''} ">
{#if activeIdx === i}
<Motion
layoutId="clicked-btn"
transition={{ duration: 0.2 }}
let:motion
>
<div
use:motion
class="absolute inset-0 rounded-lg bg-purple-600"
></div>
</Motion>
{/if}
<span
class="relative text-xs sm:text-sm block font-medium duration-200 text-white">
class="relative text-sm block font-medium duration-200 text-white">
{item.title}
</span>
</button>
{/each}
</AnimateSharedLayout>
</div>

2
src/routes/+layout.svelte
View File

@ -270,7 +270,7 @@ $: {
<div class="flex min-h-screen w-full flex-col bg-[#09090B]">
<Splitpanes class="w-full" theme="no-splitter" horizontal dblClickSplitter={false}>
<Splitpanes class="w-full " style="z-index: 1" theme="no-splitter" horizontal dblClickSplitter={false}>
<Pane size={6} minSize={10} maxSize={6} class="w-full navbar sticky {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} top-0 z-40 bg-[#09090B] border-b border-gray-800 flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6">
<Sheet.Root>

10
src/routes/hedge-funds/[slug]/+page.svelte
View File

@ -3,7 +3,6 @@
import { screenWidth, numberOfUnreadNotification, displayCompanyName } from '$lib/store';
import cardBackground from "$lib/images/bg-hedge-funds.png";
import defaultAvatar from "$lib/images/hedge_funds/default-avatar.png";
import { Motion, AnimateSharedLayout } from "svelte-motion";
import { abbreviateNumber, formatString } from '$lib/utils';
@ -675,7 +674,6 @@ onMount(async () => {
<div class="relative right-0 bg-[#141417] rounded-lg">
<div class="relative flex flex-row items-center p-1 list-none rounded-lg">
<AnimateSharedLayout>
{#each tabs as item, i}
<button
on:click={() => changeTab(i)}
@ -684,16 +682,9 @@ onMount(async () => {
: ''} "
>
{#if activeIdx === i}
<Motion
layoutId="clicked-btn"
transition={{ duration: 0.2 }}
let:motion
>
<div
use:motion
class="absolute inset-0 rounded-lg sm:rounded-lg {[0,1]?.includes(activeIdx) ? 'bg-[#00C806]' : 'bg-[#E02424]'}"
></div>
</Motion>
{/if}
{#if item?.title === 'Stocks'}
@ -710,7 +701,6 @@ onMount(async () => {
</button>
{/each}
</AnimateSharedLayout>
</div>
</div>
</div>

7
src/routes/stocks/[tickerID]/+page.svelte
View File

@ -1149,13 +1149,6 @@ function changeChartType() {
<div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
</div>
<label on:click={changeChartType} class="ml-auto mr-5 -mt-1 sm:hidden border border-slate-800 px-2.5 py-1 rounded-xl">
{#if displayChartType === 'line'}
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
{:else}
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5L9 10l4 6l8-9.5"/></svg>
{/if}
</label>
</div>
<!--End Time Interval-->

10
src/routes/stocks/[tickerID]/analyst/+page.svelte
View File

@ -5,7 +5,6 @@ import InfoModal from '$lib/components/InfoModal.svelte';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import { goto } from '$app/navigation';
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import { Motion, AnimateSharedLayout } from "svelte-motion";
export let data;
@ -239,7 +238,6 @@ changeTab(0)
<div class="ml-auto">
<div class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 mt-4">
<AnimateSharedLayout>
{#each tabs as item, i}
<button
on:click={() => changeTab(i)}
@ -248,16 +246,9 @@ changeTab(0)
: ''} "
>
{#if activeIdx === i}
<Motion
layoutId="clicked-btn"
transition={{ duration: 0.2 }}
let:motion
>
<div
use:motion
class="absolute inset-0 rounded-lg bg-purple-600"
></div>
</Motion>
{/if}
<span
class="relative text-sm block font-medium duration-200 text-white">
@ -265,7 +256,6 @@ changeTab(0)
</span>
</button>
{/each}
</AnimateSharedLayout>
</div>
</div>
</div>