@finsweet/webflow-apps-utils 1.0.3 → 1.0.5

package/dist/utils/diff-mapper/deepDiffMapper.js

@@ -0,0 +1,264 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export var DiffType;
+(function (DiffType) {
+    DiffType["CREATED"] = "created";
+    DiffType["UPDATED"] = "updated";
+    DiffType["DELETED"] = "deleted";
+    DiffType["UNCHANGED"] = "unchanged";
+})(DiffType || (DiffType = {}));
+class DeepDiffMapper {
+    visitedPairs = new WeakMap();
+    isFunction(x) {
+        return Object.prototype.toString.call(x) === '[object Function]';
+    }
+    isArray(x) {
+        return Object.prototype.toString.call(x) === '[object Array]';
+    }
+    isDate(x) {
+        return Object.prototype.toString.call(x) === '[object Date]';
+    }
+    isObject(x) {
+        return Object.prototype.toString.call(x) === '[object Object]';
+    }
+    isValue(x) {
+        return !this.isObject(x) && !this.isArray(x);
+    }
+    compareValues(value1, value2) {
+        if (value1 === value2 || this.areEquivalentPrimitives(value1, value2)) {
+            return DiffType.UNCHANGED;
+        }
+        if (this.isDate(value1) && this.isDate(value2) && value1.getTime() === value2.getTime()) {
+            return DiffType.UNCHANGED;
+        }
+        if (value1 === undefined) {
+            return DiffType.CREATED;
+        }
+        if (value2 === undefined) {
+            return DiffType.DELETED;
+        }
+        return DiffType.UPDATED;
+    }
+    areEquivalentPrimitives(value1, value2) {
+        // Handle null and undefined
+        if (value1 == null && value2 == null) {
+            return true;
+        }
+        // Handle string trimming - if both are strings, compare trimmed versions
+        if (typeof value1 === 'string' && typeof value2 === 'string') {
+            return value1.trim() === value2.trim();
+        }
+        // Handle string/boolean coercion with specific string values
+        if ((typeof value1 === 'string' || typeof value1 === 'boolean') &&
+            (typeof value2 === 'string' || typeof value2 === 'boolean')) {
+            const val1 = typeof value1 === 'string' ? value1.trim().toLowerCase() : value1;
+            const val2 = typeof value2 === 'string' ? value2.trim().toLowerCase() : value2;
+            // Handle specific string-boolean equivalences
+            if (typeof val1 === 'string' && typeof val2 === 'boolean') {
+                if ((val1 === 'true' && val2 === true) || (val1 === 'false' && val2 === false)) {
+                    return true;
+                }
+                // Handle empty string as false
+                if (val1 === '' && val2 === false) {
+                    return true;
+                }
+            }
+            if (typeof val2 === 'string' && typeof val1 === 'boolean') {
+                if ((val2 === 'true' && val1 === true) || (val2 === 'false' && val1 === false)) {
+                    return true;
+                }
+                // Handle empty string as false
+                if (val2 === '' && val1 === false) {
+                    return true;
+                }
+            }
+        }
+        // Handle string/number coercion
+        if ((typeof value1 === 'string' || typeof value1 === 'number') &&
+            (typeof value2 === 'string' || typeof value2 === 'number')) {
+            // For string to number comparison, trim the string first
+            const str1 = typeof value1 === 'string' ? value1.trim() : value1.toString();
+            const str2 = typeof value2 === 'string' ? value2.trim() : value2.toString();
+            // Only treat truly empty strings (not whitespace-only) as equivalent to 0
+            // Distinguish between empty string ('') and whitespace-only strings (' ', '  ')
+            if (typeof value1 === 'string' && value1 === '' && typeof value2 === 'number') {
+                return value2 === 0;
+            }
+            if (typeof value2 === 'string' && value2 === '' && typeof value1 === 'number') {
+                return value1 === 0;
+            }
+            // Don't treat whitespace-only strings as equivalent to numbers
+            if (typeof value1 === 'string' && value1.trim() === '' && value1 !== '') {
+                return false; // ' ', '  ', etc. should not be equivalent to numbers
+            }
+            if (typeof value2 === 'string' && value2.trim() === '' && value2 !== '') {
+                return false; // ' ', '  ', etc. should not be equivalent to numbers
+            }
+            // Convert both to numbers and compare
+            const num1 = Number(str1);
+            const num2 = Number(str2);
+            // Handle NaN case specifically - only consider equal if both are exactly NaN
+            if (isNaN(num1) || isNaN(num2)) {
+                return Number.isNaN(value1) && Number.isNaN(value2);
+            }
+            if (!isNaN(num1) && !isNaN(num2)) {
+                return num1 === num2;
+            }
+        }
+        return false;
+    }
+    hasCircularReference(obj1, obj2) {
+        if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null) {
+            return false;
+        }
+        if (!this.visitedPairs.has(obj1)) {
+            this.visitedPairs.set(obj1, new WeakSet());
+        }
+        const visited = this.visitedPairs.get(obj1);
+        if (visited.has(obj2)) {
+            return true;
+        }
+        visited.add(obj2);
+        return false;
+    }
+    _map(obj1, obj2) {
+        if (this.isFunction(obj1) || this.isFunction(obj2)) {
+            throw new Error('Invalid argument. Function given, object expected.');
+        }
+        // Only treat as values if both are values, or if one is undefined and the other is also a value
+        // This prevents treating undefined vs complex object as a value comparison
+        if (this.isValue(obj1) && this.isValue(obj2)) {
+            const diffType = this.compareValues(obj1, obj2);
+            return {
+                type: diffType,
+                data: diffType === DiffType.CREATED ? obj2 : obj1
+            };
+        }
+        // Special case: one is undefined/null and the other is a complex object
+        if ((obj1 === undefined || obj1 === null) && (this.isArray(obj2) || this.isObject(obj2))) {
+            // Recursively process the non-undefined object as if it was created
+            return this._map({}, obj2);
+        }
+        if ((obj2 === undefined || obj2 === null) && (this.isArray(obj1) || this.isObject(obj1))) {
+            // Recursively process the non-undefined object as if it was deleted
+            return this._map(obj1, {});
+        }
+        // Handle primitive value cases (one or both are primitives but not both complex)
+        if (this.isValue(obj1) || this.isValue(obj2)) {
+            const diffType = this.compareValues(obj1, obj2);
+            return {
+                type: diffType,
+                data: diffType === DiffType.CREATED ? obj2 : obj1
+            };
+        }
+        // Check if both are complex types but of different specific types (array vs object)
+        const isArrayVsObject = (this.isArray(obj1) && this.isObject(obj2)) || (this.isObject(obj1) && this.isArray(obj2));
+        // For mixed types (array vs object), check if they have the same structure first
+        if (isArrayVsObject) {
+            // If both are empty, they're still different types
+            const keys1 = Object.keys(obj1 || {});
+            const keys2 = Object.keys(obj2 || {});
+            if (keys1.length === 0 && keys2.length === 0) {
+                return {
+                    type: DiffType.UPDATED,
+                    data: obj1
+                };
+            }
+            // Continue with property comparison for non-empty mixed types
+        }
+        // Check for circular references
+        if (this.hasCircularReference(obj1, obj2)) {
+            return {
+                type: DiffType.UNCHANGED,
+                data: obj1
+            };
+        }
+        const diff = {};
+        // Get all property keys including symbols and own properties
+        const getAllKeys = (obj) => {
+            if (!obj)
+                return [];
+            const keys = [...Object.keys(obj), ...Object.getOwnPropertySymbols(obj)];
+            // Include inherited enumerable properties
+            for (const key in obj) {
+                if (!keys.includes(key)) {
+                    keys.push(key);
+                }
+            }
+            return keys;
+        };
+        const keys1 = getAllKeys(obj1);
+        const keys2 = getAllKeys(obj2);
+        const allKeys = new Set([...keys1, ...keys2]);
+        // Check if prototypes are different and add __proto__ to comparison
+        const proto1 = obj1 ? Object.getPrototypeOf(obj1) : null;
+        const proto2 = obj2 ? Object.getPrototypeOf(obj2) : null;
+        // Add __proto__ to comparison if prototypes differ
+        if (proto1 !== proto2) {
+            allKeys.add('__proto__');
+        }
+        // Check all properties from both objects
+        for (const key of allKeys) {
+            if (this.isFunction(obj1?.[key]) || this.isFunction(obj2?.[key])) {
+                continue;
+            }
+            let value1;
+            let value2;
+            // Special handling for __proto__
+            if (key === '__proto__') {
+                // We already know prototypes differ if we got here (since we added __proto__ to allKeys)
+                // For prototypes, we'll do a shallow comparison to avoid infinite recursion
+                if (proto1 === proto2) {
+                    continue; // Should not happen since we only added this key when they differ
+                }
+                // Compare prototypes - treat default Object.prototype as "undefined" for comparison purposes
+                const isDefaultProto1 = proto1 === Object.prototype || proto1 === null;
+                const isDefaultProto2 = proto2 === Object.prototype || proto2 === null;
+                // If one has default prototype and other has custom, treat as create/delete
+                if (isDefaultProto1 && !isDefaultProto2) {
+                    diff[key] = {
+                        type: DiffType.CREATED,
+                        data: proto2
+                    };
+                    continue;
+                }
+                if (!isDefaultProto1 && isDefaultProto2) {
+                    diff[key] = {
+                        type: DiffType.DELETED,
+                        data: proto1
+                    };
+                    continue;
+                }
+                // Both have custom prototypes but they're different
+                if (!isDefaultProto1 && !isDefaultProto2 && proto1 !== proto2) {
+                    diff[key] = {
+                        type: DiffType.UPDATED,
+                        data: proto1
+                    };
+                    continue;
+                }
+            }
+            else {
+                value1 = obj1?.[key];
+                value2 = obj2?.[key];
+            }
+            diff[key] = this._map(value1, value2);
+        }
+        return diff;
+    }
+    map(obj1, obj2) {
+        // Reset visited pairs for each new comparison
+        this.visitedPairs = new WeakMap();
+        return this._map(obj1, obj2);
+    }
+    compare(obj1, obj2) {
+        return this.map(obj1, obj2);
+    }
+}
+// Export singleton instance
+export const deepDiffMapper = new DeepDiffMapper();
+// Export class for custom instances if needed
+export { DeepDiffMapper };
+// Export convenience function
+export function compareObjects(obj1, obj2) {
+    return deepDiffMapper.compare(obj1, obj2);
+}

package/dist/utils/diff-mapper/index.d.ts

@@ -0,0 +1 @@
+export * from './deepDiffMapper';

package/dist/utils/diff-mapper/index.js

@@ -0,0 +1 @@
+export * from './deepDiffMapper';

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,8 +1,10 @@
+export * from './animations';
 export * from './api';
 export * from './auth';
 export * from './browser-storage';
 export * from './constants';
 export * from './custom-code';
+export * from './diff-mapper';
 export * from './helpers';
 export * from './logger';
 export * from './webflow-canvas';

package/dist/utils/index.js

@@ -1,8 +1,10 @@
+export * from './animations';
 export * from './api';
 export * from './auth';
 export * from './browser-storage';
 export * from './constants';
 export * from './custom-code';
+export * from './diff-mapper';
 export * from './helpers';
 export * from './logger';
 export * from './webflow-canvas';

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.5",
   "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 .",