npmpackage.info

Gathering detailed insights and metrics for preact-render-to-string

Other packages similar to preact-render-to-string

preact

10.25.0

Fast 3kb React-compatible Virtual DOM library.

next-plugin-preact

3.0.7

Preact plugin for Next.js

@preact/signals-core

1.8.0

Manage state with style in every framework

@preact/signals

1.3.1

Manage state with style in Preact

Gathering detailed insights and metrics for preact-render-to-string

preact-render-to-string

📄 Universal rendering for Preact: render JSX and Preact components to HTML.

6.5.11

653

MIT

JavaScript

3.70 kB

161,657,180 5.2

Installations

npm install preact-render-to-string

Pull Requests

Open

13

Total

273

Closed

39

Merged

221

Issues

Open

11

Total

123

Closed

112

Releases

v6.5.11

Published on 14 Sept 2024

v6.5.10

Published on 29 Aug 2024

v6.5.9

Published on 15 Aug 2024

v6.5.8

Published on 10 Aug 2024

v6.5.7

Published on 24 Jul 2024

v6.5.6

Published on 17 Jul 2024

View all 94 releases

Developer

preactjs

Developer Guide

BETA

Module System

CommonJS, ESM

Min. Node Version

Typescript Support

Yes

Node Version

18.20.4

NPM Version

10.7.0 Statistics

653 Stars

597 Commits

92 Forks

10 Watching

39 Branches

50 Contributors

Updated on 16 Nov 2024

Bundle Size

8.68 kB

Minified

3.70 kB

Minified + Gzipped

Bundlephobia

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

161,657,180

Last day

1.1%

278,177

Compared to previous day

Last week

2.5%

1,558,470

Compared to previous week

Last month

10.5%

6,492,210

Compared to previous month

Last year

46.7%

64,399,596

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

preact-render-to-string

Render JSX and Preact components to an HTML string.

Works in Node & the browser, making it useful for universal/isomorphic rendering.

>> Cute Fox-Related Demo (@ CodePen) <<

Render JSX/VDOM to HTML

1import { render } from 'preact-render-to-string';
2import { h } from 'preact';
3/** @jsx h */
4
5let vdom = <div class="foo">content</div>;
6
7let html = render(vdom);
8console.log(html);
9// <div class="foo">content</div>

Render Preact Components to HTML

1import { render } from 'preact-render-to-string';
2import { h, Component } from 'preact';
3/** @jsx h */
4
5// Classical components work
6class Fox extends Component {
7	render({ name }) {
8		return <span class="fox">{name}</span>;
9	}
10}
11
12// ... and so do pure functional components:
13const Box = ({ type, children }) => (
14	<div class={`box box-${type}`}>{children}</div>
15);
16
17let html = render(
18	<Box type="open">
19		<Fox name="Finn" />
20	</Box>
21);
22
23console.log(html);
24// <div class="box box-open"><span class="fox">Finn</span></div>

Render JSX / Preact / Whatever via Express!

1import express from 'express';
2import { h } from 'preact';
3import { render } from 'preact-render-to-string';
4/** @jsx h */
5
6// silly example component:
7const Fox = ({ name }) => (
8	<div class="fox">
9		<h5>{name}</h5>
10		<p>This page is all about {name}.</p>
11	</div>
12);
13
14// basic HTTP server via express:
15const app = express();
16app.listen(8080);
17
18// on each request, render and return a component:
19app.get('/:fox', (req, res) => {
20	let html = render(<Fox name={req.params.fox} />);
21	// send it back wrapped up as an HTML5 document:
22	res.send(`<!DOCTYPE html><html><body>${html}</body></html>`);
23});

Error Boundaries

Rendering errors can be caught by Preact via getDerivedStateFromErrors or componentDidCatch. To enable that feature in preact-render-to-string set errorBoundaries = true

1import { options } from 'preact';
2
3// Enable error boundaries in `preact-render-to-string`
4options.errorBoundaries = true;

`Suspense` & `lazy` components with `preact/compat`

1npm install preact preact-render-to-string

1export default () => {
2	return <h1>Home page</h1>;
3};

1import { Suspense, lazy } from 'preact/compat';
2
3// Creation of the lazy component
4const HomePage = lazy(() => import('./pages/home'));
5
6const Main = () => {
7	return (
8		<Suspense fallback={<p>Loading</p>}>
9			<HomePage />
10		</Suspense>
11	);
12};

1import { renderToStringAsync } from 'preact-render-to-string';
2import { Main } from './main';
3
4const main = async () => {
5	// Rendering of lazy components
6	const html = await renderToStringAsync(<Main />);
7
8	console.log(html);
9	// <h1>Home page</h1>
10};
11
12// Execution & error handling
13main().catch((error) => {
14	console.error(error);
15});

License

MIT

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

45 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-9pv7-vfvm-6vr7
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-353f-5xf4-qw67
Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3
Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-g6ww-v8xp-vmwg
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7

Score

5.2

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to preact-render-to-string

Other packages similar to preact-render-to-string

preact-render-to-string

Installations

Pull Requests

13

273

39

221

Issues

11

123

112

Releases

Developer

Developer Guide

CommonJS, ESM

Yes

18.20.4

10.7.0

Statistics

Bundle Size

8.68 kB

3.70 kB

Languages

Total Downloads

161,657,180

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

preact-render-to-string

Render JSX/VDOM to HTML

Render Preact Components to HTML

Render JSX / Preact / Whatever via Express!

Error Boundaries

Suspense & lazy components with preact/compat

License

10

10

10

10

10

5

0

0

0

0

0

0

5.2

/10

`Suspense` & `lazy` components with `preact/compat`