Update MeltUI, install MeltUI preprocessor, update Tabs on portfolio for breaking changes.

package.json

@@ -19,6 +19,7 @@
 		"@iconify-icons/mdi": "^1.2.47",
 		"@iconify-icons/radix-icons": "^1.2.9",
 		"@iconify-icons/simple-icons": "^1.2.70",
+		"@melt-ui/pp": "^0.1.2",
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/adapter-vercel": "^1.0.6",
@@ -47,6 +48,7 @@
 		"svelte-check": "^3.4.6",
 		"svelte-lazy-loader": "^1.0.0",
 		"svelte-preprocess": "^5.0.4",
+		"svelte-sequential-preprocessor": "^2.0.1",
 		"tslib": "^2.6.2",
 		"typescript": "^5.2.2",
 		"vanilla-lazyload": "^17.8.4",
@@ -56,7 +58,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@melt-ui/svelte": "^0.19.1",
+		"@melt-ui/svelte": "^0.50.0",
 		"@types/nprogress": "^0.2.1",
 		"ioredis": "^5.3.2",
 		"nprogress": "^0.2.0"

pnpm-lock.yaml

@@ -6,8 +6,8 @@ settings:
 
 dependencies:
   '@melt-ui/svelte':
-    specifier: ^0.19.1
+    specifier: ^0.50.0
-    version: 0.19.1(svelte@4.2.1)
+    version: 0.50.0(svelte@4.2.1)
   '@types/nprogress':
     specifier: ^0.2.1
     version: 0.2.1
@@ -31,6 +31,9 @@ devDependencies:
   '@iconify-icons/simple-icons':
     specifier: ^1.2.70
     version: 1.2.70
+  '@melt-ui/pp':
+    specifier: ^0.1.2
+    version: 0.1.2(@melt-ui/svelte@0.50.0)(svelte@4.2.1)
   '@playwright/test':
     specifier: ^1.28.1
     version: 1.36.2
@@ -115,6 +118,9 @@ devDependencies:
   svelte-preprocess:
     specifier: ^5.0.4
     version: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.30)(sass@1.65.1)(svelte@4.2.1)(typescript@5.2.2)
+  svelte-sequential-preprocessor:
+    specifier: ^2.0.1
+    version: 2.0.1
   tslib:
     specifier: ^2.6.2
     version: 2.6.2
@@ -981,15 +987,19 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@floating-ui/core@1.3.1:
+  /@floating-ui/core@1.5.0:
-    resolution: {integrity: sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==}
+    resolution: {integrity: sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==}
-    dev: false
-
-  /@floating-ui/dom@1.4.4:
-    resolution: {integrity: sha512-21hhDEPOiWkGp0Ys4Wi6Neriah7HweToKra626CIK712B5m9qkdz54OP9gVldUg+URnBTpv/j/bi/skmGdstXQ==}
     dependencies:
-      '@floating-ui/core': 1.3.1
+      '@floating-ui/utils': 0.1.4
-    dev: false
+
+  /@floating-ui/dom@1.5.3:
+    resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
+    dependencies:
+      '@floating-ui/core': 1.5.0
+      '@floating-ui/utils': 0.1.4
+
+  /@floating-ui/utils@0.1.4:
+    resolution: {integrity: sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==}
 
   /@humanwhocodes/config-array@0.11.10:
     resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==}
@@ -1103,17 +1113,28 @@ packages:
       - supports-color
     dev: true
 
-  /@melt-ui/svelte@0.19.1(svelte@4.2.1):
+  /@melt-ui/pp@0.1.2(@melt-ui/svelte@0.50.0)(svelte@4.2.1):
-    resolution: {integrity: sha512-LjPZWkUxkNbpE7LCarQFDAiBuBWYhse1JB4Kw4JbPT66t+KCPcDlKLzJJQ5AVx8A2Aey1mngAdE1q3zVu4REDA==}
+    resolution: {integrity: sha512-GZeqp7UWLNZUC2dJpREnZrWMR88vy27WO7C3cIBz4KW3/CFD19FjNkd3VbSRfcRryrMkdnEs9nu2VUa8/0u58w==}
+    engines: {pnpm: '>=8.6.3'}
+    peerDependencies:
+      '@melt-ui/svelte': '>= 0.29.0'
+      svelte: ^3.55.0 || ^4.0.0
+    dependencies:
+      '@melt-ui/svelte': 0.50.0(svelte@4.2.1)
+      svelte: 4.2.1
+    dev: true
+
+  /@melt-ui/svelte@0.50.0(svelte@4.2.1):
+    resolution: {integrity: sha512-NcWwxwStXq77/yOuBfnGkuJdUta3M4SwqZECdaRpAQ61BHI3qz7WW2ZM42JmDvGSs9W6ww2kZFNF8XNTO92CdA==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
-      '@floating-ui/core': 1.3.1
+      '@floating-ui/core': 1.5.0
-      '@floating-ui/dom': 1.4.4
+      '@floating-ui/dom': 1.5.3
-      focus-trap: 7.5.2
+      dequal: 2.0.3
+      focus-trap: 7.5.3
       nanoid: 4.0.2
       svelte: 4.2.1
-    dev: false
 
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -2452,11 +2473,10 @@ packages:
     resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
     dev: true
 
-  /focus-trap@7.5.2:
+  /focus-trap@7.5.3:
-    resolution: {integrity: sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==}
+    resolution: {integrity: sha512-7UsT/eSJcTPF0aZp73u7hBRTABz26knRRTJfoTGFCQD5mUImLIIOwWWCrtoQdmWa7dykBi6H+Cp5i3S/kvsMeA==}
     dependencies:
       tabbable: 6.2.0
-    dev: false
 
   /follow-redirects@1.15.3:
     resolution: {integrity: sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==}
@@ -3027,7 +3047,6 @@ packages:
     resolution: {integrity: sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==}
     engines: {node: ^14 || ^16 || >=18}
     hasBin: true
-    dev: false
 
   /napi-build-utils@1.0.2:
     resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
@@ -4219,6 +4238,14 @@ packages:
       typescript: 5.2.2
     dev: true
 
+  /svelte-sequential-preprocessor@2.0.1:
+    resolution: {integrity: sha512-N5JqlBni6BzElxmuFrOPxOJnjsxh1cFDACLEVKs8OHBcx8ZNRO1p5SxuQex1m3qbLzAC8G99EHeWcxGkjyKjLQ==}
+    engines: {node: '>=16'}
+    dependencies:
+      svelte: 4.2.1
+      tslib: 2.6.2
+    dev: true
+
   /svelte@4.2.1:
     resolution: {integrity: sha512-LpLqY2Jr7cRxkrTc796/AaaoMLF/1ax7cto8Ot76wrvKQhrPmZ0JgajiWPmg9mTSDqO16SSLiD17r9MsvAPTmw==}
     engines: {node: '>=16'}
@@ -4239,7 +4266,6 @@ packages:
 
   /tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
-    dev: false
 
   /tar-fs@2.1.1:
     resolution: {integrity: sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==}

src/routes/portfolio/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createTabs } from '@melt-ui/svelte';
+	import { createTabs, melt } from '@melt-ui/svelte';
 	import GitHub from '@iconify-icons/simple-icons/github';
 	import SEO from '$lib/components/SEO.svelte';
 	import Portfolio from '$lib/components/Portfolio.svelte';
@@ -13,24 +13,30 @@
 	import OldWebsite from '$lib/content/portfolio/personal/old-website.md';
 	import ExternalLink from '$lib/components/ExternalLink.svelte';
 
-	const { root, list, content, trigger } = createTabs({
+	const {
-    value: 'personal',
+		elements: { root, list, content, trigger }
-  });
+	} = createTabs({
+		defaultValue: 'personal'
+	});
+
+	const triggers = [
+		{ id: 'personal', title: 'Personal Sites' },
+		{ id: 'professional', title: 'Professional Sites'}
+	];
 </script>
 
 <SEO title="Portfolio" />
 
 <h1>Portfolio!</h1>
-<div {...$root} class="root tab-group">
+<div use:melt={$root} class="root tab-group">
-	<div {...$list} aria-label="tabs portfolios" class="list tab-list">
+	<div use:melt={$list} aria-label="tabs portfolios" class="list tab-list">
-		<button {...$trigger('personal')} use:trigger class="trigger">
+		{#each triggers as triggerItem}
-			<h2>Personal Sites</h2>
+			<button use:melt={$trigger(triggerItem.id)} class="trigger" type="button">
-		</button>
+				<h2>{triggerItem.title}</h2>
-		<button {...$trigger('professional')} use:trigger value="professional-sites" class="trigger">
+			</button>
-			<h2>Professional Sites</h2>
+		{/each}
-		</button>
 	</div>
-	<div {...$content('personal')} class="content">
+	<div use:melt={$content('personal')} class="content">
 		<Portfolio name="Personal Website"
 			style="max-height: 640px;"
 			src={personalSite}
@@ -69,7 +75,7 @@
 			<OldWebsite slot="portfolio-details" />
 		</Portfolio>
 	</div>
-	<div {...$content('professional')} class="content">
+	<div use:melt={$content('professional')} class="content">
 		<Portfolio name="Mark Shellnut Architect"
 			style="max-height: 640px;"
 			src={shellnutArchitectWebsite}
@@ -91,7 +97,7 @@
 		/* overflow: hidden; */
 		/* border-radius: var(--border-radius); */
 
-		& [data-orientation="vertical"] {
+		&[data-orientation="vertical"] {
 			flex-direction: row;
 		}
 
@@ -111,15 +117,17 @@
 		user-select: none;
 	}
 
-	.trigger[data-state='active'] {
+	.trigger {
-		& h2 {
+		&[data-state='active'] {
-			border-bottom: 2px solid var(--shellYellow);
+			h2 {
+				border-bottom: 2px solid var(--shellYellow);
+			}
 		}
-	}
 
-	.trigger[data-state='inactive'] {
+	 	&[data-state='inactive'] {
-		& h2 {
+			h2 {
-			border-bottom: 2px solid var(--white);
+				border-bottom: 2px solid var(--white);
+			}
 		}
 	}
 

svelte.config.js

@@ -1,5 +1,6 @@
 import adapter from '@sveltejs/adapter-vercel';
 import { vitePreprocess } from '@sveltejs/kit/vite';
+import { preprocessMeltUI } from '@melt-ui/pp';
 import { mdsvex } from 'mdsvex';
 import mdsvexConfig from './mdsvex.config.js';
 import relativeImages from 'mdsvex-relative-images';
@@ -10,7 +11,7 @@ const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
 	extensions: ['.svelte', ...mdsvexConfig.extensions],
-	preprocess: [vitePreprocess(), mdsvex(mdsvexConfig)],
+	preprocess: [vitePreprocess(), mdsvex(mdsvexConfig), preprocessMeltUI()],
 	vitePlugin: {
 		inspector: true,
 		toggleKeyCombo: 'control-alt-shift'