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

@event-calendar/core 5.3.1 → 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 (12) hide show

package/README.md +2 -2
package/dist/index.css +1 -1
package/dist/index.js +68 -67
package/package.json +2 -2
package/src/Calendar.svelte +2 -13
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 +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.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.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>

package/dist/index.css CHANGED Viewed

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

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.3.1
+ * 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(
@@ -3352,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 = {
@@ -3380,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);
@@ -5560,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(() => {
@@ -5572,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.1",
+  "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.49.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

@@ -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,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'));