Claron SDK (@claron/sdk)

The Claron SDK is a lightweight compilation dependency that instruments your application at build-time to enable secure, live-site source code attribution and AI-powered fix suggestions.

📦 Tech Stack & Features

• Tree-shakeable Bundler: Built using tsup targeting ESM (.js), CommonJS (.cjs), and TypeScript declarations (.d.ts).
• Babel Instrumenter: Injects unique, cryptographically secure hashes (data-claron-id) into elements during transpile.
• Framework Integrations: Out-of-the-box support for Next.js, Vite, Webpack, Rollup, and esbuild.
• Automatic S3 Uploader: Automatically gzips and uploads source maps and location maps securely to Claron's backend.

🛠️ Developer Setup & Building

1. Install Dependencies

bun install
# or
npm install

2. Compile the Package

Bundles all entrypoints (Vite plugin, Webpack plugin, Next.js wrapper, Babel plugin) into the dist directory:

bun run build
# or
npm run build

🚀 Quick Usage Reference

Install in your target web application:

npm install -D @claron/sdk
# or
bun add -d @claron/sdk

Next.js Integration (next.config.ts)

import { withClaron } from '@claron/sdk/next'

export default withClaron({
  projectId: 'proj_YOUR_PROJECT_ID'
})({
  // Your standard Next.js config
})

Vite Integration (vite.config.ts)

import { defineConfig } from 'vite'
import { claronVitePlugin } from '@claron/sdk/vite'

export default defineConfig({
  plugins: [
    claronVitePlugin({
      projectId: 'proj_YOUR_PROJECT_ID'
    })
  ]
})

📂 SDK Project Structure

claron-sdk/
├── src/
│   ├── babel-plugin/     # Babel AST instrumentation (data-claron-id injection)
│   ├── plugins/          # Bundler-specific adapters (next, vite, webpack, rollup, esbuild)
│   ├── upload/           # Uploader logic (gzip maps + send locations-manifest)
│   ├── ci/               # Deployment notifier for CI/CD integrations
│   ├── types.ts          # TS Type Definitions
│   └── index.ts          # Core package exports
├── tsup.config.ts        # Bundler config to generate multi-format dists
├── tsconfig.json         # TypeScript compiler configurations
└── package.json          # Main scripts, exports, and dependencies

📘 Documentation

For a complete guide on variables, framework setups, edge-case handling (missing keys, third-party libraries, non-prod environments), and troubleshooting, check the Claron SDK Guide in the project root.