fix!: Remove access to the svelte/internal API which is deprecated (#330

) * fix!: Remove access to the svelte/internal API which was never intended to be public. Allows Svelte 5 compatibility. BREAKING: remove support for the destroy() method on <Calendar />. Alternative: wrap the calendar in an {#if notDestroyed}<Calendar />{/if} block. * chore: bump version to 4.0.0 --------- Co-authored-by: Gonzalo Ruiz <rgon@rgon.es> Co-authored-by: Vladimir <mr.vladimir.alexeev@gmail.com>
vkurko · Sep 23, 2024 · 9758b8f · 9758b8f
1 parent b22047a
commit 9758b8f
Show file tree

Hide file tree

Showing 24 changed files with 78 additions and 51 deletions.
diff --git a/package-lock.json b/package-lock.json
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, is_function} from './lib.js';
 
     let {datesSet, _auxiliary, _activeRange, _queue, _view} = getContext('state');
 

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,4 +1,4 @@
-import {run_all} from 'svelte/internal';
+import {run_all} from './utils.js';
 
 export function debounce(fn, handle, queueStore) {
     queueStore.update(queue => queue.set(handle, fn));

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, is_function} from './utils';
 import {toViewWithLocalDates} from './view';
-import {is_function} from 'svelte/internal';
 
 let eventId = 1;
 export function createEvents(input) {

diff --git a/packages/core/src/lib/stores.js b/packages/core/src/lib/stores.js
@@ -1,5 +1,5 @@
 import {derived} from 'svelte/store';
-import {is_function} from 'svelte/internal';
+import {is_function} from './utils.js';
 import {toLocalDate} from './date';
 import {createResources} from './resources.js';
 

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, is_function} from './utils.js';
 import {bgEvent} from './events.js';
 
 export function createTimes(date, $slotDuration, $_slotTimeLimits, $_intlSlotLabel) {

diff --git a/packages/core/src/lib/utils.js b/packages/core/src/lib/utils.js
@@ -29,3 +29,46 @@ export function symbol() {
 export function isArray(value) {
     return Array.isArray(value);
 }
+
+/** @param {Array<() => void>} arr */
+export function run_all(arr) {
+	for (var i = 0; i < arr.length; i++) {
+		arr[i]();
+	}
+}
+
+/**
+ * @param {any} thing
+ * @returns {thing is Function}
+ */
+export function is_function(thing) {
+	return typeof thing === 'function';
+}
+
+export const noop = () => {};
+
+
+/**
+ * Fires the handler once immediately (unless corresponding arg is set to `false`),
+ * then listens to the given events until the render effect context is destroyed
+ * @param {EventTarget} target
+ * @param {Array<string>} events
+ * @param {(event?: Event) => void} handler
+ * @param {any} call_handler_immediately
+ */
+export function listen(target, events, handler, call_handler_immediately = true) {
+	if (call_handler_immediately) {
+		handler();
+	}
+
+	for (var name of events) {
+		target.addEventListener(name, handler);
+	}
+
+	teardown(() => {
+		for (var name of events) {
+			target.removeEventListener(name, handler);
+		}
+	});
+}
+
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, is_function} from '../lib.js';
 
 export default class {
     constructor(plugins, input) {
@@ -57,7 +57,7 @@ export default class {
         // Interaction
         this._interaction = writable({});
         this._iEvents = writable([null, null]);  // interaction events: [drag/resize, pointer]
-        this._iClasses = writable(identity);  // interaction event css classes
+        this._iClasses = writable([]);  // interaction event css classes
         this._iClass = writable(undefined);  // interaction css class for entire calendar
 
         // Set & Get

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 {is_function} from '../lib/utils.js';
 import {
     DAY_IN_SECONDS,
     assign,

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, is_function} from '@event-calendar/core';
     import Event from './Event.svelte';
     import Popup from './Popup.svelte';
 

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,
+        is_function
     } from '@event-calendar/core';
 
     export let chunk;

diff --git a/packages/interaction/src/Action.svelte b/packages/interaction/src/Action.svelte
@@ -1,6 +1,5 @@
 <script>
     import {getContext} from 'svelte';
-    import {is_function, listen, run_all} from 'svelte/internal';
     import {
         addDay,
         addDuration,
@@ -18,7 +17,8 @@
         toISOString,
         toLocalDate,
         toViewWithLocalDates,
-        listView, timelineView
+        listView, timelineView,
+        is_function, listen, run_all
     } from '@event-calendar/core';
     import {animate, limit} from './utils';
 

diff --git a/packages/interaction/src/Auxiliary.svelte b/packages/interaction/src/Auxiliary.svelte
@@ -1,7 +1,6 @@
 <script>
     import {getContext} from 'svelte';
-    import {listen} from 'svelte/internal';
-    import {bgEvent, helperEvent} from '@event-calendar/core';
+    import {bgEvent, helperEvent, listen} from '@event-calendar/core';
     import Action from './Action.svelte';
     import Pointer from './Pointer.svelte';
     import Resizer from './Resizer.svelte';

diff --git a/packages/interaction/src/index.js b/packages/interaction/src/index.js
@@ -1,5 +1,5 @@
 import {writable} from 'svelte/store';
-import {noop} from 'svelte/internal';
+import {noop} from '@event-calendar/core';
 import Auxiliary from './Auxiliary.svelte';
 
 export default {

diff --git a/packages/list/src/Body.svelte b/packages/list/src/Body.svelte
@@ -1,7 +1,6 @@
 <script>
     import {getContext} from 'svelte';
-    import {is_function} from 'svelte/internal';
-    import {addDay, cloneDate, toViewWithLocalDates, setContent, bgEvent} from '@event-calendar/core';
+    import {addDay, cloneDate, toViewWithLocalDates, setContent, bgEvent, is_function} from '@event-calendar/core';
     import Day from './Day.svelte';
 
     let {_bodyEl, _events, _view, _viewDates, noEventsClick, noEventsContent, theme} = getContext('state');

diff --git a/packages/list/src/Event.svelte b/packages/list/src/Event.svelte
@@ -1,6 +1,5 @@
 <script>
     import {afterUpdate, getContext, onMount} from 'svelte';
-    import {is_function} from 'svelte/internal';
     import {
         createEventContent,
         toEventWithLocalDates,
@@ -10,7 +9,8 @@
         keyEnter,
         resourceBackgroundColor,
         resourceTextColor,
-        task
+        task,
+        is_function
     } from '@event-calendar/core';
 
     export let chunk;

diff --git a/packages/resource-time-grid/src/Label.svelte b/packages/resource-time-grid/src/Label.svelte
@@ -1,7 +1,6 @@
 <script>
     import {getContext, onMount, afterUpdate, createEventDispatcher} from 'svelte';
-    import {is_function} from 'svelte/internal';
-    import {setContent, toLocalDate} from '@event-calendar/core';
+    import {setContent, toLocalDate, is_function} from '@event-calendar/core';
 
     export let resource;
     export let date = undefined;

diff --git a/packages/resource-timeline/src/Event.svelte b/packages/resource-timeline/src/Event.svelte
@@ -1,6 +1,5 @@
 <script>
     import {afterUpdate, getContext, onMount} from 'svelte';
-    import {is_function} from 'svelte/internal';
     import {
         createEventContent,
         createEventClasses,
@@ -12,7 +11,8 @@
         keyEnter,
         resourceBackgroundColor,
         resourceTextColor,
-        task, height, DAY_IN_SECONDS, toSeconds
+        task, height, DAY_IN_SECONDS, toSeconds,
+        is_function
     } from '@event-calendar/core';
     import {repositionEvent, getSlotTimeLimits} from './lib.js';
 

diff --git a/packages/resource-timeline/src/Label.svelte b/packages/resource-timeline/src/Label.svelte
@@ -1,7 +1,6 @@
 <script>
     import {getContext, onMount} from 'svelte';
-    import {is_function} from 'svelte/internal';
-    import {setContent, toLocalDate} from '@event-calendar/core';
+    import {setContent, toLocalDate, is_function} from '@event-calendar/core';
 
     export let resource;
     export let date = undefined;

diff --git a/packages/time-grid/src/Event.svelte b/packages/time-grid/src/Event.svelte
@@ -1,6 +1,5 @@
 <script>
     import {afterUpdate, getContext, onMount} from 'svelte';
-    import {is_function} from 'svelte/internal';
     import {
         createEventContent,
         createEventClasses,
@@ -13,7 +12,8 @@
         keyEnter,
         resourceBackgroundColor,
         resourceTextColor,
-        task
+        task,
+        is_function
     } from '@event-calendar/core';
 
     export let date;

diff --git a/packages/time-grid/src/all-day/Event.svelte b/packages/time-grid/src/all-day/Event.svelte
@@ -1,6 +1,5 @@
 <script>
     import {afterUpdate, getContext, onMount} from 'svelte';
-    import {is_function} from 'svelte/internal';
     import {
         createEventClasses,
         createEventContent,
@@ -13,7 +12,8 @@
         resourceTextColor,
         helperEvent,
         keyEnter,
-        task, rect, ancestor, bgEvent
+        task, rect, ancestor, bgEvent,
+        is_function
     } from '@event-calendar/core';
 
     export let chunk;

diff --git a/packages/time-grid/src/utils.js b/packages/time-grid/src/utils.js
@@ -1,4 +1,4 @@
-import {is_function} from 'svelte/internal';
+import {is_function} from '@event-calendar/core';
 import {sortEventChunks} from '@event-calendar/core';
 
 export function groupEventChunks(chunks) {

diff --git a/rollup.config.js b/rollup.config.js
@@ -21,7 +21,7 @@ export default [
 			format: 'es',
 			file: 'packages/core/index.js'
 		},
-		external: ['svelte', 'svelte/internal', 'svelte/store'],
+		external: ['svelte', 'svelte/store'],
 		plugins: [
 			svelte({
 				compilerOptions: {
@@ -47,7 +47,7 @@ export default [
 			format: 'es',
 			file: 'packages/interaction/index.js'
 		},
-		external: ['@event-calendar/core', 'svelte', 'svelte/internal', 'svelte/store'],
+		external: ['@event-calendar/core', 'svelte', 'svelte/store'],
 		plugins: [
 			svelte({
 				compilerOptions: {
@@ -64,7 +64,7 @@ export default [
 			format: 'es',
 			file: 'packages/day-grid/index.js'
 		},
-		external: ['@event-calendar/core', 'svelte', 'svelte/internal', 'svelte/store'],
+		external: ['@event-calendar/core', 'svelte', 'svelte/store'],
 		plugins: [
 			svelte({
 				compilerOptions: {
@@ -81,7 +81,7 @@ export default [
 			format: 'es',
 			file: 'packages/list/index.js'
 		},
-		external: ['@event-calendar/core', 'svelte', 'svelte/internal', 'svelte/store'],
+		external: ['@event-calendar/core', 'svelte', 'svelte/store'],
 		plugins: [
 			svelte({
 				compilerOptions: {
@@ -98,7 +98,7 @@ export default [
 			format: 'es',
 			file: 'packages/time-grid/index.js'
 		},
-		external: ['@event-calendar/core', 'svelte', 'svelte/internal', 'svelte/store'],
+		external: ['@event-calendar/core', 'svelte', 'svelte/store'],
 		plugins: [
 			svelte({
 				compilerOptions: {
@@ -115,7 +115,7 @@ export default [
 			format: 'es',
 			file: 'packages/resource-time-grid/index.js'
 		},
-		external: ['@event-calendar/core', '@event-calendar/time-grid', 'svelte', 'svelte/internal', 'svelte/store'],
+		external: ['@event-calendar/core', '@event-calendar/time-grid', 'svelte', 'svelte/store'],
 		plugins: [
 			svelte({
 				compilerOptions: {
@@ -132,7 +132,7 @@ export default [
 			format: 'es',
 			file: 'packages/resource-timeline/index.js'
 		},
-		external: ['@event-calendar/core', 'svelte', 'svelte/internal', 'svelte/store'],
+		external: ['@event-calendar/core', 'svelte', 'svelte/store'],
 		plugins: [
 			svelte({
 				compilerOptions: {