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

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

package/README.md +3 -3
package/dist/index.css +1 -1
package/dist/index.js +90 -73
package/package.json +2 -2
package/src/Calendar.svelte +1 -1
package/src/storage/effects.js +16 -2
package/src/storage/{options.svelte.js → options.js} +42 -48
package/src/storage/proxy.svelte.js +2 -2
package/src/storage/state.svelte.js +11 -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.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>
+<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.2
+ * EventCalendar v5.3.3
  * https://github.com/vkurko/calendar
  */
 .ec {

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.3.2
+ * EventCalendar v5.3.3
  * https://github.com/vkurko/calendar
  */
 import { untrack, tick, getAbortSignal, getContext, setContext, onMount, mount, unmount } from "svelte";
@@ -793,24 +793,32 @@ function proxy(target, setDependency, hasEffect, invokeEffect) {
     },
     set(target2, prop, value, receiver) {
       let has = hasEffect(target2[prop], value);
-      Reflect.set(target2, prop, value, receiver);
+      let result = Reflect.set(target2, prop, value, receiver);
       if (has) {
         invokeEffect(prop);
       }
-      return true;
+      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: [],
@@ -828,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: [],
@@ -874,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,
@@ -912,51 +923,47 @@ 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 defViews = extractOption(defOptions, "views") ?? {};
+  let userViews = extractOption(userOptions, "views") ?? {};
   let options = objectProxy({});
   assign(options, defOptions);
+  if (userOptions.view) {
+    options.view = userOptions.view;
+  }
   let setters = {};
-  function initEffects() {
-    if (userOptions.view) {
-      options["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 (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];
+  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["view"];
-        untrack(() => {
-          if (newView === view2) {
-            mainState.setViewComponent(component);
-            assign(options, opts);
-          }
-        });
-      });
     }
+    viewOptions[view2] = opts;
+    viewComponents[view2] = component;
   }
-  return {
-    state: options,
-    setOption(key, value, parsed) {
+  assign(options, viewOptions[options.view]);
+  return [
+    options,
+    function setOption(key, value, parsed = true) {
       if (hasOwn(options, key)) {
         if (!parsed) {
           if (key in parsers) {
@@ -971,8 +978,11 @@ function optionsState(mainState, plugins, userOptions) {
         options[key] = value;
       }
     },
-    initEffects
-  };
+    function setViewOptions(view2) {
+      assign(options, viewOptions[view2]);
+      return viewComponents[view2];
+    }
+  ];
 }
 function parseOptions(opts, parsers) {
   let result = { ...opts };
@@ -1003,7 +1013,11 @@ function mergeOpts(...args) {
         override[key] = opts[key](result[key]);
       }
     }
-    result = { ...result, ...opts, ...override };
+    result = {
+      ...result,
+      ...opts,
+      ...override
+    };
   }
   return result;
 }
@@ -1016,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 {
@@ -1120,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);
     }
@@ -1455,20 +1480,20 @@ class State {
   set iClass(value) {
     $.set(this.#iClass, value, true);
   }
-  #setOption;
+  options;
+  setOption;
+  setViewOptions;
   constructor(plugins, options) {
-    let { state, setOption, initEffects } = optionsState(this, plugins, options);
-    this.options = state;
-    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(arrayProxy([]));
+    this.#events = $.state(arrayProxy(this.options.events));
     this.#filteredEvents = $.derived(filteredEvents(this));
     this.#mainEl = $.state();
     this.#now = $.state($.proxy(createDate()));
-    this.#resources = $.state(arrayProxy([]));
+    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"));
@@ -1487,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));
@@ -1499,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>`);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "5.3.2",
+  "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.1"
+    "svelte": "^5.50.1"
   }
 }

package/src/Calendar.svelte CHANGED Viewed

@@ -6,7 +6,7 @@
         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();

package/src/storage/effects.js CHANGED Viewed

@@ -5,6 +5,20 @@ import {
 } 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 () => {
         // Dependencies
@@ -125,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

@@ -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,62 +142,53 @@ 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 = objectProxy({});
     assign(options, defOptions);
+    // Set initial view based on input
+    if (userOptions.view) {
+        options.view = userOptions.view;
+    }
+    // Set options for each view
     let setters = {};
-    function initEffects() {
-        // Set initial view based on input
-        if (userOptions.view) {
-            options['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 (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];
+    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['view'];
-                untrack(() => {
-                    if (newView === view) {
-                        // ...switch view component
-                        mainState.setViewComponent(component);
-                        // ...and update options
-                        assign(options, opts);
-                    }
-                });
-            });
         }
+        viewOptions[view] = opts;
+        viewComponents[view] = component;
     }
-    return {
-        state: options,
-        setOption(key, value, parsed) {
+    assign(options, viewOptions[options.view]);
+    return [
+        options,
+        function setOption(key, value, parsed = true) {
             if (hasOwn(options, key)) {
                 if (!parsed) {
                     if (key in parsers) {
@@ -213,8 +204,11 @@ export function optionsState(mainState, plugins, userOptions) {
                 options[key] = value;
             }
         },
-        initEffects
-    };
+        function setViewOptions(view) {
+            assign(options, viewOptions[view]);
+            return viewComponents[view];
+        }
+    ];
 }
 function parseOptions(opts, parsers) {

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

@@ -38,11 +38,11 @@ function proxy(target, setDependency, hasEffect, invokeEffect) {
         },
         set(target, prop, value, receiver) {
             let has = hasEffect(target[prop], value);
-            Reflect.set(target, prop, value, receiver);
+            let result = Reflect.set(target, prop, value, receiver);
             if (has) {
                 invokeEffect(prop);
             }
-            return true;
+            return result;
         }
     });
 }

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

@@ -1,32 +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 {state, setOption, initEffects} = optionsState(this, plugins, options);
-        this.options = state;
-        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(arrayProxy([]));
+        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(arrayProxy([]));
+        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'));
@@ -49,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));
@@ -62,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);
-    }
 }