Merge pull request #7 from bartholomej/svelte5

bartholomej · web-flow · commit 26680ebc20c9 · 2025-01-05T18:55:21.000+01:00
Svelte 5 compat
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -10,15 +10,15 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 22
           registry-url: 'https://registry.npmjs.org'
 
       - name: Cache node modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -16,14 +16,14 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 22
 
       - name: Cache node modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18
+22
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,5 @@
 {
-  "printWidth": 100,
+  "printWidth": 150,
   "singleQuote": true,
   "useTabs": false,
   "tabWidth": 2,
diff --git a/package.json b/package.json
@@ -25,23 +25,23 @@
   "author": "Bartholomej <bart@bartweb.cz>",
   "license": "MIT",
   "dependencies": {
-    "svelte": "3.55.1"
+    "svelte": "5.16.1"
   },
   "peerDependencies": {
-    "svelte": "^3.0.0 || ^4.0.0"
+    "svelte": "^4.0.0 || ^5.0.0"
   },
   "type": "module",
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.54.0",
-    "@typescript-eslint/parser": "^5.54.0",
-    "eslint": "^8.35.0",
+    "@typescript-eslint/eslint-plugin": "^8.19.0",
+    "@typescript-eslint/parser": "^8.19.0",
+    "eslint": "^9.17.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-import": "^2.27.5",
-    "husky": "^8.0.3",
-    "npm-prepare-dist": "^0.4.1",
-    "prettier": "^2.8.4",
-    "pretty-quick": "^3.1.3",
-    "rimraf": "^4.3.0",
-    "typescript": "^4.9.5"
+    "eslint-plugin-import": "^2.31.0",
+    "husky": "^9.1.7",
+    "npm-prepare-dist": "^0.5.0",
+    "prettier": "^3.4.2",
+    "pretty-quick": "^4.0.0",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.7.2"
   }
-}
+}
diff --git a/src/helpers/helper.ts b/src/helpers/helper.ts
@@ -7,8 +7,7 @@ export const $ = (selector: HTMLElement): HTMLElement => {
   return selector;
 };
 
-export const extend = (...args: ScrollToElementOptions[]): ScrollToElementOptions =>
-  Object.assign({}, ...args);
+export const extend = (...args: ScrollToElementOptions[]): ScrollToElementOptions => Object.assign({}, ...args);
 
 export const cumulativeOffset = (element: HTMLElement | any): ScrollToElementPosition => {
   let top = 0;
@@ -26,8 +25,7 @@ export const cumulativeOffset = (element: HTMLElement | any): ScrollToElementPos
   };
 };
 
-export const directScroll = (element: HTMLElement | any): boolean =>
-  element && element !== document && element !== document.body;
+export const directScroll = (element: HTMLElement | any): boolean => element && element !== document && element !== document.body;
 
 export const scrollTop = (element: HTMLElement | any, value?: number): number => {
   const inSetter = value !== undefined;
@@ -48,3 +46,26 @@ export const scrollLeft = (element: HTMLElement, value?: number): number => {
     ? (document.documentElement.scrollLeft = document.body.scrollLeft = value)
     : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
 };
+
+export const noop = () => {};
+
+// Custom animation loop
+export const startAnimationLoop = (callback: (time: number) => boolean): (() => void) => {
+  let running = true;
+
+  const loop = (time: number) => {
+    if (!running) return;
+    if (callback(time)) {
+      requestAnimationFrame(loop);
+    }
+  };
+
+  requestAnimationFrame(loop);
+
+  // Return function to stop the loop
+  return () => {
+    running = false;
+  };
+};
+
+export const now = () => performance.now();
diff --git a/src/services/service.ts b/src/services/service.ts
@@ -1,8 +1,9 @@
+// animateScroll.ts
 import { cubicInOut } from 'svelte/easing';
-import { loop, noop, now } from 'svelte/internal';
-import { ScrollToElementOptions } from '../global.interface';
-import { $, cumulativeOffset, extend, scrollLeft, scrollTop } from '../helpers/helper.js';
+import { $, cumulativeOffset, extend, noop, scrollLeft, scrollTop, startAnimationLoop } from '../helpers/helper.js';
+import { ScrollToElementOptions } from './../global.interface.js';
 
+// Default options
 const defaultOptions: ScrollToElementOptions = {
   container: 'body',
   duration: 500,
@@ -16,26 +17,14 @@ const defaultOptions: ScrollToElementOptions = {
   scrollY: true
 };
 
+// Scroll to internal implementation
 const scrollToInternal = (options: ScrollToElementOptions): (() => void) => {
-  const {
-    duration,
-    delay,
-    easing,
-    x = 0,
-    y = 0,
-    scrollX,
-    scrollY,
-    onStart,
-    onDone,
-    container,
-    onAborting,
-    element
-  } = options;
+  const { duration, delay, easing, x = 0, y = 0, scrollX, scrollY, onStart, onDone, onAborting, container, element } = options;
 
   let { offset } = options;
 
   if (typeof offset === 'function') {
-    offset = offset() as Function;
+    offset = offset() as number;
   }
 
   const cumulativeOffsetContainer = cumulativeOffset(container);
@@ -52,32 +41,32 @@ const scrollToInternal = (options: ScrollToElementOptions): (() => void) => {
 
   let scrolling = true;
   let started = false;
-  const startTime = now() + delay;
+  const startTime = performance.now() + delay;
   const endTime = startTime + duration;
 
-  function scrollToTopLeft(element: HTMLElement, top: number, left: number): void {
-    if (scrollX) scrollLeft(element, left);
-    if (scrollY) scrollTop(element, top);
-  }
+  const scrollToTopLeft = (el: HTMLElement, top: number, left: number): void => {
+    if (scrollX) scrollLeft(el, left);
+    if (scrollY) scrollTop(el, top);
+  };
 
-  function start(delayStart: number | boolean): void {
-    if (!delayStart) {
+  const start = () => {
+    if (!started) {
       started = true;
       onStart(element, { x, y });
     }
-  }
+  };
 
-  function tick(progress: number): void {
+  const tick = (progress: number) => {
     scrollToTopLeft(container, initialY + diffY * progress, initialX + diffX * progress);
-  }
+  };
 
-  function stop(): void {
+  const stop = () => {
     scrolling = false;
-  }
+  };
 
-  loop((now): boolean => {
+  startAnimationLoop((now) => {
     if (!started && now >= startTime) {
-      start(false);
+      start();
     }
 
     if (started && now >= endTime) {
@@ -90,22 +79,22 @@ const scrollToInternal = (options: ScrollToElementOptions): (() => void) => {
       onAborting(element, { x, y });
       return false;
     }
+
     if (started) {
-      const p = now - startTime;
-      const t = 0 + 1 * easing(p / duration);
+      const p = (now - startTime) / duration;
+      const t = easing(p);
       tick(t);
     }
 
-    return true;
+    return scrolling;
   });
 
-  start(delay);
-
-  tick(0);
+  tick(0); // Initial tick
 
   return stop;
 };
 
+// Helper functions
 const proceedOptions = (options: ScrollToElementOptions): ScrollToElementOptions => {
   const opts = extend({}, defaultOptions, options);
   opts.container = $(opts.container);
@@ -115,76 +104,71 @@ const proceedOptions = (options: ScrollToElementOptions): ScrollToElementOptions
 
 const scrollContainerHeight = (containerElement: HTMLElement | Document): number => {
   if (containerElement && containerElement !== document && containerElement !== document.body) {
-    return (
-      (containerElement as HTMLElement).scrollHeight -
-      (containerElement as HTMLElement).offsetHeight
-    );
+    return (containerElement as HTMLElement).scrollHeight - (containerElement as HTMLElement).offsetHeight;
   }
   const { body } = document;
   const html = document.documentElement;
 
-  return Math.max(
-    body.scrollHeight,
-    body.offsetHeight,
-    html.clientHeight,
-    html.scrollHeight,
-    html.offsetHeight
-  );
+  return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
 };
 
 const setGlobalOptions = (options: ScrollToElementOptions): void => {
   extend(defaultOptions, options || {});
 };
 
-const scrollTo = (options: ScrollToElementOptions): (() => void) =>
-  scrollToInternal(proceedOptions(options));
+// Scroll functions
+const scrollTo = (options: ScrollToElementOptions): (() => void) => scrollToInternal(proceedOptions(options));
 
 const scrollToBottom = (options?: ScrollToElementOptions): (() => void) => {
-  options = proceedOptions(options);
+  const opts = proceedOptions(options);
 
   return scrollToInternal(
-    extend(options, {
+    extend(opts, {
       element: null,
-      y: scrollContainerHeight(options.container)
+      y: scrollContainerHeight(opts.container)
     })
   );
 };
 
 const scrollToTop = (options?: ScrollToElementOptions): (() => void) => {
-  options = proceedOptions(options);
+  const opts = proceedOptions(options);
 
   return scrollToInternal(
-    extend(options, {
+    extend(opts, {
       element: null,
       y: 0
     })
   );
 };
 
-const makeScrollToAction =
-  (scrollToFunc: Function) => (node: Node, options: ScrollToElementOptions) => {
-    let current = options;
-    const handle: EventListenerOrEventListenerObject = (e: Event) => {
-      e.preventDefault();
-      scrollToFunc(typeof current === 'string' ? { element: current } : current);
-    };
-    node.addEventListener('click', handle);
-    node.addEventListener('touchstart', handle);
-    return {
-      update(options: ScrollToElementOptions): void {
-        current = options;
-      },
-      destroy(): void {
-        node.removeEventListener('click', handle);
-        node.removeEventListener('touchstart', handle);
-      }
-    };
+const makeScrollToAction = (scrollToFunc: Function) => (node: Node, options: ScrollToElementOptions) => {
+  let current = options;
+  const handle: EventListenerOrEventListenerObject = (e: Event) => {
+    e.preventDefault();
+    scrollToFunc(typeof current === 'string' ? { element: current } : current);
   };
+  node.addEventListener('click', handle);
+  node.addEventListener('touchstart', handle);
+  return {
+    update(options: ScrollToElementOptions): void {
+      current = options;
+    },
+    destroy(): void {
+      node.removeEventListener('click', handle);
+      node.removeEventListener('touchstart', handle);
+    }
+  };
+};
 
 // Actions
 export const scrollto = makeScrollToAction(scrollTo);
 export const scrolltotop = makeScrollToAction(scrollToTop);
 export const scrolltobottom = makeScrollToAction(scrollToBottom);
 
 // Methods
-export const animateScroll = { scrollTo, scrollToTop, scrollToBottom, setGlobalOptions };
+export const animateScroll = {
+  scrollTo,
+  scrollToTop,
+  scrollToBottom,
+  setGlobalOptions
+};
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "printWidth": 100,`
	`2`	`+ "printWidth": 150,`
`3`	`3`	`"singleQuote": true,`
`4`	`4`	`"useTabs": false,`
`5`	`5`	`"tabWidth": 2,`