svelte-toy

Svelte-Toy-2 Current Svelte-Toy Repo is not working so cannot create a pull request, seems to be packaging issue for side-menu. This represents a pretty extensive rewrite of svelte-toy trying to stay true to the original with detailed documentation of Fixes, Changes, and New functionality. As requested, it is updated to use Angus just set - https://www.npmjs.com/package/just-safe-set/v/2.2.0?activeTab=readme instead of much larger lodash.set. Hopefully this can be merged. ## Changes CHANGE: brought side-menu into this package as temporary fix. Tried not to change the side-menu package as it is expected that it will return to an import. noted changes: FIX: changed scale for sideMenu.active from 1.05 to 1 to prevents cascasding overflow issues. NEW: added no-select CSS for nub FIX: previously empty stores (store = writable()) would crash the app FIX: custom var (--ease-in-out=quint) was never defined, as such no animation of section chevron click, just hardcoded transition CHANGE: in Row changed value display to include {:else} as fallthrough to handle more types (string, function, etc). CHANGE: renamed isOpen to isSectionOpen to be more clear CHANGE: Extracted out new Component Key. It was used many times/redundant CHANGE: Extracted out Input CHANGE: replaced input with contenteditable div, allowing for expansion focus, ellipsis on overflow-y, handles HTML, limits to numbers when type number CHANGE: Within Row combined similar code of display of Arrays and Objects for code simplification CHANGE: updateStore function is now a custom store method (toyStore.updateExternalStores) imported rather than prop drilling. It's as used in both Input and Key. Can send value="null" to delete CHANGE: removed simple prop and required prop drilling, now determined in where needed by typeof store === 'object' ## MAJOR NEW FUNCTIONALITY NEW: Now uses Angus just-safe-set as well as get. Major difference, arrays handled like a.1 instead of a[1] NEW: optional Toy component param openOnLoad allowing for inital store to be one based on order of register param would open store and simple on load. NEW: Added support to optional Advanced Editing: CRUD - add/delete store items and reorder store arrays NEW: Filter stores by key and/or value with optional auto-expand/collapse store sections, and clear button for filter NEW: Can collapse objects and arrays to single line NEW: Optional: prop to open sections on load based upon index NEW: Optional: Key label temporarily highlighted when store items are updated with optional auto-expand section containing updated item NEW: Optional: Hotkey access to toggle Sidemenu (ctrl-s) NEW: Optional: HotKey access to toggle expand/collapse all stores (ctrl-e) New: Optional: HotKey access to open Toy if closed, and focus within search (ctrl-f) NEW: Added $toyStore store for settings and it syncs with localStorage for persistence (SSR capable). Hover over settinhgs keys gives tooltip explanation. Up/Down chevrons adjust global font size. $toyStore.flashUpdates: Store keys are highlighted when values update and when keys/values match filter. $toyStore.autoExpand: Filtered, or updated store values cause their store section containing the store to be auto-expanded. $toySrore.advancedEdit: Enables advanced editing of store values. Supports add/remove items, as well as reordering arrays. $toyStore.hotKeys: Enables hotkeys for common actions. Ctrl-S: show/hide Svelte-Toy, Ctrl-E: expand/collapse all stores, Ctrl-F: go to filter. $toySTore.pxFontSize: Sets the font size in pixels for the store data. $toyStore.updateExternalStore method. allows to update and delteing external store keys. %toyStore.sortByKey allows optional alphabetic sort of a stores keys. ## MINOR NEW FUNCTIONALITY NEW: more transitions and animations NEW: Added decorative [] for arrays and {} for objects NEW: Added decorative commas NEW: Added decorating quotes for strings, calls attention to their type NEW: Custom Toggle component replacing native checkboxes, checkboxes were visually jarring as unthemed NEW: added CSS custom vars --toy-nested-indent, --toy-key-flash-color, --toy-key-flash-bg NEW: Within store header, Hover over 'i' shows whole store, and Doubleclick on 'i' will copy entire store's value to clipboard NEW: Within store header, Hover over 'fx' in header shows store methods NEW: Hover over a store's individual value and it displays the entire value without focusing (useful for long strings which have been overflow hidden) NEW: Hover over a key a shows values type, informs of double click option to copy that item's value to clipboard NEW: Applied no-select CSS to all keys, values, and store headers, preventing accidental selection when trying to double click, etc STILL TODO TODO: CSS: in serious need CSS cleanup, renaming css vars, currently using state-mang/toy/sidebar, and get confusing. TODO: CSS: ToyGroup:147 more selectivity for chevron to avoid !important, I think problem stems from being within :global(), failed :global(h4 span.chevron.isSectionOpen) TODO: CSS: custom/themed vertical srollbar would be nice. smaller size beneficial too. TODO: CSS: size of toggle doesn't adjust to $toyStore.pxFontSize, implementation a little bit of a CSS nightmare. TODO: CSS: Clear button on filter on vertically aligned with changing font-sizes TODO: CSS: in Key the +/- button seen while hovering at root of objects/arrays, changes sizes depending on + or -, force width = height so basing off var(--state-tool-font-size) to fix? TODO: needs support for Sets, current shows empty object, breaks on additions, will need iteration for display and custom handling add(), delete() TODO: Input:30 contenteditable div uses on:blur to update store, but this is not ideal, on:input would be better but loses focus after 1st keystroke. Maybe some other way of binding? TODO: Row:45 flip animation for array move/reorder works for some but not all arrays, not sure why (compArr move 2 up animates, but move 8 up does not.) TODO: animations have some jank, see opening "Store" store and collpasing of complexObj TODO: flashing implementation still has some quirks false/positives TODO: chevron font sizing causes settings to open ToyGroup: 91 and 92 TODO: EmptyObj set to {} should not be expandable

I was getting this error in a Vite project until I also installed . Repro: https://codesandbox.io/s/brave-yonath-s5nyol?file=/index.js

Currently have the following versions of sveltekit and toy installed: Console shows: Clicking on the console Row.svelte:42:7 takes me to this line: As of this update the svelte side menu is not opening.