@nil-/doc 0.2.23 → 0.2.25

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nil-/doc
 
+## 0.2.25
+
+### Patch Changes
+
+-   186187c: [doc][breaking] removed layout slot prop for content. all unnamed slots will be part of the default slot
+-   186187c: [doc] fix range tooltip styling
+-   a82c0de: [doc] support dark/light mode
+
+## 0.2.24
+
+### Patch Changes
+
+-   782e6fa: [doc][breaking] simplified sveltekit glue layer
+-   782e6fa: [doc] added documentation to public methods
+
 ## 0.2.23
 
 ### Patch Changes

package/components/Layout.svelte

@@ -2,8 +2,6 @@
     .layout {
         width: 100%;
         height: 100%;
-        color: rgb(201, 205, 207);
-        background-color: rgb(34, 36, 37);
         font-family: "Fira Code", "Courier New", Courier, monospace;
     }
 
@@ -38,18 +36,35 @@
     .scrollable::-webkit-scrollbar {
         display: none;
     }
+
+    /* colors */
+    .layout {
+        background-color: hsl(0, 0%, 100%);
+        color: hsl(0, 100%, 0%);
+        color-scheme: light;
+    }
+
+    .layout.dark {
+        background-color: hsl(200, 4%, 14%);
+        color: hsl(200, 6%, 80%);
+        color-scheme: dark;
+    }
 </style>
 
 <script>import Container from "./etc/Container.svelte";
 import Nav from "./navigation/Nav.svelte";
-import { inRoot } from "./context";
+import { inRoot, getTheme, initTheme, evalTheme } from "./context";
 export let data;
 export let current = null;
 export let sorter = null;
 export let renamer = null;
+export let theme = undefined;
 const r = inRoot();
+const parentTheme = getTheme();
+const isDark = initTheme();
+$: $isDark = evalTheme(parentTheme ? $parentTheme : true, theme);
 </script>
-<div class="layout" class:reset={r}>
+<div class="layout" class:reset={r} class:dark={$isDark}>
     <Container offset={250} padding={250} vertical secondary>
         <svelte:fragment slot="primary">
             <div class="content scrollable">
@@ -67,7 +82,7 @@ const r = inRoot();
         <svelte:fragment slot="secondary">
             <div class="content scrollable">
                 {#key current}
-                    <slot name="content" />
+                    <slot />
                 {/key}
             </div>
         </svelte:fragment>

package/components/Layout.svelte.d.ts

@@ -1,11 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Sorter, Renamer } from "./navigation/types";
+import { type Theme } from "./context";
 declare const __propDef: {
     props: {
         data: string[];
         current?: string | null | undefined;
         sorter?: Sorter | null | undefined;
         renamer?: Renamer | null | undefined;
+        theme?: Theme;
     };
     events: {
         navigate: CustomEvent<any>;
@@ -14,7 +16,7 @@ declare const __propDef: {
     };
     slots: {
         title: {};
-        content: {};
+        default: {};
     };
 };
 export type LayoutProps = typeof __propDef.props;

package/components/block/Block.svelte

@@ -1,12 +1,3 @@
-<script>import { initParams, initCurrent, initDefaults, initControls, initControlsState } from "./context";
-import { inRoot } from "../context";
-initParams();
-initCurrent();
-initDefaults();
-initControls();
-initControlsState();
-const r = inRoot();
-</script>
 <style>
     div {
         display: flex;
@@ -26,10 +17,33 @@ const r = inRoot();
         box-sizing: border-box;
         font-family: "Fira Code", "Courier New", Courier, monospace;
     }
-</style>
 
+    /* colors */
+    div {
+        color-scheme: light;
+        color: hsl(0, 100%, 0%);
+    }
+
+    div.dark {
+        color-scheme: dark;
+        color: hsl(200, 6%, 80%);
+    }
+</style>
 
-<div class:reset={r}>
+<script>import { initParams, initCurrent, initDefaults, initControls, initControlsState } from "./context";
+import { inRoot, getTheme, initTheme, evalTheme } from "../context";
+initParams();
+initCurrent();
+initDefaults();
+initControls();
+initControlsState();
+const r = inRoot();
+export let theme = undefined;
+const parentTheme = getTheme();
+const isDark = initTheme();
+$: $isDark = evalTheme(parentTheme ? $parentTheme : false, theme);
+</script>
+<div class:reset={r} class:dark={$isDark}>
     <slot />
 </div>
 

package/components/block/Block.svelte.d.ts

@@ -1,6 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import { type Theme } from "../context";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        theme?: Theme;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/block/Template.svelte

@@ -21,12 +21,9 @@
     .content {
         min-height: 100px;
         border-radius: 5px 5px 5px 5px;
-        border: rgb(100, 96, 96) solid 1px;
-        background-color: rgb(33, 36, 37);
     }
 
     .misc {
-        outline: rgb(100, 96, 96) solid 1px;
         border-bottom-left-radius: 5px;
         border-bottom-right-radius: 5px;
         user-select: none;
@@ -46,12 +43,32 @@
     .scrollable::-webkit-scrollbar {
         display: none;
     }
+
+    /* colors */
+    .content {
+        border: hsl(0, 2%, 60%) solid 1px;
+        background-color: hsl(0, 0%, 100%);
+    }
+
+    .misc {
+        border: hsl(0, 2%, 60%) solid 1px;
+    }
+
+    .content.dark {
+        border: hsl(0, 2%, 40%) solid 1px;
+        background-color: hsl(200, 4%, 14%);
+    }
+
+    .misc.dark {
+        outline: hsl(0, 2%, 40%) solid 1px;
+    }
 </style>
 <svelte:window on:click={() => ($current = null)} />
 
 <script>import { getParams, getCurrent, getDefaults } from "./context";
 import { getControls, getControlsState } from "./context";
 import { resolve } from "./utils";
+import { getTheme } from "../context";
 import Controls from "./controls/Controls.svelte";
 import { beforeUpdate } from "svelte";
 import { slide } from "svelte/transition";
@@ -60,6 +77,7 @@ const current = getCurrent();
 const controls = getControls();
 const controlsState = getControlsState();
 const defaultsStore = getDefaults();
+const isDark = getTheme();
 export let defaults = undefined;
 export let noreset = false;
 export let columns = false;
@@ -94,7 +112,7 @@ const resolveArgs = (resolve);
             on:keypress={null}
         >
             {#if noreset}
-                <div class="content scrollable">
+                <div class="content scrollable" class:dark={$isDark}>
                     <slot
                         id={param.id}
                         tag={param.tag}
@@ -104,7 +122,7 @@ const resolveArgs = (resolve);
                 </div>
             {:else}
                 {#key key}
-                    <div class="content scrollable">
+                    <div class="content scrollable" class:dark={$isDark}>
                         <slot
                             id={param.id}
                             tag={param.tag}
@@ -115,7 +133,7 @@ const resolveArgs = (resolve);
                 {/key}
             {/if}
             {#if $controls.length > 0 && ($controlsState.expand || $current === param.id || hovered === param.id)}
-                <div class="misc scrollable" transition:slide|local>
+                <div class="misc scrollable" class:dark={$isDark} transition:slide|local>
                     <Controls infos={$controls} bind:values={param.values} />
                 </div>
             {/if}

package/components/block/controls/misc/Styler.svelte

@@ -1,3 +1,6 @@
+<script>import { getTheme } from "../../../context";
+const isDark = getTheme();
+</script>
 <style>
     div {
         width: 100%;
@@ -8,7 +11,9 @@
         box-sizing: border-box;
     }
 
-    div :global(*) {
+    div :global(*),
+    div :global(*::before),
+    div :global(*::after) {
         box-sizing: inherit;
     }
 
@@ -17,16 +22,6 @@
         display: grid;
         padding: 2px 0px;
         grid-template-columns: minmax(250px, 1fr) 200px 40px;
-        background-color: hsl(205, 50%, 5%);
-    }
-
-    div > :global(div:nth-child(even)) {
-        background-color: hsl(205, 15%, 15%);
-    }
-
-    div > :global(div:hover .tooltip),
-    div > :global(div:nth-child(n + 2):hover) {
-        background-color: hsl(203, 100%, 15%);
     }
 
     div > :global(div > div) {
@@ -38,9 +33,45 @@
         width: 100%;
         height: 100%;
     }
+
+    /* colors */
+    div > :global(div) {
+        background-color: hsl(0, 0%, 100%);
+    }
+
+    div > :global(div:nth-child(even)) {
+        background-color: hsl(210, 29%, 97%);
+    }
+
+    div > :global(div:nth-child(n + 2):hover) {
+        background-color: hsl(210, 100%, 90%);
+    }
+
+    div > :global(div:hover .tooltip) {
+        background-color: hsl(0, 0%, 100%);
+        outline: hsl(0, 100%, 0%) 1px solid;
+    }
+
+    div.dark > :global(div) {
+        background-color: hsl(213, 26%, 7%);
+    }
+
+    div.dark > :global(div:nth-child(even)) {
+        background-color: hsl(213, 26%, 11%);
+    }
+
+    div.dark > :global(div:nth-child(n + 2):hover) {
+        background-color: hsl(203, 100%, 15%);
+    }
+
+    div.dark > :global(div:hover .tooltip) {
+        background-color: hsl(213, 26%, 7%);
+        outline: hsl(200, 6%, 80%) 1px solid;
+    }
 </style>
 
-<div>
+
+<div class:dark={$isDark}>
     <slot />
 </div>
 

package/components/block/controls/misc/Styler.svelte.d.ts

@@ -1,22 +1,6 @@
-/** @typedef {typeof __propDef.props}  StylerProps */
-/** @typedef {typeof __propDef.events}  StylerEvents */
-/** @typedef {typeof __propDef.slots}  StylerSlots */
-export default class Styler extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type StylerProps = typeof __propDef.props;
-export type StylerEvents = typeof __propDef.events;
-export type StylerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -24,4 +8,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type StylerProps = typeof __propDef.props;
+export type StylerEvents = typeof __propDef.events;
+export type StylerSlots = typeof __propDef.slots;
+export default class Styler extends SvelteComponentTyped<StylerProps, StylerEvents, StylerSlots> {
+}
 export {};

package/components/context.d.ts

@@ -1 +1,6 @@
+import type { Writable } from "svelte/store";
 export declare function inRoot(): boolean;
+export type Theme = undefined | "light" | "dark";
+export declare function getTheme(): Writable<boolean>;
+export declare function initTheme(): Writable<boolean>;
+export declare function evalTheme(parent: boolean, theme: Theme): boolean;

package/components/context.js

@@ -1,7 +1,18 @@
 import { setContext, getContext } from "svelte";
+import { writable } from "svelte/store";
 const root = Symbol();
 export function inRoot() {
     const value = getContext(root);
     setContext(root, false);
     return value !== false;
 }
+const theme = Symbol();
+export function getTheme() {
+    return getContext(theme);
+}
+export function initTheme() {
+    return setContext(theme, writable(true));
+}
+export function evalTheme(parent, theme) {
+    return theme === undefined ? parent : theme === "dark";
+}

package/components/etc/Container.svelte

@@ -28,11 +28,6 @@
         overflow: visible;
         user-select: none;
         grid-area: divider;
-        outline: rgb(100, 96, 96) solid 1px;
-    }
-
-    .container > .divider.moving {
-        outline: rgb(255, 255, 255) solid 1px;
     }
 
     .container > .divider.vertical {
@@ -54,10 +49,29 @@
         cursor: col-resize;
         transform: translateX(-50%);
     }
+
+    /* colors */
+    .container > .divider {
+        outline: hsl(0, 2%, 70%) solid 1px;
+    }
+
+    .container > .divider.moving {
+        outline: hsl(0, 0%, 0%) solid 1px;
+    }
+
+    .container.dark > .divider {
+        outline: hsl(0, 2%, 38%) solid 1px;
+    }
+
+    .container.dark > .divider.moving {
+        outline: hsl(0, 0%, 100%) solid 1px;
+    }
 </style>
 
 <script>import { writable } from "svelte/store";
 import { createDraggable } from "./action";
+import { getTheme } from "../context";
+const isDark = getTheme();
 // orientation of the layout
 export let vertical = false;
 // initial value where the divider is located
@@ -86,6 +100,7 @@ const moving = writable(false);
 <div
     class="container"
     class:vertical
+    class:dark={$isDark}
     bind:clientHeight={height}
     bind:clientWidth={width}
     style:grid-template-columns={vertical ? style : null}

package/components/navigation/utils.d.ts

@@ -1,5 +1,27 @@
 import type { Tree, Sorter, Renamer } from "./types";
+/**
+ * Compares two texts for sorting.
+ *
+ * If the texts follows `<I>-<Name>` format,
+ * sorting is done by comparing the numbers in the prefix.
+ *
+ * If only one of the texts follows `<I>-<Name>` format,
+ * the text that follows the format is considered as higher in order.
+ *
+ * Else comparison is done using built-in `string` comparison.
+ *
+ * @param {string} l
+ * @param {string} r
+ * @returns `-1 | 0 | +1`
+ */
 declare const sorter: Sorter;
+/**
+ * If a text follows `<I>-<Name>` format,
+ * this method simply removes the Prefix.
+ *
+ * @param {string} text
+ * @returns `<Name>`
+ */
 declare const renamer: Renamer;
 export declare function sort(t: Record<string, Tree>, order: (l: string, r: string) => 1 | 0 | -1): [string, Tree][];
 export { sorter, renamer };

package/components/navigation/utils.js

@@ -8,6 +8,21 @@ function sorterT(l, r) {
     }
     return 0;
 }
+/**
+ * Compares two texts for sorting.
+ *
+ * If the texts follows `<I>-<Name>` format,
+ * sorting is done by comparing the numbers in the prefix.
+ *
+ * If only one of the texts follows `<I>-<Name>` format,
+ * the text that follows the format is considered as higher in order.
+ *
+ * Else comparison is done using built-in `string` comparison.
+ *
+ * @param {string} l
+ * @param {string} r
+ * @returns `-1 | 0 | +1`
+ */
 const sorter = (l, r) => {
     const lmatch = match.exec(l);
     const rmatch = match.exec(r);
@@ -22,12 +37,19 @@ const sorter = (l, r) => {
     }
     return sorterT(parseInt(lmatch[1]), parseInt(rmatch[1]));
 };
-const renamer = (t) => {
-    const m = match.exec(t);
+/**
+ * If a text follows `<I>-<Name>` format,
+ * this method simply removes the Prefix.
+ *
+ * @param {string} text
+ * @returns `<Name>`
+ */
+const renamer = (text) => {
+    const m = match.exec(text);
     if (m) {
         return m[2];
     }
-    return t;
+    return text;
 };
 export function sort(t, order) {
     return Object.entries(t).sort(([l], [r]) => order(l, r));

package/index.d.ts

@@ -1,4 +1,3 @@
-export { routes } from "./components/routes";
 export { renamer, sorter } from "./components/navigation/utils";
 export type { Control } from "./components/block/controls/types";
 export { default as Layout } from "./components/Layout.svelte";

package/index.js

@@ -1,4 +1,3 @@
-export { routes } from "./components/routes";
 export { renamer, sorter } from "./components/navigation/utils";
 export { default as Layout } from "./components/Layout.svelte";
 export { default as Block } from "./components/block/Block.svelte";

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.23",
+  "version": "0.2.25",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
   },
   "peerDependencies": {
-    "svelte": "^3.54.0"
+    "svelte": "^3.55.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^1.0.0",
-    "@sveltejs/kit": "^1.0.0",
-    "@sveltejs/package": "^1.0.0",
+    "@sveltejs/kit": "^1.0.1",
+    "@sveltejs/package": "^1.0.1",
     "mdsvex": "^0.10.6",
     "svelte-check": "^2.10.2",
     "svelte-markdown": "^0.2.3",
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
-    "vite": "^4.0.0"
+    "vite": "^4.0.1"
   },
   "type": "module",
   "publishConfig": {
@@ -32,7 +32,8 @@
   "license": "ISC",
   "exports": {
     "./package.json": "./package.json",
-    ".": "./index.js"
+    ".": "./index.js",
+    "./sveltekit": "./sveltekit/index.js"
   },
   "svelte": "./index.js"
 }

package/sveltekit/index.d.ts

@@ -0,0 +1,22 @@
+import { type Readable } from "svelte/store";
+type Routes = {
+    /**
+     * Routes
+     */
+    data: string[];
+    /**
+     * Removes unneeded group layout in the route
+     * @param {string} route
+     * @returns
+     */
+    current: Readable<string | null>;
+    navigate: (e: CustomEvent<string>) => void;
+};
+/**
+ * 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
+ */
+export declare function sveltekit(detail: Record<string, unknown>, prefix?: string | null): Routes;
+export {};

package/sveltekit/index.js

@@ -0,0 +1,47 @@
+import { derived } from "svelte/store";
+import { page } from "$app/stores";
+import { goto } from "$app/navigation";
+const PREFIX = ".";
+const SUFFIX = "/+page.svelte";
+function toRoute(p) {
+    return p.substring(PREFIX.length, p.length - SUFFIX.length);
+}
+const route_advanced_layout_match = /\(.*\)/;
+function collapseLayout(p) {
+    return p
+        .split("/")
+        .filter((p) => route_advanced_layout_match.exec(p) == null)
+        .join("/");
+}
+function isNotRoot(p) {
+    return p !== "/";
+}
+const route_rest_match = /.*\[.*\].*/;
+function isRouteDynamic(p) {
+    return route_rest_match.exec(p) == null;
+}
+/**
+ * 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
+ */
+export function sveltekit(detail, prefix = null) {
+    return {
+        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 null;
+        }),
+        navigate: prefix ? (e) => goto(`${prefix}${e.detail}`) : (e) => goto(e.detail)
+    };
+}

package/components/routes.d.ts

@@ -1,6 +0,0 @@
-type Routes = {
-    data: string[];
-    process: (r: string | null) => string | null;
-};
-export declare function routes(files_from_import_meta: Record<string, unknown>): Routes;
-export {};

package/components/routes.js

@@ -1,29 +0,0 @@
-const prefix = ".".length;
-const suffix = "/+page.svelte".length;
-function toRoute(p) {
-    return p.substring(prefix, p.length - suffix);
-}
-const route_advanced_layout_match = /\(.*\)/;
-function collapseLayout(p) {
-    return p
-        .split("/")
-        .filter((p) => route_advanced_layout_match.exec(p) == null)
-        .join("/");
-}
-function isNotRoot(p) {
-    return p !== "/";
-}
-const route_rest_match = /.*\[.*\].*/;
-function isRouteDynamic(p) {
-    return route_rest_match.exec(p) == null;
-}
-export function routes(files_from_import_meta) {
-    return {
-        data: Object.keys(files_from_import_meta)
-            .map(toRoute)
-            .map(collapseLayout)
-            .filter(isNotRoot)
-            .filter(isRouteDynamic),
-        process: (r) => (r ? collapseLayout(r) : null)
-    };
-}