@nil-/doc 0.2.30 → 0.2.32

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nil-/doc
 
+## 0.2.32
+
+### Patch Changes
+
+-   [doc] relaxed file extension for sveltekit helper ([#47](https://github.com/njaldea/mono/pull/47))
+
+## 0.2.31
+
+### Patch Changes
+
+-   [doc] better container style ([#45](https://github.com/njaldea/mono/pull/45))
+
+-   [doc] improved ThemeIcon ([#45](https://github.com/njaldea/mono/pull/45))
+
 ## 0.2.30
 
 ### Patch Changes

package/components/Layout.svelte

@@ -70,6 +70,8 @@
     }
 </style>
 
+<script context="module">const defaultSorter = (l, r) => l.localeCompare(r);
+</script>
 <script>import Container from "./etc/Container.svelte";
 import Nav from "./navigation/Nav.svelte";
 import { inRoot, getTheme, initTheme, evalTheme } from "./context";
@@ -90,13 +92,13 @@ $:
         <slot name="title"><span>@nil-/doc</span></slot>
         <ThemeIcon bind:dark={$isDark} />
     </div>
-    <Container offset={250} padding={250} vertical secondary>
+    <Container offset={250} vertical secondary>
         <svelte:fragment slot="primary">
             <div class="content scrollable">
                 <Nav
                     info={data}
                     selected={current ?? ""}
-                    sorter={sorter ?? ((l, r) => (l === r ? 0 : l < r ? -1 : +1))}
+                    sorter={sorter ?? defaultSorter}
                     renamer={renamer ?? ((s) => s)}
                     on:navigate
                 />

package/components/block/Template.svelte

@@ -81,10 +81,10 @@ const isDark = getTheme();
 export let defaults = void 0;
 export let noreset = false;
 export let columns = false;
-function reset() {
+const reset = () => {
   $params = [];
   $defaultsStore = defaults;
-}
+};
 $:
   $defaultsStore, reset();
 let hovered = null;

package/components/block/context.js

@@ -1,12 +1,12 @@
 import { getContext, setContext } from "svelte";
 import { writable } from "svelte/store";
-function create(defaulter) {
+const create = (defaulter) => {
     const symbol = Symbol();
     return {
         init: () => setContext(symbol, writable(defaulter())),
         get: () => getContext(symbol)
     };
-}
+};
 export const { init: initCurrent, get: getCurrent } = create(() => null);
 export const { init: initParams, get: getParams } = create(() => []);
 export const { init: initControls, get: getControls } = create(() => []);

package/components/block/controls/Component.svelte

@@ -11,18 +11,18 @@ export let info;
 export let depth;
 export let disabled = false;
 </script>
-{#if info.type === "object"}
+{#if "object" === info.type}
     <Object {info} bind:value {depth} {disabled} />
-{:else if info.type === "tuple"}
+{:else if "tuple" === info.type}
     <Tuple {info} bind:value {depth} {disabled} />
-{:else if info.type === "text"}
+{:else if "text" === info.type}
     <Text {info} bind:value {depth} {disabled} />
-{:else if info.type === "number"}
+{:else if "number" === info.type}
     <Number {info} bind:value {depth} {disabled} />
-{:else if info.type === "range"}
+{:else if "range" === info.type}
     <Range {info} bind:value {depth} {disabled} />
-{:else if info.type === "select"}
+{:else if "select" === info.type}
     <Select {info} bind:value {depth} {disabled} />
-{:else if info.type === "switch"}
+{:else if "switch" === info.type}
     <Switch {info} bind:value {depth} {disabled} />
 {/if}

package/components/block/controls/Number.svelte

@@ -10,7 +10,7 @@ $:
   value = enabled && !disabled ? ivalue : void 0;
 </script>
 <div>
-    <div style:padding-left={`${depth}px`}>- {info.name}</div>
+    <div style:padding-left={`${depth}px`} title={info.name}>- {info.name}</div>
     <div><input type="number" bind:value={ivalue} disabled={!enabled || disabled} /></div>
     <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
 </div>

package/components/block/controls/Range.svelte

@@ -43,7 +43,7 @@ $:
   value = enabled && !disabled ? ivalue : void 0;
 </script>
 <div>
-    <div style:padding-left={`${depth}px`}>- {info.name}</div>
+    <div style:padding-left={`${depth}px`} title={info.name}>- {info.name}</div>
     <div class="input">
         <div class="tooltip">
             Current Value: {ivalue}

package/components/block/controls/Select.svelte

@@ -10,7 +10,7 @@ $:
   value = enabled && !disabled ? ivalue : void 0;
 </script>
 <div>
-    <div style:padding-left={`${depth}px`}>- {info.name}</div>
+    <div style:padding-left={`${depth}px`} title={info.name}>- {info.name}</div>
     <div>
         <select bind:value={ivalue} disabled={!enabled || disabled}>
             {#each info.values as value}

package/components/block/controls/Switch.svelte

@@ -10,7 +10,7 @@ $:
   value = enabled && !disabled ? ivalue : void 0;
 </script>
 <div>
-    <div style:padding-left={`${depth}px`}>- {info.name}</div>
+    <div style:padding-left={`${depth}px`} title={info.name}>- {info.name}</div>
     <div><input type="checkbox" bind:checked={ivalue} disabled={!enabled || disabled} /></div>
     <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
 </div>

package/components/block/controls/Text.svelte

@@ -10,7 +10,7 @@ $:
   value = ienabled && !disabled ? ivalue : void 0;
 </script>
 <div>
-    <div style:padding-left={`${depth}px`}>- {info.name}</div>
+    <div style:padding-left={`${depth}px`} title={info.name}>- {info.name}</div>
     <div><input type="text" bind:value={ivalue} disabled={!ienabled || disabled} /></div>
     <div><input type="checkbox" bind:checked={ienabled} {disabled} /></div>
 </div>

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

@@ -10,7 +10,7 @@ export let checked;
 export let disabled = false;
 </script>
 <div>
-    <div style:padding-left={`${depth}px`}>
+    <div style:padding-left={`${depth}px`} title={name}>
         {`> ${name}`}
     </div>
     <div class="value">-</div>

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

@@ -47,6 +47,14 @@ const isDark = getTheme();
         background-color: hsl(210, 100%, 90%);
     }
 
+    div > :global(div:nth-child(n + 2) > div:first-child) {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding-right: 10px;
+        display: block;
+    }
+
     div > :global(div:hover .tooltip) {
         background-color: hsl(0, 0%, 100%);
         outline: hsl(0, 100%, 0%) 1px solid;

package/components/block/controls/misc/defaulter.d.ts

@@ -1,5 +1,5 @@
 import type { ValueType } from "../../context";
 import type { Control, ControlTuple, ControlObject } from "../types";
-export declare function getObjectDefaults(info: ControlObject): Record<string, ValueType>;
-export declare function getTupleDefaults(i: ControlTuple): ValueType[];
-export declare function getDefault(i: Control): ValueType;
+export declare const getDefault: (i: Control) => ValueType;
+export declare const getObjectDefaults: (info: ControlObject) => Record<string, ValueType>;
+export declare const getTupleDefaults: (i: ControlTuple) => ValueType[];

package/components/block/controls/misc/defaulter.js

@@ -1,38 +1,40 @@
-export function getObjectDefaults(info) {
-    const ret = {};
-    for (const i of info.values) {
-        ret[i.name] = getDefault(i);
-    }
-    return ret;
-}
-export function getTupleDefaults(i) {
-    const ret = [];
-    for (const info of i.values) {
-        ret.push(getDefault(info));
-    }
-    return ret;
-}
-export function getDefault(i) {
-    if (i.type === "switch") {
+export const getDefault = (i) => {
+    if ("switch" === i.type) {
         return false;
     }
-    if (i.type === "number") {
+    if ("number" === i.type) {
         return 0;
     }
-    if (i.type === "range") {
+    if ("range" === i.type) {
         return i.min;
     }
-    if (i.type === "text") {
+    if ("text" === i.type) {
         return "";
     }
-    if (i.type === "select") {
+    if ("select" === i.type) {
         return i.values.length > 0 ? i.values[0] : "";
     }
-    if (i.type === "tuple") {
+    if ("tuple" === i.type) {
+        // eslint-disable-next-line no-use-before-define
         return [...getTupleDefaults(i)];
     }
-    if (i.type === "object") {
+    if ("object" === i.type) {
+        // eslint-disable-next-line no-use-before-define
         return getObjectDefaults(i);
     }
     return undefined;
-}
+};
+export const getObjectDefaults = (info) => {
+    const ret = {};
+    for (const i of info.values) {
+        ret[i.name] = getDefault(i);
+    }
+    return ret;
+};
+export const getTupleDefaults = (i) => {
+    const ret = [];
+    for (const info of i.values) {
+        ret.push(getDefault(info));
+    }
+    return ret;
+};

package/components/block/controls/types.d.ts

@@ -1,22 +1,14 @@
-export type NonNamed<T> = Omit<T, "name">;
-export type NonNamedControl =
-    | NonNamed<ControlTuple>
-    | NonNamed<ControlObject>
-    | NonNamed<ControlText>
-    | NonNamed<ControlNumber>
-    | NonNamed<ControlRange>
-    | NonNamed<ControlSelect>
-    | NonNamed<ControlSwitch>;
-
 export type ControlTuple = {
     name: string;
     type: "tuple";
+    // eslint-disable-next-line no-use-before-define
     values: NonNamedControl[];
 };
 
 export type ControlObject = {
     name: string;
     type: "object";
+    // eslint-disable-next-line no-use-before-define
     values: Control[];
 };
 
@@ -57,3 +49,12 @@ export type Control =
     | ControlRange
     | ControlSelect
     | ControlSwitch;
+
+type NonNamedControl =
+    | Omit<ControlTuple, "name">
+    | Omit<ControlObject, "name">
+    | Omit<ControlText, "name">
+    | Omit<ControlNumber, "name">
+    | Omit<ControlRange, "name">
+    | Omit<ControlSelect, "name">
+    | Omit<ControlSwitch, "name">;

package/components/block/utils.d.ts

@@ -2,5 +2,5 @@ import type { ValueType } from "./context";
 type VTObject = {
     [key: string]: ValueType;
 };
-export declare function resolve<Args>(d: VTObject | undefined, p: VTObject): Args;
+export declare const resolve: <Args>(d: VTObject | undefined, p: VTObject) => Args;
 export {};

package/components/block/utils.js

@@ -1,4 +1,4 @@
-function resolveArray(d, p) {
+const resolveArray = (d, p) => {
     if (d === undefined) {
         return undefined;
     }
@@ -8,6 +8,7 @@ function resolveArray(d, p) {
             ret.push(resolveArray(d[i], p[i] ?? []));
         }
         else if (d[i] instanceof Object) {
+            // eslint-disable-next-line no-use-before-define
             ret.push(resolveObject(d[i], p[i] ?? {}));
         }
         else {
@@ -15,8 +16,8 @@ function resolveArray(d, p) {
         }
     }
     return ret;
-}
-function resolveObject(d, p) {
+};
+const resolveObject = (d, p) => {
     if (d === undefined) {
         return undefined;
     }
@@ -33,7 +34,5 @@ function resolveObject(d, p) {
         }
     }
     return ret;
-}
-export function resolve(d, p) {
-    return resolveObject(d ?? {}, p);
-}
+};
+export const resolve = (d, p) => resolveObject(d ?? {}, p);

package/components/context.d.ts

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

package/components/context.js

@@ -1,18 +1,17 @@
 import { setContext, getContext } from "svelte";
 import { writable } from "svelte/store";
 const root = Symbol();
-export function inRoot() {
+export const 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";
-}
+export const getTheme = () => getContext(theme);
+export const initTheme = () => setContext(theme, writable(true));
+export const evalTheme = (parent, theme) => {
+    if (theme === undefined) {
+        return parent;
+    }
+    return "dark" === theme;
+};

package/components/etc/Container.svelte

@@ -1,4 +1,8 @@
 <style>
+    div {
+        box-sizing: border-box;
+    }
+
     .container {
         width: 100%;
         height: 100%;
@@ -20,110 +24,156 @@
         overflow: hidden;
     }
 
-    /* need higher specificity than above */
     .container > .divider {
         z-index: 10;
-        width: auto;
-        height: 0px;
         overflow: visible;
         user-select: none;
         grid-area: divider;
     }
 
-    .container > .divider.vertical {
-        width: 0px;
-        height: auto;
+    .overlay {
+        touch-action: none;
     }
 
     .container > .divider > .overlay {
         width: 100%;
         height: 20px;
-        cursor: row-resize;
+        cursor: ns-resize;
         transform: translateY(-50%);
-        touch-action: none;
     }
 
-    .container > .divider.vertical > .overlay {
+    .container.vertical > .divider > .overlay {
         width: 20px;
         height: 100%;
-        cursor: col-resize;
+        cursor: ew-resize;
         transform: translateX(-50%);
     }
 
     /* colors */
-    .container > .divider {
-        outline: hsl(0, 2%, 70%) solid 1px;
+    .container {
+        --color-p: hsl(0, 2%, 70%);
+        --color-s: hsl(0, 0%, 0%);
     }
 
-    .container > .divider.moving {
-        outline: hsl(0, 0%, 0%) solid 1px;
+    .container.dark {
+        --color-p: hsl(0, 2%, 38%);
+        --color-s: hsl(0, 0%, 100%);
     }
 
-    .container.dark > .divider {
-        outline: hsl(0, 2%, 38%) solid 1px;
+    .container:not(.vertical) > .divider {
+        border-bottom: var(--color-p) solid 2.5px;
+        border-top: var(--color-p) solid 2.5px;
+        background-color: var(--color-p);
     }
 
-    .container.dark > .divider.moving {
-        outline: hsl(0, 0%, 100%) solid 1px;
+    .container.vertical > .divider {
+        border-right: var(--color-p) solid 2.5px;
+        border-left: var(--color-p) solid 2.5px;
+        background-color: var(--color-p);
+    }
+
+    .container.moving:not(.secondary):not(.vertical) > .divider {
+        border-bottom: var(--color-s) solid 2.5px;
+    }
+
+    .container.moving.secondary:not(.vertical) > .divider {
+        border-top: var(--color-s) solid 2.5px;
+    }
+
+    .container.moving:not(.secondary).vertical > .divider {
+        border-right: var(--color-s) solid 2.5px;
+    }
+
+    .container.moving.vertical.secondary > .divider {
+        border-left: var(--color-s) solid 2.5px;
     }
 </style>
 
 <script>import { writable } from "svelte/store";
+import { tweened } from "svelte/motion";
 import { createDraggable } from "./action";
 import { getTheme } from "../context";
 const isDark = getTheme();
 export let vertical = false;
 export let offset = 0;
 export let secondary = false;
-export let padding = 0;
 let width;
 let height;
-let collapse = false;
 const { position, draggable } = createDraggable(offset);
-function update(w, h, limit, value) {
-  if (w == null || h == null || collapse) {
+$:
+  span = vertical ? width : height;
+const update = (limit, value) => {
+  if (null == span) {
     return;
   }
-  const span = vertical ? w : h;
   offset = Math.max(Math.min(value, span - limit), limit);
-}
+};
+const off = tweened(offset, { duration: 50 });
+let last = [];
 $:
-  update(width, height, padding, $position);
+  update(10, $position);
 $:
-  offsetpx = collapse ? "10px" : `${offset}px`;
+  $off = offset;
 $:
-  style = !secondary ? `auto 0px ${offsetpx}` : `${offsetpx} 0px auto`;
+  style = !secondary ? `auto 5px ${$off}px` : `${$off}px 5px auto`;
 const moving = writable(false);
+const addLast = (v) => {
+  if (v > 10) {
+    if (last.length < 2) {
+      last = [...last, v];
+    } else {
+      last = [last[1], v];
+    }
+  }
+};
+const dbltap = () => {
+  if ($off > 10) {
+    addLast(offset);
+    offset = 10;
+  } else if (last.length > 0) {
+    offset = last.pop();
+  }
+};
+const check = (v, flag, s) => {
+  if (flag) {
+    return v < s - 10;
+  } else {
+    return v > 10;
+  }
+};
 </script>
 <div
     class="container"
     class:vertical
+    class:secondary
     class:dark={$isDark}
-    bind:clientHeight={height}
+    class:moving={$moving}
     bind:clientWidth={width}
+    bind:clientHeight={height}
     style:grid-template-columns={vertical ? style : null}
     style:grid-template-rows={!vertical ? style : null}
 >
     {#if width != null && height != null}
         <div style:grid-area="primary">
-            {#if !collapse || !secondary}
+            {#if check($off, !secondary, span)}
                 <slot name="primary" />
             {/if}
         </div>
-        <div class="divider" class:vertical class:moving={$moving}>
+        <div class="divider">
             <div
                 class="overlay"
                 use:draggable={{
                     reset: () => offset,
                     reversed: !secondary,
                     vertical,
-                    dbltap: () => (collapse = !collapse),
+                    dbltap: dbltap,
+                    tap: () => addLast($off),
                     moving
                 }}
             />
         </div>
         <div style:grid-area="secondary">
-            {#if !collapse || secondary}
+            {#if check($off, secondary, span)}
                 <slot name="secondary" />
             {/if}
         </div>

package/components/etc/Container.svelte.d.ts

@@ -4,7 +4,6 @@ declare const __propDef: {
         vertical?: boolean | undefined;
         offset?: number | undefined;
         secondary?: boolean | undefined;
-        padding?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/etc/ThemeIcon.svelte

@@ -1,78 +1,76 @@
-<script>export let dark = true;
-import { tweened } from "svelte/motion";
-const values = tweened(dark ? vdark : vlight, { duration: 350 });
+<script>import { tweened } from "svelte/motion";
+import { elasticOut } from "svelte/easing";
+export let dark = true;
+const values = tweened(dark ? vdark : vlight, { duration: 1e3, easing: elasticOut });
 $:
-  values.set(dark ? vdark : vlight);
+  $values = dark ? vdark : vlight;
 const index = indexer++;
 </script>
 <style>
     svg {
-        all: unset;
-        width: 50%;
-        height: 50%;
-        margin: auto;
-
         cursor: pointer;
-        color: black;
-        fill: none;
-
+        fill: currentColor;
         stroke: currentColor;
-        stroke-width: 2;
-        stroke-linecap: round;
-        stroke-linejoin: round;
 
         -webkit-tap-highlight-color: transparent;
         -moz-tap-highlight-color: transparent;
         -o-tap-highlight-color: transparent;
-        tap-highlight-color: transparent;
+        /* tap-highlight-color: transparent; */
     }
 
-    svg.dark {
-        color: white;
+    svg,
+    rect {
+        width: 100%;
+        height: 100%;
+    }
+
+    line {
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
     }
 </style>
 
 <script context="module">let indexer = 0;
 const vlight = {
   rotate: 40,
-  mask: {
-    cx: 12,
-    cy: 4
-  },
+  mcy: -8,
   cr: 10,
-  opacity: 0
+  v: 0
 };
 const vdark = {
   rotate: 180,
-  mask: {
-    cx: 30,
-    cy: 0
-  },
+  mcy: -24,
   cr: 5,
-  opacity: 1
+  v: 1
 };
 </script>
 <svg
     class:dark
-    viewBox="0 0 24 24"
-    style={`transform: rotate(${$values.rotate}deg)`}
+    viewBox="-25 -25 50 50"
+    transform={`rotate(${$values.rotate})`}
+    style={`color: hsl(0, 0%, ${$values.v * 100}%);`}
     on:click={() => (dark = !dark)}
     on:keypress={null}
 >
-    <mask id={`theme_icon_${index}`}>
-        <rect x="0" y="0" width="100%" height="100%" fill="white" />
-        <circle cx={$values.mask.cx} cy={$values.mask.cy} r="11" fill="currentColor" />
+    <mask id={`nil_doc_theme_icon_${index}`}>
+        <rect x="-25" y="-25" fill="white" />
+        <circle cy={$values.mcy} r="11" />
     </mask>
-    <circle cx="12" cy="12" r={$values.cr} fill="currentColor" mask={`url(#theme_icon_${index})`} />
-    <g style={`opacity: ${$values.opacity}`}>
-        <line x1="12" y1="1" x2="12" y2="3" />
-        <line x1="12" y1="21" x2="12" y2="23" />
-        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-        <line x1="1" y1="12" x2="3" y2="12" />
-        <line x1="21" y1="12" x2="23" y2="12" />
-        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    <circle r={$values.cr} mask={`url(#nil_doc_theme_icon_${index})`} />
+    <g style={`opacity: ${$values.v}`}>
+        <g>
+            <line x1="0" y1="9" x2="0" y2="11" />
+            <line x1="9" y1="0" x2="11" y2="0" />
+            <line x1="0" y1="-11" x2="0" y2="-9" />
+            <line x1="-11" y1="0" x2="-9" y2="0" />
+        </g>
+        <g transform="rotate(45)">
+            <line x1="0" y1="9" x2="0" y2="11" />
+            <line x1="9" y1="0" x2="11" y2="0" />
+            <line x1="0" y1="-11" x2="0" y2="-9" />
+            <line x1="-11" y1="0" x2="-9" y2="0" />
+        </g>
     </g>
 </svg>
 

package/components/etc/action.d.ts

@@ -5,6 +5,7 @@ type Parameter = {
     vertical: boolean;
     reversed: boolean;
     dbltap?: () => void;
+    tap?: () => void;
     moving: Writable<boolean>;
 };
 type Return = {

package/components/etc/action.js

@@ -1,21 +1,19 @@
 import { get, writable } from "svelte/store";
 export const createDraggable = (offset) => {
     const position = writable(offset);
-    function draggable(div, parameter) {
+    const draggable = (div, parameter) => {
         let tm = new Date().getTime();
         let param = parameter ?? { reset: () => 0, vertical: true, reversed: false };
         position.set(param.reset());
         let current_page = 0;
-        function disengage() {
-            param.moving.set(false);
-        }
-        function checkDoubleTap() {
+        const disengage = () => param.moving.set(false);
+        const checkDoubleTap = () => {
             const tm2 = new Date().getTime();
             const diff = tm2 - tm;
             tm = tm2;
             return diff < 200;
-        }
-        function engage(e) {
+        };
+        const engage = (e) => {
             if (checkDoubleTap()) {
                 param?.dbltap?.();
                 disengage();
@@ -24,14 +22,15 @@ export const createDraggable = (offset) => {
             param.moving.set(true);
             position.set(param.reset());
             current_page = param.vertical ? e.pageX : e.pageY;
-        }
-        function move(e) {
+            param?.tap?.();
+        };
+        const move = (e) => {
             if (get(param.moving)) {
                 const page = param.vertical ? e.pageX : e.pageY;
                 position.update((v) => v + (page - current_page) * (param.reversed ? -1 : 1));
                 current_page = page;
             }
-        }
+        };
         div.addEventListener("pointerdown", engage);
         window.addEventListener("pointerup", disengage);
         window.addEventListener("pointercancel", disengage);
@@ -47,7 +46,7 @@ export const createDraggable = (offset) => {
                 window.removeEventListener("pointermove", move);
             }
         };
-    }
+    };
     return {
         position,
         draggable

package/components/navigation/Nav.svelte

@@ -3,7 +3,6 @@
         width: 100%;
         height: 100%;
         gap: 10px;
-        padding-top: 20px;
         display: flex;
         flex-direction: column;
     }
@@ -26,7 +25,7 @@
     }
 </style>
 
-<script context="module">function apply(paths, init, pre, next, post) {
+<script context="module">const apply = (paths, init, pre, next, post) => {
   const retval = {};
   for (const path of paths) {
     const parts = path.split("/");
@@ -36,7 +35,7 @@
     let t = retval;
     for (let i = 1; i < parts.length; ++i) {
       const part = parts[i];
-      if (t[part] == null) {
+      if (null == t[part]) {
         t[part] = init();
       }
       if (i !== parts.length - 1) {
@@ -50,21 +49,17 @@
     }
   }
   return retval;
-}
-function filt(path, filter, renamer) {
-  return path.includes(filter) || path.split("/").map(renamer).join("/").includes(filter);
-}
-function populate(filter, info, renamer) {
-  return apply(
-    filter.length > 0 ? info.filter((path) => filt(path, filter, renamer)) : info,
-    () => ({ url: null, sub: {} }),
-    (t) => t,
-    (t) => t.sub,
-    (t, p) => {
-      t.url = p;
-    }
-  );
-}
+};
+const filt = (path, filter, renamer) => path.includes(filter) || path.split("/").map(renamer).join("/").includes(filter);
+const populate = (filter, info, renamer) => apply(
+  filter.length > 0 ? info.filter((path) => filt(path, filter, renamer)) : info,
+  () => ({ url: null, sub: {} }),
+  (t) => t,
+  (t) => t.sub,
+  (t, p) => {
+    t.url = p;
+  }
+);
 </script>
 <script>import Tree from "./Tree.svelte";
 export let info;
@@ -78,7 +73,7 @@ let states = apply(
   (t, path) => ({ expanded: t.expanded || selected === path, sub: t.sub }),
   (t) => t.sub
 );
-function update(selected2) {
+const update = (selected2) => {
   if (!info.includes(selected2)) {
     return;
   }
@@ -90,7 +85,7 @@ function update(selected2) {
     }
     node = node[p].sub;
   }
-}
+};
 $:
   update(selected);
 </script>

package/components/navigation/Node.svelte

@@ -58,13 +58,13 @@ $:
   style = `padding-left: ${10 + depth * 10}px;`;
 $:
   has_children = Object.keys(value.sub).length > 0;
-function click(link) {
+const click = (link) => {
   if (link != null && selected !== link) {
     dispatch("navigate", link);
   } else if (has_children) {
     states.expanded = !states.expanded;
   }
-}
+};
 </script>
 <div class="wrapper">
     <div

package/components/navigation/utils.d.ts

@@ -23,5 +23,5 @@ declare const sorter: Sorter;
  * @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 declare const sort: (t: Record<string, Tree>, order: (l: string, r: string) => 1 | 0 | -1) => [string, Tree][];
 export { sorter, renamer };

package/components/navigation/utils.js

@@ -1,5 +1,5 @@
 const match = /(\d+)-(.+)/;
-function sorterT(l, r) {
+const sorterT = (l, r) => {
     if (l < r) {
         return -1;
     }
@@ -7,7 +7,7 @@ function sorterT(l, r) {
         return +1;
     }
     return 0;
-}
+};
 /**
  * Compares two texts for sorting.
  *
@@ -26,13 +26,13 @@ function sorterT(l, r) {
 const sorter = (l, r) => {
     const lmatch = match.exec(l);
     const rmatch = match.exec(r);
-    if (lmatch == null && rmatch == null) {
+    if (null == lmatch && null == rmatch) {
         return sorterT(l, r);
     }
-    if (lmatch == null) {
+    if (null == lmatch) {
         return 1;
     }
-    if (rmatch == null) {
+    if (null == rmatch) {
         return -1;
     }
     return sorterT(parseInt(lmatch[1]), parseInt(rmatch[1]));
@@ -51,7 +51,5 @@ const renamer = (text) => {
     }
     return text;
 };
-export function sort(t, order) {
-    return Object.entries(t).sort(([l], [r]) => order(l, r));
-}
+export const sort = (t, order) => Object.entries(t).sort(([l], [r]) => order(l, r));
 export { sorter, renamer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.30",
+  "version": "0.2.32",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
@@ -12,7 +12,6 @@
     "@sveltejs/package": "^1.0.1",
     "mdsvex": "^0.10.6",
     "svelte-check": "^2.10.3",
-    "svelte-markdown": "^0.2.3",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
     "vite": "^4.0.3"

package/sveltekit/index.d.ts

@@ -20,5 +20,5 @@ type Routes = {
  * @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 declare const sveltekit: (detail: Record<string, unknown>, prefix?: string | null) => Routes;
 export {};

package/sveltekit/index.js

@@ -1,47 +1,35 @@
 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 toRoute = (p) => p.substring(1, p.lastIndexOf("/"));
 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 collapseLayout = (p) => p
+    .split("/")
+    .filter((p) => null == route_advanced_layout_match.exec(p))
+    .join("/");
+const isNotRoot = (p) => p !== "/";
 const route_rest_match = /.*\[.*\].*/;
-function isRouteDynamic(p) {
-    return route_rest_match.exec(p) == null;
-}
+const isRouteDynamic = (p) => null == route_rest_match.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
  */
-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);
+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));
             }
-            return null;
-        }),
-        navigate: prefix ? (e) => goto(`${prefix}${e.detail}`) : (e) => goto(e.detail)
-    };
-}
+            return collapseLayout($page.route.id);
+        }
+        return null;
+    }),
+    navigate: prefix ? (e) => goto(`${prefix}${e.detail}`) : (e) => goto(e.detail)
+});