@nil-/doc 0.2.15 → 0.2.17

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nil-/doc
 
+## 0.2.17
+
+### Patch Changes
+
+-   af86341: [doc] moved default mapping in a common lib
+    [doc] fix typing
+    [doc] if Param's tag is not provided, use stringified id
+
+## 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

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,22 @@
 
-<script>import { getParams, getDefaults } from "./context";
-export let tag;
+<script>import { onMount } from "svelte";
+import { getParams, getDefaults } from "./context";
+import { resolve } from "./utils";
+export let tag = undefined;
 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) => [
+            ...p,
+            {
+                id: p.length,
+                tag: tag ?? `${p.length}`,
+                values: resolve(d, props),
+                defaults: resolve(d, props)
+            }
+        ]);
     }
-}
-$: set(tag, props);
+}));
 </script>

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

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import { type ValueType } from "./context";
 declare const __propDef: {
     props: {
-        tag: string;
-        props?: Record<string, unknown> | undefined;
+        tag?: string | undefined;
+        props?: Record<string, ValueType> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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.
@@ -70,30 +65,39 @@ export let noreset = false;
  */
 let key = false;
 beforeUpdate(() => (key = !key));
+const resolveArgs = (resolve);
 </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
+                        id={param.id}
+                        tag={param.tag}
+                        props={resolveArgs(param.defaults, param.values)}
+                    />
                 </div>
             {:else}
                 {#key key}
                     <div class="content nil-doc-scrollable">
-                        <slot {tag} props={resolve(defaults, $params[tag])} />
+                        <slot
+                            id={param.id}
+                            tag={param.tag}
+                            props={resolveArgs(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,6 +9,7 @@ declare class __sveltets_Render<Args> {
     };
     slots(): {
         default: {
+            id: number;
             tag: string;
             props: Args;
         };

package/components/block/context.d.ts

@@ -1,7 +1,19 @@
 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 ValueType = undefined | boolean | number | string | ValueType[] | {
+    [key: string]: ValueType;
+};
+export type Params = {
+    id: number;
+    tag: string;
+    values: Record<string, ValueType>;
+    defaults: Record<string, ValueType>;
+};
+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, ValueType> | null>, getDefaults: () => Writable<Record<string, ValueType> | 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/Component.svelte

@@ -6,10 +6,12 @@ import Switch from "./Switch.svelte";
 import Select from "./Select.svelte";
 import Tuple from "./Tuple.svelte";
 import Object from "./Object.svelte";
-export let info;
+// by use, info type is mapped to the value type
+// unfortunately i can't use typescript in the markup part of svelte
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export let value;
-export let depth = 10;
+export let info;
+export let depth;
 export let disabled = false;
 </script>
 {#if info.type === "object"}

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

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 import type { Control } from "./types";
 declare const __propDef: {
     props: {
-        info: Control;
         value: any;
-        depth?: number | undefined;
+        info: Control;
+        depth: number;
         disabled?: boolean | undefined;
     };
     events: {

package/components/block/controls/Controls.svelte

@@ -8,6 +8,6 @@ export let values;
 <Styler>
     <Header />
     {#each infos as info}
-        <Component {info} bind:value={values[info.name]} />
+        <Component {info} bind:value={values[info.name]} depth={10} disabled={false} />
     {/each}
 </Styler>

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

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

package/components/block/controls/Number.svelte

@@ -1,9 +1,10 @@
 
-<script>export let value;
+<script>import { getDefault } from "./misc/defaulter";
+export let value;
 export let info;
 export let depth;
 export let disabled = false;
-let ivalue = value ?? 0;
+let ivalue = value ?? getDefault(info);
 let enabled = value !== undefined;
 $: value = enabled && !disabled ? ivalue : undefined;
 </script>

package/components/block/controls/Object.svelte

@@ -2,7 +2,6 @@
 <script>import Component from "./Component.svelte";
 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;
 export let depth;

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

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ControlObject } from "./types";
+import type { ValueType } from "../context";
 declare const __propDef: {
     props: {
-        value: Record<string, any> | undefined;
+        value: Record<string, ValueType> | undefined;
         info: ControlObject;
         depth: number;
         disabled?: boolean | undefined;

package/components/block/controls/Range.svelte

@@ -16,11 +16,12 @@
     }
 </style>
 
-<script>export let value;
+<script>import { getDefault } from "./misc/defaulter";
+export let value;
 export let info;
 export let depth;
 export let disabled = false;
-let ivalue = value ?? info.min;
+let ivalue = value ?? getDefault(info);
 let enabled = value !== undefined;
 $: value = enabled && !disabled ? ivalue : undefined;
 </script>

package/components/block/controls/Select.svelte

@@ -1,9 +1,10 @@
 
-<script>export let value;
+<script>import { getDefault } from "./misc/defaulter";
+export let value;
 export let info;
 export let depth;
 export let disabled = false;
-let ivalue = value ?? (info.values.length > 0 ? info.values[0] : undefined);
+let ivalue = value ?? getDefault(info);
 let enabled = value !== undefined;
 $: value = enabled && !disabled ? ivalue : undefined;
 </script>

package/components/block/controls/Switch.svelte

@@ -1,9 +1,10 @@
 
-<script>export let value;
+<script>import { getDefault } from "./misc/defaulter";
+export let value;
 export let info;
 export let depth;
 export let disabled = false;
-let ivalue = value ?? false;
+let ivalue = value ?? getDefault(info);
 let enabled = value !== undefined;
 $: value = enabled && !disabled ? ivalue : undefined;
 </script>

package/components/block/controls/Text.svelte

@@ -1,9 +1,10 @@
 
-<script>export let value;
+<script>import { getDefault } from "./misc/defaulter";
+export let value;
 export let info;
 export let depth;
 export let disabled = false;
-let ivalue = value ?? "";
+let ivalue = value ?? getDefault(info);
 let ienabled = value !== undefined;
 $: value = ienabled && !disabled ? ivalue : undefined;
 </script>

package/components/block/controls/Tuple.svelte

@@ -2,7 +2,6 @@
 <script>import Component from "./Component.svelte";
 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;
 export let depth;

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

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ControlTuple } from "./types";
+import type { ValueType } from "../context";
 declare const __propDef: {
     props: {
-        value: any[] | undefined;
+        value: ValueType[] | undefined;
         info: ControlTuple;
         depth: number;
         disabled?: boolean | undefined;

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

@@ -17,6 +17,10 @@
         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;

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

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

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

@@ -1,5 +1,4 @@
 export function getObjectDefaults(info) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const ret = {};
     for (const i of info.values) {
         ret[i.name] = getDefault(i);
@@ -13,16 +12,21 @@ export function getTupleDefaults(i) {
     }
     return ret;
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function getDefault(i) {
+    if (i.type === "switch") {
+        return false;
+    }
     if (i.type === "number") {
         return 0;
     }
     if (i.type === "range") {
         return i.min;
     }
-    if (i.type === "switch") {
-        return false;
+    if (i.type === "text") {
+        return "";
+    }
+    if (i.type === "select") {
+        return i.values.length > 0 ? i.values[0] : "";
     }
     if (i.type === "tuple") {
         return [...getTupleDefaults(i)];
@@ -30,6 +34,5 @@ export function getDefault(i) {
     if (i.type === "object") {
         return getObjectDefaults(i);
     }
-    // "select" | "text"
-    return "";
+    return undefined;
 }

package/components/block/utils.d.ts

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

package/components/block/utils.js

@@ -0,0 +1,39 @@
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"