Skip to content

Fix one-page build + html and other misc. #1349

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.

Sign up for GitHub

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

Merged
ryan-roemer merged 5 commits into from
Apr 22, 2025
+63 −45
Merged

Fix one-page build + html and other misc. #1349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fe304f4
Deck works now with new esm build
ryan-roemer Apr 19, 2025
f76e547
Switch to createRoot destructure.
ryan-roemer Apr 19, 2025
244ebc1
Final fixes
ryan-roemer Apr 19, 2025
fe29051
Final prod mode
ryan-roemer Apr 19, 2025
3821791
Little more debug help for the future
ryan-roemer Apr 20, 2025
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
8 changes: 4 additions & 4 deletions examples/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import {
FlexBox,
Heading,
Expand Down Expand Up @@ -38,10 +38,10 @@ const theme = {

const SlideFragments = () => (
<>
<Slide>
<Slide key="slide-fragment-1">
<Text>This is a slide fragment.</Text>
</Slide>
<Slide>
<Slide key="slide-fragment-2">
<Text>This is also a slide fragment.</Text>
<Appear>
<Text>This item shows up!</Text>
Expand Down Expand Up @@ -267,5 +267,5 @@ const Presentation = () => (
</Deck>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
const root = createRoot(document.getElementById('root'));
root.render(<Presentation />);
69 changes: 35 additions & 34 deletions examples/one-page/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,42 +12,43 @@
<script type="importmap">
{
"imports": {
"htm": "https://esm.sh/v121/htm@^[email protected]",
"spectacle": "https://esm.sh/spectacle@10?bundle",
"broadcast-channel": "https://esm.sh/v121/broadcast-channel@^[email protected]",
"history": "https://esm.sh/v121/history@^[email protected]",
"kbar": "https://esm.sh/v121/[email protected][email protected]",
"lodash.clonedeep": "https://esm.sh/v121/lodash.clonedeep@^[email protected]",
"mdast-builder": "https://esm.sh/v121/mdast-builder@^[email protected]",
"mdast-zone": "https://esm.sh/v121/mdast-zone@^[email protected]",
"merge-anything": "https://esm.sh/v121/merge-anything@^[email protected]",
"mousetrap": "https://esm.sh/v121/mousetrap@^[email protected]",
"query-string": "https://esm.sh/v121/query-string@^[email protected]",
"react": "https://esm.sh/v121/[email protected][email protected]",
"react/jsx-runtime": "https://esm.sh/v121/[email protected]/[email protected]",
"react-dom": "https://esm.sh/v121/[email protected][email protected]",
"react-fast-compare": "https://esm.sh/v121/react-fast-compare@^[email protected]",
"react-is": "https://esm.sh/v121/react-is@^[email protected]",
"react-spring": "https://esm.sh/v121/react-spring@^[email protected]",
"react-swipeable": "https://esm.sh/v121/react-swipeable@^[email protected]",
"react-syntax-highlighter": "https://esm.sh/v121/react-syntax-highlighter@^[email protected]",
"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]",
"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]",
"rehype-raw": "https://esm.sh/v121/rehype-raw@^[email protected]",
"rehype-react": "https://esm.sh/v121/rehype-react@^[email protected]",
"remark-parse": "https://esm.sh/v121/remark-parse@^[email protected]",
"remark-rehype": "https://esm.sh/v121/remark-rehype@^[email protected]",
"styled-components": "https://esm.sh/v121/styled-components@^[email protected]",
"styled-system": "https://esm.sh/v121/[email protected][email protected]",
"unified": "https://esm.sh/v121/unified@^[email protected]",
"unist-util-visit": "https://esm.sh/v121/unist-util-visit@^[email protected]",
"use-resize-observer": "https://esm.sh/v121/use-resize-observer@^[email protected]"
"htm": "https://esm.sh/htm@^3?external=react,react-dom",
"spectacle": "https://esm.sh/spectacle@10?external=react,react-dom&bundle",
"broadcast-channel": "https://esm.sh/broadcast-channel@^4.17.0?external=react,react-dom",
"history": "https://esm.sh/history@^5.3.0?external=react,react-dom",
"kbar": "https://esm.sh/[email protected]?external=react,react-dom",
"lodash.clonedeep": "https://esm.sh/lodash.clonedeep@^4.5.0?external=react,react-dom",
"mdast-builder": "https://esm.sh/mdast-builder@^1.1.1?external=react,react-dom",
"mdast-zone": "https://esm.sh/mdast-zone@^4.0.0?external=react,react-dom",
"merge-anything": "https://esm.sh/merge-anything@^3.0.3?external=react,react-dom",
"mousetrap": "https://esm.sh/mousetrap@^1.6.5?external=react,react-dom",
"query-string": "https://esm.sh/query-string@^7.1.3?external=react,react-dom",
"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?",
"react-fast-compare": "https://esm.sh/react-fast-compare@^3.2.0?external=react,react-dom",
"react-is": "https://esm.sh/react-is@^18.1.0?external=react,react-dom",
"react-spring": "https://esm.sh/react-spring@^9.5.5?external=react,react-dom",
"react-swipeable": "https://esm.sh/react-swipeable@^7.0.0?external=react,react-dom",
"react-syntax-highlighter": "https://esm.sh/react-syntax-highlighter@^15.5.0?external=react,react-dom",
"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",
"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",
"rehype-raw": "https://esm.sh/rehype-raw@^5.1.0?external=react,react-dom",
"rehype-react": "https://esm.sh/rehype-react@^6.0.0?external=react,react-dom",
"remark-parse": "https://esm.sh/remark-parse@^8.0.3?external=react,react-dom",
"remark-rehype": "https://esm.sh/remark-rehype@^7.0.0?external=react,react-dom",
"styled-components": "https://esm.sh/styled-components@^5.3.6?external=react,react-dom",
"styled-system": "https://esm.sh/[email protected]?external=react,react-dom",
"unified": "https://esm.sh/unified@^9.0.0?external=react,react-dom",
"unist-util-visit": "https://esm.sh/unist-util-visit@^2.0.3?external=react,react-dom",
"use-resize-observer": "https://esm.sh/use-resize-observer@^9.0.2?external=react,react-dom"
}
}
</script>
<script type="module">
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import {
FlexBox,
Heading,
Expand Down Expand Up @@ -88,10 +89,10 @@

// SPECTACLE_CLI_THEME_END
const SlideFragments = () => html`
<${Slide}>
<${Slide} key="slide-fragment-1">
<${Text}>This is a slide fragment.</${Text}>
</${Slide}>
<${Slide}>
<${Slide} key="slide-fragment-2">
<${Text}>This is also a slide fragment.</${Text}>
<${Appear}>
<${Text}>This item shows up!</${Text}>
Expand Down Expand Up @@ -283,7 +284,7 @@
<${SlideLayout.List} title="Slide layouts!" items=${['Two-column', 'Lists' , 'And more!' ]} animateListItems />
</${Deck}>
`;
const root = ReactDOM.createRoot(document.getElementById('root'));
const root = createRoot(document.getElementById('root'));
root.render(html`<${Presentation}/>`);
</script>
</body>
Expand Down
30 changes: 23 additions & 7 deletions examples/one-page/scripts/one-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,16 @@

/**
* Generate the JS `index.html` from `examples/js/index.js`
*
* To rebuild:
* ```sh
* pnpm run build:one-page
* ```
*
* To do dev builds and testing:
* ```sh
* USE_LOCAL=true IS_DEV=true pnpm run build:one-page && pnpm run start:one-page
* ```
*/
const fs = require('fs').promises;
const path = require('path');
Expand All @@ -16,7 +26,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,27 +35,30 @@ const reactPkgPath = require.resolve('react/package.json', {
paths: [SPECTACLE_PATH]
});
const { version: reactVersion } = require(reactPkgPath);
const DEPS = `deps=react@${reactVersion}`;
const EXTERNAL = `external=react,react-dom`;

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

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

// ================================================================================================
// 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 +67,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 All @@ -67,6 +80,9 @@ const getImportMap = () => {
if (k === 'react') {
importMap[`${k}/jsx-runtime`] = importUrl(k, v, '/jsx-runtime');
}
if (k === 'react-dom') {
importMap[`${k}/client`] = importUrl(k, v, '/client');
}
if (k === 'react-syntax-highlighter') {
importMap[`${k}/dist/cjs/styles/prism/vs-dark.js`] = importUrl(
k,
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
"start:md": "concurrently --raw pnpm:build:spectacle:watch \"pnpm run --filter ./examples/md start\"",
"start:mdx": "concurrently --raw pnpm:build:spectacle:watch \"pnpm run --filter ./examples/mdx start\"",
"start:ts": "concurrently --raw pnpm:build:spectacle:watch \"pnpm run --filter ./examples/typescript start\"",
"start:one-page": "concurrently --raw pnpm:build:spectacle:watch \"pnpm run --filter ./examples/one-page start\"",
"start:examples": "concurrently --raw pnpm:build:spectacle:watch \"pnpm run --parallel --filter \\\"./examples/*\\\" start\"",
"start:create-spectacle": "pnpm run --filter ./packages/create-spectacle build --watch",
"start:docs": "pnpm run --filter spectacle-docs start",
Expand Down