@nil-/doc 0.2.36 → 0.2.37

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nil-/doc
 
+## 0.2.37
+
+### Patch Changes
+
+-   [doc][fix] params prop is now reactive ([#57](https://github.com/njaldea/mono/pull/57))
+    [doc] added component documentation link to deployment
+    [doc] removed inRoot
+
+-   [doc][cleanup] refactored Instance/Template/Params ([#57](https://github.com/njaldea/mono/pull/57))
+
 ## 0.2.36
 
 ### Patch Changes

package/components/Layout.svelte

@@ -8,6 +8,7 @@
         gap: 1px;
         width: 100%;
         height: 100%;
+        box-sizing: border-box;
         font-family: "Fira Code", "Courier New", Courier, monospace;
     }
 
@@ -34,14 +35,6 @@
         box-sizing: border-box;
     }
 
-    /* reset block */
-    .reset {
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        font-family: "Fira Code", "Courier New", Courier, monospace;
-    }
-
     /* scrollable */
     .scrollable {
         overflow: scroll;
@@ -81,7 +74,7 @@
 </script>
 <script>import Container from "./etc/Container.svelte";
 import Nav from "./navigation/Nav.svelte";
-import { inRoot, getTheme, initTheme, evalTheme } from "./context";
+import { getTheme, initTheme, evalTheme } from "./context";
 import ThemeIcon from "./etc/ThemeIcon.svelte";
 import NilIcon from "./etc/NilIcon.svelte";
 export let data;
@@ -89,21 +82,24 @@ export let current = null;
 export let sorter = null;
 export let renamer = null;
 export let theme = void 0;
-const r = inRoot();
 const parentTheme = getTheme();
-const isDark = initTheme();
+const dark = initTheme();
 $:
-  $isDark = evalTheme(parentTheme ? $parentTheme : true, theme);
+  $dark = evalTheme(parentTheme ? $parentTheme : true, theme);
 </script>
-<div class="layout" class:reset={r} class:dark={$isDark}>
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/1-Layout) for more details.
+-->
+<div class="layout" class:dark={$dark}>
     <div class="top">
         <slot name="title"><span>@nil-/doc</span></slot>
-        <ThemeIcon bind:dark={$isDark} />
+        <ThemeIcon bind:dark={$dark} />
         <NilIcon />
     </div>
     <div class="main">
-        <Container offset={250} vertical secondary>
-            <svelte:fragment slot="primary">
+        <Container offset={250} vertical b>
+            <svelte:fragment slot="A">
                 <div class="content scrollable">
                     <Nav
                         info={data}
@@ -114,7 +110,7 @@ $:
                     />
                 </div>
             </svelte:fragment>
-            <svelte:fragment slot="secondary">
+            <svelte:fragment slot="B">
                 <div class="content scrollable">
                     {#key current}
                         <slot />

package/components/Layout.svelte.d.ts

@@ -22,6 +22,7 @@ declare const __propDef: {
 export type LayoutProps = typeof __propDef.props;
 export type LayoutEvents = typeof __propDef.events;
 export type LayoutSlots = typeof __propDef.slots;
+/** See [documentation](https://mono-doc.vercel.app/3-Components/1-Layout) for more details. */
 export default class Layout extends SvelteComponentTyped<LayoutProps, LayoutEvents, LayoutSlots> {
 }
 export {};

package/components/block/Block.svelte

@@ -2,46 +2,63 @@
     @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
 
     div {
-        display: flex;
-        flex-direction: column;
-        font-family: "Fira Code", "Courier New", Courier, monospace;
-    }
+        display: grid;
+        border-radius: 5px;
+        grid-auto-rows: 1fr;
+        grid-auto-columns: auto;
+        grid-auto-flow: row;
 
-    /* reset block */
-    .reset {
-        width: 100%;
-        height: 100%;
         box-sizing: border-box;
         font-family: "Fira Code", "Courier New", Courier, monospace;
+        padding: 3px;
+        gap: 3px;
+    }
+
+    div.columns {
+        grid-auto-rows: auto;
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
     }
 
     /* colors */
     div {
         color-scheme: light;
-        color: hsl(0, 100%, 0%);
-        transition: color 350ms;
+        color: hsl(0, 0%, 0%);
+        background-color: hsl(0, 2%, 70%);
+        transition: color 350ms, background-color 350ms;
     }
 
     div.dark {
         color-scheme: dark;
-        color: hsl(200, 6%, 80%);
+        color: hsl(0, 0%, 80%);
+        background-color: hsl(0, 2%, 40%);
     }
 </style>
 
-<script>import { initParams, initDefaults, initControls, initControlsState } from "./context";
-import { inRoot, getTheme, initTheme, evalTheme } from "../context";
+<script>import {
+  initParams,
+  initDefaults,
+  initControls,
+  initControlsState,
+  initOrientation
+} from "./context";
+import { getTheme, initTheme, evalTheme } from "../context";
 initParams();
 initDefaults();
 initControls();
 initControlsState();
-const r = inRoot();
+const columns = initOrientation();
 export let theme = void 0;
 const parentTheme = getTheme();
-const isDark = initTheme();
+const dark = initTheme();
 $:
-  $isDark = evalTheme(parentTheme ? $parentTheme : false, theme);
+  $dark = evalTheme(parentTheme ? $parentTheme : false, theme);
 </script>
-<div class:reset={r} class:dark={$isDark}>
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block) for more details.
+-->
+<div class:columns={$columns} class:dark={$dark}>
     <slot />
 </div>
 

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

@@ -14,6 +14,7 @@ declare const __propDef: {
 export type BlockProps = typeof __propDef.props;
 export type BlockEvents = typeof __propDef.events;
 export type BlockSlots = typeof __propDef.slots;
+/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block) for more details. */
 export default class Block extends SvelteComponentTyped<BlockProps, BlockEvents, BlockSlots> {
 }
 export {};

package/components/block/Controls.svelte

@@ -4,10 +4,15 @@ export let props = [];
 export let hide = false;
 export let position = void 0;
 const controls = getControls();
-$controls = props;
+$:
+  $controls = props;
 const state = getControlsState();
 $:
   $state.hide = hide;
 $:
   $state.position = position;
 </script>
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/3-Controls) for more details.
+-->

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

@@ -14,6 +14,7 @@ declare const __propDef: {
 export type ControlsProps = typeof __propDef.props;
 export type ControlsEvents = typeof __propDef.events;
 export type ControlsSlots = typeof __propDef.slots;
+/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/3-Controls) for more details. */
 export default class Controls extends SvelteComponentTyped<ControlsProps, ControlsEvents, ControlsSlots> {
 }
 export {};

package/components/block/Instance.svelte

@@ -1,11 +1,115 @@
+<style>
+    div {
+        box-sizing: border-box;
+    }
 
-<script>import Template from "./Template.svelte";
-import Params from "./Params.svelte";
+    .instance {
+        overflow: hidden;
+    }
+
+    .cside {
+        display: grid;
+        grid-template-columns: 1fr 550px;
+    }
+
+    .content {
+        min-height: 100px;
+        border-radius: 5px;
+    }
+
+    div:not(.cside) > .misc {
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+        user-select: none;
+    }
+
+    .cside > .misc {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+        user-select: none;
+    }
+
+    .content,
+    .misc {
+        border-style: solid;
+        border-width: 1px;
+        padding: 2px;
+    }
+
+    /* scrollable */
+    .scrollable {
+        overflow: scroll;
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none; /* IE and Edge */
+    }
+
+    .scrollable::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* colors */
+    .content,
+    .misc {
+        border-color: hsl(0, 2%, 60%);
+        background-color: hsl(0, 0%, 100%);
+        transition: border-color 350ms, background-color 350ms;
+    }
+
+    .dark.content,
+    .dark.misc {
+        border-color: hsl(0, 2%, 40%);
+        background-color: hsl(200, 4%, 14%);
+    }
+</style>
+
+<script>import { beforeUpdate } from "svelte";
+import { cquery } from "./action";
+import { getControls, getControlsState } from "./context";
+import { getTheme } from "../context";
+import Controls from "./controls/Controls.svelte";
+import { resolve } from "./utils";
+const controls = getControls();
+const controlsState = getControlsState();
+const dark = getTheme();
+$:
+  expanded = $controls.length > 0 && !$controlsState.hide;
 export let defaults = void 0;
 export let noreset = false;
-const cast = (t) => t;
+let key = false;
+beforeUpdate(() => key = !key);
+const resolveArgs = resolve;
+let bound = {};
+const updateBound = (d) => {
+  bound = resolve(d ?? {}, {});
+};
+$:
+  updateBound(defaults);
 </script>
-<Template {defaults} {noreset} let:props let:key>
-    <slot props={cast(props)} {key} />
-</Template>
-<Params />
+<div
+    class="instance"
+    class:cside={expanded && "right" === $controlsState.position}
+    use:cquery={{
+        class: "cside",
+        min: 1000,
+        w: true,
+        enabled: expanded && $controlsState.position === undefined
+    }}
+>
+    {#if noreset}
+        <div class="content scrollable" class:dark={$dark}>
+            <slot props={resolveArgs(defaults ?? {}, bound)} {key} />
+        </div>
+    {:else}
+        {#key key}
+            <div class="content scrollable" class:dark={$dark}>
+                <slot props={resolveArgs(defaults ?? {}, bound)} {key} />
+            </div>
+        {/key}
+    {/if}
+    {#if expanded}
+        <div class="misc scrollable" class:dark={$dark}>
+            <Controls infos={$controls} bind:values={bound} />
+        </div>
+    {/if}
+</div>
+

package/components/block/Params.svelte

@@ -1,24 +1,21 @@
 
-<script>import { onMount } from "svelte";
-import { getParams, getDefaults } from "./context";
+<script>import { getParams } from "./context";
 import { resolve } from "./utils";
 export let tag = void 0;
 export let props = {};
-const defaults = getDefaults();
 const params = getParams();
-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)
-        }
-      ]);
-    }
-  })
-);
+const id = $params.length;
+$params.push({
+  id,
+  tag: tag ?? `${id}`,
+  values: resolve(props, {})
+});
+$:
+  $params[id].tag = tag ?? `${id}`;
+$:
+  $params[id].values = resolve(props, {});
 </script>
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/2-Template/1-Params) for more details.
+-->

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

@@ -13,6 +13,7 @@ declare const __propDef: {
 export type ParamsProps = typeof __propDef.props;
 export type ParamsEvents = typeof __propDef.events;
 export type ParamsSlots = typeof __propDef.slots;
+/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/2-Template/1-Params) for more details. */
 export default class Params extends SvelteComponentTyped<ParamsProps, ParamsEvents, ParamsSlots> {
 }
 export {};

package/components/block/Template.svelte

@@ -1,162 +1,33 @@
-<style>
-    div {
-        box-sizing: border-box;
-    }
 
-    .template {
-        display: grid;
-        padding-bottom: 10px;
-        padding-top: 10px;
-        grid-auto-rows: 1fr;
-        grid-auto-columns: auto;
-        grid-auto-flow: row;
-        border-radius: 5px;
-    }
-
-    .template.columns {
-        grid-auto-rows: auto;
-        grid-auto-columns: 1fr;
-        grid-auto-flow: column;
-    }
-
-    .template > .cside {
-        display: grid;
-        grid-template-columns: 1fr 550px;
-    }
-
-    .content {
-        min-height: 100px;
-        border-radius: 5px;
-    }
-
-    div:not(.cside) > .misc {
-        border-bottom-left-radius: 5px;
-        border-bottom-right-radius: 5px;
-        user-select: none;
-    }
-
-    .template > .cside > .misc {
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
-        user-select: none;
-    }
-
-    .instance {
-        overflow: hidden;
-    }
-
-    .content,
-    .misc {
-        margin: 3px;
-        border-style: solid;
-        border-width: 1px;
-        padding: 1px;
-    }
-
-    /* scrollable */
-    .scrollable {
-        overflow: scroll;
-        scrollbar-width: none; /* Firefox */
-        -ms-overflow-style: none; /* IE and Edge */
-    }
-
-    .scrollable::-webkit-scrollbar {
-        display: none;
-    }
-
-    /* colors */
-    .template {
-        color: hsl(0, 0%, 0%);
-        background-color: hsl(0, 2%, 70%);
-        transition: color 350ms, background-color 350ms;
-    }
-
-    .template.dark {
-        color-scheme: dark;
-        color: hsl(0, 0%, 80%);
-        background-color: hsl(0, 2%, 40%);
-    }
-
-    .content,
-    .misc {
-        border-color: hsl(0, 2%, 60%);
-        background-color: hsl(0, 0%, 100%);
-        transition: border-color 350ms, background-color 350ms;
-    }
-
-    .dark .content,
-    .dark .misc {
-        border-color: hsl(0, 2%, 40%);
-        background-color: hsl(200, 4%, 14%);
-    }
-</style>
-
-<script>import { getParams, getDefaults } from "./context";
-import { getControls, getControlsState } from "./context";
+<script>import { beforeUpdate } from "svelte";
+import {
+  getDefaults,
+  getParams,
+  getOrientation
+} from "./context";
 import { resolve } from "./utils";
-import { getTheme } from "../context";
-import Controls from "./controls/Controls.svelte";
-import { cquery } from "./action";
-import { beforeUpdate } from "svelte";
+import Instance from "./Instance.svelte";
 const params = getParams();
-const controls = getControls();
-const controlsState = getControlsState();
 const defaultsStore = getDefaults();
-const isDark = getTheme();
+const orientation = getOrientation();
 export let defaults = void 0;
 export let noreset = false;
 export let columns = false;
-const reset = () => {
-  $params = [];
-  $defaultsStore = defaults;
-};
 $:
-  $defaultsStore, reset();
-const resolveArgs = resolve;
+  $defaultsStore = defaults ?? {};
 $:
-  expanded = $controls.length > 0 && !$controlsState.hide;
+  $orientation = columns;
+const resolveArgs = resolve;
 let key = false;
 beforeUpdate(() => key = !key);
+const cast = (t) => t;
 </script>
-<div class="template" class:columns class:dark={$isDark}>
-    {#each $params as param (param.id)}
-        <div
-            class="instance"
-            class:cside={expanded && "right" === $controlsState.position}
-            use:cquery={{
-                class: "cside",
-                min: 1000,
-                w: true,
-                enabled: expanded && $controlsState.position === undefined
-            }}
-        >
-            {#if noreset}
-                <div class="content scrollable" class:dark={$isDark}>
-                    <slot
-                        id={param.id}
-                        tag={param.tag}
-                        props={resolveArgs(param.defaults, param.values)}
-                        {key}
-                    />
-                </div>
-            {:else}
-                {#key key}
-                    <div class="content scrollable" class:dark={$isDark}>
-                        <slot
-                            id={param.id}
-                            tag={param.tag}
-                            props={resolveArgs(param.defaults, param.values)}
-                            {key}
-                        />
-                    </div>
-                {/key}
-            {/if}
-            {#if expanded}
-                <div class="misc scrollable" class:dark={$isDark}>
-                    <Controls infos={$controls} bind:values={param.values} />
-                </div>
-            {/if}
-        </div>
-    {/each}
-</div>
-
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/2-Template) for more details.
+-->
+{#each $params as param (param.id)}
+    <Instance defaults={resolveArgs($defaultsStore, param.values)} {noreset} let:key let:props>
+        <slot id={param.id} tag={param.tag} props={cast(props)} {key} />
+    </Instance>
+{/each}

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

@@ -20,6 +20,7 @@ declare class __sveltets_Render<Args> {
 export type TemplateProps<Args> = ReturnType<__sveltets_Render<Args>['props']>;
 export type TemplateEvents<Args> = ReturnType<__sveltets_Render<Args>['events']>;
 export type TemplateSlots<Args> = ReturnType<__sveltets_Render<Args>['slots']>;
+/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/2-Template) for more details. */
 export default class Template<Args> extends SvelteComponentTyped<TemplateProps<Args>, TemplateEvents<Args>, TemplateSlots<Args>> {
 }
 export {};

package/components/block/context.d.ts

@@ -7,7 +7,6 @@ export type Params = {
     id: number;
     tag: string;
     values: Record<string, ValueType>;
-    defaults: Record<string, ValueType>;
 };
 export type ControlState = {
     hide: boolean;
@@ -15,5 +14,6 @@ export type ControlState = {
 };
 export declare const initParams: () => Writable<Params[]>, getParams: () => Writable<Params[]>;
 export declare const initControls: () => Writable<Control[]>, getControls: () => Writable<Control[]>;
-export declare const initDefaults: () => Writable<Record<string, ValueType> | null>, getDefaults: () => Writable<Record<string, ValueType> | null>;
+export declare const initDefaults: () => Writable<Record<string, ValueType>>, getDefaults: () => Writable<Record<string, ValueType>>;
 export declare const initControlsState: () => Writable<ControlState>, getControlsState: () => Writable<ControlState>;
+export declare const initOrientation: () => Writable<boolean>, getOrientation: () => Writable<boolean>;

package/components/block/context.js

@@ -9,7 +9,8 @@ const create = (defaulter) => {
 };
 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: initDefaults, get: getDefaults } = create(() => ({}));
 export const { init: initControlsState, get: getControlsState } = create(() => ({
     hide: false
 }));
+export const { init: initOrientation, get: getOrientation } = create(() => false);

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

@@ -1,5 +1,5 @@
 <script>import { getTheme } from "../../../context";
-const isDark = getTheme();
+const dark = getTheme();
 </script>
 <style>
     div {
@@ -79,7 +79,7 @@ const isDark = getTheme();
 </style>
 
 
-<div class:dark={$isDark}>
+<div class:dark={$dark}>
     <slot />
 </div>
 

package/components/context.d.ts

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

package/components/context.js

@@ -1,11 +1,5 @@
 import { setContext, getContext } from "svelte";
 import { writable } from "svelte/store";
-const root = Symbol();
-export const inRoot = () => {
-    const value = getContext(root);
-    setContext(root, false);
-    return value !== false;
-};
 const theme = Symbol();
 export const getTheme = () => getContext(theme);
 export const initTheme = () => setContext(theme, writable(true));

package/components/etc/Container.svelte

@@ -8,14 +8,14 @@
         height: 100%;
         display: grid;
         grid-template-areas:
-            "primary"
+            "A"
             "divider"
-            "secondary";
+            "B";
         overflow: hidden;
     }
 
     .container.vertical {
-        grid-template-areas: "primary divider secondary";
+        grid-template-areas: "A divider B";
     }
 
     .container > div {
@@ -76,19 +76,19 @@
         background-color: var(--color-p);
     }
 
-    .container.moving:not(.secondary):not(.vertical) > .divider {
+    .container.moving:not(.b):not(.vertical) > .divider {
         border-bottom: var(--color-s) solid 2.5px;
     }
 
-    .container.moving.secondary:not(.vertical) > .divider {
+    .container.moving.b:not(.vertical) > .divider {
         border-top: var(--color-s) solid 2.5px;
     }
 
-    .container.moving:not(.secondary).vertical > .divider {
+    .container.moving:not(.b).vertical > .divider {
         border-right: var(--color-s) solid 2.5px;
     }
 
-    .container.moving.vertical.secondary > .divider {
+    .container.moving.vertical.b > .divider {
         border-left: var(--color-s) solid 2.5px;
     }
 </style>
@@ -97,10 +97,10 @@
 import { tweened } from "svelte/motion";
 import { createDraggable } from "./action";
 import { getTheme } from "../context";
-const isDark = getTheme();
+const dark = getTheme();
 export let vertical = false;
 export let offset = 0;
-export let secondary = false;
+export let b = false;
 let width;
 let height;
 const { position, draggable } = createDraggable(offset);
@@ -119,7 +119,7 @@ $:
 $:
   $off = offset;
 $:
-  style = !secondary ? `auto 5px ${$off}px` : `${$off}px 5px auto`;
+  style = !b ? `auto 5px ${$off}px` : `${$off}px 5px auto`;
 const moving = writable(false);
 const addLast = (v) => {
   if (v > 10) {
@@ -149,8 +149,8 @@ const check = (v, flag, s) => {
 <div
     class="container"
     class:vertical
-    class:secondary
-    class:dark={$isDark}
+    class:b
+    class:dark={$dark}
     class:moving={$moving}
     bind:clientWidth={width}
     bind:clientHeight={height}
@@ -158,9 +158,9 @@ const check = (v, flag, s) => {
     style:grid-template-rows={!vertical ? style : null}
 >
     {#if width != null && height != null}
-        <div style:grid-area="primary">
-            {#if check($off, !secondary, span)}
-                <slot name="primary" />
+        <div style:grid-area="A">
+            {#if check($off, !b, span)}
+                <slot name="A" />
             {/if}
         </div>
         <div class="divider">
@@ -168,7 +168,7 @@ const check = (v, flag, s) => {
                 class="overlay"
                 use:draggable={{
                     reset: () => offset,
-                    reversed: !secondary,
+                    reversed: !b,
                     vertical,
                     dbltap: dbltap,
                     tap: () => addLast($off),
@@ -176,9 +176,9 @@ const check = (v, flag, s) => {
                 }}
             />
         </div>
-        <div style:grid-area="secondary">
-            {#if check($off, secondary, span)}
-                <slot name="secondary" />
+        <div style:grid-area="B">
+            {#if check($off, b, span)}
+                <slot name="B" />
             {/if}
         </div>
     {/if}

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

@@ -3,14 +3,14 @@ declare const __propDef: {
     props: {
         vertical?: boolean | undefined;
         offset?: number | undefined;
-        secondary?: boolean | undefined;
+        b?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        primary: {};
-        secondary: {};
+        A: {};
+        B: {};
     };
 };
 export type ContainerProps = typeof __propDef.props;

package/package.json

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