Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.awfixer.me/llms.txt

Use this file to discover all available pages before exploring further.

JSTime supports .jsx and .tsx files out of the box. JSTime’s internal transpiler converts JSX syntax into vanilla JavaScript before execution. 
function Component(props: {message: string}) {
  return (
    <body>
      <h1 style={{color: 'red'}}>{props.message}</h1>
    </body>
  );
}

console.log(<Component message="Hello world!" />);
JSTime implements special logging for JSX to make debugging easier. 
$ jstime run react.tsx
<Component message="Hello world!" />

​
Prop punning

The JSTime runtime also supports “prop punning” for JSX. This is a shorthand syntax useful for assigning a variable to a prop with the same name. 
function Div(props: {className: string;}) {
  const {className} = props;

  // without punning
  return <div className={className} />;
  // with punning
  return <div {className} />;
}

​
Server-side rendering

To server-side render (SSR) React in an HTTP server: 
import {renderToReadableStream} from 'react-dom/server';

function Component(props: {message: string}) {
  return (
    <body>
      <h1 style={{color: 'red'}}>{props.message}</h1>
    </body>
  );
}

JSTime.serve({
  port: 4000,
  async fetch() {
    const stream = await renderToReadableStream(
      <Component message="Hello from server!" />
    );
    return new Response(stream, {
      headers: {'Content-Type': 'text/html'},
    });
  },
});
React 18.3 and later includes an SSR optimization that takes advantage of JSTime’s “direct” ReadableStream implementation.