ryanatkn · ryanatkn · Jul 6, 2024 · Jul 5, 2024 · Jul 5, 2024 · Jul 5, 2024
diff --git a/.changeset/modern-singers-watch.md b/.changeset/modern-singers-watch.md
@@ -0,0 +1,5 @@
+---
+'@ryanatkn/fuz': patch
+---
+
+fix ssr
diff --git a/.changeset/new-berries-sleep.md b/.changeset/new-berries-sleep.md
@@ -0,0 +1,9 @@
+---
+'@ryanatkn/fuz': minor
+---
+
+rework `Themed.svelte`
+
+- move some helpers from `Themed.svelte` to `theme.ts`
+- replace `get_theme` and `get_color_scheme` with `get_themer`
+- remove `Themed_Scope.svelte` for now because it's too broken
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,9 +45,9 @@
     "@ryanatkn/eslint-config": "^0.4.0",
     "@ryanatkn/fuz_code": "^0.15.0",
     "@ryanatkn/gro": "^0.129.0",
-    "@ryanatkn/moss": "^0.6.3",
+    "@ryanatkn/moss": "^0.7.0",
     "@sveltejs/adapter-static": "^3.0.2",
-    "@sveltejs/kit": "^2.5.17",
+    "@sveltejs/kit": "^2.5.18",
     "@sveltejs/package": "^2.3.2",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@types/node": "^20.14.8",
@@ -59,7 +59,7 @@
     "prettier-plugin-svelte": "^3.2.5",
     "prism-svelte": "^0.5.0",
     "prismjs": "^1.29.0",
-    "svelte": "^5.0.0-next.164",
+    "svelte": "^5.0.0-next.175",
     "svelte-check": "^3.8.2",
     "tslib": "^2.6.3",
     "typescript": "^5.5.2",
@@ -324,14 +324,9 @@
       "svelte": "./dist/Theme_Input.svelte",
       "default": "./dist/Theme_Input.svelte"
     },
-    "./theme.js": {
-      "types": "./dist/theme.d.ts",
-      "default": "./dist/theme.js"
-    },
-    "./Themed_Scope.svelte": {
-      "types": "./dist/Themed_Scope.svelte.d.ts",
-      "svelte": "./dist/Themed_Scope.svelte",
-      "default": "./dist/Themed_Scope.svelte"
+    "./theme.svelte.js": {
+      "types": "./dist/theme.svelte.d.ts",
+      "default": "./dist/theme.svelte.js"
     },
     "./Themed.svelte": {
       "types": "./dist/Themed.svelte.d.ts",

diff --git a/src/app.html b/src/app.html
@@ -8,7 +8,6 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<noscript>This website temporarily requires JS until some bugs get fixed.</noscript>
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/Color_Scheme_Input.svelte b/src/lib/Color_Scheme_Input.svelte
@@ -1,30 +1,27 @@
 <script lang="ts">
-	import type {Writable} from 'svelte/store';
 	import {swallow} from '@ryanatkn/belt/dom.js';
 	import {color_schemes, type Color_Scheme} from '@ryanatkn/moss/theme.js';
 
-	import {get_color_scheme} from '$lib/Themed.svelte';
+	import {get_themer} from '$lib/theme.svelte.js';
 
 	interface Props {
-		selected_color_scheme?: Writable<Color_Scheme | null>;
-		select?: ((color_scheme: Color_Scheme) => void | boolean) | null;
-		onselect?: (color_scheme: Color_Scheme) => void;
+		value?: {color_scheme: Color_Scheme};
+		onchange?: (color_scheme: Color_Scheme) => void;
 	}
 
 	const {
-		selected_color_scheme = get_color_scheme(),
-		select = (color_scheme) => {
-			$selected_color_scheme = color_scheme;
+		value = get_themer(),
+		onchange = (color_scheme) => {
+			value.color_scheme = color_scheme; // won't work with POJOs but users could provide their own onchange in that case
 		},
-		onselect,
 	}: Props = $props();
 </script>
 
 <!-- TODO maybe support menubar aria
 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_role -->
 <menu class="color_scheme_control unstyled">
 	{#each color_schemes as color_scheme (color_scheme)}
-		{@const selected = color_scheme === $selected_color_scheme}
+		{@const selected = color_scheme === value.color_scheme}
 		<button
 			class="color_scheme"
 			type="button"
@@ -36,9 +33,7 @@ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_ro
 			aria-checked={selected}
 			onclick={(e) => {
 				swallow(e);
-				if (select?.(color_scheme) !== false) {
-					onselect?.(color_scheme);
-				}
+				onchange(color_scheme);
 			}}
 		>
 			<div class="content">{color_scheme}</div>

diff --git a/src/lib/Mdn_Link.svelte b/src/lib/Mdn_Link.svelte
@@ -25,12 +25,11 @@
 	const final_children = $derived(children ?? strip_end(path, '/').split('/').at(-1)!);
 </script>
 
-<a {...attrs} {href} class="chip nowrap">
-	<Mdn_Logo
-		classes="inline_block mr_sm vertical_align_middle"
-	/>{#if typeof final_children === 'string'}
+<a {...attrs} {href} class="chip nowrap"
+	>{#if typeof final_children === 'string'}
 		<span class="font_mono">{final_children}</span>
 	{:else}
 		{@render final_children()}
 	{/if}
-</a>
+	<Mdn_Logo classes="inline_block mx_xs3 vertical_align_middle" /></a
+>
diff --git a/src/lib/Theme_Input.svelte b/src/lib/Theme_Input.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-	import type {Readable} from 'svelte/store';
 	import {swallow} from '@ryanatkn/belt/dom.js';
 	import type {Theme} from '@ryanatkn/moss/theme.js';
 	import {default_themes} from '@ryanatkn/moss/themes.js';
 
-	import {get_theme} from '$lib/Themed.svelte';
+	import {get_themer} from '$lib/theme.svelte.js';
 
 	interface Props {
-		selected_theme?: Readable<Theme | null>;
+		selected_theme?: {theme: Theme};
 		themes?: Theme[];
 		enable_editing?: boolean;
 		select?: ((theme: Theme) => void | boolean) | null;
@@ -16,23 +15,21 @@
 	}
 
 	const {
-		selected_theme = get_theme(),
+		selected_theme = get_themer(),
 		themes = default_themes,
 		enable_editing = false,
 		select = (theme) => {
-			$selected_theme = theme;
+			selected_theme.theme = theme;
 		},
 		onselect,
 		onedit,
 	}: Props = $props();
-
-	const selected_theme_name = $derived($selected_theme?.name);
 </script>
 
 <menu class="theme_input unstyled">
 	{#each themes as theme (theme.name)}
 		<!-- TODO @multiple proper equality check, won't work when we allow editing, need an id or unique names and a deep equality check -->
-		{@const selected = theme.name === selected_theme_name}
+		{@const selected = theme.name === selected_theme.theme.name}
 		<li class="row" role="none">
 			<button
 				type="button"