@nil-/doc 0.3.4 → 1.0.0

package/components/block/Instance.svelte

@@ -9,7 +9,6 @@ export let defaults = void 0;
 export let noreset = false;
 let key = false;
 beforeUpdate(() => key = !key);
-const resolveArgs = resolve;
 const values = writable({ props: {}, events: [] });
 const updateBound = (d) => $values.props = resolve(d ?? {}, {});
 $:
@@ -31,14 +30,14 @@ const populate = (ext) => {
   const obj = {};
   const stringify = (detail) => {
     if (detail) {
-      if (typeof detail === "string") {
+      if ("string" === typeof detail) {
         return detail;
       }
       return JSON.stringify(detail);
     }
     return "";
   };
-  if (ext != null) {
+  if (null != ext) {
     for (const name of ext) {
       obj[name] = (ev) => {
         const detail = stringify(ev.detail);
@@ -60,6 +59,10 @@ const populate = (ext) => {
   }
   return obj;
 };
+$:
+  props = resolve(defaults ?? {}, $values.props);
+$:
+  events = populate($controls.events);
 </script>
 
 <!--
@@ -71,23 +74,16 @@ const populate = (ext) => {
     class="instance"
     class:selected={$vv === values}
     class:controls={$controls.events.length > 0 || $controls.props.length > 0}
+    role="none"
     on:click={focus}
     on:keypress={null}
 >
     <div class="content">
         {#if noreset}
-            <slot
-                props={resolveArgs(defaults ?? {}, $values.props)}
-                events={populate($controls.events)}
-                {key}
-            />
+            <slot {props} {events} {key} />
         {:else}
             {#key key}
-                <slot
-                    props={resolveArgs(defaults ?? {}, $values.props)}
-                    events={populate($controls.events)}
-                    {key}
-                />
+                <slot {props} {events} {key} />
             {/key}
         {/if}
     </div>

package/components/block/Params.svelte

@@ -6,8 +6,8 @@ const params = getParams();
 const id = $params.length;
 $params.push({
   id,
-  tag: tag ?? `${id}`,
-  values: resolve(props, {})
+  tag: `${id}`,
+  values: {}
 });
 $:
   $params[id].tag = tag ?? `${id}`;

package/components/block/Template.svelte

@@ -15,7 +15,6 @@ $:
 let key = false;
 beforeUpdate(() => key = !key);
 const resolveArgs = resolve;
-const cast = (t) => t;
 </script>
 
 <!--
@@ -31,6 +30,6 @@ const cast = (t) => t;
         let:props
         let:events
     >
-        <slot id={param.id} tag={param.tag} props={cast(props)} {events} {key} />
+        <slot id={param.id} tag={param.tag} {props} {events} {key} />
     </Instance>
 {/each}

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

@@ -12,7 +12,7 @@ declare class __sveltets_Render<Args> {
         default: {
             id: number;
             tag: string;
-            props: Args;
+            props: unknown;
             events: Record<string, (ev: CustomEvent<unknown>) => void>;
             key: boolean;
         };

package/components/block/controls/Controls.svelte

@@ -45,19 +45,19 @@ const cycleMode = () => {
                 <ControlView {mode} />
             </Button>
         </div>
-        {#if mode === "props"}
+        {#if "props" === mode}
             <div>Name</div>
             <div>Value</div>
             <div>Use</div>
-        {:else if mode === "events"}
+        {:else if "events" === mode}
             <div>Events</div>
             <div>Detail</div>
         {/if}
     </div>
     {#key $values && $controls}
         {#if cc != null && $cc != null && vv != null && $vv != null}
-            <Props infos={$cc.props} visible={mode === "props"} bind:values={$vv.props} />
-            <Events events={$vv.events} visible={mode === "events"} />
+            <Props infos={$cc.props} visible={"props" === mode} bind:values={$vv.props} />
+            <Events events={$vv.events} visible={"events" === mode} />
         {/if}
     {/key}
 </Styler>

package/components/block/controls/Styler.svelte

@@ -1,7 +1,7 @@
 <script>export let type;
 </script>
 
-<div class:props={type === "props"} class:events={type === "events"}>
+<div class:props={"props" === type} class:events={"events" === type}>
     <slot />
 </div>
 

package/components/block/controls/props/Color.svelte

@@ -11,6 +11,7 @@
     case "rgb":
       return color.rgbString;
     case "rgba":
+    default:
       return color.rgbaString;
   }
 };
@@ -34,7 +35,7 @@ const action = (d, { format, P }) => {
     popup: "left",
     editorFormat: format.substring(0, 3),
     editor: true,
-    alpha: format.length === 4,
+    alpha: 4 === format.length,
     onChange: (color) => {
       ivalue = colorSetter(getFormat(info), color);
       d.style.borderColor = ivalue;
@@ -44,7 +45,7 @@ const action = (d, { format, P }) => {
   return {
     update: (format2) => {
       picker.setOptions({
-        alpha: format2.length === 4,
+        alpha: 4 === format2.length,
         editorFormat: format2.substring(0, 3)
       });
     },

package/components/block/controls/props/Component.svelte

@@ -15,45 +15,41 @@ export let visible = false;
 </script>
 
 {#if info instanceof Array}
-    {@const type = info[1]}
-    {#if "object" === type}
+    {#if "object" === info[1]}
         <Object {info} bind:value {depth} {disabled} {visible} />
-    {:else if "tuple" === type}
+    {:else if "tuple" === info[1]}
         <Tuple {info} bind:value {depth} {disabled} {visible} />
-    {:else if "text" === type}
+    {:else if "text" === info[1]}
         <Text {info} bind:value {depth} {disabled} {visible} />
-    {:else if "color" === type}
+    {:else if "color" === info[1]}
         <Color {info} bind:value {depth} {disabled} {visible} />
-    {:else if "number" === type}
+    {:else if "number" === info[1]}
         <Number {info} bind:value {depth} {disabled} {visible} />
-    {:else if "range" === type}
+    {:else if "range" === info[1]}
         <Range {info} bind:value {depth} {disabled} {visible} />
-    {:else if "select" === type}
+    {:else if "select" === info[1]}
         <Select {info} bind:value {depth} {disabled} {visible} />
-    {:else if "toggle" === type}
+    {:else if "toggle" === info[1]}
         <Toggle {info} bind:value {depth} {disabled} {visible} />
-    {:else if "button" === type}
-        <Button {info} {visible} />
-    {/if}
-{:else}
-    {@const type = info.type}
-    {#if "object" === type}
-        <Object {info} bind:value {depth} {disabled} {visible} />
-    {:else if "tuple" === type}
-        <Tuple {info} bind:value {depth} {disabled} {visible} />
-    {:else if "text" === type}
-        <Text {info} bind:value {depth} {disabled} {visible} />
-    {:else if "color" === type}
-        <Color {info} bind:value {depth} {disabled} {visible} />
-    {:else if "number" === type}
-        <Number {info} bind:value {depth} {disabled} {visible} />
-    {:else if "range" === type}
-        <Range {info} bind:value {depth} {disabled} {visible} />
-    {:else if "select" === type}
-        <Select {info} bind:value {depth} {disabled} {visible} />
-    {:else if "toggle" === type}
-        <Toggle {info} bind:value {depth} {disabled} {visible} />
-    {:else if "button" === type}
+    {:else if "button" === info[1]}
         <Button {info} {visible} />
     {/if}
+{:else if "object" === info.type}
+    <Object {info} bind:value {depth} {disabled} {visible} />
+{:else if "tuple" === info.type}
+    <Tuple {info} bind:value {depth} {disabled} {visible} />
+{:else if "text" === info.type}
+    <Text {info} bind:value {depth} {disabled} {visible} />
+{:else if "color" === info.type}
+    <Color {info} bind:value {depth} {disabled} {visible} />
+{:else if "number" === info.type}
+    <Number {info} bind:value {depth} {disabled} {visible} />
+{:else if "range" === info.type}
+    <Range {info} bind:value {depth} {disabled} {visible} />
+{:else if "select" === info.type}
+    <Select {info} bind:value {depth} {disabled} {visible} />
+{:else if "toggle" === info.type}
+    <Toggle {info} bind:value {depth} {disabled} {visible} />
+{:else if "button" === info.type}
+    <Button {info} {visible} />
 {/if}

package/components/block/controls/props/Object.svelte

@@ -7,7 +7,7 @@ export let info;
 export let depth;
 export let disabled = false;
 export let visible = false;
-let ivalue = value ?? defaulter(info);
+const ivalue = value ?? defaulter(info);
 let enabled = value !== void 0;
 let expand = getValues(info).length > 0 ? true : void 0;
 $:

package/components/block/controls/props/Tuple.svelte

@@ -7,7 +7,7 @@ export let info;
 export let depth;
 export let disabled = false;
 export let visible = false;
-let ivalue = value ?? defaulter(info);
+const ivalue = value ?? defaulter(info);
 let enabled = value !== void 0;
 let expand = getValues(info).length > 0 ? true : void 0;
 $:

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

@@ -16,7 +16,7 @@ const flip = () => {
 </script>
 
 {#if visible}
-    <div on:click={flip} on:keypress={null}>
+    <div on:click={flip} on:keypress={null} role="none">
         <Name
             expand={expand === undefined ? undefined : expand && checked && !disabled}
             {name}

package/components/block/controls/props/misc/Name.svelte

@@ -4,9 +4,9 @@ export let expand = void 0;
 </script>
 
 <div class="override" style:padding-left={`${depth}rem`} title={name}>
-    <div class="icon" class:expand={expand === true}>
+    <div class="icon" class:expand={true === expand}>
         <div>
-            {expand === undefined ? "-" : ">"}
+            {undefined === expand ? "-" : ">"}
         </div>
     </div>
     <span>{name}</span>

package/components/block/controls/props/misc/Toggle.svelte

@@ -14,6 +14,7 @@ const dark = getTheme();
         viewBox="-30 -30 60 60"
         on:click|stopPropagation={click}
         on:keypress
+        role="none"
         class:disabled
         class:dark={$dark}
     >

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

@@ -34,7 +34,7 @@ export type PropType<T extends Types> =
     ]
     : T extends "range" ? [
         [ name: string, type: T, min: number, max: number, step: number ],
-        { name: string; type: T; min: number; max: number, step: number; }
+        { name: string; type: T; min: number; max: number; step: number; }
     ]
     : T extends "tuple" ? [
         // eslint-disable-next-line no-use-before-define

package/components/block/icons/Button.svelte

@@ -3,7 +3,7 @@
     export let scale = false;
 </script>
 
-<div on:click on:keypress {title} class:scale>
+<div on:click on:keypress role="none" {title} class:scale>
     <slot />
 </div>
 

package/components/block/icons/ControlView.svelte

@@ -4,7 +4,7 @@
 <svg viewBox="-50 -50 100 100">
     <rect width="60" height="60" x="-30" y="-30" fill="transparent" />
     <rect
-        x={mode === "props" ? 0 : -20}
+        x={"props" === mode ? 0 : -20}
         class="mv"
         height="40"
         width="20"

package/components/block/icons/Position.svelte

@@ -1,8 +1,8 @@
 <script>export let position = "hidden";
 $:
-  bottom = position === "bottom";
+  bottom = "bottom" === position;
 $:
-  right = position === "right";
+  right = "right" === position;
 </script>
 
 <svg viewBox="-50 -50 100 100">

package/components/layout/Container.svelte

@@ -5,8 +5,8 @@ export let vertical = false;
 export let offset = 4;
 export let b = false;
 export let persistent = false;
-let width;
-let height;
+let width = null;
+let height = null;
 const { position, draggable } = createDraggable(offset);
 $:
   span = vertical ? width : height;
@@ -50,6 +50,12 @@ const check = (v, flag, s) => {
     return v > min;
   }
 };
+const title = (v, b2) => {
+  if (v) {
+    return b2 ? "left" : "right";
+  }
+  return b2 ? "top" : "bottom";
+};
 </script>
 
 <div
@@ -66,14 +72,14 @@ const check = (v, flag, s) => {
 >
     {#if width != null && height != null}
         <div style:grid-area="A">
-            {#if persistent || check($off, !b, span)}
+            {#if persistent || check($off, !b, span ?? 0)}
                 <slot name="A" />
             {/if}
         </div>
         <div class="divider">
             <div
                 class="overlay"
-                title={`Collapse ${vertical ? (b ? "left" : "right") : b ? "top" : "bottom"}`}
+                title={`Collapse ${title(vertical, b)}`}
                 use:draggable={{
                     reset: () => offset,
                     reversed: !b,
@@ -85,7 +91,7 @@ const check = (v, flag, s) => {
             />
         </div>
         <div style:grid-area="B">
-            {#if persistent || check($off, b, span)}
+            {#if persistent || check($off, b, span ?? 0)}
                 <slot name="B" />
             {/if}
         </div>

package/components/layout/DocLayout.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Readable, Writable } from "svelte/store";
 type Settings = {
-    data: string[];
-    current: Readable<string | null>;
-    offset: Writable<number>;
-    theme: Writable<"dark" | "light">;
-    panel: Writable<"bottom" | "right">;
-    navigate: (e: {
+    readonly data: readonly string[];
+    readonly current: Readable<string | null>;
+    readonly offset: Writable<number>;
+    readonly theme: Writable<"dark" | "light">;
+    readonly panel: Writable<"bottom" | "right">;
+    readonly navigate: (e: {
         detail: string;
     }) => Promise<void>;
 };

package/components/layout/Layout.svelte

@@ -34,7 +34,7 @@ $:
 const panelChange = (info) => {
   if (info != null) {
     const i = get(info);
-    if (panelOffset == 4) {
+    if (4 === panelOffset) {
       if (i.props.length > 0) {
         panelOffset = 250;
         mode = "props";
@@ -81,7 +81,7 @@ $:
                 </Scrollable>
             </svelte:fragment>
             <svelte:fragment slot="B">
-                <Container vertical={panel === "right"} persistent bind:offset={panelOffset}>
+                <Container vertical={"right" === panel} persistent bind:offset={panelOffset}>
                     <svelte:fragment slot="A">
                         <Scrollable>
                             <Content>

package/components/layout/Layout.svelte.d.ts

@@ -3,7 +3,7 @@ import type { Sorter, Renamer } from "../navigation/types";
 import { type Theme } from "../context";
 declare const __propDef: {
     props: {
-        data: string[];
+        data: readonly string[];
         current?: string | null | undefined;
         sorter?: Sorter | null | undefined;
         renamer?: Renamer | null | undefined;
@@ -12,7 +12,7 @@ declare const __propDef: {
         panel?: "right" | "bottom" | undefined;
     };
     events: {
-        navigate: CustomEvent<any>;
+        navigate: CustomEvent<string>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/layout/ThemeToggle.svelte

@@ -4,7 +4,7 @@ import ThemeIcon from "./icons/Theme.svelte";
 export let theme;
 const dark = getTheme();
 const toggle = () => {
-  if (theme !== void 0) {
+  if (void 0 !== theme) {
     theme = $dark ? "light" : "dark";
   } else {
     $dark = !$dark;
@@ -13,5 +13,5 @@ const toggle = () => {
 </script>
 
 <Icon on:click={toggle}>
-    <ThemeIcon dark={theme === undefined ? $dark : theme === "dark"} />
+    <ThemeIcon dark={undefined === theme ? $dark : "dark" === theme} />
 </Icon>

package/components/layout/icons/Icon.svelte

@@ -1,7 +1,7 @@
 <script>export let title = void 0;
 </script>
 
-<div class="icon" on:click on:keypress {title}>
+<div class="icon" on:click on:keypress {title} role="none">
     <slot />
 </div>
 

package/components/navigation/Nav.svelte

@@ -9,7 +9,7 @@ const apply = (paths, init, pre, next, post) => {
     let t = retval;
     for (let i = 1; i < parts.length; ++i) {
       const part = parts[i];
-      if (null == t[part]) {
+      if (!(part in t)) {
         t[part] = init();
       }
       if (i !== parts.length - 1) {

package/components/navigation/Nav.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         renamer: Renamer;
     };
     events: {
-        navigate: CustomEvent<any>;
+        navigate: CustomEvent<string>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/navigation/Node.svelte

@@ -31,6 +31,7 @@ const click = (link) => {
         class="header"
         on:click={() => click(value.url)}
         on:keypress={null}
+        role="none"
         {style}
         class:selected={selected === value.url}
         class:paged={value.url != null}
@@ -41,7 +42,7 @@ const click = (link) => {
         <span>{renamer(key)}</span>
     </div>
     {#if expand || states.expanded}
-        <div class="sub" transition:slide|local>
+        <div class="sub" transition:slide>
             {#each sort(value.sub, sorter) as [k, v] (k)}
                 <svelte:self
                     key={k}

package/components/navigation/Node.svelte.d.ts

@@ -12,7 +12,7 @@ declare const __propDef: {
         renamer: Renamer;
     };
     events: {
-        navigate: CustomEvent<any>;
+        navigate: CustomEvent<string>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/navigation/Tree.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
         selected: string;
     };
     events: {
-        navigate: CustomEvent<any>;
+        navigate: CustomEvent<string>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@nil-/doc",
-  "version": "0.3.4",
+  "version": "1.0.0",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
   },
   "license": "ISC",
   "peerDependencies": {
-    "svelte": "^3.58.0"
+    "svelte": "^4.0.3"
   },
   "keywords": [
     "svelte",