Development
The Specviz monorepo contains the core library and documentation website, as well as many individual example starter application packages.
.
├── biome.json
├── bun.lockb
├── examples
│ ├── advanced-annotation
│ ├── basic-annotation
│ ├── basic-audio
│ ├── basic-spectrogram
│ └── interactive-spectrogram
├── package.json
├── packages
│ ├── specviz
│ └── website
│ └── static
├── readme.md
└── tsconfig.json
| Path | Description |
|---|---|
biome.json | shared Biome configuration |
bun.lockb | Bun dependency lock file (binary) |
examples | example projects |
examples/* | individual starter package |
package.json | monorepo entry and scripts |
packages | monorepo packages |
packages/specviz | Specviz package |
packages/website | Specviz documentation website ⭐️ YOU ARE HERE |
packages/website/static | spectrogram, waveform, audio, and other static assets |
readme.md | offline information and instructions |
tsconfig.json | shared TypeScript configuration |
Runtime and Dependencies
After installing the bun JavaScript runtime and package manager, install the development dependencies.
$ bun install
bun install v1.1.29 (6d43b366)
1116 packages installed [3.77s]
Blocked 3 postinstalls. Run `bun pm untrusted` for details.
Examples
To run a starter project, change to the example's directory and run the dev script.
$ cd examples/advanced-annotation
$ bun run dev
The example webserver will display the connection URL. In the default case, http://localhost:5173.
VITE v5.4.8 ready in 205 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
Linter and Formatter
Run the linter and formatter.
$ bun run check
@meridian-analytics/specviz-example-basic-audio check $ biome check --write .
│ Checked 6 files in 20ms. No fixes applied.
└─ Done in 576 ms
@meridian-analytics/specviz-example-basic-spectrogram check $ biome check --write .
│ Checked 6 files in 21ms. No fixes applied.
└─ Done in 576 ms
@meridian-analytics/specviz-example-interactive-spectrogram check $ biome check --write .
│ Checked 6 files in 20ms. No fixes applied.
└─ Done in 575 ms
@meridian-analytics/specviz-example-advanced-annotation check $ biome check --write .
│ Checked 6 files in 32ms. No fixes applied.
└─ Done in 586 ms
@meridian-analytics/specviz-example-basic-annotation check $ biome check --write .
│ Checked 6 files in 23ms. No fixes applied.
└─ Done in 577 ms
@meridian-analytics/specviz check $ biome check --write .
│ Checked 25 files in 27ms. No fixes applied.
└─ Done in 580 ms
@meridian-analytics/specviz-website check $ biome check --write .
│ Checked 11 files in 20ms. No fixes applied.
└─ Done in 575 ms
TypeScript Compiler
Run compiler for all packages.
$ bun run tsc
@meridian-analytics/specviz-example-basic-audio tsc $ tsc
└─ Done in 949 ms
@meridian-analytics/specviz-example-basic-spectrogram tsc $ tsc
└─ Done in 1.31 s
@meridian-analytics/specviz-example-interactive-spectrogram tsc $ tsc
└─ Done in 1.32 s
@meridian-analytics/specviz-example-advanced-annotation tsc $ tsc
└─ Done in 1.12 s
@meridian-analytics/specviz-example-basic-annotation tsc $ tsc
└─ Done in 1.39 s
@meridian-analytics/specviz tsc $ tsc
└─ Done in 1.48 s
@meridian-analytics/specviz-website tsc $ tsc
└─ Done in 1.21 s
Test
Run tests for all packages.
$ bun run test
@meridian-analytics/specviz test $ vitest run
│
│ RUN v2.1.3 ./meridian/specviz-react/packages/specviz
│
│ ✓ test/_axis.test.ts (12 tests) 4ms
│
│ Test Files 1 passed (1)
│ Tests 12 passed (12)
│ Start at 10:44:44
│ Duration 212ms (transform 31ms, setup 0ms, collect 30ms, tests 4ms, environment 0ms, prepare 32ms)
└─ Done in 833 ms
Build
To build the specviz package, run the build script.
$ cd packages/specviz
$ bun run build
$ vite build && tsc --project tsconfig.build.json
vite v5.4.10 building for production...
✓ 22 modules transformed.
dist/math.js 0.14 kB │ gzip: 0.13 kB │ map: 0.31 kB
dist/plane.js 0.17 kB │ gzip: 0.15 kB │ map: 0.09 kB
dist/action.js 0.17 kB │ gzip: 0.15 kB │ map: 0.09 kB
dist/input.js 0.21 kB │ gzip: 0.16 kB │ map: 0.09 kB
dist/viewport.js 0.27 kB │ gzip: 0.20 kB │ map: 0.10 kB
dist/audio.js 0.31 kB │ gzip: 0.22 kB │ map: 0.10 kB
dist/hooks.js 0.35 kB │ gzip: 0.23 kB │ map: 0.10 kB
dist/note.js 0.42 kB │ gzip: 0.27 kB │ map: 0.10 kB
dist/vector2.js 0.49 kB │ gzip: 0.27 kB │ map: 1.23 kB
dist/axis.js 0.52 kB │ gzip: 0.30 kB │ map: 0.10 kB
dist/coord.js 0.61 kB │ gzip: 0.23 kB │ map: 1.37 kB
dist/format.js 0.63 kB │ gzip: 0.36 kB │ map: 1.30 kB
dist/action-D-gLVGuD.js 0.71 kB │ gzip: 0.39 kB │ map: 1.10 kB
dist/rect.js 1.12 kB │ gzip: 0.45 kB │ map: 2.68 kB
dist/keybinds.js 1.78 kB │ gzip: 0.57 kB │ map: 3.37 kB
dist/svg.js 2.12 kB │ gzip: 0.59 kB │ map: 4.52 kB
dist/input-Cvi9e0Nf.js 2.30 kB │ gzip: 0.79 kB │ map: 4.59 kB
dist/viewport-XCdCEv4z.js 4.75 kB │ gzip: 1.27 kB │ map: 9.38 kB
dist/audio-Cwwi9c8m.js 6.41 kB │ gzip: 1.85 kB │ map: 11.94 kB
dist/index.js 12.56 kB │ gzip: 2.93 kB │ map: 22.20 kB
dist/note-BapyeAcs.js 14.28 kB │ gzip: 3.06 kB │ map: 27.46 kB
dist/axis-mPWX3U0x.js 15.76 kB │ gzip: 3.82 kB │ map: 30.92 kB
✓ built in 136ms
Release
The Specviz package is released using the following process.
| Step | Description | Command |
|---|---|---|
| 1. | Run the linter and formatter | bun run check |
| 2. | Run the Specviz build script | bun run --cwd packages/specviz build |
| 3. | Run the package tests | bun run test |
| 4. | Run the TypeScript compiler | bun run tsc |
| 5. | Update the version field | vim packages/specviz/package.json |
| 6. | Commit the changes | git commit -m "version X.Y.Z" |
| 7. | Tag the commit with version | git tag X.Y.Z |
| 8. | Push the commit and tag | git push && git push --tags |
| 9. | Run the bun pm pack command | bun pm --cwd packages/specviz pack |
| 10. | Run the bun publish command | bun publish packages/specviz/meridian-analytics-specviz-X.Y.Z.tgz |
To publish, you will need to be logged into npm.
$ bunx npm login
To see the current logged in user:
$ bun pm whoami