@finsweet/webflow-apps-utils 1.0.2 → 1.0.4

package/dist/utils/webflow-canvas/attributes/getInstanceNamesFromObject.js

@@ -1,10 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
- * Get the instance names from an object
- * @param obj - The object to get the instance names from
- * @param component - The component key
- * @param hasInstances - Whether the object has instances
- * @returns The instance names
+ * Gets instance names from an object based on component configuration.
  */
 export const getInstanceNamesFromObject = (obj, component, hasInstances) => {
     if (!obj || typeof obj !== 'object')

package/dist/utils/webflow-canvas/attributes/getWebflowElementAttribute.d.ts

@@ -1,7 +1,4 @@
 /**
- * Retrieves the value of a custom attribute on a Webflow element.
- * @param {AnyElement} params.element - The data object of the element.
- * @param {String} params.attributeName - The name of the custom attribute to set.
- * @returns
+ * Gets the value of a custom attribute from a Webflow element.
  */
 export declare const getWebflowElementAttribute: (element: AnyElement, attributeName: string) => Promise<string | null>;

package/dist/utils/webflow-canvas/attributes/getWebflowElementAttribute.js

@@ -1,10 +1,7 @@
 import { getLogger } from '../../logger';
 const logger = getLogger('webflow-apps-ui-utils');
 /**
- * Retrieves the value of a custom attribute on a Webflow element.
- * @param {AnyElement} params.element - The data object of the element.
- * @param {String} params.attributeName - The name of the custom attribute to set.
- * @returns
+ * Gets the value of a custom attribute from a Webflow element.
  */
 export const getWebflowElementAttribute = async (element, attributeName) => {
     try {

package/dist/utils/webflow-canvas/attributes/getWebflowElementTextContent.d.ts

@@ -1,6 +1,4 @@
 /**
- * Get the text content of the webflow element
- * @param el
- * @returns
+ * Gets the text content of a Webflow element.
  */
 export declare const getWebflowElementTextContent: (selectedElement: AnyElement) => Promise<string>;

package/dist/utils/webflow-canvas/attributes/getWebflowElementTextContent.js

@@ -1,7 +1,5 @@
 /**
- * Get the text content of the webflow element
- * @param el
- * @returns
+ * Gets the text content of a Webflow element.
  */
 export const getWebflowElementTextContent = async (selectedElement) => {
     const textContent = [];

package/dist/utils/webflow-canvas/attributes/removeWebflowElementAttribute.d.ts

@@ -1,7 +1,4 @@
 /**
- *  Removes the specified attribute from the DOMElement.
- *  @param {AnyElement} params.element - The data object of the element.
- *  @param {String} params.attributeName - The name of the custom attribute to remove.
- *  @param {Boolean} params.notify - Whether to show a notification after the attribute is removed.
+ * Removes a custom attribute from a Webflow element.
  */
 export declare const removeWebflowElementAttribute: (element: AnyElement, attributeName: string, notify?: boolean) => Promise<null | undefined>;

package/dist/utils/webflow-canvas/attributes/removeWebflowElementAttribute.js

@@ -1,10 +1,7 @@
 import { getLogger } from '../../logger';
 const logger = getLogger('webflow-apps-ui-utils');
 /**
- *  Removes the specified attribute from the DOMElement.
- *  @param {AnyElement} params.element - The data object of the element.
- *  @param {String} params.attributeName - The name of the custom attribute to remove.
- *  @param {Boolean} params.notify - Whether to show a notification after the attribute is removed.
+ * Removes a custom attribute from a Webflow element.
  */
 export const removeWebflowElementAttribute = async (element, attributeName, notify = true) => {
     try {

package/dist/utils/webflow-canvas/attributes/setStyles.d.ts

@@ -3,8 +3,6 @@ export interface StyleProps {
     style: PropertyMap;
 }
 /**
- * Create or Update style and apply it to the selected element
- * @param styles
- * @param element
+ * Creates or updates styles and applies them to the selected element.
  */
 export declare const setStyles: (styles: StyleProps[], element: AnyElement) => Promise<void>;

package/dist/utils/webflow-canvas/attributes/setStyles.js

@@ -1,7 +1,5 @@
 /**
- * Create or Update style and apply it to the selected element
- * @param styles
- * @param element
+ * Creates or updates styles and applies them to the selected element.
  */
 export const setStyles = async (styles, element) => {
     const promises = styles.map(async ({ name, style }) => {

package/dist/utils/webflow-canvas/attributes/setWebflowElementAttribute.d.ts

@@ -1,11 +1,4 @@
 /**
- * Sets the value of a custom attribute to a Webflow element.
- * If the attribute already exists, it will not be updated by default.
- * To update the attribute, the existing value must be different from the new value.
- * @param {AnyElement} params.element - The data object of the element.
- * @param {String} params.attributeName - The name of the custom attribute to set.
- * @param {String} params.attributeValue - The value of the custom attribute to set.
- *  @param {Boolean} params.notify - Whether to show a notification after the attribute is removed.
- * @returns
+ * Sets a custom attribute value on a Webflow element.
  */
 export declare const setWebflowElementAttribute: (element: AnyElement, attributeName: string, attributeValue: string, notify?: boolean) => Promise<void>;

package/dist/utils/webflow-canvas/attributes/setWebflowElementAttribute.js

@@ -2,14 +2,7 @@ import { getLogger } from '../../logger';
 import { getWebflowElementAttribute } from './getWebflowElementAttribute';
 const logger = getLogger('webflow-apps-ui-utils');
 /**
- * Sets the value of a custom attribute to a Webflow element.
- * If the attribute already exists, it will not be updated by default.
- * To update the attribute, the existing value must be different from the new value.
- * @param {AnyElement} params.element - The data object of the element.
- * @param {String} params.attributeName - The name of the custom attribute to set.
- * @param {String} params.attributeValue - The value of the custom attribute to set.
- *  @param {Boolean} params.notify - Whether to show a notification after the attribute is removed.
- * @returns
+ * Sets a custom attribute value on a Webflow element.
  */
 export const setWebflowElementAttribute = async (element, attributeName, attributeValue, notify = true) => {
     try {
@@ -47,11 +40,6 @@ export const setWebflowElementAttribute = async (element, attributeName, attribu
 };
 /**
  * Checks if the specified attribute exists on a Webflow element and matches the provided value.
- *
- * @param {AnyElement} element - The Webflow element to check.
- * @param {string} attributeName - The name of the attribute to find.
- * @param {string} attributeValue - The value to compare against the found attribute.
- * @return {boolean} - Returns true if the attribute exists and matches the provided value, otherwise false.
  */
 const checkAttribute = async (element, attributeName, attributeValue) => {
     const elementAttribute = await getWebflowElementAttribute(element, attributeName);

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

@@ -22,11 +22,5 @@ export interface FindElementByReferenceProps {
 }
 /**
  * Searches for an instance inside or outside a component by its index.
- * @param targetIndex - The index of the instance to get.
- * @param instance - The instance to search for.
- * @param allElements - The elements to search through.
- * @param signal - AbortSignal for cancelling the operation.
- * @param selectElement - Whether to select the element when found.
- * @returns The element match with its component if applicable.
  */
 export declare const findInstanceElement: ({ targetIndex, instance, component, allElements, signal, selectElement }: GetElementFromComponentProps) => Promise<ElementFromComponentMatch | null>;

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

@@ -3,7 +3,7 @@ import { getLogger } from '../logger';
 import { getWebflowElementAttribute } from './attributes';
 const logger = getLogger('utils');
 /**
- * Exit the current component
+ * Exits the current component context.
  */
 const exitComponent = async () => {
     try {
@@ -15,12 +15,6 @@ const exitComponent = async () => {
 };
 /**
  * Searches for an instance inside or outside a component by its index.
- * @param targetIndex - The index of the instance to get.
- * @param instance - The instance to search for.
- * @param allElements - The elements to search through.
- * @param signal - AbortSignal for cancelling the operation.
- * @param selectElement - Whether to select the element when found.
- * @returns The element match with its component if applicable.
  */
 export const findInstanceElement = async ({ targetIndex, instance, component, allElements, signal, selectElement = false }) => {
     if (signal?.aborted)

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/getAllPages.d.ts

@@ -9,21 +9,14 @@ export type PageWithProps = {
     isPasswordProtected: boolean;
 };
 /**
- * Generates a slug for a page or folder
- * @param page - The page or folder to generate a slug for
- * @returns The slug for the page or folder
+ * Generates a slug for a page or folder.
  */
 export declare const getPathname: (page: Page | Folder) => Promise<string>;
 /**
- * Returns a single page with all its properties
- * @param page - The page to get
- * @param stagingUrl - The staging URL
- * @returns The page with all its properties
+ * Returns a single page with all its properties.
  */
 export declare const getPageMetadata: (page: Page) => Promise<PageWithProps>;
 /**
- * Returns all pages and folders from the Webflow project
- * @param pagesAndFolders - If true, returns both pages and folders, else only pages
- * @param kind - Filter pages by kind
+ * Returns all pages and folders from the Webflow project.
  */
 export declare const getAllPages: (pagesAndFolders?: boolean, kind?: PageWithProps["kind"]) => Promise<PageWithProps[]>;

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

@@ -2,9 +2,7 @@ import { getLogger } from '../logger';
 const logger = getLogger('webflow-apps-ui-utils');
 let pageStagingUrl;
 /**
- * Generates a slug for a page or folder
- * @param page - The page or folder to generate a slug for
- * @returns The slug for the page or folder
+ * Generates a slug for a page or folder.
  */
 export const getPathname = async (page) => {
     const parent = await page.getParent();
@@ -20,10 +18,7 @@ export const getPathname = async (page) => {
     return fullSlug.startsWith('/') ? fullSlug : `/${fullSlug}`;
 };
 /**
- * Returns a single page with all its properties
- * @param page - The page to get
- * @param stagingUrl - The staging URL
- * @returns The page with all its properties
+ * Returns a single page with all its properties.
  */
 export const getPageMetadata = async (page) => {
     if (!pageStagingUrl) {
@@ -55,9 +50,7 @@ export const getPageMetadata = async (page) => {
     };
 };
 /**
- * Returns all pages and folders from the Webflow project
- * @param pagesAndFolders - If true, returns both pages and folders, else only pages
- * @param kind - Filter pages by kind
+ * Returns all pages and folders from the Webflow project.
  */
 export const getAllPages = async (pagesAndFolders, kind) => {
     try {

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/getSiteStagingUrl.d.ts

@@ -1,7 +1,4 @@
 /**
- * Returns a valid webflow project staging URL.
- * @param {boolean} origin - If true, returns the origin URL (without https:// and without trailing slash).
- * @param {boolean} stagingName - If true, returns the staging name (without .webflow.io).
- * @returns {string}
+ * Returns a valid Webflow project staging URL.
  */
 export declare const getSiteStagingUrl: (origin?: boolean, stagingName?: boolean) => Promise<string>;

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

@@ -1,8 +1,5 @@
 /**
- * Returns a valid webflow project staging URL.
- * @param {boolean} origin - If true, returns the origin URL (without https:// and without trailing slash).
- * @param {boolean} stagingName - If true, returns the staging name (without .webflow.io).
- * @returns {string}
+ * Returns a valid Webflow project staging URL.
  */
 export const getSiteStagingUrl = async (origin, stagingName) => {
     const { shortName } = await webflow.getSiteInfo();

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

@@ -1,3 +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,3 +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.2",
+  "version": "1.0.4",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {
@@ -48,6 +48,10 @@
     "@testing-library/svelte": "^5.2.4",
     "@testing-library/user-event": "^14.6.1",
     "@types/js-cookie": "^3.0.6",
+    "@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",
@@ -78,10 +82,17 @@
     "clipboard": "^2.0.11",
     "js-cookie": "^3.0.5",
     "just-debounce": "^1.1.0",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "lodash.isequal": "^4.5.0",
     "logrocket": "^10.1.0",
-    "simplebar": "^6.3.1",
+    "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"
   },
@@ -89,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 .",