@nemigo/svelte 0.1.0 → 0.2.1

package/dist/kit/state.d.ts

@@ -0,0 +1,59 @@
+import { Queue } from "@nemigo/helpers/queue";
+import type { CanBePromise } from "@nemigo/helpers/types";
+import type { Params } from "@nemigo/helpers/url";
+interface QueueItem {
+    method: "close" | "open";
+    state: App.PageState;
+    params: Params;
+    call?: () => CanBePromise;
+}
+declare class StateCTX extends Queue<QueueItem> {
+    /**
+     * Возвращает текущее мета-состояние страницы
+     */
+    get(clone?: boolean): App.PageState;
+    set(v: App.PageState): void;
+    hook(call: () => Promise<void>): Promise<void>;
+    /**
+     * Объединяет несколько состояний в одно
+     */
+    private join;
+    /**
+     * Безопасно от прокси добавляет новое состояние в историю браузера
+     */
+    private pushStateSafe;
+    /**
+     * Безопасно от прокси заменяет текущее состояние в истории браузера
+     */
+    replaceStateSafe(url: string | URL, ctate?: App.PageState): void;
+    /**
+     * Возвращает текущий URL
+     */
+    getCurrentURL(): URL;
+    /**
+     * Преобразует абсолютный URL в относительный
+     */
+    toRelative(url: URL): string;
+    /**
+     * Очищает указанные параметры из текущего URL
+     */
+    clearParams(params: Params): string;
+    /**
+     * Добавляет указанные параметры в текущий URL
+     */
+    pushParams(params: Params): string;
+    /**
+     * Открывает новое мета-состояние с указанными параметрами
+     */
+    open(ctate: App.PageState, params?: Params, call?: () => CanBePromise): void;
+    /**
+     * Закрывает текущее мета-состояние с указанными параметрами
+     */
+    close(ctate: App.PageState, params?: Params, call?: () => CanBePromise): void;
+    /**
+     * Обработка очереди состояния
+     */
+    protected handle(item: QueueItem): void;
+}
+export type { StateCTX };
+export declare const stateCTX: StateCTX;

package/dist/kit/state.js

@@ -0,0 +1,116 @@
+import { pushState, replaceState } from "$app/navigation";
+import { page } from "$app/state";
+import { parsify } from "@nemigo/helpers";
+import { isSSR } from "@nemigo/helpers/html";
+import { Queue } from "@nemigo/helpers/queue";
+import { clearParams, mergeClearParams, pushParams } from "@nemigo/helpers/url";
+import { tick } from "svelte";
+class StateCTX extends Queue {
+    /**
+     * Возвращает текущее мета-состояние страницы
+     */
+    get(clone = false) {
+        if (isSSR)
+            return {};
+        return clone ? parsify(page.state) : page.state;
+    }
+    set(v) {
+        replaceState("", parsify(v));
+    }
+    async hook(call) {
+        const copy = parsify(page.state);
+        await call();
+        replaceState("", copy);
+    }
+    /**
+     * Объединяет несколько состояний в одно
+     */
+    join(...states) {
+        return states.reduce((acc, ctate) => ({ ...acc, ...ctate }), {});
+    }
+    //...
+    /**
+     * Безопасно от прокси добавляет новое состояние в историю браузера
+     */
+    pushStateSafe(url, ctate = this.get()) {
+        pushState(url, parsify(ctate));
+    }
+    /**
+     * Безопасно от прокси заменяет текущее состояние в истории браузера
+     */
+    replaceStateSafe(url, ctate = this.get()) {
+        replaceState(url, parsify(ctate));
+    }
+    //...
+    /**
+     * Возвращает текущий URL
+     */
+    getCurrentURL() {
+        return new URL(window.location.href);
+    }
+    /**
+     * Преобразует абсолютный URL в относительный
+     */
+    toRelative(url) {
+        return url.toString().replace(url.origin, "");
+    }
+    //...
+    /**
+     * Очищает указанные параметры из текущего URL
+     */
+    clearParams(params) {
+        return this.toRelative(clearParams(this.getCurrentURL(), params));
+    }
+    /**
+     * Добавляет указанные параметры в текущий URL
+     */
+    pushParams(params) {
+        return this.toRelative(pushParams(this.getCurrentURL(), params, true));
+    }
+    //...
+    /**
+     * Открывает новое мета-состояние с указанными параметрами
+     */
+    open(ctate, params = [], call) {
+        this.push({ method: "open", state: ctate, params, call });
+    }
+    /**
+     * Закрывает текущее мета-состояние с указанными параметрами
+     */
+    close(ctate, params = [], call) {
+        if (this._queue.length > 0) {
+            const last = this._queue[this._queue.length - 1];
+            if (last.method === "close") {
+                last.state = this.join(last.state, ctate);
+                last.params = mergeClearParams(last.params, params);
+                if (call) {
+                    if (last.call) {
+                        last.call = () => {
+                            last.call?.();
+                            call();
+                        };
+                    }
+                    else {
+                        last.call = call;
+                    }
+                }
+                return;
+            }
+        }
+        this.push({ method: "close", state: ctate, params, call });
+    }
+    /**
+     * Обработка очереди состояния
+     */
+    handle(item) {
+        const ctate = this.join(this.get(), item.state);
+        if (item.method === "open") {
+            this.pushStateSafe(this.pushParams(item.params), ctate);
+        }
+        else {
+            this.replaceStateSafe(this.clearParams(item.params), ctate);
+        }
+        void tick().then(() => item.call?.());
+    }
+}
+export const stateCTX = new StateCTX();

package/dist/transitions.d.ts

@@ -0,0 +1,43 @@
+import type { Property } from "csstype";
+import { linear } from "svelte/easing";
+import type { SlideParams, TransitionConfig } from "svelte/transition";
+export interface ClassNameTransitionParams {
+    animationClassName: string;
+    /**
+     * @default "reverse"
+     */
+    reverseDirectionStyle?: Property.AnimationDirection;
+    /**
+     * @default ""
+     */
+    normalDirectionStyle?: Property.AnimationDirection;
+    /**
+     * @default 325
+     */
+    duration?: number;
+}
+export declare const classNameTransition: (node: HTMLElement, { animationClassName, reverseDirectionStyle, normalDirectionStyle, duration }: ClassNameTransitionParams) => TransitionConfig;
+/**
+ * Слайд-анимация с добавлением лёгкого fade-эффекта
+ */
+export declare function slide(node: Element, { delay, duration, easing, axis, classic }?: SlideParams & {
+    classic?: boolean;
+}): TransitionConfig;
+/**
+ * Микс-анимация из scale и translate с добавлением лёгкого fade-эффекта
+ */
+export declare const upper: (node: HTMLElement, { delay, duration, x, y, opacity }: {
+    delay?: number | undefined;
+    duration?: number | undefined;
+    x?: number | undefined;
+    y?: number | undefined;
+    opacity?: number | undefined;
+}) => TransitionConfig;
+/**
+ * Просто анимация изменения размера через font-size (0 ~ 1)
+ */
+export declare const fontSizeScale: (_: HTMLElement, { delay, duration, easing }?: {
+    delay?: number | undefined;
+    duration?: number | undefined;
+    easing?: typeof linear | undefined;
+}) => TransitionConfig;

package/dist/transitions.js

@@ -0,0 +1,132 @@
+import { toRound } from "@nemigo/helpers/phymath";
+import { linear, quadInOut, quadOut } from "svelte/easing";
+import { slide as svelte_slide } from "svelte/transition";
+export const classNameTransition = (node, { animationClassName, reverseDirectionStyle = "reverse", normalDirectionStyle = "", duration = 325 }) => {
+    let before = null;
+    let reversed = false;
+    const reverse = () => {
+        reversed = true;
+        node.style.animationDirection = reverseDirectionStyle;
+    };
+    const unreverse = () => {
+        reversed = false;
+        node.style.animationDirection = normalDirectionStyle;
+    };
+    return {
+        duration,
+        tick(t) {
+            if (t === before)
+                return;
+            if (before === null) {
+                node.classList.add(animationClassName);
+                if (t === 1)
+                    reverse();
+                else if (t === 0)
+                    unreverse();
+            }
+            else {
+                if (t === 1 || t === 0) {
+                    node.classList.remove(animationClassName);
+                    node.style.animationDirection = normalDirectionStyle;
+                    before = null;
+                    return;
+                }
+                if (before < t) {
+                    if (reversed)
+                        unreverse();
+                }
+                else {
+                    if (!reversed)
+                        reverse();
+                }
+            }
+            before = t;
+        },
+    };
+};
+//...
+const css_delay = (t, v = 1 / 3) => {
+    if (t <= v)
+        return 0;
+    if (t >= 1)
+        return 1;
+    return (t - v) / (1 - v);
+};
+const css_boost = (t, v = 1 / 3) => {
+    if (t <= 0)
+        return 0;
+    if (t >= 1 - v)
+        return 1;
+    return t / (1 - v);
+};
+/**
+ * Слайд-анимация с добавлением лёгкого fade-эффекта
+ */
+export function slide(node, { delay = 0, duration = 325, easing, axis = "y", classic } = {}) {
+    if (classic)
+        return svelte_slide(node, { delay, duration, easing, axis });
+    if (!easing)
+        easing = quadInOut;
+    const style = getComputedStyle(node);
+    const prop = axis === "y" ? "height" : "width";
+    const propValue = parseFloat(style[prop]);
+    const secProps = axis === "y" ? ["top", "bottom"] : ["left", "right"];
+    const capSecProps = secProps.map((e) => `${e[0].toUpperCase()}${e.slice(1)}`);
+    const padStart = parseFloat(style[`padding${capSecProps[0]}`]);
+    const padEnd = parseFloat(style[`padding${capSecProps[1]}`]);
+    const marStart = parseFloat(style[`margin${capSecProps[0]}`]);
+    const marEnd = parseFloat(style[`margin${capSecProps[1]}`]);
+    const borStart = parseFloat(style[`border${capSecProps[0]}Width`]);
+    const borEnd = parseFloat(style[`border${capSecProps[1]}Width`]);
+    return {
+        delay,
+        duration,
+        easing,
+        css: (t) => {
+            const boosted = css_boost(t, 2 / 5);
+            const delayed = css_delay(t, 1 / 3);
+            return `
+	      overflow: hidden;
+	      opacity: ${delayed};
+	      ${prop}: ${boosted * propValue}px;
+	      padding-${secProps[0]}: ${toRound(boosted * padStart, 4)}px;
+	      padding-${secProps[1]}: ${toRound(boosted * padEnd, 4)}px;
+	      margin-${secProps[0]}: ${toRound(boosted * marStart, 4)}px;
+	      margin-${secProps[1]}: ${toRound(boosted * marEnd, 4)}px;
+	      border-${secProps[0]}-width: ${toRound(boosted * borStart, 4)}px;
+	      border-${secProps[1]}-width: ${toRound(boosted * borEnd, 4)}px;
+	      min-${prop}: 0
+	    `;
+        },
+    };
+}
+//...
+/**
+ * Микс-анимация из scale и translate с добавлением лёгкого fade-эффекта
+ */
+export const upper = (node, { delay = 0, duration = 400, x = 0, y = 0, opacity = 0 }) => {
+    const style = getComputedStyle(node);
+    const target_opacity = +style.opacity;
+    const od = target_opacity * (1 - opacity);
+    return {
+        delay,
+        duration,
+        easing: quadOut,
+        css: (t, u) => {
+            return `
+					transform: scale(${toRound(0.6 + t / 2.5, 5)}) translate(${toRound((1 - t) * x)}px, ${toRound((1 - t) * y)}px);
+					opacity: ${toRound(target_opacity - od * u)};
+			`;
+        },
+    };
+};
+//...
+/**
+ * Просто анимация изменения размера через font-size (0 ~ 1)
+ */
+export const fontSizeScale = (_, { delay = 0, duration = 300, easing = linear } = {}) => ({
+    delay,
+    duration,
+    easing,
+    css: (t) => `font-size:${toRound(t, 3)}em;will-change:font-size`,
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nemigo/svelte",
-	"version": "0.1.0",
+	"version": "0.2.1",
 	"private": false,
 	"author": {
 		"name": "Vlad Logvin",
@@ -19,6 +19,10 @@
 			"svelte": "./dist/value.svelte.js",
 			"default": "./dist/value.svelte.js"
 		},
+		"./kit/state": {
+			"types": "./dist/kit/state.d.ts",
+			"default": "./dist/kit/state.js"
+		},
 		"./loader": {
 			"types": "./dist/loader.d.ts",
 			"default": "./dist/loader.js"
@@ -26,11 +30,19 @@
 	},
 	"peerDependencies": {
 		"@nemigo/helpers": "^0.3.0",
+		"@sveltejs/kit": "^2.12.0",
 		"svelte": "^5.0.0"
 	},
+	"peerDependenciesMeta": {
+		"@sveltejs/kit": {
+			"optional": true
+		}
+	},
+	"dependencies": {
+		"csstype": "^3.0.0"
+	},
 	"devDependencies": {
 		"@nemigo/configs": "workspace:*",
-		"@nemigo/helpers": "workspace:*",
-		"svelte": "5.38.6"
+		"@nemigo/helpers": "workspace:*"
 	}
 }