Skip to content

Commit abc2cb9

Browse files
carloskelly13carloskelly13
authored
Added support for App Router + SSR, moved to tsup for ESM/CJS (#1263)
* Added support for App Router + SSR, moved to for building * Fix extension * Fix UMD build, add DefaultTemplate component. * dedent template docs * Switch to CJS import. * Clean up tasks, remove ULID. * Added top-level typecheck to scripts.
1 parent 3257c8d commit abc2cb9

33 files changed

+2655
-2881
lines changed

‎.changeset/beige-cooks-push.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'spectacle': major
3+
'spectacle-docs': minor
4+
---
5+
6+
Added support for App Dir and SSR. Updated doc examples.
7+
Added default template component containing the full screen and animated progress indicator.
8+
Set peer dependency on React to v18

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,4 @@ bin
4444
# Pack-ing artifacts
4545
packages/**/package
4646
**/*.tgz
47+
/examples/nextjs-app-router/

‎docs/api-reference.md‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ A `template` contains Layout tags (referred to as a template render function) an
2020
| Props | Type | Default |
2121
|--------------------|---------------------------------------------|--------------------|
2222
| `theme` | [Styled-system theme object](./themes) | |
23-
| `template` | [Template render function](#layout-tags) | |
23+
| `template` | [Templates](#templates) | |
2424
| `pageSize` | PropTypes.string | `"13.66in 7.68in"` |
2525
| `pageOrientation` | `"landscape"` or `"portrait"` | `"landscape"` |
2626
| `printScale` | PropTypes.number | `0.959` |
@@ -64,6 +64,31 @@ These tags are for displaying textual content.
6464
| **`ListItem`** | [**Space**](./props#space)<br />[**Color**](./props#color)<br /> [**Typography**](./props#typography) | — | **margin**: listMargin |
6565
| **`CodeSpan`** | [**Space**](./props#space)<br />[**Color**](./props#color)<br /> [**Typography**](./props#typography) | — | **fontFamily**: monospace<br />**fontSize**: text |
6666

67+
68+
## Templates 🆕
69+
70+
Templates are overlays that are present on every slide. Typically, they contain controls and deck progress. Spectacle contains a default template, shown below, ready to use that contains the full screen control and the animated progress dots. `<DefaultTemplate />` also supports customizing the color using the prop `color` and CSS color values such as `purple` or `#fff`.
71+
72+
![default template](../website/static/img/templates/default-template.png)
73+
74+
```tsx
75+
import { Deck, DefaultTemplate } from 'spectacle'
76+
77+
const Presentation = () => (
78+
<Deck theme={theme} template={<DefaultTemplate />}>
79+
{/* Your presentation here */}
80+
</Deck>
81+
)
82+
```
83+
84+
You can also create a custom template component. Props provided to the template component are:
85+
86+
87+
| Props | Type | Description |
88+
|------------------|--------|----------------------------------------|
89+
| `slideNumber` | number | The current index of the active slide. |
90+
| `numberOfSlides` | number | The total count of slides in the deck. |
91+
6792
## Layout Tags
6893

6994
These tags are for adding structure to your slides.

‎docs/tutorial.md‎

Lines changed: 48 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,24 @@ sidebar_position: 3
88

99
In this guide, we'll show you a couple of different ways to get started with Spectacle and walk you through the creation and customization of a presentation deck.
1010

11-
## Option One: Using a standard React-based web app
11+
## Option One: Using Vite to bootstrap a React-based Spectacle app
1212

13-
1. Spin up a new React project using [`create-react-app`](https://github.com/facebook/create-react-app):
13+
1. Spin up a new React project using [`vite`](https://vitejs.dev/guide/#scaffolding-your-first-vite-project):
1414

1515
```bash
16-
npx create-react-app spectacle-tutorial
16+
npm create vite@latest my-spectacle-deck -- --template react-ts
1717
```
1818

19-
2. Install Spectacle by running `yarn add spectacle` or `npm i spectacle`.
19+
2. Install Spectacle by running `npm add spectacle`.
2020

21-
3. In `App.js`, replace the boilerplate content with this Spectacle starter:
21+
3. In `App.tsx`, replace the boilerplate content with this Spectacle starter:
2222

23-
```jsx
24-
import React from 'react';
25-
import { Deck, Slide, Heading } from 'spectacle';
23+
```tsx
24+
import { Deck, Slide, Heading, DefaultTemplate } from 'spectacle';
2625

2726
function App() {
2827
return (
29-
<Deck>
28+
<Deck template={<DefaultTemplate />}>
3029
<Slide>
3130
<Heading>Welcome to Spectacle</Heading>
3231
</Slide>
@@ -37,9 +36,46 @@ In this guide, we'll show you a couple of different ways to get started with Spe
3736
export default App;
3837
```
3938

40-
4. And you're good to go! Using `create-react-app`'s built-in `start` script, you can start a hot-reloading server to begin building your Spectacle presentation by running `yarn run start` or `npm run start`.
39+
## Option Two: Using NextJS App Router to bootstrap a React-based Spectacle app
4140

42-
## Option Two: Using Markdown and the Spectacle CLI
41+
1. Spin up a new React project using [`vite`](https://vitejs.dev/guide/#scaffolding-your-first-vite-project):
42+
43+
```bash
44+
npx create-next-app@latest
45+
```
46+
47+
2. Install Spectacle by running `npm add spectacle`.
48+
49+
3. Create a `deck.tsx` file inside the `app` directory and add the following Spectacle starter:
50+
51+
```tsx
52+
"use client";
53+
54+
import { Deck, Slide, Heading, DefaultTemplate } from 'spectacle';
55+
56+
export const SpectacleDeck = () => {
57+
return (
58+
<Deck template={<DefaultTemplate />}>
59+
<Slide>
60+
<Heading>Welcome to Spectacle</Heading>
61+
</Slide>
62+
</Deck>
63+
);
64+
};
65+
```
66+
67+
4. In `App.tsx`, import the `<SpectacleDeck />` component:
68+
69+
```tsx
70+
import { SpectacleDeck } from "./deck";
71+
72+
export default function Home() {
73+
return <SpectacleDeck />;
74+
}
75+
76+
```
77+
78+
## Option Three: Using Markdown and the Spectacle CLI
4379

4480
1. Create a new markdown file. You can use `.md` or `.mdx` (MDX lets you mix JSX components inside markdown).
4581

@@ -71,7 +107,7 @@ In this guide, we'll show you a couple of different ways to get started with Spe
71107

72108
3. And you're good to go! The web server you started supports live refreshing and will update your deck as you make changes to the markdown file.
73109

74-
## Option Three: Using One Page
110+
## Option Four: Using One Page
75111

76112
One Page is a single self-contained `HTML` file that lets you build a deck using no build steps, using [htm](https://github.com/developit/htm) over JSX to reduce the dependencies and load time.
77113

‎examples/js/index.js‎

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ import {
77
CodeSpan,
88
OrderedList,
99
ListItem,
10-
FullScreen,
11-
AnimatedProgress,
1210
Appear,
1311
Slide,
1412
Deck,
@@ -20,6 +18,7 @@ import {
2018
MarkdownSlide,
2119
MarkdownSlideSet,
2220
Notes,
21+
DefaultTemplate,
2322
SlideLayout
2423
} from 'spectacle';
2524
import ReactDOM from 'react-dom';
@@ -36,24 +35,6 @@ const theme = {
3635
};
3736
// SPECTACLE_CLI_THEME_END
3837

39-
// SPECTACLE_CLI_TEMPLATE_START
40-
const template = () => (
41-
<FlexBox
42-
justifyContent="space-between"
43-
position="absolute"
44-
bottom={0}
45-
width={1}
46-
>
47-
<Box padding="0 1em">
48-
<FullScreen />
49-
</Box>
50-
<Box padding="1em">
51-
<AnimatedProgress />
52-
</Box>
53-
</FlexBox>
54-
);
55-
// SPECTACLE_CLI_TEMPLATE_END
56-
5738
const SlideFragments = () => (
5839
<>
5940
<Slide>
@@ -71,6 +52,8 @@ const SlideFragments = () => (
7152
</>
7253
);
7354

55+
const template = <DefaultTemplate />;
56+
7457
const Presentation = () => (
7558
<Deck theme={theme} template={template}>
7659
<Slide>

‎examples/js/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
"name": "spectacle-example-js",
33
"private": true,
44
"dependencies": {
5-
"react": "^18.1.0",
6-
"react-dom": "^18.1.0",
5+
"react": "^18.2.0",
6+
"react-dom": "^18.2.0",
77
"spectacle": "*"
88
},
99
"devDependencies": {},
@@ -25,7 +25,7 @@
2525
"dist/*"
2626
],
2727
"dependencies": [
28-
"../../packages/spectacle:build:lib:esm"
28+
"../../packages/spectacle:build:lib"
2929
],
3030
"packageLocks": [
3131
"pnpm-lock.yaml"

‎examples/md/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"dist/*"
2626
],
2727
"dependencies": [
28-
"../../packages/spectacle:build:lib:esm"
28+
"../../packages/spectacle:build:lib"
2929
],
3030
"packageLocks": [
3131
"pnpm-lock.yaml"

‎examples/mdx/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"dist/*"
3030
],
3131
"dependencies": [
32-
"../../packages/spectacle:build:lib:esm"
32+
"../../packages/spectacle:build:lib"
3333
],
3434
"packageLocks": [
3535
"pnpm-lock.yaml"

‎examples/one-page/index.html‎

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<script src="https://unpkg.com/[email protected]/umd/react-is.production.min.js"></script>
1515
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
1616
<script src="https://unpkg.com/spectacle@^9/dist/spectacle.min.js"></script>
17-
<!-- <script src="../../packages/spectacle/dist/spectacle.js"></script> -->
17+
<!-- <script src="../../packages/spectacle/dist/spectacle.min.js"></script>-->
1818

1919
<script type="module">
2020
const {
@@ -25,8 +25,6 @@
2525
CodeSpan,
2626
OrderedList,
2727
ListItem,
28-
FullScreen,
29-
AnimatedProgress,
3028
Appear,
3129
Slide,
3230
Deck,
@@ -38,6 +36,7 @@
3836
MarkdownSlide,
3937
MarkdownSlideSet,
4038
Notes,
39+
DefaultTemplate,
4140
SlideLayout
4241
} = Spectacle;
4342

@@ -53,20 +52,6 @@
5352
}
5453
};
5554
// SPECTACLE_CLI_THEME_END
56-
57-
// SPECTACLE_CLI_TEMPLATE_START
58-
const template = () => html`
59-
<${FlexBox} justifyContent="space-between" position="absolute" bottom=${0} width=${1}>
60-
<${Box} padding="0 1em">
61-
<${FullScreen} />
62-
</${Box}>
63-
<${Box} padding="1em">
64-
<${AnimatedProgress} />
65-
</${Box}>
66-
</${FlexBox}>
67-
`;
68-
// SPECTACLE_CLI_TEMPLATE_END
69-
7055
const SlideFragments = () => html`
7156
<${Slide}>
7257
<${Text}>This is a slide fragment.</${Text}>
@@ -82,8 +67,10 @@
8267
</${Slide}>
8368
`;
8469

85-
const Presentation = () => html`
86-
<${Deck} theme=${theme} template=${template}>
70+
const template = html`
71+
<${DefaultTemplate} />`;
72+
73+
const Presentation = () => html`<${Deck} theme=${theme} template=${template}>
8774
<${Slide}>
8875
<${FlexBox} height="100%">
8976
<${SpectacleLogo} size=${500} />

‎examples/typescript/index.tsx‎

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ import {
77
CodeSpan,
88
OrderedList,
99
ListItem,
10-
FullScreen,
11-
AnimatedProgress,
1210
Appear,
1311
Slide,
1412
Deck,
@@ -20,6 +18,7 @@ import {
2018
MarkdownSlide,
2119
MarkdownSlideSet,
2220
Notes,
21+
DefaultTemplate,
2322
SlideLayout
2423
} from 'spectacle';
2524
import { createRoot } from 'react-dom/client';
@@ -36,24 +35,6 @@ const theme = {
3635
};
3736
// SPECTACLE_CLI_THEME_END
3837

39-
// SPECTACLE_CLI_TEMPLATE_START
40-
const template = () => (
41-
<FlexBox
42-
justifyContent="space-between"
43-
position="absolute"
44-
bottom={0}
45-
width={1}
46-
>
47-
<Box padding="0 1em">
48-
<FullScreen />
49-
</Box>
50-
<Box padding="1em">
51-
<AnimatedProgress />
52-
</Box>
53-
</FlexBox>
54-
);
55-
// SPECTACLE_CLI_TEMPLATE_END
56-
5738
const SlideFragments = () => (
5839
<>
5940
<Slide>
@@ -72,7 +53,7 @@ const SlideFragments = () => (
7253
);
7354

7455
const Presentation = () => (
75-
<Deck theme={theme} template={template}>
56+
<Deck theme={theme} template={<DefaultTemplate />}>
7657
<Slide>
7758
<FlexBox height="100%">
7859
<SpectacleLogo size={500} />

0 commit comments

Comments
 (0)