From 4e046fa8f2da0967324c6f6cec6f3093fc94cc28 Mon Sep 17 00:00:00 2001 From: Mathieu Schimmerling Date: Sun, 27 Oct 2024 18:35:01 +0100 Subject: [PATCH] fix(selection): fix bonus frameworks handling --- frameworks.mjs | 7 ++-- src/Index.svelte | 104 ++++++++++++++++++++++------------------------- 2 files changed, 51 insertions(+), 60 deletions(-) diff --git a/frameworks.mjs b/frameworks.mjs index 5c4b0abc..a382c727 100644 --- a/frameworks.mjs +++ b/frameworks.mjs @@ -479,10 +479,9 @@ const frameworks = [ export function matchFrameworkId(id) { return frameworks.find( - (framework) => - framework.id === id || - (framework.isCurrentVersion && - framework.frameworkName.toLowerCase() === id) + (framework) => framework.id === id + // ||(framework.isCurrentVersion && + // framework.frameworkName.toLowerCase() === id) ); } diff --git a/src/Index.svelte b/src/Index.svelte index 8c9dd212..c49cfa40 100644 --- a/src/Index.svelte +++ b/src/Index.svelte @@ -40,7 +40,10 @@ history.replaceState({}, "", newUrl); } - const frameworkIdsFromURLKey = "f"; + const FRAMEWORK_IDS_FROM_URL_KEY = "f"; + const SITE_TITLE = "Component Party"; + const MAX_FRAMEWORK_NB_INITIAL_DISPLAYED = 9; + const FRAMEWORKS_BONUS = FRAMEWORKS.slice(MAX_FRAMEWORK_NB_INITIAL_DISPLAYED); let frameworkIdsSelected = $state(new SvelteSet()); let snippetsByFrameworkId = $state(new SvelteMap()); @@ -48,12 +51,27 @@ let isVersusFrameworks = $state(false); let onMountCallbacks = $state(new SvelteSet()); let isMounted = $state(false); - const siteTitle = "Component Party"; + + function handleVersus(versus) { + const fids = versus.split("-vs-"); + + if (fids.length !== 2) { + return; + } + + const frameworks = fids.map(matchFrameworkId); + + if (frameworks.some((f) => !f)) { + return; + } + + return frameworks; + } const unsubscribeCurrentRoute = currentRoute.subscribe(($currentRoute) => { window.scrollTo(0, 0); isVersusFrameworks = false; - document.title = siteTitle; + document.title = SITE_TITLE; if ($currentRoute.path === "/") { if (isMounted) { @@ -67,11 +85,13 @@ const versusFrameworks = handleVersus($currentRoute.params.versus); if (versusFrameworks) { isVersusFrameworks = true; - frameworkIdsSelected = new SvelteSet(versusFrameworks.map((f) => f.id)); + for (const versusFramework of versusFrameworks) { + frameworkIdsSelected.add(versusFramework.id); + } frameworkIdsSelectedInitialized = true; document.title = `${versusFrameworks .map((f) => f.title) - .join(" vs ")} - ${siteTitle}`; + .join(" vs ")} - ${SITE_TITLE}`; } else { navigate("/"); } @@ -90,7 +110,9 @@ const url = new URL(window.location.href); - const frameworkIdsFromURLStr = url.searchParams.get(frameworkIdsFromURLKey); + const frameworkIdsFromURLStr = url.searchParams.get( + FRAMEWORK_IDS_FROM_URL_KEY + ); if (frameworkIdsFromURLStr) { const frameworkIdsFromURL = frameworkIdsFromURLStr @@ -99,7 +121,7 @@ if (frameworkIdsFromURL.length > 0) { frameworkIdsSelectedOnInit = frameworkIdsFromURL; } else { - removeSearchParamKeyFromURL(frameworkIdsFromURLKey); + removeSearchParamKeyFromURL(FRAMEWORK_IDS_FROM_URL_KEY); } } @@ -116,7 +138,10 @@ frameworkIdsSelectedOnInit = ["react", "svelte5"]; } - frameworkIdsSelected = new SvelteSet(frameworkIdsSelectedOnInit); + for (const fid of frameworkIdsSelectedOnInit) { + frameworkIdsSelected.add(fid); + } + frameworkIdsSelectedInitialized = true; } @@ -126,12 +151,11 @@ callback(); } onMountCallbacks.clear(); - onMountCallbacks = onMountCallbacks; }); function saveFrameworkIdsSelectedOnStorage() { frameworkIdsStorage.setJSON([...frameworkIdsSelected]); - removeSearchParamKeyFromURL(frameworkIdsFromURLKey); + removeSearchParamKeyFromURL(FRAMEWORK_IDS_FROM_URL_KEY); } function toggleFrameworkId(frameworkId) { @@ -169,44 +193,27 @@ ); }); - const MAX_FRAMEWORK_NB_INITIAL_DISPLAYED = 9; - - const FRAMEWORKS_INITIAL_DISPLAYED = FRAMEWORKS.slice( - 0, - MAX_FRAMEWORK_NB_INITIAL_DISPLAYED - ); - - const FRAMEWORKS_MORE = FRAMEWORKS.slice(MAX_FRAMEWORK_NB_INITIAL_DISPLAYED); + let showBonusFrameworks = $state(false); const frameworksSelected = $derived( [...frameworkIdsSelected].map(matchFrameworkId) ); - const frameworksNotSelected = $derived( - FRAMEWORKS_INITIAL_DISPLAYED.filter((f) => !frameworkIdsSelected.has(f.id)) + const bonusFrameworks = $derived( + FRAMEWORKS_BONUS.filter((f) => !frameworkIdsSelected.has(f.id)) ); - const frameworksMoreNotSelected = $derived( - FRAMEWORKS_MORE.filter((f) => !frameworkIdsSelected.has(f.id)) + const frameworksNotSelected = $derived( + FRAMEWORKS.filter((f) => !frameworkIdsSelected.has(f.id)) ); - let showBonusFrameworks = $state(false); - - function handleVersus(versus) { - const fids = versus.split("-vs-"); - - if (fids.length !== 2) { - return; - } - - const frameworks = fids.map(matchFrameworkId); - - if (frameworks.some((f) => !f)) { - return; - } - - return frameworks; - } + const headerFrameworks = $derived([ + ...frameworksSelected, + ...frameworksNotSelected.filter( + (f) => !bonusFrameworks.find((bf) => bf.id === f.id) + ), + ...(showBonusFrameworks ? bonusFrameworks : []), + ]); @@ -220,7 +227,7 @@ class="flex px-6 lg:px-20 py-2 sticky top-0 z-20 w-full backdrop-blur bg-gray-900/80 border-b border-gray-700 whitespace-nowrap overflow-x-auto" data-framework-id-selected-list={[...frameworkIdsSelected].join(",")} > - {#each [...frameworksSelected, ...frameworksNotSelected] as framework (framework.id)} + {#each headerFrameworks as framework} {/each} - {#if showBonusFrameworks} - {#each frameworksMoreNotSelected as framework (framework.id)} - - {/each} - {:else if frameworksMoreNotSelected.length > 0} + {#if bonusFrameworks.length > 0 && !showBonusFrameworks}