Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new package with renderToMarkup export #30105

Merged
merged 8 commits into from
Jun 27, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactClientConsoleConfigPlain';
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';

export type Response = any;
export opaque type ModuleLoading = mixed;
export opaque type SSRModuleMap = mixed;
export opaque type ServerManifest = mixed;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,82 @@
* @flow
*/

export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactClientConsoleConfigBrowser';
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';

export type Response = any;
export opaque type ModuleLoading = mixed;
export opaque type SSRModuleMap = mixed;
export opaque type ServerManifest = mixed;
import type {Thenable} from 'shared/ReactTypes';

export * from 'react-html/src/ReactHTMLLegacyClientStreamConfig.js';
export * from 'react-client/src/ReactClientConsoleConfigPlain';

export type ModuleLoading = null;
export type SSRModuleMap = null;
export opaque type ServerManifest = null;
export opaque type ServerReferenceId = string;
export opaque type ClientReferenceMetadata = mixed;
export opaque type ClientReference<T> = mixed; // eslint-disable-line no-unused-vars
export const resolveClientReference: any = null;
export const resolveServerReference: any = null;
export const preloadModule: any = null;
export const requireModule: any = null;
export const prepareDestinationForModule: any = null;
export opaque type ClientReferenceMetadata = null;
export opaque type ClientReference<T> = null; // eslint-disable-line no-unused-vars

export function prepareDestinationForModule(
moduleLoading: ModuleLoading,
nonce: ?string,
metadata: ClientReferenceMetadata,
) {
throw new Error(
'renderToMarkup should not have emitted Client References. This is a bug in React.',
);
}

export function resolveClientReference<T>(
bundlerConfig: SSRModuleMap,
metadata: ClientReferenceMetadata,
): ClientReference<T> {
throw new Error(
'renderToMarkup should not have emitted Client References. This is a bug in React.',
);
}

export function resolveServerReference<T>(
config: ServerManifest,
id: ServerReferenceId,
): ClientReference<T> {
throw new Error(
'renderToMarkup should not have emitted Server References. This is a bug in React.',
);
}

export function preloadModule<T>(
metadata: ClientReference<T>,
): null | Thenable<T> {
return null;
}

export function requireModule<T>(metadata: ClientReference<T>): T {
throw new Error(
'renderToMarkup should not have emitted Client References. This is a bug in React.',
);
}

export const usedWithSSR = true;

type HintCode = string;
type HintModel<T: HintCode> = null; // eslint-disable-line no-unused-vars

export function dispatchHint<Code: HintCode>(
code: Code,
model: HintModel<Code>,
): void {
// Should never happen.
}

export function preinitModuleForSSR(
href: string,
nonce: ?string,
crossOrigin: ?string,
) {
// Should never happen.
}

export function preinitScriptForSSR(
href: string,
nonce: ?string,
crossOrigin: ?string,
) {
// Should never happen.
}
32 changes: 32 additions & 0 deletions packages/react-html/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
# `react-html`

This package provides the ability to render standalone HTML from Server Components for use in embedded contexts such as e-mails and RSS/Atom feeds. It cannot use Client Components and does not hydrate. It is intended to be paired with the generic React package, which is shipped as `react` to npm.

## Installation

```sh
npm install react react-html
```

## Usage

```js
import { renderToMarkup } from 'react-html';
import EmailTemplate from './my-email-template-component.js'

async function action(email, name) {
"use server";
// ... in your server, e.g. a Server Action...
const htmlString = await renderToMarkup(<EmailTemplate name={name} />);
// ... send e-mail using some e-mail provider
await sendEmail({ to: email, contentType: 'text/html', body: htmlString });
}
```

Note that this is an async function that needs to be awaited - unlike the legacy `renderToString` in `react-dom`.

## API

### `react-html`

See https://react.dev/reference/react-html
5 changes: 5 additions & 0 deletions packages/react-html/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
'use strict';

throw new Error(
'react-html is not supported outside a React Server Components environment.',
);
5 changes: 5 additions & 0 deletions packages/react-html/npm/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
'use strict';

throw new Error(
'react-html is not supported outside a React Server Components environment.'
);
7 changes: 7 additions & 0 deletions packages/react-html/npm/react-html.react-server.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use strict';

if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react-html.react-server.production.js');
} else {
module.exports = require('./cjs/react-html.react-server.development.js');
}
38 changes: 38 additions & 0 deletions packages/react-html/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"name": "react-html",
"version": "19.0.0",
"private": true,
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that there's no flag here but the whole package is private so doesn't get publish once we land. We can land and iterate.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was worried this blocks it from being published in react-builds but it works: https://react-builds.vercel.app/api/prs/30105/packages/react-html

"description": "React package generating embedded HTML markup such as e-mails using Server Components.",
"main": "index.js",
"repository": {
"type": "git",
"url": "https://github.com/facebook/react.git",
"directory": "packages/react-html"
},
"keywords": [
"react"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/facebook/react/issues"
},
"homepage": "https://react.dev/",
"peerDependencies": {
"react": "^19.0.0"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we start off here with the correct approach since renderer and React need to be in lock step?

Suggested change
"react": "^19.0.0"
"react": "19.0.0"

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's change all packages at once if we do that.

},
"files": [
"LICENSE",
"README.md",
"index.js",
"react-html.react-server.js",
"cjs/"
],
"exports": {
".": {
"react-server": "./react-html.react-server.js",
"default": "./index.js"
},
"./src/*": "./src/*",
"./package.json": "./package.json"
}
}
10 changes: 10 additions & 0 deletions packages/react-html/react-html.react-server.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/

export * from './src/ReactHTMLServer';
32 changes: 32 additions & 0 deletions packages/react-html/src/ReactHTMLLegacyClientStreamConfig.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/

// TODO: The legacy one should not use binary.

export type StringDecoder = TextDecoder;

export function createStringDecoder(): StringDecoder {
return new TextDecoder();
}

const decoderOptions = {stream: true};

export function readPartialStringChunk(
decoder: StringDecoder,
buffer: Uint8Array,
): string {
return decoder.decode(buffer, decoderOptions);
}

export function readFinalStringChunk(
decoder: StringDecoder,
buffer: Uint8Array,
): string {
return decoder.decode(buffer);
}
Loading
Loading