Svelte 5 support (no destroy() method)

vkurko · Sep 30, 2024 · b3971fb · b3971fb
1 parent b22047a
commit b3971fb
Show file tree

Hide file tree

Showing 26 changed files with 427 additions and 661 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,17 +22,17 @@
     "@event-calendar/resource-timeline": "~3.5.0",
     "@event-calendar/time-grid": "~3.5.0",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-commonjs": "^26.0.3",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
     "postcss": "^8.4.47",
-    "rollup": "^4.22.0",
+    "rollup": "^4.22.5",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-svelte": "^7.2.2",
-    "sass": "^1.79.2",
+    "sass": "^1.79.4",
     "svelte": "^4.2.19"
   },
   "dependencies": {

diff --git a/packages/core/src/Auxiliary.svelte b/packages/core/src/Auxiliary.svelte
@@ -1,7 +1,6 @@
 <script>
     import {getContext} from 'svelte';
-    import {is_function} from 'svelte/internal';
-    import {debounce, toISOString, toLocalDate, toViewWithLocalDates} from './lib.js';
+    import {debounce, toISOString, toLocalDate, toViewWithLocalDates, isFunction} from './lib.js';
 
     let {datesSet, _auxiliary, _activeRange, _queue, _view} = getContext('state');
 
@@ -10,7 +9,7 @@
 
     let debounceHandle = {};
     function runDatesSet(_activeRange) {
-        if (is_function($datesSet)) {
+        if (isFunction($datesSet)) {
             debounce(() => $datesSet({
                 start: toLocalDate(_activeRange.start),
                 end: toLocalDate(_activeRange.end),

diff --git a/packages/core/src/Calendar.svelte b/packages/core/src/Calendar.svelte
@@ -1,7 +1,6 @@
 <script>
     import './styles/index.scss';
     import {setContext, beforeUpdate, afterUpdate} from 'svelte';
-    import {destroy_component, get_current_component} from 'svelte/internal';
     import {get} from 'svelte/store';
     import {diff} from './storage/options';
     import State from './storage/state';
@@ -24,8 +23,6 @@
     export let plugins = [];
     export let options = {};
 
-    let component = get_current_component();
-
     let state = new State(plugins, options);
     setContext('state', state);
 
@@ -114,10 +111,6 @@
         return null;
     }
 
-    export function destroy() {
-        destroy_component(component, true);
-    }
-
     export function next() {
         $date = nextDate($date, $duration);
         return this;

diff --git a/packages/core/src/lib/debounce.js b/packages/core/src/lib/debounce.js
@@ -1,11 +1,11 @@
-import {run_all} from 'svelte/internal';
+import {runAll} from './utils.js';
 
 export function debounce(fn, handle, queueStore) {
     queueStore.update(queue => queue.set(handle, fn));
 }
 
 export function flushDebounce(queue) {
-    run_all(queue);
+    runAll(queue);
     queue.clear();
 }
 

diff --git a/packages/core/src/lib/dom.js b/packages/core/src/lib/dom.js
@@ -63,3 +63,8 @@ export function getElementWithPayload(x, y, root = document) {
     }
     return null;
 }
+
+export function listen(node, event, handler, options) {
+    node.addEventListener(event, handler, options);
+    return () => node.removeEventListener(event, handler, options);
+}
diff --git a/packages/core/src/lib/events.js b/packages/core/src/lib/events.js
@@ -1,8 +1,7 @@
 import {addDay, datesEqual, createDate, cloneDate, setMidnight, toLocalDate, toISOString, noTimePart, copyTime} from './date';
 import {createElement} from './dom';
-import {assign, isArray} from './utils';
+import {assign, isArray, isFunction} from './utils';
 import {toViewWithLocalDates} from './view';
-import {is_function} from 'svelte/internal';
 
 let eventId = 1;
 export function createEvents(input) {
@@ -79,7 +78,7 @@ export function createEventContent(chunk, displayEventEnd, eventContent, theme,
     let content;
 
     if (eventContent) {
-        content = is_function(eventContent)
+        content = isFunction(eventContent)
             ? eventContent({
                 event: toEventWithLocalDates(chunk.event),
                 timeText,
@@ -121,7 +120,7 @@ function createTimeElement(timeText, chunk, theme) {
 export function createEventClasses(eventClassNames, event, _view) {
     let result = event.classNames;
     if (eventClassNames) {
-        if (is_function(eventClassNames)) {
+        if (isFunction(eventClassNames)) {
             eventClassNames = eventClassNames({
                 event: toEventWithLocalDates(event),
                 view: toViewWithLocalDates(_view)

diff --git a/packages/core/src/lib/stores.js b/packages/core/src/lib/stores.js
@@ -1,11 +1,11 @@
 import {derived} from 'svelte/store';
-import {is_function} from 'svelte/internal';
+import {isFunction} from './utils.js';
 import {toLocalDate} from './date';
 import {createResources} from './resources.js';
 
 export function intl(locale, format) {
     return derived([locale, format], ([$locale, $format]) => {
-        let intl = is_function($format)
+        let intl = isFunction($format)
             ? {format: $format}
             : new Intl.DateTimeFormat($locale, $format);
         return {
@@ -17,7 +17,7 @@ export function intl(locale, format) {
 export function intlRange(locale, format) {
     return derived([locale, format], ([$locale, $format]) => {
         let formatRange;
-        if (is_function($format)) {
+        if (isFunction($format)) {
             formatRange = $format;
         } else {
             let intl = new Intl.DateTimeFormat($locale, $format);

diff --git a/packages/core/src/lib/times.js b/packages/core/src/lib/times.js
@@ -1,6 +1,5 @@
-import {is_function} from 'svelte/internal';
 import {addDuration, cloneDate, createDuration, DAY_IN_SECONDS, toISOString, toSeconds} from './date.js';
-import {max as maxFn, min as minFn} from './utils.js';
+import {max as maxFn, min as minFn, isFunction} from './utils.js';
 import {bgEvent} from './events.js';
 
 export function createTimes(date, $slotDuration, $_slotTimeLimits, $_intlSlotLabel) {
@@ -32,7 +31,7 @@ export function createSlotTimeLimits($slotMinTime, $slotMaxTime, $flexibleSlotTi
         // If slotMaxTime goes past midnight, then extend it back by a maximum of 24 hours
         let minMin = createDuration(minFn(toSeconds(min), maxFn(0, toSeconds(max) - DAY_IN_SECONDS)));
         let maxMax = createDuration(maxFn(toSeconds(max), toSeconds(minMin) + DAY_IN_SECONDS));
-        let filter = is_function($flexibleSlotTimeLimits?.eventFilter)
+        let filter = isFunction($flexibleSlotTimeLimits?.eventFilter)
             ? $flexibleSlotTimeLimits.eventFilter
             : event => !bgEvent(event.display);
         loop: for (let date of $_viewDates) {

diff --git a/packages/core/src/lib/utils.js b/packages/core/src/lib/utils.js
@@ -29,3 +29,19 @@ export function symbol() {
 export function isArray(value) {
     return Array.isArray(value);
 }
+
+export function isFunction(value) {
+    return typeof value === 'function';
+}
+
+export function run(fn) {
+    return fn();
+}
+
+export function runAll(fns) {
+    fns.forEach(run);
+}
+
+export function noop() {}
+
+export const identity = (x) => x;
diff --git a/packages/core/src/storage/state.js b/packages/core/src/storage/state.js
@@ -1,5 +1,5 @@
 import {get, writable} from 'svelte/store';
-import {is_function, tick, noop, identity} from 'svelte/internal';
+import {tick} from 'svelte';
 import {createOptions, createParsers} from './options';
 import {
     activeRange,
@@ -12,7 +12,7 @@ import {
     viewTitle,
     view as view2  // hack to avoid a runtime error in SvelteKit dev mode (ReferenceError: view is not defined)
 } from './stores';
-import {keys, intl, intlRange} from '../lib.js';
+import {keys, intl, intlRange, isFunction, identity} from '../lib.js';
 
 export default class {
     constructor(plugins, input) {
@@ -97,7 +97,7 @@ export default class {
                     // Set value in all views
                     set: ['buttonText', 'theme'].includes(key)
                         ? value => {
-                            if (is_function(value)) {
+                            if (isFunction(value)) {
                                 let result = value(defOpts[key]);
                                 opts[key] = result;
                                 set(set === _set ? result : value);
@@ -119,7 +119,7 @@ export default class {
                 if (newView === view) {
                     // switch view component
                     this._viewComponent.set(component);
-                    if (is_function(opts.viewDidMount)) {
+                    if (isFunction(opts.viewDidMount)) {
                         tick().then(() => opts.viewDidMount(get(this._view)));
                     }
                     // update store values
@@ -153,7 +153,7 @@ function mergeOpts(...args) {
     for (let opts of args) {
         let override = {};
         for (let key of ['buttonText', 'theme']) {
-            if (is_function(opts[key])) {
+            if (isFunction(opts[key])) {
                 override[key] = opts[key](result[key]);
             }
         }

diff --git a/packages/core/src/storage/stores.js b/packages/core/src/storage/stores.js
@@ -1,5 +1,5 @@
 import {derived, writable, readable, get} from 'svelte/store';
-import {is_function} from 'svelte/internal';
+import {isFunction} from '../lib/utils.js';
 import {
     DAY_IN_SECONDS,
     assign,
@@ -127,11 +127,11 @@ export function events(state) {
                 // Create new abort controller
                 abortController = new AbortController();
                 // Call loading hook
-                if (is_function($loading) && !fetching) {
+                if (isFunction($loading) && !fetching) {
                     $loading(true);
                 }
                 let stopLoading = () => {
-                    if (--fetching === 0 && is_function($loading)) {
+                    if (--fetching === 0 && isFunction($loading)) {
                         $loading(false);
                     }
                 };
@@ -148,7 +148,7 @@ export function events(state) {
                 let endStr = toISOString($_activeRange.end);
                 // Loop over event sources
                 for (let source of $eventSources) {
-                    if (is_function(source.events)) {
+                    if (isFunction(source.events)) {
                         // Events as a function
                         let result = source.events({
                             start: toLocalDate($_activeRange.start),
@@ -162,7 +162,7 @@ export function events(state) {
                     } else {
                         // Events as a JSON feed
                         // Prepare params
-                        let params = is_function(source.extraParams) ? source.extraParams() : assign({}, source.extraParams);
+                        let params = isFunction(source.extraParams) ? source.extraParams() : assign({}, source.extraParams);
                         params.start = startStr;
                         params.end = endStr;
                         params = new URLSearchParams(params);

diff --git a/packages/day-grid/src/Day.svelte b/packages/day-grid/src/Day.svelte
@@ -1,8 +1,7 @@
 <script>
     import {getContext, tick} from 'svelte';
-    import {is_function} from 'svelte/internal';
     import {datesEqual, setContent, createEventChunk, addDay, cloneDate, assign, setPayload, toISOString,
-        keyEnter, runReposition} from '@event-calendar/core';
+        keyEnter, runReposition, isFunction} from '@event-calendar/core';
     import Event from './Event.svelte';
     import Popup from './Popup.svelte';
 
@@ -52,7 +51,7 @@
     $: if ($_hiddenEvents && hiddenEvents.size) {  // make Svelte update this block on $_hiddenEvents update
         let text = '+' + hiddenEvents.size + ' more';
         if ($moreLinkContent) {
-            moreLink = is_function($moreLinkContent)
+            moreLink = isFunction($moreLinkContent)
                 ? $moreLinkContent({num: hiddenEvents.size, text})
                 : $moreLinkContent;
         } else {

diff --git a/packages/day-grid/src/Event.svelte b/packages/day-grid/src/Event.svelte
@@ -1,6 +1,5 @@
 <script>
     import {afterUpdate, getContext, onMount} from 'svelte';
-    import {is_function} from 'svelte/internal';
     import {
         ancestor,
         createEventClasses,
@@ -17,7 +16,8 @@
         keyEnter,
         task,
         rect,
-        bgEvent
+        bgEvent,
+        isFunction
     } from '@event-calendar/core';
 
     export let chunk;
@@ -85,7 +85,7 @@
     $: [timeText, content] = createEventContent(chunk, $displayEventEnd, $eventContent, $theme, $_intlEventTime, $_view);
 
     onMount(() => {
-        if (is_function($eventDidMount)) {
+        if (isFunction($eventDidMount)) {
             $eventDidMount({
                 event: toEventWithLocalDates(event),
                 timeText,
@@ -96,13 +96,13 @@
     });
 
     afterUpdate(() => {
-        if (is_function($eventAllUpdated) && !helperEvent(display)) {
+        if (isFunction($eventAllUpdated) && !helperEvent(display)) {
             task(() => $eventAllUpdated({view: toViewWithLocalDates($_view)}), 'eau', _tasks);
         }
     });
 
     function createHandler(fn, display) {
-        return !helperEvent(display) && is_function(fn)
+        return !helperEvent(display) && isFunction(fn)
             ? jsEvent => fn({event: toEventWithLocalDates(event), el, jsEvent, view: toViewWithLocalDates($_view)})
             : undefined;
     }