@netlify/spark-ui 1.29.0 → 1.31.0-alpha.1

package/packages/components/preact/DropZone/drop-core/errors.ts

@@ -12,6 +12,67 @@ export class UnsupportedDropError extends Error {
   }
 }
 
+/**
+ * Thrown when an authenticated path (static or build) turns out to have no
+ * usable session — the short-lived upload token came back empty, or the
+ * session-cookie site create was refused, so nothing was created. For static
+ * drops the flow falls back to the anonymous drop + claim; builds have no
+ * anonymous equivalent, so the consumer's only recourse is to send the visitor
+ * through login/signup and have them drop again.
+ */
+export class NotAuthenticatedError extends Error {
+  constructor(message = 'not authenticated') {
+    super(message);
+    this.name = 'NotAuthenticatedError';
+  }
+}
+
+/** `POST …/sites` failed, so there is nothing to build into. Carries the HTTP status. */
+export class SiteCreateError extends Error {
+  status?: number;
+
+  constructor(status?: number) {
+    super(`site create failed${status ? `: ${status}` : ''}`);
+    this.name = 'SiteCreateError';
+    this.status = status;
+  }
+}
+
+/**
+ * The multipart `POST /sites/{id}/builds` upload itself failed — the build never
+ * started. Distinct from `BuildFailedError`, which is a build that ran and broke.
+ */
+export class BuildCreateError extends Error {
+  status?: number;
+
+  constructor(status?: number) {
+    super(`build create failed${status ? `: ${status}` : ''}`);
+    this.name = 'BuildCreateError';
+    this.status = status;
+  }
+}
+
+/**
+ * The build ran and ended in `error`/`rejected`. `reason` is the API's
+ * `error_message` when there is one — it's the only part of a build failure that
+ * says anything actionable (a failing build command, a missing dependency), so
+ * it is surfaced to the user rather than swallowed.
+ */
+export class BuildFailedError extends Error {
+  constructor(public reason?: string) {
+    super(reason ? `build failed: ${reason}` : 'build failed');
+    this.name = 'BuildFailedError';
+  }
+}
+
+/** The build hadn't settled before the poller gave up. The build itself may still finish. */
+export class BuildTimeoutError extends Error {
+  constructor() {
+    super('Build did not finish in time');
+    this.name = 'BuildTimeoutError';
+  }
+}
+
 /**
  * Turn a raw deploy failure into copy a non-technical user can act on.
  * The original message is still tracked via analytics — this is only for display.
@@ -23,6 +84,26 @@ export function humanizeDropError(err: unknown): string {
     return 'To deploy, drop a folder or a .zip file — or a single HTML page.';
   }
 
+  if (err instanceof NotAuthenticatedError) {
+    return 'Please log in to Netlify to deploy a project that needs a build, then try again.';
+  }
+
+  if (err instanceof SiteCreateError) {
+    return "We couldn't create a project for this build. Please try again.";
+  }
+
+  // The build's own error message is the only actionable part of a build
+  // failure, so pass it straight through instead of a generic apology.
+  if (err instanceof BuildFailedError) {
+    return err.reason
+      ? `Your build failed: ${err.reason}`
+      : 'Your build failed. Check your build settings and try again.';
+  }
+
+  if (err instanceof BuildTimeoutError) {
+    return 'Your build is taking longer than expected. It may still finish — check your Netlify dashboard.';
+  }
+
   if (err.message === 'Deploy did not become ready in time') {
     return 'Your site is taking longer than expected to go live. Please try again in a moment.';
   }
@@ -31,7 +112,9 @@ export function humanizeDropError(err: unknown): string {
     return "Couldn't connect to Netlify. Check your internet connection and try again.";
   }
 
-  // client.ts attaches `.status` to API failures — see apiError().
+  // client.ts attaches `.status` to API failures (see apiError()), as do the
+  // typed build errors above — so `BuildCreateError(413)` lands on the
+  // upload-too-large copy rather than a generic message.
   const status = 'status' in err && typeof err.status === 'number' ? err.status : undefined;
 
   switch (status) {

package/packages/components/preact/DropZone/drop-core/fileTypes.ts

@@ -0,0 +1,34 @@
+/** What we report when the browser gives us no MIME type at all. */
+const UNKNOWN_TYPE = 'application/octet-stream';
+
+/**
+ * Distinct types kept per event. Deduplication alone keeps this small for a real
+ * site (a handful of types across hundreds of files); the cap is a backstop so an
+ * unusual folder can't push an oversized property into the analytics payload.
+ */
+const MAX_TYPES = 20;
+
+/**
+ * Distinct MIME types across a drop or file-picker selection, sorted so the same
+ * selection always yields the same array.
+ *
+ * Read from the raw `File.type` at the drop boundary rather than from
+ * `ProcessedFile`s: the MIME type only exists on the original `File`, and reading
+ * can throw before any `ProcessedFile` does (an unsupported single file) — the
+ * very case the file type is most worth knowing about.
+ *
+ * Browsers leave `File.type` empty for anything they don't recognise — a dragged
+ * folder, an `.exe`, an extensionless file — so those collapse to
+ * `application/octet-stream` and the property never carries an empty string.
+ *
+ * Call this synchronously inside the drop handler: a `DataTransfer` detaches once
+ * the event turn ends.
+ */
+export function getFileTypes(files: FileList | null | undefined): string[] {
+  if (!files?.length) return [];
+  const types = new Set<string>();
+  for (const file of Array.from(files)) {
+    types.add(file.type || UNKNOWN_TYPE);
+  }
+  return Array.from(types).sort().slice(0, MAX_TYPES);
+}

package/packages/components/preact/DropZone/drop-core/index.ts

@@ -1,7 +1,11 @@
 export * from './types';
 export * from './digest';
 export * from './readFiles';
+export * from './fileTypes';
 export * from './detectBuild';
 export * from './client';
+export * from './authedDropClient';
+export * from './buildClient';
+export * from './zip';
 export * from './deploy';
 export * from './errors';

package/packages/components/preact/DropZone/drop-core/readFiles.ts

@@ -123,7 +123,7 @@ async function readZip(zip: File): Promise<ProcessedFile[]> {
     // ArrayBuffer, so narrow it for toProcessedFile's ArrayBuffer parameter.
     const content = bytes.buffer.slice(
       bytes.byteOffset,
-      bytes.byteOffset + bytes.byteLength,
+      bytes.byteOffset + bytes.byteLength
     ) as ArrayBuffer;
     out.push(toProcessedFile(path, content, path.split('/').pop()!));
   }

package/packages/components/preact/DropZone/drop-core/types.ts

@@ -34,7 +34,18 @@ export interface DeployResult {
   url: string; // https://<subdomain>.netlify.app
 }
 
-export type DeployPhase = 'creating' | 'uploading' | 'processing' | 'ready';
+/**
+ * Phases shared by both deploy paths. A static drop runs
+ * creating → uploading → processing → ready; a build drop runs
+ * zipping → creating → uploading → building → ready.
+ */
+export type DeployPhase =
+  | 'zipping'
+  | 'creating'
+  | 'uploading'
+  | 'processing'
+  | 'building'
+  | 'ready';
 
 export interface DeployProgress {
   phase: DeployPhase;

package/packages/components/preact/DropZone/drop-core/zip.ts

@@ -0,0 +1,118 @@
+import { inferBuildSettings, type InferredBuildSettings } from './detectBuild';
+import type { ProcessedFile } from './types';
+
+const NETLIFY_TOML_PATH = '/netlify.toml';
+
+/** TOML basic-string escaping — enough for the two values we ever write. */
+function escapeTomlString(value: string): string {
+  return value
+    .replace(/\\/g, '\\\\')
+    .replace(/"/g, '\\"')
+    .replace(/\n/g, '\\n')
+    .replace(/\r/g, '\\r')
+    .replace(/\t/g, '\\t');
+}
+
+/**
+ * Render inferred settings as a `[build]` table. Only `command` and `publish`
+ * are written: everything else (functions directory, plugins, node version)
+ * is zero-config on Netlify's side and guessing at it would override detection
+ * that is better informed than we are.
+ */
+export function generateNetlifyToml({ command, publish }: InferredBuildSettings): string {
+  return [
+    '[build]',
+    `  command = "${escapeTomlString(command)}"`,
+    `  publish = "${escapeTomlString(publish)}"`,
+    '',
+  ].join('\n');
+}
+
+export interface ZipOptions {
+  /** Filename given to the produced `File`. Shows up as the build's source archive. */
+  name?: string;
+  /**
+   * Synthesise a `netlify.toml` `[build]` table from `inferBuildSettings` when the
+   * drop doesn't declare one (default `true`). Set `false` to upload the files
+   * exactly as dropped and let buildbot resolve every setting itself.
+   */
+  synthesizeNetlifyToml?: boolean;
+}
+
+export interface ZipResult {
+  /** The archive, ready to hand to `createBuildFromZip`. */
+  file: File;
+  /**
+   * The settings written into `netlify.toml`, or `null` when the archive is a
+   * faithful copy of the drop — either because it already declared a `[build]`
+   * table, or because nothing could be inferred with confidence.
+   */
+  buildSettings: InferredBuildSettings | null;
+}
+
+const encoder = new TextEncoder();
+const decoder = new TextDecoder();
+
+function toBytes(content: ArrayBuffer): Uint8Array {
+  return new Uint8Array(content);
+}
+
+/**
+ * Zip an already-read file set into the source archive that
+ * `POST /sites/{id}/builds` expects.
+ *
+ * The input is the same root-normalized `ProcessedFile[]` the static deploy path
+ * uses (see `readFiles`), so junk — dotfiles, `node_modules`, macOS metadata — is
+ * already gone and paths sit at the deploy root. Output directories (`dist/`,
+ * `build/`) are deliberately *not* stripped: buildbot regenerates them when
+ * there's a build command, and a drop whose `netlify.toml` publishes a committed
+ * directory without a command would break if we removed it.
+ *
+ * When the drop needs a build but declares no `[build]` table, an inferred one is
+ * written in (appended to an existing `netlify.toml`, or created if there is
+ * none) so buildbot doesn't publish the project's source. See
+ * `inferBuildSettings` for how conservative that inference is.
+ */
+export async function zipFiles(
+  files: ProcessedFile[],
+  { name = 'source.zip', synthesizeNetlifyToml = true }: ZipOptions = {}
+): Promise<ZipResult> {
+  if (!files.length) throw new Error('No files to deploy');
+
+  const buildSettings = synthesizeNetlifyToml ? inferBuildSettings(files) : null;
+
+  const entries: Record<string, Uint8Array> = {};
+  for (const file of files) {
+    // fflate keys are paths relative to the archive root, so drop the leading
+    // slash `ProcessedFile.path` carries.
+    const path = file.path.replace(/^\//, '');
+    if (path) entries[path] = toBytes(file.content);
+  }
+
+  if (buildSettings) {
+    const existing = files.find(f => f.path === NETLIFY_TOML_PATH);
+    const table = generateNetlifyToml(buildSettings);
+    // Append rather than replace so the drop's own redirects, headers and
+    // environment survive alongside the synthesised build settings.
+    const contents = existing
+      ? `${decoder.decode(existing.content).replace(/\n*$/, '\n')}\n${table}`
+      : table;
+    entries['netlify.toml'] = encoder.encode(contents);
+  }
+
+  // fflate is loaded on demand — same as the unzip path in readFiles — so a
+  // consumer that never drops a build project never pays for it.
+  const { zip } = await import('fflate');
+  const bytes = await new Promise<Uint8Array>((resolve, reject) =>
+    zip(entries, { level: 6 }, (err, out) => (err ? reject(err) : resolve(out)))
+  );
+
+  // `bytes.buffer` is ArrayBufferLike; narrow it to the plain ArrayBuffer the
+  // File constructor takes, the same way readFiles does on the unzip side.
+  const archive = bytes.buffer.slice(
+    bytes.byteOffset,
+    bytes.byteOffset + bytes.byteLength
+  ) as ArrayBuffer;
+  const file = new File([archive], name, { type: 'application/zip' });
+  return { file, buildSettings };
+}

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

@@ -1,19 +1,43 @@
 export { default as DropZone } from './DropZone';
 export {
   AnonymousDropClient,
+  AuthenticatedBuildClient,
+  AuthenticatedDropClient,
+  BuildCreateError,
+  BuildFailedError,
+  BuildTimeoutError,
+  deployBuild,
   deployFiles,
   detectBuild,
+  getFileTypes,
+  humanizeDropError,
+  inferBuildSettings,
+  NotAuthenticatedError,
   readDataTransfer,
   readFileList,
+  SiteCreateError,
+  UnsupportedDropError,
+  zipFiles,
 } from './drop-core';
 export type {
+  AuthenticatedBuildClientConfig,
+  AuthenticatedDropClientConfig,
+  BuildClient,
+  BuildDeployOptions,
+  BuildDeployResult,
   BuildDetection,
   BuildReason,
+  BuildResponse,
+  BuildSite,
   DropClient,
   DropResponse,
   Digest,
   DeployResult,
   DeployProgress,
   DeployPhase,
+  InferredBuildSettings,
   ProcessedFile,
+  ZipOptions,
+  ZipResult,
 } from './drop-core';
+export type { DeployedBuild, DeployedSite, DeployError, DeployStatus } from './useDropDeploy';