@wasm-fmt/clang-format/README.md

A tool to format C/C++/Java/JavaScript/JSON/Objective-C/Protobuf/C# code

[![Test](https://github.com/wasm-fmt/clang-format/actions/workflows/test.yml/badge.svg)](https://github.com/wasm-fmt/clang-format/actions/workflows/test.yml)

# Install

[![npm](https://img.shields.io/npm/v/@wasm-fmt/clang-format?color=f34b7d)](https://www.npmjs.com/package/@wasm-fmt/clang-format)

```bash
npm install @wasm-fmt/clang-format
```

[![jsr.io](https://jsr.io/badges/@fmt/clang-format?color=f34b7d)](https://jsr.io/@fmt/clang-format)

```bash
npx jsr add @fmt/clang-format
```

# Usage

## CLI

This repository contains 3 executable files, namely `clang-format`, `git-clang-format` and `clang-format-diff`.
For more information, please refer to https://clang.llvm.org/docs/ClangFormat.html

## Node.js / Deno / Bun / Bundler

```javascript
import { format } from "@wasm-fmt/clang-format";

const source = `
#include <iostream>
using namespace std;
auto main() -> int{
std::cout << "Hello World!" << std::endl;
return 0;}
`;

// JSON representation of Clang-Format Style Options
const config = JSON.stringify({
	BasedOnStyle: "Chromium",
	IndentWidth: 4,
	ColumnLimit: 80,
});

// or YAML representation of Clang-Format Style Options which is used in `.clang-format` file
const config2 = `---
BasedOnStyle: Chromium
IndentWidth: 4
ColumnLimit: 80

...
`;

// or the preset name
const config3 = "Chromium";

const formatted = format(source, "main.cc", config);

console.log(formatted);
```

The third argument of `format` is a Clang-Format Style Options, which can be one of the following:

1. A preset: LLVM, GNU, Google, Chromium, Microsoft, Mozilla, WebKit.
2. A YAML/JSON string representing the style options.
3. the string content of a `.clang-format` file.

See [Clang-Format Style Options](https://clang.llvm.org/docs/ClangFormatStyleOptions.html) for more information.

## Web

For web environments, you need to initialize WASM module manually:

```javascript
import init, { format } from "@wasm-fmt/clang-format/web";

await init();

const source = `
#include <iostream>
using namespace std;
auto main() -> int{
std::cout << "Hello World!" << std::endl;
return 0;}
`;

const formatted = format(source, "main.cc", "Chromium");
console.log(formatted);
```

### Vite

```JavaScript
import init, { format } from "@wasm-fmt/clang-format/vite";

await init();
// ...
```

## Entry Points

- `.` - Auto-detects environment (Node.js uses node, Webpack uses bundler, default is ESM)
- `./node` - Node.js environment (no init required)
- `./esm` - ESM environments like Deno (no init required)
- `./bundler` - Bundlers like Webpack (no init required)
- `./web` - Web browsers (requires manual init)
- `./vite` - Vite bundler (requires manual init)

# How does it work?

[Clang-Format] is a tool to format C/C++/Java/JavaScript/TypeScript/Objective-C/Protobuf/C# code.

This package is a WebAssembly build of Clang-Format, with a JavaScript wrapper.

[Clang-Format]: https://clang.llvm.org/docs/ClangFormat.html

# Build from source

1. Install [LLVM](https://llvm.org/docs/GettingStarted.html) and [Clang](https://clang.llvm.org/get_started.html) (version 18 or later).
2. Install [CMake](https://cmake.org/download/) (version 3.27 or later).
3. Install [Ninja](https://ninja-build.org/) (version 1.11 or later).
4. Install [Emscripten](https://emscripten.org/docs/getting_started/downloads.html) (version 4.0.9).
5. Clone this repository.
6. Run scripts/build.sh.