@nil-/doc 0.2.14 → 0.2.16

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nil-/doc
 
+## 0.2.16
+
+### Patch Changes
+
+-   650eb4b: [doc] revived proper ordering of params
+    [doc] each param now has its own defaults (which is resolved from template's default and pram's props)
+
+## 0.2.15
+
+### Patch Changes
+
+-   44a7113: [doc] added documentation for internal Container
+    [doc] adjusted api for load (now `routes`)
+    [doc] fix for layout group route
+
 ## 0.2.14
 
 ### Patch Changes

package/components/block/Block.svelte

@@ -1,9 +1,10 @@
-<script>import { initCurrent, initParams, initControls, initDefaults } from "./context";
+<script>import { initParams, initCurrent, initDefaults, initControls, initControlsState } from "./context";
 import { inRoot } from "../context";
 initParams();
 initCurrent();
-initControls();
 initDefaults();
+initControls();
+initControlsState();
 const r = inRoot();
 </script>
 <style>

package/components/block/Controls.svelte

@@ -1,5 +1,9 @@
 
-<script>import { getControls } from "./context";
+<script>import { getControls, getControlsState } from "./context";
 export let props = [];
-getControls().set(props);
+export let expand = false;
+const controls = getControls();
+$controls = props;
+const state = getControlsState();
+$: $state.expand = expand;
 </script>

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

@@ -3,6 +3,7 @@ import type { Control } from "./controls/types";
 declare const __propDef: {
     props: {
         props?: Control[] | undefined;
+        expand?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/Params.svelte

@@ -1,13 +1,26 @@
 
-<script>import { getParams, getDefaults } from "./context";
+<script>import { onMount } from "svelte";
+import { getParams, getDefaults } from "./context";
+import { resolve } from "./utils";
 export let tag;
 export let props = {};
 const defaults = getDefaults();
 const params = getParams();
-function set(tag, props) {
-    if ($defaults != null) {
-        $params[tag] = { ...$defaults, ...props };
+onMount(() => defaults.subscribe((d) => {
+    if (d != null) {
+        params.update((p) => {
+            const v = [
+                ...p,
+                {
+                    id: p.length,
+                    tag,
+                    values: resolve(d, props),
+                    defaults: resolve(d, props)
+                }
+            ];
+            console.log(v);
+            return v;
+        });
     }
-}
-$: set(tag, props);
+}));
 </script>

package/components/block/Template.svelte

@@ -33,30 +33,25 @@
 </style>
 <svelte:window on:click={() => ($current = null)} />
 
-<script>import { beforeUpdate } from "svelte";
-import { getParams, getCurrent, getControls, getDefaults } from "./context";
+<script>import { getParams, getCurrent, getDefaults } from "./context";
+import { getControls, getControlsState } from "./context";
+import { resolve } from "./utils";
 import Controls from "./controls/Controls.svelte";
+import { beforeUpdate } from "svelte";
 import { slide } from "svelte/transition";
 const params = getParams();
 const current = getCurrent();
 const controls = getControls();
-export let defaults;
-getDefaults().set(defaults);
-$: keys = Object.keys(defaults);
-function resolve(d, p) {
-    if (d === undefined) {
-        return {};
-    }
-    const temporary = { ...d };
-    for (const key of keys) {
-        if (key in p && p[key] !== undefined) {
-            temporary[key] = p[key];
-        }
-    }
-    return temporary;
+const controlsState = getControlsState();
+const defaultsStore = getDefaults();
+export let defaults = undefined;
+export let noreset = false;
+function reset() {
+    $params = [];
+    $defaultsStore = defaults;
 }
+$: $defaultsStore, reset();
 let hovered = null;
-export let noreset = false;
 /**
  * This flag is to rerender the whole slot component.
  * If the control is disabled, we use the default value provided from the defaults field.
@@ -72,28 +67,28 @@ let key = false;
 beforeUpdate(() => (key = !key));
 </script>
 <div class="template">
-    {#each Object.keys($params) as tag (tag)}
+    {#each $params as param (param.id)}
         <div
             class="instance"
-            on:click|stopPropagation={() => ($current = tag)}
-            on:mouseenter={() => (hovered = tag)}
+            on:click|stopPropagation={() => ($current = param.id)}
+            on:mouseenter={() => (hovered = param.id)}
             on:mouseleave={() => (hovered = null)}
             on:keypress={null}
         >
             {#if noreset}
                 <div class="content nil-doc-scrollable">
-                    <slot {tag} props={resolve(defaults, $params[tag])} />
+                    <slot tag={param.tag} props={resolve(param.defaults, param.values)} />
                 </div>
             {:else}
                 {#key key}
                     <div class="content nil-doc-scrollable">
-                        <slot {tag} props={resolve(defaults, $params[tag])} />
+                        <slot tag={param.tag} props={resolve(param.defaults, param.values)} />
                     </div>
                 {/key}
             {/if}
-            {#if $controls.length > 0 && ($current === tag || hovered === tag)}
-                <div class="misc nil-doc-scrollable" transition:slide>
-                    <Controls infos={$controls} bind:values={$params[tag]} />
+            {#if $controls.length > 0 && ($controlsState.expand || $current === param.id || hovered === param.id)}
+                <div class="misc nil-doc-scrollable" transition:slide|local>
+                    <Controls infos={$controls} bind:values={param.values} />
                 </div>
             {/if}
         </div>

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

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare class __sveltets_Render<Args> {
     props(): {
-        defaults: Args;
+        defaults?: Args | undefined;
         noreset?: boolean | undefined;
     };
     events(): {} & {
@@ -9,8 +9,8 @@ declare class __sveltets_Render<Args> {
     };
     slots(): {
         default: {
-            tag: string;
-            props: Args;
+            tag: string | undefined;
+            props: Record<string, any>;
         };
     };
 }

package/components/block/context.d.ts

@@ -1,7 +1,16 @@
 import type { Control } from "./controls/types";
 import type { Writable } from "svelte/store";
-export type Params = Record<string, any>;
-export declare const initCurrent: () => Writable<string | null>, getCurrent: () => Writable<string | null>;
-export declare const initParams: () => Writable<Params>, getParams: () => Writable<Params>;
+export type Params = {
+    id: number;
+    tag?: string;
+    values: Record<string, any>;
+    defaults: Record<string, any>;
+};
+export type ControlState = {
+    expand: boolean;
+};
+export declare const initCurrent: () => Writable<number | null>, getCurrent: () => Writable<number | null>;
+export declare const initParams: () => Writable<Params[]>, getParams: () => Writable<Params[]>;
 export declare const initControls: () => Writable<Control[]>, getControls: () => Writable<Control[]>;
-export declare const initDefaults: () => Writable<Params | null>, getDefaults: () => Writable<Params | null>;
+export declare const initDefaults: () => Writable<Record<string, any> | null>, getDefaults: () => Writable<Record<string, any> | null>;
+export declare const initControlsState: () => Writable<ControlState>, getControlsState: () => Writable<ControlState>;

package/components/block/context.js

@@ -8,6 +8,9 @@ function create(defaulter) {
     };
 }
 export const { init: initCurrent, get: getCurrent } = create(() => null);
-export const { init: initParams, get: getParams } = create(() => ({}));
+export const { init: initParams, get: getParams } = create(() => []);
 export const { init: initControls, get: getControls } = create(() => []);
 export const { init: initDefaults, get: getDefaults } = create(() => null);
+export const { init: initControlsState, get: getControlsState } = create(() => ({
+    expand: false
+}));

package/components/block/controls/Controls.svelte

@@ -1,42 +1,14 @@
-<style>
-    .controls {
-        width: 100%;
-        display: grid;
-        grid-auto-rows: 1fr;
-    }
 
-    .controls > :global(div) {
-        width: 100%;
-        display: grid;
-        padding: 2px 0px;
-        grid-template-columns: 1fr 200px 75px;
-        background-color: hsl(205, 50%, 5%);
-    }
-
-    .controls > :global(div:nth-child(even)) {
-        background-color: hsl(205, 15%, 15%);
-    }
-
-    .controls > :global(div > div) {
-        display: grid;
-        align-items: center;
-    }
-
-    .controls > :global(div > div > *) {
-        width: 100%;
-        height: 100%;
-    }
-</style>
-
-<script>import Header from "./Header.svelte";
-import Component from "./Component.svelte";
+<script>import Component from "./Component.svelte";
+import Header from "./misc/TopHeader.svelte";
+import Styler from "./misc/Styler.svelte";
 export let infos;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export let values;
 </script>
-<div class="controls">
+<Styler>
     <Header />
     {#each infos as info}
         <Component {info} bind:value={values[info.name]} />
     {/each}
-</div>
-
+</Styler>

package/components/block/controls/Controls.svelte.d.ts

@@ -1,10 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Control } from "./types";
-import type { Params } from "../context";
 declare const __propDef: {
     props: {
         infos: Control[];
-        values: Params;
+        values: Record<string, any>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/controls/Object.svelte

@@ -1,6 +1,7 @@
 
 <script>import Component from "./Component.svelte";
-import { getObjectDefaults } from "./defaulter";
+import Header from "./misc/GroupHeader.svelte";
+import { getObjectDefaults } from "./misc/defaulter";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export let value;
 export let info;
@@ -10,13 +11,7 @@ let ivalue = value ?? getObjectDefaults(info);
 let enabled = value !== undefined;
 $: value = !disabled && enabled ? ivalue : undefined;
 </script>
-<div>
-    <div style:padding-left={`${depth}px`}>
-        > {info.name}
-    </div>
-    <div>-</div>
-    <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
-</div>
+<Header name={info.name} bind:checked={enabled} {depth} {disabled} />
 {#if enabled && !disabled}
     {#each info.values as info, i (i)}
         <Component

package/components/block/controls/Tuple.svelte

@@ -1,6 +1,7 @@
 
 <script>import Component from "./Component.svelte";
-import { getTupleDefaults } from "./defaulter";
+import Header from "./misc/GroupHeader.svelte";
+import { getTupleDefaults } from "./misc/defaulter";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export let value;
 export let info;
@@ -10,13 +11,7 @@ let ivalue = value ?? getTupleDefaults(info);
 let enabled = value !== undefined;
 $: value = !disabled && enabled ? ivalue : undefined;
 </script>
-<div>
-    <div style:padding-left={`${depth}px`}>
-        > {info.name}
-    </div>
-    <div>-</div>
-    <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
-</div>
+<Header name={info.name} bind:checked={enabled} {depth} {disabled} />
 {#if enabled && !disabled}
     {#each info.values as info, i (i)}
         <Component

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

@@ -0,0 +1,19 @@
+<style>
+    .value {
+        text-align: center;
+    }
+</style>
+
+<script>export let name;
+export let depth;
+export let checked;
+export let disabled = false;
+</script>
+<div>
+    <div style:padding-left={`${depth}px`}>
+        {`> ${name}`}
+    </div>
+    <div class="value">-</div>
+    <div><input type="checkbox" bind:checked {disabled} /></div>
+</div>
+

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name: string;
+        depth: number;
+        checked: boolean;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GroupHeaderProps = typeof __propDef.props;
+export type GroupHeaderEvents = typeof __propDef.events;
+export type GroupHeaderSlots = typeof __propDef.slots;
+export default class GroupHeader extends SvelteComponentTyped<GroupHeaderProps, GroupHeaderEvents, GroupHeaderSlots> {
+}
+export {};

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

@@ -0,0 +1,38 @@
+<style>
+    div {
+        width: 100%;
+        display: grid;
+        grid-auto-rows: 30px;
+    }
+
+    div > :global(div) {
+        width: 100%;
+        display: grid;
+        padding: 2px 0px;
+        grid-template-columns: 1fr 200px 75px;
+        background-color: hsl(205, 50%, 5%);
+    }
+
+    div > :global(div:nth-child(even)) {
+        background-color: hsl(205, 15%, 15%);
+    }
+
+    div > :global(div:hover) {
+        background-color: rgba(2, 156, 253, 0.07);
+    }
+
+    div > :global(div > div) {
+        display: grid;
+        align-items: center;
+    }
+
+    div > :global(div > div > *) {
+        width: 100%;
+        height: 100%;
+    }
+</style>
+
+<div>
+    <slot />
+</div>
+

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

@@ -0,0 +1,27 @@
+/** @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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  TopHeaderProps */
+/** @typedef {typeof __propDef.events}  TopHeaderEvents */
+/** @typedef {typeof __propDef.slots}  TopHeaderSlots */
+export default class TopHeader extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TopHeaderProps = typeof __propDef.props;
+export type TopHeaderEvents = typeof __propDef.events;
+export type TopHeaderSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/block/controls/{defaulter.d.ts → misc/defaulter.d.ts}

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

package/components/block/utils.d.ts

@@ -0,0 +1 @@
+export declare function resolve<Args>(d: Args | undefined, p: Record<string, any>): Args;

package/components/block/utils.js

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function resolveArray(d, p) {
+    if (d === undefined) {
+        return undefined;
+    }
+    const ret = [];
+    for (const i in d) {
+        if (d[i] instanceof Array) {
+            ret.push(resolveArray(d[i], p[i] ?? []));
+        }
+        else if (d[i] instanceof Object) {
+            ret.push(resolveObject(d[i], p[i] ?? {}));
+        }
+        else {
+            ret.push(p[i] ?? d[i]);
+        }
+    }
+    return ret;
+}
+function resolveObject(d, p) {
+    if (d === undefined) {
+        return undefined;
+    }
+    const ret = {};
+    for (const [key, value] of Object.entries(d)) {
+        if (value instanceof Array) {
+            ret[key] = resolveArray(value, p[key] ?? []);
+        }
+        else if (value instanceof Object) {
+            ret[key] = resolveObject(value, p[key] ?? {});
+        }
+        else {
+            ret[key] = p[key] ?? value;
+        }
+    }
+    return ret;
+}
+export function resolve(d, p) {
+    return resolveObject(d ?? {}, p);
+}

package/components/routes.d.ts

@@ -0,0 +1,6 @@
+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/{load.js → routes.js}

@@ -17,10 +17,13 @@ const route_rest_match = /.*\[.*\].*/;
 function isRouteDynamic(p) {
     return route_rest_match.exec(p) == null;
 }
-export function load(files_from_import_meta) {
-    return Object.keys(files_from_import_meta)
-        .map(toRoute)
-        .map(collapseLayout)
-        .filter(isNotRoot)
-        .filter(isRouteDynamic);
+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)
+    };
 }

package/index.d.ts

@@ -1,4 +1,4 @@
-export { load } from "./components/load";
+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,4 @@
-export { load } from "./components/load";
+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,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"

package/components/block/controls/Header.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  HeaderProps */
-/** @typedef {typeof __propDef.events}  HeaderEvents */
-/** @typedef {typeof __propDef.slots}  HeaderSlots */
-export default class Header extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type HeaderProps = typeof __propDef.props;
-export type HeaderEvents = typeof __propDef.events;
-export type HeaderSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/components/load.d.ts

@@ -1 +0,0 @@
-export declare function load(files_from_import_meta: Record<string, unknown>): string[];