Page MenuHomeSealhub
Files F12657566

README.md
No OneTemporary
Actions

README.md
View Options

# Tempstream
Better templating in js:
- renders to a stream instead of a string, so for example an HTML response can start being sent before all of it is rendered
- takes promises as values and awaits them automatically
- takes arrays as values and joins them with `\n` automatically
## Usage:
```
lang=ts
import {tempstream} from "tempstream";
const name = Promise.resolve("John");
const result = tempstream/* HTML */`Hello, ${name}`; // returns a stream with "Hello, John"
```
### Using JSX syntax
To use jsx with this lib you will have to create esbuild configuration.
```
lang=js
const esbuild = require("esbuild");
const glob = require("tiny-glob");
async function build() {
const entryPoints = await glob("src/**/*.ts");
esbuild.build({
bundle: false,
target: "es2022",
platform: "node",
format: "cjs",
entryPoints: ["src/**/*.tsx"],
outdir: "dist",
jsxFactory: "TempstreamJSX.createElement",
});
}
build();
```
You can configure it to your needs, just keep the : `jsxFactory: "TempstreamJSX.createElement",`, `bundle: true,` and `platform: "node" parts.
If you use typescript you will olso need to update your `tsconfig.json`
```
lang=json
"jsx": "react",
"reactNamespace": "TempstreamJSX"
```
Then you can create `tsx` or `jsx` file. You will need to add `import { TempstreamJSX } from "tempstream";`. It's literally the same thing you do in React (`import React from "react";`) we just use our utility that will create streams out of jsx/tsx elements.
Smiple app rendering html stream:
```
lang = tsx;
import { TempstreamJSX } from "tempstream";
import streamToString from "tempstream/tostring";
const Component = () => (
<div id="container">
<Component1
data={{
title: "Hello",
description: "Description.",
iteration: 4,
annotations: ["First", "Second"],
}}
/>
</div>
);
const component = Component();
const result = await streamToString(component);
// ... save result to file or somthing
```
### Using &lt;style> with JSX syntax
JSX does not support native CSS syntax. To add a small snippet of CSS to your JSX-rendered HTML, use this trick:
```
lang=jsx
function myComponent(id) {
return (
<div class={`some-class--${id}`}>
{
/* HTML */ `<style>
.ds {
background-color: #dsad;
}
</style>`
}
<input id={`${id}`} />
</div>
);
}
```
## TODO
- add a wrapper for `tempstream` called `html`, which escapes all
parameters within it

File Metadata

Mime Type
text/html
Expires
Fri, Nov 28, 15:19 (2 h, 32 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1078010
Default Alt Text
README.md (2 KB)

Event Timeline