Skip to content

Commit 7986539

Browse files
ryan-roemerryan-roemer
committed
Fix importmap, use externals
1 parent e8fa687 commit 7986539

File tree

3 files changed

+45
-42
lines changed

3 files changed

+45
-42
lines changed

‎examples/js/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {
1212
Slide,
1313
Deck,
1414
Text,
15-
FitText,
1615
Grid,
1716
Box,
1817
Image,
@@ -23,6 +22,7 @@ import {
2322
DefaultTemplate,
2423
SlideLayout
2524
} from 'spectacle';
25+
const FitText = Text; // TODO: NEED PUBLISH
2626

2727
const formidableLogo =
2828
'https://avatars2.githubusercontent.com/u/5078602?s=280&v=4';

‎examples/one-page/index.html

+36-35
Original file line numberDiff line numberDiff line change
@@ -13,43 +13,42 @@
1313
<script type="importmap">
1414
{
1515
"imports": {
16-
"react": "https://esm.sh/[email protected]",
17-
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
18-
"react-dom": "https://esm.sh/[email protected]",
19-
"react-dom/client": "https://esm.sh/[email protected]/client",
20-
"htm": "https://esm.sh/htm@3?external=react,react-dom",
21-
"spectacle": "https://esm.sh/[email protected]?external=react,react-dom",
22-
"broadcast-channel": "https://esm.sh/[email protected]?external=react,react-dom",
23-
"history": "https://esm.sh/[email protected]?external=react,react-dom",
24-
"kbar": "https://esm.sh/[email protected]?external=react,react-dom",
25-
"lodash.clonedeep": "https://esm.sh/[email protected]",
26-
"mdast-builder": "https://esm.sh/[email protected]",
27-
"mdast-zone": "https://esm.sh/[email protected]",
28-
"merge-anything": "https://esm.sh/[email protected]",
29-
"mousetrap": "https://esm.sh/[email protected]",
30-
"query-string": "https://esm.sh/[email protected]",
31-
"react-fast-compare": "https://esm.sh/[email protected]?external=react,react-dom",
32-
"react-is": "https://esm.sh/[email protected]?external=react,react-dom",
33-
"react-spring": "https://esm.sh/[email protected]?external=react,react-dom",
34-
"react-swipeable": "https://esm.sh/[email protected]?external=react,react-dom",
35-
"react-syntax-highlighter": "https://esm.sh/[email protected]?external=react,react-dom",
36-
"react-syntax-highlighter/dist/cjs/styles/prism/vs-dark.js": "https://esm.sh/[email protected]/dist/esm/styles/prism/vs-dark.js?external=react,react-dom",
37-
"react-syntax-highlighter/dist/cjs/styles/prism/index.js": "https://esm.sh/[email protected]/dist/esm/styles/prism/index.js?external=react,react-dom",
38-
"rehype-raw": "https://esm.sh/[email protected]?external=react,react-dom",
39-
"rehype-react": "https://esm.sh/[email protected]?external=react,react-dom",
40-
"remark-parse": "https://esm.sh/[email protected]",
41-
"remark-rehype": "https://esm.sh/[email protected]",
42-
"styled-components": "https://esm.sh/[email protected]?external=react,react-dom",
43-
"styled-system": "https://esm.sh/[email protected]?external=react,react-dom",
44-
"unified": "https://esm.sh/[email protected]",
45-
"unist-util-visit": "https://esm.sh/[email protected]",
46-
"use-resize-observer": "https://esm.sh/[email protected]?external=react,react-dom"
16+
"htm": "https://esm.sh/htm@^3?external=react,react-dom&dev",
17+
"spectacle": "https://esm.sh/spectacle@10?external=react,react-dom&bundle&dev",
18+
"broadcast-channel": "https://esm.sh/broadcast-channel@^4.17.0?external=react,react-dom&dev",
19+
"history": "https://esm.sh/history@^5.3.0?external=react,react-dom&dev",
20+
"kbar": "https://esm.sh/[email protected]?external=react,react-dom&dev",
21+
"lodash.clonedeep": "https://esm.sh/lodash.clonedeep@^4.5.0?external=react,react-dom&dev",
22+
"mdast-builder": "https://esm.sh/mdast-builder@^1.1.1?external=react,react-dom&dev",
23+
"mdast-zone": "https://esm.sh/mdast-zone@^4.0.0?external=react,react-dom&dev",
24+
"merge-anything": "https://esm.sh/merge-anything@^3.0.3?external=react,react-dom&dev",
25+
"mousetrap": "https://esm.sh/mousetrap@^1.6.5?external=react,react-dom&dev",
26+
"query-string": "https://esm.sh/query-string@^7.1.3?external=react,react-dom&dev",
27+
"react": "https://esm.sh/[email protected]?&dev",
28+
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime?&dev",
29+
"react-dom": "https://esm.sh/[email protected]?&dev",
30+
"react-fast-compare": "https://esm.sh/react-fast-compare@^3.2.0?external=react,react-dom&dev",
31+
"react-is": "https://esm.sh/react-is@^18.1.0?external=react,react-dom&dev",
32+
"react-spring": "https://esm.sh/react-spring@^9.5.5?external=react,react-dom&dev",
33+
"react-swipeable": "https://esm.sh/react-swipeable@^7.0.0?external=react,react-dom&dev",
34+
"react-syntax-highlighter": "https://esm.sh/react-syntax-highlighter@^15.5.0?external=react,react-dom&dev",
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&dev",
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&dev",
37+
"rehype-raw": "https://esm.sh/rehype-raw@^5.1.0?external=react,react-dom&dev",
38+
"rehype-react": "https://esm.sh/rehype-react@^6.0.0?external=react,react-dom&dev",
39+
"remark-parse": "https://esm.sh/remark-parse@^8.0.3?external=react,react-dom&dev",
40+
"remark-rehype": "https://esm.sh/remark-rehype@^7.0.0?external=react,react-dom&dev",
41+
"styled-components": "https://esm.sh/styled-components@^5.3.6?external=react,react-dom&dev",
42+
"styled-system": "https://esm.sh/[email protected]?external=react,react-dom&dev",
43+
"unified": "https://esm.sh/unified@^9.0.0?external=react,react-dom&dev",
44+
"unist-util-visit": "https://esm.sh/unist-util-visit@^2.0.3?external=react,react-dom&dev",
45+
"use-resize-observer": "https://esm.sh/use-resize-observer@^9.0.2?external=react,react-dom&dev"
4746
}
4847
}
4948
</script>
5049
<script type="module">
5150
import React from 'react';
52-
import { createRoot } from 'react-dom/client';
51+
import ReactDOM from 'react-dom';
5352
import {
5453
FlexBox,
5554
Heading,
@@ -62,7 +61,6 @@
6261
Slide,
6362
Deck,
6463
Text,
65-
// FitText,
6664
Grid,
6765
Box,
6866
Image,
@@ -73,12 +71,15 @@
7371
DefaultTemplate,
7472
SlideLayout
7573
} from 'spectacle';
76-
const FitText = Text; // TODO: PUBLISH
7774

7875
import htm from 'htm';
7976
const html = htm.bind(React.createElement);
77+
const FitText = Text; // TODO: NEED PUBLISH
78+
8079
const formidableLogo = 'https://avatars2.githubusercontent.com/u/5078602?s=280&v=4';
8180

81+
82+
8283
// SPECTACLE_CLI_THEME_START
8384
const theme = {
8485
fonts: {
@@ -284,7 +285,7 @@
284285
<${SlideLayout.List} title="Slide layouts!" items=${['Two-column', 'Lists' , 'And more!' ]} animateListItems />
285286
</${Deck}>
286287
`;
287-
const root = createRoot(document.getElementById('root'));
288+
const root = ReactDOM.createRoot(document.getElementById('root'));
288289
root.render(html`<${Presentation}/>`);
289290
</script>
290291
</body>

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

+8-6
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const SRC_FILE = path.join(EXAMPLES, 'js/index.js');
1616
const DEST_FILE = path.join(EXAMPLES, 'one-page/index.html');
1717

1818
// Dependencies.
19-
const ESM_SH_VERSION = 'v121'; // v121, stable, etc.
19+
const ESM_SH_VERSION = ''; // 'v121/, stable, etc.
2020
const {
2121
dependencies,
2222
peerDependencies
@@ -25,10 +25,10 @@ const reactPkgPath = require.resolve('react/package.json', {
2525
paths: [SPECTACLE_PATH]
2626
});
2727
const { version: reactVersion } = require(reactPkgPath);
28-
const DEPS = `deps=react@${reactVersion},react-dom@${reactVersion}`;
28+
const EXTERNAL = `external=react,react-dom`;
2929

3030
// Toggle dev resources. (Use if debugging load / dependency errors).
31-
const IS_DEV = false;
31+
const IS_DEV = true;
3232
const DEV = IS_DEV ? '&dev' : '';
3333

3434
// Use local built spectacle? Toggle to `true` for dev-only.
@@ -39,13 +39,15 @@ const USE_LOCAL = false;
3939
// ================================================================================================
4040
// Import Map
4141
// ================================================================================================
42-
const importUrl = (k, v, extra = '') => {
42+
const importUrl = (k, v, extra = '', params = '') => {
43+
let external = EXTERNAL;
4344
// Pin react and react-dom.
4445
if (k === 'react' || k === 'react-dom') {
4546
v = reactVersion;
47+
external = '';
4648
}
4749

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

5153
const getImportMap = () => {
@@ -54,7 +56,7 @@ const getImportMap = () => {
5456
htm: importUrl('htm', '^3'),
5557
spectacle: USE_LOCAL
5658
? '../../packages/spectacle/lib/index.mjs'
57-
: 'https://esm.sh/spectacle@10?bundle'
59+
: importUrl('spectacle', '10', '', '&bundle')
5860
};
5961

6062
Object.entries(Object.assign({}, dependencies, peerDependencies))

0 commit comments

Comments
 (0)