Contributing to @livetemplate/client

Thank you for your interest in contributing to the LiveTemplate client library!

Development Setup

Prerequisites

Getting Started

# Clone the repository
git clone https://github.com/livetemplate/client.git
cd client

# Install dependencies
npm install

# Install git hooks
./scripts/install-hooks.sh

# Run tests
npm test

# Build
npm run build

Development Workflow

1. Create a Branch

git checkout -b feature/your-feature-name
# or
git checkout -b fix/your-bug-fix

2. Make Changes

3. Test Your Changes

# Run all tests
npm test

# Run specific test file
npm test -- focus-manager

# Run with coverage
npm test -- --coverage

# Build to verify no errors
npm run build

4. Commit Your Changes

The repository has a pre-commit hook that will:

Commits must pass all checks before they can be committed.

git add .
git commit -m "feat: add new feature"

Commit Message Format

We follow Conventional Commits:

Examples:

feat: add keyboard navigation support
fix: prevent focus loss during updates
docs: update API documentation
test: add tests for modal manager

5. Push and Create PR

git push origin feature/your-feature-name

Then create a Pull Request on GitHub.

Code Style

TypeScript

Naming Conventions

File Organization

Testing Guidelines

Test Structure

describe("ComponentName", () => {
    describe("method", () => {
        it("should do something specific", () => {
            // Arrange
            const component = new Component();

            // Act
            const result = component.method();

            // Assert
            expect(result).toBe(expected);
        });
    });
});

Test Coverage

Running Tests

# All tests
npm test

# Watch mode (for development)
npm test -- --watch

# With coverage
npm test -- --coverage

# Specific file
npm test -- event-delegation.test.ts

Adding New Features

1. DOM Utilities

Add to dom/ directory:

// dom/my-feature.ts
export class MyFeature {
    constructor(private element: HTMLElement) {}

    public doSomething(): void {
        // Implementation
    }
}

2. State Management

Add to state/ directory for features that manage application state.

3. Transport Layer

Add to transport/ directory for network-related features.

4. Update Main Client

If the feature should be part of the main client API, update livetemplate-client.ts:

import { MyFeature } from "./dom/my-feature";

export class LiveTemplateClient {
    private myFeature: MyFeature;

    constructor(options: LiveTemplateClientOptions) {
        // ...
        this.myFeature = new MyFeature(this.targetElement);
    }
}

Versioning

The client follows the core library's major.minor version:

Before releasing:

  1. Ensure version matches core library's major.minor
  2. Update CHANGELOG.md
  3. Run ./scripts/release.sh

Release Process

Releases are automated via scripts/release.sh:

# Dry run (no changes)
./scripts/release.sh --dry-run

# Actual release
./scripts/release.sh

The script will:

  1. Validate version against core library
  2. Update VERSION and package.json
  3. Generate CHANGELOG.md
  4. Run tests and build
  5. Commit and tag
  6. Push the tag and create a GitHub release

Creating the GitHub release fires the Publish workflow (.github/workflows/publish.yml), which then:

  1. Checks out the release tag
  2. Re-runs tests and build
  3. Verifies package.json version matches the tag
  4. Publishes to npm using OIDC trusted publishing with --provenance (no NPM_TOKEN secret — npm trusts the GitHub Actions OIDC identity, configured once on npmjs.com under the package's Trusted Publishers)
  5. Runs a post-publish npm view check with retry/backoff

Watching a release

Protocol Changes

If the LiveTemplate protocol changes (tree format, WebSocket messages, etc.):

  1. Check with core library team for compatibility
  2. Update client to handle new format
  3. Maintain backward compatibility when possible
  4. Document breaking changes in CHANGELOG
  5. Coordinate release with core library

Documentation

README.md

Update for:

Code Comments

Examples

Add examples for new features in:

Getting Help

Code of Conduct

License

By contributing, you agree that your contributions will be licensed under the MIT License.