@nil-/doc 0.2.25 → 0.2.27

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nil-/doc
 
+## 0.2.27
+
+### Patch Changes
+
+-   [doc] fix fira code css import ([#35](https://github.com/njaldea/mono/pull/35))
+
+## 0.2.26
+
+### Patch Changes
+
+-   [doc] removed fallback page in documentation ([#30](https://github.com/njaldea/mono/pull/30))
+
 ## 0.2.25
 
 ### Patch Changes

package/components/Layout.svelte

@@ -14,10 +14,7 @@
     }
 
     /* reset block */
-    @font-face {
-        font-family: "Fira Code";
-        src: url("https://fonts.googleapis.com/css?family=Fira Code");
-    }
+    @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
 
     .reset {
         width: 100%;
@@ -58,11 +55,12 @@ export let data;
 export let current = null;
 export let sorter = null;
 export let renamer = null;
-export let theme = undefined;
+export let theme = void 0;
 const r = inRoot();
 const parentTheme = getTheme();
 const isDark = initTheme();
-$: $isDark = evalTheme(parentTheme ? $parentTheme : true, theme);
+$:
+  $isDark = evalTheme(parentTheme ? $parentTheme : true, theme);
 </script>
 <div class="layout" class:reset={r} class:dark={$isDark}>
     <Container offset={250} padding={250} vertical secondary>

package/components/block/Block.svelte

@@ -6,10 +6,7 @@
     }
 
     /* reset block */
-    @font-face {
-        font-family: "Fira Code";
-        src: url("https://fonts.googleapis.com/css?family=Fira Code");
-    }
+    @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
 
     .reset {
         width: 100%;
@@ -30,7 +27,13 @@
     }
 </style>
 
-<script>import { initParams, initCurrent, initDefaults, initControls, initControlsState } from "./context";
+<script>import {
+  initParams,
+  initCurrent,
+  initDefaults,
+  initControls,
+  initControlsState
+} from "./context";
 import { inRoot, getTheme, initTheme, evalTheme } from "../context";
 initParams();
 initCurrent();
@@ -38,10 +41,11 @@ initDefaults();
 initControls();
 initControlsState();
 const r = inRoot();
-export let theme = undefined;
+export let theme = void 0;
 const parentTheme = getTheme();
 const isDark = initTheme();
-$: $isDark = evalTheme(parentTheme ? $parentTheme : false, theme);
+$:
+  $isDark = evalTheme(parentTheme ? $parentTheme : false, theme);
 </script>
 <div class:reset={r} class:dark={$isDark}>
     <slot />

package/components/block/Controls.svelte

@@ -5,5 +5,6 @@ export let expand = false;
 const controls = getControls();
 $controls = props;
 const state = getControlsState();
-$: $state.expand = expand;
+$:
+  $state.expand = expand;
 </script>

package/components/block/Params.svelte

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

package/components/block/Template.svelte

@@ -78,29 +78,19 @@ const controls = getControls();
 const controlsState = getControlsState();
 const defaultsStore = getDefaults();
 const isDark = getTheme();
-export let defaults = undefined;
+export let defaults = void 0;
 export let noreset = false;
 export let columns = false;
 function reset() {
-    $params = [];
-    $defaultsStore = defaults;
+  $params = [];
+  $defaultsStore = defaults;
 }
-$: $defaultsStore, reset();
+$:
+  $defaultsStore, reset();
 let hovered = null;
-/**
- * This flag is to rerender the whole slot component.
- * If the control is disabled, we use the default value provided from the defaults field.
- * If the value of a prop is undefined, we will have to forward this value to the slot.
- * Problem is, if the slot component has a default value set, it is only
- * evaluated during component creation, not in subsequent updates.
- *
- * The solution is to rerender the whole slot whenever there is an control update.
- *
- * Similar case to: https://github.com/sveltejs/svelte/issues/4442
- */
 let key = false;
-beforeUpdate(() => (key = !key));
-const resolveArgs = (resolve);
+beforeUpdate(() => key = !key);
+const resolveArgs = resolve;
 </script>
 <div class="template" class:columns>
     {#each $params as param (param.id)}

package/components/block/controls/Component.svelte

@@ -6,9 +6,6 @@ import Switch from "./Switch.svelte";
 import Select from "./Select.svelte";
 import Tuple from "./Tuple.svelte";
 import Object from "./Object.svelte";
-// 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 info;
 export let depth;

package/components/block/controls/Number.svelte

@@ -5,8 +5,9 @@ export let info;
 export let depth;
 export let disabled = false;
 let ivalue = value ?? getDefault(info);
-let enabled = value !== undefined;
-$: value = enabled && !disabled ? ivalue : undefined;
+let enabled = value !== void 0;
+$:
+  value = enabled && !disabled ? ivalue : void 0;
 </script>
 <div>
     <div style:padding-left={`${depth}px`}>- {info.name}</div>

package/components/block/controls/Object.svelte

@@ -7,8 +7,9 @@ export let info;
 export let depth;
 export let disabled = false;
 let ivalue = value ?? getObjectDefaults(info);
-let enabled = value !== undefined;
-$: value = !disabled && enabled ? ivalue : undefined;
+let enabled = value !== void 0;
+$:
+  value = !disabled && enabled ? ivalue : void 0;
 </script>
 <Header name={info.name} bind:checked={enabled} {depth} {disabled} />
 {#if enabled && !disabled}

package/components/block/controls/Range.svelte

@@ -38,8 +38,9 @@ export let info;
 export let depth;
 export let disabled = false;
 let ivalue = value ?? getDefault(info);
-let enabled = value !== undefined;
-$: value = enabled && !disabled ? ivalue : undefined;
+let enabled = value !== void 0;
+$:
+  value = enabled && !disabled ? ivalue : void 0;
 </script>
 <div>
     <div style:padding-left={`${depth}px`}>- {info.name}</div>

package/components/block/controls/Select.svelte

@@ -5,8 +5,9 @@ export let info;
 export let depth;
 export let disabled = false;
 let ivalue = value ?? getDefault(info);
-let enabled = value !== undefined;
-$: value = enabled && !disabled ? ivalue : undefined;
+let enabled = value !== void 0;
+$:
+  value = enabled && !disabled ? ivalue : void 0;
 </script>
 <div>
     <div style:padding-left={`${depth}px`}>- {info.name}</div>

package/components/block/controls/Switch.svelte

@@ -5,8 +5,9 @@ export let info;
 export let depth;
 export let disabled = false;
 let ivalue = value ?? getDefault(info);
-let enabled = value !== undefined;
-$: value = enabled && !disabled ? ivalue : undefined;
+let enabled = value !== void 0;
+$:
+  value = enabled && !disabled ? ivalue : void 0;
 </script>
 <div>
     <div style:padding-left={`${depth}px`}>- {info.name}</div>

package/components/block/controls/Text.svelte

@@ -5,8 +5,9 @@ export let info;
 export let depth;
 export let disabled = false;
 let ivalue = value ?? getDefault(info);
-let ienabled = value !== undefined;
-$: value = ienabled && !disabled ? ivalue : undefined;
+let ienabled = value !== void 0;
+$:
+  value = ienabled && !disabled ? ivalue : void 0;
 </script>
 <div>
     <div style:padding-left={`${depth}px`}>- {info.name}</div>

package/components/block/controls/Tuple.svelte

@@ -7,8 +7,9 @@ export let info;
 export let depth;
 export let disabled = false;
 let ivalue = value ?? getTupleDefaults(info);
-let enabled = value !== undefined;
-$: value = !disabled && enabled ? ivalue : undefined;
+let enabled = value !== void 0;
+$:
+  value = !disabled && enabled ? ivalue : void 0;
 </script>
 <Header name={info.name} bind:checked={enabled} {depth} {disabled} />
 {#if enabled && !disabled}

package/components/etc/Container.svelte

@@ -72,29 +72,27 @@
 import { createDraggable } from "./action";
 import { getTheme } from "../context";
 const isDark = getTheme();
-// orientation of the layout
 export let vertical = false;
-// initial value where the divider is located
 export let offset = 0;
-// when secondary is enabled, main focus will be the secondary slot
-// collapsing will hide the primary slot
 export let secondary = false;
-// min distance of divider to the edges
 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) {
-        return;
-    }
-    const span = vertical ? w : h;
-    offset = Math.max(Math.min(value, span - limit), limit);
+  if (w == null || h == null || collapse) {
+    return;
+  }
+  const span = vertical ? w : h;
+  offset = Math.max(Math.min(value, span - limit), limit);
 }
-$: update(width, height, padding, $position);
-$: offsetpx = collapse ? "10px" : `${offset}px`;
-$: style = !secondary ? `auto 0px ${offsetpx}` : `${offsetpx} 0px auto`;
+$:
+  update(width, height, padding, $position);
+$:
+  offsetpx = collapse ? "10px" : `${offset}px`;
+$:
+  style = !secondary ? `auto 0px ${offsetpx}` : `${offsetpx} 0px auto`;
 const moving = writable(false);
 </script>
 <div

package/components/navigation/Nav.svelte

@@ -18,43 +18,53 @@
         height: 20px;
         width: 100%;
     }
+
+    * {
+        box-sizing: border-box;
+        padding: 0px;
+        margin: 0px;
+    }
 </style>
 
 <script context="module">function apply(paths, init, pre, next, post) {
-    const retval = {};
-    for (const path of paths) {
-        const parts = path.split("/");
-        if (parts.length <= 1) {
-            continue;
-        }
-        let t = retval;
-        for (let i = 1; i < parts.length; ++i) {
-            const part = parts[i];
-            if (t[part] == null) {
-                t[part] = init();
-            }
-            if (i !== parts.length - 1) {
-                t[part] = pre(t[part], path);
-            }
-            if (i !== parts.length - 1) {
-                t = next(t[part]);
-            }
-            else if (post) {
-                post(t[part], path);
-            }
-        }
+  const retval = {};
+  for (const path of paths) {
+    const parts = path.split("/");
+    if (parts.length <= 1) {
+      continue;
+    }
+    let t = retval;
+    for (let i = 1; i < parts.length; ++i) {
+      const part = parts[i];
+      if (t[part] == null) {
+        t[part] = init();
+      }
+      if (i !== parts.length - 1) {
+        t[part] = pre(t[part], path);
+      }
+      if (i !== parts.length - 1) {
+        t = next(t[part]);
+      } else if (post) {
+        post(t[part], path);
+      }
     }
-    return retval;
+  }
+  return retval;
 }
 function filt(path, filter, renamer) {
-    return path.includes(filter) || path.split("/").map(renamer).join("/").includes(filter);
+  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;
-    });
+  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;
+    }
+  );
 }
-export {};
 </script>
 <script>import Tree from "./Tree.svelte";
 export let info;
@@ -62,21 +72,27 @@ export let selected;
 export let sorter;
 export let renamer;
 let filter = "";
-let states = apply(info, () => ({ expanded: false, sub: {} }), (t, path) => ({ expanded: t.expanded || selected === path, sub: t.sub }), (t) => t.sub);
-function update(selected) {
-    if (!info.includes(selected)) {
-        return;
-    }
-    let node = states;
-    const paths = selected.split("/").slice(1);
-    for (const [i, p] of paths.entries()) {
-        if (i < paths.length - 1) {
-            node[p].expanded = true;
-        }
-        node = node[p].sub;
+let states = apply(
+  info,
+  () => ({ expanded: false, sub: {} }),
+  (t, path) => ({ expanded: t.expanded || selected === path, sub: t.sub }),
+  (t) => t.sub
+);
+function update(selected2) {
+  if (!info.includes(selected2)) {
+    return;
+  }
+  let node = states;
+  const paths = selected2.split("/").slice(1);
+  for (const [i, p] of paths.entries()) {
+    if (i < paths.length - 1) {
+      node[p].expanded = true;
     }
+    node = node[p].sub;
+  }
 }
-$: update(selected);
+$:
+  update(selected);
 </script>
 <div class="nav">
     <div class="logo"><slot /></div>

package/components/navigation/Node.svelte

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

package/package.json

@@ -1,13 +1,11 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.25",
+  "version": "0.2.27",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
   },
-  "peerDependencies": {
-    "svelte": "^3.55.0"
-  },
+  "license": "ISC",
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^1.0.0",
     "@sveltejs/kit": "^1.0.1",
@@ -15,12 +13,13 @@
     "mdsvex": "^0.10.6",
     "svelte-check": "^2.10.2",
     "svelte-markdown": "^0.2.3",
-    "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
-    "vite": "^4.0.1"
+    "vite": "^4.0.2"
+  },
+  "peerDependencies": {
+    "svelte": "^3.55.0"
   },
-  "type": "module",
   "publishConfig": {
     "linkDirectory": true
   },
@@ -29,7 +28,7 @@
     "documentation",
     "component"
   ],
-  "license": "ISC",
+  "type": "module",
   "exports": {
     "./package.json": "./package.json",
     ".": "./index.js",