@hortonstudio/main 1.2.5 → 1.2.7

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

@@ -0,0 +1,60 @@
+# `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

@@ -0,0 +1,22 @@
+{
+  "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

@@ -0,0 +1,125 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,123 @@
+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

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

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,16 @@
+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

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

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

@@ -0,0 +1,58 @@
+# @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

@@ -0,0 +1,25 @@
+# `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)