Page MenuHomeSealhub
Files F969657

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
```
By default we provide types for checking if tag is valid HTML element. If you want to create custom types and you get types checks feel free to extend the typing in your project. You can do that by adding `.d.ts` file to your project with following definition
```ts
declare global {
namespace JSX {
type IntrinsicElementMap = {
[K: string]: InstrictPropsInterface & {
children?: string | string[];
};
};
}
}
```
### 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
Sat, Nov 23, 08:41 (1 d, 20 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
547534
Default Alt Text
README.md (2 KB)

Event Timeline