(MY_QUERY);
247 |
248 | if (error) {
249 | throw error;
250 | }
251 |
252 | return (
253 |
254 | Films:
255 | {data?.allFilms.films.map((film) => (
256 |
257 | {film.title} ({new Date(film.releaseDate).getFullYear()})
258 |
259 | ))}
260 |
261 | );
262 | }
263 | ```
264 |
265 | # License
266 |
267 | express-tsx-views is distributed under the MIT license. [See LICENSE](./LICENSE) for details.
268 |
269 | [coveralls-image]: https://img.shields.io/coveralls/pmb0/express-tsx-views/master.svg
270 | [coveralls-url]: https://coveralls.io/r/pmb0/express-tsx-views?branch=master
271 | [build-image]: https://github.com/pmb0/express-tsx-views/workflows/Tests/badge.svg
272 | [build-url]: https://github.com/pmb0/express-tsx-views/actions?query=workflow%3ATests
273 |
--------------------------------------------------------------------------------
/__tests__/__snapshots__/react-view-engine.test.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`react-view-engine Rendering 1`] = `
4 | "
5 |
6 |
7 |
10 | Test
13 |
14 |
15 | Test
16 | Some component:
17 | Hello from MyComponent! Provided prop:
18 | "foo"
21 | props:
22 |
23 | {
24 | "title": "Test",
25 | "lang": "de"
26 | }
28 |
29 |
31 | context1:
32 |
33 | {
34 | "id": 1,
35 | "name": "test"
36 | }
38 |
39 |
41 | context2:
42 |
43 | {
44 | "someProperty": "mausi"
45 | }
47 |
48 |
49 |
50 | "
51 | `;
52 |
53 | exports[`react-view-engine Rendering with locals 1`] = `
54 | "
55 |
56 |
57 |
60 | from locals
63 |
64 |
65 | from locals
66 | Some component:
67 | Hello from MyComponent! Provided prop:
68 | "foo"
71 | props:
72 |
73 | {
74 | "title": "from locals"
75 | }
77 |
78 |
80 | context1:
81 |
82 | {
83 | "id": 1,
84 | "name": "test"
85 | }
87 |
88 |
90 | context2:
91 |
92 | {
93 | "someProperty": "mausi"
94 | }
96 |
97 |
98 |
99 | "
100 | `;
101 |
--------------------------------------------------------------------------------
/__tests__/react-view-engine.test.ts:
--------------------------------------------------------------------------------
1 | import { resolve } from 'path'
2 | import request from 'supertest'
3 | import { app } from '../example/app'
4 | import { setupReactViews } from '../src'
5 |
6 | describe('react-view-engine', () => {
7 | test('Rendering', async () => {
8 | const response = await request(app).get('/').expect(200)
9 |
10 | expect(response.text).toMatchSnapshot()
11 | })
12 |
13 | test('Rendering with locals', async () => {
14 | const response = await request(app).get('/with-locals').expect(200)
15 |
16 | expect(response.text).toMatchSnapshot()
17 | })
18 |
19 | test('without DOCTYPE', async () => {
20 | setupReactViews(app, {
21 | viewsDirectory: resolve(__dirname, '../example/views'),
22 | prettify: true,
23 | doctype: '',
24 | })
25 |
26 | const response = await request(app).get('/with-locals').expect(200)
27 | expect(response.text).toMatchInlineSnapshot(`
28 | "
29 |
30 |
33 | from locals
36 |
37 |
38 | from locals
39 | Some component:
40 | Hello from MyComponent! Provided prop:
41 | "foo"
44 | props:
45 |
46 | {
47 | "title": "from locals"
48 | }
50 |
51 |
53 | context1:
54 |
55 | {
56 | "id": 1,
57 | "name": "test"
58 | }
60 |
61 |
63 | context2:
64 |
66 |
67 |
68 | "
69 | `)
70 | })
71 | })
72 |
--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | extends: ['@commitlint/config-conventional'],
3 | }
4 |
--------------------------------------------------------------------------------
/example/app.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable toplevel/no-toplevel-side-effect */
2 | import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client'
3 | import { fetch } from 'cross-fetch'
4 | import express, { NextFunction, Request, Response } from 'express'
5 | import { resolve } from 'path'
6 | import {
7 | addReactContext,
8 | PrettifyRenderMiddleware,
9 | setupReactViews,
10 | } from '../src'
11 | import { ApolloRenderMiddleware } from '../src/apollo'
12 | import { MyContext, MyContext2 } from './my-context'
13 | import { Props } from './views/my-view'
14 |
15 | export const app = express()
16 |
17 | const apollo = new ApolloClient({
18 | ssrMode: true,
19 | link: createHttpLink({
20 | uri: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
21 | fetch,
22 | }),
23 | cache: new InMemoryCache(),
24 | })
25 |
26 | setupReactViews(app, {
27 | viewsDirectory: resolve(__dirname, 'views'),
28 | middlewares: [
29 | new ApolloRenderMiddleware(apollo),
30 | new PrettifyRenderMiddleware(),
31 | ],
32 | transform: async (html) => {
33 | // eslint-disable-next-line no-magic-numbers
34 | await new Promise((resolve) => setTimeout(resolve, 100))
35 | return html.replace('', 'h1{color:red}')
36 | },
37 | })
38 |
39 | // Set react context globally for all routes
40 | app.use((req: Request, res: Response, next: NextFunction) => {
41 | addReactContext(res, MyContext, {
42 | id: 1,
43 | name: 'test',
44 | })
45 | next()
46 | })
47 |
48 | app.get('/', (request: Request, res: Response) => {
49 | const data: Props = { title: 'Test', lang: 'de' }
50 |
51 | addReactContext(res, MyContext2, { someProperty: 'mausi' })
52 |
53 | res.render('my-view', data)
54 | })
55 |
56 | app.get(
57 | '/with-locals',
58 | (request: Request, res: Response>) => {
59 | res.locals.title = 'from locals'
60 | res.render('my-view')
61 | },
62 | )
63 |
64 | app.get('/gql', (request: Request, res: Response) => {
65 | const data: Props = { title: 'Test', lang: 'de' }
66 | res.render('my-gql-view', data)
67 | })
68 |
--------------------------------------------------------------------------------
/example/bin/www.ts:
--------------------------------------------------------------------------------
1 | import { AddressInfo } from 'net'
2 | import { app } from '../app'
3 |
4 | // eslint-disable-next-line no-magic-numbers
5 | const server = app.listen(8080, function () {
6 | const { address, port } = server.address() as AddressInfo
7 | // eslint-disable-next-line no-console
8 | console.log('✔ Example app listening at http://%s:%s', address, port)
9 | })
10 |
--------------------------------------------------------------------------------
/example/my-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react'
2 |
3 | export interface MyContextProps {
4 | id: number
5 | name: string
6 | }
7 |
8 | export const MyContext = createContext(undefined)
9 |
10 | export interface MyContext2Props {
11 | someProperty: string
12 | }
13 |
14 | export const MyContext2 = createContext(undefined)
15 |
--------------------------------------------------------------------------------
/example/views/dumper.component.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-magic-numbers */
2 | import React, { ReactElement } from 'react'
3 |
4 | export interface DumperProps {
5 | data: unknown
6 | caption?: string
7 | }
8 |
9 | export function Dumper({ caption, data }: DumperProps): ReactElement {
10 | return (
11 |
12 | {caption && {caption}: }
13 | {JSON.stringify(data, null, 2)}
14 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/example/views/my-component.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component, ReactElement } from 'react'
2 | import { Dumper } from './dumper.component'
3 |
4 | export interface Properties {
5 | myProp: string
6 | }
7 |
8 | export default class MyComponent extends Component {
9 | render(): ReactElement {
10 | return (
11 | <>
12 | Hello from {MyComponent.name}! Provided prop:{' '}
13 | (MY_QUERY)
37 |
38 | if (error) {
39 | throw error
40 | }
41 |
42 | return (
43 |
44 | {props.title}
45 | Some component:
46 | Films:
49 | {data?.allFilms.films.map((film) => (
50 |
51 | {film.title} ({new Date(film.releaseDate).getFullYear()})
52 |
53 | ))}
54 |
55 | )
56 | }
57 |
--------------------------------------------------------------------------------
/example/views/my-layout.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement, ReactNode } from 'react'
2 |
3 | export type Language = string
4 |
5 | export interface LayoutProps {
6 | lang: Language
7 | title: string
8 | children: ReactNode
9 | }
10 |
11 | export const MyLayout = ({
12 | children,
13 | lang,
14 | title,
15 | }: LayoutProps): ReactElement => {
16 | return (
17 |
18 |
19 |
20 | {title}
23 |
24 | {children}
25 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/example/views/my-view.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement, useContext } from 'react'
2 | import { MyContext, MyContext2 } from '../my-context'
3 | import { Dumper } from './dumper.component'
4 | import MyComponent from './my-component'
5 | import { MyLayout } from './my-layout'
6 |
7 | export interface Props {
8 | title: string
9 | lang: string
10 | }
11 |
12 | export default function MyView(props: Props): ReactElement {
13 | const context1 = useContext(MyContext)
14 | const context2 = useContext(MyContext2)
15 |
16 | return (
17 |
18 | {props.title}
19 | Some component:
20 |
21 |
30 | )
31 | }
32 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable toplevel/no-toplevel-side-effect */
2 | // For a detailed explanation regarding each configuration property, visit:
3 | // https://jestjs.io/docs/en/configuration.html
4 |
5 | module.exports = {
6 | // All imported modules in your tests should be mocked automatically
7 | // automock: false,
8 |
9 | // Stop running tests after `n` failures
10 | // bail: 0,
11 |
12 | // Respect "browser" field in package.json when resolving modules
13 | // browser: false,
14 |
15 | // The directory where Jest should store its cached dependency information
16 | // cacheDirectory: "/private/var/folders/3z/vt4dq0w132b_kg4gm2s7j33c0000gn/T/jest_dx",
17 |
18 | // Automatically clear mock calls and instances between every test
19 | clearMocks: true,
20 |
21 | // Indicates whether the coverage information should be collected while executing the test
22 | // collectCoverage: false,
23 |
24 | // An array of glob patterns indicating a set of files for which coverage information should be collected
25 | collectCoverageFrom: ['./src/**'],
26 |
27 | // The directory where Jest should output its coverage files
28 | coverageDirectory: 'coverage',
29 |
30 | // An array of regexp pattern strings used to skip coverage collection
31 | coveragePathIgnorePatterns: ['.dto.ts$'],
32 |
33 | // A list of reporter names that Jest uses when writing coverage reports
34 | coverageReporters: ['text', 'lcov'],
35 |
36 | // An object that configures minimum threshold enforcement for coverage results
37 | // coverageThreshold: undefined,
38 |
39 | // A path to a custom dependency extractor
40 | // dependencyExtractor: undefined,
41 |
42 | // Make calling deprecated APIs throw helpful error messages
43 | // errorOnDeprecated: false,
44 |
45 | // Force coverage collection from ignored files using an array of glob patterns
46 | // forceCoverageMatch: [],
47 |
48 | // A path to a module which exports an async function that is triggered once before all test suites
49 | // globalSetup: undefined,
50 |
51 | // A path to a module which exports an async function that is triggered once after all test suites
52 | // globalTeardown: undefined,
53 |
54 | // A set of global variables that need to be available in all test environments
55 | globals: {
56 | 'ts-jest': {
57 | tsconfig: 'tsconfig.json',
58 | },
59 | },
60 |
61 | // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
62 | // maxWorkers: "50%",
63 |
64 | // An array of directory names to be searched recursively up from the requiring module's location
65 | // moduleDirectories: [
66 | // "node_modules"
67 | // ],
68 |
69 | // An array of file extensions your modules use
70 | moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node'],
71 |
72 | // A map from regular expressions to module names that allow to stub out resources with a single module
73 | // moduleNameMapper: {},
74 |
75 | // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
76 | // modulePathIgnorePatterns: [],
77 |
78 | // Activates notifications for test results
79 | // notify: false,
80 |
81 | // An enum that specifies notification mode. Requires { notify: true }
82 | // notifyMode: "failure-change",
83 |
84 | // A preset that is used as a base for Jest's configuration
85 | // preset: undefined,
86 |
87 | // Run tests from one or more projects
88 | // projects: undefined,
89 |
90 | // Use this configuration option to add custom reporters to Jest
91 | // reporters: undefined,
92 |
93 | // Automatically reset mock state between every test
94 | // resetMocks: false,
95 |
96 | // Reset the module registry before running each individual test
97 | // resetModules: false,
98 |
99 | // A path to a custom resolver
100 | // resolver: undefined,
101 |
102 | // Automatically restore mock state between every test
103 | // restoreMocks: false,
104 |
105 | // The root directory that Jest should scan for tests and modules within
106 | // rootDir: undefined,
107 |
108 | // A list of paths to directories that Jest should use to search for files in
109 | // roots: [
110 | // ""
111 | // ],
112 |
113 | // Allows you to use a custom runner instead of Jest's default test runner
114 | // runner: "jest-runner",
115 |
116 | // The paths to modules that run some code to configure or set up the testing environment before each test
117 | // setupFiles: [],
118 |
119 | // A list of paths to modules that run some code to configure or set up the testing framework before each test
120 | // setupFilesAfterEnv: [],
121 |
122 | // A list of paths to snapshot serializer modules Jest should use for snapshot testing
123 | // snapshotSerializers: [],
124 |
125 | // The test environment that will be used for testing
126 | testEnvironment: 'node',
127 |
128 | // Options that will be passed to the testEnvironment
129 | // testEnvironmentOptions: {},
130 |
131 | // Adds a location field to test results
132 | // testLocationInResults: false,
133 |
134 | // The glob patterns Jest uses to detect test files
135 | // testMatch: [
136 | // "**/__tests__/**/*.[jt]s?(x)",
137 | // "**/?(*.)+(spec|test).[tj]s?(x)"
138 | // ],
139 |
140 | // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
141 | testPathIgnorePatterns: ['/dist/'],
142 |
143 | // The regexp pattern or array of patterns that Jest uses to detect test files
144 | // testRegex: [],
145 |
146 | // This option allows the use of a custom results processor
147 | // testResultsProcessor: undefined,
148 |
149 | // This option allows use of a custom test runner
150 | // testRunner: "jasmine2",
151 |
152 | // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
153 | // testURL: "http://localhost",
154 |
155 | // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
156 | // timers: "real",
157 |
158 | // A map from regular expressions to paths to transformers
159 | transform: {
160 | '^.+\\.(ts|tsx)$': 'ts-jest',
161 | },
162 |
163 | // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
164 | // transformIgnorePatterns: [
165 | // "/node_modules/"
166 | // ],
167 |
168 | // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
169 | // unmockedModulePathPatterns: undefined,
170 |
171 | // Indicates whether each individual test should be reported during the run
172 | // verbose: undefined,
173 |
174 | // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
175 | // watchPathIgnorePatterns: [],
176 |
177 | // Whether to use watchman for file crawling
178 | // watchman: true,
179 | }
180 |
--------------------------------------------------------------------------------
/nodemon.json:
--------------------------------------------------------------------------------
1 | {
2 | "restartable": "rs",
3 | "ignore": [".git", "node_modules/", "dist/", "coverage/"],
4 | "watch": ["src/"],
5 | "execMap": {
6 | "ts": "node -r ts-node/register --enable-source-maps"
7 | },
8 | "env": {
9 | "NODE_ENV": "development"
10 | },
11 | "ext": "js,json,ts,tsx"
12 | }
13 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "express-tsx-views",
3 | "version": "1.4.14",
4 | "main": "dist/index.js",
5 | "types": "dist/index.d.ts",
6 | "description": "Server-side JSX/TSX rendering for your express or NestJS application 🚀",
7 | "author": "Philipp Busse",
8 | "bugs": {
9 | "url": "https://github.com/pmb0/express-tsx-views/issues"
10 | },
11 | "homepage": "https://github.com/pmb0/express-tsx-views#readme",
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/pmb0/express-tsx-views.git"
15 | },
16 | "keywords": [
17 | "react",
18 | "typescript",
19 | "express",
20 | "nestjs",
21 | "ssr",
22 | "template-engine"
23 | ],
24 | "devDependencies": {
25 | "@apollo/client": "^3.3.11",
26 | "@commitlint/cli": "^17.0.0",
27 | "@commitlint/config-conventional": "^17.0.0",
28 | "@heise/eslint-config": "^20.0.7",
29 | "@semantic-release/changelog": "^6.0.0",
30 | "@semantic-release/commit-analyzer": "^9.0.0",
31 | "@semantic-release/git": "^10.0.0",
32 | "@semantic-release/npm": "^9.0.0",
33 | "@semantic-release/release-notes-generator": "^10.0.0",
34 | "@types/express": "^4.17.8",
35 | "@types/jest": "^28.0.0",
36 | "@types/react-dom": "^18.0.0",
37 | "@types/supertest": "^2.0.10",
38 | "cross-fetch": "^3.0.6",
39 | "express": "^4.17.1",
40 | "graphql": "^16.0.0",
41 | "husky": "^8.0.0",
42 | "jest": "^28.0.0",
43 | "lint-staged": "^13.0.0",
44 | "nodemon": "^2.0.13",
45 | "react": "^18.0.0",
46 | "react-dom": "^18.0.0",
47 | "semantic-release": "^19.0.0",
48 | "supertest": "^6.1.3",
49 | "ts-jest": "^28.0.0",
50 | "ts-node": "^10.0.0",
51 | "typescript": "^4.0.0"
52 | },
53 | "peerDependencies": {
54 | "react": ">= 16.13.1",
55 | "react-dom": ">= 16.13.1"
56 | },
57 | "husky": {
58 | "hooks": {
59 | "pre-commit": "lint-staged",
60 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
61 | }
62 | },
63 | "dependencies": {
64 | "prettier": "^2.0.5"
65 | },
66 | "scripts": {
67 | "build:test": "tsc --noEmit",
68 | "build": "tsc --build tsconfig.build.json",
69 | "clean": "rimraf dist",
70 | "lint": "eslint --cache .",
71 | "prebuild": "yarn clean",
72 | "start:example": "nodemon -w example --inspect example/bin/www.ts",
73 | "test": "jest",
74 | "prepare": "husky install"
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json",
3 | "extends": [
4 | ":separateMajorReleases",
5 | ":combinePatchMinorReleases",
6 | ":ignoreUnstable",
7 | ":prImmediately",
8 | ":renovatePrefix",
9 | ":semanticCommits",
10 | ":semanticPrefixFixDepsChoreOthers",
11 | ":updateNotScheduled",
12 | ":ignoreModulesAndTests",
13 | "group:monorepos",
14 | "group:recommended",
15 | "helpers:disableTypesNodeMajor"
16 | ],
17 | "rangeStrategy": "update-lockfile",
18 | "packageRules": [
19 | {
20 | "depTypeList": ["devDependencies"],
21 | "extends": ["schedule:weekly"],
22 | "automerge": true
23 | }
24 | ],
25 | "automerge": true,
26 | "major": {
27 | "automerge": false
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/apollo.ts:
--------------------------------------------------------------------------------
1 | export * from './handler/middleware/apollo-render.middleware'
2 |
--------------------------------------------------------------------------------
/src/handler/index.ts:
--------------------------------------------------------------------------------
1 | // Do not export apollo since it is an optional dependency
2 | // export * from './middleware/apollo-render.middleware'
3 | export * from './middleware/create-react-context.middleware'
4 | export * from './middleware/default-render.middleware'
5 | export * from './middleware/prettify-render.middleware'
6 | export * from './middleware/tsx-render.middleware'
7 | export * from './tsx-render-context'
8 |
--------------------------------------------------------------------------------
/src/handler/middleware/apollo-render.middleware.ts:
--------------------------------------------------------------------------------
1 | import { ApolloClient, ApolloProvider } from '@apollo/client'
2 | import { getMarkupFromTree } from '@apollo/client/react/ssr'
3 | import React from 'react'
4 | import { TsxRenderContext } from '../tsx-render-context'
5 | import { TsxRenderMiddleware } from './tsx-render.middleware'
6 |
7 | export class ApolloRenderMiddleware extends TsxRenderMiddleware {
8 | #apollo: ApolloClient
9 |
10 | constructor(apollo: ApolloClient) {
11 | super()
12 | this.#apollo = apollo
13 | }
14 |
15 | public createElement(context: TsxRenderContext): TsxRenderContext {
16 | context.element = React.createElement(
17 | ApolloProvider,
18 | {
19 | client: this.#apollo,
20 | children: null,
21 | },
22 | context.element,
23 | )
24 |
25 | return super.createElement(context)
26 | }
27 |
28 | public async render(context: TsxRenderContext): Promise {
29 | context.html = await getMarkupFromTree({ tree: context.element })
30 | return super.render(context)
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/handler/middleware/create-react-context.middleware.ts:
--------------------------------------------------------------------------------
1 | import React, { Context } from 'react'
2 | import { TsxRenderContext } from '../tsx-render-context'
3 | import { TsxRenderMiddleware } from './tsx-render.middleware'
4 |
5 | export class CreateReactContextRenderMiddleware<
6 | T = unknown,
7 | > extends TsxRenderMiddleware {
8 | readonly #context: Context
9 | readonly #value: T
10 |
11 | constructor(context: Context, value: T) {
12 | super()
13 | this.#context = context
14 | this.#value = value
15 | }
16 |
17 | public createElement(context: TsxRenderContext): TsxRenderContext {
18 | context.element = React.createElement(
19 | this.#context.Provider,
20 | { value: this.#value },
21 | context.element,
22 | )
23 |
24 | return super.createElement(context)
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/handler/middleware/default-render.middleware.ts:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/server'
3 | import { TsxRenderContext } from '../tsx-render-context'
4 | import { TsxRenderMiddleware } from './tsx-render.middleware'
5 |
6 | /**
7 | * All Concrete Handlers either handle a request or pass it to the next handler
8 | * in the chain.
9 | */
10 | export class DefaultTsxRenderMiddleware extends TsxRenderMiddleware {
11 | public createElement(context: TsxRenderContext): TsxRenderContext {
12 | context.element = React.createElement(context.component, context.vars)
13 | return super.createElement(context)
14 | }
15 |
16 | public async render(context: TsxRenderContext): Promise {
17 | if (!context.isRendered && context.element) {
18 | context.html = ReactDOM.renderToStaticMarkup(context.element)
19 | }
20 |
21 | return super.render(context)
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/handler/middleware/prettify-render.middleware.ts:
--------------------------------------------------------------------------------
1 | import prettier from 'prettier'
2 | import { TsxRenderContext } from '../tsx-render-context'
3 | import { TsxRenderMiddleware } from './tsx-render.middleware'
4 |
5 | export class PrettifyRenderMiddleware extends TsxRenderMiddleware {
6 | // eslint-disable-next-line @typescript-eslint/require-await
7 | public async render(context: TsxRenderContext): Promise {
8 | if (context.html) {
9 | context.html = prettier.format(context.html, {
10 | parser: 'html',
11 | })
12 | }
13 |
14 | return context
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/handler/middleware/tsx-render.middleware.ts:
--------------------------------------------------------------------------------
1 | import { TsxRenderContext } from '../tsx-render-context'
2 |
3 | /**
4 | * The default chaining behavior can be implemented inside a base handler class.
5 | */
6 | export abstract class TsxRenderMiddleware {
7 | private next?: TsxRenderMiddleware
8 |
9 | public setNext(next: TsxRenderMiddleware): TsxRenderMiddleware {
10 | this.next = next
11 | return next
12 | }
13 |
14 | public createElement(context: TsxRenderContext): TsxRenderContext {
15 | if (this.next) {
16 | return this.next.createElement(context)
17 | }
18 |
19 | return context
20 | }
21 |
22 | public async render(context: TsxRenderContext): Promise {
23 | if (this.next) {
24 | return this.next.render(context)
25 | }
26 |
27 | return context
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/handler/tsx-render-context.ts:
--------------------------------------------------------------------------------
1 | import { ReactElement, ReactHTML } from 'react'
2 |
3 | export class TsxRenderContext {
4 | private _element?: ReactElement
5 | private _html?: string
6 |
7 | constructor(
8 | private readonly _component: keyof ReactHTML,
9 | private readonly _vars: Record,
10 | ) {}
11 |
12 | get component(): keyof ReactHTML {
13 | return this._component
14 | }
15 |
16 | get vars(): Record {
17 | return this._vars
18 | }
19 |
20 | get element(): ReactElement | undefined {
21 | return this._element
22 | }
23 |
24 | set element(element: ReactElement | undefined) {
25 | this._element = element
26 | }
27 |
28 | get html(): string | undefined {
29 | return this._html
30 | }
31 |
32 | set html(html: string | undefined) {
33 | this._html = html
34 | }
35 |
36 | get isRendered(): boolean {
37 | return !!this._html
38 | }
39 |
40 | hasElement(): boolean {
41 | return this._element !== undefined
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './handler'
2 | export * from './react-view-engine'
3 | export * from './react-view-engine.interface'
4 |
--------------------------------------------------------------------------------
/src/react-view-engine.interface.ts:
--------------------------------------------------------------------------------
1 | import { Application } from 'express'
2 | import { Context } from 'react'
3 | import { TsxRenderMiddleware } from './handler'
4 |
5 | export interface ReactViewsOptions {
6 | /**
7 | * The directory where your views (`.tsx` files) are stored. Must be
8 | * specified.
9 | */
10 | viewsDirectory: string
11 |
12 | /**
13 | * [Doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype) to
14 | * be used. */
15 | doctype?: string
16 |
17 | /**
18 | * If activated, the generated HTML string is formatted using
19 | * [prettier](https://github.com/prettier/prettier)
20 | *
21 | * @deprecated use `PrettifyRenderMiddleware` instead, @see `middlewares`
22 | */
23 | prettify?: boolean
24 |
25 | /**
26 | * With this optional function the rendered HTML document can be modified. For
27 | * this purpose a function must be defined which gets the HTML `string` as
28 | * argument. The function returns a modified version of the HTML string as
29 | * `string`.
30 | */
31 | transform?: (html: string) => string | Promise
32 |
33 | middlewares?: TsxRenderMiddleware[]
34 | }
35 |
36 | export type EngineCallbackParameters = Parameters<
37 | Parameters[1]
38 | >
39 |
40 | export type ExpressLikeApp = Application
41 |
42 | export type ContextDefinition = [Context, T]
43 |
44 | export interface ReactViewsContext {
45 | contexts: ContextDefinition[]
46 | }
47 |
48 | export interface ExpressRenderOptions {
49 | [name: string]: unknown
50 | settings: Record
51 | _locals: Record
52 | cache: unknown
53 | contexts?: ContextDefinition[]
54 | }
55 |
--------------------------------------------------------------------------------
/src/react-view-engine.test.ts:
--------------------------------------------------------------------------------
1 | import express, { Express } from 'express'
2 | import { resolve } from 'path'
3 | import { reactViews, setupReactViews } from './react-view-engine'
4 |
5 | describe('react-view-engine', () => {
6 | let app: Express
7 | let engineSpy: jest.SpyInstance
8 | let setSpy: jest.SpyInstance
9 |
10 | beforeEach(() => {
11 | app = express()
12 | engineSpy = jest.spyOn(app, 'engine').mockImplementation()
13 | setSpy = jest.spyOn(app, 'set').mockImplementation()
14 | })
15 |
16 | describe('setupReactViews()', () => {
17 | it('throws an error if "viewDirectory" was not provided', () => {
18 | // @ts-ignore
19 | expect(() => setupReactViews(app, {})).toThrow(
20 | new Error('viewsDirectory missing'),
21 | )
22 | })
23 |
24 | it('sets the view engine', () => {
25 | setupReactViews(app, { viewsDirectory: '/tmp' })
26 |
27 | expect(engineSpy).toHaveBeenCalledWith('tsx', expect.any(Function))
28 | expect(setSpy).toHaveBeenCalledWith('view engine', 'tsx')
29 | expect(setSpy).toHaveBeenCalledWith('views', '/tmp')
30 | })
31 | })
32 |
33 | describe('reactViews()', () => {
34 | it('catches missing JSX file errors', async () => {
35 | const renderFile = reactViews({ viewsDirectory: __dirname })
36 |
37 | const callback = jest.fn()
38 | await renderFile('does-not-exist', {}, callback)
39 |
40 | expect(callback).toHaveBeenCalledWith(
41 | expect.objectContaining({
42 | message: `Cannot find module 'does-not-exist' from 'src/react-view-engine.ts'`,
43 | }),
44 | )
45 | })
46 |
47 | it('catches missing default exports', async () => {
48 | const renderFile = reactViews({ viewsDirectory: __dirname })
49 |
50 | const callback = jest.fn()
51 |
52 | // any .ts(x) file without a default export
53 | await renderFile(__filename, {}, callback)
54 |
55 | expect(callback).toHaveBeenCalledWith(
56 | new Error(`Module ${__filename} does not have a default export`),
57 | )
58 | })
59 |
60 | it('renders .tsx files', async () => {
61 | const renderFile = reactViews({ viewsDirectory: __dirname })
62 |
63 | const callback = jest.fn()
64 |
65 | await renderFile(
66 | resolve(__dirname, '../example/views/my-component'),
67 | {},
68 | callback,
69 | )
70 |
71 | expect(callback).toHaveBeenCalledWith(
72 | null,
73 | '\nHello from MyComponent! Provided prop: (
37 | res: Response,
38 | context: Context,
39 | value: T,
40 | ): void {
41 | const locals = (res as Response>).locals
42 | locals.contexts ??= []
43 | locals.contexts.unshift([context, value])
44 | }
45 |
46 | export function reactViews(reactViewOptions: ReactViewsOptions) {
47 | // eslint-disable-next-line complexity, sonarjs/cognitive-complexity
48 | return async function renderFile(
49 | ...[filename, options, next]: EngineCallbackParameters
50 | ): Promise {
51 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
52 | const { settings, _locals, cache, contexts, ...vars } =
53 | options as ExpressRenderOptions
54 |
55 | try {
56 | // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
57 | const Component = (await import(filename)).default
58 |
59 | if (!Component) {
60 | throw new Error(`Module ${filename} does not have a default export`)
61 | }
62 |
63 | // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
64 | let context = new TsxRenderContext(Component, vars)
65 |
66 | const defaultRenderer = new DefaultTsxRenderMiddleware()
67 |
68 | const middlewares = reactViewOptions.middlewares ?? []
69 |
70 | contexts?.forEach(([Context, props]) => {
71 | middlewares.push(new CreateReactContextRenderMiddleware(Context, props))
72 | })
73 |
74 | if (reactViewOptions.prettify ?? false) {
75 | middlewares.push(new PrettifyRenderMiddleware())
76 | }
77 |
78 | // eslint-disable-next-line sonarjs/no-ignored-return, unicorn/no-array-reduce
79 | middlewares.reduce((prev, next) => {
80 | prev.setNext(next)
81 | return next
82 | }, defaultRenderer)
83 |
84 | context = defaultRenderer.createElement(context)
85 |
86 | if (!context.hasElement()) {
87 | throw new Error('element was not created')
88 | }
89 |
90 | context = await defaultRenderer.render(context)
91 |
92 | if (!context.isRendered) {
93 | throw new Error('element was not rendered')
94 | }
95 |
96 | const doctype = reactViewOptions.doctype ?? '\n'
97 | const transform = reactViewOptions.transform || ((html) => html)
98 |
99 | // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
100 | next(null, await transform(doctype + context.html!))
101 | } catch (error) {
102 | next(error)
103 | }
104 | }
105 | }
106 |
--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "exclude": [
4 | "node_modules",
5 | "__tests__",
6 | "example",
7 | "test",
8 | "dist",
9 | "**/*spec.ts",
10 | "**/*test.ts"
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "declaration": true,
5 | "emitDecoratorMetadata": true,
6 | "esModuleInterop": true,
7 | "experimentalDecorators": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "incremental": true,
10 | "jsx": "react",
11 | "module": "commonjs",
12 | "outDir": "./dist",
13 | "sourceMap": true,
14 | "strict": true,
15 | "strictNullChecks": true,
16 | "strictPropertyInitialization": true,
17 | "target": "es2019"
18 | },
19 | "include": [
20 | "src/**/*",
21 | "__tests__/**/*",
22 | "example/**/*",
23 | "__mocks__/**/*",
24 | "index.ts"
25 | ],
26 | "exclude": ["node_modules", "dist"]
27 | }
28 |
--------------------------------------------------------------------------------