Upgrate to svelte 5 🎉

lucianoratamero · Oct 21, 2024 · 2987a3c · 2987a3c
1 parent 600f9e4
commit 2987a3c
Show file tree

Hide file tree

Showing 8 changed files with 3,903 additions and 4,189 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,58 +1,54 @@
 {
-  "name": "bokeh-experiments",
-  "version": "1.0.0",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "deploy": "git checkout $1 && npm run build && gh-pages -d build",
-    "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check .",
-    "format": "prettier --write .",
-    "prepare": "husky"
-  },
-  "homepage": "http://www.ratamero.com",
-  "license": "MIT",
-  "devDependencies": {
-    "@neoconfetti/svelte": "^2.2.1",
-    "@steeze-ui/heroicons": "^2.4.0",
-    "@steeze-ui/radix-icons": "^1.1.2",
-    "@steeze-ui/svelte-icon": "^1.5.0",
-    "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@tailwindcss/typography": "^0.5.14",
-    "@types/dat.gui": "^0.7.13",
-    "@types/lodash-es": "^4.17.12",
-    "autoprefixer": "^10.4.19",
-    "gh-pages": "^6.1.1",
-    "husky": "^9.1.4",
-    "mdsvex": "^0.11.2",
-    "postcss": "^8.4.38",
-    "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.1.2",
-    "prettier-plugin-tailwindcss": "^0.5.14",
-    "sass": "^1.77.8",
-    "svelte": "^5.0.0-next.1",
-    "svelte-canvas-confetti": "^0.6.0",
-    "svelte-check": "^3.6.0",
-    "svelte-confetti": "^1.4.0",
-    "tailwindcss": "^3.4.3",
-    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.3"
-  },
-  "type": "module",
-  "dependencies": {
-    "bits-ui": "^0.21.13",
-    "clsx": "^2.1.1",
-    "comfy.js": "^1.1.16",
-    "dat.gui": "^0.7.9",
-    "lodash-es": "^4.17.21",
-    "nice-color-palettes": "^3.0.0",
-    "tailwind-merge": "^2.5.2",
-    "tailwind-variants": "^0.2.1",
-    "tmi.js": "^1.8.5"
-  }
+	"name": "bokeh-experiments",
+	"version": "1.0.0",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"deploy": "git checkout $1 && npm run build && gh-pages -d build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check .",
+		"format": "prettier --write .",
+		"prepare": "husky"
+	},
+	"homepage": "http://www.ratamero.com",
+	"license": "MIT",
+	"devDependencies": {
+		"@sveltejs/adapter-static": "^3.0.5",
+		"@sveltejs/kit": "^2.7.2",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@tailwindcss/typography": "^0.5.15",
+		"@types/dat.gui": "^0.7.13",
+		"@types/lodash-es": "^4.17.12",
+		"autoprefixer": "^10.4.20",
+		"gh-pages": "^6.2.0",
+		"husky": "^9.1.6",
+		"mdsvex": "^0.12.3",
+		"postcss": "^8.4.47",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.7",
+		"prettier-plugin-tailwindcss": "^0.6.8",
+		"sass": "^1.80.3",
+		"svelte-check": "^4.0.5",
+		"svelte-confetti": "^2.1.2",
+		"tailwindcss": "^3.4.14",
+		"tslib": "^2.8.0",
+		"typescript": "^5.6.3",
+		"vite": "^5.4.9"
+	},
+	"type": "module",
+	"dependencies": {
+		"bits-ui": "^0.21.16",
+		"clsx": "^2.1.1",
+		"comfy.js": "^1.1.16",
+		"dat.gui": "^0.7.9",
+		"iconify-icon": "^2.1.0",
+		"lodash-es": "^4.17.21",
+		"nice-color-palettes": "^4.0.0",
+		"svelte": "^5.0.5",
+		"tailwind-merge": "^2.5.4",
+		"tailwind-variants": "^0.2.1",
+		"tmi.js": "^1.8.5"
+	}
 }
diff --git a/src/routes/(docs)/docs/+page.md b/src/routes/(docs)/docs/+page.md
@@ -149,8 +149,8 @@ example: [https://lucianoratamero.github.io/stream-tools/timer/?timeInSeconds=6]
 ## Developing/Contributing
 
 ```bash
-# install dependencies - while svelte 5 is not released, we need to force the install
-npm install --force
+# install dependencies
+npm install
 # start the dev server
 npm run dev
 # build to production

diff --git a/src/routes/(docs)/docs/pt-br/+page.md b/src/routes/(docs)/docs/pt-br/+page.md
@@ -145,8 +145,8 @@ exemplo: [https://lucianoratamero.github.io/stream-tools/timer/?timeInSeconds=6]
 ## Desenvolvendo/Contribuindo
 
 ```bash
-# instalar dependências - enquanto o svelte 5 não é lançado, precisamos forçar a instalação
-npm install --force
+# instalar dependências
+npm install
 # iniciar o servidor de desenvolvimento
 npm run dev
 # construir para produção

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import '$lib/app.css';
+	import 'iconify-icon';
 
 	let { children } = $props();
 </script>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,59 +1,37 @@
 <script lang="ts">
-	import { GithubLogo, TwitterLogo } from '@steeze-ui/radix-icons';
-	import { Icon } from '@steeze-ui/svelte-icon';
 	import NavLinks from '$lib/components/NavLinks.svelte';
 </script>
 
+<svelte:head>
+	<title>stream-tools - home</title>
+</svelte:head>
+
 <div class="flex h-screen flex-col gap-4 md:flex-row">
 	<div class="flex flex-col">
-		<h1 class="text-8xl md:text-[10rem] leading-none">Tools</h1>
+		<h1 class="text-8xl leading-none md:text-[10rem]">Tools</h1>
 		<ul class="flex gap-4">
 			<li>
-				<a href="https://github.com/lucianoratamero/stream-tools" target="_blank">
-					<Icon src={GithubLogo} class="h-8" />
+				<a
+					href="https://github.com/lucianoratamero/stream-tools"
+					target="_blank"
+					aria-label="github"
+				>
+					<iconify-icon height="2rem" icon="mdi:github"></iconify-icon>
 				</a>
 			</li>
 			<li>
-				<a href="https://twitch.tv/luciano_ratamero" target="_blank" title="Twitch link">
-					<svg
-						class="h-8 w-8"
-						xmlns="http://www.w3.org/2000/svg"
-						xmlns:xlink="http://www.w3.org/1999/xlink"
-						width="800px"
-						height="800px"
-						viewBox="-0.5 0 20 20"
-						version="1.1"
-						data-afd-extension-id="meojnmfhjkahlfcecpdcdgjclcilmaij"
-					>
-						<title>twitch [#182]</title>
-						<desc>Created with Sketch.</desc>
-						<defs></defs>
-						<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-							<g
-								id="Dribbble-Light-Preview"
-								transform="translate(-141.000000, -7399.000000)"
-								fill="#000000"
-							>
-								<g id="icons" transform="translate(56.000000, 160.000000)">
-									<path
-										d="M97,7249 L99,7249 L99,7244 L97,7244 L97,7249 Z M92,7249 L94,7249 L94,7244 L92,7244 L92,7249 Z M102,7250.307 L102,7241 L88,7241 L88,7253 L92,7253 L92,7255.953 L94.56,7253 L99.34,7253 L102,7250.307 Z M98.907,7256 L94.993,7256 L92.387,7259 L90,7259 L90,7256 L85,7256 L85,7242.48 L86.3,7239 L104,7239 L104,7251.173 L98.907,7256 Z"
-										id="twitch-[#182]"
-									>
-									</path>
-								</g>
-							</g>
-						</g>
-					</svg>
+				<a href="https://twitch.tv/luciano_ratamero" target="_blank" aria-label="Twitch link">
+					<iconify-icon height="2rem" icon="mdi:twitch"></iconify-icon>
 				</a>
 			</li>
 			<li>
-				<a href="https://x.com/lucianoratamero" target="_blank">
-					<Icon src={TwitterLogo} class="h-8" />
+				<a href="https://x.com/lucianoratamero" target="_blank" aria-label="Twitter">
+					<iconify-icon height="2rem" icon="mdi:twitter"></iconify-icon>
 				</a>
 			</li>
 		</ul>
 	</div>
-	<nav class="text-4xl md:text-8xl flex flex-col">
+	<nav class="flex flex-col text-4xl md:text-8xl">
 		<NavLinks />
 	</nav>
 </div>
diff --git a/src/routes/bokeh/+page.svelte b/src/routes/bokeh/+page.svelte
@@ -7,8 +7,6 @@
 	import * as Card from '$lib/components/ui/card/index.js';
 	import Input from '$lib/components/ui/input/input.svelte';
 	import Label from '$lib/components/ui/label/label.svelte';
-	import { Trash } from '@steeze-ui/heroicons';
-	import { Icon } from '@steeze-ui/svelte-icon';
 	import { isEqual } from 'lodash-es';
 	import colorPalettes from 'nice-color-palettes/1000.json';
 	import { onMount } from 'svelte';
@@ -24,7 +22,7 @@
 	let numberOfCircles = $state(0);
 
 	const changePallette = () => {
-		colorPalette = colorPalettes[Math.floor(Math.random() * 1000)];
+		colorPalette = colorPalettes[Math.floor(Math.random() * colorPalettes.length)];
 		placeholderName = '';
 	};
 
@@ -119,7 +117,9 @@
 				isPlaceholder
 				palette={colorPalette}
 				bind:name={placeholderName}
-				i={colorPalettes.findIndex((p) => JSON.stringify(p) === JSON.stringify(colorPalette))}
+				i={colorPalettes.findIndex(
+					(p: string[]) => JSON.stringify(p) === JSON.stringify(colorPalette)
+				)}
 				{colorPalettes}
 				bind:history
 				bind:bookmarks
@@ -144,7 +144,7 @@
 							title="Remove bookmark"
 							onclick={() => (bookmarks = bookmarks.filter((item) => item.name !== name))}
 						>
-							<Icon src={Trash} class="h-4 w-4" />
+							<iconify-icon height="1.5rem" icon="mdi:trash-outline"></iconify-icon>
 						</Button>
 					</span>
 				{:else}

diff --git a/src/routes/effects/crt/main.scss b/src/routes/effects/crt/main.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 canvas {
 	position: absolute;
 	left: 0;
@@ -75,14 +76,14 @@ $screen-background: #121010;
 	@include fill;
 	z-index: 9999;
 	background: linear-gradient(
-			transparentize($screen-background, 1) 50%,
-			transparentize(darken($screen-background, 10), 0.75) 50%
+			color.adjust($screen-background, $alpha: -1) 50%,
+			color.adjust(color.adjust($screen-background, $lightness: -10), $alpha: -0.75) 50%
 		),
 		linear-gradient(
 			90deg,
-			transparentize(#ff0000, 0.94),
-			transparentize(#00ff00, 0.98),
-			transparentize(#0000ff, 0.94)
+			color.adjust(#ff0000, $alpha: -0.94),
+			color.adjust(#00ff00, $alpha: -0.98),
+			color.adjust(#0000ff, $alpha: -0.94)
 		);
 	background-size:
 		100% 2px,