Skip to content

perf(package): publish tree-shakeable component and hook entry points #116

Description

@codeacme17

Parent

#114

Summary

Publish modular, tree-shakeable component and hook entry points so consumers pay only for the Echo UI features they import.

The current distributed module behaves like a pre-bundled application artifact. Importing a basic control, Card, or a single icon can retain most of Echo UI together with Tone.js and visualization-related code. This makes small imports unexpectedly expensive and prevents consumers from relying on normal ESM tree-shaking.

Scope

  • Separate the modular ESM output from the UMD or all-in-one distribution artifact.
  • Publish focused public entry points for components, hooks, icons, and visualization features where they provide meaningful isolation.
  • Preserve the package root as a backward-compatible convenience entry.
  • Ensure non-audio components do not retain Tone.js.
  • Ensure basic controls and icons do not retain visualization-only code.
  • Keep CSS discoverable and correctly marked as a side effect without marking all JavaScript modules as side-effectful.
  • Generate type declarations that resolve correctly for root and focused imports.
  • Verify package exports in supported ESM and CommonJS consumer configurations.
  • Make peer and runtime dependency boundaries explicit.
  • Add bundle regression fixtures for representative public imports.
  • Document the recommended import forms and any older-bundler caveats.

Acceptance criteria

  • Importing a single icon stays below the approved single-icon gzip budget.
  • Importing Button, Card, or another basic component stays below the approved basic-component budget.
  • A basic component bundle contains neither Tone.js nor visualization-only dependencies.
  • A focused audio-hook import contains only the dependencies required by that hook.
  • A focused visualization import does not force unrelated controls into the consumer bundle.
  • The existing root import remains functional.
  • The UMD build remains available if it is part of the supported distribution contract.
  • Root and focused imports resolve valid type declarations.
  • CSS behavior remains compatible with existing consumers.
  • React 18 and React 19 consumer fixtures continue to build.
  • Package-artifact verification checks the contents consumers actually install.
  • Bundle budgets are enforced by the performance harness.

Compatibility requirements

  • Treat focused entry points as additive.
  • Avoid renaming existing public component or hook exports.
  • Preserve the current CSS entry point unless a migration path is documented.
  • Document any unavoidable resolution limitation for older bundlers.

Out of scope

  • Runtime optimization of analyzers or visualizers.
  • Redesigning component APIs.
  • Removing the package root export.
  • Replacing Tone.js or D3 solely to improve package size.

Validation

  • Run all consumer build fixtures against the packed package artifact.
  • Compare focused imports with the root import using the same bundler configuration.
  • Inspect output to verify that unrelated dependencies are absent rather than merely compressed.
  • Run unit tests, typecheck, lint, library builds, and example builds.

Dependencies

Blocked by: #115.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions