@finsweet/webflow-apps-utils 1.0.3 → 1.0.4

package/dist/utils/animations/factory.js

@@ -0,0 +1,101 @@
+import { animate, stagger as staggerDelay } from 'motion';
+/**
+ * Creates a new Animation.
+ * @param props The animaiton props.
+ * @returns A new `in` and `out` Animation functions.
+ */
+export const createAnimation = ({ initialStyles, keyframes }) => {
+    const isBrowser = typeof window !== 'undefined';
+    /**
+     * Prepares the {@link animateIn} elements by setting the initial styles and rendering them to the DOM.
+     * @param elements The elements to prepare.
+     * @param options.target If defined, the element will be appended to the target.
+     * @param options.insertAfter A child of the target. If defined, the element will be appended right after this anchor element.
+     */
+    const prepareIn = (elements, options = {}) => {
+        const { target, insertAfter, display = '' } = options;
+        if (!Array.isArray(elements))
+            elements = [elements];
+        for (const element of elements) {
+            element.style.display = display;
+            Object.assign(element.style, initialStyles);
+            if (target && insertAfter !== undefined) {
+                if (insertAfter)
+                    target.insertBefore(element, insertAfter.nextSibling);
+                else {
+                    if (isBrowser && target instanceof HTMLElement) {
+                        target.insertBefore(element, target.firstChild);
+                    }
+                }
+            }
+            else if (target)
+                target.appendChild(element);
+        }
+    };
+    /**
+     * In animation.
+     * @param elements The elements to animate.
+     * @param options.target If defined, the element will be appended to the target.
+     * @param options.insertAfter A child of the target. If defined, the element will be appended right after this anchor element.
+     * @param options.prepared Defines if the animation has been prepared beforehand, useful to avoid performing double preparation.
+     * @param options.stagger If defined, the animation will be staggered using this time value.
+     * @param options.animationOptions The main options of the animation. Reference: {@link [Motion One](https://motion.dev/dom/animate#options)}.
+     * @returns An awaitable promise.
+     */
+    const animateIn = async (elements, options = {}) => {
+        //TODO: probably display can be used also?
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { prepared, stagger, display, duration, ...animationOptions } = options;
+        const durationInSeconds = duration ? duration / 1000 : undefined;
+        if (!prepared)
+            prepareIn(elements, options);
+        const { finished } = animate(elements, keyframes, {
+            ...animationOptions,
+            delay: stagger ? staggerDelay(stagger / 1000) : undefined,
+            duration: durationInSeconds
+        });
+        return await finished;
+    };
+    /**
+     * Out animation.
+     * @param elements The elements to animate.
+     * @param options.remove If defined, the element will be removed from the DOM after the animation ends.
+     * @param options.stagger If defined, the animation will be staggered using this time value.
+     * @param options.animationOptions The main options of the animation. Reference: {@link [Motion One](https://motion.dev/dom/animate#options)}.
+     * @returns An awaitable promise.
+     */
+    const animateOut = async (elements, options = {}) => {
+        const { remove, stagger, target, insertAfter, display = 'none', duration, ...animationOptions } = options;
+        const durationInSeconds = duration ? duration / 1000 : undefined;
+        if (!Array.isArray(elements))
+            elements = [elements];
+        elements = elements.filter((element) => document.body.contains(element));
+        if (!elements.length)
+            return;
+        const { finished } = animate(elements, keyframes, {
+            ...animationOptions,
+            duration: durationInSeconds,
+            delay: stagger ? staggerDelay(stagger / 1000) : undefined,
+            direction: 'reverse'
+        });
+        await finished;
+        for (const element of elements) {
+            if (target && insertAfter !== undefined) {
+                if (insertAfter)
+                    target.insertBefore(element, insertAfter.nextSibling);
+                else {
+                    if (isBrowser && target instanceof HTMLElement) {
+                        target.insertBefore(element, target.firstChild);
+                    }
+                }
+            }
+            else if (target)
+                target.appendChild(element);
+            if (remove)
+                element.remove();
+            else
+                element.style.display = display;
+        }
+    };
+    return { prepareIn, animateIn, animateOut };
+};

package/dist/utils/animations/index.d.ts

@@ -0,0 +1,7 @@
+import type { AnimationsObject } from './types';
+export * from './types';
+export declare const easings: readonly ["linear", "ease", "ease-in", "ease-out", "ease-in-out"];
+/**
+ * Contains all animation functions.
+ */
+export declare const animations: AnimationsObject;

package/dist/utils/animations/index.js

@@ -0,0 +1,62 @@
+import { createAnimation } from './factory';
+export * from './types';
+// Constants
+export const easings = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'];
+/**
+ * Contains all animation functions.
+ */
+export const animations = {
+    /**
+     * Fade
+     */
+    fade: createAnimation({ keyframes: { opacity: [0, 1] }, initialStyles: { opacity: '0' } }),
+    /**
+     * Slide Up
+     */
+    'slide-up': createAnimation({
+        keyframes: { y: [100, 0], opacity: [0, 1] },
+        initialStyles: { transform: 'translateY(100px)', opacity: '0' }
+    }),
+    /**
+     * Slide Down
+     */
+    'slide-down': createAnimation({
+        keyframes: { y: [-100, 0], opacity: [0, 1] },
+        initialStyles: { transform: 'translateY(-100px)', opacity: '0' }
+    }),
+    /**
+     * Slide Right
+     */
+    'slide-right': createAnimation({
+        keyframes: { x: [-100, 0], opacity: [0, 1] },
+        initialStyles: { transform: 'translateX(-100px)', opacity: '0' }
+    }),
+    /**
+     * Slide Left
+     */
+    'slide-left': createAnimation({
+        keyframes: { x: [100, 0], opacity: [0, 1] },
+        initialStyles: { transform: 'translateX(100px)', opacity: '0' }
+    }),
+    /**
+     * Grow
+     */
+    grow: createAnimation({
+        keyframes: { scale: [0, 1], opacity: [0, 1] },
+        initialStyles: { transform: 'scale(0)', opacity: '0' }
+    }),
+    /**
+     * Shrink
+     */
+    shrink: createAnimation({
+        keyframes: { scale: [1.25, 1], opacity: [0, 1] },
+        initialStyles: { transform: 'scale(1.25)', opacity: '0' }
+    }),
+    /**
+     * Spin
+     */
+    spin: createAnimation({
+        keyframes: { rotate: [900, 0], opacity: [0, 1] },
+        initialStyles: { transform: 'rotate(900deg)', opacity: '0' }
+    })
+};

package/dist/utils/animations/types.d.ts

@@ -0,0 +1,39 @@
+import type { AnimationOptions, MotionKeyframesDefinition } from 'motion';
+import type { easings } from '.';
+export interface AnimationProps {
+    keyframes: MotionKeyframesDefinition;
+    initialStyles: {
+        [key: string]: string;
+    };
+}
+type FilteredAnimationOptions = Pick<AnimationOptions, 'duration' | 'easing'> & {
+    stagger?: number;
+};
+type AnimationPrepare<T> = (element: HTMLElement | HTMLElement[], options?: T) => void;
+type AnimationBase<T> = (element: HTMLElement | HTMLElement[], options?: T & FilteredAnimationOptions) => Promise<void>;
+type PrepareProps = {
+    target?: Element;
+    insertAfter?: Node | null;
+    display?: string;
+};
+type AnimationInProps = PrepareProps & {
+    prepared?: true;
+};
+type AnimationOutProps = PrepareProps & {
+    remove?: boolean;
+};
+type PrepareIn = AnimationPrepare<PrepareProps>;
+type AnimationIn = AnimationBase<AnimationInProps>;
+type AnimationOut = AnimationBase<AnimationOutProps>;
+export type AnimationFunctions = {
+    prepareIn: PrepareIn;
+    animateIn: AnimationIn;
+    animateOut: AnimationOut;
+};
+export type Animation = AnimationFunctions & {
+    options?: FilteredAnimationOptions;
+};
+export type AnimationsObject = Readonly<Record<'fade' | 'slide-up' | 'slide-down' | 'slide-right' | 'slide-left' | 'grow' | 'shrink' | 'spin', AnimationFunctions>>;
+export type Easings = typeof easings;
+export type AnimationOptionsCustom = Readonly<Record<'fade' | 'slide-up' | 'slide-down' | 'slide-right' | 'slide-left' | 'grow' | 'shrink' | 'spin', string>>;
+export {};

package/dist/utils/animations/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/custom-code/configs.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Store for Custom Code stored Component configs
+ */
+export declare const componentConfigsStore: import("svelte/store").Writable<null>;
+export type CustomCodeConfigsStore = {
+    component: string;
+    instance: string[];
+}[];
+/**
+ * Store for Custom Code stored Component configs instances
+ */
+export declare const customCodeConfigsStore: import("svelte/store").Writable<CustomCodeConfigsStore>;
+/**
+ * Get configs from custom code.
+ */
+export declare const getProjectConfigs: () => Promise<any>;
+/**
+ * Fetches configs stored in custom code for a given component.
+ * @param component
+ * @returns
+ */
+export declare const getComponentConfigs: (component: string) => Promise<any>;

package/dist/utils/custom-code/configs.js

@@ -0,0 +1,40 @@
+import { writable } from 'svelte/store';
+import { getLogger } from '../logger';
+import { getCustomCode } from './api';
+const logger = getLogger('utils');
+const DISPLAY_NAME = 'finsweetcomponentsconfig';
+/**
+ * Store for Custom Code stored Component configs
+ */
+export const componentConfigsStore = writable(null);
+/**
+ * Store for Custom Code stored Component configs instances
+ */
+export const customCodeConfigsStore = writable([]);
+/**
+ * Get configs from custom code.
+ */
+export const getProjectConfigs = async () => {
+    const [customCodeBlock] = await getCustomCode(DISPLAY_NAME);
+    if (!customCodeBlock || !customCodeBlock.hostedLocation) {
+        return null;
+    }
+    // activate loading state to block iife scripts
+    window.isLoadingCustomCodeConfigs = true;
+    const configs = await import(/* @vite-ignore */ customCodeBlock.hostedLocation);
+    window.isLoadingCustomCodeConfigs = false;
+    customCodeConfigsStore.set(configs);
+    logger.log({}, 'Project custom code configs', configs);
+    return configs;
+};
+/**
+ * Fetches configs stored in custom code for a given component.
+ * @param component
+ * @returns
+ */
+export const getComponentConfigs = async (component) => {
+    const customCodeBlock = await getProjectConfigs();
+    if (!customCodeBlock || Object.keys(customCodeBlock[component]).length === 0)
+        return null;
+    return customCodeBlock[component];
+};

package/dist/utils/custom-code/index.d.ts

@@ -1 +1,2 @@
 export * from './api';
+export * from './configs';

package/dist/utils/custom-code/index.js

@@ -1 +1,2 @@
 export * from './api';
+export * from './configs';

package/dist/utils/helpers/capitalizeFirstLetter.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Capitalizes the first letter of each word in a comma-separated string and adds a space after commas.
+ */
+export declare const capitalizeFirstLetter: (input: string) => string;

package/dist/utils/helpers/capitalizeFirstLetter.js

@@ -0,0 +1,9 @@
+/**
+ * Capitalizes the first letter of each word in a comma-separated string and adds a space after commas.
+ */
+export const capitalizeFirstLetter = (input) => {
+    return input
+        .split(',')
+        .map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
+        .join(', ');
+};

package/dist/utils/helpers/getTimeNow.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generate a string with the current date and time in ISO format.
+ */
+export declare const getTimeNow: () => string;

package/dist/utils/helpers/getTimeNow.js

@@ -0,0 +1,8 @@
+import { DateTime } from 'luxon';
+/**
+ * Generate a string with the current date and time in ISO format.
+ */
+export const getTimeNow = () => {
+    const now = DateTime.local();
+    return `${now.toFormat('MMMM d, yyyy, h:mma')}`;
+};

package/dist/utils/helpers/index.d.ts

@@ -1,6 +1,10 @@
+export * from './capitalizeFirstLetter';
 export * from './cleanupTooltipMessage';
 export * from './goto';
+export * from './getTimeNow';
+export * from './minifyCode';
 export * from './noop';
 export * from './numbers';
 export * from './objectsToModuleExports';
 export * from './trimText';
+export * from './toHumanReadableList';

package/dist/utils/helpers/index.js

@@ -1,6 +1,10 @@
+export * from './capitalizeFirstLetter';
 export * from './cleanupTooltipMessage';
 export * from './goto';
+export * from './getTimeNow';
+export * from './minifyCode';
 export * from './noop';
 export * from './numbers';
 export * from './objectsToModuleExports';
 export * from './trimText';
+export * from './toHumanReadableList';

package/dist/utils/helpers/minifyCode.d.ts

@@ -0,0 +1,10 @@
+import { type MinifyOptions } from 'terser';
+/**
+ * Minifies the provided JavaScript code string.
+ */
+export declare const minifyCode: (code: string, options?: MinifyOptions) => Promise<string>;
+/**
+ * Core script as a string.
+ * TODO:  temporary, migrate it to a re-usable util
+ */
+export declare const createScriptContent: (coreScript: string) => string;

package/dist/utils/helpers/minifyCode.js

@@ -0,0 +1,73 @@
+import { minify } from 'terser';
+/**
+ * Minifies the provided JavaScript code string.
+ */
+export const minifyCode = async (code, options) => {
+    try {
+        const result = await minify(code, options);
+        if (result.code) {
+            return result.code;
+        }
+        throw new Error('Minification failed: No output code produced.');
+    }
+    catch (error) {
+        if (error instanceof Error) {
+            // Handle specific Error object
+            throw new Error(`Minification error: ${error.message}`);
+        }
+        else {
+            // Handle unknown error types
+            throw new Error(`Unexpected error: ${String(error)}`);
+        }
+    }
+};
+/**
+ * Core script as a string.
+ * TODO:  temporary, migrate it to a re-usable util
+ */
+export const createScriptContent = (coreScript) => {
+    const scriptToAdd = `
+const injectStyles = () => {
+  const curr = document.querySelector(\`style[fs-components-cloak]\`);
+  curr?.remove();
+  const cloak = document.createElement('style');
+  cloak.setAttribute('fs-components-cloak', 'cloak');
+  cloak.textContent = \`
+     [fs-marquee-instance],[fs-cnumbercount-instance]{ opacity: 0; }
+    [fs-consent-element="internal-component"],[fs-consent-element="banner"],[fs-consent-element="fixed-preferences"],[fs-consent-element="preferences"],[fs-consent-element="interaction"]{display:none}
+ \`;
+  document.head.appendChild(cloak);
+};
+const initFsComponents = async (url) => {
+  injectStyles();
+  // happens in-app, check to prevent script being invoked in-app
+  const configsLoading = window?.finsweetComponentsConfigLoading;
+
+  const found = document?.querySelector("script[fs-components-src]");
+  if (typeof import.meta !== "undefined" && !(found || configsLoading)) {
+    const corescript = document?.querySelector(
+      'script[finsweet="components"][async][type="module"]'
+    );
+
+    const appConfigs = (await import(/* @vite-ignore */ import.meta.url));
+    const components = Object.keys(appConfigs) || [];
+      
+    return new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      const srcUrl = url + "?v=" + new Date().getTime();
+      script.src = srcUrl;
+      script.type = "module";
+      script.async = true;
+      script.setAttribute("fs-components-src", import.meta.url);
+      script.setAttribute("fs-components-installed", components?.join(","));
+      script.onload = () => resolve();
+      script.onerror = () => reject(new Error("Failed to load script"));
+      document.head.appendChild(script);
+    });
+  }
+};
+
+// Load dev script
+initFsComponents("${coreScript}");`;
+    return scriptToAdd;
+};

package/dist/utils/helpers/objectsToModuleExports.d.ts

@@ -3,5 +3,5 @@
  */
 export declare const objectsToModuleExports: (exportsArray: Array<{
     moduleName: string;
-    data: object;
+    data: any;
 }>) => string;

package/dist/utils/helpers/objectsToModuleExports.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Converts an array of objects to module export statements.
  */

package/dist/utils/helpers/toHumanReadableList.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Converts an array of strings into a human-readable list by adding commas and "and" before the last item.
+ */
+export declare const toHumanReadableList: (arr: string[], conjunction?: string) => string;

package/dist/utils/helpers/toHumanReadableList.js

@@ -0,0 +1,11 @@
+/**
+ * Converts an array of strings into a human-readable list by adding commas and "and" before the last item.
+ */
+export const toHumanReadableList = (arr, conjunction = 'and') => {
+    const len = arr.length;
+    if (len === 0)
+        return '';
+    if (len === 1)
+        return arr[0];
+    return `${arr.slice(0, -1).join(', ')} ${conjunction} ${arr[len - 1]}`;
+};

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from './animations';
 export * from './api';
 export * from './auth';
 export * from './browser-storage';

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+export * from './animations';
 export * from './api';
 export * from './auth';
 export * from './browser-storage';

package/dist/utils/webflow-canvas/getAllChildren.d.ts

@@ -0,0 +1,16 @@
+export interface ElementChildren {
+    attribute: string | null;
+    customAttributes: NamedValue[] | null;
+    element: AnyElement;
+    parent: AnyElement | null;
+}
+/**
+ * Recursively fetches children elements and attributes.
+ *
+ * @param element - The root element.
+ * @param attributeName - The attribute name to fetch.
+ * @param parent - The parent of the current element.
+ * @param className - The class name to fetch.
+ * @returns - Promise of array containing elements and their children recursively.
+ */
+export declare const getAllChildren: (element: AnyElement, attributeName?: string, parent?: AnyElement | null, className?: string) => Promise<ElementChildren[]>;

package/dist/utils/webflow-canvas/getAllChildren.js

@@ -0,0 +1,65 @@
+import { getWebflowElementAttribute } from './attributes';
+/**
+ * Recursively fetches children elements and attributes.
+ *
+ * @param element - The root element.
+ * @param attributeName - The attribute name to fetch.
+ * @param parent - The parent of the current element.
+ * @param className - The class name to fetch.
+ * @returns - Promise of array containing elements and their children recursively.
+ */
+export const getAllChildren = async (element, attributeName, parent, className = 'fs-consent') => {
+    let attribute = '';
+    let customAttributes = [];
+    if (attributeName) {
+        if (attributeName === 'wized' || attributeName === 'w-el') {
+            // wized may have old attribute name "w-el" so we check for both
+            attribute =
+                (await getWebflowElementAttribute(element, 'wized')) ||
+                    (await getWebflowElementAttribute(element, 'w-el')) ||
+                    null;
+        }
+        else {
+            attribute = (await getWebflowElementAttribute(element, attributeName)) || null;
+        }
+    }
+    if (element?.customAttributes) {
+        // Get All Custom Attributes
+        const attributesList = await element.getAllCustomAttributes();
+        if (attributesList) {
+            customAttributes = attributesList;
+        }
+    }
+    const children = element?.children ? await element?.getChildren() : [];
+    // const styles: ElementChildren['styles'] = [];
+    // if (element?.styles) {
+    //   const stylesData = await element?.getStyles();
+    //   const isArray = Array.isArray(stylesData);
+    //   if (isArray && stylesData.length > 0) {
+    //     for (const style of stylesData) {
+    //       try {
+    //         const name = (await style?.getName()) || undefined;
+    //         const properties = (await style?.getProperties()) || undefined;
+    //         if (name && properties && style) {
+    //           styles.push({ style, name, properties });
+    //         }
+    //       } catch (error) {
+    //       }
+    //     }
+    //   }
+    // }
+    const current = {
+        element,
+        parent: parent,
+        attribute,
+        customAttributes
+        // styles,
+        // defaultClassName: styles?.find((style) => style?.name?.includes(className))?.name || '',
+    };
+    if (children.length === 0) {
+        return [current];
+    }
+    const childrenArrays = await Promise.all(children.map((child) => getAllChildren(child, attributeName, element, className)));
+    const flattenedChildren = childrenArrays.flat();
+    return [current, ...flattenedChildren];
+};

package/dist/utils/webflow-canvas/getElementClassList.d.ts

@@ -0,0 +1,9 @@
+type ClassList = {
+    name: string;
+    style: Style;
+};
+/**
+ * Returns the class list of the element
+ */
+export declare const getElementClassList: (element: AnyElement) => Promise<ClassList[]>;
+export {};

package/dist/utils/webflow-canvas/getElementClassList.js

@@ -0,0 +1,19 @@
+/**
+ * Returns the class list of the element
+ */
+export const getElementClassList = async (element) => {
+    const classList = [];
+    if (element?.styles) {
+        const stylesData = await element.getStyles();
+        const isArray = Array.isArray(stylesData);
+        if (isArray) {
+            for (const style of stylesData) {
+                const clsName = await style?.getName();
+                if (style && clsName) {
+                    classList.push({ name: clsName, style });
+                }
+            }
+        }
+    }
+    return classList?.filter(Boolean);
+};

package/dist/utils/webflow-canvas/index.d.ts

@@ -1,4 +1,6 @@
 export * from './attributes';
 export * from './findInstanceElement';
 export * from './getAllPages';
+export * from './getAllChildren';
 export * from './getSiteStagingUrl';
+export * from './getElementClassList';

package/dist/utils/webflow-canvas/index.js

@@ -1,4 +1,6 @@
 export * from './attributes';
 export * from './findInstanceElement';
 export * from './getAllPages';
+export * from './getAllChildren';
 export * from './getSiteStagingUrl';
+export * from './getElementClassList';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {
@@ -51,6 +51,7 @@
     "@types/lodash": "^4.17.18",
     "@types/lodash-es": "^4.17.12",
     "@types/lodash.isequal": "^4.5.8",
+    "@types/luxon": "^3.6.2",
     "@types/node": "^22",
     "@vitest/browser": "3.2.3",
     "@vitest/coverage-v8": "3.2.3",
@@ -85,10 +86,13 @@
     "lodash-es": "^4.17.21",
     "lodash.isequal": "^4.5.0",
     "logrocket": "^10.1.0",
+    "luxon": "^3.6.1",
+    "motion": "^10.18.0",
     "overlayscrollbars": "^2.11.4",
     "overlayscrollbars-svelte": "^0.5.5",
     "svelte-routing": "^2.13.0",
     "swiper": "^11.2.8",
+    "terser": "^5.43.1",
     "uuid": "^11.1.0",
     "zod": "^3.25.64"
   },
@@ -96,6 +100,7 @@
     "dev": "vite dev",
     "build": "vite build && npm run prepack",
     "preview": "vite preview",
+    "watch": "svelte-kit sync && svelte-package --watch",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "format": "prettier --write .",