Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions .claude/skills/verify/skill.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
---
name: verify
description: Run lint, build, and tests to verify changes. Use when user says /verify, check my changes, validate changes, run checks, verify everything passes, pre-commit check, ready to commit, does it pass, CI check, sanity check
---

# Verify Skill - Rokt Web Kit

Run lint, build, and tests to verify the current state of the codebase.

## Steps

1. Run the following checks. Lint can run in parallel with the build+test sequence.

**Lint:**
```bash
npm run lint
```

**Build + Tests:**
```bash
npm run test
```

> `npm run test` runs `npm run build && npm run build:test && karma start test/karma.config.js` — it builds the source, builds the test bundle, and runs Karma with Mocha/Chai in Chrome and Firefox.

2. Report results in this format:

| Check | Status |
|--------|--------|
| Lint | PASS / FAIL |
| Build | PASS / FAIL |
| Tests | PASS / FAIL |

3. If any check fails, show the relevant error output so the user can diagnose and fix the issue.

## Notes

- This is a plain JavaScript project — kit source is ES5-style; tests/tooling may use ES6. There is no TypeScript compilation step.
- Build uses Rollup and produces IIFE and CommonJS bundles.
- Tests run in real browsers (Chrome, Firefox) via Karma, not in Node/jsdom.
- `npm run test:debug` launches Chrome in non-headless mode for interactive debugging.
84 changes: 84 additions & 0 deletions AGENTS.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
# Rokt Web Kit - Agent Instructions

This file provides guidance for AI coding agents working with the Rokt web kit codebase.

## About This Kit

The Rokt web kit (`@mparticle/web-rokt-kit`) is an mParticle integration kit (forwarder) that bridges the mParticle Web SDK and the Rokt Web SDK. It receives events from mParticle and forwards them to Rokt for placement selection, user targeting, and attribution.

**Module ID**: 181

## Tech Stack

- **Language**: Plain JavaScript project — kit source is ES5-style; tests/tooling may use ES6. There is no TypeScript compilation step.
- **Build Tool**: Rollup (IIFE and CommonJS output)
- **Testing**: Karma + Mocha/Chai (real browser tests in Chrome and Firefox)
- **Package Manager**: npm
- **Code Quality**: ESLint

## Project Structure

```
/
src/
Rokt-Kit.js # Single monolithic source file (~900 lines)
dist/
Rokt-Kit.iife.js # Browser bundle (IIFE)
Rokt-Kit.common.js # npm bundle (CommonJS)
test/
src/
tests.js # Mocha/Chai test suite
config.js # Test mParticle configuration
karma.config.js # Karma test runner config
lib/ # Test utilities
end-to-end-testapp/ # E2E test app
rollup.config.js # Build configuration
package.json
```

## Key Commands

```bash
npm run build # Build IIFE and CommonJS bundles
npm run build:test # Build test bundle
npm run lint # ESLint check (src/ and test/src/)
npm run lint:fix # ESLint autofix
npm run test # Build + build tests + run Karma
npm run test:debug # Non-headless Chrome for debugging
npm run watch # Watch and rebuild on changes
```

## Code Conventions

- **Single source file**: All kit logic lives in `src/Rokt-Kit.js`
- **Constructor function pattern**: `var constructor = function() { ... }` with `var self = this;`
- **var declarations**: The codebase uses `var` throughout — match this style
- **No TypeScript**: No type annotations, no interfaces, no generics
- **Module registration**: Kit self-registers via `window.mParticle.addForwarder()` at load time

## Architecture

- Kit is an mParticle forwarder that self-registers via `window.mParticle.addForwarder()` at load time
- Kit attaches to the Rokt manager: `window.mParticle.Rokt.attachKit(self)`
- Rokt launcher loads asynchronously — events are queued until it's ready
- Configuration comes from mParticle server-side kit settings

## Testing Patterns

- Tests use Mocha `describe`/`it` blocks with Chai `expect` assertions
- mParticle SDK is mocked in test config
- Rokt launcher is mocked with spy functions
- `beforeEach` resets kit state between tests
- Tests run in real browsers (Chrome, Firefox) via Karma

## Common Gotchas

1. **Single file**: All changes go in `src/Rokt-Kit.js` — there are no imports/modules
2. **Browser-only**: Code runs in browser context, `window` is always available
3. **Async launcher**: Rokt launcher loads asynchronously — events must be queued until ready
4. **var scope**: Use `var` not `let`/`const` to match existing style
5. **self reference**: Use `var self = this;` pattern for callback context

## Available Skills

- **`/verify`**: Run lint, build, and tests to validate your changes. **You MUST run `/verify` before committing or opening a pull request.** Do not skip this step. See `.claude/skills/verify/skill.md`.
Loading