npm - @event-calendar/core - Versions diffs - 5.3.1 → 5.3.3 - Mend

@event-calendar/core 5.3.1 → 5.3.3

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 (12) hide show

package/README.md +3 -3
package/dist/index.css +1 -1
package/dist/index.js +147 -129
package/package.json +2 -2
package/src/Calendar.svelte +3 -14
package/src/lib/utils.js +4 -0
package/src/plugins/interaction/Action.svelte +2 -2
package/src/plugins/resource-timeline/Expander.svelte +2 -3
package/src/storage/effects.js +19 -4
package/src/storage/{options.svelte.js → options.js} +57 -74
package/src/storage/proxy.svelte.js +48 -0
package/src/storage/state.svelte.js +12 -20

package/README.md CHANGED Viewed

@@ -5,7 +5,7 @@ See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
 Full-sized drag & drop JavaScript event calendar with resource & timeline views:
 * Lightweight (35kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
-* 100% human-coded
+* Feature-rich, performant, and with minimal DOM structure (thanks to [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout))
 * Zero-dependency (standalone bundle)
 * Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
@@ -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.1/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.3.1/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.3.3/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.3.3/dist/event-calendar.min.js"></script>
 ```
 <details>

package/dist/index.css CHANGED Viewed

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

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.3.1
+ * EventCalendar v5.3.3
  * 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,16 +773,52 @@ 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);
+      let result = Reflect.set(target2, prop, value, receiver);
+      if (has) {
+        invokeEffect(prop);
+      }
+      return result;
+    }
+  });
+}
 function createOptions(plugins) {
   let options = {
-    buttonText: { today: "today" },
+    buttonText: {
+      today: "today"
+    },
     customButtons: {},
     customScrollbars: false,
     // ec option
     date: /* @__PURE__ */ new Date(),
     datesSet: void 0,
-    dayHeaderFormat: { weekday: "short", month: "numeric", day: "numeric" },
-    dayHeaderAriaLabelFormat: { dateStyle: "full" },
+    dayHeaderFormat: {
+      weekday: "short",
+      month: "numeric",
+      day: "numeric"
+    },
+    dayHeaderAriaLabelFormat: {
+      dateStyle: "full"
+    },
     displayEventEnd: true,
     duration: { weeks: 1 },
     events: [],
@@ -797,10 +836,17 @@ function createOptions(plugins) {
     eventOrder: void 0,
     eventSources: [],
     eventTextColor: void 0,
-    eventTimeFormat: { hour: "numeric", minute: "2-digit" },
+    eventTimeFormat: {
+      hour: "numeric",
+      minute: "2-digit"
+    },
     filterEventsWithResources: false,
     firstDay: 0,
-    headerToolbar: { start: "title", center: "", end: "today prev,next" },
+    headerToolbar: {
+      start: "title",
+      center: "",
+      end: "today prev,next"
+    },
     height: void 0,
     hiddenDays: [],
     highlightedDates: [],
@@ -843,17 +889,13 @@ function createOptions(plugins) {
       title: "ec-title",
       toolbar: "ec-toolbar",
       view: "",
-      weekdays: [
-        "ec-sun",
-        "ec-mon",
-        "ec-tue",
-        "ec-wed",
-        "ec-thu",
-        "ec-fri",
-        "ec-sat"
-      ]
+      weekdays: ["ec-sun", "ec-mon", "ec-tue", "ec-wed", "ec-thu", "ec-fri", "ec-sat"]
+    },
+    titleFormat: {
+      year: "numeric",
+      month: "short",
+      day: "numeric"
     },
-    titleFormat: { year: "numeric", month: "short", day: "numeric" },
     validRange: void 0,
     view: void 0,
     viewDidMount: void 0,
@@ -881,72 +923,66 @@ function createParsers(plugins) {
   return parsers;
 }
 const specialOptions = ["buttonText", "customButtons", "theme"];
-function optionsState(mainState, plugins, userOptions) {
+function optionsState(plugins, userOptions) {
   let defOptions = createOptions(plugins);
   let parsers = createParsers(plugins);
   defOptions = parseOptions(defOptions, parsers);
   userOptions = parseOptions(userOptions, parsers);
-  let defViewsOptions = extractOption(defOptions, "views") ?? {};
-  let userViewsOptions = extractOption(userOptions, "views") ?? {};
-  let options = new SvelteMap();
-  setOptions(options, defOptions);
+  let defViews = extractOption(defOptions, "views") ?? {};
+  let userViews = extractOption(userOptions, "views") ?? {};
+  let options = objectProxy({});
+  assign(options, defOptions);
+  if (userOptions.view) {
+    options.view = userOptions.view;
+  }
   let setters = {};
-  let currentOpts = {};
-  function initEffects() {
-    if (userOptions.view) {
-      options.set("view", userOptions.view);
-    }
-    let views = /* @__PURE__ */ new Set([...keys(defViewsOptions), ...keys(userViewsOptions)]);
-    for (let view2 of views) {
-      let userViewOptions = userViewsOptions[view2] ?? {};
-      let defOpts = mergeOpts(defOptions, defViewsOptions[view2] ?? defViewsOptions[userViewOptions.type] ?? {});
-      let opts = mergeOpts(defOpts, userOptions, userViewOptions);
-      let component = extractOption(opts, "component");
-      delete opts.view;
-      for (let key of keys(opts)) {
-        if (options.has(key)) {
-          if (!setters[key]) {
-            setters[key] = [];
-          }
-          setters[key].push(specialOptions.includes(key) ? (value) => opts[key] = isFunction(value) ? value(defOpts[key]) : value : (value) => opts[key] = value);
-        } else {
-          delete opts[key];
+  let viewOptions = {};
+  let viewComponents = {};
+  let views = /* @__PURE__ */ new Set([...keys(defViews), ...keys(userViews)]);
+  for (let view2 of views) {
+    let userViewOptions = userViews[view2] ?? {};
+    let defOpts = mergeOpts(defOptions, defViews[view2] ?? defViews[userViewOptions.type] ?? {});
+    let opts = mergeOpts(defOpts, userOptions, userViewOptions);
+    let component = extractOption(opts, "component");
+    delete opts.view;
+    for (let key of keys(opts)) {
+      if (hasOwn(options, key)) {
+        if (!setters[key]) {
+          setters[key] = [];
         }
+        setters[key].push(
+          specialOptions.includes(key) ? (value) => opts[key] = isFunction(value) ? value(defOpts[key]) : value : (value) => opts[key] = value
+        );
+      } else {
+        delete opts[key];
       }
-      $.user_pre_effect(() => {
-        let newView = options.get("view");
-        untrack(() => {
-          if (newView === view2) {
-            mainState.setViewComponent(component);
-            currentOpts = opts;
-            setOptions(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);
-      }
-    }),
-    setOption(key, value, parsed) {
-      if (options.has(key)) {
-        if (!parsed && key in parsers) {
-          value = parsers[key](value);
+    viewOptions[view2] = opts;
+    viewComponents[view2] = component;
+  }
+  assign(options, viewOptions[options.view]);
+  return [
+    options,
+    function setOption(key, value, parsed = true) {
+      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
-  };
+    function setViewOptions(view2) {
+      assign(options, viewOptions[view2]);
+      return viewComponents[view2];
+    }
+  ];
 }
 function parseOptions(opts, parsers) {
   let result = { ...opts };
@@ -977,15 +1013,14 @@ function mergeOpts(...args) {
         override[key] = opts[key](result[key]);
       }
     }
-    result = { ...result, ...opts, ...override };
+    result = {
+      ...result,
+      ...opts,
+      ...override
+    };
   }
   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)) {
@@ -995,6 +1030,17 @@ function diff(options, prevOptions) {
   }
   return diff2;
 }
+function switchView(mainState) {
+  return () => {
+    let { options: { view: view2 } } = mainState;
+    untrack(() => {
+      let initComponent = mainState.setViewOptions(view2);
+      mainState.extensions = {};
+      mainState.features = [];
+      mainState.viewComponent = initComponent(mainState);
+    });
+  };
+}
 function loadEvents(mainState, loadingInvoker) {
   return () => {
     let {
@@ -1008,7 +1054,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 +1078,7 @@ function loadResources(mainState, loadingInvoker) {
         isArray(resources) ? [] : [resources],
         resources,
         createResources,
-        (result) => mainState.resources = result,
+        (result) => mainState.resources = arrayProxy(result),
         activeRange2,
         fetchedRange,
         viewDates2,
@@ -1099,10 +1145,10 @@ function load(sources, defaultResult, parseResult, applyResult, activeRange2, fe
     assign(fetchedRange, activeRange2);
   }
 }
-function createLoadingInvoker(options) {
+function createLoadingInvoker(mainState) {
   let counter = 0;
   function invoke(value) {
-    let { loading } = options;
+    let { options: { loading } } = mainState;
     if (isFunction(loading)) {
       loading(value);
     }
@@ -1434,20 +1480,20 @@ class State {
   set iClass(value) {
     $.set(this.#iClass, value, true);
   }
-  #setOption;
+  options;
+  setOption;
+  setViewOptions;
   constructor(plugins, options) {
-    let { proxy, setOption, initEffects } = optionsState(this, plugins, options);
-    this.options = proxy;
-    this.#setOption = setOption;
+    [this.options, this.setOption, this.setViewOptions] = optionsState(plugins, options);
     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.options.events));
     this.#filteredEvents = $.derived(filteredEvents(this));
     this.#mainEl = $.state();
     this.#now = $.state($.proxy(createDate()));
-    this.#resources = $.state([]);
+    this.#resources = $.state(arrayProxy(this.options.resources));
     this.#today = $.state($.proxy(setMidnight(createDate())));
     this.#intlEventTime = $.derived(intlRange(this, "eventTimeFormat"));
     this.#intlDayHeader = $.derived(intl(this, "dayHeaderFormat"));
@@ -1466,11 +1512,11 @@ class State {
     for (let plugin of plugins) {
       plugin.initState?.(this);
     }
-    initEffects();
     this.#initEffects();
   }
   #initEffects() {
-    let loading = createLoadingInvoker(this.options);
+    let loading = createLoadingInvoker(this);
+    $.user_pre_effect(switchView(this));
     $.user_pre_effect(setNowAndToday(this));
     $.user_effect(loadEvents(this, loading));
     $.user_effect(loadResources(this, loading));
@@ -1478,14 +1524,6 @@ class State {
     $.user_effect(runEventAllUpdated(this));
     $.user_effect(runViewDidMount(this));
   }
-  setViewComponent(component) {
-    this.extensions = {};
-    this.features = [];
-    this.viewComponent = component(this);
-  }
-  setOption(name, value, parsed = true) {
-    this.#setOption(name, value, parsed);
-  }
 }
 var root_2$5 = $.from_html(`<h2></h2>`);
 var root_4$1 = $.from_html(`<button><i></i></button>`);
@@ -1783,12 +1821,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 +1851,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 +1859,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 +1868,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 +1916,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(
@@ -3352,7 +3371,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 = {
@@ -3380,7 +3399,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);
@@ -5560,8 +5579,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(() => {
@@ -5572,7 +5590,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.1",
+  "version": "5.3.3",
   "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.49.0"
+    "svelte": "^5.50.1"
   }
 }

package/src/Calendar.svelte CHANGED Viewed

@@ -2,11 +2,11 @@
     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';
-    import {diff} from './storage/options.svelte.js';
+    import {diff} from './storage/options.js';
     import Toolbar from './Toolbar.svelte';
     let {plugins = [], options = {}} = $props();
@@ -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

@@ -487,7 +487,7 @@
             addDuration(iEvent.end, extraDuration);
         }
         event.display = 'ghost';
-        mainState.events = [...events];
+        events.length = events.length;
     }
     function createIEventSelect() {
@@ -519,7 +519,7 @@
     function updateEvent(target, source) {
         copyIEventData(target, source);
-        mainState.events = [...events];
+        events.length = events.length;
     }
     function updateIEvent(source) {

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,21 @@ import {
     assign, cloneDate, createDate, createEvents, createResources, datesEqual, empty, isArray, isFunction, setMidnight,
     toISOString, toLocalDate, toViewWithLocalDates
 } from '#lib';
+import {arrayProxy} from './proxy.svelte.js';
+export function switchView(mainState) {
+    return () => {
+        // Dependencies
+        let {options: {view}} = mainState;
+        untrack(() => {
+            let initComponent = mainState.setViewOptions(view);
+            mainState.extensions = {};
+            mainState.features = [];
+            mainState.viewComponent = initComponent(mainState);
+        });
+    };
+}
 export function loadEvents(mainState, loadingInvoker) {
     return () => {
@@ -15,7 +30,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 +53,7 @@ export function loadResources(mainState, loadingInvoker) {
                 isArray(resources) ? [] : [resources],
                 resources,
                 createResources,
-                result => mainState.resources = result,
+                result => mainState.resources = arrayProxy(result),
                 activeRange,
                 fetchedRange,
                 viewDates,
@@ -124,10 +139,10 @@ function load(sources, defaultResult, parseResult, applyResult, activeRange, fet
     }
 }
-export function createLoadingInvoker(options) {
+export function createLoadingInvoker(mainState) {
     let counter = 0;
     function invoke(value) {
-        let {loading} = options;
+        let {options: {loading}} = mainState;
         if (isFunction(loading)) {
             loading(value);
         }

package/src/storage/{options.svelte.js → options.js} RENAMED 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 = {
@@ -132,7 +132,7 @@ function createParsers(plugins) {
 // Options where default value is passed to the function
 const specialOptions = ['buttonText', 'customButtons', 'theme'];
-export function optionsState(mainState, plugins, userOptions) {
+export function optionsState(plugins, userOptions) {
     // Create default options and parsers
     let defOptions = createOptions(plugins);
     let parsers = createParsers(plugins);
@@ -142,84 +142,73 @@ export function optionsState(mainState, plugins, userOptions) {
     userOptions = parseOptions(userOptions, parsers);
     // Extract view-specific options
-    let defViewsOptions = extractOption(defOptions, 'views') ?? {};
-    let userViewsOptions = extractOption(userOptions, 'views') ?? {};
+    let defViews = extractOption(defOptions, 'views') ?? {};
+    let userViews = extractOption(userOptions, 'views') ?? {};
     // Create options state
-    let options = new SvelteMap();
-    setOptions(options, defOptions);
+    let options = objectProxy({});
+    assign(options, defOptions);
+    // Set initial view based on input
+    if (userOptions.view) {
+        options.view = userOptions.view;
+    }
+    // Set options for each view
     let setters = {};
-    let currentOpts = {};
-    function initEffects() {
-        // Set initial view based on input
-        if (userOptions.view) {
-            options.set('view', userOptions.view);
-        }
-        // Set options for each view
-        let views = new Set([...keys(defViewsOptions), ...keys(userViewsOptions)]);
-        for (let view of views) {
-            let userViewOptions = userViewsOptions[view] ?? {};
-            let defOpts = mergeOpts(defOptions, defViewsOptions[view] ?? defViewsOptions[userViewOptions.type] ?? {});
-            let opts = mergeOpts(defOpts, userOptions, userViewOptions);
-            let component = extractOption(opts, 'component');
-            // View has been set
-            delete opts.view;
-            // Set up option setters and delete unknown options
-            for (let key of keys(opts)) {
-                if (options.has(key)) {
-                    if (!setters[key]) {
-                        setters[key] = [];
-                    }
-                    setters[key].push(
-                        specialOptions.includes(key)
-                            ? value => opts[key] = isFunction(value) ? value(defOpts[key]) : value
-                            : value => opts[key] = value
-                    );
-                } else {
-                    delete opts[key];
+    let viewOptions = {};
+    let viewComponents = {};
+    let views = new Set([...keys(defViews), ...keys(userViews)]);
+    for (let view of views) {
+        let userViewOptions = userViews[view] ?? {};
+        let defOpts = mergeOpts(defOptions, defViews[view] ?? defViews[userViewOptions.type] ?? {});
+        let opts = mergeOpts(defOpts, userOptions, userViewOptions);
+        let component = extractOption(opts, 'component');
+        // View has been set
+        delete opts.view;
+        // Set up option setters and delete unknown options
+        for (let key of keys(opts)) {
+            if (hasOwn(options, key)) {
+                if (!setters[key]) {
+                    setters[key] = [];
                 }
+                setters[key].push(
+                    specialOptions.includes(key)
+                        ? value => opts[key] = isFunction(value) ? value(defOpts[key]) : value
+                        : value => opts[key] = value
+                );
+            } else {
+                delete opts[key];
             }
-            // When view changes...
-            $effect.pre(() => {
-                let newView = options.get('view');
-                untrack(() => {
-                    if (newView === view) {
-                        // ...switch view component
-                        mainState.setViewComponent(component);
-                        // ...and update options
-                        currentOpts = opts;
-                        setOptions(options, opts);
-                    }
-                });
-            });
         }
+        viewOptions[view] = opts;
+        viewComponents[view] = component;
     }
-    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);
-            }
-        }),
-        setOption(key, value, parsed) {
-            if (options.has(key)) {
-                if (!parsed && key in parsers) {
-                    value = parsers[key](value);
+    assign(options, viewOptions[options.view]);
+    return [
+        options,
+        function setOption(key, value, parsed = true) {
+            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
-    };
+        function setViewOptions(view) {
+            assign(options, viewOptions[view]);
+            return viewComponents[view];
+        }
+    ];
 }
 function parseOptions(opts, parsers) {
@@ -262,12 +251,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);
+            let result = Reflect.set(target, prop, value, receiver);
+            if (has) {
+                invokeEffect(prop);
+            }
+            return result;
+        }
+    });
+}

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

@@ -1,31 +1,33 @@
 import {SvelteMap} from 'svelte/reactivity';
 import {createDate, identity, intl, intlRange, setMidnight} from '#lib';
-import {optionsState} from './options.svelte.js';
+import {optionsState} from './options.js';
 import {
-    createLoadingInvoker, loadEvents, loadResources, runDatesSet, runEventAllUpdated, runViewDidMount, setNowAndToday
+    createLoadingInvoker, loadEvents, loadResources, runDatesSet, runEventAllUpdated, runViewDidMount, setNowAndToday,
+    switchView
 } from './effects.js';
 import {activeRange, currentRange, filteredEvents, view, viewDates, viewTitle} from './derived.js';
+import {arrayProxy} from './proxy.svelte.js';
 export default class State {
-    #setOption;
+    options;
+    setOption;
+    setViewOptions;
     constructor(plugins, options) {
         // Create options state
-        let {proxy, setOption, initEffects} = optionsState(this, plugins, options);
-        this.options = proxy;
-        this.#setOption = setOption;
+        ([this.options, this.setOption, this.setViewOptions] = optionsState(plugins, options));
         // Create other states
         this.auxComponents = $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.options.events));
         this.filteredEvents = $derived.by(filteredEvents(this));
         this.mainEl = $state();
         this.now = $state(createDate());
-        this.resources = $state.raw([]);
+        this.resources = $state.raw(arrayProxy(this.options.resources));
         this.today = $state(setMidnight(createDate()));
         this.intlEventTime = $derived.by(intlRange(this, 'eventTimeFormat'));
         this.intlDayHeader = $derived.by(intl(this, 'dayHeaderFormat'));
@@ -48,12 +50,12 @@ export default class State {
             plugin.initState?.(this);
         }
-        initEffects();
         this.#initEffects();
     }
     #initEffects() {
-        let loading = createLoadingInvoker(this.options);
+        let loading = createLoadingInvoker(this);
+        $effect.pre(switchView(this));
         $effect.pre(setNowAndToday(this));
         $effect(loadEvents(this, loading));
         $effect(loadResources(this, loading));
@@ -61,14 +63,4 @@ export default class State {
         $effect(runEventAllUpdated(this));
         $effect(runViewDidMount(this));
     }
-    setViewComponent(component) {
-        this.extensions = {};
-        this.features = [];
-        this.viewComponent = component(this);
-    }
-    setOption(name, value, parsed = true) {
-        this.#setOption(name, value, parsed);
-    }
 }