npm - @event-calendar/core - Versions diffs - 2.3.1 → 2.3.2 - Mend

@event-calendar/core 2.3.1 → 2.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md CHANGED Viewed

@@ -196,8 +196,8 @@ import '@event-calendar/core/index.css';
 ### Pre-built browser ready bundle
 Include the following lines of code in the `<head>` section of your page:
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.3.1/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.3.1/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.3.2/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.3.2/event-calendar.min.js"></script>
 ```
 <details>

package/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { run_all, is_function, noop, identity, tick, SvelteComponent, init, safe_not_equal, ensure_array_like, empty, insert, detach, destroy_each, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, action_destroyer, transition_in, group_outros, check_outros, transition_out, space, create_component, mount_component, destroy_component, construct_svelte_component, set_style, get_current_component } from 'svelte/internal';
 import { getContext, setContext, beforeUpdate } from 'svelte';
-import { writable, derived, get, readable } from 'svelte/store';
+import { derived, get, writable, readable } from 'svelte/store';
 function keyEnter(fn) {
     return function (e) {
@@ -573,34 +573,6 @@ function themeView(view) {
     return theme => ({...theme, view});
 }
-function writable2(value, parser, start) {
-    return {
-        ...writable(value, start),
-        parse: parser
-    };
-}
-function derived2(stores, fn, initValue) {
-    let storeValue = initValue;
-    let hasSubscribers = false;
-    let auto = fn.length < 2;
-    let fn2 = (_, set) => {
-        hasSubscribers = true;
-        if (auto) {
-            storeValue = fn(_, set);
-            set(storeValue);
-        } else {
-            fn(_, value => {storeValue = value; set(value);});
-        }
-        return () => {hasSubscribers = false;};
-    };
-    let store = derived(stores, fn2, storeValue);
-    return {
-        ...store,
-        get: () => hasSubscribers ? storeValue : get(store)
-    };
-}
 function intl(locale, format) {
     return derived([locale, format], ([$locale, $format]) => {
         let intl = is_function($format)
@@ -756,17 +728,14 @@ function createParsers(plugins) {
     return parsers;
 }
-let prev;
-function diff(options) {
+function diff(options, prevOptions) {
     let diff = [];
-    if (prev) {
-        for (let name of Object.keys(options)) {
-            if (options[name] !== prev[name]) {
-                diff.push([name, options[name]]);
-            }
+    for (let key of keys(options)) {
+        if (options[key] !== prevOptions[key]) {
+            diff.push([key, options[key]]);
         }
     }
-    prev = assign({}, options);
+    assign(prevOptions, options);
     return diff;
 }
@@ -818,7 +787,7 @@ function currentRange(state) {
 }
 function viewDates(state) {
-    return derived2([state._activeRange, state.hiddenDays], ([$_activeRange, $hiddenDays]) => {
+    return derived([state._activeRange, state.hiddenDays], ([$_activeRange, $hiddenDays]) => {
         let dates = [];
         let date = setMidnight(cloneDate($_activeRange.start));
         let end = setMidnight(cloneDate($_activeRange.end));
@@ -836,7 +805,7 @@ function viewDates(state) {
                 }
                 return date;
             });
-            dates = state._viewDates.get();
+            dates = get(state._viewDates);
         }
         return dates;
@@ -855,7 +824,7 @@ function viewTitle(state) {
 }
 function view(state) {
-    return derived2([state.view, state._viewTitle, state._currentRange, state._activeRange], args => createView(...args));
+    return derived([state.view, state._viewTitle, state._currentRange, state._activeRange], args => createView(...args));
 }
 function events(state) {
@@ -974,7 +943,7 @@ class State {
         // Create stores for options
         for (let [option, value] of Object.entries(options)) {
-            this[option] = writable2(value, parsers[option]);
+            this[option] = writable(value);
         }
         // Private stores
@@ -1006,6 +975,17 @@ class State {
         this._iClasses = writable(identity);  // interaction event css classes
         this._iClass = writable(undefined);  // interaction css class for entire calendar
+        // Set & Get
+        this._set = (key, value) => {
+            if (validKey(key, this)) {
+                if (parsers[key]) {
+                    value = parsers[key](value);
+                }
+                this[key].set(value);
+            }
+        };
+        this._get = key => validKey(key, this) ? get(this[key]) : undefined;
         // Let plugins create their private stores
         for (let plugin of plugins) {
             plugin.createStores?.(this);
@@ -1019,51 +999,63 @@ class State {
         // Set options for each view
         let views = new Set([...keys(options.views), ...keys(input.views ?? {})]);
         for (let view of views) {
-            let opts = mergeOpts(options, options.views[view] ?? {}, input, input.views?.[view] ?? {});
-            // Change view component when view changes
+            let defOpts = mergeOpts(options, options.views[view] ?? {});
+            let opts = mergeOpts(defOpts, input, input.views?.[view] ?? {});
+            let component = opts.component;
+            // Make sure we deal with valid opts from now on
+            filterOpts(opts, this);
+            // Process options
+            for (let key of keys(opts)) {
+                let {set, _set = set, ...rest} = this[key];
+                this[key] = {
+                    // Set value in all views
+                    set: ['buttonText', 'theme'].includes(key)
+                        ? value => {
+                            if (is_function(value)) {
+                                let result = value(defOpts[key]);
+                                opts[key] = result;
+                                set(set === _set ? result : value);
+                            } else {
+                                opts[key] = value;
+                                set(value);
+                            }
+                        }
+                        : value => {
+                            opts[key] = value;
+                            set(value);
+                        },
+                    _set,
+                    ...rest
+                };
+            }
+            // When view changes...
             this.view.subscribe(newView => {
                 if (newView === view) {
-                    this._viewComponent.set(opts.component);
+                    // switch view component
+                    this._viewComponent.set(component);
                     if (is_function(opts.viewDidMount)) {
-                        tick().then(() => opts.viewDidMount(this._view.get()));
+                        tick().then(() => opts.viewDidMount(get(this._view)));
                     }
-                }
-            });
-            // Process options
-            for (let key of keys(opts)) {
-                if (this.hasOwnProperty(key) && key[0] !== '_') {
-                    let {set, _set, ...rest} = this[key];
-                    if (!_set) {
-                        // Original set
-                        _set = set;
+                    // update store values
+                    for (let key of keys(opts)) {
+                        this[key]._set(opts[key]);
                     }
-                    this[key] = {
-                        // Set value in all views
-                        set: value => {opts[key] = value; set(value);},
-                        _set,
-                        ...rest
-                    };
-                    // Change value when view changes
-                    this.view.subscribe(newView => {
-                        if (newView === view) {
-                            _set(opts[key]);
-                        }
-                    });
                 }
-            }
+            });
         }
     }
 }
 function parseOpts(opts, parsers) {
-    let result = {};
-    for (let key of keys(opts)) {
-        result[key] = parsers[key] ? parsers[key](opts[key]) : opts[key];
+    let result = {...opts};
+    for (let key of keys(parsers)) {
+        if (key in result) {
+            result[key] = parsers[key](result[key]);
+        }
     }
     if (opts.views) {
+        result.views = {};
         for (let view of keys(opts.views)) {
             result.views[view] = parseOpts(opts.views[view], parsers);
         }
@@ -1072,16 +1064,33 @@ function parseOpts(opts, parsers) {
 }
 function mergeOpts(...args) {
-    let mergable = ['buttonText', 'theme'];
     let result = {};
     for (let opts of args) {
-        for (let key of keys(opts)) {
-            result[key] = mergable.includes(key) && is_function(opts[key]) ? opts[key](result[key]) : opts[key];
+        let override = {};
+        for (let key of ['buttonText', 'theme']) {
+            if (is_function(opts[key])) {
+                override[key] = opts[key](result[key]);
+            }
         }
+        result = {
+            ...result,
+            ...opts,
+            ...override
+        };
     }
     return result;
 }
+function filterOpts(opts, state) {
+    keys(opts)
+        .filter(key => !validKey(key, state) || key == 'view')
+        .forEach(key => delete opts[key]);
+}
+function validKey(key, state) {
+    return state.hasOwnProperty(key) && key[0] !== '_';
+}
 /* packages/core/src/Buttons.svelte generated by Svelte v4.1.1 */
 function get_each_context$2(ctx, list, i) {
@@ -2182,7 +2191,7 @@ function create_fragment(ctx) {
 			current = true;
 			if (!mounted) {
-				dispose = listen(window, "resize", /*recheckScrollable*/ ctx[16]);
+				dispose = listen(window, "resize", /*recheckScrollable*/ ctx[14]);
 				mounted = true;
 			}
 		},
@@ -2253,10 +2262,8 @@ function instance($$self, $$props, $$invalidate) {
 	let $_bodyEl;
 	let $_scrollable;
 	let $_queue;
-	let $_events;
-	let $events;
-	let $eventSources;
 	let $_interaction;
+	let $_events;
 	let $theme;
 	let $_iClass;
 	let $height;
@@ -2268,34 +2275,25 @@ function instance($$self, $$props, $$invalidate) {
 	setContext('state', state);
 	let { _viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable, events, eventSources, height, theme } = state;
 	component_subscribe($$self, _viewComponent, value => $$invalidate(4, $_viewComponent = value));
-	component_subscribe($$self, _bodyEl, value => $$invalidate(31, $_bodyEl = value));
-	component_subscribe($$self, _interaction, value => $$invalidate(36, $_interaction = value));
+	component_subscribe($$self, _bodyEl, value => $$invalidate(29, $_bodyEl = value));
+	component_subscribe($$self, _interaction, value => $$invalidate(31, $_interaction = value));
 	component_subscribe($$self, _iClass, value => $$invalidate(2, $_iClass = value));
-	component_subscribe($$self, _events, value => $$invalidate(33, $_events = value));
-	component_subscribe($$self, _queue, value => $$invalidate(32, $_queue = value));
+	component_subscribe($$self, _events, value => $$invalidate(32, $_events = value));
+	component_subscribe($$self, _queue, value => $$invalidate(30, $_queue = value));
 	component_subscribe($$self, _scrollable, value => $$invalidate(0, $_scrollable = value));
-	component_subscribe($$self, events, value => $$invalidate(34, $events = value));
-	component_subscribe($$self, eventSources, value => $$invalidate(35, $eventSources = value));
 	component_subscribe($$self, height, value => $$invalidate(3, $height = value));
 	component_subscribe($$self, theme, value => $$invalidate(1, $theme = value));
-	function setOption(name, value) {
-		if (state.hasOwnProperty(name)) {
-			if (state[name].parse) {
-				value = state[name].parse(value);
-			}
-			state[name].set(value);
-		}
+	// Reactively update options that did change
+	let prevOptions = { ...options };
+	function setOption(name, value) {
+		state._set(name, value);
 		return this;
 	}
 	function getOption(name) {
-		let value = state.hasOwnProperty(name)
-		? get(state[name])
-		: undefined;
+		let value = state._get(name);
 		return value instanceof Date ? toLocalDate(value) : value;
 	}
@@ -2319,32 +2317,36 @@ function instance($$self, $$props, $$invalidate) {
 	}
 	function addEvent(event) {
-		updateEvents(events => events.concat(state.events.parse([event])));
+		$_events.push(createEvents([event])[0]);
+		_events.set($_events);
 		return this;
 	}
 	function updateEvent(event) {
-		updateEvents(events => {
-			for (let e of events) {
-				if (e.id == event.id) {
-					assign(e, state.events.parse([event])[0]);
-					break;
-				}
+		for (let e of $_events) {
+			if (e.id == event.id) {
+				assign(e, createEvents([event])[0]);
+				_events.set($_events);
+				break;
 			}
-			return events;
-		});
+		}
 		return this;
 	}
 	function removeEventById(id) {
-		updateEvents(events => events.filter(event => event.id != id));
+		let idx = $_events.findIndex(event => event.id == id);
+		if (idx >= 0) {
+			$_events.splice(idx, 1);
+			_events.set($_events);
+		}
 		return this;
 	}
 	function getView() {
-		return toViewWithLocalDates(state._view.get());
+		return toViewWithLocalDates(get(state._view));
 	}
 	function unselect() {
@@ -2364,14 +2366,6 @@ function instance($$self, $$props, $$invalidate) {
 		destroy_component(component, true);
 	}
-	function updateEvents(func) {
-		set_store_value(_events, $_events = func($_events), $_events);
-		if (!$eventSources.length) {
-			set_store_value(events, $events = $_events, $events);
-		}
-	}
 	beforeUpdate(() => {
 		flushDebounce($_queue);
 		setTimeout(recheckScrollable);
@@ -2384,14 +2378,13 @@ function instance($$self, $$props, $$invalidate) {
 	}
 	$$self.$$set = $$props => {
-		if ('plugins' in $$props) $$invalidate(17, plugins = $$props.plugins);
-		if ('options' in $$props) $$invalidate(18, options = $$props.options);
+		if ('plugins' in $$props) $$invalidate(15, plugins = $$props.plugins);
+		if ('options' in $$props) $$invalidate(16, options = $$props.options);
 	};
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*options*/ 262144) {
-			// Reactively update options that did change
-			for (let [name, value] of diff(options)) {
+		if ($$self.$$.dirty[0] & /*options*/ 65536) {
+			for (let [name, value] of diff(options, prevOptions)) {
 				setOption(name, value);
 			}
 		}
@@ -2410,8 +2403,6 @@ function instance($$self, $$props, $$invalidate) {
 		_events,
 		_queue,
 		_scrollable,
-		events,
-		eventSources,
 		height,
 		theme,
 		recheckScrollable,
@@ -2443,20 +2434,20 @@ class Calendar extends SvelteComponent {
 			create_fragment,
 			safe_not_equal,
 			{
-				plugins: 17,
-				options: 18,
-				setOption: 19,
-				getOption: 20,
-				refetchEvents: 21,
-				getEvents: 22,
-				getEventById: 23,
-				addEvent: 24,
-				updateEvent: 25,
-				removeEventById: 26,
-				getView: 27,
-				unselect: 28,
-				dateFromPoint: 29,
-				destroy: 30
+				plugins: 15,
+				options: 16,
+				setOption: 17,
+				getOption: 18,
+				refetchEvents: 19,
+				getEvents: 20,
+				getEventById: 21,
+				addEvent: 22,
+				updateEvent: 23,
+				removeEventById: 24,
+				getView: 25,
+				unselect: 26,
+				dateFromPoint: 27,
+				destroy: 28
 			},
 			null,
 			[-1, -1]
@@ -2464,52 +2455,52 @@ class Calendar extends SvelteComponent {
 	}
 	get setOption() {
-		return this.$$.ctx[19];
+		return this.$$.ctx[17];
 	}
 	get getOption() {
-		return this.$$.ctx[20];
+		return this.$$.ctx[18];
 	}
 	get refetchEvents() {
-		return this.$$.ctx[21];
+		return this.$$.ctx[19];
 	}
 	get getEvents() {
-		return this.$$.ctx[22];
+		return this.$$.ctx[20];
 	}
 	get getEventById() {
-		return this.$$.ctx[23];
+		return this.$$.ctx[21];
 	}
 	get addEvent() {
-		return this.$$.ctx[24];
+		return this.$$.ctx[22];
 	}
 	get updateEvent() {
-		return this.$$.ctx[25];
+		return this.$$.ctx[23];
 	}
 	get removeEventById() {
-		return this.$$.ctx[26];
+		return this.$$.ctx[24];
 	}
 	get getView() {
-		return this.$$.ctx[27];
+		return this.$$.ctx[25];
 	}
 	get unselect() {
-		return this.$$.ctx[28];
+		return this.$$.ctx[26];
 	}
 	get dateFromPoint() {
-		return this.$$.ctx[29];
+		return this.$$.ctx[27];
 	}
 	get destroy() {
-		return this.$$.ctx[30];
+		return this.$$.ctx[28];
 	}
 }
-export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createView, datesEqual, debounce, Calendar as default, derived2, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, keyEnter, keys, max, min, nextClosestDay, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, themeView, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates, writable2 };
+export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createView, datesEqual, debounce, Calendar as default, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, keyEnter, keys, max, min, nextClosestDay, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, themeView, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource view",
   "keywords": [

package/src/Calendar.svelte CHANGED Viewed

@@ -9,6 +9,7 @@
     import Auxiliary from './Auxiliary.svelte';
     import {
         assign,
+        createEvents,
         toEventWithLocalDates,
         toViewWithLocalDates,
         toLocalDate,
@@ -30,22 +31,18 @@
         events, eventSources, height, theme} = state;
     // Reactively update options that did change
-    $: for (let [name, value] of diff(options)) {
+    let prevOptions = {...options};
+    $: for (let [name, value] of diff(options, prevOptions)) {
         setOption(name, value);
     }
     export function setOption(name, value) {
-        if (state.hasOwnProperty(name)) {
-            if (state[name].parse) {
-                value = state[name].parse(value);
-            }
-            state[name].set(value);
-        }
+        state._set(name, value);
         return this;
     }
     export function getOption(name) {
-        let value = state.hasOwnProperty(name) ? get(state[name]) : undefined;
+        let value = state._get(name);
         return value instanceof Date ? toLocalDate(value) : value;
     }
@@ -68,30 +65,33 @@
     }
     export function addEvent(event) {
-        updateEvents(events => events.concat(state.events.parse([event])));
+        $_events.push(createEvents([event])[0]);
+        $_events = $_events;
         return this;
     }
     export function updateEvent(event) {
-        updateEvents(events => {
-            for (let e of events) {
-                if (e.id == event.id) {
-                    assign(e, state.events.parse([event])[0]);
-                    break;
-                }
+        for (let e of $_events) {
+            if (e.id == event.id) {
+                assign(e, createEvents([event])[0]);
+                $_events = $_events;
+                break;
             }
-            return events;
-        });
+        }
         return this;
     }
     export function removeEventById(id) {
-        updateEvents(events => events.filter(event => event.id != id));
+        let idx = $_events.findIndex(event => event.id == id);
+        if (idx >= 0) {
+            $_events.splice(idx, 1);
+            $_events = $_events;
+        }
         return this;
     }
     export function getView() {
-        return toViewWithLocalDates(state._view.get());
+        return toViewWithLocalDates(get(state._view));
     }
     export function unselect() {
@@ -110,13 +110,6 @@
         destroy_component(component, true);
     }
-    function updateEvents(func) {
-        $_events = func($_events);
-        if (!$eventSources.length) {
-            $events = $_events;
-        }
-    }
     beforeUpdate(() => {
         flushDebounce($_queue);
         setTimeout(recheckScrollable);

package/src/lib/stores.js CHANGED Viewed

@@ -1,35 +1,7 @@
-import {derived, writable, get} from 'svelte/store';
+import {derived} from 'svelte/store';
 import {is_function} from 'svelte/internal';
 import {toLocalDate} from './date';
-export function writable2(value, parser, start) {
-    return {
-        ...writable(value, start),
-        parse: parser
-    };
-}
-export function derived2(stores, fn, initValue) {
-    let storeValue = initValue;
-    let hasSubscribers = false;
-    let auto = fn.length < 2;
-    let fn2 = (_, set) => {
-        hasSubscribers = true;
-        if (auto) {
-            storeValue = fn(_, set);
-            set(storeValue);
-        } else {
-            fn(_, value => {storeValue = value; set(value);});
-        }
-        return () => {hasSubscribers = false;};
-    };
-    let store = derived(stores, fn2, storeValue);
-    return {
-        ...store,
-        get: () => hasSubscribers ? storeValue : get(store)
-    };
-}
 export function intl(locale, format) {
     return derived([locale, format], ([$locale, $format]) => {
         let intl = is_function($format)

package/src/storage/options.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import {assign, createDate, createDuration, setMidnight, createEvents, createEventSources} from '../lib.js';
+import {assign, createDate, createDuration, keys, setMidnight, createEvents, createEventSources} from '../lib.js';
 export function createOptions(plugins) {
     let options = {
@@ -133,17 +133,14 @@ export function createParsers(plugins) {
     return parsers;
 }
-let prev;
-export function diff(options) {
+export function diff(options, prevOptions) {
     let diff = [];
-    if (prev) {
-        for (let name of Object.keys(options)) {
-            if (options[name] !== prev[name]) {
-                diff.push([name, options[name]]);
-            }
+    for (let key of keys(options)) {
+        if (options[key] !== prevOptions[key]) {
+            diff.push([key, options[key]]);
         }
     }
-    prev = assign({}, options);
+    assign(prevOptions, options);
     return diff;
 }

package/src/storage/state.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import {writable} from 'svelte/store';
+import {get, writable} from 'svelte/store';
 import {is_function, tick, noop, identity} from 'svelte/internal';
 import {createOptions, createParsers} from './options';
 import {
@@ -12,7 +12,7 @@ import {
     viewTitle,
     view as view2  // hack to avoid a runtime error in SvelteKit dev mode (ReferenceError: view is not defined)
 } from './stores';
-import {keys, writable2, intl, intlRange} from '../lib.js';
+import {keys, intl, intlRange} from '../lib.js';
 export default class {
     constructor(plugins, input) {
@@ -28,7 +28,7 @@ export default class {
         // Create stores for options
         for (let [option, value] of Object.entries(options)) {
-            this[option] = writable2(value, parsers[option]);
+            this[option] = writable(value);
         }
         // Private stores
@@ -60,6 +60,17 @@ export default class {
         this._iClasses = writable(identity);  // interaction event css classes
         this._iClass = writable(undefined);  // interaction css class for entire calendar
+        // Set & Get
+        this._set = (key, value) => {
+            if (validKey(key, this)) {
+                if (parsers[key]) {
+                    value = parsers[key](value);
+                }
+                this[key].set(value);
+            }
+        };
+        this._get = key => validKey(key, this) ? get(this[key]) : undefined;
         // Let plugins create their private stores
         for (let plugin of plugins) {
             plugin.createStores?.(this);
@@ -73,51 +84,63 @@ export default class {
         // Set options for each view
         let views = new Set([...keys(options.views), ...keys(input.views ?? {})]);
         for (let view of views) {
-            let opts = mergeOpts(options, options.views[view] ?? {}, input, input.views?.[view] ?? {});
-            // Change view component when view changes
+            let defOpts = mergeOpts(options, options.views[view] ?? {});
+            let opts = mergeOpts(defOpts, input, input.views?.[view] ?? {});
+            let component = opts.component;
+            // Make sure we deal with valid opts from now on
+            filterOpts(opts, this);
+            // Process options
+            for (let key of keys(opts)) {
+                let {set, _set = set, ...rest} = this[key];
+                this[key] = {
+                    // Set value in all views
+                    set: ['buttonText', 'theme'].includes(key)
+                        ? value => {
+                            if (is_function(value)) {
+                                let result = value(defOpts[key]);
+                                opts[key] = result;
+                                set(set === _set ? result : value);
+                            } else {
+                                opts[key] = value;
+                                set(value);
+                            }
+                        }
+                        : value => {
+                            opts[key] = value;
+                            set(value);
+                        },
+                    _set,
+                    ...rest
+                };
+            }
+            // When view changes...
             this.view.subscribe(newView => {
                 if (newView === view) {
-                    this._viewComponent.set(opts.component);
+                    // switch view component
+                    this._viewComponent.set(component);
                     if (is_function(opts.viewDidMount)) {
-                        tick().then(() => opts.viewDidMount(this._view.get()));
+                        tick().then(() => opts.viewDidMount(get(this._view)));
                     }
-                }
-            });
-            // Process options
-            for (let key of keys(opts)) {
-                if (this.hasOwnProperty(key) && key[0] !== '_') {
-                    let {set, _set, ...rest} = this[key];
-                    if (!_set) {
-                        // Original set
-                        _set = set;
+                    // update store values
+                    for (let key of keys(opts)) {
+                        this[key]._set(opts[key]);
                     }
-                    this[key] = {
-                        // Set value in all views
-                        set: value => {opts[key] = value; set(value);},
-                        _set,
-                        ...rest
-                    };
-                    // Change value when view changes
-                    this.view.subscribe(newView => {
-                        if (newView === view) {
-                            _set(opts[key]);
-                        }
-                    });
                 }
-            }
+            });
         }
     }
 }
 function parseOpts(opts, parsers) {
-    let result = {};
-    for (let key of keys(opts)) {
-        result[key] = parsers[key] ? parsers[key](opts[key]) : opts[key];
+    let result = {...opts};
+    for (let key of keys(parsers)) {
+        if (key in result) {
+            result[key] = parsers[key](result[key]);
+        }
     }
     if (opts.views) {
+        result.views = {};
         for (let view of keys(opts.views)) {
             result.views[view] = parseOpts(opts.views[view], parsers);
         }
@@ -126,12 +149,29 @@ function parseOpts(opts, parsers) {
 }
 function mergeOpts(...args) {
-    let mergable = ['buttonText', 'theme'];
     let result = {};
     for (let opts of args) {
-        for (let key of keys(opts)) {
-            result[key] = mergable.includes(key) && is_function(opts[key]) ? opts[key](result[key]) : opts[key];
+        let override = {};
+        for (let key of ['buttonText', 'theme']) {
+            if (is_function(opts[key])) {
+                override[key] = opts[key](result[key]);
+            }
         }
+        result = {
+            ...result,
+            ...opts,
+            ...override
+        };
     }
     return result;
 }
+function filterOpts(opts, state) {
+    keys(opts)
+        .filter(key => !validKey(key, state) || key == 'view')
+        .forEach(key => delete opts[key]);
+}
+function validKey(key, state) {
+    return state.hasOwnProperty(key) && key[0] !== '_';
+}

package/src/storage/stores.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import {derived, writable, readable} from 'svelte/store';
+import {derived, writable, readable, get} from 'svelte/store';
 import {is_function} from 'svelte/internal';
 import {
     DAY_IN_SECONDS,
@@ -9,7 +9,6 @@ import {
     createView,
     addDuration,
     addDay,
-    derived2,
     subtractDay,
     toISOString,
     nextClosestDay,
@@ -66,7 +65,7 @@ export function currentRange(state) {
 }
 export function viewDates(state) {
-    return derived2([state._activeRange, state.hiddenDays], ([$_activeRange, $hiddenDays]) => {
+    return derived([state._activeRange, state.hiddenDays], ([$_activeRange, $hiddenDays]) => {
         let dates = [];
         let date = setMidnight(cloneDate($_activeRange.start));
         let end = setMidnight(cloneDate($_activeRange.end));
@@ -84,7 +83,7 @@ export function viewDates(state) {
                 }
                 return date;
             });
-            dates = state._viewDates.get();
+            dates = get(state._viewDates);
         }
         return dates;
@@ -103,7 +102,7 @@ export function viewTitle(state) {
 }
 export function view(state) {
-    return derived2([state.view, state._viewTitle, state._currentRange, state._activeRange], args => createView(...args));
+    return derived([state.view, state._viewTitle, state._currentRange, state._activeRange], args => createView(...args));
 }
 export function events(state) {