Step-by-step workflows for hpcc-systems/hpcc-js-wasm development
This guide provides step-by-step workflows for common development tasks when working with the HPCC-JS-WASM repository.
# Check repository state
git status
git log --oneline -5
# Check if dependencies are installed
ls node_modules/ || echo "Dependencies not installed"
# Check if packages are built
ls packages/*/dist/ || echo "Packages not built"
# Install dependencies if needed
npm ci# Test linting (should work without builds)
npm run lint
# Try building TypeScript only (may fail without WASM)
npm run build-ws
# Check individual package status
cd packages/graphviz && npm run gen-typesFor changes to TypeScript code, tests, or documentation:
# 1. Install dependencies
npm ci
# 2. Build TypeScript packages
npm run build-ws
# 3. Run linting
npm run lint
# 4. Test specific package
cd packages/[package-name]
npm test
# 5. Fix any linting issues
npm run lint-fixFor comprehensive development including C++ changes:
# 1. Install all dependencies
npm ci
# 2. Install build tools (requires system dependencies)
npm run install-build-deps # Installs emsdk, vcpkg, playwright, bundler test deps
# 3. Build C++ to WASM
npm run build-cpp
# 4. Build TypeScript packages
npm run build-ws
# 5. Run full test suite
npm run testFor consistent environment without local setup:
# Build and test in Docker
npm run build-docker- Identify the target package
cd packages/[package-name]- Understand the current API
// Look at src/index.ts and main class file
cat src/index.ts
cat src/[package-name].ts- Add the new method
// In src/[package-name].ts
export class PackageName {
// ... existing methods
newMethod(input: string): string {
// Implementation
return this._wasmInstance.callMethod(input);
}
}- Add TypeScript types if needed
// Add to type definitions
export interface NewMethodOptions {
option1?: string;
option2?: number;
}- Add tests
// In tests/[package-name].spec.ts
it("new method works", async () => {
const lib = await PackageName.load();
const result = lib.newMethod("test");
expect(result).toBeDefined();
});- Build and test
npm run build
npm test- Reproduce the issue
# Write a failing test first
npm test -- --reporter=verbose- Identify the root cause
// Add debug logging
console.log("Debug info:", variable);- Make minimal fix
// Fix the specific issue
if (condition) {
// Handle edge case
}- Verify fix
npm test
npm run lint- Identify test type needed
- Unit tests:
tests/[package].spec.ts - Browser tests:
tests/[package].browser.spec.ts - Worker tests:
tests/worker.*.spec.ts
- Follow existing patterns
import { describe, it, expect } from "vitest";
import { PackageName } from "@hpcc-js/wasm-packagename";
describe("Feature", () => {
it("should do something", async () => {
const lib = await PackageName.load();
// Test implementation
});
});- Run tests
npm test- Clean and rebuild
npm run clean-all
npm ci
npm run build-ws- Check specific package
cd packages/[failing-package]
npm run clean
npm run build- Check dependencies
npm ls
lerna ls- Run specific test
cd packages/[package]
npm test -- --reporter=verbose- Check if WASM files exist
ls build/packages/*/src-cpp/*.wasm- Run without browser tests
npm run test-node- Check package exports
cat packages/[package]/package.json | grep -A 10 '"exports"'- Verify built files exist
ls packages/[package]/dist/
ls packages/[package]/types/- Check TypeScript compilation
cd packages/[package]
npm run gen-types- Run linting
npm run lint
npm run lint-fix- Build all packages
npm run build-ws- Test affected packages
# Test specific packages
cd packages/[modified-package]
npm test- Check types
npx tsc --noEmit- Update TypeDoc comments
/**
* Description of the method
* @param input - Description of parameter
* @returns Description of return value
* @example
* ```ts
* const result = lib.method("example");
* ```
*/
method(input: string): string { ... }- Update README if needed
# Check if package README needs updates
cat packages/[package]/README.md- Generate documentation
npm run gen-docs# Update dependencies
npm run update
# Use lerna for version management
lerna version --conventional-commits# Build everything
npm run build
# Publish via lerna
lerna publish from-package# Revert specific files
git checkout HEAD -- packages/[package]/src/[file].ts
# Revert last commit
git revert HEAD# Fix specific package quickly
cd packages/[package]
npm run clean
npm run build
npm test- Large WASM files consume significant memory
- Test with realistic data sizes
- Monitor memory usage in browser dev tools
- C++ compilation is slowest part
- TypeScript builds are relatively fast
- Use watch modes for development
- Browser tests are slower than Node.js tests
- Run specific test suites during development
- Use CI for comprehensive testing
- Always check current state before making changes
- Test incrementally after each change
- Follow existing patterns rather than creating new ones
- Keep changes minimal and focused
- Update documentation when changing APIs
- Consider backward compatibility for public APIs
- Test in both browser and Node.js environments when applicable