Skip to content
Closed
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
43 changes: 41 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@

## Summary

Eta is a lightweight and blazing fast embedded JS templating engine that works inside Node, Deno, and the browser. It's written in TypeScript and emphasizes great performance, configurability, and small bundle size.
Eta is a lightweight and blazing fast embedded JS templating engine that works inside Node, Deno, React Native, and the browser. It's written in TypeScript and emphasizes great performance, configurability, and small bundle size.

> 🎯 **Built with [ts-base](https://github.com/bgub/ts-base)** — A TypeScript library starter template featuring Biome, Vitest, tsdown, and automated releases. Check out ts-base for a modern TypeScript project setup!

Expand All @@ -36,7 +36,7 @@ Eta is a lightweight and blazing fast embedded JS templating engine that works i
- 📦 0 dependencies
- 💡 Only ~3.5 KB minzipped
- ⚡️ Written in TypeScript
- ✨ Deno support (+ Node and browser)
- ✨ Deno support (+ Node, React Native, and browser)
- 🚀 Super Fast
- 🔧 Configurable
- Plugins, custom delimiters, caching
Expand Down Expand Up @@ -80,6 +80,45 @@ const res = eta.render("./simple", { name: "Ben" });
console.log(res); // Hi Ben!
```

## React Native

Eta works out of the box with React Native! The library automatically uses a browser-compatible core build when bundled with Metro.

### Basic Usage

```tsx
import { Eta } from "eta";

const eta = new Eta();

// Load templates as strings (e.g., from bundled assets or API)
eta.loadTemplate("greeting", "Hello <%= it.name %>!");

// Render using the template name prefixed with @
const result = eta.render("@greeting", { name: "World" });
console.log(result); // "Hello World!"
```

### Inline Template Rendering

For simple use cases, you can render template strings directly:

```tsx
import { Eta } from "eta";

const eta = new Eta();

const result = eta.renderString("Hello <%= it.name %>!", { name: "React Native" });
console.log(result); // "Hello React Native!"
```

### Requirements

- React Native 0.72+ (Metro bundler with `exports` support)
- For earlier versions, import from `eta/core` directly

> **Note:** Since React Native doesn't have filesystem access, use `loadTemplate()` to register template strings (from bundled assets, AsyncStorage, or network requests) and render them by name prefixed with `@`.

## FAQs

<details>
Expand Down
9 changes: 6 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"type": "module",
"exports": {
".": {
"react-native": "./dist/core.js",
"types": {
"import": "./dist/index.d.mts",
"require": "./dist/index.d.cts"
Expand All @@ -24,12 +25,14 @@
"require": "./dist/index.cjs"
},
"./core": {
"react-native": "./dist/core.js",
"types": "./dist/core.d.ts",
"require": "./dist/core.js",
"import": "./dist/core.js",
"types": "./dist/core.d.ts"
"import": "./dist/core.js"
},
"./package.json": "./package.json"
},
"react-native": "./dist/core.js",
"main": "./dist/index.cjs",
"module": "./dist/index.mjs",
"types": "./dist/index.d.mts",
Expand Down Expand Up @@ -72,4 +75,4 @@
"typescript": "^5.9.3",
"vitest": "^4.0.8"
}
}
}