@arisbh/marqueeck - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

dist/index.d.ts

 import Marqueeck from "./Marqueeck.svelte";
 import type { MarqueeckOptions as Options } from "./Marqueeck";
+import { pingPongHelper, factorDamper, scrollState, scrollHandler } from "./SpeedFactorHelpers";
 export default Marqueeck;
 export type MarqueeckOptions = Options;
+export { pingPongHelper, factorDamper, scrollState, scrollHandler };

dist/index.js

 // Reexport your entry components here
 import Marqueeck from "./Marqueeck.svelte";
+// Helpers
+import { pingPongHelper, factorDamper, scrollState, scrollHandler } from "./SpeedFactorHelpers";
 export default Marqueeck;
+export { pingPongHelper, factorDamper, scrollState, scrollHandler };

dist/Marqueeck.d.ts

@@ -1,2 +0,2 @@
-import { quadInOut } from 'svelte/easing';
+import type { TransitionConfig } from 'svelte/transition';
 export type TranslateOptions = {
@@ -8,2 +8,3 @@ initialPosition: number;
 };
+type SvelteTransition = (node: HTMLElement, params?: TransitionConfig) => any;
 export type MarqueeckOptions = {
@@ -15,3 +16,3 @@ speed?: number;
     speedFactor?: number;
-    gradualHoverDuration?: number;
+    brakeDuration?: number;
     hoverSpeed?: number;
@@ -23,24 +24,16 @@ stickyPosition?: 'start' | 'end';
     };
+    childTransition?: SvelteTransition;
+    childStagger?: boolean;
+    childStaggerDuration?: number;
     debug?: boolean;
     easing?: (t: number) => number;
 };
-export declare const defaults: {
-    speed: number;
-    direction: string;
-    gap: number;
-    onHover: string;
-    gradualHoverDuration: number;
-    speedFactor: number;
-    hoverSpeed: number;
-    stickyPosition: string;
-    padding: {
-        x: number;
-        y: number;
-    };
-    debug: boolean;
-    easing: typeof quadInOut;
+type Mandatory<T> = {
+    [K in keyof T]-?: T[K];
 };
-export declare const hasHoverState: (mergedOptions: MarqueeckOptions) => boolean;
-export declare const stickyPos: (mergedOptions: MarqueeckOptions) => "left: 0;" | "right: 0;";
+export declare const defaults: Mandatory<MarqueeckOptions>;
+export declare const hasHoverState: (options: MarqueeckOptions) => boolean;
+export declare const stickyPos: (options: MarqueeckOptions) => "left: 0;" | "right: 0;";
 export declare const setOpacity: (node: HTMLElement, value: number) => string;
-export declare const debugState: (state: boolean) => "show-debug" | "";
+export declare const debugState: (state: boolean) => "debug" | "";
+export {};

dist/Marqueeck.js

@@ -0,1 +1,2 @@
+import { fade } from 'svelte/transition';
 import { quadInOut } from 'svelte/easing';
@@ -9,3 +10,3 @@ //* DEFAULTS
     onHover: 'customSpeed',
-    gradualHoverDuration: 600,
+    brakeDuration: 1000,
     speedFactor: 1,
@@ -15,2 +16,7 @@ hoverSpeed: 15,
     padding: { x: 20, y: 10 },
+    childTransition: ((node, params) => {
+        return fade(node, { ...params, });
+    }),
+    childStagger: true,
+    childStaggerDuration: 75,
     debug: false,
@@ -21,7 +27,7 @@ easing: quadInOut
 // Return false if option 'onHover' is set to 'stop'
-export const hasHoverState = (mergedOptions) => mergedOptions.onHover === 'stop' || mergedOptions.onHover === 'customSpeed' ? true : false;
+export const hasHoverState = (options) => options.onHover === 'stop' || options.onHover === 'customSpeed' ? true : false;
 // Define sticky element style position depending on stickyPosition options
-export const stickyPos = (mergedOptions) => mergedOptions.stickyPosition === 'start' ? 'left: 0;' : 'right: 0;';
+export const stickyPos = (options) => options.stickyPosition === 'start' ? 'left: 0;' : 'right: 0;';
 // Simple 
 export const setOpacity = (node, value) => node.style.opacity = value.toString();
-export const debugState = (state) => state ? 'show-debug' : "";
+export const debugState = (state) => state ? 'debug' : "";

dist/Marqueeck.svelte.d.ts

 import { SvelteComponent } from "svelte";
-import type { MarqueeckOptions } from './Marqueeck.js';
+import { type MarqueeckOptions } from './Marqueeck.js';
+import './marqueeck.css';
 declare const __propDef: {
@@ -13,5 +14,6 @@ props: {
     events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
         hoverIn: CustomEvent<any>;
         hoverOut: CustomEvent<any>;
-        click: CustomEvent<any>;
     } & {
@@ -18,0 +20,0 @@ [evt: string]: CustomEvent<any>;

dist/SpeedFactorHelpers.d.ts

@@ -21,3 +21,3 @@ /// <reference types="svelte" />
 }) => void;
-export declare const factorHelper: (velocity: number, damper?: number) => number;
+export declare const factorDamper: (velocity: number, damper?: number) => number;
 export declare function pingPongHelper(min: number, max: number, duration: number): {
@@ -24,0 +24,0 @@ subscribe: (this: void, run: import("svelte/store").Subscriber<number>, invalidate?: import("svelte/store").Invalidator<number> | undefined) => import("svelte/store").Unsubscriber;

dist/SpeedFactorHelpers.js

@@ -63,3 +63,3 @@ import { writable } from 'svelte/store';
 };
-export const factorHelper = (velocity, damper = 7) => {
+export const factorDamper = (velocity, damper = 7) => {
     if (velocity <= 5 && velocity >= -5) {
@@ -72,2 +72,3 @@ return 1;
 };
+// * PingPong
 export function pingPongHelper(min, max, duration) {
@@ -74,0 +75,0 @@ const internalStore = writable(min);

package.json

 {
   "name": "@arisbh/marqueeck",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Marqueeck is a performant full-featured marquee component for Svelte, style-free, highly customizable and dependency-less.",
@@ -35,14 +35,15 @@ "author": {
   "devDependencies": {
-    "@skeletonlabs/skeleton": "^1.12.0",
+    "@skeletonlabs/skeleton": "^2.2.0",
+    "@skeletonlabs/tw-plugin": "^0.2.1",
     "@sveltejs/adapter-auto": "^2.1.0",
-    "@sveltejs/kit": "^1.25.1",
+    "@sveltejs/kit": "^1.25.2",
     "@sveltejs/package": "^2.2.2",
-    "@types/node": "^20.8.2",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
+    "@types/node": "^20.8.4",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.50.0",
+    "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-svelte": "^2.34.0",
-    "highlight.js": "^11.8.0",
+    "highlight.js": "^11.9.0",
     "postcss": "^8.4.31",
@@ -52,3 +53,3 @@ "postcss-load-config": "^4.0.1",
     "prettier-plugin-svelte": "^3.0.3",
-    "publint": "^0.2.3",
+    "publint": "^0.2.4",
     "svelte": "^4.2.1",
@@ -60,3 +61,4 @@ "svelte-check": "^3.5.2",
     "typescript": "^5.2.2",
-    "vite": "^4.4.11"
+    "vite": "^4.4.11",
+    "vite-plugin-tailwind-purgecss": "^0.1.3"
   },
@@ -63,0 +65,0 @@ "svelte": "./dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

18376

increased by6.68%

Number of package files

11

increased by10%

Lines of code

300

increased by32.16%

Worsened metrics

Dev dependency count

26

increased by8.33%

No dependency changes