npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, πŸ‘‹, I’m Ryan HefnerΒ  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you πŸ™

Β© 2024 – Pkg Stats / Ryan Hefner

express-tsx-views

v2.0.0-beta.2

Published

Server-side JSX/TSX rendering for your express or NestJS application πŸš€

Downloads

1,400

Readme

npm version Test Coverage Build Status

Description

With this template engine, TSX files can be rendered server-side by your Express application. Unlike other JSX express renderers, this one does not rely on JSX files being transpiled by babel at runtime. Instead, TSX files are processed once by the tsc compiler.

For this to work, the templates are imported dynamically during rendering. And for this you have to provide a default export in your main TSX files. (Embeddable TSX components don't have to use a default export).

Highlights

  • Fast, since the JSX/TSX files do not have to be transpiled on-the-fly with every request
  • Works with compiled files (.js / node) and uncompiled files (.tsx / ts-node, ts-jest, ...)
  • Provides the definition of React contexts on middleware level
  • Supports execution of GraphQL queries from JSX components

Table of contents

Usage

$ npm install --save express-tsx-views

You have to set the jsx setting in your TypeScript configuration tsconfig.json to the value react and to enable esModuleInterop:

{
  "compilerOptions": {
    "jsx": "react",
    "esModuleInterop": true
  }
}

This template engine can be used in express and NestJS applications. The function setupReactViews() is provided, with which the engine is made available to the application.

import { setupReactViews } from "express-tsx-views";

const options = {
  viewsDirectory: path.resolve(__dirname, "../views"),
};

setupReactViews(app, options);

The following options may be passed:

| Option | Type | Description | Default | | ---------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | | viewsDirectory | string | The directory where your views (.tsx files) are stored. Must be specified. | - | | doctype | string | Doctype to be used. | <!DOCTYPE html>\n | | transform | (html: string) => string | With this optional function the rendered HTML document can be modified. For this purpose a function must be defined which gets the HTML string as argument. The function returns a modified version of the HTML string as string. | - | | middlewares | TsxRenderMiddleware[] | A list of TsxRenderMiddleware objects that can be used to modify the render context. See Render middlewares | - |

Express

Example express app (See also example/app.ts in this project):

import express from "express";
import { resolve } from "path";
import { setupReactViews } from "express-tsx-views";
import { Props } from "./views/my-view";

export const app = express();

setupReactViews(app, {
  viewsDirectory: resolve(__dirname, "views"),
  prettify: true, // Prettify HTML output
});

app.get("/my-route", (req, res, next) => {
  const data: Props = { title: "Test", lang: "de" };
  res.render("my-view", data);
});

app.listen(8080);

views/my-view.tsx:

import React, { Component } from "react";
import MyComponent from "./my-component";
import { MyLayout } from "./my-layout";

export interface Props {
  title: string;
  lang: string;
}

// Important -- use the `default` export
export default class MyView extends Component<Props> {
  render() {
    return <div>Hello from React! Title: {this.props.title}</div>;
  }
}

NestJS

See nestjs-tsx-views.

express-tsx-views can also be used in NestJS. For this purpose the template engine must be made available in your main.ts:

Render Middlewares

Prettify

Prettifies generated HTML markup using prettier.

setupReactViews(app, {
  middlewares: [new PrettifyRenderMiddleware()],
});

Provide React Context

Provides a react context when rendering your react view.

// my-context.ts
import {createContext} from 'react'

export interface MyContextProps = {name: string}

export const MyContext = createContext<MyContextProps | undefined>(undefined)

Use addReactContext() to set the context in your route or in any other middleware:

// app.ts

// Route:
app.get("/", (request: Request, res: Response) => {
  addReactContext(res, MyContext, { name: "philipp" });

  res.render("my-view");
});

// Middleware:
app.use((req: Request, res: Response, next: NextFunction) => {
  addReactContext(res, MyContext, {
    name: "philipp",
  });
  next();
});

Now you can consume the context data in any component:

// my-component.tsx
import { useContext } from "react";
import { MyContext } from "./my-context";

export function MyComponent() {
  const { name } = useContext(MyContext);
  return <span>Hallo, {name}!</span>;
}

GraphQL

This module supports the execution of GraphQL queries from the TSX template. For this purpose graphql, @apollo/client and cross-fetch have to be installed separately:

$ npm install --save @apollo/client cross-fetch

Now you can create an ApolloRenderMiddleware object and configure it as a middleware within express-tsx-views:

import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
import { ApolloRenderMiddleware } from "express-tsx-views/dist/apollo";
// needed to create a apollo client HTTP link:
import { fetch } from "cross-fetch";

// Apollo client linking to an example GraphQL server
const apollo = new ApolloClient({
  ssrMode: true,
  link: createHttpLink({
    uri: "https://swapi-graphql.netlify.app/.netlify/functions/index",
    fetch,
  }),
  cache: new InMemoryCache(),
});

setupReactViews(app, {
  viewsDirectory: resolve(__dirname, "views"),
  middlewares: [new ApolloRenderMiddleware(apollo)],
});

Example view (see the example folder in this project):

export interface Film {
  id: string;
  title: string;
  releaseDate: string;
}

export interface AllFilms {
  allFilms: {
    films: Film[];
  };
}

const MY_QUERY = gql`
  query AllFilms {
    allFilms {
      films {
        id
        title
        releaseDate
      }
    }
  }
`;

export interface Props {
  title: string;
  lang: string;
}

export default function MyView(props: Props): ReactElement {
  const { data, error } = useQuery<AllFilms>(MY_QUERY);

  if (error) {
    throw error;
  }

  return (
    <MyLayout lang={props.lang} title={props.title}>
      <h2>Films:</h2>
      {data?.allFilms.films.map((film) => (
        <ul key={film.id}>
          {film.title} ({new Date(film.releaseDate).getFullYear()})
        </ul>
      ))}
    </MyLayout>
  );
}

License

express-tsx-views is distributed under the MIT license. See LICENSE for details.