npm - @event-calendar/core - Versions diffs - 5.3.0 → 5.3.2 - Mend

@event-calendar/core 5.3.0 → 5.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 (13) hide show

package/README.md +13 -13
package/dist/index.css +1 -1
package/dist/index.js +79 -75
package/package.json +2 -2
package/src/Calendar.svelte +2 -13
package/src/lib/utils.js +4 -0
package/src/plugins/interaction/Action.svelte +16 -13
package/src/plugins/interaction/Resizer.svelte +2 -0
package/src/plugins/resource-timeline/Expander.svelte +2 -3
package/src/storage/effects.js +3 -2
package/src/storage/options.svelte.js +20 -31
package/src/storage/proxy.svelte.js +48 -0
package/src/storage/state.svelte.js +5 -4

package/README.md CHANGED Viewed

@@ -251,8 +251,8 @@ This bundle contains a version of the calendar that includes all plugins and is
 The first step is to 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@5.3.0/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.3.0/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.3.2/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.3.2/dist/event-calendar.min.js"></script>
 ```
 <details>
@@ -1546,7 +1546,7 @@ This option is used instead of the `events` option.
 `EventSource` should be an object with one of the following sets of properties:
-#### 1. Fetch events JSON from a URL
+#### 1. Fetch events from a URL
 <table>
 <tr>
 <td>
@@ -2033,13 +2033,13 @@ The function is triggered during resizing for each cursor movement and takes the
 - Type `array`, `object` or `function`
 - Default `[]`
-The source of resource data displayed in resource views. It can be provided in one of three ways:
+Defines the source of resource data displayed in resource views. It can be provided in one of three ways:
 #### 1. Array of plain objects
-The provided plain objects will be parsed into [Resource](#resource-object) objects.
+If the resources are predefined and do not change, then pass them as an array of plain objects. The provided plain objects will be [parsed]((#parsing-resource-from-a-plain-object)) into [Resource](#resource-object) objects.
-#### 2. Fetch resources JSON from a URL
-For this option, provide an object with the following properties:
+#### 2. Fetch resources from a URL
+To make the calendar load resources from a URL, specify `resources` option as an object with the following properties:
 <table>
 <tr>
 <td>
@@ -2056,7 +2056,7 @@ A URL from which the calendar will fetch an array of [parsable](#parsing-resourc
 `start`
 </td>
 <td>
-Start date of the range the calendar needs events for
+Start date of the range the calendar needs resources for
 </td>
 </tr>
 <tr>
@@ -2065,7 +2065,7 @@ Start date of the range the calendar needs events for
 `end`
 </td>
 <td>
-End date of the range the calendar needs events for
+End date of the range the calendar needs resources for
 </td>
 </tr>
 </table>
@@ -2094,26 +2094,26 @@ Other GET/POST data you want to send to the server. Can be a plain object or a f
 </table>
 #### 3. Execute custom function
-You can also provide a custom function that returns an array of resources.
+You can also specify `resources` as a custom function that provides resource data.
 ```js
 function(fetchInfo, successCallback, failureCallback) { }
 ```
 If [refetchResourcesOnNavigate](#refetchresourcesonnavigate) is enabled, the function will be called every time the user navigates to a different date. In this case,
-`fetchInfo` will be an object with the following properties (otherwise, it is an empty object):
+`fetchInfo` will be an object with the following properties (it is an empty object otherwise):
 <table>
 <tr>
 <td>
 `start`
 </td>
-<td>JavaScript Date object for the beginning of the range the calendar needs events for</td>
+<td>JavaScript Date object for the beginning of the range the calendar needs resources for</td>
 </tr>
 <tr>
 <td>
 `end`
 </td>
-<td>JavaScript Date object for the end of the range the calendar needs events for. Note: This value is exclusive</td>
+<td>JavaScript Date object for the end of the range the calendar needs resources for. Note: This value is exclusive</td>
 </tr>
 <tr>
 <td>

package/dist/index.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.3.0
+ * EventCalendar v5.3.2
  * https://github.com/vkurko/calendar
  */
 .ec {

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.3.0
+ * EventCalendar v5.3.2
  * https://github.com/vkurko/calendar
  */
 import { untrack, tick, getAbortSignal, getContext, setContext, onMount, mount, unmount } from "svelte";
@@ -72,6 +72,9 @@ function keys(object) {
 function entries(object) {
   return Object.entries(object);
 }
+function hasOwn(object, property) {
+  return Object.hasOwn(object, property);
+}
 function floor(value) {
   return Math.floor(value);
 }
@@ -770,6 +773,34 @@ function createSlotTimeLimits(slotMinTime, slotMaxTime, flexibleSlotTimeLimits,
   }
   return { min: min$1, max: max$1 };
 }
+function arrayProxy(array) {
+  let counter = 0;
+  let version = $.state($.proxy(counter));
+  return proxy(array, () => $.get(version), () => true, () => $.set(version, ++counter, true));
+}
+function objectProxy(object) {
+  let counter = 0;
+  let versions = $.proxy({});
+  return proxy(object, (prop) => versions[prop], (a, b) => a !== b, (prop) => versions[prop] = ++counter);
+}
+function proxy(target, setDependency, hasEffect, invokeEffect) {
+  return new Proxy(target, {
+    get(target2, prop, receiver) {
+      if (hasOwn(target2, prop)) {
+        setDependency(prop);
+      }
+      return Reflect.get(target2, prop, receiver);
+    },
+    set(target2, prop, value, receiver) {
+      let has = hasEffect(target2[prop], value);
+      Reflect.set(target2, prop, value, receiver);
+      if (has) {
+        invokeEffect(prop);
+      }
+      return true;
+    }
+  });
+}
 function createOptions(plugins) {
   let options = {
     buttonText: { today: "today" },
@@ -888,13 +919,12 @@ function optionsState(mainState, plugins, userOptions) {
   userOptions = parseOptions(userOptions, parsers);
   let defViewsOptions = extractOption(defOptions, "views") ?? {};
   let userViewsOptions = extractOption(userOptions, "views") ?? {};
-  let options = new SvelteMap();
-  setOptions(options, defOptions);
+  let options = objectProxy({});
+  assign(options, defOptions);
   let setters = {};
-  let currentOpts = {};
   function initEffects() {
     if (userOptions.view) {
-      options.set("view", userOptions.view);
+      options["view"] = userOptions.view;
     }
     let views = /* @__PURE__ */ new Set([...keys(defViewsOptions), ...keys(userViewsOptions)]);
     for (let view2 of views) {
@@ -904,7 +934,7 @@ function optionsState(mainState, plugins, userOptions) {
       let component = extractOption(opts, "component");
       delete opts.view;
       for (let key of keys(opts)) {
-        if (options.has(key)) {
+        if (hasOwn(options, key)) {
           if (!setters[key]) {
             setters[key] = [];
           }
@@ -914,35 +944,31 @@ function optionsState(mainState, plugins, userOptions) {
         }
       }
       $.user_pre_effect(() => {
-        let newView = options.get("view");
+        let newView = options["view"];
         untrack(() => {
           if (newView === view2) {
             mainState.setViewComponent(component);
-            currentOpts = opts;
-            setOptions(options, opts);
+            assign(options, opts);
           }
         });
       });
     }
   }
   return {
-    proxy: new Proxy(options, {
-      set(options2, key, value) {
-        currentOpts[key] = value;
-        options2.set(key, value);
-        return true;
-      },
-      get(options2, key) {
-        return options2.get(key);
-      }
-    }),
+    state: options,
     setOption(key, value, parsed) {
-      if (options.has(key)) {
-        if (!parsed && key in parsers) {
-          value = parsers[key](value);
+      if (hasOwn(options, key)) {
+        if (!parsed) {
+          if (key in parsers) {
+            value = parsers[key](value);
+          } else if (isPlainObject(value)) {
+            value = { ...value };
+          } else if (isArray(value)) {
+            value = [...value];
+          }
         }
         setters[key]?.forEach((set) => set(value));
-        options.set(key, currentOpts[key] ?? value);
+        options[key] = value;
       }
     },
     initEffects
@@ -981,11 +1007,6 @@ function mergeOpts(...args) {
   }
   return result;
 }
-function setOptions(map, options) {
-  for (let [key, value] of entries(options)) {
-    map.set(key, value);
-  }
-}
 function diff(options, prevOptions) {
   let diff2 = [];
   for (let key of keys(options)) {
@@ -1008,7 +1029,7 @@ function loadEvents(mainState, loadingInvoker) {
         eventSources.map((source) => isFunction(source.events) ? source.events : source),
         events,
         createEvents,
-        (result) => mainState.events = result,
+        (result) => mainState.events = arrayProxy(result),
         activeRange2,
         fetchedRange,
         viewDates2,
@@ -1032,7 +1053,7 @@ function loadResources(mainState, loadingInvoker) {
         isArray(resources) ? [] : [resources],
         resources,
         createResources,
-        (result) => mainState.resources = result,
+        (result) => mainState.resources = arrayProxy(result),
         activeRange2,
         fetchedRange,
         viewDates2,
@@ -1436,18 +1457,18 @@ class State {
   }
   #setOption;
   constructor(plugins, options) {
-    let { proxy, setOption, initEffects } = optionsState(this, plugins, options);
-    this.options = proxy;
+    let { state, setOption, initEffects } = optionsState(this, plugins, options);
+    this.options = state;
     this.#setOption = setOption;
     this.#auxComponents = $.state($.proxy([]));
     this.#currentRange = $.derived(currentRange(this));
     this.#activeRange = $.derived(activeRange(this));
     this.#fetchedRange = $.state($.proxy({ events: {}, resources: {} }));
-    this.#events = $.state([]);
+    this.#events = $.state(arrayProxy([]));
     this.#filteredEvents = $.derived(filteredEvents(this));
     this.#mainEl = $.state();
     this.#now = $.state($.proxy(createDate()));
-    this.#resources = $.state([]);
+    this.#resources = $.state(arrayProxy([]));
     this.#today = $.state($.proxy(setMidnight(createDate())));
     this.#intlEventTime = $.derived(intlRange(this, "eventTimeFormat"));
     this.#intlDayHeader = $.derived(intl(this, "dayHeaderFormat"));
@@ -1783,12 +1804,6 @@ function Calendar($$anchor, $$props) {
     assign(prevOptions, options());
   });
   function setOption(name, value) {
-    if (isPlainObject(value)) {
-      value = { ...value };
-    }
-    if (isArray(value)) {
-      value = [...value];
-    }
     mainState.setOption(name, value, false);
     return this;
   }
@@ -1819,7 +1834,6 @@ function Calendar($$anchor, $$props) {
   function addEvent(event) {
     event = createEvents([event])[0];
     $.get(events).push(event);
-    mainState.events = [...$.get(events)];
     return toEventWithLocalDates(event);
   }
   function updateEvent(event) {
@@ -1828,7 +1842,6 @@ function Calendar($$anchor, $$props) {
     if (idx >= 0) {
       event = createEvents([event])[0];
       $.get(events)[idx] = event;
-      mainState.events = [...$.get(events)];
       return toEventWithLocalDates(event);
     }
     return null;
@@ -1838,7 +1851,6 @@ function Calendar($$anchor, $$props) {
     let idx = $.get(events).findIndex((event) => event.id === id);
     if (idx >= 0) {
       $.get(events).splice(idx, 1);
-      mainState.events = [...$.get(events)];
     }
     return this;
   }
@@ -1887,27 +1899,17 @@ function Calendar($$anchor, $$props) {
   var node = $.child(div);
   Toolbar(node, {});
   var node_1 = $.sibling(node, 2);
-  {
-    var consequent = ($$anchor2) => {
-      var fragment = $.comment();
-      var node_2 = $.first_child(fragment);
-      $.component(node_2, () => $.get(View2), ($$anchor3, View_12) => {
-        View_12($$anchor3, {});
-      });
-      $.append($$anchor2, fragment);
-    };
-    $.if(node_1, ($$render) => {
-      if ($.get(View2)) $$render(consequent);
-    });
-  }
-  var node_3 = $.sibling(node_1, 2);
-  $.each(node_3, 17, () => $.get(auxComponents), $.index, ($$anchor2, AuxComponent) => {
-    var fragment_1 = $.comment();
-    var node_4 = $.first_child(fragment_1);
-    $.component(node_4, () => $.get(AuxComponent), ($$anchor3, AuxComponent_1) => {
+  $.component(node_1, () => $.get(View2), ($$anchor2, View_12) => {
+    View_12($$anchor2, {});
+  });
+  var node_2 = $.sibling(node_1, 2);
+  $.each(node_2, 17, () => $.get(auxComponents), $.index, ($$anchor2, AuxComponent) => {
+    var fragment = $.comment();
+    var node_3 = $.first_child(fragment);
+    $.component(node_3, () => $.get(AuxComponent), ($$anchor3, AuxComponent_1) => {
       AuxComponent_1($$anchor3, {});
     });
-    $.append($$anchor2, fragment_1);
+    $.append($$anchor2, fragment);
   });
   $.reset(div);
   $.template_effect(
@@ -3282,16 +3284,19 @@ function Action($$anchor, $$props) {
           }
         }
       }
-      interacting = false;
-      action = fromX = fromY = toX = toY = event = display = date = newDate = resource = newResource = delta = extraDuration = allDay = minResize = selectStep = margin = gridEl = viewport = snapDuration = void 0;
-      mainState.iClass = void 0;
-      if (timer) {
-        clearTimeout(timer);
-        timer = void 0;
-      }
+      handlePointerCancel();
     }
     noDateClick = false;
   }
+  function handlePointerCancel() {
+    interacting = false;
+    action = fromX = fromY = toX = toY = event = display = date = newDate = resource = newResource = delta = extraDuration = allDay = minResize = selectStep = margin = gridEl = viewport = snapDuration = void 0;
+    mainState.iClass = void 0;
+    if (timer) {
+      clearTimeout(timer);
+      timer = void 0;
+    }
+  }
   function findDayEl() {
     return getElementWithPayload(limit(toX, viewport.left, viewport.right), limit(toY, viewport.top, viewport.bottom));
   }
@@ -3349,7 +3354,7 @@ function Action($$anchor, $$props) {
       addDuration(iEvent.end, extraDuration);
     }
     event.display = "ghost";
-    mainState.events = [...$.get(events)];
+    $.get(events).length = $.get(events).length;
   }
   function createIEventSelect() {
     iEvent = {
@@ -3377,7 +3382,7 @@ function Action($$anchor, $$props) {
   }
   function updateEvent(target, source) {
     copyIEventData(target, source);
-    mainState.events = [...$.get(events)];
+    $.get(events).length = $.get(events).length;
   }
   function updateIEvent(source) {
     iEvent = copyIEventData(iEvent, source);
@@ -3482,7 +3487,7 @@ function Action($$anchor, $$props) {
   };
   $.event("pointermove", $.window, handlePointerMove);
   $.event("pointerup", $.window, handlePointerUp);
-  $.event("pointercancel", $.window, handlePointerUp);
+  $.event("pointercancel", $.window, handlePointerCancel);
   $.event("scroll", $.window, handleScroll2);
   var event_handler = $.derived(() => createPreventDefaultHandler(complexAction));
   $.event("selectstart", $.window, function(...$$args) {
@@ -5557,8 +5562,7 @@ var root_2 = $.from_html(`<button><!></button>`);
 var root = $.from_html(`<!> <span><!></span>`, 1);
 function Expander($$anchor, $$props) {
   $.push($$props, true);
-  let $$d = $.derived(() => getContext("state")), options = $.derived(() => $.get($$d).options);
-  let resources = $.derived(() => $.get(options).resources), theme = $.derived(() => $.get(options).theme);
+  let $$d = $.derived(() => getContext("state")), resources = $.derived(() => $.get($$d).resources), theme = $.derived(() => $.get($$d).options.theme);
   let payload = $.state({});
   let expanded = $.state(true);
   $.user_pre_effect(() => {
@@ -5569,7 +5573,7 @@ function Expander($$anchor, $$props) {
     $.set(expanded, !$.get(expanded));
     $.get(payload).expanded = $.get(expanded);
     toggle($.get(payload).children, $.get(expanded));
-    $.get(options).resources = [...$.get(resources)];
+    $.get(resources).length = $.get(resources).length;
   }
   function toggle(children, expand) {
     for (let child of children) {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "5.3.0",
+  "version": "5.3.2",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [
@@ -32,6 +32,6 @@
     "#components": "./src/lib/components/index.js"
   },
   "dependencies": {
-    "svelte": "^5.48.0"
+    "svelte": "^5.49.1"
   }
 }

package/src/Calendar.svelte CHANGED Viewed

@@ -2,7 +2,7 @@
     import './styles/index.css';
     import {setContext, untrack} from 'svelte';
     import {
-        assign, cloneDate, createEvents, getElementWithPayload, getPayload, isArray, isDate, isPlainObject, nextDate,
+        assign, cloneDate, createEvents, getElementWithPayload, getPayload, isDate, nextDate,
         prevDate, toEventWithLocalDates, toLocalDate, toViewWithLocalDates
     } from '#lib';
     import MainState from './storage/state.svelte.js';
@@ -33,12 +33,6 @@
     });
     export function setOption(name, value) {
-        if (isPlainObject(value)) {
-            value = {...value};
-        }
-        if (isArray(value)) {
-            value = [...value];
-        }
         mainState.setOption(name, value, false);
         return this;
     }
@@ -75,7 +69,6 @@
     export function addEvent(event) {
         event = createEvents([event])[0];
         events.push(event);
-        mainState.events = [...events];
         return toEventWithLocalDates(event);
     }
@@ -85,7 +78,6 @@
         if (idx >= 0) {
             event = createEvents([event])[0];
             events[idx] = event;
-            mainState.events = [...events];
             return toEventWithLocalDates(event);
         }
         return null;
@@ -96,7 +88,6 @@
         let idx = events.findIndex(event => event.id === id);
         if (idx >= 0) {
             events.splice(idx, 1);
-            mainState.events = [...events];
         }
         return this;
     }
@@ -143,9 +134,7 @@
     role="{features.includes('list') ? 'list' : 'table'}"
 >
     <Toolbar/>
-    {#if View} <!-- temporary fix for https://github.com/sveltejs/kit/issues/15109 -->
-        <View/>
-    {/if}
+    <View/>
     {#each auxComponents as AuxComponent}
         <AuxComponent/>
     {/each}

package/src/lib/utils.js CHANGED Viewed

@@ -10,6 +10,10 @@ export function entries(object) {
     return Object.entries(object);
 }
+export function hasOwn(object, property) {
+    return Object.hasOwn(object, property);
+}
 export function floor(value) {
     return Math.floor(value);
 }

package/src/plugins/interaction/Action.svelte CHANGED Viewed

@@ -393,21 +393,24 @@
                     }
                 }
             }
-            interacting = false;
-            action = fromX = fromY = toX = toY = event = display = date = newDate = resource = newResource = delta =
-                extraDuration = allDay = minResize = selectStep = margin = gridEl = viewport = snapDuration = undefined;
-            mainState.iClass = undefined;
-            if (timer) {
-                clearTimeout(timer);
-                timer = undefined;
-            }
+            handlePointerCancel();
         }
         noDateClick = false;
     }
+    function handlePointerCancel() {
+        interacting = false;
+        action = fromX = fromY = toX = toY = event = display = date = newDate = resource = newResource = delta =
+            extraDuration = allDay = minResize = selectStep = margin = gridEl = viewport = snapDuration = undefined;
+        mainState.iClass = undefined;
+        if (timer) {
+            clearTimeout(timer);
+            timer = undefined;
+        }
+    }
     function findDayEl() {
         // Limit coordinates to viewport
         return getElementWithPayload(
@@ -484,7 +487,7 @@
             addDuration(iEvent.end, extraDuration);
         }
         event.display = 'ghost';
-        mainState.events = [...events];
+        events.length = events.length;
     }
     function createIEventSelect() {
@@ -516,7 +519,7 @@
     function updateEvent(target, source) {
         copyIEventData(target, source);
-        mainState.events = [...events];
+        events.length = events.length;
     }
     function updateIEvent(source) {
@@ -641,7 +644,7 @@
 <svelte:window
     onpointermove={handlePointerMove}
     onpointerup={handlePointerUp}
-    onpointercancel={handlePointerUp}
+    onpointercancel={handlePointerCancel}
     onscroll={handleScroll}
     onselectstart={createPreventDefaultHandler(complexAction)}
     oncontextmenu={createPreventDefaultHandler(() => timer)}

package/src/plugins/interaction/Resizer.svelte CHANGED Viewed

@@ -30,9 +30,11 @@
 </script>
 {#if resizable && eventResizableFromStart}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div class="{theme.resizer} {theme.start}" onpointerdown={createResizeHandler(true)}></div>
 {/if}
 {@render children()}
 {#if resizable}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div class="{theme.resizer}" onpointerdown={createResizeHandler(false)}></div>
 {/if}

package/src/plugins/resource-timeline/Expander.svelte CHANGED Viewed

@@ -4,8 +4,7 @@
     let {resource} = $props();
-    let {options} = $derived(getContext('state'));
-    let {resources, theme} = $derived(options);
+    let {resources, options: {theme}} = $derived(getContext('state'));
     let payload = $state.raw({});
     let expanded = $state(true);
@@ -19,7 +18,7 @@
         expanded = !expanded;
         payload.expanded = expanded;
         toggle(payload.children, expanded);
-        options.resources = [...resources];
+        resources.length = resources.length;
     }
     function toggle(children, expand) {

package/src/storage/effects.js CHANGED Viewed

@@ -3,6 +3,7 @@ import {
     assign, cloneDate, createDate, createEvents, createResources, datesEqual, empty, isArray, isFunction, setMidnight,
     toISOString, toLocalDate, toViewWithLocalDates
 } from '#lib';
+import {arrayProxy} from './proxy.svelte.js';
 export function loadEvents(mainState, loadingInvoker) {
     return () => {
@@ -15,7 +16,7 @@ export function loadEvents(mainState, loadingInvoker) {
                 eventSources.map(source => isFunction(source.events) ? source.events : source),
                 events,
                 createEvents,
-                result => mainState.events = result,
+                result => mainState.events = arrayProxy(result),
                 activeRange,
                 fetchedRange,
                 viewDates,
@@ -38,7 +39,7 @@ export function loadResources(mainState, loadingInvoker) {
                 isArray(resources) ? [] : [resources],
                 resources,
                 createResources,
-                result => mainState.resources = result,
+                result => mainState.resources = arrayProxy(result),
                 activeRange,
                 fetchedRange,
                 viewDates,

package/src/storage/options.svelte.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import {untrack} from 'svelte';
 import {
-    createDate, createDateRange, createDuration, createEvents, createEventSources, createResources, entries, isArray,
-    isFunction, keys, setMidnight
+    assign, createDate, createDateRange, createDuration, createEvents, createEventSources, createResources, hasOwn,
+    isArray, isFunction, isPlainObject, keys, setMidnight
 } from '#lib';
-import {SvelteMap} from "svelte/reactivity";
+import {objectProxy} from './proxy.svelte.js';
 function createOptions(plugins) {
     let options = {
@@ -146,16 +146,15 @@ export function optionsState(mainState, plugins, userOptions) {
     let userViewsOptions = extractOption(userOptions, 'views') ?? {};
     // Create options state
-    let options = new SvelteMap();
-    setOptions(options, defOptions);
+    let options = objectProxy({});
+    assign(options, defOptions);
     let setters = {};
-    let currentOpts = {};
     function initEffects() {
         // Set initial view based on input
         if (userOptions.view) {
-            options.set('view', userOptions.view);
+            options['view'] = userOptions.view;
         }
         // Set options for each view
         let views = new Set([...keys(defViewsOptions), ...keys(userViewsOptions)]);
@@ -168,7 +167,7 @@ export function optionsState(mainState, plugins, userOptions) {
             delete opts.view;
             // Set up option setters and delete unknown options
             for (let key of keys(opts)) {
-                if (options.has(key)) {
+                if (hasOwn(options, key)) {
                     if (!setters[key]) {
                         setters[key] = [];
                     }
@@ -183,14 +182,13 @@ export function optionsState(mainState, plugins, userOptions) {
             }
             // When view changes...
             $effect.pre(() => {
-                let newView = options.get('view');
+                let newView = options['view'];
                 untrack(() => {
                     if (newView === view) {
                         // ...switch view component
                         mainState.setViewComponent(component);
                         // ...and update options
-                        currentOpts = opts;
-                        setOptions(options, opts);
+                        assign(options, opts);
                     }
                 });
             });
@@ -198,24 +196,21 @@ export function optionsState(mainState, plugins, userOptions) {
     }
     return {
-        proxy: new Proxy(options, {
-            set(options, key, value) {
-                currentOpts[key] = value;
-                options.set(key, value);
-                return true;
-            },
-            get(options, key) {
-                return options.get(key);
-            }
-        }),
+        state: options,
         setOption(key, value, parsed) {
-            if (options.has(key)) {
-                if (!parsed && key in parsers) {
-                    value = parsers[key](value);
+            if (hasOwn(options, key)) {
+                if (!parsed) {
+                    if (key in parsers) {
+                        value = parsers[key](value);
+                    } else if (isPlainObject(value)) {
+                        value = {...value};
+                    } else if (isArray(value)) {
+                        value = [...value];
+                    }
                 }
                 // Set value for all views
                 setters[key]?.forEach(set => set(value));
-                options.set(key, currentOpts[key] ?? value);
+                options[key] = value;
             }
         },
         initEffects
@@ -262,12 +257,6 @@ function mergeOpts(...args) {
     return result;
 }
-function setOptions(map, options) {
-    for (let [key, value] of entries(options)) {
-        map.set(key, value);
-    }
-}
 export function diff(options, prevOptions) {
     let diff = [];
     for (let key of keys(options)) {

package/src/storage/proxy.svelte.js ADDED Viewed

@@ -0,0 +1,48 @@
+import {hasOwn} from '#lib';
+/**
+ * Array proxy that triggers the effect on any assignment to first-level elements or length property
+ */
+export function arrayProxy(array) {
+    let counter = 0;
+    let version = $state(counter);
+    return proxy(
+        array,
+        () => version,
+        () => true,
+        () => version = ++counter
+    );
+}
+/**
+ * Object proxy that triggers the effect on changes to first-level properties
+ */
+export function objectProxy(object) {
+    let counter = 0;
+    let versions = $state({});
+    return proxy(
+        object,
+        prop => versions[prop],
+        (a, b) => a !== b,
+        prop => versions[prop] = ++counter
+    );
+}
+function proxy(target, setDependency, hasEffect, invokeEffect) {
+    return new Proxy(target, {
+        get(target, prop, receiver) {
+            if (hasOwn(target, prop)) {
+                setDependency(prop);
+            }
+            return Reflect.get(target, prop, receiver);
+        },
+        set(target, prop, value, receiver) {
+            let has = hasEffect(target[prop], value);
+            Reflect.set(target, prop, value, receiver);
+            if (has) {
+                invokeEffect(prop);
+            }
+            return true;
+        }
+    });
+}

package/src/storage/state.svelte.js CHANGED Viewed

@@ -5,6 +5,7 @@ import {
     createLoadingInvoker, loadEvents, loadResources, runDatesSet, runEventAllUpdated, runViewDidMount, setNowAndToday
 } from './effects.js';
 import {activeRange, currentRange, filteredEvents, view, viewDates, viewTitle} from './derived.js';
+import {arrayProxy} from './proxy.svelte.js';
 export default class State {
@@ -12,8 +13,8 @@ export default class State {
     constructor(plugins, options) {
         // Create options state
-        let {proxy, setOption, initEffects} = optionsState(this, plugins, options);
-        this.options = proxy;
+        let {state, setOption, initEffects} = optionsState(this, plugins, options);
+        this.options = state;
         this.#setOption = setOption;
         // Create other states
@@ -21,11 +22,11 @@ export default class State {
         this.currentRange = $derived.by(currentRange(this));
         this.activeRange = $derived.by(activeRange(this));
         this.fetchedRange = $state({events: {}, resources: {}});
-        this.events = $state.raw([]);
+        this.events = $state.raw(arrayProxy([]));
         this.filteredEvents = $derived.by(filteredEvents(this));
         this.mainEl = $state();
         this.now = $state(createDate());
-        this.resources = $state.raw([]);
+        this.resources = $state.raw(arrayProxy([]));
         this.today = $state(setMidnight(createDate()));
         this.intlEventTime = $derived.by(intlRange(this, 'eventTimeFormat'));
         this.intlDayHeader = $derived.by(intl(this, 'dayHeaderFormat'));