Tempstream NPM

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

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>
  );
}