@netlify/spark-ui 1.27.0-alpha.1 → 1.27.0-alpha.2

package/dist/components/articleCopyActions.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Wire up the "Copy URL" / "Copy page" buttons rendered by ArticleCopyActions.astro.
+ *
+ * This runs on every `astro:page-load` (initial load *and* every client-side
+ * navigation via `<ClientRouter />`), so the buttons keep working after routing
+ * to another article/post. Each wrapper is guarded so re-initialising the same
+ * DOM node never attaches duplicate listeners.
+ */
+export declare function initArticleCopyActions(root?: ParentNode): void;

package/dist/components/articleCopyActions.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.27.0-alpha.1",
+  "version": "1.27.0-alpha.2",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -15,6 +15,7 @@
     "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx,.astro --fix",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,astro,json,css,md,mdx}\" --ignore-path packages/styles/tokens.css",
     "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,astro,json,css,md,mdx}\" --ignore-path packages/styles/tokens.css",
+    "test": "vitest run",
     "prepublishOnly": "npm run build:vite"
   },
   "files": [
@@ -61,6 +62,7 @@
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-astro": "^1.3.1",
     "glob": "^11.0.1",
+    "jsdom": "^30.0.0",
     "preact": "^10.26.4",
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",
@@ -70,7 +72,8 @@
     "vite": "^6.2.5",
     "vite-plugin-dts": "^4.5.3",
     "vite-plugin-lib-inject-css": "^2.2.1",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "preact": "^10.26.4"

package/packages/components/ArticleCopyActions.astro

@@ -114,31 +114,9 @@ const copyContent = title ? `# ${title}\n\n${content}` : content;
 </style>
 
 <script>
-  const COPIED_RESET_DELAY = 1500;
+  import { initArticleCopyActions } from './articleCopyActions';
 
-  document.querySelectorAll<HTMLElement>('.copy-actions').forEach(wrapper => {
-    const source = wrapper.nextElementSibling as HTMLElement | null;
-    const copiedLabel = wrapper.dataset.copiedLabel ?? 'Copied!';
-
-    wrapper.querySelectorAll<HTMLButtonElement>('.copy-actions-action').forEach(btn => {
-      const label = btn.querySelector<HTMLElement>('span');
-      const originalText = label?.textContent;
-
-      btn.addEventListener('click', async () => {
-        const value =
-          btn.getAttribute('data-copy') === 'url'
-            ? btn.getAttribute('data-value')
-            : source?.textContent;
-
-        if (!value || !label) return;
-
-        await navigator.clipboard.writeText(value);
-
-        label.textContent = copiedLabel;
-        setTimeout(() => {
-          label.textContent = originalText ?? '';
-        }, COPIED_RESET_DELAY);
-      });
-    });
-  });
+  // `astro:page-load` fires on the initial load *and* after every client-side
+  // navigation (`<ClientRouter />`).
+  document.addEventListener('astro:page-load', () => initArticleCopyActions());
 </script>

package/packages/components/articleCopyActions.test.ts

@@ -0,0 +1,143 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { initArticleCopyActions } from './articleCopyActions';
+
+const ARTICLE_URL = 'https://www.netlify.com/blog/some-post/';
+const MARKDOWN = '# Some post\n\nBody content.';
+
+function renderCopyActions({ url = ARTICLE_URL, markdown = MARKDOWN, copiedLabel = 'Copied!' } = {}) {
+  document.body.innerHTML = `
+    <div class="copy-actions" data-copied-label="${copiedLabel}">
+      <button
+        type="button"
+        class="copy-actions-action copy-actions-copy-url"
+        data-copy="url"
+        data-value="${url}"
+      >
+        <span>Copy URL</span>
+      </button>
+      <button
+        type="button"
+        class="copy-actions-action copy-actions-copy-content"
+        data-copy="page"
+      >
+        <span>Copy page</span>
+      </button>
+    </div>
+    <script type="text/plain" data-copy-actions-source>${markdown}</script>
+  `;
+
+  return {
+    wrapper: document.querySelector<HTMLElement>('.copy-actions')!,
+    copyUrlBtn: document.querySelector<HTMLButtonElement>('.copy-actions-copy-url')!,
+    copyPageBtn: document.querySelector<HTMLButtonElement>('.copy-actions-copy-content')!,
+    urlLabel: document.querySelector<HTMLElement>('.copy-actions-copy-url span')!,
+    pageLabel: document.querySelector<HTMLElement>('.copy-actions-copy-content span')!,
+  };
+}
+
+describe('initArticleCopyActions', () => {
+  let writeText: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText },
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+    document.body.innerHTML = '';
+  });
+
+  it('copies the article URL and shows a temporary confirmation', async () => {
+    const { copyUrlBtn, urlLabel } = renderCopyActions();
+    initArticleCopyActions();
+
+    copyUrlBtn.click();
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith(ARTICLE_URL));
+    expect(urlLabel.textContent).toBe('Copied!');
+  });
+
+  it('copies the markdown source for the "Copy page" button', async () => {
+    const { copyPageBtn, pageLabel } = renderCopyActions();
+    initArticleCopyActions();
+
+    copyPageBtn.click();
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith(MARKDOWN));
+    expect(pageLabel.textContent).toBe('Copied!');
+  });
+
+  it('resets the label back to its original text after the delay', async () => {
+    const { copyUrlBtn, urlLabel } = renderCopyActions();
+    initArticleCopyActions();
+
+    copyUrlBtn.click();
+    await vi.waitFor(() => expect(urlLabel.textContent).toBe('Copied!'));
+
+    vi.advanceTimersByTime(1500);
+    expect(urlLabel.textContent).toBe('Copy URL');
+  });
+
+  it('uses a custom copied label when data-copied-label is set', async () => {
+    const { copyUrlBtn, urlLabel } = renderCopyActions({ copiedLabel: 'Done!' });
+    initArticleCopyActions();
+
+    copyUrlBtn.click();
+    await vi.waitFor(() => expect(urlLabel.textContent).toBe('Done!'));
+  });
+
+  it('does not attach duplicate listeners when initialised twice on the same DOM', async () => {
+    const { copyUrlBtn } = renderCopyActions();
+    initArticleCopyActions();
+    initArticleCopyActions(); // e.g. a spurious re-fire
+
+    copyUrlBtn.click();
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledTimes(1));
+  });
+
+  it('re-binds after a client-side navigation swaps in fresh buttons', async () => {
+    // Simulate the ClientRouter bug: first page loads and works...
+    const first = renderCopyActions({ url: 'https://example.com/first/' });
+    initArticleCopyActions();
+    first.copyUrlBtn.click();
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith('https://example.com/first/'));
+
+    // ...then a navigation replaces the DOM with a new post's buttons.
+    const second = renderCopyActions({ url: 'https://example.com/second/' });
+    // Re-running on `astro:page-load` is what makes the new buttons work.
+    initArticleCopyActions();
+
+    second.copyUrlBtn.click();
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith('https://example.com/second/'));
+  });
+
+  it('scopes the markdown source lookup to each wrapper, not a global selector', async () => {
+    document.body.innerHTML = `
+      <div class="copy-actions" data-copied-label="Copied!">
+        <button type="button" class="copy-actions-action copy-actions-copy-content" data-copy="page">
+          <span>Copy page</span>
+        </button>
+      </div>
+      <script type="text/plain" data-copy-actions-source>First post markdown</script>
+      <div class="copy-actions" data-copied-label="Copied!">
+        <button type="button" class="copy-actions-action copy-actions-copy-content" data-copy="page">
+          <span>Copy page</span>
+        </button>
+      </div>
+      <script type="text/plain" data-copy-actions-source>Second post markdown</script>
+    `;
+    initArticleCopyActions();
+
+    const buttons = document.querySelectorAll<HTMLButtonElement>('.copy-actions-copy-content');
+    buttons[1].click();
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith('Second post markdown'));
+
+    buttons[0].click();
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith('First post markdown'));
+  });
+});

package/packages/components/articleCopyActions.ts

@@ -0,0 +1,41 @@
+const COPIED_LABEL_FALLBACK = 'Copied!';
+const RESET_DELAY_MS = 1500;
+
+/**
+ * Wire up the "Copy URL" / "Copy page" buttons rendered by ArticleCopyActions.astro.
+ *
+ * This runs on every `astro:page-load` (initial load *and* every client-side
+ * navigation via `<ClientRouter />`), so the buttons keep working after routing
+ * to another article/post. Each wrapper is guarded so re-initialising the same
+ * DOM node never attaches duplicate listeners.
+ */
+export function initArticleCopyActions(root: ParentNode = document): void {
+  root.querySelectorAll<HTMLElement>('.copy-actions').forEach(wrapper => {
+    if (wrapper.dataset.copyBound === 'true') return;
+    wrapper.dataset.copyBound = 'true';
+
+    const source = wrapper.nextElementSibling as HTMLElement | null;
+    const copiedLabel = wrapper.dataset.copiedLabel ?? COPIED_LABEL_FALLBACK;
+
+    wrapper.querySelectorAll<HTMLButtonElement>('.copy-actions-action').forEach(btn => {
+      const label = btn.querySelector<HTMLElement>('span');
+      const originalText = label?.textContent;
+
+      btn.addEventListener('click', async () => {
+        const value =
+          btn.getAttribute('data-copy') === 'url'
+            ? btn.getAttribute('data-value')
+            : source?.textContent;
+
+        if (!value || !label) return;
+
+        await navigator.clipboard.writeText(value);
+
+        label.textContent = copiedLabel;
+        setTimeout(() => {
+          label.textContent = originalText ?? '';
+        }, RESET_DELAY_MS);
+      });
+    });
+  });
+}