Skip to content

Commit

Permalink
Fix importmap, use externals
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryan-roemer
ryan-roemer committed Mar 3, 2025
1 parent e8fa687 commit 7986539
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 42 deletions.
2 changes: 1 addition & 1 deletion examples/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
Slide,
Deck,
Text,
FitText,
Grid,
Box,
Image,
Expand All @@ -23,6 +22,7 @@ import {
DefaultTemplate,
SlideLayout
} from 'spectacle';
const FitText = Text; // TODO: NEED PUBLISH

const formidableLogo =
'https://avatars2.githubusercontent.com/u/5078602?s=280&v=4';
Expand Down
71 changes: 36 additions & 35 deletions examples/one-page/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,43 +13,42 @@
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/[email protected]",
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
"react-dom": "https://esm.sh/[email protected]",
"react-dom/client": "https://esm.sh/[email protected]/client",
"htm": "https://esm.sh/htm@3?external=react,react-dom",
"spectacle": "https://esm.sh/[email protected]?external=react,react-dom",
"broadcast-channel": "https://esm.sh/[email protected]?external=react,react-dom",
"history": "https://esm.sh/[email protected]?external=react,react-dom",
"kbar": "https://esm.sh/[email protected]?external=react,react-dom",
"lodash.clonedeep": "https://esm.sh/[email protected]",
"mdast-builder": "https://esm.sh/[email protected]",
"mdast-zone": "https://esm.sh/[email protected]",
"merge-anything": "https://esm.sh/[email protected]",
"mousetrap": "https://esm.sh/[email protected]",
"query-string": "https://esm.sh/[email protected]",
"react-fast-compare": "https://esm.sh/[email protected]?external=react,react-dom",
"react-is": "https://esm.sh/[email protected]?external=react,react-dom",
"react-spring": "https://esm.sh/[email protected]?external=react,react-dom",
"react-swipeable": "https://esm.sh/[email protected]?external=react,react-dom",
"react-syntax-highlighter": "https://esm.sh/[email protected]?external=react,react-dom",
"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",
"react-syntax-highlighter/dist/cjs/styles/prism/index.js": "https://esm.sh/[email protected]/dist/esm/styles/prism/index.js?external=react,react-dom",
"rehype-raw": "https://esm.sh/[email protected]?external=react,react-dom",
"rehype-react": "https://esm.sh/[email protected]?external=react,react-dom",
"remark-parse": "https://esm.sh/[email protected]",
"remark-rehype": "https://esm.sh/[email protected]",
"styled-components": "https://esm.sh/[email protected]?external=react,react-dom",
"styled-system": "https://esm.sh/[email protected]?external=react,react-dom",
"unified": "https://esm.sh/[email protected]",
"unist-util-visit": "https://esm.sh/[email protected]",
"use-resize-observer": "https://esm.sh/[email protected]?external=react,react-dom"
"htm": "https://esm.sh/htm@^3?external=react,react-dom&dev",
"spectacle": "https://esm.sh/spectacle@10?external=react,react-dom&bundle&dev",
"broadcast-channel": "https://esm.sh/broadcast-channel@^4.17.0?external=react,react-dom&dev",
"history": "https://esm.sh/history@^5.3.0?external=react,react-dom&dev",
"kbar": "https://esm.sh/[email protected]?external=react,react-dom&dev",
"lodash.clonedeep": "https://esm.sh/lodash.clonedeep@^4.5.0?external=react,react-dom&dev",
"mdast-builder": "https://esm.sh/mdast-builder@^1.1.1?external=react,react-dom&dev",
"mdast-zone": "https://esm.sh/mdast-zone@^4.0.0?external=react,react-dom&dev",
"merge-anything": "https://esm.sh/merge-anything@^3.0.3?external=react,react-dom&dev",
"mousetrap": "https://esm.sh/mousetrap@^1.6.5?external=react,react-dom&dev",
"query-string": "https://esm.sh/query-string@^7.1.3?external=react,react-dom&dev",
"react": "https://esm.sh/[email protected]?&dev",
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime?&dev",
"react-dom": "https://esm.sh/[email protected]?&dev",
"react-fast-compare": "https://esm.sh/react-fast-compare@^3.2.0?external=react,react-dom&dev",
"react-is": "https://esm.sh/react-is@^18.1.0?external=react,react-dom&dev",
"react-spring": "https://esm.sh/react-spring@^9.5.5?external=react,react-dom&dev",
"react-swipeable": "https://esm.sh/react-swipeable@^7.0.0?external=react,react-dom&dev",
"react-syntax-highlighter": "https://esm.sh/react-syntax-highlighter@^15.5.0?external=react,react-dom&dev",
"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",
"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",
"rehype-raw": "https://esm.sh/rehype-raw@^5.1.0?external=react,react-dom&dev",
"rehype-react": "https://esm.sh/rehype-react@^6.0.0?external=react,react-dom&dev",
"remark-parse": "https://esm.sh/remark-parse@^8.0.3?external=react,react-dom&dev",
"remark-rehype": "https://esm.sh/remark-rehype@^7.0.0?external=react,react-dom&dev",
"styled-components": "https://esm.sh/styled-components@^5.3.6?external=react,react-dom&dev",
"styled-system": "https://esm.sh/[email protected]?external=react,react-dom&dev",
"unified": "https://esm.sh/unified@^9.0.0?external=react,react-dom&dev",
"unist-util-visit": "https://esm.sh/unist-util-visit@^2.0.3?external=react,react-dom&dev",
"use-resize-observer": "https://esm.sh/use-resize-observer@^9.0.2?external=react,react-dom&dev"
}
}
</script>
<script type="module">
import React from 'react';
import { createRoot } from 'react-dom/client';
import ReactDOM from 'react-dom';
import {
FlexBox,
Heading,
Expand All @@ -62,7 +61,6 @@
Slide,
Deck,
Text,
// FitText,
Grid,
Box,
Image,
Expand All @@ -73,12 +71,15 @@
DefaultTemplate,
SlideLayout
} from 'spectacle';
const FitText = Text; // TODO: PUBLISH

import htm from 'htm';
const html = htm.bind(React.createElement);
const FitText = Text; // TODO: NEED PUBLISH

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



// SPECTACLE_CLI_THEME_START
const theme = {
fonts: {
Expand Down Expand Up @@ -284,7 +285,7 @@
<${SlideLayout.List} title="Slide layouts!" items=${['Two-column', 'Lists' , 'And more!' ]} animateListItems />
</${Deck}>
`;
const root = createRoot(document.getElementById('root'));
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(html`<${Presentation}/>`);
</script>
</body>
Expand Down
14 changes: 8 additions & 6 deletions examples/one-page/scripts/one-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const SRC_FILE = path.join(EXAMPLES, 'js/index.js');
const DEST_FILE = path.join(EXAMPLES, 'one-page/index.html');

// Dependencies.
const ESM_SH_VERSION = 'v121'; // v121, stable, etc.
const ESM_SH_VERSION = ''; // 'v121/, stable, etc.
const {
dependencies,
peerDependencies
Expand All @@ -25,10 +25,10 @@ const reactPkgPath = require.resolve('react/package.json', {
paths: [SPECTACLE_PATH]
});
const { version: reactVersion } = require(reactPkgPath);
const DEPS = `deps=react@${reactVersion},react-dom@${reactVersion}`;
const EXTERNAL = `external=react,react-dom`;

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

// Use local built spectacle? Toggle to `true` for dev-only.
Expand All @@ -39,13 +39,15 @@ const USE_LOCAL = false;
// ================================================================================================
// Import Map
// ================================================================================================
const importUrl = (k, v, extra = '') => {
const importUrl = (k, v, extra = '', params = '') => {
let external = EXTERNAL;
// Pin react and react-dom.
if (k === 'react' || k === 'react-dom') {
v = reactVersion;
external = '';
}

return `https://esm.sh/${ESM_SH_VERSION}/${k}@${v}${extra}?${DEPS}${DEV}`;
return `https://esm.sh/${ESM_SH_VERSION}${k}@${v}${extra}?${external}${params}${DEV}`;
};

const getImportMap = () => {
Expand All @@ -54,7 +56,7 @@ const getImportMap = () => {
htm: importUrl('htm', '^3'),
spectacle: USE_LOCAL
? '../../packages/spectacle/lib/index.mjs'
: 'https://esm.sh/spectacle@10?bundle'
: importUrl('spectacle', '10', '', '&bundle')
};

Object.entries(Object.assign({}, dependencies, peerDependencies))
Expand Down

0 comments on commit 7986539

Please sign in to comment.