Sign In

rendu

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rendu - npm Package Compare versions

Comparing version
0.0.0
 to
0.0.1
+1
dist/cli.d.mts
export * from "/home/pooya/Code/jamble/src/cli.ts";
+2
dist/cli.mjs
#! /usr/bin/env node
export * from "/home/pooya/Code/jamble/src/cli.ts";
+1
dist/index.d.mts
export * from "/home/pooya/Code/jamble/src/index.ts";
+1
dist/index.mjs
export * from "/home/pooya/Code/jamble/src/index.ts";
+21
LICENSE
MIT License
Copyright (c) Pooya Parsa <pooya@pi0.io>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+171
README.md
# rendu
🏎️ JavaScript Hypertext Preprocessor.
Rendu is a lightweight toolkit for mixing HTML and JavaScript with a focus on simplicity, standards and progressive rendering.
> [!WARNING]
> This is an experimental PoC.
> [!NOTE]
> See [playground](./playground/) ([online playground](https://stackblitz.com/github/h3js/rendu/tree/main/playground?file=index.html)) for demos and [syntax](#syntax) section for usage.
## CLI
Using the `rendu` CLI, you can start a local web server to serve static files and render `.html` files as templates (powered by [srvx](https://srvx.h3.dev)).
```sh
npx rendu
```
## Programmatic API
<!-- automd:jsdocs src="./src/index.ts" -->
### `compileTemplate(template, opts)`
Compile a template string into a render function.
**Example:**
```ts
import { compileTemplate } from "rendu";
const template = `
<h1><?= title ?></h1>
<ul>
<? for (const item of items) { ?>
<li><?= item ?></li>
<? } ?>
</ul>
`;
const render = compileTemplate(template, { stream: false });
const html = await render({
title: "My List",
items: ["Item 1", "Item 2", "Item 3"],
});
console.log(html);
// Output:
// <h1>My List</h1>
// <ul>
// <li>Item 1</li>
// <li>Item 2</li>
// <li>Item 3</li>
// </ul>
```
### `renderToResponse(htmlTemplate, opts)`
Renders an HTML template to a Response object.
The template can access the following variables:
- `globalThis`: The global object.
- `$REQUEST`: The incoming Request object (if provided).
- `$METHOD`: The HTTP method of the request (if provided).
- `$URL`: The URL of the request as a URL object (if provided).
- `$HEADERS`: The headers of the request (if provided).
- `$RESPONSE`: An object to customize the response, with properties: status, statusText, and headers.
**Example:**
```ts
import { compileTemplate, renderToResponse } from "rendu";
const render = compileTemplate(template, { stream: true });
const response = await renderToResponse(render, { request });
```
<!-- /automd -->
## Syntax
Rendu uses PHP-style tags to embed JavaScript within HTML templates:
### Server Scripts
Use `<script server>` to execute JavaScript on the server where it appears:
```html
<script server>
globalThis.visitedPagesCount ??= 0;
globalThis.visitedPagesCount++;
</script>
```
### Output Expressions
Use `<?= expression ?>` to output values:
```html
<h1><?= title ?></h1>
<div>Page visited: <?= visitedPagesCount ?></div>
```
### Control Structures
Use `<? ... ?>` for JavaScript control flow:
```html
<? if (items.length === 0) { ?>
<p>No items found.</p>
<? } ?> <? for (const item of items) { ?>
<li><?= item.name ?></li>
<? } ?>
```
### Streaming Content
Use `echo()` function for streaming content. Accepts: strings, functions, Promises, Response objects, or ReadableStreams:
```html
<script server>
echo("Hello");
echo(async () => fetch("https://api.example.com/data"));
echo(() => "World");
</script>
```
### Global Variables
Access request context and global state:
- `$REQUEST`: The incoming Request object
- `$METHOD`: HTTP method (GET, POST, etc.)
- `$URL`: Request URL object
- `$HEADERS`: Request headers
- `$RESPONSE`: Response configuration object
- `$GLOBALS`: Global state object
- `globalThis`: Global JavaScript object
## Development
<details>
<summary>local development</summary>
- Clone this repository
- Install the latest LTS version of [Node.js](https://nodejs.org/en/)
- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
- Install dependencies using `pnpm install`
- Run interactive tests using `pnpm dev`
</details>
## Perior Arts
- [jaubourg/jhp](https://github.com/jaubourg/jhp)
- [atinux/pjs](https://github.com/atinux/pjs)
- [mde/ejs](https://github.com/mde/ejs)
## License
Published under the [MIT](https://github.com/unjs/rendu/blob/main/LICENSE) license.
+46
-1
package.json

@@ -1,1 +0,46 @@

{ "name": "rendu", "version": "0.0.0" }
{
"name": "rendu",
"version": "0.0.1",
"description": "",
"repository": "h3js/rendu",
"license": "MIT",
"sideEffects": false,
"type": "module",
"exports": {
".": "./dist/index.mjs"
},
"types": "./dist/index.d.mts",
"bin": "./dist/cli.mjs",
"files": [
"dist"
],
"scripts": {
"build": "obuild",
"dev": "vitest dev",
"play": "pnpm rendu playground",
"rendu": "node ./src/cli.ts",
"lint": "eslint . && prettier -c .",
"lint:fix": "automd && eslint . --fix && prettier -w .",
"prepack": "pnpm build",
"release": "pnpm test && changelogen --release && npm publish && git push --follow-tags",
"test": "pnpm lint && pnpm test:types && vitest run --coverage",
"test:types": "tsc --noEmit --skipLibCheck"
},
"dependencies": {
"srvx": "^0.8.14"
},
"devDependencies": {
"@types/node": "^24.3.0",
"@vitest/coverage-v8": "^3.2.4",
"automd": "^0.4.0",
"changelogen": "^0.6.2",
"eslint": "^9.33.0",
"eslint-config-unjs": "^0.5.0",
"rendu": "workspace:*",
"obuild": "^0.2.1",
"prettier": "^3.6.2",
"typescript": "^5.9.2",
"vitest": "^3.2.4"
},
"packageManager": "pnpm@10.15.0"
}