├── .editorconfig
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── inspect
    ├── Echo.svelte
    ├── Formatter.svelte
    ├── Getter.svelte
    ├── Inspect.svelte
    ├── PrimitiveBase.svelte
    ├── Property.svelte
    ├── PropertyList.svelte
    ├── Toggle.svelte
    ├── focus-actions.js
    ├── formatters
    │   ├── ArrayFormatter.svelte
    │   ├── BigIntFormatter.svelte
    │   ├── BooleanFormatter.svelte
    │   ├── DateFormatter.svelte
    │   ├── ElementFormatter.svelte
    │   ├── ErrorFormatter.svelte
    │   ├── FallbackFormatter.svelte
    │   ├── FunctionFormatter.svelte
    │   ├── MapEntry.svelte
    │   ├── MapFormatter.svelte
    │   ├── NilFormatter.svelte
    │   ├── NumberFormatter.svelte
    │   ├── ObjectFormatter.svelte
    │   ├── RegExpFormatter.svelte
    │   ├── SetFormatter.svelte
    │   ├── StringFormatter.svelte
    │   ├── SymbolFormatter.svelte
    │   └── TypedArrayFormatter.svelte
    └── utilities.js
├── package.json
└── svelte-inspect.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | [*]
 2 | charset = utf-8
 3 | end_of_line = lf
 4 | insert_final_newline = true
 5 | trim_trailing_whitespace = true
 6 | 
 7 | indent_style = space
 8 | indent_size = 2
 9 | 
10 | root = true
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | public/bundle.*
4 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | ## 0.1.3
 4 | - Fix repeated slot names, which are no longer supported by Svelte.
 5 | 
 6 | ## 0.1.2
 7 | - Support configuration even in SSR mode.
 8 | - Clean up MapEntry.svelte to avoid unused CSS warning.
 9 | 
10 | ## 0.1.1
11 | - Allow logging a single value with `<Inspect.Value value={foo} />`, without formatting as a variable.
12 | - Print sequences of whitespace correctly in strings, object keys, regex source, element attribute values and Symbol keys
13 | - Add formatters for Map and Set
14 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 trbrc
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Svelte Inspect
  2 | 
  3 | Live & interactive object inspector for [Svelte](https://svelte.dev), inspired by DevTools.
  4 | 
  5 | ```console
  6 | npm install --save svelte-inspect
  7 | ```
  8 | 
  9 | Try the example in the [svelte.dev REPL](https://svelte.dev/repl/eb3b3ae5639544d78d7363e126b29896). Use mouse and keyboard to inspect the todos.
 10 | 
 11 | ```html
 12 | <script>
 13 |   import Todos from './Todos.svelte';
 14 | 
 15 |   // You have some data you want to inspect
 16 |   let todos = [
 17 |     {done: false, text: 'Import svelte-inspect'},
 18 |     {done: false, text: 'Pass any number of values to it'},
 19 |     {done: false, text: 'See them update live'}
 20 |   ];
 21 | 
 22 |   // Simply import svelte-inspect…
 23 |   import Inspect from 'svelte-inspect';
 24 | </script>
 25 | 
 26 | <!-- …and add an inspector anywhere on your page -->
 27 | <Inspect {todos} />
 28 | 
 29 | <Todos bind:todos={todos} />
 30 | ```
 31 | 
 32 | ## Types
 33 | 
 34 | See [REPL demo of most of the types](https://svelte.dev/repl/06f3a93da3454c6982aa5a38c541a5b0). These types have special formatting:
 35 | 
 36 | - Arrays (including TypedArrays)
 37 | - Objects
 38 | - Functions (including async functions)
 39 | - Classes
 40 | - Map and Set
 41 | - RegExps
 42 | - Dates
 43 | - Booleans
 44 | - undefined and null
 45 | - Numbers (including BigInt)
 46 | - Strings
 47 | - Symbols
 48 | - Errors
 49 | - HTML elements
 50 | 
 51 | There's support for enumerable and non-enumerable properties, symbol keys, `__proto__`, and getters (click to evaluate). It does not yet have any special support for e.g. iterators, promises.
 52 | 
 53 | ## Keyboard navigation
 54 | 
 55 | You can use your keyboard to move around in the object hierarchy.
 56 | 
 57 | Keys | | Action
 58 | :--- | :--- | :---
 59 | <kbd>A</kbd>…<kbd>Z</kbd> <kbd>0</kbd>…<kbd>9</kbd> | Type anything | Jump using fuzzy matching
 60 | <kbd>⇥</kbd> | Tab | Focus next
 61 | <kbd>⇧</kbd><kbd>⇥</kbd> | Shift + Tab | Focus previous
 62 | <kbd>⯇</kbd> | Left | Close or step out
 63 | <kbd>⯈</kbd> | Right | Open or step in
 64 | <kbd>⯅</kbd> | Up | Focus previous
 65 | <kbd>⯆</kbd> | Down | Focus next
 66 | <kbd>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</kbd> | Space | Toggle
 67 | <kbd>↵</kbd> | Enter | Open & step in
 68 | <kbd>esc</kbd> | Escape | Step out
 69 | 
 70 | ## API
 71 | 
 72 | ### `Inspect`
 73 | 
 74 | Create one inspector for every value passed in as a prop, with default colors.
 75 | 
 76 | ```html
 77 | <script>
 78 |   import Inspect from 'svelte-inspect';
 79 | </script>
 80 | 
 81 | <Inspect value={'foo'} {value2} {...etc} />
 82 | ```
 83 | 
 84 | ### `Inspect.Value`
 85 | 
 86 | Inspect a single `value`, without showing the name of the prop. Also takes an optional `depth` directly as a prop.
 87 | 
 88 | ```html
 89 | <script>
 90 |   import Inspect from 'svelte-inspect';
 91 | 
 92 |   /* Or as a named import:
 93 |   import {Value} from 'svelte-inspect';
 94 |   */
 95 | </script>
 96 | 
 97 | <Inspect.Value value={'foo'} depth={2} />
 98 | ```
 99 | 
100 | ### `Inspect.Inverted`
101 | 
102 | Inspector with color palette suitable for dark backgrounds.
103 | 
104 | ```html
105 | <script>
106 |   import Inspect from 'svelte-inspect';
107 | 
108 |   /* Or as a named import:
109 |   import {Inverted} from 'svelte-inspect';
110 |   */
111 | </script>
112 | 
113 | <Inspect.Inverted value={'foo'} {value2} {...etc} />
114 | ```
115 | 
116 | ### `Inspect[0-10]`
117 | 
118 | Inspectors pre-configured with `{depth: 0-10}`.
119 | 
120 | ```html
121 | <script>
122 |   import Inspect from 'svelte-inspect';
123 | </script>
124 | 
125 | <Inspect[2] {document} />
126 | ```
127 | 
128 | ### `Inspect.configure(configuration)`
129 | 
130 | Create an inspect component with custom configuration.
131 | 
132 | ```html
133 | <script context="module">
134 |   import Inspect from 'svelte-inspect';
135 |   const CustomInspect = Inspect.configure({/* configuration */});
136 | 
137 |   /* Or as a named import:
138 |   import {configure} from 'svelte-inspect';
139 |   const CustomInspect = configure({/* configuration */});
140 |   */
141 | </script>
142 | 
143 | <CustomInspect value={'foo'} />
144 | ```
145 | 
146 | Note the use of [`context="module"`](https://svelte.dev/docs#script_context_module), which is required for the Svelte compiler to understand that `CustomInspector` can be used in the template.
147 | 
148 | The config is WIP. There are currently two options:
149 | 
150 | #### `{depth: number}`
151 | 
152 | Set how many levels of the object hierarchy should start in the open state. Defaults to `1`.
153 | 
154 | ```html
155 | <script context="module">
156 |   import Inspect from 'svelte-inspect';
157 |   const CustomInspect = Inspect.configure({depth: 2});
158 |   const object = {
159 |     foo: {
160 |       array: [1, 2, 3]
161 |     }
162 |   };
163 | </script>
164 | 
165 | <!-- 2 levels deep – will show `foo` and `array` but not `[1, 2, 3]` -->
166 | <CustomInspect {object} />
167 | ```
168 | 
169 | Non-enumerable properties will not be opened.
170 | 
171 | #### `{palette: {...colors}}`
172 | 
173 | Create a component with a customized color palette. Values are any valid CSS color, keys are `red`, `blue`, `green`, `purple`, `orange`, `yellow`, `brown`, `pink`, `gray`, `black`, `white` and `selection` (note that not all of these colors are currently used).
174 | 
175 | *(work in progress; expect to change)*
176 | 
177 | ```html
178 | <script context="module">
179 |   import Inspect from 'svelte-inspect';
180 |   const CustomInspect = Inspect.configure({
181 |     palette: {
182 |       selection: 'hotpink',
183 |       blue: 'dodgerblue'
184 |     }
185 |   });
186 | </script>
187 | ```
188 | 


--------------------------------------------------------------------------------
/inspect/Echo.svelte:
--------------------------------------------------------------------------------
1 | <!-- Helper to avoid whitespace between inline elements -->
2 | <slot name=1 /><slot name=2 /><slot name=3 /><slot name=4 />
3 | 


--------------------------------------------------------------------------------
/inspect/Formatter.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let depth = 0;
 3 |   export let value;
 4 | 
 5 |   import * as NilFormatter from './formatters/NilFormatter.svelte';
 6 |   import * as BooleanFormatter from './formatters/BooleanFormatter.svelte';
 7 |   import * as SymbolFormatter from './formatters/SymbolFormatter.svelte';
 8 |   import * as NumberFormatter from './formatters/NumberFormatter.svelte';
 9 |   import * as BigIntFormatter from './formatters/BigIntFormatter.svelte';
10 |   import * as StringFormatter from './formatters/StringFormatter.svelte';
11 |   import * as FunctionFormatter from './formatters/FunctionFormatter.svelte';
12 |   import * as RegExpFormatter from './formatters/RegExpFormatter.svelte';
13 |   import * as DateFormatter from './formatters/DateFormatter.svelte';
14 |   import * as ErrorFormatter from './formatters/ErrorFormatter.svelte';
15 |   import * as ArrayFormatter from './formatters/ArrayFormatter.svelte';
16 |   import * as TypedArrayFormatter from './formatters/TypedArrayFormatter.svelte';
17 |   import * as ElementFormatter from './formatters/ElementFormatter.svelte';
18 |   import * as MapFormatter from './formatters/MapFormatter.svelte';
19 |   import * as SetFormatter from './formatters/SetFormatter.svelte';
20 |   import * as ObjectFormatter from './formatters/ObjectFormatter.svelte';
21 |   import * as FallbackFormatter from './formatters/FallbackFormatter.svelte';
22 | 
23 |   const formatterModules = [
24 |     NilFormatter,
25 |     BooleanFormatter,
26 |     SymbolFormatter,
27 |     NumberFormatter,
28 |     BigIntFormatter,
29 |     StringFormatter,
30 |     FunctionFormatter,
31 |     RegExpFormatter,
32 |     DateFormatter,
33 |     ErrorFormatter,
34 |     ArrayFormatter,
35 |     TypedArrayFormatter,
36 |     ElementFormatter,
37 |     MapFormatter,
38 |     SetFormatter,
39 |     ObjectFormatter,
40 |     FallbackFormatter,
41 |   ];
42 | 
43 |   let component;
44 |   let spread = {};
45 | 
46 |   $: valueTypeOf = typeof value;
47 |   $: valuePrototype = value ? Object.getPrototypeOf(value) : undefined;
48 | 
49 |   $: for (const formatterModule of formatterModules) {
50 |     let match = false;
51 |     if (formatterModule.check) {
52 |       match = formatterModule.check(value);
53 |     } else if (formatterModule.typeOf) {
54 |       match = valueTypeOf === formatterModule.typeOf;
55 |     } else if (formatterModule.type) {
56 |       match = valuePrototype === formatterModule.type.prototype;
57 |     }
58 |     if (match) {
59 |       component = formatterModule.default;
60 |       if (formatterModule.hasDepthProp) {
61 |         spread = {depth};
62 |       }
63 |       break;
64 |     }
65 |   }
66 | </script>
67 | 
68 | <svelte:component this={component} {value} {...spread}><slot /></svelte:component>
69 | 


--------------------------------------------------------------------------------
/inspect/Getter.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let descriptor = {};
 3 |   export let context = {};
 4 |   let getterValue;
 5 |   let hasGottenResult = false;
 6 | 
 7 |   let getterError;
 8 |   let hasError = false;
 9 | 
10 |   const callGetter = () => {
11 |     try {
12 |       getterValue = descriptor.get.call(context);
13 |       hasGottenResult = true;
14 |       focusPrev();
15 |       onTick(focusNext);
16 |     } catch (error) {
17 |       getterError = error;
18 |       hasError = true;
19 |     }
20 |   };
21 | 
22 |   import {onTick} from './utilities.js';
23 |   import {focusPrev, focusNext} from './focus-actions.js';
24 |   import Formatter from './Formatter.svelte';
25 |   import Toggle from './Toggle.svelte';
26 | </script>
27 | 
28 | {#if hasGottenResult}
29 |   <Formatter value={getterValue}>
30 |     <span class=prefix>get</span>
31 |     <slot />
32 |   </Formatter>
33 | {:else}
34 |   <Toggle
35 |     className=getter-toggle
36 |     on:open={callGetter}
37 |   >
38 |     <span class=prefix>get</span>
39 |     <slot />
40 |     {#if hasError}
41 |       <span class=error>{getterError}</span>
42 |     {:else}
43 |       (<span class=on-intent>…</span>)
44 |     {/if}
45 |   </Toggle>
46 | {/if}
47 | 
48 | <style>
49 |   .prefix {
50 |     color: var(--color-gray);
51 |     font-style: italic;
52 |   }
53 |   .error {
54 |     color: var(--color-red);
55 |     font-style: italic;
56 |   }
57 |   .on-intent {
58 |     display: none;
59 |   }
60 |   :global(.getter-toggle:hover) > .on-intent,
61 |   :global(.getter-toggle:focus) > .on-intent {
62 |     display: inline;
63 |   }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/inspect/Inspect.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Property from './Property.svelte';
 3 |   import Formatter from './Formatter.svelte';
 4 | 
 5 |   const getConfiguration = props => {
 6 |     const userConfiguration = props[Symbol.for('configuration')] || {};
 7 |     return {
 8 |       depth: 1,
 9 |       palette: {},
10 |       ...userConfiguration
11 |     };
12 |   };
13 | 
14 |   let {depth, palette, valueOnly} = getConfiguration($$props);
15 | 
16 |   $: colors = Object.keys(palette);
17 |   $: style = colors.map(color => `--color-${color}: ${palette[color]};`).join('');
18 | 
19 |   $: propKeys = Object.keys($$props);
20 |   $: block = propKeys.length > 1;
21 |   $: inline = valueOnly || !block;
22 |   $: semicolon = !valueOnly;
23 | </script>
24 | 
25 | {#if valueOnly}
26 |   <span class=inspect class:inline {style}>
27 |     <Formatter
28 |       depth={$$props.depth || depth}
29 |       value={$$props.value}
30 |     />
31 |   </span>
32 | {:else}
33 |   {#each propKeys as key}
34 |     <span class=inspect class:block class:inline class:semicolon {style}>
35 |       <Property
36 |         depth={depth}
37 |         key={key}
38 |         context={null}
39 |         descriptor={Object.getOwnPropertyDescriptor($$props, key)}
40 |         separator=" = "
41 |       />
42 |     </span>
43 |   {/each}
44 | {/if}
45 | 
46 | <style>
47 |   .inspect {
48 |     font-family:
49 |       Menlo,
50 |       Consolas,
51 |       Lucida Console,
52 |       Courier New,
53 |       Dejavu Sans Mono,
54 |       monospace;
55 |     font-size: 11px;
56 |     line-height: 1.35;
57 |     color: var(--color-black);
58 | 
59 |     --color-red: darkred;
60 |     --color-blue: darkblue;
61 |     --color-green: darkgreen;
62 |     --color-purple: purple;
63 |     --color-orange: darkorange;
64 |     --color-yellow: gold;
65 |     --color-brown: darkgoldenrod;
66 |     --color-pink: hotpink;
67 |     --color-gray: #a0a0a0;
68 |     --color-black: #202020;
69 |     --color-white: #f0f0f0;
70 | 
71 |     --color-selection: lightskyblue;
72 |   }
73 |   .semicolon:after {
74 |     content: ' ; ';
75 |     margin-left: -1ex;
76 |     pointer-events: none;
77 |     color: var(--color-black);
78 |   }
79 |   .block {
80 |     display: block;
81 |   }
82 |   .inline {
83 |     display: inline;
84 |   }
85 | </style>
86 | 


--------------------------------------------------------------------------------
/inspect/PrimitiveBase.svelte:
--------------------------------------------------------------------------------
 1 | <!-- Base for "non-object" values -->
 2 | 
 3 | <script>
 4 |   export let value;
 5 | 
 6 |   let isOpen = false;
 7 | 
 8 |   import Toggle from './Toggle.svelte';
 9 |   import PropertyList from './PropertyList.svelte';
10 | </script>
11 | 
12 | <Toggle className=toggle bind:isOpen>
13 |   <slot {isOpen} />
14 |   {#if !isOpen}
15 |     <span class=on-intent>…</span>
16 |   {:else}
17 |     &lcub;
18 |   {/if}
19 | </Toggle>
20 | 
21 | {#if isOpen}
22 |   <PropertyList
23 |     {value}
24 |   />
25 |   &rcub;
26 | {/if}
27 | 
28 | <style>
29 |   .on-intent {
30 |     display: none;
31 |   }
32 |   :global(.toggle:hover) > .on-intent,
33 |   :global(.toggle:focus) > .on-intent {
34 |     display: inline;
35 |   }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/inspect/Property.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import {keyIsIndex} from './utilities.js';
 3 | 
 4 |   export let depth = 0;
 5 |   export let key;
 6 |   export let context;
 7 |   export let descriptor = {};
 8 |   export let separator;
 9 | 
10 |   $: enumerable = descriptor.enumerable;
11 |   $: getter = descriptor.get;
12 |   $: value = descriptor.value;
13 | 
14 |   import Formatter from './Formatter.svelte';
15 |   import Getter from './Getter.svelte';
16 | </script>
17 | 
18 | <svelte:component
19 |   this={getter ? Getter : Formatter}
20 |   {...(getter ? {descriptor, context} : {value, depth: enumerable ? depth : 0})}
21 | >
22 |   <span class=key class:enumerable class:index={keyIsIndex(key)}>
23 |     <span class=pre>{String(key)}</span><span class=separator>{separator}</span>
24 |   </span>
25 | </svelte:component>
26 | 
27 | <style>
28 |   .pre {
29 |     white-space: pre-wrap;
30 |   }
31 |   .key {
32 |     color: var(--color-purple);
33 |   }
34 |   .key.index {
35 |     color: var(--color-gray);
36 |   }
37 |   .key:not(.enumerable) {
38 |     opacity: 0.5;
39 |   }
40 |   .separator {
41 |     color: var(--color-black);
42 |   }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/inspect/PropertyList.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import {onTick, isNil, getAllProperties, getPropertyDescriptor} from './utilities.js';
 3 | 
 4 |   export let depth = 0;
 5 |   export let value;
 6 | 
 7 |   $: properties = isNil(value) ? [] : getAllProperties(value);
 8 |   $: nextDepth = Math.max(0, depth - 1);
 9 | 
10 |   const paging = 100;
11 |   let maxCount = paging;
12 | 
13 |   import {scope, focusPrev, focusNext} from './focus-actions.js';
14 |   import Property from './Property.svelte';
15 |   import Toggle from './Toggle.svelte';
16 | </script>
17 | 
18 | <span use:scope>
19 |   {#each properties.slice(0, maxCount) as property (property)}
20 |     <div class=row>
21 |       <pre class=indentation>&nbsp;&nbsp;</pre>
22 |       <span class=item>
23 |         <Property
24 |           depth={nextDepth}
25 |           key={property}
26 |           context={value}
27 |           descriptor={getPropertyDescriptor(value, property)}
28 |           separator=': '
29 |         />
30 |       </span>
31 |     </div>
32 |   {:else}
33 |     <div class=row>
34 |       <pre class=indentation>&nbsp;&nbsp;</pre>
35 |       <span class=empty><slot>No properties</slot></span>
36 |     </div>
37 |   {/each}
38 |   {#if maxCount < properties.length}
39 |     {#each {length: 1} as _ (maxCount)}
40 |       <div class=row>
41 |         <pre class=indentation>&nbsp;&nbsp;</pre>
42 |         <Toggle
43 |           on:open={() => {
44 |             maxCount += paging;
45 |             focusPrev();
46 |             onTick(focusNext);
47 |           }}
48 |         >
49 |           Show {maxCount} … {Math.min(properties.length, maxCount + paging - 1)} of {properties.length} properties
50 |         </Toggle>
51 |       </div>
52 |     {/each}
53 |   {/if}
54 | </span>
55 | 
56 | <style>
57 |   .row {
58 |     display: flex;
59 |   }
60 |   .row:not(:last-child) > .item:after {
61 |     content: ' , ';
62 |     margin-left: -1ex;
63 |     pointer-events: none;
64 |     color: var(--color-black);
65 |   }
66 |   .indentation {
67 |     margin: 0;
68 |     padding: 0;
69 |     display: inline-block;
70 |   }
71 |   .empty {
72 |     color: var(--color-gray);
73 |     font-style: italic;
74 |   }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/inspect/Toggle.svelte:
--------------------------------------------------------------------------------
  1 | <script context=module>
  2 |   let typingBuffer = '';
  3 |   let hasSearchBufferTimeout = false;
  4 |   let clearBufferTimeout;
  5 |   function type(char) {
  6 |     typingBuffer += char;
  7 |     if (!hasSearchBufferTimeout) {
  8 |       hasSearchBufferTimeout = true;
  9 |       setTimeout(() => {
 10 |         hasSearchBufferTimeout = false;
 11 |         focusBySearch(typingBuffer);
 12 |       }, 100);
 13 |     }
 14 |     clearTimeout(clearBufferTimeout);
 15 |     clearBufferTimeout = setTimeout(() => {
 16 |       typingBuffer = '';
 17 |     }, 600);
 18 |   }
 19 | </script>
 20 | 
 21 | <script>
 22 |   import { createEventDispatcher } from 'svelte';
 23 | 
 24 |   const dispatch = createEventDispatcher();
 25 | 
 26 |   import {onTick} from './utilities.js';
 27 |   import {target, focusPrev, focusNext, exitFocusScope, enterFocusScope, focusBySearch} from './focus-actions.js';
 28 | 
 29 |   export let className = '';
 30 |   export let isOpen = false;
 31 |   const toggle = (bool = !isOpen) => {
 32 |     isOpen = bool;
 33 |     dispatch('open', bool);
 34 |   };
 35 | 
 36 |   const onKeyDown = keydownEvent => {
 37 |     let shouldPreventDefault = true;
 38 |     switch (keydownEvent.code) {
 39 |       case 'Space': {
 40 |         toggle();
 41 |         break;
 42 |       }
 43 |       case 'ArrowUp': {
 44 |         focusPrev();
 45 |         break;
 46 |       }
 47 |       case 'ArrowDown': {
 48 |         focusNext();
 49 |         break;
 50 |       }
 51 |       case 'Escape': {
 52 |         exitFocusScope();
 53 |         break;
 54 |       }
 55 |       case 'ArrowLeft': {
 56 |         if (isOpen) {
 57 |           toggle(false);
 58 |         } else {
 59 |           exitFocusScope();
 60 |         }
 61 |         break;
 62 |       }
 63 |       case 'Enter': {
 64 |         if (!isOpen) {
 65 |           toggle(true);
 66 |           focusPrev();
 67 |           onTick(focusNext).then(enterFocusScope);
 68 |         } else {
 69 |           const didFocus = enterFocusScope();
 70 |           if (!didFocus) {
 71 |             toggle(false);
 72 |           }
 73 |         }
 74 |         break;
 75 |       }
 76 |       case 'ArrowRight': {
 77 |         if (!isOpen) {
 78 |           toggle(true);
 79 |         } else {
 80 |           enterFocusScope();
 81 |         }
 82 |         break;
 83 |       }
 84 |       default: {
 85 |         if (keydownEvent.key.length === 1) {
 86 |           type(keydownEvent.key);
 87 |         }
 88 |         shouldPreventDefault = false;
 89 |       }
 90 |     }
 91 |     if (shouldPreventDefault) {
 92 |       keydownEvent.preventDefault();
 93 |     }
 94 |   };
 95 | 
 96 |   import PropertyList from './PropertyList.svelte';
 97 | </script>
 98 | 
 99 | <span
100 |   role=button
101 |   use:target
102 |   on:click={event => {
103 |     if (event.detail === 1) {
104 |       toggle();
105 |     } else if (isOpen && event.detail === 2) {
106 |       enterFocusScope();
107 |     }
108 |   }}
109 |   on:keydown={onKeyDown}
110 |   class:toggle={true}
111 |   class={className}
112 | >
113 |   <slot />
114 | </span>
115 | 
116 | <style>
117 |   .toggle {
118 |     cursor: pointer;
119 |   }
120 |   .toggle:focus {
121 |     outline-color: var(--color-selection);
122 |     box-shadow:
123 |       inset 0 0 0 1em var(--color-selection),
124 |       0 0 0 2px var(--color-selection);
125 |     border-radius: 1px;
126 |   }
127 | </style>
128 | 


--------------------------------------------------------------------------------
/inspect/focus-actions.js:
--------------------------------------------------------------------------------
  1 | let serialCounter = 0;
  2 | 
  3 | export function target(element) {
  4 |   // This should probably not be a global serial, but based instead on the scope.
  5 |   element.dataset.focusTarget = serialCounter++;
  6 |   element.tabIndex = 0;
  7 |   const focusEventListener = () => {
  8 |     setFocus(element);
  9 |   };
 10 |   element.addEventListener('focus', focusEventListener);
 11 |   return {
 12 |     destroy() {
 13 |       element.removeEventListener('focus', focusEventListener);
 14 |     }
 15 |   };
 16 | }
 17 | 
 18 | export function scope(element) {
 19 |   element.dataset.focusScope = '';
 20 | }
 21 | 
 22 | const createRangeFrom = element => {
 23 |   const range = document.createRange();
 24 |   range.selectNodeContents(element);
 25 |   return range;
 26 | };
 27 | 
 28 | function getElementBefore(referenceElement, elements) {
 29 |   const range = createRangeFrom(referenceElement);
 30 |   const lastIndex = elements.length - 1;
 31 |   for (let i = lastIndex; i >= 0; i--) {
 32 |     if (range.comparePoint(elements[i], 0) === -1) {
 33 |       return elements[i];
 34 |     }
 35 |   }
 36 |   return elements[lastIndex];
 37 | }
 38 | 
 39 | function getElementAfter(referenceElement, elements) {
 40 |   const range = createRangeFrom(referenceElement);
 41 |   for (let i = 0; i < elements.length; i++) {
 42 |     if (range.comparePoint(elements[i], 0) === 1) {
 43 |       return elements[i];
 44 |     }
 45 |   }
 46 |   return elements[0];
 47 | }
 48 | 
 49 | function getTargetBefore(element) {
 50 |   return getElementBefore(
 51 |     element,
 52 |     document.querySelectorAll('[data-focus-target]')
 53 |   );
 54 | }
 55 | 
 56 | function getTargetAfter(element) {
 57 |   return getElementAfter(
 58 |     element,
 59 |     document.querySelectorAll('[data-focus-target]')
 60 |   );
 61 | }
 62 | 
 63 | function getParentScope(element) {
 64 |   return element.closest('[data-focus-scope]');
 65 | }
 66 | 
 67 | function setFocus(targetElement) {
 68 |   if (targetElement) {
 69 |     const serial = targetElement.dataset.focusTarget;
 70 |     if (serial) {
 71 |       const scope = getParentScope(targetElement);
 72 |       if (scope) {
 73 |         scope.dataset.focusScope = serial;
 74 |       }
 75 |     }
 76 |     targetElement.focus();
 77 |     return true;
 78 |   }
 79 |   return false;
 80 | }
 81 | 
 82 | export function focusPrev() {
 83 |   return setFocus(getTargetBefore(document.activeElement));
 84 | }
 85 | 
 86 | export function focusNext() {
 87 |   return setFocus(getTargetAfter(document.activeElement));
 88 | }
 89 | 
 90 | export function exitFocusScope() {
 91 |   const parent = getParentScope(document.activeElement);
 92 |   if (parent) {
 93 |     return setFocus(getTargetBefore(parent));
 94 |   } else {
 95 |     document.activeElement.blur();
 96 |     return false;
 97 |   }
 98 | }
 99 | 
100 | export function enterFocusScope() {
101 |   const nextScope = getElementAfter(
102 |     document.activeElement,
103 |     document.querySelectorAll('[data-focus-scope]')
104 |   );
105 |   const targetBefore = getTargetBefore(nextScope);
106 |   if (targetBefore !== document.activeElement) {
107 |     // We only want to enter the scope if it is directly after activeElement
108 |     return false;
109 |   }
110 |   const serial = nextScope.dataset.focusScope;
111 |   const selector = serial
112 |     ? `[data-focus-target="${serial}"]`
113 |     : `[data-focus-target]`;
114 |   const target = nextScope.querySelector(selector);
115 |   return setFocus(target);
116 | }
117 | 
118 | export function focusBySearch(string) {
119 |   // Find a focus target that matches the string.
120 |   try {
121 |     const regex = new RegExp(string.split('').join('[^a-z0-9]*.?[^a-z0-9]*'), 'i');
122 |     let scope = (document.activeElement);
123 |     do {
124 |       scope = getParentScope(scope.parentElement);
125 |       const targets = (scope || document).querySelectorAll('[data-focus-target]');
126 |       for (let i = 0; i < targets.length; i++) {
127 |         const target = targets[i];
128 |         const text = target.textContent;
129 |         if (regex.test(text)) {
130 |           return setFocus(target);
131 |         }
132 |       }
133 |     } while (scope);
134 |   } catch (e) {}
135 |   return false;
136 | }
137 | 
138 | 


--------------------------------------------------------------------------------
/inspect/formatters/ArrayFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const type = Array;
 3 |   export const hasDepthProp = true;
 4 | </script>
 5 | 
 6 | <script>
 7 |   export let depth = 0;
 8 |   export let value;
 9 | 
10 |   let isOpen = depth > 0;
11 | 
12 |   import Toggle from '../Toggle.svelte';
13 |   import PropertyList from '../PropertyList.svelte';
14 |   import Echo from '../Echo.svelte';
15 | </script>
16 | 
17 | <Toggle className=array-toggle bind:isOpen>
18 |   <slot />
19 |   <Echo>
20 |     <span slot=1 class=array>Array(</span>
21 |     <span slot=2 class=length>{value.length}</span>
22 |     <span slot=3 class=array>)</span>
23 |   </Echo>
24 |   [{#if !isOpen}
25 |     <span class=on-intent>…</span>]
26 |   {/if}
27 | </Toggle>
28 | 
29 | {#if isOpen}
30 |   <PropertyList
31 |     {depth}
32 |     {value}
33 |   >
34 |     Empty array
35 |   </PropertyList>
36 |   ]
37 | {/if}
38 | 
39 | <style>
40 |   .array {
41 |     color: var(--color-black);
42 |   }
43 |   .length {
44 |     color: var(--color-blue);
45 |   }
46 |   .on-intent {
47 |     display: none;
48 |   }
49 |   :global(.array-toggle:hover) > .on-intent,
50 |   :global(.array-toggle:focus) > .on-intent {
51 |     display: inline;
52 |   }
53 | </style>
54 | 


--------------------------------------------------------------------------------
/inspect/formatters/BigIntFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const typeOf = 'bigint';
 3 | </script>
 4 | 
 5 | <script>
 6 |   export let value;
 7 | 
 8 |   $: stringified = BigInt.prototype.toString.call(value) + 'n';
 9 | 
10 |   import PrimitiveBase from '../PrimitiveBase.svelte';
11 | </script>
12 | 
13 | <PrimitiveBase {value}>
14 |   <slot />
15 |   {#each stringified.split(/(\d+)/) as group, index}
16 |     {#if group.length}
17 |       <span class:digits={index % 2} class:punctuation={!(index % 2)}>{group}</span>
18 |     {/if}
19 |   {/each}
20 | </PrimitiveBase>
21 | 
22 | <style>
23 |   .digits {
24 |     color: var(--color-blue);
25 |   }
26 |   .punctuation {
27 |     color: var(--color-black);
28 |   }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/inspect/formatters/BooleanFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const typeOf = 'boolean';
 3 | </script>
 4 | 
 5 | <script>
 6 |   export let value;
 7 | 
 8 |   import PrimitiveBase from '../PrimitiveBase.svelte';
 9 | </script>
10 | 
11 | <PrimitiveBase {value}>
12 |   <slot />
13 |   <span class=boolean>{String(value)}</span>
14 | </PrimitiveBase>
15 | 
16 | <style>
17 |   .boolean {
18 |     color: var(--color-blue);
19 |   }
20 | </style>
21 | 


--------------------------------------------------------------------------------
/inspect/formatters/DateFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const type = Date;
 3 | </script>
 4 | 
 5 | <script>
 6 |   import {groupByRegexes} from '../utilities.js';
 7 |   const grouper = groupByRegexes({
 8 |     'number': /[0-9]+/
 9 |   });
10 | 
11 |   export let value;
12 | 
13 |   $: ISOString = Date.prototype.toISOString.call(value);
14 |   $: date = ISOString.slice(0, 10);
15 |   $: time = ISOString.slice(10);
16 | 
17 |   import PrimitiveBase from '../PrimitiveBase.svelte';
18 |   import Echo from '../Echo.svelte';
19 | </script>
20 | 
21 | <PrimitiveBase {value}>
22 |   <slot />
23 |   <Echo>
24 |     <span slot=1>Date(</span>
25 |     <span slot=2 class=date>
26 |       {#each grouper(date) as {key, match}}
27 |         <span class={key || 'default'}>{match}</span>
28 |       {/each}
29 |     </span>
30 |     <span slot=3 class=time>
31 |       {#each grouper(time) as {key, match}}
32 |         <span class={key || 'default'}>{match}</span>
33 |       {/each}
34 |     </span>
35 |     <span slot=4>)</span>
36 |   </Echo>
37 | </PrimitiveBase>
38 | 
39 | <style>
40 |   .default {
41 |     color: var(--color-gray);
42 |   }
43 |   .date .number {
44 |     color: var(--color-blue);
45 |   }
46 |   .time .number {
47 |     color: var(--color-purple);
48 |   }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/inspect/formatters/ElementFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const check = value => {
 3 |     if (!(value instanceof HTMLElement)) {
 4 |       return false;
 5 |     }
 6 |     try {
 7 |       return !!value.tagName;
 8 |     } catch (error) {}
 9 |     return false;
10 |   };
11 | </script>
12 | 
13 | <script>
14 |   import {getObjectTypeString} from '../utilities.js';
15 | 
16 |   export let value;
17 | 
18 |   import Echo from '../Echo.svelte';
19 |   import PrimitiveBase from '../PrimitiveBase.svelte';
20 | </script>
21 | 
22 | <PrimitiveBase {value}>
23 |   <slot />
24 |   <Echo>
25 |     <span slot=1 class=punctuation>&lt;</span>
26 |     <span slot=2 class=tag-name>{value.tagName.toLowerCase()}</span>
27 |     <span slot=3>
28 |       {#each value.attributes as attribute}
29 |         {' '}
30 |         {#if attribute.value}
31 |           <Echo>
32 |             <span slot=1 class=attribute-name>{attribute.name}</span>
33 |             <span slot=2 class=punctuation>="</span>
34 |             <span slot=3 class=attribute-value>{attribute.value}</span>
35 |             <span slot=4 class=punctuation>"</span>
36 |           </Echo>
37 |         {:else}
38 |           <Echo>
39 |             <span slot=1 class=attribute-name>{attribute.name}</span>
40 |           </Echo>
41 |         {/if}
42 |       {/each}
43 |     </span>
44 |     <span slot=4 class=punctuation>&gt;</span>
45 |   </Echo>
46 | </PrimitiveBase>
47 | 
48 | <style>
49 |   .tag-name {
50 |     color: var(--color-green);
51 |   }
52 |   .punctuation {
53 |     color: var(--color-black);
54 |   }
55 |   .attribute-name {
56 |     color: var(--color-brown);
57 |   }
58 |   .attribute-value {
59 |     white-space: pre-wrap;
60 |     color: var(--color-red);
61 |   }
62 | </style>
63 | 


--------------------------------------------------------------------------------
/inspect/formatters/ErrorFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const check = value => value instanceof Error;
 3 | </script>
 4 | 
 5 | <script>
 6 |   export let value;
 7 | 
 8 |   import PrimitiveBase from '../PrimitiveBase.svelte';
 9 | </script>
10 | 
11 | <PrimitiveBase {value}>
12 |   <slot />
13 |   <span class=error>{String(value)}</span>
14 | </PrimitiveBase>
15 | 
16 | <style>
17 |   .error {
18 |     color: var(--color-red);
19 |   }
20 | </style>
21 | 


--------------------------------------------------------------------------------
/inspect/formatters/FallbackFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const check = value => true;
 3 | </script>
 4 | 
 5 | <script>
 6 |   export let value;
 7 | 
 8 |   import PrimitiveBase from '../PrimitiveBase.svelte';
 9 | </script>
10 | 
11 | <PrimitiveBase {value}>
12 |   <slot />
13 |   <span class=fallback>{String(value)}</span>
14 | </PrimitiveBase>
15 | 
16 | <style>
17 |   .fallback {
18 |     color: var(--color-black);
19 |   }
20 | </style>
21 | 


--------------------------------------------------------------------------------
/inspect/formatters/FunctionFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const typeOf = 'function';
 3 | </script>
 4 | 
 5 | <script>
 6 |   import {groupByRegexes} from '../utilities.js';
 7 |   const grouper = groupByRegexes({
 8 |     'function-keyword': /(ƒ|function|\=\>)/,
 9 |     'async-keyword': /(async|await)/,
10 |     'class-keyword': /(class|extends)/,
11 |     identifier: /(\d|\w|_|\$)+/,
12 |   });
13 | 
14 |   export let value;
15 | 
16 |   $: functionString = Function.prototype.toString.call(value).split('\n')[0].replace(/^function/, 'ƒ');
17 | 
18 |   import PrimitiveBase from '../PrimitiveBase.svelte';
19 | </script>
20 | 
21 | <PrimitiveBase {value}>
22 |   <slot />
23 |   <span>
24 |     {#each grouper(functionString) as {key, match}}
25 |       <span class={key || 'default'}>{match}</span>
26 |     {/each}
27 |   </span>
28 | </PrimitiveBase>
29 | 
30 | <style>
31 |   .default {
32 |     color: var(--color-gray);
33 |   }
34 |   .function-keyword {
35 |     color: var(--color-black);
36 |   }
37 |   .async-keyword {
38 |     color: var(--color-green);
39 |   }
40 |   .class-keyword {
41 |     color: var(--color-purple);
42 |   }
43 |   .identifier {
44 |     color: var(--color-blue);
45 |   }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/inspect/formatters/MapEntry.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let depth = 0;
 3 |   export let key;
 4 |   export let value;
 5 | 
 6 |   $: propertyListValue = Object.assign(Object.create(null), {key, value});
 7 | 
 8 |   let isOpen = depth > 0;
 9 | 
10 |   import Toggle from '../Toggle.svelte';
11 |   import PropertyList from '../PropertyList.svelte';
12 | </script>
13 | 
14 | <Toggle className=map-entry-toggle bind:isOpen>
15 |   <slot />
16 |   {#if !isOpen}
17 |     {String(key)} => {String(value)} <span class=on-intent>…</span>
18 |   {/if}
19 | </Toggle>
20 | 
21 | {#if isOpen}
22 |   &lcub;
23 |   <PropertyList
24 |     {depth}
25 |     value={propertyListValue}
26 |   />
27 |   &rcub;
28 | {/if}
29 | 
30 | <style>
31 |   .on-intent {
32 |     display: none;
33 |   }
34 |   :global(.map-entry-toggle:hover) > .on-intent,
35 |   :global(.map-entry-toggle:focus) > .on-intent {
36 |     display: inline;
37 |   }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/inspect/formatters/MapFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const type = Map;
 3 |   export const hasDepthProp = true;
 4 | </script>
 5 | 
 6 | <script>
 7 |   export let depth = 0;
 8 |   export let value;
 9 | 
10 |   $: nextDepth = Math.max(0, depth - 1);
11 | 
12 |   let isOpen = depth > 0;
13 | 
14 |   import MapEntry from './MapEntry.svelte';
15 |   import Toggle from '../Toggle.svelte';
16 |   import PropertyList from '../PropertyList.svelte';
17 |   import Echo from '../Echo.svelte';
18 | </script>
19 | 
20 | <Toggle className=map-toggle bind:isOpen>
21 |   <slot />
22 |   <Echo>
23 |     <span slot=1 class=map>Map(</span>
24 |     <span slot=2 class=size>{value.size}</span>
25 |     <span slot=3 class=map>)</span>
26 |   </Echo>
27 |   &lcub;{#if !isOpen}
28 |     <span class=on-intent>…</span>&rcub;
29 |   {/if}
30 | </Toggle>
31 | 
32 | {#if isOpen}
33 |   {#each [...value] as [entryKey, entryValue], index (entryKey)}
34 |     <div class=row>
35 |       <pre class=indentation>&nbsp;&nbsp;</pre>
36 |       <span class=item>
37 |         <MapEntry depth={nextDepth} key={entryKey} value={entryValue}><span class=entry-index>entry {index}</span>: </MapEntry>
38 |       </span>
39 |     </div>
40 |   {:else}
41 |     <div class=row>
42 |       <pre class=indentation>&nbsp;&nbsp;</pre>
43 |       <span class=empty>No entries</span>
44 |     </div>
45 |   {/each}
46 |   <PropertyList
47 |     {depth}
48 |     {value}
49 |   >
50 |     No properties
51 |   </PropertyList>
52 |   &rcub;
53 | {/if}
54 | 
55 | <style>
56 |   .map {
57 |     color: var(--color-black);
58 |   }
59 |   .size {
60 |     color: var(--color-blue);
61 |   }
62 |   .on-intent {
63 |     display: none;
64 |   }
65 |   :global(.map-toggle:hover) > .on-intent,
66 |   :global(.map-toggle:focus) > .on-intent {
67 |     display: inline;
68 |   }
69 |   .entry-index {
70 |     color: var(--color-gray);
71 |   }
72 |   .row {
73 |     display: flex;
74 |   }
75 |   .row:not(:last-child) > .item:after {
76 |     content: ' , ';
77 |     margin-left: -1ex;
78 |     pointer-events: none;
79 |     color: var(--color-black);
80 |   }
81 |   .indentation {
82 |     margin: 0;
83 |     padding: 0;
84 |     display: inline-block;
85 |   }
86 |   .empty {
87 |     color: var(--color-gray);
88 |     font-style: italic;
89 |   }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/inspect/formatters/NilFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const check = value => value === null || value === undefined;
 3 | </script>
 4 | 
 5 | <script>
 6 |   export let value;
 7 | 
 8 |   import PrimitiveBase from '../PrimitiveBase.svelte';
 9 | </script>
10 | 
11 | <PrimitiveBase {value}>
12 |   <slot />
13 |   <span class=nil>{String(value)}</span>
14 | </PrimitiveBase>
15 | 
16 | <style>
17 |   .nil {
18 |     color: var(--color-gray);
19 |   }
20 | </style>
21 | 


--------------------------------------------------------------------------------
/inspect/formatters/NumberFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const typeOf = 'number';
 3 | </script>
 4 | 
 5 | <script>
 6 |   export let value;
 7 | 
 8 |   $: stringified = Object.is(value, -0) ? '-0' : Number.prototype.toString.call(value, 10);
 9 | 
10 |   import PrimitiveBase from '../PrimitiveBase.svelte';
11 | </script>
12 | 
13 | <PrimitiveBase {value}>
14 |   <slot />
15 |   {#each stringified.split(/(\d+)/) as group, index}
16 |     {#if group.length}
17 |       <span class:digits={index % 2} class:punctuation={!(index % 2)}>{group}</span>
18 |     {/if}
19 |   {/each}
20 | </PrimitiveBase>
21 | 
22 | <style>
23 |   .digits {
24 |     color: var(--color-blue);
25 |   }
26 |   .punctuation {
27 |     color: var(--color-black);
28 |   }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/inspect/formatters/ObjectFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const check = value => value !== null && typeof value === 'object';
 3 |   export const hasDepthProp = true;
 4 | </script>
 5 | 
 6 | <script>
 7 |   import {getObjectTypeString} from '../utilities.js';
 8 | 
 9 |   export let depth = 0;
10 |   export let value;
11 | 
12 |   $: typeDescription = getObjectTypeString(value);
13 | 
14 |   let isOpen = depth > 0;
15 | 
16 |   import Toggle from '../Toggle.svelte';
17 |   import PropertyList from '../PropertyList.svelte';
18 | </script>
19 | 
20 | <Toggle className=object-toggle bind:isOpen>
21 |   <slot />
22 |   <span class=object>{typeDescription}</span>
23 |   &lcub;{#if !isOpen}
24 |     <span class=on-intent>…</span>&rcub;
25 |   {/if}
26 | </Toggle>
27 | 
28 | {#if isOpen}
29 |   <PropertyList
30 |     {depth}
31 |     {value}
32 |   />
33 |   &rcub;
34 | {/if}
35 | 
36 | <style>
37 |   .object {
38 |     color: var(--color-purple);
39 |   }
40 |   .on-intent {
41 |     display: none;
42 |   }
43 |   :global(.object-toggle:hover) > .on-intent,
44 |   :global(.object-toggle:focus) > .on-intent {
45 |     display: inline;
46 |   }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/inspect/formatters/RegExpFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const type = RegExp;
 3 | </script>
 4 | 
 5 | <script>
 6 |   export let value;
 7 | 
 8 |   $: source = value.source;
 9 |   $: flags = value.flags;
10 | 
11 |   import Echo from '../Echo.svelte';
12 |   import PrimitiveBase from '../PrimitiveBase.svelte';
13 | </script>
14 | 
15 | <PrimitiveBase {value}>
16 |   <slot />
17 |   <span class=regexp>
18 |     <Echo>
19 |       <span slot=1 class=slash>/</span>
20 |       <span slot=2 class=source>{source}</span>
21 |       <span slot=3 class=slash>/</span>
22 |       <span slot=4 class=flags>{flags}</span>
23 |     </Echo>
24 |   </span>
25 | </PrimitiveBase>
26 | 
27 | <style>
28 |   .slash {
29 |     color: var(--color-black);
30 |   }
31 |   .source {
32 |     white-space: pre-wrap;
33 |     color: var(--color-red);
34 |   }
35 |   .flags {
36 |     color: var(--color-pink);
37 |   }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/inspect/formatters/SetFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const type = Set;
 3 |   export const hasDepthProp = true;
 4 | </script>
 5 | 
 6 | <script>
 7 |   export let depth = 0;
 8 |   export let value;
 9 | 
10 |   $: nextDepth = Math.max(0, depth - 1);
11 | 
12 |   let isOpen = depth > 0;
13 | 
14 |   import Formatter from '../Formatter.svelte';
15 |   import Toggle from '../Toggle.svelte';
16 |   import PropertyList from '../PropertyList.svelte';
17 |   import Echo from '../Echo.svelte';
18 | </script>
19 | 
20 | <Toggle className=set-toggle bind:isOpen>
21 |   <slot />
22 |   <Echo>
23 |     <span slot=1 class=set>Set(</span>
24 |     <span slot=2 class=size>{value.size}</span>
25 |     <span slot=3 class=set>)</span>
26 |   </Echo>
27 |   &lcub;{#if !isOpen}
28 |     <span class=on-intent>…</span>&rcub;
29 |   {/if}
30 | </Toggle>
31 | 
32 | {#if isOpen}
33 |   {#each [...value] as entryValue, index (entryValue)}
34 |     <div class=row>
35 |       <pre class=indentation>&nbsp;&nbsp;</pre>
36 |       <span class=item>
37 |         <Formatter depth={nextDepth} value={entryValue}><span class=entry-index>entry {index}</span>: </Formatter>
38 |       </span>
39 |     </div>
40 |   {:else}
41 |     <div class=row>
42 |       <pre class=indentation>&nbsp;&nbsp;</pre>
43 |       <span class=empty>No entries</span>
44 |     </div>
45 |   {/each}
46 |   <PropertyList
47 |     {depth}
48 |     {value}
49 |   >
50 |     No properties
51 |   </PropertyList>
52 |   &rcub;
53 | {/if}
54 | 
55 | <style>
56 |   .set {
57 |     color: var(--color-black);
58 |   }
59 |   .size {
60 |     color: var(--color-blue);
61 |   }
62 |   .on-intent {
63 |     display: none;
64 |   }
65 |   :global(.set-toggle:hover) > .on-intent,
66 |   :global(.set-toggle:focus) > .on-intent {
67 |     display: inline;
68 |   }
69 |   .entry-index {
70 |     color: var(--color-gray);
71 |   }
72 |   .row {
73 |     display: flex;
74 |   }
75 |   .row:not(:last-child) > .item:after {
76 |     content: ' , ';
77 |     margin-left: -1ex;
78 |     pointer-events: none;
79 |     color: var(--color-black);
80 |   }
81 |   .indentation {
82 |     margin: 0;
83 |     padding: 0;
84 |     display: inline-block;
85 |   }
86 |   .empty {
87 |     color: var(--color-gray);
88 |     font-style: italic;
89 |   }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/inspect/formatters/StringFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const typeOf = 'string';
 3 | </script>
 4 | 
 5 | <script>
 6 |   import {stringEscapeGroups, isEscapeGroup} from '../utilities.js';
 7 | 
 8 |   export let value;
 9 | 
10 |   $: groups = stringEscapeGroups(value);
11 | 
12 |   import PrimitiveBase from '../PrimitiveBase.svelte';
13 | </script>
14 | 
15 | <PrimitiveBase {value}>
16 |   <slot />
17 |   <span class=string>
18 |     {#each groups as group}
19 |       <span
20 |         class=chars
21 |         class:escape={isEscapeGroup(group)}
22 |       >{group}</span>
23 |     {/each}
24 |   </span>
25 | </PrimitiveBase>
26 | 
27 | <style>
28 |   .string:after,
29 |   .string:before {
30 |     content: '"';
31 |     color: var(--color-black);
32 |   }
33 |   .chars {
34 |     white-space: pre-wrap;
35 |     color: var(--color-red);
36 |   }
37 |   .chars.escape {
38 |     color: var(--color-pink);
39 |   }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/inspect/formatters/SymbolFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const typeOf = 'symbol';
 3 | </script>
 4 | 
 5 | <script>
 6 |   export let value;
 7 | 
 8 |   $: isWellKnown = Symbol.keyFor(value) !== undefined;
 9 |   $: key = isWellKnown ? Symbol.keyFor(value) : String(value).slice(7, -1);
10 |   $: prefix = isWellKnown ? 'Symbol.for(' : 'Symbol(';
11 | 
12 |   import Echo from '../Echo.svelte';
13 |   import PrimitiveBase from '../PrimitiveBase.svelte';
14 | </script>
15 | 
16 | <PrimitiveBase {value}>
17 |   <slot />
18 |   <Echo>
19 |     <span slot=1 class=affix>{prefix}</span>
20 |     <span slot=2 class=key>{key}</span>
21 |     <span slot=3 class=affix>)</span>
22 |   </Echo>
23 | </PrimitiveBase>
24 | 
25 | <style>
26 |   .key {
27 |     white-space: pre-wrap;
28 |     color: var(--color-red);
29 |   }
30 |   .affix {
31 |     color: var(--color-pink);
32 |   }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/inspect/formatters/TypedArrayFormatter.svelte:
--------------------------------------------------------------------------------
 1 | <script context=module>
 2 |   export const check = value => {
 3 |     switch (Object.getPrototypeOf(value)) {
 4 |       case Int8Array.prototype:
 5 |       case Uint8Array.prototype:
 6 |       case Uint8ClampedArray.prototype:
 7 |       case Int16Array.prototype:
 8 |       case Uint16Array.prototype:
 9 |       case Int32Array.prototype:
10 |       case Uint32Array.prototype:
11 |       case Float32Array.prototype:
12 |       case Float64Array.prototype:
13 |       case typeof BigInt64Array !== 'undefined' && BigInt64Array.prototype:
14 |       case typeof BigUint64Array !== 'undefined' && BigUint64Array.prototype: {
15 |         return true;
16 |       }
17 |     }
18 |     return false;
19 |   };
20 |   export const hasDepthProp = true;
21 | </script>
22 | 
23 | <script>
24 |   import {getObjectTypeString} from '../utilities.js';
25 | 
26 |   export let depth = 0;
27 |   export let value;
28 | 
29 |   $: typeDescription = getObjectTypeString(value);
30 | 
31 |   let isOpen = depth > 0;
32 | 
33 |   import Toggle from '../Toggle.svelte';
34 |   import PropertyList from '../PropertyList.svelte';
35 |   import Echo from '../Echo.svelte';
36 | </script>
37 | 
38 | <Toggle className=typed-array-toggle bind:isOpen>
39 |   <slot />
40 |   <Echo>
41 |     <span slot=1 class=typed-array>{typeDescription}(</span>
42 |     <span slot=2 class=length>{value.length}</span>
43 |     <span slot=3 class=typed-array>)</span>
44 |   </Echo>
45 |   [{#if !isOpen}
46 |     <span class=on-intent>…</span>]
47 |   {/if}
48 | </Toggle>
49 | 
50 | {#if isOpen}
51 |   <PropertyList
52 |     {value}
53 |   >
54 |     Empty array
55 |   </PropertyList>
56 |   ]
57 | {/if}
58 | 
59 | <style>
60 |   .typed-array {
61 |     color: var(--color-black);
62 |   }
63 |   .length {
64 |     color: var(--color-blue);
65 |   }
66 |   .on-intent {
67 |     display: none;
68 |   }
69 |   :global(.array-toggle:hover) > .on-intent,
70 |   :global(.array-toggle:focus) > .on-intent {
71 |     display: inline;
72 |   }
73 | </style>
74 | 


--------------------------------------------------------------------------------
/inspect/utilities.js:
--------------------------------------------------------------------------------
 1 | export const isNil = (value = null) => value === null;
 2 | 
 3 | export const keyIsIndex = key => String(parseInt(String(key))) === String(key);
 4 | 
 5 | import {tick} from 'svelte';
 6 | 
 7 | export const onTick = callback => tick().then(callback);
 8 | 
 9 | export const getObjectToStringTag = object => Object.prototype.toString.call(object).slice(8, -1);
10 | 
11 | export const getObjectTypeString = object => {
12 |   const hasToStringTag = Symbol.toStringTag in object;
13 |   if (hasToStringTag) {
14 |     return getObjectToStringTag(object);
15 |   }
16 | 
17 |   const prototype = Object.getPrototypeOf(object);
18 |   const constructorName = prototype && prototype.constructor && prototype.constructor.name;
19 |   const usefulConstructorName = constructorName && constructorName !== 'Object';
20 | 
21 |   return usefulConstructorName ? constructorName : getObjectToStringTag(object);
22 | };
23 | 
24 | export const getAllProperties = object => {
25 |   const enumerableKeys = [];
26 |   for (const enumerableKey in object) {
27 |     enumerableKeys.push(enumerableKey);
28 |   }
29 |   return [...new Set([
30 |     ...enumerableKeys,
31 |     ...Object.getOwnPropertyNames(object),
32 |     ...Object.getOwnPropertySymbols(object),
33 |     ...(object['__proto__'] ? ['__proto__'] : [])
34 |   ])];
35 | };
36 | 
37 | export const getPropertyDescriptor = (object, prop) => {
38 |   if (!object) {
39 |     return {};
40 |   } else if (prop === '__proto__') {
41 |     return {
42 |       value: Object.getPrototypeOf(object)
43 |     };
44 |   } else {
45 |     const ownPropertyDescriptor = Object.getOwnPropertyDescriptor(object, prop);
46 |     if (ownPropertyDescriptor) {
47 |       return ownPropertyDescriptor;
48 |     } else {
49 |       const prototype = Object.getPrototypeOf(object);
50 |       return getPropertyDescriptor(prototype, prop);
51 |     }
52 |   }
53 | };
54 | 
55 | export const stringEscapeGroups = string => {
56 |   // Split string into array of sequences of characters, with needed escapes broken out
57 |   const characters = string.split(/([\x00-\x1F]+)/);
58 |   return characters.map(char => JSON.stringify(char).slice(1, -1));
59 | };
60 | 
61 | const backslashCharCode = '\\'.charCodeAt(0);
62 | 
63 | export const isEscapeGroup = string => string.charCodeAt(0) === backslashCharCode;
64 | 
65 | export const groupByRegexes = (regexes) => {
66 |   const keys = Object.keys(regexes);
67 |   return string => {
68 |     const groups = [];
69 |     let source = string;
70 |     while (source.length) {
71 |       let bestKey = null;
72 |       let bestMatch = null;
73 |       let bestIndex = source.length;
74 |       for (const key of keys) {
75 |         const regex = regexes[key];
76 |         const match = source.match(regex);
77 |         if (match && match.index < bestIndex) {
78 |           bestKey = key;
79 |           bestMatch = match[0];
80 |           bestIndex = match.index;
81 |         }
82 |       }
83 |       if (bestIndex > 0) {
84 |         groups.push({key: undefined, match: source.slice(0, bestIndex)})
85 |       }
86 |       if (bestMatch) {
87 |         groups.push({key: bestKey, match: bestMatch})
88 |         source = source.slice(bestIndex + bestMatch.length);
89 |       } else {
90 |         break;
91 |       }
92 |     }
93 |     return groups;
94 |   };
95 | };
96 | 
97 | 
98 | 
99 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-inspect",
 3 |   "version": "0.1.3",
 4 |   "description": "Svelte object inspector",
 5 |   "svelte": "svelte-inspect.js",
 6 |   "repository": "github:trbrc/svelte-inspect",
 7 |   "homepage": "https://github.com/trbrc/svelte-inspect",
 8 |   "bugs": "https://github.com/trbrc/svelte-inspect/issues",
 9 |   "keywords": [
10 |     "svelte",
11 |     "devtools"
12 |   ],
13 |   "peerDependencies": {
14 |     "svelte": "^3.0.0"
15 |   },
16 |   "license": "MIT"
17 | }
18 | 


--------------------------------------------------------------------------------
/svelte-inspect.js:
--------------------------------------------------------------------------------
 1 | import SvelteInspect from './inspect/Inspect.svelte';
 2 | 
 3 | function configure(configuration) {
 4 |   if (SvelteInspect.render) {
 5 |     // It's an SSR'd component. We need to wrap .render
 6 |     return {
 7 |       ...SvelteInspect,
 8 |       render(props) {
 9 |         return SvelteInspect.render({
10 |           ...props,
11 |           [Symbol.for('configuration')]: configuration
12 |         })
13 |       }
14 |     };
15 |   } else {
16 |     // It's a client side component. We need to extend the class.
17 |     return class ConfiguredInspect extends SvelteInspect {
18 |       constructor(options) {
19 |         const props = options.props || {};
20 |         super({
21 |           ...options,
22 |           props: {
23 |             ...props,
24 |             [Symbol.for('configuration')]: configuration
25 |           }
26 |         });
27 |       }
28 |     };
29 |   }
30 | };
31 | 
32 | const invertedPalette = {
33 |   red: 'red',
34 |   blue: 'dodgerblue',
35 |   green: 'yellowgreen',
36 |   purple: 'violet',
37 |   gray: '#808080',
38 |   black: '#d0d0d0',
39 |   white: '#202020',
40 |   selection: 'darkblue'
41 | };
42 | 
43 | const Inverted = configure({
44 |   palette: invertedPalette
45 | });
46 | 
47 | const Value = configure({
48 |   valueOnly: true
49 | });
50 | 
51 | SvelteInspect.configure = configure;
52 | SvelteInspect.Inverted = Inverted;
53 | SvelteInspect.Value = Value;
54 | 
55 | for (let i = 0; i <= 10; i++) {
56 |   SvelteInspect[i] = configure({depth: i});
57 |   SvelteInspect.Inverted[i] = configure({depth: i, palette: invertedPalette});
58 | }
59 | 
60 | export default SvelteInspect;
61 | 
62 | export {configure, Inverted, Value};
63 | 


--------------------------------------------------------------------------------