@hortonstudio/main 1.2.4 → 1.2.6

package/attributes-master/packages/attributes/bin/build.ts

@@ -0,0 +1,107 @@
+/* eslint-disable no-console */
+import * as esbuild from 'esbuild';
+import inlineWorkerPlugin from 'esbuild-plugin-inline-worker';
+import { readdirSync, unlinkSync } from 'fs';
+import http from 'http';
+import { join } from 'path';
+
+declare const process: {
+  env: {
+    NODE_ENV?: 'production' | 'development';
+    VERCEL_ENV?: 'production' | 'preview' | 'development';
+  };
+};
+
+// Config output
+const ENV = process.env.VERCEL_ENV || process.env.NODE_ENV || 'development';
+const DEV = ENV === 'development';
+const BUILD_DIRECTORY = './';
+
+// Config entrypoint files
+const ENTRY_POINTS = ['src/attributes.ts'];
+
+// Config dev serving
+const SERVE_PORT = 3001;
+const PROXY_PORT = 3000;
+
+const buildOptions: esbuild.BuildOptions = {
+  bundle: true,
+  entryPoints: ENTRY_POINTS,
+  minify: !DEV,
+  sourcemap: DEV,
+  target: 'esnext',
+  define: {
+    NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+    SERVE_PORT: JSON.stringify(SERVE_PORT),
+  },
+  plugins: [inlineWorkerPlugin()],
+};
+
+// Create contexts
+const context = await esbuild.context({
+  ...buildOptions,
+  outdir: BUILD_DIRECTORY,
+  chunkNames: '/dist/[name]-[hash]',
+  inject: DEV ? ['./bin/live-reload.js'] : undefined,
+  format: 'esm',
+  splitting: true,
+});
+
+// Remove old output files
+try {
+  const files = readdirSync(BUILD_DIRECTORY);
+  files.forEach((file) => {
+    if (file.startsWith('dist')) {
+      unlinkSync(join(BUILD_DIRECTORY, file));
+    }
+  });
+} catch {
+  //
+}
+
+// Watch and serve files in dev
+if (DEV) {
+  await context.watch();
+  const { hosts, port } = await context.serve({
+    servedir: '.',
+    port: SERVE_PORT,
+  });
+
+  /**
+   * Proxy esbuild requests to add CORS headers.
+   * This is required since {@link https://github.com/evanw/esbuild/blob/main/CHANGELOG.md#0250 esbuild@0.25.0},
+   * esbuild removed the built-in CORS headers for security reasons and now it's in userland to add them.
+   */
+  http
+    .createServer((req, res) => {
+      const { url, method, headers } = req;
+
+      const proxyReq = http.request(
+        {
+          port,
+          method,
+          headers,
+          path: url,
+          hostname: hosts[0],
+        },
+        (proxyRes) => {
+          res.setHeader('Access-Control-Allow-Origin', '*');
+          res.writeHead(proxyRes.statusCode!, proxyRes.headers);
+
+          proxyRes.pipe(res, { end: true });
+        }
+      );
+
+      req.pipe(proxyReq, { end: true });
+    })
+    .listen(PROXY_PORT);
+
+  console.log(`Serving:`);
+  console.log(`<script async type="module" src="http://localhost:${PROXY_PORT}/attributes.js"></script>`);
+}
+
+// Build files in prod
+else {
+  await context.rebuild();
+  context.dispose();
+}

package/attributes-master/packages/attributes/bin/live-reload.js

@@ -0,0 +1 @@
+new EventSource(`http://localhost:${SERVE_PORT}/esbuild`).addEventListener('change', () => location.reload());

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

@@ -0,0 +1,77 @@
+{
+  "name": "@finsweet/attributes",
+  "version": "2.4.10",
+  "description": "Finsweet Attributes V2.",
+  "homepage": "https://finsweet.com/attributes",
+  "type": "module",
+  "main": "attributes.js",
+  "files": [
+    "attributes.js",
+    "dist",
+    "schemas"
+  ],
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development tsx ./bin/build.ts",
+    "build": "cross-env NODE_ENV=production tsx ./bin/build.ts",
+    "lint": "eslint ./src && prettier --check ./src",
+    "lint:fix": "eslint ./src --fix && prettier --write ./src",
+    "check": "tsc --noEmit",
+    "test": "pnpm playwright test",
+    "test:headed": "pnpm playwright test --headed"
+  },
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/finsweet/attributes.git"
+  },
+  "keywords": [
+    "webflow",
+    "attributes",
+    "no code"
+  ],
+  "author": {
+    "name": "Finsweet",
+    "url": "https://finsweet.com/"
+  },
+  "bugs": {
+    "url": "https://finsweet.com/attributes/support"
+  },
+  "dependencies": {
+    "@finsweet/attributes-accordion": "workspace:*",
+    "@finsweet/attributes-autovideo": "workspace:*",
+    "@finsweet/attributes-codehighlight": "workspace:*",
+    "@finsweet/attributes-combobox": "workspace:*",
+    "@finsweet/attributes-copyclip": "workspace:*",
+    "@finsweet/attributes-displayvalues": "workspace:*",
+    "@finsweet/attributes-favcustom": "workspace:*",
+    "@finsweet/attributes-formsubmit": "workspace:*",
+    "@finsweet/attributes-inject": "workspace:*",
+    "@finsweet/attributes-inputactive": "workspace:*",
+    "@finsweet/attributes-inputcounter": "workspace:*",
+    "@finsweet/attributes-list": "workspace:*",
+    "@finsweet/attributes-mirrorclick": "workspace:*",
+    "@finsweet/attributes-mirrorinput": "workspace:*",
+    "@finsweet/attributes-modal": "workspace:*",
+    "@finsweet/attributes-numbercount": "workspace:*",
+    "@finsweet/attributes-queryparam": "workspace:*",
+    "@finsweet/attributes-rangeslider": "workspace:*",
+    "@finsweet/attributes-readtime": "workspace:*",
+    "@finsweet/attributes-removequery": "workspace:*",
+    "@finsweet/attributes-scrolldisable": "workspace:*",
+    "@finsweet/attributes-selectcustom": "workspace:*",
+    "@finsweet/attributes-sliderdots": "workspace:*",
+    "@finsweet/attributes-smartlightbox": "workspace:*",
+    "@finsweet/attributes-socialshare": "workspace:*",
+    "@finsweet/attributes-starrating": "workspace:*",
+    "@finsweet/attributes-toc": "workspace:*",
+    "@finsweet/attributes-utils": "workspace:*",
+    "@finsweet/attributes-videohls": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^22.15.12",
+    "cross-env": "^7.0.3",
+    "esbuild": "^0.25.4",
+    "esbuild-plugin-inline-worker": "^0.1.1",
+    "tsx": "^4.19.4"
+  }
+}

package/attributes-master/packages/attributes/playwright.config.ts

@@ -0,0 +1,89 @@
+import { defineConfig, devices } from '@playwright/test';
+
+declare const process: {
+  env: {
+    CI?: string;
+  };
+};
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: process.env.CI ? 'dot' : 'list',
+
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    /**
+     * Toggles bypassing page's Content-Security-Policy. Defaults to false.
+     */
+    bypassCSP: true,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        launchOptions: {
+          args: ['--disable-web-security'],
+        },
+      },
+    },
+
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm dev',
+    port: 3000,
+    reuseExistingServer: true,
+  },
+});

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

@@ -0,0 +1,153 @@
+import {
+  ATTRIBUTES,
+  type FinsweetAttributeKey,
+  type FinsweetAttributesCallback,
+  waitDOMReady,
+} from '@finsweet/attributes-utils';
+
+import { loadAttribute } from './load';
+
+const ATTRIBUTES_ATTRIBUTE_PREFIX = 'fs-attributes';
+const ATTRIBUTE_KEYS = new Set(Object.values(ATTRIBUTES));
+
+/**
+ * Inits the Finsweet Attributes library.
+ */
+const init = () => {
+  const { FinsweetAttributes } = window;
+
+  // Avoid initting the Attributes API more than once.
+  // If the API is already initted, just init the individual Attributes and escape.
+  if (FinsweetAttributes && !Array.isArray(FinsweetAttributes)) {
+    initAttributes();
+    return;
+  }
+
+  // Collect pre-existing callbacks
+  const callbacks = Array.isArray(FinsweetAttributes) ? (FinsweetAttributes as FinsweetAttributesCallback[]) : [];
+
+  // Collect library scripts
+  const scripts = [...document.querySelectorAll<HTMLScriptElement>(`script[type="module"][src="${import.meta.url}"]`)];
+
+  // Init Attributes object
+  window.FinsweetAttributes = {
+    scripts,
+    modules: {},
+    process: new Set<FinsweetAttributeKey>(),
+
+    load: initAttribute,
+
+    push(...args) {
+      for (const [key, callback] of args) {
+        this.modules[key]?.loading?.then(callback);
+      }
+    },
+
+    destroy() {
+      for (const solution in this.modules) {
+        this.modules[solution as keyof typeof this.modules]?.destroy?.();
+      }
+    },
+  };
+
+  // Init Attributes
+  initAttributes();
+
+  // Run pre-existing callbacks
+  window.FinsweetAttributes.push(...callbacks);
+};
+
+/**
+ * Inits all Attributes that are defined in the current script
+ * or in the DOM if fs-attributes-auto is enabled.
+ */
+const initAttributes = () => {
+  let autoLoad = false;
+
+  for (const script of window.FinsweetAttributes.scripts) {
+    autoLoad ||= script.getAttribute(`${ATTRIBUTES_ATTRIBUTE_PREFIX}-auto`) === 'true';
+
+    for (const key of ATTRIBUTE_KEYS) {
+      const isDefined = script.hasAttribute(`fs-${key}`);
+      if (!isDefined) continue;
+
+      initAttribute(key);
+    }
+  }
+
+  if (!autoLoad) return;
+
+  waitDOMReady().then(() => {
+    const usedAttributes = new Set<FinsweetAttributeKey>();
+    const allElements = document.querySelectorAll('*');
+
+    for (const element of allElements) {
+      for (const name of element.getAttributeNames()) {
+        const fsMatch = name.match(/^fs-([^-]+)/);
+        const key = fsMatch?.[1] as FinsweetAttributeKey | undefined;
+
+        if (key && ATTRIBUTE_KEYS.has(key)) {
+          usedAttributes.add(key);
+        }
+      }
+    }
+
+    for (const attribute of usedAttributes) {
+      initAttribute(attribute);
+    }
+  });
+};
+
+/**
+ * Inits an individual Attribute.
+ * @param key
+ * @param script The <script> tag that defines the Attribute.
+ *
+ * @returns A Promise that resolves once the Attribute has loaded and executed.
+ */
+const initAttribute = async (key: FinsweetAttributeKey) => {
+  // Ensure that the attribute is only initted once
+  if (window.FinsweetAttributes.process.has(key)) return;
+
+  window.FinsweetAttributes.process.add(key);
+
+  // Init controls
+  const controls = (window.FinsweetAttributes.modules[key] ||= {});
+
+  controls.loading = new Promise((resolve) => {
+    controls.resolve = (value) => {
+      resolve(value);
+      delete controls.resolve;
+    };
+  });
+
+  // Load Attribute package
+  try {
+    const { init, version } = await loadAttribute(key);
+
+    // Init attribute
+    const { result, destroy } = (await init()) || {};
+
+    // Finalize controls
+    controls.version = version;
+
+    controls.destroy = () => {
+      destroy?.();
+      window.FinsweetAttributes.process.delete(key);
+    };
+
+    controls.restart = () => {
+      controls.destroy?.();
+      return window.FinsweetAttributes.load(key);
+    };
+
+    controls.resolve?.(result);
+
+    return result;
+  } catch (err) {
+    console.error(err);
+  }
+};
+
+// Init
+init();

package/attributes-master/packages/attributes/src/load.ts

@@ -0,0 +1,125 @@
+import { type FinsweetAttributeKey } from '@finsweet/attributes-utils';
+
+/**
+ * Dynamically loads an attribute package.
+ * @param key
+ */
+export const loadAttribute = async (key: FinsweetAttributeKey) => {
+  switch (key) {
+    case 'accordion': {
+      return import('@finsweet/attributes-accordion');
+    }
+
+    case 'autovideo': {
+      return import('@finsweet/attributes-autovideo');
+    }
+
+    case 'codehighlight': {
+      return import('@finsweet/attributes-codehighlight');
+    }
+
+    case 'combobox': {
+      return import('@finsweet/attributes-combobox');
+    }
+
+    case 'inject': {
+      return import('@finsweet/attributes-inject');
+    }
+
+    case 'copyclip': {
+      return import('@finsweet/attributes-copyclip');
+    }
+
+    case 'displayvalues': {
+      return import('@finsweet/attributes-displayvalues');
+    }
+
+    case 'favcustom': {
+      return import('@finsweet/attributes-favcustom');
+    }
+
+    case 'formsubmit': {
+      return import('@finsweet/attributes-formsubmit');
+    }
+
+    case 'inputactive': {
+      return import('@finsweet/attributes-inputactive');
+    }
+
+    case 'inputcounter': {
+      return import('@finsweet/attributes-inputcounter');
+    }
+
+    case 'list': {
+      return import('@finsweet/attributes-list');
+    }
+
+    case 'mirrorclick': {
+      return import('@finsweet/attributes-mirrorclick');
+    }
+
+    case 'mirrorinput': {
+      return import('@finsweet/attributes-mirrorinput');
+    }
+
+    case 'modal': {
+      return import('@finsweet/attributes-modal');
+    }
+
+    case 'numbercount': {
+      return import('@finsweet/attributes-numbercount');
+    }
+
+    case 'queryparam': {
+      return import('@finsweet/attributes-queryparam');
+    }
+
+    case 'rangeslider': {
+      return import('@finsweet/attributes-rangeslider');
+    }
+
+    case 'readtime': {
+      return import('@finsweet/attributes-readtime');
+    }
+
+    case 'removequery': {
+      return import('@finsweet/attributes-removequery');
+    }
+
+    case 'scrolldisable': {
+      return import('@finsweet/attributes-scrolldisable');
+    }
+
+    case 'selectcustom': {
+      return import('@finsweet/attributes-selectcustom');
+    }
+
+    case 'sliderdots': {
+      return import('@finsweet/attributes-sliderdots');
+    }
+
+    case 'smartlightbox': {
+      return import('@finsweet/attributes-smartlightbox');
+    }
+
+    case 'socialshare': {
+      return import('@finsweet/attributes-socialshare');
+    }
+
+    case 'starrating': {
+      return import('@finsweet/attributes-starrating');
+    }
+
+    case 'toc': {
+      return import('@finsweet/attributes-toc');
+    }
+
+    case 'videohls': {
+      return import('@finsweet/attributes-videohls');
+    }
+
+    default: {
+      throw `Finsweet Attribute "${key}" is not supported.`;
+    }
+  }
+};

package/attributes-master/packages/attributes/tests/accordion.spec.ts

@@ -0,0 +1,137 @@
+import { expect, test } from '@playwright/test';
+
+import { waitAttributeLoaded } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://fs-attributes.webflow.io/accordion');
+});
+
+const DEFAULT_ACTIVE_CLASS_REGEX = /is-active-accordion/;
+
+test.describe('accordion', () => {
+  test('Accordions open/close and set the active CSS class correctly', async ({ page }) => {
+    await waitAttributeLoaded(page, 'accordion');
+
+    const header11 = page.getByTestId('header-1-1');
+    const content11 = page.getByTestId('content-1-1');
+
+    // Initial state + active CSS class works
+    await expect(header11).toHaveClass(DEFAULT_ACTIVE_CLASS_REGEX);
+    await expect(content11).toBeVisible();
+
+    // Trigger works
+    await header11.click();
+    await expect(header11).not.toHaveClass(DEFAULT_ACTIVE_CLASS_REGEX);
+    await expect(content11).not.toBeVisible();
+  });
+
+  test('fs-accordion-single', async ({ page }) => {
+    await waitAttributeLoaded(page, 'accordion');
+
+    const header22 = page.getByTestId('header-2-2');
+    const content21 = page.getByTestId('content-2-1');
+    const content22 = page.getByTestId('content-2-2');
+    const content23 = page.getByTestId('content-2-3');
+
+    // Single works
+    await expect(content21).toBeVisible();
+    await expect(content22).not.toBeVisible();
+    await expect(content23).not.toBeVisible();
+
+    await header22.click();
+    await expect(content21).not.toBeVisible();
+    await expect(content22).toBeVisible();
+    await expect(content23).not.toBeVisible();
+  });
+
+  test('fs-accordion-initial="none"', async ({ page }) => {
+    await waitAttributeLoaded(page, 'accordion');
+
+    const content31 = page.getByTestId('content-3-1');
+    const content32 = page.getByTestId('content-3-2');
+    const content33 = page.getByTestId('content-3-3');
+
+    // Initial none works
+    await expect(content31).not.toBeVisible();
+    await expect(content32).not.toBeVisible();
+    await expect(content33).not.toBeVisible();
+  });
+
+  test('fs-accordion-initial="{NUMERIC_INDEX}"', async ({ page }) => {
+    await waitAttributeLoaded(page, 'accordion');
+
+    const content41 = page.getByTestId('content-4-1');
+    const content42 = page.getByTestId('content-4-2');
+    const content43 = page.getByTestId('content-4-3');
+
+    // Initial numeric works
+    await expect(content41).toBeVisible();
+    await expect(content42).not.toBeVisible();
+    await expect(content43).toBeVisible();
+  });
+
+  test('fs-accordion-initial="{NUMERIC_INDEX}" + fs-accordion-single', async ({ page }) => {
+    await waitAttributeLoaded(page, 'accordion');
+
+    const content52 = page.getByTestId('content-5-2');
+    const content53 = page.getByTestId('content-5-3');
+
+    // Initial numeric + single works
+    await expect(content52).toBeVisible();
+    await expect(content53).not.toBeVisible();
+  });
+
+  test('fs-accordion-active="{ACTIVE_CSS_CLASS}"', async ({ page }) => {
+    await waitAttributeLoaded(page, 'accordion');
+
+    const header61 = page.getByTestId('header-6-1');
+
+    // Custom active classes work
+    await expect(header61).toHaveClass(/is-cool-header/);
+    await header61.click();
+    await expect(header61).not.toHaveClass(/is-cool-header/);
+  });
+
+  test('fs-accordion + fs-list', async ({ page }) => {
+    await waitAttributeLoaded(page, 'accordion');
+
+    const header71 = page.getByTestId('header-7-1');
+    const content71 = page.getByTestId('content-7-1');
+
+    // Waits for list render-all
+    const lastHeader = header71.nth(4);
+    const lastContent = content71.nth(4);
+
+    await expect(lastHeader).toHaveClass(DEFAULT_ACTIVE_CLASS_REGEX);
+    await expect(lastContent).toBeVisible();
+
+    await lastHeader.click();
+    await expect(lastHeader).not.toHaveClass(DEFAULT_ACTIVE_CLASS_REGEX);
+    await expect(lastContent).not.toBeVisible();
+  });
+
+  test('Accordions initially hidden are forced to be closed', async ({ page }) => {
+    await waitAttributeLoaded(page, 'accordion');
+
+    const header81 = page.getByTestId('header-8-1');
+    const header82 = page.getByTestId('header-8-2');
+    const content81 = page.getByTestId('content-8-1');
+    const content82 = page.getByTestId('content-8-2');
+
+    const tab2Link = page.getByTestId('tab-2-link');
+
+    // Accordion 1 is open and visible
+    await expect(header81).toBeVisible();
+    await expect(content81).toBeVisible();
+
+    // Accordion 2 is hidden
+    await expect(header82).not.toBeVisible();
+    await expect(content82).not.toBeVisible();
+
+    await tab2Link.click();
+
+    // Content 2 is closed
+    await expect(header82).toBeVisible();
+    await expect(content82).not.toBeVisible();
+  });
+});