@netlify/spark-ui 1.31.0-alpha.3 → 1.31.0-alpha.4

package/packages/components/preact/DropZone/DropZone.test.ts

@@ -0,0 +1,71 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { h, render } from 'preact';
+import DropZone from './DropZone';
+
+function mountZone(props: Record<string, unknown> = {}) {
+  const events: Array<{ event: string; props: Record<string, unknown> | undefined }> = [];
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  render(
+    h(DropZone as never, {
+      onTrack: (event: string, properties?: Record<string, unknown>) =>
+        void events.push({ event, props: properties }),
+      ...props,
+    }),
+    container
+  );
+  const zone = container.querySelector<HTMLElement>('.n-dropzone')!;
+  return {
+    events,
+    zone,
+    unmount: () => {
+      render(null, container);
+      container.remove();
+    },
+  };
+}
+
+afterEach(() => vi.restoreAllMocks());
+
+describe('DropZone', () => {
+  it('opens the picker from the keyboard and tracks it as such', () => {
+    const { zone, events, unmount } = mountZone();
+    zone.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    expect(events).toEqual([{ event: 'dropzone_browse_opened', props: { method: 'keyboard' } }]);
+    unmount();
+  });
+
+  it("opens the picker from a click on the zone's own empty area", () => {
+    const { zone, events, unmount } = mountZone();
+    zone.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    expect(events).toEqual([{ event: 'dropzone_browse_opened', props: { method: 'click' } }]);
+    unmount();
+  });
+
+  it('stamps dropzone_id onto every event when analyticsId is set — and only then', () => {
+    const tagged = mountZone({ analyticsId: 'homepage_hero' });
+    tagged.zone.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
+    expect(tagged.events[0].props).toEqual({ dropzone_id: 'homepage_hero', method: 'keyboard' });
+    tagged.unmount();
+
+    const untagged = mountZone();
+    untagged.zone.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
+    expect(untagged.events[0].props).not.toHaveProperty('dropzone_id');
+    untagged.unmount();
+  });
+
+  it('mirrors the deploy status on data-state for bare-mode consumers', () => {
+    const { zone, unmount } = mountZone({ showStatus: false });
+    // Idle at rest — the attribute CSS keys off (`[data-state='error']` etc.).
+    expect(zone.getAttribute('data-state')).toBe('idle');
+    expect(zone.className).toContain('is-bare');
+    unmount();
+  });
+
+  it('renders no overlay until there is something to show', () => {
+    const { zone, unmount } = mountZone();
+    expect(zone.querySelector('.n-dropzone-overlay')).toBeNull();
+    unmount();
+  });
+});

package/packages/components/preact/DropZone/DropZone.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
 import type { ComponentChildren } from 'preact';
 import {
+  DROPZONE_EVENTS,
   getFileTypes,
   readDataTransfer,
   readFileList,
   type BuildClient,
   type BuildDetection,
   type DropClient,
-} from './drop-core';
+} from '../../../drop-core';
 import {
   useDropDeploy,
   type DeployedBuild,
@@ -123,6 +124,22 @@ interface Props {
    * redirects. The static drop path is unaffected either way.
    */
   onBuildRequired?: (info: BuildDetection) => void;
+  /**
+   * Called instead of the `buildSignupUrl` redirect when a build-required drop
+   * can't be built here (no session). By this point the drop has been stashed
+   * on this origin (`stashed` says whether that succeeded) — own the hand-off
+   * however fits your auth flow, e.g. open a signup popup that keeps the
+   * visitor on the page. Once they're back authenticated, a remount of the
+   * zone deploys the stash automatically.
+   */
+  onBuildSignupHandoff?: (info: { stashed: boolean; detection: BuildDetection }) => void;
+  /**
+   * Deploy a previously stashed build drop automatically when the zone mounts
+   * with an authenticated visitor (default `true`). The stash is written when a
+   * logged-out build drop is handed to signup; see
+   * [Signup hand-off and auto-resume](#signup-hand-off-and-auto-resume).
+   */
+  resumeStashedBuilds?: boolean;
   /** Called once the deploy is live. */
   onDeploy?: (result: DeployedSite) => void;
   /**
@@ -192,6 +209,8 @@ export default function DropZone({
   buildDeployUrl = defaultBuildDeployUrl,
   waitForBuild,
   onBuildRequired,
+  onBuildSignupHandoff,
+  resumeStashedBuilds,
   onDeploy,
   onBuildDeploy,
   onError,
@@ -219,6 +238,8 @@ export default function DropZone({
     buildDeployUrl,
     waitForBuild,
     onBuildRequired,
+    onBuildSignupHandoff,
+    resumeStashedBuilds,
     onDeploy,
     onBuildDeploy,
     onError,
@@ -229,7 +250,7 @@ export default function DropZone({
 
   const inputRef = useRef<HTMLInputElement>(null);
   const openPicker = (method: 'keyboard' | 'click') => {
-    track('dropzone_browse_opened', { method });
+    track(DROPZONE_EVENTS.BROWSE_OPENED, { method });
     inputRef.current?.click();
   };
 

package/packages/components/preact/DropZone/index.tsx

@@ -1,6 +1,7 @@
 export { default as DropZone } from './DropZone';
 export {
   AnonymousDropClient,
+  DROPZONE_EVENTS,
   AuthenticatedBuildClient,
   AuthenticatedDropClient,
   BuildCreateError,
@@ -18,9 +19,13 @@ export {
   SiteCreateError,
   UnsupportedDropError,
   zipFiles,
-} from './drop-core';
+} from '../../../drop-core';
 export type {
   AuthenticatedBuildClientConfig,
+  DropMethod,
+  DropZoneEventName,
+  DropZoneEventProperties,
+  TrackFn,
   AuthenticatedDropClientConfig,
   BuildClient,
   BuildDeployOptions,
@@ -39,5 +44,11 @@ export type {
   ProcessedFile,
   ZipOptions,
   ZipResult,
-} from './drop-core';
-export type { DeployedBuild, DeployedSite, DeployError, DeployStatus } from './useDropDeploy';
+} from '../../../drop-core';
+export type {
+  DeployedBuild,
+  DeployedSite,
+  DeployError,
+  DeploySource,
+  DeployStatus,
+} from './useDropDeploy';

package/packages/components/preact/DropZone/useDropDeploy.test.ts

@@ -0,0 +1,376 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { h, render } from 'preact';
+import { useDropDeploy } from './useDropDeploy';
+import {
+  DROPZONE_EVENTS,
+  NotAuthenticatedError,
+  type BuildClient,
+  type DropClient,
+  type ProcessedFile,
+} from '../../../drop-core';
+
+// The stash is unit-tested in drop-core/buildStash.test.ts; here it is mocked
+// so the hook's orchestration (when it saves, loads, and clears) is what's
+// under test — and so no IndexedDB shim is needed.
+vi.mock('../../../drop-core', async importOriginal => {
+  const original = await importOriginal<typeof import('../../../drop-core')>();
+  return {
+    ...original,
+    saveDropStash: vi.fn(async () => true),
+    loadDropStash: vi.fn(async () => null),
+    clearDropStash: vi.fn(async () => {}),
+    hasDropStashMarker: vi.fn(() => false),
+  };
+});
+import { clearDropStash, hasDropStashMarker, loadDropStash, saveDropStash } from '../../../drop-core';
+
+const encoder = new TextEncoder();
+const file = (path: string, contents: string): ProcessedFile => {
+  const content = encoder.encode(contents).buffer as ArrayBuffer;
+  return { path, content, size: content.byteLength, sha: 'test-sha', name: path.split('/').pop()! };
+};
+
+const staticFiles = () => [file('/index.html', '<h1>hi</h1>'), file('/style.css', 'body{}')];
+const buildFiles = () => [
+  file('/package.json', '{"scripts":{"build":"vite build"}}'),
+  file('/index.html', '<h1>hi</h1>'),
+];
+
+function makeAnonymousClient(log: string[]): DropClient {
+  return {
+    getToken: async () => (log.push('anon:getToken'), 'anon-token'),
+    createDeploy: async () => (
+      log.push('anon:createDeploy'),
+      { id: 'anon-site-id', deploy_id: 'anon-deploy-id', subdomain: 'anon-sub', required: [] }
+    ),
+    uploadFile: async () => void log.push('anon:uploadFile'),
+    waitUntilReady: async () => void log.push('anon:wait'),
+  };
+}
+
+function makeAuthedDropClient(log: string[], behavior: 'ok' | 'no-auth' | 'server-error'): DropClient {
+  return {
+    getToken: async () => {
+      log.push('authed:getToken');
+      if (behavior === 'no-auth') throw new NotAuthenticatedError();
+      return 'bearer-token';
+    },
+    createDeploy: async () => {
+      log.push('authed:createDeploy');
+      if (behavior === 'server-error')
+        throw Object.assign(new Error('deploy create failed: 500'), { status: 500 });
+      return { id: 'site-uuid', deploy_id: 'deploy-bson', subdomain: 'my-account-site', required: [] };
+    },
+    uploadFile: async () => void log.push('authed:uploadFile'),
+    waitUntilReady: async () => void log.push('authed:wait'),
+  };
+}
+
+function makeBuildClient(behavior: 'ok' | 'no-auth'): BuildClient {
+  return {
+    createSite: async () => {
+      if (behavior === 'no-auth') throw new NotAuthenticatedError();
+      return { id: 'site-uuid', name: 'built-site' };
+    },
+    createBuildFromZip: async () => ({ id: 'build-id', deploy_id: 'deploy-bson' }),
+    waitUntilBuildReady: async () => {},
+  };
+}
+
+interface HarnessResult {
+  api: ReturnType<typeof useDropDeploy>;
+  events: Array<{ event: string; props: Record<string, unknown> | undefined }>;
+  deploys: unknown[];
+  buildDeploys: unknown[];
+  errors: Array<{ message: string; reason: string }>;
+  handoffs: unknown[];
+  assigned: string[];
+  unmount: () => void;
+}
+
+function mountHook(options: Partial<Parameters<typeof useDropDeploy>[0]> = {}): HarnessResult {
+  const result = {
+    events: [],
+    deploys: [],
+    buildDeploys: [],
+    errors: [],
+    handoffs: [],
+    assigned: [],
+  } as unknown as HarnessResult;
+
+  window.location.assign = ((url: string) => result.assigned.push(String(url))) as never;
+
+  function Harness() {
+    result.api = useDropDeploy({
+      claimUrl: name => `https://app.netlify.com/drop/${name}`,
+      siteDashboardUrl: name => `https://app.netlify.com/projects/${name}`,
+      buildSignupUrl: 'https://app.netlify.com/signup?next=/drop',
+      buildDeployUrl: build => `https://app.netlify.com/projects/${(build as { siteName: string }).siteName}`,
+      onDeploy: site => void result.deploys.push(site),
+      onBuildDeploy: build => void result.buildDeploys.push(build),
+      onError: error => void result.errors.push(error),
+      track: (event, props) => void result.events.push({ event, props }),
+      ...options,
+    });
+    return null;
+  }
+
+  const container = document.createElement('div');
+  render(h(Harness, {}), container);
+  result.unmount = () => render(null, container);
+  return result;
+}
+
+/** Preact effects and chained promises settle on real timers — poll briefly. */
+async function waitUntil(condition: () => boolean, ms = 500) {
+  const start = Date.now();
+  while (!condition()) {
+    if (Date.now() - start > ms) throw new Error('condition never became true');
+    await new Promise(r => setTimeout(r, 5));
+  }
+}
+
+const settle = () => new Promise(r => setTimeout(r, 10));
+
+beforeEach(() => {
+  localStorage.clear();
+  vi.mocked(saveDropStash).mockClear().mockResolvedValue(true);
+  vi.mocked(loadDropStash).mockClear().mockResolvedValue(null);
+  vi.mocked(clearDropStash).mockClear();
+  vi.mocked(hasDropStashMarker).mockClear().mockReturnValue(false);
+});
+
+afterEach(() => vi.restoreAllMocks());
+
+describe('static drops', () => {
+  it('deploys into the account and lands on the dashboard — no claim artifacts anywhere', async () => {
+    const log: string[] = [];
+    const harness = mountHook({
+      authenticatedDropClient: makeAuthedDropClient(log, 'ok'),
+      client: makeAnonymousClient(log),
+    });
+    await harness.api.deploy(async () => staticFiles(), 'drag', ['text/html']);
+    await settle();
+
+    expect(harness.assigned).toEqual(['https://app.netlify.com/projects/my-account-site']);
+    expect(localStorage.getItem('drop-token')).toBeNull();
+    expect(localStorage.getItem('dropSiteName')).toBeNull();
+    expect(harness.deploys[0]).toEqual({
+      url: 'https://my-account-site.netlify.app',
+      siteName: 'my-account-site',
+      siteId: 'site-uuid',
+      authenticated: true,
+    });
+    const succeeded = harness.events.find(e => e.event === DROPZONE_EVENTS.DEPLOY_SUCCEEDED);
+    expect(succeeded?.props).toEqual({
+      method: 'drag',
+      site_name: 'my-account-site',
+      file_count: 2,
+      authenticated: true,
+      file_types: ['text/html'],
+    });
+    expect(log.some(entry => entry.startsWith('anon:'))).toBe(false);
+  });
+
+  it('falls back to the anonymous claim flow when the session is gone', async () => {
+    const log: string[] = [];
+    const harness = mountHook({
+      authenticatedDropClient: makeAuthedDropClient(log, 'no-auth'),
+      client: makeAnonymousClient(log),
+    });
+    await harness.api.deploy(async () => staticFiles(), 'drag', ['text/html']);
+    await settle();
+
+    expect(harness.assigned).toEqual(['https://app.netlify.com/drop/anon-sub#drop_token=anon-token']);
+    expect(localStorage.getItem('drop-token')).toBe('anon-token');
+    expect(localStorage.getItem('dropSiteName')).toBe('anon-sub');
+    const succeeded = harness.events.find(e => e.event === DROPZONE_EVENTS.DEPLOY_SUCCEEDED);
+    expect(succeeded?.props).toMatchObject({ authenticated: false, auth_fallback: true });
+    expect(log[0]).toBe('authed:getToken'); // authed tried first, then anonymous
+    expect(log).toContain('anon:getToken');
+  });
+
+  it('surfaces a real authed failure as an error — never a silent anonymous duplicate', async () => {
+    const log: string[] = [];
+    const harness = mountHook({
+      authenticatedDropClient: makeAuthedDropClient(log, 'server-error'),
+      client: makeAnonymousClient(log),
+    });
+    await harness.api.deploy(async () => staticFiles(), 'drag', []);
+    await settle();
+
+    expect(harness.assigned).toEqual([]);
+    expect(harness.api.status.kind).toBe('error');
+    expect(harness.errors).toHaveLength(1);
+    expect(harness.events.some(e => e.event === DROPZONE_EVENTS.DEPLOY_FAILED)).toBe(true);
+    expect(log.some(entry => entry.startsWith('anon:'))).toBe(false);
+    expect(harness.deploys).toHaveLength(0);
+  });
+
+  it('stays fully anonymous without authenticated wiring', async () => {
+    const harness = mountHook({ client: makeAnonymousClient([]) });
+    await harness.api.deploy(async () => staticFiles(), 'browse', []);
+    await settle();
+
+    expect(harness.assigned).toEqual(['https://app.netlify.com/drop/anon-sub#drop_token=anon-token']);
+    const succeeded = harness.events.find(e => e.event === DROPZONE_EVENTS.DEPLOY_SUCCEEDED);
+    expect(succeeded?.props).toMatchObject({ authenticated: false });
+    expect(succeeded?.props).not.toHaveProperty('auth_fallback');
+    expect(succeeded?.props).not.toHaveProperty('file_types'); // omitted, never []
+  });
+
+  it('reports an empty selection as a failure with file_count 0', async () => {
+    const harness = mountHook({ client: makeAnonymousClient([]) });
+    await harness.api.deploy(async () => [], 'drag', []);
+    expect(harness.api.status).toEqual({ kind: 'error', message: 'No files found to deploy.' });
+    const failed = harness.events.find(e => e.event === DROPZONE_EVENTS.DEPLOY_FAILED);
+    expect(failed?.props).toMatchObject({ file_count: 0 });
+  });
+
+  it('emits FILES_DROPPED for drags only', async () => {
+    const dragged = mountHook({ client: makeAnonymousClient([]) });
+    await dragged.api.deploy(async () => staticFiles(), 'drag', []);
+    expect(dragged.events.some(e => e.event === DROPZONE_EVENTS.FILES_DROPPED)).toBe(true);
+
+    const browsed = mountHook({ client: makeAnonymousClient([]) });
+    await browsed.api.deploy(async () => staticFiles(), 'browse', []);
+    expect(browsed.events.some(e => e.event === DROPZONE_EVENTS.FILES_DROPPED)).toBe(false);
+  });
+});
+
+describe('build-required drops', () => {
+  it('builds in place for an authenticated visitor and lands on the project', async () => {
+    const harness = mountHook({ buildClient: makeBuildClient('ok'), getUploadToken: async () => 'tok' });
+    await harness.api.deploy(async () => buildFiles(), 'drag', []);
+    await settle();
+
+    expect(harness.assigned).toEqual(['https://app.netlify.com/projects/built-site']);
+    expect(harness.buildDeploys).toHaveLength(1);
+    expect(harness.events.map(e => e.event)).toContain(DROPZONE_EVENTS.BUILD_DEPLOY_SUCCEEDED);
+    expect(saveDropStash).not.toHaveBeenCalled();
+  });
+
+  it('stashes the archive and redirects to signup when there is no session', async () => {
+    const harness = mountHook({ buildClient: makeBuildClient('no-auth'), getUploadToken: async () => null });
+    await harness.api.deploy(async () => buildFiles(), 'drag', []);
+    await settle();
+
+    expect(saveDropStash).toHaveBeenCalledOnce();
+    const [archive] = vi.mocked(saveDropStash).mock.calls[0];
+    expect(archive.name).toBe('source.zip');
+    expect(harness.events.map(e => e.event)).toContain(DROPZONE_EVENTS.PROJECT_STASHED);
+    expect(harness.assigned).toEqual(['https://app.netlify.com/signup?next=/drop']);
+  });
+
+  it('lets onBuildSignupHandoff own the hand-off instead of redirecting', async () => {
+    const handoffs: unknown[] = [];
+    const harness = mountHook({
+      buildClient: makeBuildClient('no-auth'),
+      getUploadToken: async () => null,
+      onBuildSignupHandoff: info => void handoffs.push(info),
+    });
+    await harness.api.deploy(async () => buildFiles(), 'drag', []);
+    await settle();
+
+    expect(harness.assigned).toEqual([]);
+    expect(handoffs).toEqual([
+      { stashed: true, detection: { buildRequired: true, reason: 'package-json-build-script' } },
+    ]);
+    expect(harness.api.status.kind).toBe('idle'); // zone stays usable behind the popup
+  });
+
+  it('redirects to signup without stashing when nothing here could resume', async () => {
+    const harness = mountHook({}); // no build wiring at all
+    await harness.api.deploy(async () => buildFiles(), 'drag', []);
+    await settle();
+
+    expect(saveDropStash).not.toHaveBeenCalled();
+    expect(harness.assigned).toEqual(['https://app.netlify.com/signup?next=/drop']);
+  });
+
+  it('cedes everything to onBuildRequired when set', async () => {
+    const required: unknown[] = [];
+    const harness = mountHook({
+      buildClient: makeBuildClient('ok'),
+      getUploadToken: async () => 'tok',
+      onBuildRequired: info => void required.push(info),
+    });
+    await harness.api.deploy(async () => buildFiles(), 'drag', []);
+    await settle();
+
+    expect(required).toHaveLength(1);
+    expect(harness.assigned).toEqual([]);
+    expect(harness.api.status.kind).toBe('idle');
+  });
+});
+
+describe('stash resume on mount', () => {
+  const stashRecord = () => ({
+    zipFile: new File(['zip'], 'source.zip', { type: 'application/zip' }),
+    buildSettings: null,
+    createdAt: Date.now(),
+  });
+
+  it('deploys the stash for an authenticated visitor and consumes it', async () => {
+    vi.mocked(hasDropStashMarker).mockReturnValue(true);
+    vi.mocked(loadDropStash).mockResolvedValue(stashRecord());
+    const harness = mountHook({ buildClient: makeBuildClient('ok'), getUploadToken: async () => 'tok' });
+
+    await waitUntil(() => harness.assigned.length > 0);
+    expect(harness.assigned).toEqual(['https://app.netlify.com/projects/built-site']);
+    expect(harness.events.map(e => e.event)).toContain(DROPZONE_EVENTS.RESUMED);
+    expect(clearDropStash).toHaveBeenCalled();
+    expect(harness.buildDeploys).toHaveLength(1);
+  });
+
+  it('keeps the stash when the visitor came back logged out', async () => {
+    vi.mocked(hasDropStashMarker).mockReturnValue(true);
+    vi.mocked(loadDropStash).mockResolvedValue(stashRecord());
+    const harness = mountHook({ buildClient: makeBuildClient('no-auth'), getUploadToken: async () => null });
+
+    await waitUntil(() => vi.mocked(loadDropStash).mock.calls.length > 0);
+    await settle();
+    expect(clearDropStash).not.toHaveBeenCalled(); // preserved for the next authenticated visit
+    expect(harness.api.status.kind).toBe('idle');
+    expect(harness.errors).toHaveLength(0);
+  });
+
+  it('surfaces a real resume failure with re-drop copy, stash consumed', async () => {
+    vi.mocked(hasDropStashMarker).mockReturnValue(true);
+    vi.mocked(loadDropStash).mockResolvedValue(stashRecord());
+    const failing = makeBuildClient('ok');
+    failing.createBuildFromZip = async () => {
+      throw new Error('boom');
+    };
+    const harness = mountHook({ buildClient: failing, getUploadToken: async () => 'tok' });
+
+    await waitUntil(() => harness.api.status.kind === 'error');
+    expect(harness.api.status).toMatchObject({
+      kind: 'error',
+      message: 'We couldn’t automatically deploy your project. Drop it again to publish it.',
+    });
+    const failed = harness.events.find(e => e.event === DROPZONE_EVENTS.DEPLOY_FAILED);
+    expect(failed?.props).toEqual({ reason: 'resume_failed' });
+    expect(clearDropStash).toHaveBeenCalled();
+  });
+
+  it('never attempts without the marker, wiring, or with resume disabled', async () => {
+    mountHook({ buildClient: makeBuildClient('ok'), getUploadToken: async () => 'tok' });
+    await settle();
+    expect(loadDropStash).not.toHaveBeenCalled(); // no marker
+
+    vi.mocked(hasDropStashMarker).mockReturnValue(true);
+    mountHook({}); // marker but no wiring
+    await settle();
+    expect(loadDropStash).not.toHaveBeenCalled();
+
+    mountHook({
+      buildClient: makeBuildClient('ok'),
+      getUploadToken: async () => 'tok',
+      resumeStashedBuilds: false,
+    });
+    await settle();
+    expect(loadDropStash).not.toHaveBeenCalled();
+  });
+});