Skip to content

Commit 2c4627f

Browse files
ryan-roemerryan-roemer
authored
Fix one-page build + html and other misc. (#1349)
### React Modernization - Migrated from `ReactDOM` to `createRoot` API across examples - Added unique `key` props to Slide components to improve rendering performance - Updated React DOM client imports to use modern patterns ### one-page fixes Actually works now. - Refactored one-page build script to simpler output. - Removed version pinning (`v121`) from ESM.sh. Doesn't seem needed. - Added support and/or better docs for development builds: - `USE_LOCAL=true` for local development - `IS_DEV=true` for development builds
1 parent ddc2fc3 commit 2c4627f

File tree

4 files changed

+63
-45
lines changed

4 files changed

+63
-45
lines changed

‎examples/js/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33
import {
44
FlexBox,
55
Heading,
@@ -38,10 +38,10 @@ const theme = {
3838

3939
const SlideFragments = () => (
4040
<>
41-
<Slide>
41+
<Slide key="slide-fragment-1">
4242
<Text>This is a slide fragment.</Text>
4343
</Slide>
44-
<Slide>
44+
<Slide key="slide-fragment-2">
4545
<Text>This is also a slide fragment.</Text>
4646
<Appear>
4747
<Text>This item shows up!</Text>
@@ -267,5 +267,5 @@ const Presentation = () => (
267267
</Deck>
268268
);
269269

270-
const root = ReactDOM.createRoot(document.getElementById('root'));
270+
const root = createRoot(document.getElementById('root'));
271271
root.render(<Presentation />);

‎examples/one-page/index.html‎

Lines changed: 35 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -12,42 +12,43 @@
1212
<script type="importmap">
1313
{
1414
"imports": {
15-
"htm": "https://esm.sh/v121/htm@^[email protected]",
16-
"spectacle": "https://esm.sh/spectacle@10?bundle",
17-
"broadcast-channel": "https://esm.sh/v121/broadcast-channel@^[email protected]",
18-
"history": "https://esm.sh/v121/history@^[email protected]",
19-
"kbar": "https://esm.sh/v121/[email protected][email protected]",
20-
"lodash.clonedeep": "https://esm.sh/v121/lodash.clonedeep@^[email protected]",
21-
"mdast-builder": "https://esm.sh/v121/mdast-builder@^[email protected]",
22-
"mdast-zone": "https://esm.sh/v121/mdast-zone@^[email protected]",
23-
"merge-anything": "https://esm.sh/v121/merge-anything@^[email protected]",
24-
"mousetrap": "https://esm.sh/v121/mousetrap@^[email protected]",
25-
"query-string": "https://esm.sh/v121/query-string@^[email protected]",
26-
"react": "https://esm.sh/v121/[email protected][email protected]",
27-
"react/jsx-runtime": "https://esm.sh/v121/[email protected]/[email protected]",
28-
"react-dom": "https://esm.sh/v121/[email protected][email protected]",
29-
"react-fast-compare": "https://esm.sh/v121/react-fast-compare@^[email protected]",
30-
"react-is": "https://esm.sh/v121/react-is@^[email protected]",
31-
"react-spring": "https://esm.sh/v121/react-spring@^[email protected]",
32-
"react-swipeable": "https://esm.sh/v121/react-swipeable@^[email protected]",
33-
"react-syntax-highlighter": "https://esm.sh/v121/react-syntax-highlighter@^[email protected]",
34-
"react-syntax-highlighter/dist/cjs/styles/prism/vs-dark.js": "https://esm.sh/v121/react-syntax-highlighter@^15.5.0/dist/esm/styles/prism/[email protected]",
35-
"react-syntax-highlighter/dist/cjs/styles/prism/index.js": "https://esm.sh/v121/react-syntax-highlighter@^15.5.0/dist/esm/styles/prism/[email protected]",
36-
"rehype-raw": "https://esm.sh/v121/rehype-raw@^[email protected]",
37-
"rehype-react": "https://esm.sh/v121/rehype-react@^[email protected]",
38-
"remark-parse": "https://esm.sh/v121/remark-parse@^[email protected]",
39-
"remark-rehype": "https://esm.sh/v121/remark-rehype@^[email protected]",
40-
"styled-components": "https://esm.sh/v121/styled-components@^[email protected]",
41-
"styled-system": "https://esm.sh/v121/[email protected][email protected]",
42-
"unified": "https://esm.sh/v121/unified@^[email protected]",
43-
"unist-util-visit": "https://esm.sh/v121/unist-util-visit@^[email protected]",
44-
"use-resize-observer": "https://esm.sh/v121/use-resize-observer@^[email protected]"
15+
"htm": "https://esm.sh/htm@^3?external=react,react-dom",
16+
"spectacle": "https://esm.sh/spectacle@10?external=react,react-dom&bundle",
17+
"broadcast-channel": "https://esm.sh/broadcast-channel@^4.17.0?external=react,react-dom",
18+
"history": "https://esm.sh/history@^5.3.0?external=react,react-dom",
19+
"kbar": "https://esm.sh/[email protected]?external=react,react-dom",
20+
"lodash.clonedeep": "https://esm.sh/lodash.clonedeep@^4.5.0?external=react,react-dom",
21+
"mdast-builder": "https://esm.sh/mdast-builder@^1.1.1?external=react,react-dom",
22+
"mdast-zone": "https://esm.sh/mdast-zone@^4.0.0?external=react,react-dom",
23+
"merge-anything": "https://esm.sh/merge-anything@^3.0.3?external=react,react-dom",
24+
"mousetrap": "https://esm.sh/mousetrap@^1.6.5?external=react,react-dom",
25+
"query-string": "https://esm.sh/query-string@^7.1.3?external=react,react-dom",
26+
"react": "https://esm.sh/[email protected]?",
27+
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime?",
28+
"react-dom": "https://esm.sh/[email protected]?",
29+
"react-dom/client": "https://esm.sh/[email protected]/client?",
30+
"react-fast-compare": "https://esm.sh/react-fast-compare@^3.2.0?external=react,react-dom",
31+
"react-is": "https://esm.sh/react-is@^18.1.0?external=react,react-dom",
32+
"react-spring": "https://esm.sh/react-spring@^9.5.5?external=react,react-dom",
33+
"react-swipeable": "https://esm.sh/react-swipeable@^7.0.0?external=react,react-dom",
34+
"react-syntax-highlighter": "https://esm.sh/react-syntax-highlighter@^15.5.0?external=react,react-dom",
35+
"react-syntax-highlighter/dist/cjs/styles/prism/vs-dark.js": "https://esm.sh/react-syntax-highlighter@^15.5.0/dist/esm/styles/prism/vs-dark.js?external=react,react-dom",
36+
"react-syntax-highlighter/dist/cjs/styles/prism/index.js": "https://esm.sh/react-syntax-highlighter@^15.5.0/dist/esm/styles/prism/index.js?external=react,react-dom",
37+
"rehype-raw": "https://esm.sh/rehype-raw@^5.1.0?external=react,react-dom",
38+
"rehype-react": "https://esm.sh/rehype-react@^6.0.0?external=react,react-dom",
39+
"remark-parse": "https://esm.sh/remark-parse@^8.0.3?external=react,react-dom",
40+
"remark-rehype": "https://esm.sh/remark-rehype@^7.0.0?external=react,react-dom",
41+
"styled-components": "https://esm.sh/styled-components@^5.3.6?external=react,react-dom",
42+
"styled-system": "https://esm.sh/[email protected]?external=react,react-dom",
43+
"unified": "https://esm.sh/unified@^9.0.0?external=react,react-dom",
44+
"unist-util-visit": "https://esm.sh/unist-util-visit@^2.0.3?external=react,react-dom",
45+
"use-resize-observer": "https://esm.sh/use-resize-observer@^9.0.2?external=react,react-dom"
4546
}
4647
}
4748
</script>
4849
<script type="module">
4950
import React from 'react';
50-
import ReactDOM from 'react-dom';
51+
import { createRoot } from 'react-dom/client';
5152
import {
5253
FlexBox,
5354
Heading,
@@ -88,10 +89,10 @@
8889

8990
// SPECTACLE_CLI_THEME_END
9091
const SlideFragments = () => html`
91-
<${Slide}>
92+
<${Slide} key="slide-fragment-1">
9293
<${Text}>This is a slide fragment.</${Text}>
9394
</${Slide}>
94-
<${Slide}>
95+
<${Slide} key="slide-fragment-2">
9596
<${Text}>This is also a slide fragment.</${Text}>
9697
<${Appear}>
9798
<${Text}>This item shows up!</${Text}>
@@ -283,7 +284,7 @@
283284
<${SlideLayout.List} title="Slide layouts!" items=${['Two-column', 'Lists' , 'And more!' ]} animateListItems />
284285
</${Deck}>
285286
`;
286-
const root = ReactDOM.createRoot(document.getElementById('root'));
287+
const root = createRoot(document.getElementById('root'));
287288
root.render(html`<${Presentation}/>`);
288289
</script>
289290
</body>

‎examples/one-page/scripts/one-page.js‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@
22

33
/**
44
* Generate the JS `index.html` from `examples/js/index.js`
5+
*
6+
* To rebuild:
7+
* ```sh
8+
* pnpm run build:one-page
9+
* ```
10+
*
11+
* To do dev builds and testing:
12+
* ```sh
13+
* USE_LOCAL=true IS_DEV=true pnpm run build:one-page && pnpm run start:one-page
14+
* ```
515
*/
616
const fs = require('fs').promises;
717
const path = require('path');
@@ -16,7 +26,7 @@ const SRC_FILE = path.join(EXAMPLES, 'js/index.js');
1626
const DEST_FILE = path.join(EXAMPLES, 'one-page/index.html');
1727

1828
// Dependencies.
19-
const ESM_SH_VERSION = 'v121'; // v121, stable, etc.
29+
const ESM_SH_VERSION = ''; // 'v121/, stable, etc.
2030
const {
2131
dependencies,
2232
peerDependencies
@@ -25,27 +35,30 @@ const reactPkgPath = require.resolve('react/package.json', {
2535
paths: [SPECTACLE_PATH]
2636
});
2737
const { version: reactVersion } = require(reactPkgPath);
28-
const DEPS = `deps=react@${reactVersion}`;
38+
const EXTERNAL = `external=react,react-dom`;
2939

3040
// Toggle dev resources. (Use if debugging load / dependency errors).
31-
const IS_DEV = false;
41+
const IS_DEV = process.env.IS_DEV === 'true';
3242
const DEV = IS_DEV ? '&dev' : '';
3343

3444
// Use local built spectacle? Toggle to `true` for dev-only.
3545
// Note: Due to CORS, you'll need to run `pnpm run --filter ./examples/one-page start` and
3646
// open http://localhost:5000/examples/one-page to work.
37-
const USE_LOCAL = false;
47+
const USE_LOCAL = process.env.USE_LOCAL === 'true';
3848

3949
// ================================================================================================
4050
// Import Map
4151
// ================================================================================================
42-
const importUrl = (k, v, extra = '') => {
52+
const importUrl = (k, v, extra = '', params = '') => {
53+
let external = EXTERNAL;
54+
4355
// Pin react and react-dom.
4456
if (k === 'react' || k === 'react-dom') {
4557
v = reactVersion;
58+
external = '';
4659
}
4760

48-
return `https://esm.sh/${ESM_SH_VERSION}/${k}@${v}${extra}?${DEPS}${DEV}`;
61+
return `https://esm.sh/${ESM_SH_VERSION}${k}@${v}${extra}?${external}${params}${DEV}`;
4962
};
5063

5164
const getImportMap = () => {
@@ -54,7 +67,7 @@ const getImportMap = () => {
5467
htm: importUrl('htm', '^3'),
5568
spectacle: USE_LOCAL
5669
? '../../packages/spectacle/lib/index.mjs'
57-
: 'https://esm.sh/spectacle@10?bundle'
70+
: importUrl('spectacle', '10', '', '&bundle')
5871
};
5972

6073
Object.entries(Object.assign({}, dependencies, peerDependencies))
@@ -67,6 +80,9 @@ const getImportMap = () => {
6780
if (k === 'react') {
6881
importMap[`${k}/jsx-runtime`] = importUrl(k, v, '/jsx-runtime');
6982
}
83+
if (k === 'react-dom') {
84+
importMap[`${k}/client`] = importUrl(k, v, '/client');
85+
}
7086
if (k === 'react-syntax-highlighter') {
7187
importMap[`${k}/dist/cjs/styles/prism/vs-dark.js`] = importUrl(
7288
k,

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"start:md": "concurrently --raw pnpm:build:spectacle:watch \"pnpm run --filter ./examples/md start\"",
5757
"start:mdx": "concurrently --raw pnpm:build:spectacle:watch \"pnpm run --filter ./examples/mdx start\"",
5858
"start:ts": "concurrently --raw pnpm:build:spectacle:watch \"pnpm run --filter ./examples/typescript start\"",
59+
"start:one-page": "concurrently --raw pnpm:build:spectacle:watch \"pnpm run --filter ./examples/one-page start\"",
5960
"start:examples": "concurrently --raw pnpm:build:spectacle:watch \"pnpm run --parallel --filter \\\"./examples/*\\\" start\"",
6061
"start:create-spectacle": "pnpm run --filter ./packages/create-spectacle build --watch",
6162
"start:docs": "pnpm run --filter spectacle-docs start",

0 commit comments

Comments
 (0)