@finsweet/webflow-apps-utils 1.0.1

package/dist/router/index.svelte.js

@@ -0,0 +1,400 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { routerStore } from '../stores';
+/**
+ * Custom Client-Side Router for Svelte 5
+ */
+// Browser detection utility
+const browser = typeof window !== 'undefined';
+/** Custom Router Class for Svelte 5 */
+export class Router {
+    // Reactive state using Svelte 5 runes
+    #currentLocation = $state();
+    #currentRoute = $state(null);
+    #isNavigating = $state(false);
+    #history = $state([]);
+    // Configuration
+    #config;
+    #routes = [];
+    #isInitialized = false;
+    #appVersionPath = '';
+    // Event listeners cleanup
+    #cleanup = [];
+    /** Creates a new Router instance */
+    constructor(config = {}) {
+        this.#config = {
+            basePath: config.basePath || '',
+            hashMode: config.hashMode || false,
+            fallbackRoute: config.fallbackRoute || '/',
+            autoInit: config.autoInit !== false // Default to true
+        };
+        // Initialize location with current browser location
+        this.#initializeLocation();
+        // Auto-initialize if in browser and autoInit is enabled
+        if (browser && this.#config.autoInit) {
+            this.init();
+        }
+    }
+    /** Initialize the router and start listening to navigation events */
+    init() {
+        if (!browser || this.#isInitialized)
+            return;
+        this.#isInitialized = true;
+        this.#setupEventListeners();
+        this.#handleCurrentLocation();
+    }
+    /** Navigate to the root path */
+    gotoRootPath() {
+        const currentFullPath = this.getFullPathname();
+        const rootPath = this.#appVersionPath || '/';
+        if (currentFullPath === rootPath) {
+            return;
+        }
+        // Navigate to the app version path (e.g., /test) or root (/)
+        if (this.#appVersionPath) {
+            // Navigate to app version root (e.g., /test)
+            window.history.replaceState(null, '', this.#appVersionPath);
+            const url = new URL(window.location.href);
+            this.#updateLocation(url);
+        }
+        else {
+            // Navigate to regular root
+            this.navigate('/', { replace: true });
+        }
+    }
+    /** Initialize the app version path that will be persisted across all routes */
+    initAppVersion(appVersionPath) {
+        // Ensure the path starts with / and doesn't end with /
+        this.#appVersionPath = appVersionPath.startsWith('/') ? appVersionPath : `/${appVersionPath}`;
+        if (this.#appVersionPath.endsWith('/') && this.#appVersionPath.length > 1) {
+            this.#appVersionPath = this.#appVersionPath.slice(0, -1);
+        }
+        // Update current location to include app version path
+        if (browser) {
+            const currentURL = new URL(window.location.href);
+            const pathname = currentURL.pathname;
+            // If current path doesn't include the app version path, navigate to it
+            if (!pathname.startsWith(this.#appVersionPath)) {
+                const newPath = this.#appVersionPath + (pathname === '/' ? '' : pathname);
+                this.navigate(newPath, { replace: true });
+            }
+            else {
+                // Update internal state with current location
+                this.#updateLocation(currentURL);
+            }
+        }
+    }
+    /** Clean up event listeners and stop the router */
+    destroy() {
+        this.#cleanup.forEach((cleanup) => cleanup());
+        this.#cleanup = [];
+        this.#isInitialized = false;
+    }
+    /** Register a route with the router */
+    addRoute(route) {
+        this.#routes.push(route);
+    }
+    /** Register multiple routes at once */
+    addRoutes(routes) {
+        this.#routes.push(...routes);
+    }
+    /** Navigate to a specified pathname */
+    navigate(pathname, options = {}) {
+        if (!browser)
+            return;
+        this.#isNavigating = true;
+        try {
+            // Prepend app version path if it's set and not already included
+            let fullPath = pathname;
+            if (this.#appVersionPath && !pathname.startsWith(this.#appVersionPath)) {
+                // Handle root path specially
+                if (pathname === '/') {
+                    fullPath = this.#appVersionPath;
+                }
+                else {
+                    fullPath = this.#appVersionPath + pathname;
+                }
+            }
+            const url = this.#createURL(fullPath);
+            // Update browser history
+            if (options.replace) {
+                window.history.replaceState(options.state || null, '', url.toString());
+            }
+            else {
+                window.history.pushState(options.state || null, '', url.toString());
+            }
+            // Update internal state
+            this.#updateLocation(url, options.state);
+        }
+        finally {
+            this.#isNavigating = false;
+        }
+    }
+    /** Navigate back in history */
+    back() {
+        if (!browser)
+            return;
+        window.history.back();
+    }
+    /** Navigate forward in history */
+    forward() {
+        if (!browser)
+            return;
+        window.history.forward();
+    }
+    /** Get reactive location information */
+    useLocation() {
+        return this.#currentLocation;
+    }
+    /** Get reactive current route information */
+    useRoute() {
+        return this.#currentRoute;
+    }
+    /** Get reactive navigation history */
+    useHistory() {
+        return this.#history;
+    }
+    /** Get reactive navigation state */
+    useNavigating() {
+        return this.#isNavigating;
+    }
+    /** Check if a path matches the current location */
+    isActive(path, exact = false) {
+        const currentPath = this.#normalizePath(this.#currentLocation.pathname);
+        const checkPath = this.#normalizePath(path);
+        if (exact) {
+            return currentPath === checkPath;
+        }
+        if (checkPath === '/') {
+            return currentPath === '/';
+        }
+        return currentPath === checkPath || currentPath.startsWith(checkPath + '/');
+    }
+    /** Get the current app version path */
+    getAppVersionPath() {
+        return this.#appVersionPath;
+    }
+    /** Get the full pathname including app version path */
+    getFullPathname() {
+        if (!browser)
+            return '/';
+        return window.location.pathname;
+    }
+    /** Get the current active path */
+    getActivePath() {
+        // include the app version path
+        return this.#appVersionPath + this.#currentLocation.pathname;
+    }
+    /** Get the current route parameters */
+    getParams() {
+        return this.#currentLocation.params;
+    }
+    /** Get current query parameters */
+    getQuery() {
+        return this.#currentLocation.query;
+    }
+    /** Initialize location state from current browser location */
+    #initializeLocation() {
+        if (!browser) {
+            // Provide default values for SSR
+            this.#currentLocation = {
+                pathname: '/',
+                search: '',
+                hash: '',
+                url: new URL('http://localhost/'),
+                params: {},
+                query: new URLSearchParams()
+            };
+            return;
+        }
+        const url = new URL(window.location.href);
+        this.#updateLocation(url);
+    }
+    /** Setup event listeners for navigation */
+    #setupEventListeners() {
+        if (!browser)
+            return;
+        // Listen for popstate events (back/forward navigation)
+        const handlePopState = (event) => {
+            const url = new URL(window.location.href);
+            this.#updateLocation(url, event.state);
+        };
+        // Listen for hash changes if in hash mode
+        const handleHashChange = () => {
+            if (this.#config.hashMode) {
+                const url = new URL(window.location.href);
+                this.#updateLocation(url);
+            }
+        };
+        window.addEventListener('popstate', handlePopState);
+        window.addEventListener('hashchange', handleHashChange);
+        // Store cleanup functions
+        this.#cleanup.push(() => window.removeEventListener('popstate', handlePopState), () => window.removeEventListener('hashchange', handleHashChange));
+    }
+    /** Create a URL object from a pathname */
+    #createURL(pathname) {
+        if (!browser)
+            return new URL('http://localhost/');
+        const baseURL = window.location.origin;
+        let fullPath = pathname;
+        // Handle base path
+        if (this.#config.basePath && !pathname.startsWith(this.#config.basePath)) {
+            fullPath = this.#config.basePath + pathname;
+        }
+        // Handle hash mode
+        if (this.#config.hashMode) {
+            fullPath = window.location.pathname + '#' + pathname;
+        }
+        return new URL(fullPath, baseURL);
+    }
+    /**
+     * Update internal location state
+     * @private
+     */
+    #updateLocation(url, state) {
+        let pathname = url.pathname;
+        // Remove base path for internal routing
+        if (this.#config.basePath && pathname.startsWith(this.#config.basePath)) {
+            pathname = pathname.slice(this.#config.basePath.length) || '/';
+        }
+        // Remove app version path for internal routing
+        if (this.#appVersionPath && pathname.startsWith(this.#appVersionPath)) {
+            pathname = pathname.slice(this.#appVersionPath.length) || '/';
+        }
+        // Handle hash mode
+        if (this.#config.hashMode) {
+            pathname = url.hash.slice(1) || '/';
+        }
+        // Find matching route and extract parameters
+        const match = this.#findMatchingRoute(pathname);
+        // Update current location (store the clean pathname without app version)
+        this.#currentLocation = {
+            pathname,
+            search: url.search,
+            hash: url.hash,
+            url,
+            params: match?.params || {},
+            query: new URLSearchParams(url.search)
+        };
+        // Update current route
+        this.#currentRoute = match?.route || null;
+        // Add to history
+        this.#addToHistory(pathname, state);
+        // Update the external routerStore whenever route changes
+        this.#updateRouterStore(url);
+    }
+    /**
+     * Update the external routerStore with current route information
+     * @private
+     */
+    #updateRouterStore(url) {
+        // Extract the app version ID (hash) from the app version path
+        const hash = this.#appVersionPath ? this.#appVersionPath.slice(1) : ''; // Remove leading slash
+        routerStore.set({
+            hash,
+            url
+        });
+    }
+    /**
+     * Find a route that matches the given pathname
+     * @private
+     */
+    #findMatchingRoute(pathname) {
+        for (const route of this.#routes) {
+            const match = this.#matchRoute(route.path, pathname);
+            if (match) {
+                return {
+                    route,
+                    params: match.params,
+                    isExact: match.isExact
+                };
+            }
+        }
+        return null;
+    }
+    /**
+     * Normalize path by removing trailing slashes (except for root)
+     * @private
+     */
+    #normalizePath(path) {
+        if (path === '/')
+            return path;
+        return path.replace(/\/+$/, '');
+    }
+    /**
+     * Match a route pattern against a pathname
+     * @private
+     */
+    #matchRoute(pattern, pathname) {
+        // Normalize both paths to handle trailing slashes
+        const normalizedPattern = this.#normalizePath(pattern);
+        const normalizedPathname = this.#normalizePath(pathname);
+        // Simple exact match
+        if (normalizedPattern === normalizedPathname) {
+            return { params: {}, isExact: true };
+        }
+        // Parameter matching
+        const patternParts = normalizedPattern.split('/').filter(Boolean);
+        const pathnameParts = normalizedPathname.split('/').filter(Boolean);
+        // Must have same number of parts for exact match
+        if (patternParts.length !== pathnameParts.length) {
+            return null;
+        }
+        const params = {};
+        for (let i = 0; i < patternParts.length; i++) {
+            const patternPart = patternParts[i];
+            const pathnamePart = pathnameParts[i];
+            if (patternPart.startsWith(':')) {
+                // This is a parameter
+                const paramName = patternPart.slice(1);
+                params[paramName] = decodeURIComponent(pathnamePart);
+            }
+            else if (patternPart !== pathnamePart) {
+                // Not a match
+                return null;
+            }
+        }
+        return { params, isExact: true };
+    }
+    /**
+     * Add entry to navigation history
+     * @private
+     */
+    #addToHistory(pathname, state) {
+        const entry = {
+            pathname,
+            timestamp: Date.now(),
+            state
+        };
+        // Limit history size to prevent memory issues
+        if (this.#history.length >= 100) {
+            this.#history.shift();
+        }
+        this.#history.push(entry);
+    }
+    /**
+     * Handle current location on initialization
+     * @private
+     */
+    #handleCurrentLocation() {
+        if (!browser)
+            return;
+        const url = new URL(window.location.href);
+        this.#updateLocation(url);
+    }
+}
+/**
+ * Create a router instance with the given configuration
+ */
+export function createRouter(config) {
+    return new Router(config);
+}
+/**
+ * Default router instance for convenience
+ */
+export const router = createRouter();
+// Export components
+export { default as Link } from './Link.svelte';
+export { default as Route } from './Route.svelte';
+export { default as RouterComponent } from './Router.svelte';
+// Export hooks and utilities
+export * from './hooks.svelte.js';

package/dist/stores/breakpoints.d.ts

@@ -0,0 +1,10 @@
+export type Breakpoint = {
+    name: string;
+    value: number;
+    duration: number;
+    enabled: boolean;
+};
+export type BreakpointOutput = {
+    [breakpoint: number]: number;
+};
+export declare const breakpointsStore: import("svelte/store").Writable<BreakpointOutput>;

package/dist/stores/breakpoints.js

@@ -0,0 +1,2 @@
+import { writable } from 'svelte/store';
+export const breakpointsStore = writable({});

package/dist/stores/componentInjectErrors.d.ts

@@ -0,0 +1 @@
+export declare const componentInjectErrors: import("svelte/store").Writable<boolean>;

package/dist/stores/componentInjectErrors.js

@@ -0,0 +1,2 @@
+import { writable } from 'svelte/store';
+export const componentInjectErrors = writable(false);

package/dist/stores/forms.d.ts

@@ -0,0 +1,110 @@
+import { derived } from 'svelte/store';
+interface FormState<T> {
+    values: T;
+    errors: Record<keyof T, string[]>;
+    touched: Record<keyof T, boolean>;
+    isValid: boolean;
+    isDirty: boolean;
+    isSubmitting: boolean;
+}
+/**
+ * Creates a form validation utility with Zod
+ * @param identifier - Unique identifier for the form
+ * @param options - Configuration options
+ */
+export declare class FormValidator<T extends {
+    name: string;
+    instance: string;
+    class: string;
+}> {
+    private schema;
+    private store;
+    form: ReturnType<typeof derived<typeof this.store, FormState<T>>>;
+    private instancesSet;
+    private initialValues;
+    private identifier;
+    private currentInstanceToIgnore;
+    /**
+     * Generates unique name, instance, and class based on solution name and existing instances
+     * @param existingInstances - Array of existing instance names
+     * @param solution - The base solution name
+     * @returns Object containing name, instance, and class values
+     */
+    static generateNames(existingInstances: string[], solution: string, name: string): {
+        name: string;
+        instance: string;
+        class: string;
+    };
+    /**
+     * Cleans up the class name to ensure it's valid
+     * @param className - The class name to clean up
+     * @returns The cleaned up class name
+     */
+    static sanitizeClassName(className: string): string;
+    constructor(identifier: string, initialValues: T, options?: {
+        existingInstances?: string[];
+    });
+    /**
+     * Set a specific instance to ignore during validation
+     * Used in edit mode to prevent the current instance from being flagged as invalid
+     */
+    ignoreInstanceValidation(instanceValue: string, existingInstances: string[]): void;
+    /**
+     * Set the value of a specific field
+     */
+    setField<K extends keyof T>(field: K, value: T[K]): void;
+    /**
+     * Set multiple field values at once
+     */
+    setFields(values: Partial<T>): void;
+    /**
+     * Handle instance field validation with uniqueness check
+     */
+    validateWithInstances(existingInstances: string[]): void;
+    /**
+     * Reset the form to initial values
+     */
+    reset(): void;
+    /**
+     * Validate the form values
+     */
+    private validate;
+    /**
+     * Set the form as submitting
+     */
+    setSubmitting(isSubmitting: boolean): void;
+    /**
+     * Get the current state of the form
+     */
+    getState(): FormState<T>;
+}
+/**
+ * Get a form by its identifier
+ */
+export declare function getFormById(identifier: string): FormValidator<any> | undefined;
+/**
+ * Check if a form with a specific identifier is valid
+ */
+export declare function isFormValid(identifier: string): boolean;
+/**
+ * Get error messages for a specific form
+ */
+export declare function getFormErrors(identifier: string): Record<string, string[]> | null;
+/**
+ * Reset a form by its identifier
+ */
+export declare function resetForm(identifier: string): boolean;
+export declare function createFormSubscription(identifier: string): import("svelte/store").Writable<{
+    isValid: boolean;
+    errors: {};
+    values: {};
+}> | {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<FormState<any>>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    destroy: () => void;
+};
+/**
+ * Store to track if the form is adding or updating to the Canvas
+ */
+export declare const isAddingOrUpdating: import("svelte/store").Writable<boolean>;
+export declare const loadingSelectedElement: import("svelte/store").Writable<boolean>;
+export {};