Skip to content

Commit 04a3efd

Browse files
sebmarkbagesebmarkbage
committed
Only build react-html in experimental channel
Even though the whole package is private right now. Once we publish it, it'll likely be just the experimental channel first before upgrading to stable.
1 parent 0d1fdb5 commit 04a3efd

File tree

5 files changed

+313
-252
lines changed

5 files changed

+313
-252
lines changed

‎packages/react-html/src/ReactHTMLClient.stable.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
8+
*/
9+
10+
// eslint-disable-next-line react-internal/prod-error-codes
11+
throw new Error('react-html should not get built in stable');

‎packages/react-html/src/ReactHTMLServer.stable.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
8+
*/
9+
10+
// eslint-disable-next-line react-internal/prod-error-codes
11+
throw new Error('react-html should not get built in stable');

‎packages/react-html/src/__tests__/ReactHTMLClient-test.js

Lines changed: 132 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -12,141 +12,152 @@
1212
let React;
1313
let ReactHTML;
1414

15-
describe('ReactHTML', () => {
16-
beforeEach(() => {
17-
jest.resetModules();
18-
React = require('react');
19-
ReactHTML = require('react-html');
15+
if (!__EXPERIMENTAL__) {
16+
it('should not be built in stable', () => {
17+
try {
18+
require('react-html');
19+
} catch (x) {
20+
return;
21+
}
22+
throw new Error('Expected react-html not to exist in stable.');
2023
});
24+
} else {
25+
describe('ReactHTML', () => {
26+
beforeEach(() => {
27+
jest.resetModules();
28+
React = require('react');
29+
ReactHTML = require('react-html');
30+
});
2131

22-
it('should be able to render a simple component', async () => {
23-
function Component() {
24-
return <div>hello world</div>;
25-
}
32+
it('should be able to render a simple component', async () => {
33+
function Component() {
34+
return <div>hello world</div>;
35+
}
2636

27-
const html = await ReactHTML.renderToMarkup(<Component />);
28-
expect(html).toBe('<div>hello world</div>');
29-
});
37+
const html = await ReactHTML.renderToMarkup(<Component />);
38+
expect(html).toBe('<div>hello world</div>');
39+
});
3040

31-
it('should prefix html tags with a doctype', async () => {
32-
const html = await ReactHTML.renderToMarkup(
33-
<html>
34-
<body>hello</body>
35-
</html>,
36-
);
37-
expect(html).toBe(
38-
'<!DOCTYPE html><html><head></head><body>hello</body></html>',
39-
);
40-
});
41+
it('should prefix html tags with a doctype', async () => {
42+
const html = await ReactHTML.renderToMarkup(
43+
<html>
44+
<body>hello</body>
45+
</html>,
46+
);
47+
expect(html).toBe(
48+
'<!DOCTYPE html><html><head></head><body>hello</body></html>',
49+
);
50+
});
4151

42-
it('should error on useState', async () => {
43-
function Component() {
44-
const [state] = React.useState('hello');
45-
return <div>{state}</div>;
46-
}
52+
it('should error on useState', async () => {
53+
function Component() {
54+
const [state] = React.useState('hello');
55+
return <div>{state}</div>;
56+
}
4757

48-
await expect(async () => {
49-
await ReactHTML.renderToMarkup(<Component />);
50-
}).rejects.toThrow();
51-
});
58+
await expect(async () => {
59+
await ReactHTML.renderToMarkup(<Component />);
60+
}).rejects.toThrow();
61+
});
5262

53-
it('should error on refs passed to host components', async () => {
54-
function Component() {
55-
const ref = React.createRef();
56-
return <div ref={ref} />;
57-
}
63+
it('should error on refs passed to host components', async () => {
64+
function Component() {
65+
const ref = React.createRef();
66+
return <div ref={ref} />;
67+
}
5868

59-
await expect(async () => {
60-
await ReactHTML.renderToMarkup(<Component />);
61-
}).rejects.toThrow();
62-
});
69+
await expect(async () => {
70+
await ReactHTML.renderToMarkup(<Component />);
71+
}).rejects.toThrow();
72+
});
6373

64-
it('should error on callbacks passed to event handlers', async () => {
65-
function Component() {
66-
function onClick() {
67-
// This won't be able to be called.
74+
it('should error on callbacks passed to event handlers', async () => {
75+
function Component() {
76+
function onClick() {
77+
// This won't be able to be called.
78+
}
79+
return <div onClick={onClick} />;
6880
}
69-
return <div onClick={onClick} />;
70-
}
7181

72-
await expect(async () => {
73-
await ReactHTML.renderToMarkup(<Component />);
74-
}).rejects.toThrow();
75-
});
82+
await expect(async () => {
83+
await ReactHTML.renderToMarkup(<Component />);
84+
}).rejects.toThrow();
85+
});
7686

77-
it('supports the useId Hook', async () => {
78-
function Component() {
79-
const firstNameId = React.useId();
80-
const lastNameId = React.useId();
81-
return React.createElement(
82-
'div',
83-
null,
84-
React.createElement(
85-
'h2',
86-
{
87-
id: firstNameId,
88-
},
89-
'First',
90-
),
91-
React.createElement(
92-
'p',
93-
{
94-
'aria-labelledby': firstNameId,
95-
},
96-
'Sebastian',
97-
),
98-
React.createElement(
99-
'h2',
100-
{
101-
id: lastNameId,
102-
},
103-
'Last',
104-
),
105-
React.createElement(
106-
'p',
107-
{
108-
'aria-labelledby': lastNameId,
109-
},
110-
'Smith',
111-
),
112-
);
113-
}
87+
it('supports the useId Hook', async () => {
88+
function Component() {
89+
const firstNameId = React.useId();
90+
const lastNameId = React.useId();
91+
return React.createElement(
92+
'div',
93+
null,
94+
React.createElement(
95+
'h2',
96+
{
97+
id: firstNameId,
98+
},
99+
'First',
100+
),
101+
React.createElement(
102+
'p',
103+
{
104+
'aria-labelledby': firstNameId,
105+
},
106+
'Sebastian',
107+
),
108+
React.createElement(
109+
'h2',
110+
{
111+
id: lastNameId,
112+
},
113+
'Last',
114+
),
115+
React.createElement(
116+
'p',
117+
{
118+
'aria-labelledby': lastNameId,
119+
},
120+
'Smith',
121+
),
122+
);
123+
}
114124

115-
const html = await ReactHTML.renderToMarkup(<Component />);
116-
const container = document.createElement('div');
117-
container.innerHTML = html;
118-
119-
expect(container.getElementsByTagName('h2')[0].id).toBe(
120-
container.getElementsByTagName('p')[0].getAttribute('aria-labelledby'),
121-
);
122-
expect(container.getElementsByTagName('h2')[1].id).toBe(
123-
container.getElementsByTagName('p')[1].getAttribute('aria-labelledby'),
124-
);
125-
126-
// It's not the same id between them.
127-
expect(container.getElementsByTagName('h2')[0].id).not.toBe(
128-
container.getElementsByTagName('p')[1].getAttribute('aria-labelledby'),
129-
);
130-
});
125+
const html = await ReactHTML.renderToMarkup(<Component />);
126+
const container = document.createElement('div');
127+
container.innerHTML = html;
131128

132-
// @gate disableClientCache
133-
it('does NOT support cache yet because it is a client component', async () => {
134-
let counter = 0;
135-
const getCount = React.cache(() => {
136-
return counter++;
137-
});
138-
function Component() {
139-
const a = getCount();
140-
const b = getCount();
141-
return (
142-
<div>
143-
{a}
144-
{b}
145-
</div>
129+
expect(container.getElementsByTagName('h2')[0].id).toBe(
130+
container.getElementsByTagName('p')[0].getAttribute('aria-labelledby'),
146131
);
147-
}
132+
expect(container.getElementsByTagName('h2')[1].id).toBe(
133+
container.getElementsByTagName('p')[1].getAttribute('aria-labelledby'),
134+
);
135+
136+
// It's not the same id between them.
137+
expect(container.getElementsByTagName('h2')[0].id).not.toBe(
138+
container.getElementsByTagName('p')[1].getAttribute('aria-labelledby'),
139+
);
140+
});
141+
142+
// @gate disableClientCache
143+
it('does NOT support cache yet because it is a client component', async () => {
144+
let counter = 0;
145+
const getCount = React.cache(() => {
146+
return counter++;
147+
});
148+
function Component() {
149+
const a = getCount();
150+
const b = getCount();
151+
return (
152+
<div>
153+
{a}
154+
{b}
155+
</div>
156+
);
157+
}
148158

149-
const html = await ReactHTML.renderToMarkup(<Component />);
150-
expect(html).toBe('<div>01</div>');
159+
const html = await ReactHTML.renderToMarkup(<Component />);
160+
expect(html).toBe('<div>01</div>');
161+
});
151162
});
152-
});
163+
}

0 commit comments

Comments
 (0)