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

[Fax] Move react-html to react-markup #30688

Merged
merged 1 commit into from
Aug 14, 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 @@ -9,7 +9,7 @@

import type {Thenable} from 'shared/ReactTypes';

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

export type ModuleLoading = null;
Expand Down
7 changes: 0 additions & 7 deletions packages/react-html/npm/index.js

This file was deleted.

7 changes: 0 additions & 7 deletions packages/react-html/npm/react-html.react-server.js

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
# `react-html`
# `react-markup`

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
npm install react react-markup
```

## Usage

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

async function action(email, name) {
Expand All @@ -27,6 +27,6 @@ Note that this is an async function that needs to be awaited - unlike the legacy

## API

### `react-html`
### `react-markup`

See https://react.dev/reference/react-html
See https://react.dev/reference/react-markup
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@
* @flow
*/

export * from './src/ReactHTMLClient';
export * from './src/ReactMarkupClient';
7 changes: 7 additions & 0 deletions packages/react-markup/npm/index.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-markup.production.js');
} else {
module.exports = require('./cjs/react-markup.development.js');
}
7 changes: 7 additions & 0 deletions packages/react-markup/npm/react-markup.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-markup.react-server.production.js');
} else {
module.exports = require('./cjs/react-markup.react-server.development.js');
}
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"name": "react-html",
"name": "react-markup",
"version": "19.0.0",
"private": true,
"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"
"directory": "packages/react-markup"
},
"keywords": [
"react"
Expand All @@ -24,12 +24,12 @@
"LICENSE",
"README.md",
"index.js",
"react-html.react-server.js",
"react-markup.react-server.js",
"cjs/"
],
"exports": {
".": {
"react-server": "./react-html.react-server.js",
"react-server": "./react-markup.react-server.js",
"default": "./index.js"
},
"./src/*": "./src/*",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@
* @flow
*/

export * from './src/ReactHTMLServer';
export * from './src/ReactMarkupServer';
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {
createResumableState,
createRenderState,
createRootFormatContext,
} from './ReactFizzConfigHTML';
} from './ReactFizzConfigMarkup';

type MarkupOptions = {
identifierPrefix?: string,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,4 @@
*/

// eslint-disable-next-line react-internal/prod-error-codes
throw new Error('react-html should not get built in stable');
throw new Error('react-markup should not get built in stable');
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ import {
createResumableState,
createRenderState,
createRootFormatContext,
} from './ReactFizzConfigHTML';
} from './ReactFizzConfigMarkup';

type ReactMarkupNodeList =
// This is the intersection of ReactNodeList and ReactClientValue minus
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,4 @@
*/

// eslint-disable-next-line react-internal/prod-error-codes
throw new Error('react-html should not get built in stable');
throw new Error('react-markup should not get built in stable');
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
'use strict';

let React;
let ReactHTML;
let ReactMarkup;

function normalizeCodeLocInfo(str) {
return (
Expand All @@ -24,26 +24,26 @@ function normalizeCodeLocInfo(str) {
if (!__EXPERIMENTAL__) {
it('should not be built in stable', () => {
try {
require('react-html');
require('react-markup');
} catch (x) {
return;
}
throw new Error('Expected react-html not to exist in stable.');
throw new Error('Expected react-markup not to exist in stable.');
});
} else {
describe('ReactHTML', () => {
describe('ReactMarkup', () => {
beforeEach(() => {
jest.resetModules();
React = require('react');
ReactHTML = require('react-html');
ReactMarkup = require('react-markup');
});

it('should be able to render a simple component', async () => {
function Component() {
return <div>hello world</div>;
}

const html = await ReactHTML.renderToMarkup(<Component />);
const html = await ReactMarkup.renderToMarkup(<Component />);
expect(html).toBe('<div>hello world</div>');
});

Expand All @@ -52,14 +52,14 @@ if (!__EXPERIMENTAL__) {
return <div>{'hello '.repeat(200)}world</div>;
}

const html = await ReactHTML.renderToMarkup(
const html = await ReactMarkup.renderToMarkup(
React.createElement(Component),
);
expect(html).toBe('<div>' + ('hello '.repeat(200) + 'world') + '</div>');
});

it('should prefix html tags with a doctype', async () => {
const html = await ReactHTML.renderToMarkup(
const html = await ReactMarkup.renderToMarkup(
<html>
<body>hello</body>
</html>,
Expand All @@ -76,7 +76,7 @@ if (!__EXPERIMENTAL__) {
}

await expect(async () => {
await ReactHTML.renderToMarkup(<Component />);
await ReactMarkup.renderToMarkup(<Component />);
}).rejects.toThrow();
});

Expand All @@ -87,7 +87,7 @@ if (!__EXPERIMENTAL__) {
}

await expect(async () => {
await ReactHTML.renderToMarkup(<Component />);
await ReactMarkup.renderToMarkup(<Component />);
}).rejects.toThrow();
});

Expand All @@ -100,7 +100,7 @@ if (!__EXPERIMENTAL__) {
}

await expect(async () => {
await ReactHTML.renderToMarkup(<Component />);
await ReactMarkup.renderToMarkup(<Component />);
}).rejects.toThrow();
});

Expand Down Expand Up @@ -142,7 +142,7 @@ if (!__EXPERIMENTAL__) {
);
}

const html = await ReactHTML.renderToMarkup(<Component />);
const html = await ReactMarkup.renderToMarkup(<Component />);
const container = document.createElement('div');
container.innerHTML = html;

Expand Down Expand Up @@ -176,7 +176,7 @@ if (!__EXPERIMENTAL__) {
);
}

const html = await ReactHTML.renderToMarkup(<Component />);
const html = await ReactMarkup.renderToMarkup(<Component />);
expect(html).toBe('<div>01</div>');
});

Expand All @@ -199,7 +199,7 @@ if (!__EXPERIMENTAL__) {
}

await expect(async () => {
await ReactHTML.renderToMarkup(
await ReactMarkup.renderToMarkup(
<div>
<Foo />
</div>,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ global.TextDecoder = require('util').TextDecoder;
global.TextEncoder = require('util').TextEncoder;

let React;
let ReactHTML;
let ReactMarkup;

function normalizeCodeLocInfo(str) {
return (
Expand All @@ -27,34 +27,34 @@ function normalizeCodeLocInfo(str) {
if (!__EXPERIMENTAL__) {
it('should not be built in stable', () => {
try {
require('react-html');
require('react-markup');
} catch (x) {
return;
}
throw new Error('Expected react-html not to exist in stable.');
throw new Error('Expected react-markup not to exist in stable.');
});
} else {
describe('ReactHTML', () => {
describe('ReactMarkup', () => {
beforeEach(() => {
jest.resetModules();
// We run in the react-server condition.
jest.mock('react', () => require('react/react.react-server'));
if (__EXPERIMENTAL__) {
jest.mock('react-html', () =>
require('react-html/react-html.react-server'),
jest.mock('react-markup', () =>
require('react-markup/react-markup.react-server'),
);
}

React = require('react');
if (__EXPERIMENTAL__) {
ReactHTML = require('react-html');
ReactMarkup = require('react-markup');
} else {
try {
require('react-html/react-html.react-server');
require('react-markup/react-markup.react-server');
} catch (x) {
return;
}
throw new Error('Expected react-html not to exist in stable.');
throw new Error('Expected react-markup not to exist in stable.');
}
});

Expand All @@ -64,7 +64,7 @@ if (!__EXPERIMENTAL__) {
return React.createElement('div', null, 'hello world');
}

const html = await ReactHTML.renderToMarkup(
const html = await ReactMarkup.renderToMarkup(
React.createElement(Component),
);
expect(html).toBe('<div>hello world</div>');
Expand All @@ -76,14 +76,14 @@ if (!__EXPERIMENTAL__) {
return React.createElement('div', null, 'hello '.repeat(200) + 'world');
}

const html = await ReactHTML.renderToMarkup(
const html = await ReactMarkup.renderToMarkup(
React.createElement(Component),
);
expect(html).toBe('<div>' + ('hello '.repeat(200) + 'world') + '</div>');
});

it('should prefix html tags with a doctype', async () => {
const html = await ReactHTML.renderToMarkup(
const html = await ReactMarkup.renderToMarkup(
// We can't use JSX because that's client-JSX in our tests.
React.createElement(
'html',
Expand All @@ -104,7 +104,7 @@ if (!__EXPERIMENTAL__) {
}

await expect(async () => {
await ReactHTML.renderToMarkup(React.createElement(Component));
await ReactMarkup.renderToMarkup(React.createElement(Component));
}).rejects.toThrow();
});

Expand All @@ -116,7 +116,7 @@ if (!__EXPERIMENTAL__) {
}

await expect(async () => {
await ReactHTML.renderToMarkup(React.createElement(Component));
await ReactMarkup.renderToMarkup(React.createElement(Component));
}).rejects.toThrow();
});

Expand All @@ -130,7 +130,7 @@ if (!__EXPERIMENTAL__) {
}

await expect(async () => {
await ReactHTML.renderToMarkup(React.createElement(Component));
await ReactMarkup.renderToMarkup(React.createElement(Component));
}).rejects.toThrow();
});

Expand Down Expand Up @@ -173,7 +173,7 @@ if (!__EXPERIMENTAL__) {
);
}

const html = await ReactHTML.renderToMarkup(
const html = await ReactMarkup.renderToMarkup(
React.createElement(Component),
);
const container = document.createElement('div');
Expand Down Expand Up @@ -204,7 +204,7 @@ if (!__EXPERIMENTAL__) {
return React.createElement('div', null, a, b);
}

const html = await ReactHTML.renderToMarkup(
const html = await ReactMarkup.renderToMarkup(
React.createElement(Component),
);
expect(html).toBe('<div>00</div>');
Expand All @@ -225,7 +225,7 @@ if (!__EXPERIMENTAL__) {
}

await expect(async () => {
await ReactHTML.renderToMarkup(
await ReactMarkup.renderToMarkup(
React.createElement('div', null, React.createElement(Foo)),
{
onError(error, errorInfo) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@ export * from 'react-dom-bindings/src/client/ReactFiberConfigDOM';
export * from 'react-client/src/ReactClientConsoleConfigBrowser';

// eslint-disable-next-line react-internal/prod-error-codes
throw new Error('Fiber is not used in react-html');
throw new Error('Fiber is not used in react-markup');
Loading
Loading