@nil-/doc 0.2.41 → 0.2.42

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nil-/doc
 
+## 0.2.42
+
+### Patch Changes
+
+-   [doc][new] added theme store in sveltekit to retain used theme ([#67](https://github.com/njaldea/mono/pull/67))
+
 ## 0.2.41
 
 ### Patch Changes

package/components/Layout.svelte

@@ -97,6 +97,13 @@ const parentTheme = getTheme();
 const dark = initTheme();
 $:
   $dark = theme === void 0 ? $parentTheme : "dark" === theme;
+const toggle = () => {
+  if (theme !== void 0) {
+    theme = $dark ? "light" : "dark";
+  } else {
+    $dark = !$dark;
+  }
+};
 </script>
 <!--
     @component
@@ -105,7 +112,7 @@ $:
 <div class="layout" class:dark={$dark}>
     <div class="top">
         <slot name="title"><span>@nil-/doc</span></slot>
-        <div class="icon" on:click={() => ($dark = !$dark)} on:keypress={null}>
+        <div class="icon" on:click={toggle} on:keypress={null}>
             <ThemeIcon bind:dark={$dark} />
         </div>
         <div

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.41",
+  "version": "0.2.42",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
@@ -8,15 +8,15 @@
   "license": "ISC",
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^1.0.0",
-    "@sveltejs/kit": "^1.0.1",
-    "@sveltejs/package": "^1.0.1",
+    "@sveltejs/kit": "^1.0.5",
+    "@sveltejs/package": "^1.0.2",
     "@vitest/coverage-c8": "^0.26.3",
     "mdsvex": "^0.10.6",
     "remark-admonitions": "^1.2.1",
     "svelte-check": "^2.10.3",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
-    "vite": "^4.0.3",
+    "vite": "^4.0.4",
     "vitest": "^0.26.3"
   },
   "peerDependencies": {

package/sveltekit/index.d.ts

@@ -1,5 +1,6 @@
-import { type Readable } from "svelte/store";
-type Routes = {
+import { type Readable, type Writable } from "svelte/store";
+import type { Theme } from "../components/context";
+type Settings = {
     /**
      * List of routes
      */
@@ -13,12 +14,17 @@ type Routes = {
      * @param e - event that contains detail about the target url
      */
     navigate: (e: CustomEvent<string>) => Promise<void>;
+    /**
+     * A store that is responsible in keeping the theme in localStorage
+     * Default is "dark"
+     */
+    theme: Writable<Exclude<Theme, undefined>>;
 };
 /**
  * Dedicated helper method to be used for sveltekit
  * @param detail - vite's `import.meta.glob(..., { eager: true })`
  * @param prefix - only use when layout is not in the root route
- * @returns Routes
+ * @returns Settings
  */
-export declare const sveltekit: (detail: Record<string, unknown>, prefix?: string | null) => Routes;
+export declare const sveltekit: (detail: Record<string, unknown>, prefix?: string | null) => Settings;
 export {};

package/sveltekit/index.js

@@ -1,6 +1,7 @@
-import { derived } from "svelte/store";
+import { derived, writable } from "svelte/store";
 import { page } from "$app/stores";
 import { goto } from "$app/navigation";
+import { browser } from "$app/environment";
 const toRoute = (p) => p.substring(1, p.lastIndexOf("/"));
 const routeHasLayoutGroup = /\(.*\)/;
 const collapseLayout = (p) => p
@@ -14,22 +15,30 @@ const isRouteDynamic = (p) => null == routeIsDynamic.exec(p);
  * Dedicated helper method to be used for sveltekit
  * @param detail - vite's `import.meta.glob(..., { eager: true })`
  * @param prefix - only use when layout is not in the root route
- * @returns Routes
+ * @returns Settings
  */
-export const sveltekit = (detail, prefix = null) => ({
-    data: Object.keys(detail)
-        .map(toRoute)
-        .map(collapseLayout)
-        .filter(isNotRoot)
-        .filter(isRouteDynamic),
-    current: derived(page, ($page) => {
-        if ($page.route.id) {
-            if (prefix) {
-                return collapseLayout($page.route.id.substring(prefix.length));
+export const sveltekit = (detail, prefix = null) => {
+    const key = "@nil-/doc/theme";
+    const initialValue = browser && "light" === localStorage.getItem(key) ? "light" : "dark";
+    const theme = writable(initialValue);
+    theme.subscribe((v) => browser && localStorage.setItem(key, v));
+    const result = {
+        data: Object.keys(detail)
+            .map(toRoute)
+            .map(collapseLayout)
+            .filter(isNotRoot)
+            .filter(isRouteDynamic),
+        current: derived(page, ($page) => {
+            if ($page.route.id) {
+                if (prefix) {
+                    return collapseLayout($page.route.id.substring(prefix.length));
+                }
+                return collapseLayout($page.route.id);
             }
-            return collapseLayout($page.route.id);
-        }
-        return null;
-    }),
-    navigate: prefix ? (e) => goto(`${prefix}${e.detail}`) : (e) => goto(e.detail)
-});
+            return null;
+        }),
+        navigate: prefix ? (e) => goto(`${prefix}${e.detail}`) : (e) => goto(e.detail),
+        theme
+    };
+    return result;
+};