@finsweet/webflow-apps-utils 1.0.6 → 1.0.8

package/dist/{utils → ui/utils}/auth/crossWindowLogin.js

@@ -1,4 +1,4 @@
-import { AUTH0_AUDIENCE, AUTH0_CLIENT_ID, AUTH0_LOGIN_URL, AUTH0_REDIRECT_URL, AUTH0_SCOPE, PROD_FINSWEEET_ACCOUNTS_ORIGIN } from '../constants';
+import { AUTH0_AUDIENCE, AUTH0_CLIENT_ID, AUTH0_LOGIN_URL, AUTH0_REDIRECT_URL, AUTH0_SCOPE, PROD_FINSWEEET_ACCOUNTS_ORIGIN } from '../../../utils/constants';
 /**
  * Opens a popup window for cross-window authentication with Auth0.
  */

package/dist/{utils → ui/utils}/auth/index.d.ts

@@ -1,4 +1,4 @@
-import type { FinsweetAuth } from '../../types';
+import type { FinsweetAuth } from '../../../types';
 /**
  * Store for the Finsweet user data.
  */

package/dist/{utils → ui/utils}/auth/index.js

@@ -1,12 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import Cookies from 'js-cookie';
 import { get, writable } from 'svelte/store';
+import { getLocalStorage, removeLocalStorage, setLocalStorage } from '../../../utils';
+import { FINSWEET_SUBSCRIPTIONS_ENDPOINT, FINSWEET_SUBSCRIPTIONS_ENDPOINT_STAGING } from '../../../utils/constants';
 import { getFinsweetComponentsEnvironment } from '../api';
-import { getLocalStorage, removeLocalStorage, setLocalStorage } from '../browser-storage';
-import { FINSWEET_SUBSCRIPTIONS_ENDPOINT, FINSWEET_SUBSCRIPTIONS_ENDPOINT_STAGING } from '../constants';
-import { getLogger } from '../logger';
 import { crossWindowLogin } from './crossWindowLogin';
-const logger = getLogger('webflow-apps-ui-utils');
 /**
  * Store for the Finsweet user data.
  */
@@ -51,7 +49,7 @@ export const getSubscriptions = async (token) => {
         return data;
     }
     catch (error) {
-        logger.error({}, 'Failed to fetch subscriptions', error);
+        console.error('Failed to fetch subscriptions', error);
         return [];
     }
 };
@@ -95,7 +93,7 @@ export const handleLogin = async () => {
     }
     catch (error) {
         const err = error;
-        logger.error({}, 'Login failed:', err.message);
+        console.error('Login failed:', err.message);
         finsweetUser.set(null);
         webflow.notify({
             type: 'Error',

package/dist/{utils → ui/utils}/diff-mapper/DiffMapper.stories.js

@@ -131,7 +131,7 @@ Automatic cache cleanup when size exceeds 100 entries or TTL expires.
 The diff mapper is seamlessly integrated with the GlobalProvider system:
 
 \`\`\`typescript
-import { useConfiguratorContext } from '../../providers';
+import { useConfiguratorContext } from '../../../providers';
 
 const configurator = useConfiguratorContext<MyConfigType>();
 
@@ -155,7 +155,7 @@ import {
 	validateWatchOptions,
 	extractKeys,
 	createDebouncedUpdate
-} from '../../providers';
+} from '../../../providers';
 
 // Create default configurator state
 const defaultState = createDefaultConfiguratorState<MyConfigType>();

package/dist/{utils → ui/utils}/diff-mapper/DiffMapperDemo.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getDetailedDiff, hasChangesViaDiff } from '../../providers/configuratorUtils';
+	import { getDetailedDiff, hasChangesViaDiff } from '../../providers';
 
 	let output = '';
 	let coercionExamples = '';

package/dist/{utils → ui/utils}/helpers/goto.js

@@ -1,8 +1,6 @@
 import { get } from 'svelte/store';
 import { navigate } from 'svelte-routing';
-import { routerStore } from '../../stores';
-import { getLogger } from '../logger';
-const logger = getLogger('webflow-apps-ui-utils');
+import { routerStore } from '../../../utils/stores';
 /**
  * Normalizes a URL path to ensure proper formatting.
  */
@@ -21,7 +19,7 @@ const normalizeUrlPath = (path, hash) => {
 export const goto = (path = '/', state = {}) => {
     const { hash = '' } = get(routerStore);
     if (!hash) {
-        logger.error({}, 'goto method found no router hash in the router store. Contact Finsweet support.');
+        console.error('goto method found no router hash in the router store. Contact Finsweet support.');
         return;
     }
     const url = normalizeUrlPath(`/${hash}/${path}`, hash);

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

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

package/dist/ui/utils/helpers/index.js

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

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

@@ -0,0 +1,3 @@
+export * from './auth';
+export * from './diff-mapper';
+export * from './helpers';

package/dist/ui/utils/index.js

@@ -0,0 +1,3 @@
+export * from './auth';
+export * from './diff-mapper';
+export * from './helpers';

package/dist/utils/constants.d.ts

@@ -59,3 +59,8 @@ export declare const BRAND: {
  */
 export declare const FINSWEET_COMPONENTS_WEBFLOW_APP_ORIGINS: string[];
 export declare const ACCEPTED_WEBFLOW_ELEMENTS_FOR_INSERTION: string[];
+/**
+ * List of domains that are considered staging.
+ */
+export declare const STAGING_DOMAINS: string[];
+export declare const FINSWEET_LOGO_URL = "https://cdn.prod.website-files.com/61819aaca0e7ac73f85a2d54/6865d68f194e84da9c6452e5_Components%20White%20Logo.svg";

package/dist/utils/constants.js

@@ -71,3 +71,14 @@ export const ACCEPTED_WEBFLOW_ELEMENTS_FOR_INSERTION = [
     'Container',
     'BlockContainer'
 ];
+/**
+ * List of domains that are considered staging.
+ */
+export const STAGING_DOMAINS = [
+    'webflow.io',
+    'webflow-ext.com',
+    'localhost',
+    'canvas.webflow.com',
+    'server.wized.com'
+];
+export const FINSWEET_LOGO_URL = 'https://cdn.prod.website-files.com/61819aaca0e7ac73f85a2d54/6865d68f194e84da9c6452e5_Components%20White%20Logo.svg';

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

@@ -2,7 +2,7 @@ import type { CustomCodeBlock } from '../../types';
 /**
  * Gets stored Custom Code blocks by ID or returns all if no ID provided.
  */
-export declare const getCustomCode: (id?: string) => Promise<Array<CustomCodeBlock>>;
+export declare const getCustomCode: (displayName?: string) => Promise<Array<CustomCodeBlock>>;
 /**
  * Sets custom code blocks in the site.
  */

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

@@ -1,17 +1,15 @@
-import { getLogger } from '../logger';
-const logger = getLogger('webflow-apps-ui-utils');
 /**
  * Gets stored Custom Code blocks by ID or returns all if no ID provided.
  */
-export const getCustomCode = async (id) => {
+export const getCustomCode = async (displayName) => {
     //TODO: update this when typings are available plus any other place we have disabled this warning.
     //@ts-expect-error - not available in typings for now
     const customCodeBlock = (await webflow.getSiteCustomCode());
     if (!customCodeBlock || customCodeBlock.length === 0)
         return [];
-    if (!id)
+    if (!displayName)
         return customCodeBlock;
-    const storedConfigs = customCodeBlock.filter((block) => block.id === id);
+    const storedConfigs = customCodeBlock.filter((block) => block.id === displayName);
     if (storedConfigs)
         return storedConfigs;
     return [];
@@ -25,7 +23,7 @@ export const setCustomCode = async (customCodeBlock) => {
         await webflow.setSiteCustomCode(customCodeBlock);
     }
     catch (error) {
-        logger.error({}, 'Failed to save custom code block', error, customCodeBlock);
+        console.error('Failed to save custom code block', error, customCodeBlock);
     }
 };
 /**

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

@@ -12,11 +12,12 @@ export type CustomCodeConfigsStore = {
 export declare const customCodeConfigsStore: import("svelte/store").Writable<CustomCodeConfigsStore>;
 /**
  * Get configs from custom code.
+ * @param displayName - The name of the custom code block to get configs from.
  */
-export declare const getProjectConfigs: () => Promise<any>;
+export declare const getProjectConfigs: (displayName: string) => Promise<any>;
 /**
  * Fetches configs stored in custom code for a given component.
  * @param component
  * @returns
  */
-export declare const getComponentConfigs: (component: string) => Promise<any>;
+export declare const getComponentConfigs: (component: string, displayName: string) => Promise<any>;

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

@@ -1,8 +1,5 @@
 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
  */
@@ -13,9 +10,10 @@ export const componentConfigsStore = writable(null);
 export const customCodeConfigsStore = writable([]);
 /**
  * Get configs from custom code.
+ * @param displayName - The name of the custom code block to get configs from.
  */
-export const getProjectConfigs = async () => {
-    const [customCodeBlock] = await getCustomCode(DISPLAY_NAME);
+export const getProjectConfigs = async (displayName) => {
+    const [customCodeBlock] = await getCustomCode(displayName);
     if (!customCodeBlock || !customCodeBlock.hostedLocation) {
         return null;
     }
@@ -24,7 +22,6 @@ export const getProjectConfigs = async () => {
     const configs = await import(/* @vite-ignore */ customCodeBlock.hostedLocation);
     window.isLoadingCustomCodeConfigs = false;
     customCodeConfigsStore.set(configs);
-    logger.log({}, 'Project custom code configs', configs);
     return configs;
 };
 /**
@@ -32,8 +29,8 @@ export const getProjectConfigs = async () => {
  * @param component
  * @returns
  */
-export const getComponentConfigs = async (component) => {
-    const customCodeBlock = await getProjectConfigs();
+export const getComponentConfigs = async (component, displayName) => {
+    const customCodeBlock = await getProjectConfigs(displayName);
     if (!customCodeBlock || Object.keys(customCodeBlock[component]).length === 0)
         return null;
     return customCodeBlock[component];

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

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

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

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

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

@@ -0,0 +1,37 @@
+/**
+ * Check if an element is scrollable
+ * @param element
+ * @returns True or false
+ */
+export declare const isScrollable: (element: Element) => boolean;
+/**
+ * Finds the first child text node of an element
+ * @param element The element to search into.
+ */
+export declare const findTextNode: (element: HTMLElement) => ChildNode | undefined;
+/**
+ * Function to fetch the Document of a specified URL.
+ *
+ * @param url - The URL of the page.
+ * @param slug - [optional] The slug of the page.
+ * @returns
+ */
+export declare const fetchDocument: (url: string, slug?: string) => Promise<Document>;
+/**
+ * Function to fetch the Elements of a specified URL.
+ *
+ * @param url - The URL of the page.
+ * @param tagName - The tag name of the elements to fetch. If not provided, returns the whole page as a string.
+ * @param asElement - [optional] If true, returns the element as an object.
+ * @returns
+ */
+export declare const fetchElements: (url: URL, tagName?: string, asElement?: boolean) => Promise<string[] | HTMLElement[]>;
+/**
+ * Fetch elements by attribute
+ */
+export declare const fetchElementsByAttribute: (url: URL, attribute: string) => Promise<string[]>;
+/**
+ * Checks if an element is visible
+ * @param element
+ */
+export declare const isVisible: (element: HTMLElement) => boolean;

package/dist/utils/helpers/dom.js

@@ -0,0 +1,104 @@
+import { load } from 'cheerio';
+import { FINSWEET_REVERSE_PROXY_URL } from '../constants';
+import { isHTMLElement } from './guards';
+/**
+ * Check if an element is scrollable
+ * @param element
+ * @returns True or false
+ */
+export const isScrollable = (element) => {
+    const { overflow } = getComputedStyle(element);
+    return overflow === 'auto' || overflow === 'scroll';
+};
+/**
+ * Finds the first child text node of an element
+ * @param element The element to search into.
+ */
+export const findTextNode = (element) => {
+    let textNode;
+    for (const node of Array.from(element.childNodes)) {
+        if (isHTMLElement(node) && node.childNodes.length)
+            textNode = findTextNode(node);
+        else if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())
+            textNode = node;
+        if (textNode)
+            break;
+    }
+    return textNode;
+};
+/**
+ * Function to fetch the Document of a specified URL.
+ *
+ * @param url - The URL of the page.
+ * @param slug - [optional] The slug of the page.
+ * @returns
+ */
+export const fetchDocument = async (url, slug) => {
+    const pageUrl = new URL(url);
+    if (slug)
+        pageUrl.pathname = slug;
+    const target = `${FINSWEET_REVERSE_PROXY_URL}${pageUrl}`;
+    const response = await fetch(target);
+    const pageContent = await response.text();
+    const parser = new DOMParser();
+    return parser.parseFromString(pageContent, 'text/html');
+};
+/**
+ * Function to fetch the Elements of a specified URL.
+ *
+ * @param url - The URL of the page.
+ * @param tagName - The tag name of the elements to fetch. If not provided, returns the whole page as a string.
+ * @param asElement - [optional] If true, returns the element as an object.
+ * @returns
+ */
+export const fetchElements = async (url, tagName, asElement) => {
+    const target = `${FINSWEET_REVERSE_PROXY_URL}${url.href}`;
+    const response = await fetch(target);
+    const html = await response.text();
+    const $ = load(html);
+    // return the whole page if no tag name is provided
+    if (!tagName)
+        return [$.html()];
+    // crawl page and get elements
+    if (asElement && tagName) {
+        const elements = $(tagName)
+            .map((_, el) => {
+            const outerHTML = $.html(el); // Get the outer HTML of each element
+            const parser = new DOMParser();
+            const parsedDoc = parser.parseFromString(outerHTML, 'text/html');
+            const element = parsedDoc.querySelector(tagName);
+            return element;
+        })
+            .get();
+        return elements;
+    }
+    // crawl page and get elements as strings
+    const elements = $(tagName)
+        .map((_, el) => {
+        const outerHTML = $.html(el);
+        return outerHTML;
+    })
+        .get();
+    return elements;
+};
+/**
+ * Fetch elements by attribute
+ */
+export const fetchElementsByAttribute = async (url, attribute) => {
+    const target = `${FINSWEET_REVERSE_PROXY_URL}${url.href}`;
+    const response = await fetch(target);
+    const html = await response.text();
+    const $ = load(html);
+    const elements = $(attribute)
+        .map((_, el) => {
+        const outerHTML = $.html(el);
+        return outerHTML;
+    })
+        .get();
+    return elements;
+};
+/**
+ * Checks if an element is visible
+ * @param element
+ */
+export const isVisible = (element) => !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);

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

@@ -0,0 +1,13 @@
+/**
+ * Converts a configuration object to a base64-encoded string.
+ * @param {object} configs
+ * @returns
+ */
+export declare const encodeComponentConfigs: (configs: object) => string;
+/**
+ * Decodes a base64-encoded configuration string to a configuration object.
+ * @param configsString
+ * @param component
+ * @returns
+ */
+export declare const decodeComponentConfigs: <T>(configsString: string) => T;

package/dist/utils/helpers/encodeDecodeConfigs.js

@@ -0,0 +1,20 @@
+/**
+ * Converts a configuration object to a base64-encoded string.
+ * @param {object} configs
+ * @returns
+ */
+export const encodeComponentConfigs = (configs) => {
+    const previewModeConfigs = btoa(JSON.stringify(configs));
+    return previewModeConfigs;
+};
+/**
+ * Decodes a base64-encoded configuration string to a configuration object.
+ * @param configsString
+ * @param component
+ * @returns
+ */
+export const decodeComponentConfigs = (configsString) => {
+    const jsonString = atob(configsString);
+    const configParsed = JSON.parse(jsonString);
+    return configParsed;
+};

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

@@ -0,0 +1,19 @@
+/**
+ * Adds an event listener to an element.
+ * @returns A callback to remove the event listener from the element.
+ *
+ * @param target
+ * @param type
+ * @param listener
+ * @param options
+ */
+export declare function addListener<TargetInterface extends EventTarget, Type extends TargetInterface extends Window ? keyof WindowEventMap | string : TargetInterface extends Document ? keyof DocumentEventMap | string : TargetInterface extends HTMLElement ? keyof HTMLElementEventMap | string : keyof ElementEventMap | string, Listener extends Type extends keyof WindowEventMap ? (this: Document, ev: WindowEventMap[Type]) => unknown : Type extends keyof DocumentEventMap ? (this: Document, ev: DocumentEventMap[Type]) => unknown : Type extends keyof HTMLElementEventMap ? (this: HTMLElement, ev: HTMLElementEventMap[Type]) => unknown : Type extends keyof ElementEventMap ? (this: Element, ev: ElementEventMap[Type]) => unknown : EventListenerOrEventListenerObject>(target: TargetInterface | null | undefined, type: Type, listener: Listener, options?: boolean | AddEventListenerOptions): () => void;
+type AllowedEvent = keyof DocumentEventMap | 'w-close';
+/**
+ * Dispatches a custom event that bubbles from the target.
+ * @param target The element where the event will originate.
+ * @param events The event name or an array of event names.
+ * @returns True if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.
+ */
+export declare const simulateEvent: (target: EventTarget, events: AllowedEvent | Array<AllowedEvent>) => boolean;
+export {};

package/dist/utils/helpers/events.js

@@ -0,0 +1,28 @@
+import { noop } from './noop';
+/**
+ * Adds an event listener to an element.
+ * @returns A callback to remove the event listener from the element.
+ *
+ * @param target
+ * @param type
+ * @param listener
+ * @param options
+ */
+export function addListener(target, type, listener, options) {
+    if (!target)
+        return noop;
+    target.addEventListener(type, listener, options);
+    return () => target.removeEventListener(type, listener, options);
+}
+/**
+ * Dispatches a custom event that bubbles from the target.
+ * @param target The element where the event will originate.
+ * @param events The event name or an array of event names.
+ * @returns True if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.
+ */
+export const simulateEvent = (target, events) => {
+    if (!Array.isArray(events))
+        events = [events];
+    const eventsSuccess = events.map((event) => target.dispatchEvent(new Event(event, { bubbles: true })));
+    return eventsSuccess.every((success) => success);
+};

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

@@ -0,0 +1,22 @@
+import type { FormField } from '../../types';
+import { simulateEvent } from './events';
+/**
+ * Clears the form field's value and emits an input and changed event.
+ * If the field is a checkbox or a radio, it will unselect it.
+ * @param field The `FormField` to clear.
+ * @param omitEvents By default, events are dispatched from the `FormField`. In some cases, these events might collide with other logic of the system.
+ * You can omit certain events from being dispatched by passing them in an array.
+ */
+export declare const clearFormField: (field: FormField, omitEvents?: Parameters<typeof simulateEvent>["1"]) => void;
+/**
+ * Gets the value of a given input element.
+ * @param {FormField} input
+ */
+export declare const getFormFieldValue: (input: FormField) => string;
+/**
+ * Sets a value to a FormField element and emits `click`, `input` and `change` Events.
+ *
+ * @param element The FormField to update.
+ * @param value `boolean` for Checkboxes and Radios, `string` for the rest.
+ */
+export declare const setFormFieldValue: (element: FormField, value: string | boolean) => void;

package/dist/utils/helpers/forms.js

@@ -0,0 +1,82 @@
+import { FORM_CSS_CLASSES } from '../webflow';
+import { simulateEvent } from './events';
+import { isHTMLInputElement } from './guards';
+/**
+ * Clears the form field's value and emits an input and changed event.
+ * If the field is a checkbox or a radio, it will unselect it.
+ * @param field The `FormField` to clear.
+ * @param omitEvents By default, events are dispatched from the `FormField`. In some cases, these events might collide with other logic of the system.
+ * You can omit certain events from being dispatched by passing them in an array.
+ */
+export const clearFormField = (field, omitEvents = []) => {
+    const { type } = field;
+    if (isHTMLInputElement(field) && ['checkbox', 'radio'].includes(type)) {
+        if (!field.checked)
+            return;
+        // Reset the field's value
+        field.checked = false;
+        // Emit DOM events
+        simulateEvent(field, ['click', 'input', 'change'].filter((event) => !omitEvents.includes(event)));
+        if (type === 'checkbox')
+            return;
+        // Clear custom radio button classes
+        const { parentElement } = field;
+        if (!parentElement)
+            return;
+        const radioInput = parentElement.querySelector(`.${FORM_CSS_CLASSES.radioInput}`);
+        if (!radioInput)
+            return;
+        radioInput.classList.remove(FORM_CSS_CLASSES.checkboxOrRadioFocus, FORM_CSS_CLASSES.checkboxOrRadioChecked);
+        return;
+    }
+    // Reset the field's value
+    field.value = '';
+    // Emit DOM events
+    simulateEvent(field, ['input', 'change'].filter((eventKey) => !omitEvents.includes(eventKey)));
+};
+/**
+ * Gets the value of a given input element.
+ * @param {FormField} input
+ */
+export const getFormFieldValue = (input) => {
+    let { value } = input;
+    // Perform actions depending on input type
+    if (input.type === 'checkbox')
+        value = input.checked.toString();
+    if (input.type === 'radio') {
+        // Get the checked radio
+        const checkedOption = input
+            .closest('form')
+            ?.querySelector(`input[name="${input.name}"]:checked`);
+        // If exists, set its value
+        value = isHTMLInputElement(checkedOption) ? checkedOption.value : '';
+    }
+    return value.toString();
+};
+/**
+ * Sets a value to a FormField element and emits `click`, `input` and `change` Events.
+ *
+ * @param element The FormField to update.
+ * @param value `boolean` for Checkboxes and Radios, `string` for the rest.
+ */
+export const setFormFieldValue = (element, value) => {
+    const { type } = element;
+    const isRadio = type === 'radio';
+    const isCheckbox = type === 'checkbox';
+    if (isRadio || isCheckbox) {
+        if (!isHTMLInputElement(element) ||
+            typeof value !== 'boolean' ||
+            value === element.checked ||
+            (isRadio && value === false)) {
+            return;
+        }
+        element.checked = value;
+    }
+    else {
+        if (element.value === value)
+            return;
+        element.value = value.toString();
+    }
+    // Emit DOM events
+    simulateEvent(element, ['click', 'input', 'change']);
+};