tempstream
v0.4.5
Published
A template function that produces a stream that sends chunks of data as soon as possible
Downloads
27
Keywords
Readme
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",
"jsxFactory": "TempstreamJSX.createElement",
"jsxFragmentFactory": "TempstreamJSX.Fragment",
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.
Simple 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
declare global {
namespace JSX {
type IntrinsicElementMap = {
[K: string]: InstrictPropsInterface & {
children?: string | string[];
};
};
}
}
Using <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
calledhtml
, which escapes all parameters within it