@finsweet/webflow-apps-utils 1.0.2 → 1.0.4

package/dist/utils/browser-storage/sessionStorage.d.ts

@@ -1,24 +1,16 @@
 /**
- * Check if sessionStorage is available in the current environment.
- * @returns {boolean} True if sessionStorage is accessible, false otherwise.
+ * Checks if sessionStorage is available in the current environment.
  */
 export declare const isSessionStorageAvailable: () => boolean;
 /**
- * A utility function for getting a value from sessionStorage.
- * @param {string} key - The key to retrieve the value for.
- * @returns {string | null} The value associated with the key, or null if not found or sessionStorage is not available.
+ * Gets a value from sessionStorage.
  */
 export declare const getSessionStorage: (key: string) => string | null;
 /**
- * A utility function for setting a value in sessionStorage.
- * @param {string} key - The key to set the value for.
- * @param {string} value - The value to be stored.
- * @returns {boolean} True if the operation succeeded, false otherwise (or if sessionStorage is not available).
+ * Sets a value in sessionStorage.
  */
 export declare const setSessionStorage: (key: string, value: string) => boolean;
 /**
- * A utility function for removing a value from sessionStorage.
- * @param key - The key to remove the value for.
- * @returns {boolean} True if the operation succeeded, false otherwise (or if sessionStorage is not available).
+ * Removes a value from sessionStorage.
  */
 export declare const removeSessionStorage: (key: string) => boolean;

package/dist/utils/browser-storage/sessionStorage.js

@@ -1,6 +1,5 @@
 /**
- * Check if sessionStorage is available in the current environment.
- * @returns {boolean} True if sessionStorage is accessible, false otherwise.
+ * Checks if sessionStorage is available in the current environment.
  */
 import { getLogger } from '../logger';
 const logger = getLogger('webflow-apps-ui-utils');
@@ -18,9 +17,7 @@ export const isSessionStorageAvailable = () => {
     }
 };
 /**
- * A utility function for getting a value from sessionStorage.
- * @param {string} key - The key to retrieve the value for.
- * @returns {string | null} The value associated with the key, or null if not found or sessionStorage is not available.
+ * Gets a value from sessionStorage.
  */
 export const getSessionStorage = (key) => {
     if (isSessionStorageAvailable()) {
@@ -30,10 +27,7 @@ export const getSessionStorage = (key) => {
     return null;
 };
 /**
- * A utility function for setting a value in sessionStorage.
- * @param {string} key - The key to set the value for.
- * @param {string} value - The value to be stored.
- * @returns {boolean} True if the operation succeeded, false otherwise (or if sessionStorage is not available).
+ * Sets a value in sessionStorage.
  */
 export const setSessionStorage = (key, value) => {
     if (isSessionStorageAvailable()) {
@@ -43,9 +37,7 @@ export const setSessionStorage = (key, value) => {
     return false;
 };
 /**
- * A utility function for removing a value from sessionStorage.
- * @param key - The key to remove the value for.
- * @returns {boolean} True if the operation succeeded, false otherwise (or if sessionStorage is not available).
+ * Removes a value from sessionStorage.
  */
 export const removeSessionStorage = (key) => {
     if (isSessionStorageAvailable()) {

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

@@ -1,17 +1,13 @@
 import type { CustomCodeBlock } from '../../types';
 /**
- * A utility function for getting stored Custom Code based on id.
- * @param {string} id - The Custom Code block ID identifier. If not provided, all stored configs will be returned.
- * @returns {CustomCodeBlock | null} The stored configs, or null if not found.
+ * Gets stored Custom Code blocks by ID or returns all if no ID provided.
  */
 export declare const getCustomCode: (id?: string) => Promise<Array<CustomCodeBlock>>;
 /**
- * A utility function for setting a value in Custom Code.
- * @param {CustomCodeBlock} customCodeBlock - The custom code block to be stored.
- * @returns {Promise<void>} A promise that resolves when the operation is complete.
+ * Sets custom code blocks in the site.
  */
 export declare const setCustomCode: (customCodeBlock: Array<CustomCodeBlock>) => Promise<void>;
 /**
- * A utility function for removing Custom Code block.
+ * Removes a custom code block.
  */
 export declare const removeCustomCode: () => boolean;

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

@@ -1,9 +1,7 @@
 import { getLogger } from '../logger';
 const logger = getLogger('webflow-apps-ui-utils');
 /**
- * A utility function for getting stored Custom Code based on id.
- * @param {string} id - The Custom Code block ID identifier. If not provided, all stored configs will be returned.
- * @returns {CustomCodeBlock | null} The stored configs, or null if not found.
+ * Gets stored Custom Code blocks by ID or returns all if no ID provided.
  */
 export const getCustomCode = async (id) => {
     //TODO: update this when typings are available plus any other place we have disabled this warning.
@@ -19,9 +17,7 @@ export const getCustomCode = async (id) => {
     return [];
 };
 /**
- * A utility function for setting a value in Custom Code.
- * @param {CustomCodeBlock} customCodeBlock - The custom code block to be stored.
- * @returns {Promise<void>} A promise that resolves when the operation is complete.
+ * Sets custom code blocks in the site.
  */
 export const setCustomCode = async (customCodeBlock) => {
     try {
@@ -33,7 +29,7 @@ export const setCustomCode = async (customCodeBlock) => {
     }
 };
 /**
- * A utility function for removing Custom Code block.
+ * Removes a custom code block.
  */
 export const removeCustomCode = () => {
     //TODO: implement when available

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

@@ -1,5 +1,4 @@
 /**
- * Handle fullstop at the end of the message.
- * @param message
+ * Handles fullstop placement at the end of tooltip messages.
  */
 export declare const cleanupTooltipMessage: (message: string) => string;

package/dist/utils/helpers/cleanupTooltipMessage.js

@@ -1,6 +1,5 @@
 /**
- * Handle fullstop at the end of the message.
- * @param message
+ * Handles fullstop placement at the end of tooltip messages.
  */
 export const cleanupTooltipMessage = (message) => {
     if (!message?.trim())

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

@@ -1,7 +1,4 @@
 /**
- * Navigate to a new path. This uses the current hash from the router store.
- * It then users svelte-routing's navigate function to navigate to the new path.
- * @param path - The path to navigate to. Defaults to '/'.
- * @param state - The state to pass to the new path. Read more about state here: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
+ * Navigates to a new path using the router store hash.
  */
 export declare const goto: (path?: string, state?: Record<string, unknown>) => void;

package/dist/utils/helpers/goto.js

@@ -4,9 +4,7 @@ import { routerStore } from '../../stores';
 import { getLogger } from '../logger';
 const logger = getLogger('webflow-apps-ui-utils');
 /**
- * Normalize a URL path to ensure it starts with a single slash and is parsed correctly by the URL constructor.
- * @param path
- * @returns
+ * Normalizes a URL path to ensure proper formatting.
  */
 const normalizeUrlPath = (path, hash) => {
     const safePath = path.replace(/([^:]\/)\/+/g, '$1');
@@ -18,10 +16,7 @@ const normalizeUrlPath = (path, hash) => {
     return url;
 };
 /**
- * Navigate to a new path. This uses the current hash from the router store.
- * It then users svelte-routing's navigate function to navigate to the new path.
- * @param path - The path to navigate to. Defaults to '/'.
- * @param state - The state to pass to the new path. Read more about state here: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
+ * Navigates to a new path using the router store hash.
  */
 export const goto = (path = '/', state = {}) => {
     const { hash = '' } = get(routerStore);

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

@@ -1,5 +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,5 +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/noop.d.ts

@@ -1,4 +1,4 @@
 /**
- * It literally does nothing.
+ * No-operation function that does nothing.
  */
 export declare const noop: (value?: unknown) => unknown;

package/dist/utils/helpers/noop.js

@@ -1,5 +1,5 @@
 /**
- * It literally does nothing.
+ * No-operation function that does nothing.
  */
 export const noop = (value) => {
     // No operation.

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

@@ -1,27 +1,17 @@
 /**
- * Converts a string to a number, removing any invalid symbols like `$` or `,`.
- * @param value A string number.
- * @returns The valid number value.
+ * Converts a string to a number, removing invalid symbols.
  */
 export declare const normalizeNumber: (value: string) => number | undefined;
 /**
- * Parses a numeric Attribute string.
- * @param rawValue The raw string. Example: "20", "-25.3"...
- * @param fallback A value to fall back to when the parsed value is not valid.
+ * Parses a numeric attribute string with fallback support.
  */
 export declare function parseNumericAttribute(rawValue: string | number | null | undefined, fallback: number): number;
 export declare function parseNumericAttribute(rawValue: string | number | null | undefined, fallback?: number | null): number | null;
 /**
- * Calculates the amount of decimals that a float number has.
- * @param value A number.
+ * Calculates the number of decimal places in a float.
  */
 export declare const getDecimalPrecision: (value: number) => number;
 /**
- * Adjusts a numeric value to a step factor.
- * @param value The numeric value to adjust.
- * @param step The increment step.
- * @param precision The step's decimal precision. If not provided, it will be calculated.
- * @param minRange A minimum range value, used for offsetting.
- * @returns The adjusted value.
+ * Adjusts a numeric value to align with a step factor.
  */
 export declare const adjustValueToStep: (value: number, step: number, precision?: number, minRange?: number) => number;

package/dist/utils/helpers/numbers.js

@@ -1,7 +1,5 @@
 /**
- * Converts a string to a number, removing any invalid symbols like `$` or `,`.
- * @param value A string number.
- * @returns The valid number value.
+ * Converts a string to a number, removing invalid symbols.
  */
 export const normalizeNumber = (value) => {
     if (!value)
@@ -19,8 +17,7 @@ export function parseNumericAttribute(rawValue, fallback) {
     return null;
 }
 /**
- * Calculates the amount of decimals that a float number has.
- * @param value A number.
+ * Calculates the number of decimal places in a float.
  */
 export const getDecimalPrecision = (value) => {
     if (!isFinite(value))
@@ -34,21 +31,14 @@ export const getDecimalPrecision = (value) => {
     return precision;
 };
 /**
- * Ensures a decimal precision on a number.
- * @param value The number to handle.
- * @param precision The amount of decimals.
+ * Ensures a specific decimal precision on a number.
  */
 const setDecimalPrecision = (value, precision) => {
     const pow = Math.pow(10, precision);
     return Math.round(value * pow) / pow;
 };
 /**
- * Adjusts a numeric value to a step factor.
- * @param value The numeric value to adjust.
- * @param step The increment step.
- * @param precision The step's decimal precision. If not provided, it will be calculated.
- * @param minRange A minimum range value, used for offsetting.
- * @returns The adjusted value.
+ * Adjusts a numeric value to align with a step factor.
  */
 export const adjustValueToStep = (value, step, precision, minRange = 0) => {
     precision ??= getDecimalPrecision(step);

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

@@ -1,9 +1,7 @@
 /**
- * Converts an array of objects to a single string containing multiple module export statements.
- * @param exportsArray - Array of objects with variable names and objects.
- * @returns The combined module export string.
+ * Converts an array of objects to module export statements.
  */
 export declare const objectsToModuleExports: (exportsArray: Array<{
     moduleName: string;
-    data: object;
+    data: any;
 }>) => string;

package/dist/utils/helpers/objectsToModuleExports.js

@@ -1,7 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
- * Converts an array of objects to a single string containing multiple module export statements.
- * @param exportsArray - Array of objects with variable names and objects.
- * @returns The combined module export string.
+ * Converts an array of objects to module export statements.
  */
 export const objectsToModuleExports = (exportsArray) => {
     return exportsArray

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

@@ -1,15 +1,8 @@
 /**
- * Trims the given text in the middle and adds ellipsis if it exceeds the specified maximum length.
- *
- * @param text - The input text to be trimmed.
- * @param maxLength - The maximum length of the trimmed text. Default is 40.
- * @returns The trimmed text with ellipsis in the middle, if applicable.
+ * Trims text in the middle and adds ellipsis if it exceeds the maximum length.
  */
 export declare const trimText: (text: string, maxLength?: number) => string | undefined;
 /**
  * Trims whitespaces and extra spaces in a given text.
- *
- * @param text - The input text to be trimmed.
- * @returns The trimmed text with removed extra spaces.
  */
 export declare const trimExtraSpaces: (text: string) => string | undefined;

package/dist/utils/helpers/trimText.js

@@ -1,9 +1,5 @@
 /**
- * Trims the given text in the middle and adds ellipsis if it exceeds the specified maximum length.
- *
- * @param text - The input text to be trimmed.
- * @param maxLength - The maximum length of the trimmed text. Default is 40.
- * @returns The trimmed text with ellipsis in the middle, if applicable.
+ * Trims text in the middle and adds ellipsis if it exceeds the maximum length.
  */
 export const trimText = (text, maxLength = 40) => {
     if (!text)
@@ -18,9 +14,6 @@ export const trimText = (text, maxLength = 40) => {
 };
 /**
  * Trims whitespaces and extra spaces in a given text.
- *
- * @param text - The input text to be trimmed.
- * @returns The trimmed text with removed extra spaces.
  */
 export const trimExtraSpaces = (text) => {
     if (!text)

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

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

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

@@ -13,7 +13,5 @@ export interface Logger {
 }
 /**
  * Create a logger instance for the given context
- * @param context - The context/identity for this logger instance
- * @returns Logger instance with all log methods
  */
 export declare function getLogger(context: LoggerContext): Logger;

package/dist/utils/logger/index.js

@@ -2,8 +2,6 @@
 import { getFinsweetComponentsEnvironment } from '../api';
 /**
  * Create a logger instance for the given context
- * @param context - The context/identity for this logger instance
- * @returns Logger instance with all log methods
  */
 export function getLogger(context) {
     const createLogMethod = (level) => {

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

@@ -1,6 +1,4 @@
 /**
- * Retrieves all custom attributes from a Webflow element.
- * @param {AnyElement} params.element - The data object of the element.
- * @returns
+ * Gets all custom attributes from a Webflow element.
  */
 export declare const getAllWebflowElementAttributes: (element: AnyElement) => Promise<NamedValue[] | null>;

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

@@ -1,9 +1,7 @@
 import { getLogger } from '../../logger';
 const logger = getLogger('webflow-apps-ui-utils');
 /**
- * Retrieves all custom attributes from a Webflow element.
- * @param {AnyElement} params.element - The data object of the element.
- * @returns
+ * Gets all custom attributes from a Webflow element.
  */
 export const getAllWebflowElementAttributes = async (element) => {
     try {

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

@@ -1,8 +1,4 @@
 /**
- * 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 declare const getInstanceNamesFromObject: (obj: Record<string, any>, component: string, hasInstances?: boolean) => string[];