@hortonstudio/main 1.2.11 → 1.2.13

package/attributes-master/packages/inject/README.md

@@ -1,60 +0,0 @@
-# `inject` Attribute
-
-Import components from any internal or external Webflow project.
-
-## Getting Started
-
-Please follow the documentation at [finsweet.com/attributes](https://www.finsweet.com/attributes) to learn how to use Attributes in your Webflow projects.
-
-## Accessing the API
-
-To learn how to access the API, please check the general [API Reference](../attributes/README.md#api-reference) documentation:
-
-```javascript
-window.FinsweetAttributes ||= [];
-window.FinsweetAttributes.push([
-  'inject',
-  (componentsData) => {
-    // Your code goes here.
-  },
-]);
-```
-
-The `result` object contains the [ComponentData](#the-componentdata-object) instances that are currently active on the page.
-
-## The `ComponentData` object
-
-```typescript
-type ComponentData = ComponentTargetData & {
-  component: HTMLElement; // The component element
-  target: HTMLElement; // The target element where the component is injected
-  shadowRoot?: ShadowRoot; // The shadow root of the component, if external CSS was injected
-  instance: string | null; // The instance ID of the component
-  source?: URL; // The source URL of the component
-  proxiedSource?: URL; // The proxied source URL of the component, if a proxy is defined
-  loadCSS: boolean; // Whether to load CSS for the component
-  autoRender: boolean; // Whether to automatically render the component
-  resetIx: boolean; // Whether to reset IX2 interactions after injecting the component
-  positions: number[]; // The positions of the component in the target element
-};
-```
-
-## How to programmatically render a component
-
-If the `fs-inject-render="false"` attribute is set, the component will not be rendered automatically. You can render it programmatically by accessing it via the `ComponentData` object.
-
-```javascript
-window.FinsweetAttributes ||= [];
-window.FinsweetAttributes.push([
-  'inject',
-  (componentsData) => {
-    const { component, target } = componentsData[0];
-
-    target.append(component);
-  },
-]);
-```
-
-## License
-
-[Apache 2.0](../../LICENSE.md)

package/attributes-master/packages/inject/package.json

@@ -1,22 +0,0 @@
-{
-  "name": "@finsweet/attributes-inject",
-  "version": "2.4.0",
-  "description": "Import components from any internal or external Webflow project.",
-  "private": true,
-  "type": "module",
-  "types": "src/index.ts",
-  "scripts": {
-    "lint": "eslint ./src && prettier --check ./src",
-    "lint:fix": "eslint ./src --fix && prettier --write ./src",
-    "check": "tsc --noEmit"
-  },
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts"
-    }
-  },
-  "dependencies": {
-    "@finsweet/attributes-utils": "workspace:*"
-  }
-}

package/attributes-master/packages/inject/src/actions/collect.ts

@@ -1,125 +0,0 @@
-import { extractCommaSeparatedValues, isNotEmpty, RICH_TEXT_BLOCK_CSS_CLASS } from '@finsweet/attributes-utils';
-
-import { getAttribute, getInstance, hasAttributeValue, queryAllElements } from '../utils/selectors';
-import type { ComponentTargetData } from '../utils/types';
-
-const RICHTEXT_COMPONENT_REGEX = /\{\{([^=}"]+)(?:="([^"]*)")?\}\}/;
-
-/**
- * Collects the component targets.
- */
-export const collectComponentTargetsData = () => {
-  const targetElements = queryAllElements('target');
-
-  const targetsData = targetElements.map((target) => collectComponentTargetData(target)).filter(isNotEmpty);
-
-  const richTextBlocks = document.querySelectorAll(`.${RICH_TEXT_BLOCK_CSS_CLASS}`);
-
-  for (const rtb of richTextBlocks) {
-    const children = [...rtb.querySelectorAll('*')];
-
-    for (const child of children) {
-      const match = child.innerHTML.match(RICHTEXT_COMPONENT_REGEX);
-      if (!match) continue;
-      if (targetsData.some((data) => data.target === child)) continue;
-
-      const targetData = collectComponentTargetData(child, match[1], match[2], true);
-      if (!targetData) continue;
-
-      targetsData.push(targetData);
-    }
-  }
-
-  return targetsData;
-};
-
-/**
- * Collects a component target data.
- * @param target
- * @param instance
- * @param rawSource
- * @returns The component target data.
- */
-const collectComponentTargetData = (
-  target: Element,
-  instance?: string | null,
-  rawSource?: string,
-  replace?: boolean
-): ComponentTargetData | undefined => {
-  instance ||= getInstance(target);
-  rawSource ||= getAttribute(target, 'source');
-
-  const proxy = getAttribute(null, 'proxy');
-  const rawPosition = getAttribute(target, 'position');
-  const noCSS = hasAttributeValue(target, 'css', 'false');
-  const autoRender = hasAttributeValue(target, 'render', 'true');
-  const resetIx = hasAttributeValue(target, 'resetix', 'true');
-
-  const positions = rawPosition ? extractCommaSeparatedValues(rawPosition).map(getPosition) : [0.5];
-
-  let source: URL | undefined;
-  let proxiedSource: URL | undefined;
-
-  if (rawSource) {
-    try {
-      source = new URL(rawSource, window.location.origin);
-
-      // If source is external, prefix it with the proxy if provided
-      if (source.origin !== window.location.origin && proxy) {
-        proxiedSource = new URL(proxy + source.href);
-      }
-    } catch {
-      // Source is invalid
-      return;
-    }
-  }
-
-  return { target, instance, source, proxiedSource, noCSS, autoRender, resetIx, positions, replace };
-};
-
-/**
- * @param rawPosition
- * @returns The position of a component inside the target, as a number between 0 and 1.
- */
-const getPosition = (rawPosition: string) => {
-  switch (rawPosition) {
-    case 'first':
-    case 'start': {
-      return 0;
-    }
-
-    case 'one-quarter': {
-      return 0.25;
-    }
-
-    case 'one-third': {
-      return 0.33;
-    }
-
-    case 'middle':
-    case 'center':
-    case 'half':
-    case 'one-half': {
-      return 0.5;
-    }
-
-    case 'two-thirds': {
-      return 0.66;
-    }
-
-    case 'three-quarters': {
-      return 0.75;
-    }
-
-    case 'end':
-    case 'last': {
-      return 1;
-    }
-
-    default: {
-      const position = parseFloat(rawPosition);
-
-      return isNaN(position) ? 0.5 : position / 100;
-    }
-  }
-};

package/attributes-master/packages/inject/src/actions/css.ts

@@ -1,27 +0,0 @@
-import { cloneNode } from '@finsweet/attributes-utils';
-
-/**
- * Attaches the page styles to a Shadow DOM.
- * @param shadowRoot The root of the Shadow DOM.
- * @param source The source's page document.
- * @returns A Promise that fulfills when all styles have been 100% loaded (with a 10s max timeout).
- */
-export const attachPageStyles = async (shadowRoot: ShadowRoot, source: Document) => {
-  const styleTags = [...source.querySelectorAll('style, link[rel="stylesheet"]')];
-
-  return Promise.all(
-    styleTags.map(
-      (styleTag) =>
-        new Promise((resolve) => {
-          const clone = cloneNode(styleTag);
-
-          // Load styles
-          clone.addEventListener('load', () => resolve(undefined), { once: true });
-          shadowRoot.append(clone);
-
-          // Max 10s timeout
-          window.setTimeout(() => resolve(undefined), 10000);
-        })
-    )
-  );
-};

package/attributes-master/packages/inject/src/actions/prefetch.ts

@@ -1,44 +0,0 @@
-import { fetchPageDocument } from '@finsweet/attributes-utils';
-
-import { getAttribute } from '../utils/selectors';
-import type { ComponentTargetData } from '../utils/types';
-
-const componentsPages: Map<string, Promise<Document | null>> = new Map();
-
-/**
- * Prefetches the pages of the components.
- * This is a hack to work around all components being initted in parallel and not hitting the cache.
- * The {@link fetchPageDocument} helper already caches the pages in memory and in an IndexedDB instance,
- * but when initting all components in parallel, it doesn't have enough time to cache them
- * before other components try to fetch the same resource.
- * So with this trick we filter and prefetch all the pages before initting the components.
- *
- * @param componentsData
- */
-export const prefetchComponentsPages = (componentTargetsData: ComponentTargetData[]) => {
-  const cache = getAttribute(null, 'cache') !== 'false';
-  const cacheKey = getAttribute(null, 'cachekey');
-  const cacheVersion = getAttribute(null, 'cacheversion') ?? 1;
-
-  for (const { proxiedSource, source } of componentTargetsData) {
-    const href = proxiedSource?.href || source?.href;
-    if (!href) continue;
-
-    if (componentsPages.has(href)) continue;
-
-    const promise = fetchPageDocument(href, {
-      cache,
-      cacheKey,
-      cacheExternal: cache,
-      cacheVersion,
-    });
-
-    componentsPages.set(href, promise);
-  }
-};
-
-/**
- * @returns A prefetched component page.
- * @param source The source URL of the component.
- */
-export const getComponentPage = (source: URL) => componentsPages.get(source.href);

package/attributes-master/packages/inject/src/factory.ts

@@ -1,123 +0,0 @@
-import { cloneNode, isNotEmpty, restartWebflow, RICH_TEXT_BLOCK_CSS_CLASS } from '@finsweet/attributes-utils';
-
-import { attachPageStyles } from './actions/css';
-import { getComponentPage } from './actions/prefetch';
-import { convertRelativeUrlsToAbsolute, isSameWebflowProject } from './utils/helpers';
-import { queryAllElements } from './utils/selectors';
-import type { ComponentData, ComponentTargetData } from './utils/types';
-
-/**
- * Inits the component targets.
- * @param componentTargetsData
- * @returns The components data.
- */
-export const initComponents = async (componentTargetsData: ComponentTargetData[]): Promise<ComponentData[]> => {
-  const componentsData = (await Promise.all(componentTargetsData.map(initComponent))).filter(isNotEmpty).flat();
-
-  const shouldResetIx = componentsData.some(({ resetIx }) => resetIx);
-  if (shouldResetIx) {
-    await restartWebflow();
-  }
-
-  return componentsData;
-};
-
-/**
- * Inits the component target.
- * @param componentTargetData
- * @returns The component data.
- */
-const initComponent = async (componentTargetData: ComponentTargetData): Promise<Array<ComponentData> | undefined> => {
-  const { target, instance, proxiedSource, source, noCSS, autoRender, positions } = componentTargetData;
-
-  const componentsSource = proxiedSource || source;
-
-  const page = componentsSource ? await getComponentPage(componentsSource) : document;
-  if (!page) return;
-
-  const components = [
-    ...queryAllElements('component', { instance, scope: page }),
-    ...queryAllElements('element', { instance, scope: page }),
-  ].map((component) => cloneNode(component));
-
-  if (!components.length) return;
-
-  const targetChildren = [...target.children];
-  const isSamePage = page === document;
-  const isSameSite = isSameWebflowProject(page);
-  const isRTB = target.classList.contains(RICH_TEXT_BLOCK_CSS_CLASS);
-
-  const componentsToInject = isRTB ? components : [components[0]];
-  if (!componentsToInject.length) return;
-
-  return Promise.all(
-    components
-      .map<ComponentData | undefined>((component, index) => {
-        let shadowRoot: ShadowRoot | undefined;
-        let shadowRootWrapper: HTMLElement | undefined;
-
-        const render = (element: HTMLElement) => {
-          // Handle CSS
-          if (!isSamePage && !noCSS) {
-            shadowRootWrapper = document.createElement('div');
-            shadowRootWrapper.style.display = 'contents';
-
-            shadowRoot = shadowRootWrapper.attachShadow({ mode: 'open' });
-
-            attachPageStyles(shadowRoot, page).then(() => {
-              shadowRoot!.append(element);
-            });
-          }
-
-          const toRender = shadowRootWrapper || element;
-
-          // Rich Text Block component injection
-          if (isRTB) {
-            const position = positions[index] ?? 0.5;
-
-            let targetPosition = Math.round(targetChildren.length * position);
-            let referenceNode = targetChildren[targetPosition];
-            let previousNode = targetChildren[targetPosition - 1];
-
-            while (previousNode && /^h[1-6]$/i.test(previousNode.tagName)) {
-              targetPosition -= 1;
-              referenceNode = targetChildren[targetPosition];
-              previousNode = targetChildren[targetPosition - 1];
-            }
-
-            if (targetPosition < 0) {
-              target.prepend(toRender);
-            } else {
-              target.insertBefore(toRender, referenceNode || null);
-            }
-          }
-
-          // Normal component injection
-          else {
-            if (componentTargetData.replace) {
-              target.replaceWith(toRender);
-            } else {
-              target.append(toRender);
-            }
-          }
-        };
-
-        // Convert relative URLs to absolute URLs
-        if (!isSameSite && source) {
-          convertRelativeUrlsToAbsolute(component, source);
-        }
-
-        // Render the component
-        if (autoRender) {
-          render(component);
-        }
-
-        return {
-          ...componentTargetData,
-          shadowRoot,
-          component,
-        };
-      })
-      .filter(isNotEmpty)
-  );
-};

package/attributes-master/packages/inject/src/index.ts

@@ -1,3 +0,0 @@
-export { version } from '../package.json';
-export { init } from './init';
-export { ELEMENTS, SETTINGS } from './utils/constants';

package/attributes-master/packages/inject/src/init.ts

@@ -1,22 +0,0 @@
-import { type FinsweetAttributeInit, waitWebflowReady } from '@finsweet/attributes-utils';
-
-import { collectComponentTargetsData } from './actions/collect';
-import { prefetchComponentsPages } from './actions/prefetch';
-import { initComponents } from './factory';
-
-/**
- * Inits the attribute.
- */
-export const init: FinsweetAttributeInit = async () => {
-  await waitWebflowReady();
-
-  const componentTargetsData = collectComponentTargetsData();
-
-  prefetchComponentsPages(componentTargetsData);
-
-  const componentsData = await initComponents(componentTargetsData);
-
-  return {
-    result: componentsData,
-  };
-};

package/attributes-master/packages/inject/src/utils/constants.ts

@@ -1,89 +0,0 @@
-import type { AttributeElements, AttributeSettings } from '@finsweet/attributes-utils';
-
-export const ELEMENTS = [
-  /**
-   * Defines a target where to load the component.
-   */
-  'target',
-
-  /**
-   * Defines a component to be loaded.
-   */
-  'component',
-  'element', // Alias for component
-] as const satisfies AttributeElements;
-
-export const SETTINGS = {
-  /**
-   * Defines a component source.
-   */
-  source: {
-    key: 'source',
-  },
-
-  /**
-   * Defines a specific position of the component inside the target.
-   */
-  position: { key: 'position' },
-
-  /**
-   * Defines if the CSS of the component should be imported when the component is external.
-   * If the component is external and this setting is set to true,
-   * the component will be loaded with the CSS inside a Shadow DOM.
-   * Defaults to `true`.
-   */
-  css: {
-    key: 'css',
-    values: ['false'],
-  },
-
-  /**
-   * Defines if the component should be automatically rendered after loading it.
-   * If set to false, the component will be loaded but not rendered,
-   * and it will be up to the developer to render it,
-   * accessing the node via `Webflow.push([`component`, (componentsData) => {}])`.
-   * Defaults to `true`.
-   */
-  render: {
-    key: 'render',
-    values: ['true'],
-    defaultValue: 'true',
-  },
-
-  /**
-   * Defines a CORS Proxy prefix.
-   */
-  proxy: {
-    key: 'proxy',
-  },
-
-  /**
-   * Defines if the component should be loaded from the cache.
-   * By default, the component will be loaded from the cache if available.
-   * If set to false, the component will never be loaded from the cache.
-   */
-  cache: {
-    key: 'cache',
-    values: ['false'],
-  },
-
-  /**
-   * Defines a cache key for the fetched external components.
-   */
-  cachekey: {
-    key: 'cachekey',
-  },
-
-  /**
-   * Defines a cache version for the fetched external components.
-   */
-  cacheversion: {
-    key: 'cacheversion',
-    isNumeric: true,
-  },
-
-  /**
-   * Defines if Webflow should be restarted after rendering the loaded components.
-   */
-  resetix: { key: 'resetix', values: ['true'] },
-} as const satisfies AttributeSettings;

package/attributes-master/packages/inject/src/utils/helpers.ts

@@ -1,36 +0,0 @@
-import { getSiteId } from '@finsweet/attributes-utils';
-
-/**
- * Checks if an external page is from the same Webflow project.
- * @param page
- * @returns True if the page is from the same Webflow project, false otherwise.
- */
-export const isSameWebflowProject = (page: Document) => {
-  const currentPageSiteId = getSiteId();
-  const fetchedPageSiteId = getSiteId(page);
-
-  if (!currentPageSiteId || !fetchedPageSiteId) return false;
-
-  return currentPageSiteId === fetchedPageSiteId;
-};
-
-/**
- * Converts all the relative URLs in a component to absolute URLs using the current window's origin.
- * @param component
- * @param source
- */
-export const convertRelativeUrlsToAbsolute = (component: HTMLElement, source: URL) => {
-  const links = component.querySelectorAll<HTMLAnchorElement>('a[href^="/"]');
-
-  for (const link of links) {
-    const href = link.getAttribute('href');
-    if (!href) continue;
-
-    try {
-      const url = new URL(href, source.origin);
-      link.href = url.toString();
-    } catch {
-      //
-    }
-  }
-};

package/attributes-master/packages/inject/src/utils/selectors.ts

@@ -1,9 +0,0 @@
-import { generateSelectors, INJECT_ATTRIBUTE } from '@finsweet/attributes-utils';
-
-import { ELEMENTS, SETTINGS } from './constants';
-
-export const { getAttribute, hasAttributeValue, getInstance, queryAllElements, queryElement } = generateSelectors(
-  INJECT_ATTRIBUTE,
-  ELEMENTS,
-  SETTINGS
-);

package/attributes-master/packages/inject/src/utils/types.ts

@@ -1,16 +0,0 @@
-export type ComponentTargetData = {
-  target: Element;
-  instance: string | null;
-  source?: URL;
-  proxiedSource?: URL;
-  noCSS: boolean;
-  autoRender: boolean;
-  resetIx: boolean;
-  positions: number[];
-  replace?: boolean;
-};
-
-export type ComponentData = ComponentTargetData & {
-  component: HTMLElement;
-  shadowRoot?: ShadowRoot;
-};

package/attributes-master/packages/inject/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "../../tsconfig.json"
-}

package/attributes-master/packages/inputactive/CHANGELOG.md

@@ -1,58 +0,0 @@
-# @finsweet/attributes-inputactive
-
-## 1.0.7
-
-### Patch Changes
-
-- Updated dependencies [2af0bad]
-  - @finsweet/attributes-utils@0.1.0
-
-## 1.0.6
-
-### Patch Changes
-
-- Updated dependencies [378d74d]
-  - @finsweet/attributes-utils@0.0.6
-
-## 1.0.5
-
-### Patch Changes
-
-- Updated dependencies [01973d8]
-  - @finsweet/attributes-utils@0.0.5
-
-## 1.0.4
-
-### Patch Changes
-
-- Updated dependencies [deef758]
-  - @finsweet/attributes-utils@0.0.4
-
-## 1.0.3
-
-### Patch Changes
-
-- Updated dependencies [d21cbca]
-  - @finsweet/attributes-utils@0.0.3
-
-## 1.0.2
-
-### Patch Changes
-
-- c7b544d: chore: updated dependencies
-- Updated dependencies [c7b544d]
-  - @finsweet/attributes-utils@0.0.2
-
-## 1.0.1
-
-### Patch Changes
-
-- b56e5e5: rename fsAttribute in places of usage to finsweetAttribute
-- Updated dependencies [b56e5e5]
-  - @finsweet/attributes-utils@0.0.1
-
-## 1.0.0
-
-### Major Changes
-
-- 489412f8: Created `fs-inputactive` Attribute.

package/attributes-master/packages/inputactive/README.md

@@ -1,25 +0,0 @@
-# `inputactive` Attribute
-
-Set custom active CSS classes for Webflow form elements.
-
-## Getting Started
-
-Please follow the documentation at [finsweet.com/attributes](https://www.finsweet.com/attributes) to learn how to use Attributes in your Webflow projects.
-
-## Accessing the API
-
-To learn how to access the API, please check the general [API Reference](../attributes/README.md#api-reference) documentation:
-
-```javascript
-window.FinsweetAttributes ||= [];
-window.FinsweetAttributes.push([
-  'inputactive',
-  () => {
-    // Your code goes here.
-  },
-]);
-```
-
-## License
-
-[Apache 2.0](../../LICENSE.md)