Added support for App Router + SSR, moved to tsup for ESM/CJS

.changeset/beige-cooks-push.md

@@ -0,0 +1,8 @@
+---
+'spectacle': major
+'spectacle-docs': minor
+---
+
+Added support for App Dir and SSR. Updated doc examples.
+Added default template component containing the full screen and animated progress indicator.
+Set peer dependency on React to v18

.gitignore

@@ -44,3 +44,4 @@ bin
 # Pack-ing artifacts
 packages/**/package
 **/*.tgz
+/examples/nextjs-app-router/

docs/api-reference.md

@@ -20,7 +20,7 @@ A `template` contains Layout tags (referred to as a template render function) an
 | Props              | Type                                        | Default            |
 |--------------------|---------------------------------------------|--------------------|
 | `theme`            | [Styled-system theme object](./themes)      |                    |
-| `template`         | [Template render function](#layout-tags)    |                    |
+| `template`         | [Templates](#templates)                     |                    |
 | `pageSize`         | PropTypes.string                            | `"13.66in 7.68in"` |
 | `pageOrientation`  | `"landscape"` or `"portrait"`               | `"landscape"`      |
 | `printScale`       | PropTypes.number                            | `0.959`            |
@@ -64,6 +64,31 @@ These tags are for displaying textual content.
 | **`ListItem`**      | [**Space**](./props#space)<br />[**Color**](./props#color)<br /> [**Typography**](./props#typography)       | —                          | **margin**: listMargin                                                                                                                                           |
 | **`CodeSpan`**      | [**Space**](./props#space)<br />[**Color**](./props#color)<br /> [**Typography**](./props#typography)       | —                          | **fontFamily**: monospace<br />**fontSize**: text                                                                                                                |
 
+
+## Templates 🆕
+
+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`.
+
+![default template](../website/static/img/templates/default-template.png)
+
+```tsx
+import { Deck, DefaultTemplate } from 'spectacle'
+
+const Presentation = () => (
+  <Deck theme={theme} template={<DefaultTemplate />}>
+    {/* Your presentation here */}
+  </Deck>
+)
+```
+
+You can also create a custom template component. Props provided to the template component are:
+
+
+| Props            | Type   | Description                            |
+|------------------|--------|----------------------------------------|
+| `slideNumber`    | number | The current index of the active slide. |
+| `numberOfSlides` | number | The total count of slides in the deck. |
+
 ## Layout Tags
 
 These tags are for adding structure to your slides.

docs/tutorial.md

@@ -8,25 +8,24 @@ sidebar_position: 3
 
 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.
 
-## Option One: Using a standard React-based web app
+## Option One: Using Vite to bootstrap a React-based Spectacle app
 
-1. Spin up a new React project using [`create-react-app`](https://github.com/facebook/create-react-app):
+1. Spin up a new React project using [`vite`](https://vitejs.dev/guide/#scaffolding-your-first-vite-project):
 
    ```bash
-   npx create-react-app spectacle-tutorial
+   npm create vite@latest my-spectacle-deck -- --template react-ts
    ```
 
-2. Install Spectacle by running `yarn add spectacle` or `npm i spectacle`.
+2. Install Spectacle by running `npm add spectacle`.
 
-3. In `App.js`, replace the boilerplate content with this Spectacle starter:
+3. In `App.tsx`, replace the boilerplate content with this Spectacle starter:
 
-   ```jsx
-   import React from 'react';
-   import { Deck, Slide, Heading } from 'spectacle';
+   ```tsx
+   import { Deck, Slide, Heading, DefaultTemplate } from 'spectacle';
 
    function App() {
      return (
-       <Deck>
+       <Deck template={<DefaultTemplate />}>
          <Slide>
            <Heading>Welcome to Spectacle</Heading>
          </Slide>
@@ -37,9 +36,46 @@ In this guide, we'll show you a couple of different ways to get started with Spe
    export default App;
    ```
 
-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`.
+## Option Two: Using NextJS App Router to bootstrap a React-based Spectacle app
 
-## Option Two: Using Markdown and the Spectacle CLI
+1. Spin up a new React project using [`vite`](https://vitejs.dev/guide/#scaffolding-your-first-vite-project):
+
+   ```bash
+   npx create-next-app@latest
+   ```
+
+2. Install Spectacle by running `npm add spectacle`.
+
+3. Create a `deck.tsx` file inside the `app` directory and add the following Spectacle starter:
+
+   ```tsx
+   "use client";
+
+   import { Deck, Slide, Heading, DefaultTemplate } from 'spectacle';
+
+   export const SpectacleDeck = () => {
+     return (
+       <Deck template={<DefaultTemplate />}>
+         <Slide>
+           <Heading>Welcome to Spectacle</Heading>
+         </Slide>
+       </Deck>
+     );
+   };
+   ```
+
+4. In `App.tsx`, import the `<SpectacleDeck />` component:
+
+   ```tsx
+   import { SpectacleDeck } from "./deck";
+
+   export default function Home() {
+     return <SpectacleDeck />;
+   }
+
+   ```
+
+## Option Three: Using Markdown and the Spectacle CLI
 
 1. Create a new markdown file. You can use `.md` or `.mdx` (MDX lets you mix JSX components inside markdown).
 
@@ -71,7 +107,7 @@ In this guide, we'll show you a couple of different ways to get started with Spe
 
 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.
 
-## Option Three: Using One Page
+## Option Four: Using One Page
 
 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.
 

examples/js/index.js

@@ -7,8 +7,6 @@ import {
   CodeSpan,
   OrderedList,
   ListItem,
-  FullScreen,
-  AnimatedProgress,
   Appear,
   Slide,
   Deck,
@@ -20,6 +18,7 @@ import {
   MarkdownSlide,
   MarkdownSlideSet,
   Notes,
+  DefaultTemplate,
   SlideLayout
 } from 'spectacle';
 import ReactDOM from 'react-dom';
@@ -36,24 +35,6 @@ const theme = {
 };
 // SPECTACLE_CLI_THEME_END
 
-// SPECTACLE_CLI_TEMPLATE_START
-const template = () => (
-  <FlexBox
-    justifyContent="space-between"
-    position="absolute"
-    bottom={0}
-    width={1}
-  >
-    <Box padding="0 1em">
-      <FullScreen />
-    </Box>
-    <Box padding="1em">
-      <AnimatedProgress />
-    </Box>
-  </FlexBox>
-);
-// SPECTACLE_CLI_TEMPLATE_END
-
 const SlideFragments = () => (
   <>
     <Slide>
@@ -71,6 +52,8 @@ const SlideFragments = () => (
   </>
 );
 
+const template = <DefaultTemplate />;
+
 const Presentation = () => (
   <Deck theme={theme} template={template}>
     <Slide>

examples/js/package.json

@@ -2,8 +2,8 @@
   "name": "spectacle-example-js",
   "private": true,
   "dependencies": {
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "spectacle": "*"
   },
   "devDependencies": {},
@@ -25,7 +25,7 @@
         "dist/*"
       ],
       "dependencies": [
-        "../../packages/spectacle:build:lib:esm"
+        "../../packages/spectacle:build:lib"
       ],
       "packageLocks": [
         "pnpm-lock.yaml"

examples/md/package.json

@@ -25,7 +25,7 @@
         "dist/*"
       ],
       "dependencies": [
-        "../../packages/spectacle:build:lib:esm"
+        "../../packages/spectacle:build:lib"
       ],
       "packageLocks": [
         "pnpm-lock.yaml"

examples/mdx/package.json

@@ -29,7 +29,7 @@
           "dist/*"
         ],
         "dependencies": [
-          "../../packages/spectacle:build:lib:esm"
+          "../../packages/spectacle:build:lib"
         ],
         "packageLocks": [
           "pnpm-lock.yaml"

examples/one-page/index.html

@@ -14,7 +14,7 @@
     <script src="https://unpkg.com/react-is@18.1.0/umd/react-is.production.min.js"></script>
     <script src="https://unpkg.com/prop-types@15.7.2/prop-types.min.js"></script>
     <script src="https://unpkg.com/spectacle@^9/dist/spectacle.min.js"></script>
-    <!-- <script src="../../packages/spectacle/dist/spectacle.js"></script> -->
+<!--    <script src="../../packages/spectacle/dist/spectacle.min.js"></script>-->
 
     <script type="module">
       const {
@@ -25,8 +25,6 @@
         CodeSpan,
         OrderedList,
         ListItem,
-        FullScreen,
-        AnimatedProgress,
         Appear,
         Slide,
         Deck,
@@ -38,6 +36,7 @@
         MarkdownSlide,
         MarkdownSlideSet,
         Notes,
+        DefaultTemplate,
         SlideLayout
       } = Spectacle;
 
@@ -53,20 +52,6 @@
         }
       };
       // SPECTACLE_CLI_THEME_END
-
-      // SPECTACLE_CLI_TEMPLATE_START
-      const template = () => html`
-        <${FlexBox} justifyContent="space-between" position="absolute" bottom=${0} width=${1}>
-          <${Box} padding="0 1em">
-            <${FullScreen} />
-          </${Box}>
-          <${Box} padding="1em">
-            <${AnimatedProgress} />
-          </${Box}>
-        </${FlexBox}>
-      `;
-      // SPECTACLE_CLI_TEMPLATE_END
-
       const SlideFragments = () => html`
         <${Slide}>
           <${Text}>This is a slide fragment.</${Text}>
@@ -82,8 +67,10 @@
         </${Slide}>
       `;
 
-      const Presentation = () => html`
-        <${Deck} theme=${theme} template=${template}>
+      const template = html`
+        <${DefaultTemplate} />`;
+
+        const Presentation = () => html`<${Deck} theme=${theme} template=${template}>
           <${Slide}>
             <${FlexBox} height="100%">
               <${SpectacleLogo} size=${500} />

examples/typescript/index.tsx

@@ -7,8 +7,6 @@ import {
   CodeSpan,
   OrderedList,
   ListItem,
-  FullScreen,
-  AnimatedProgress,
   Appear,
   Slide,
   Deck,
@@ -20,6 +18,7 @@ import {
   MarkdownSlide,
   MarkdownSlideSet,
   Notes,
+  DefaultTemplate,
   SlideLayout
 } from 'spectacle';
 import { createRoot } from 'react-dom/client';
@@ -36,24 +35,6 @@ const theme = {
 };
 // SPECTACLE_CLI_THEME_END
 
-// SPECTACLE_CLI_TEMPLATE_START
-const template = () => (
-  <FlexBox
-    justifyContent="space-between"
-    position="absolute"
-    bottom={0}
-    width={1}
-  >
-    <Box padding="0 1em">
-      <FullScreen />
-    </Box>
-    <Box padding="1em">
-      <AnimatedProgress />
-    </Box>
-  </FlexBox>
-);
-// SPECTACLE_CLI_TEMPLATE_END
-
 const SlideFragments = () => (
   <>
     <Slide>
@@ -72,7 +53,7 @@ const SlideFragments = () => (
 );
 
 const Presentation = () => (
-  <Deck theme={theme} template={template}>
+  <Deck theme={theme} template={<DefaultTemplate />}>
     <Slide>
       <FlexBox height="100%">
         <SpectacleLogo size={500} />

examples/typescript/package.json

@@ -3,12 +3,12 @@
   "private": true,
   "dependencies": {
     "spectacle": "*",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.12",
-    "@types/react-dom": "^18.0.5"
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4"
   },
   "scripts": {
     "start": "webpack-dev-server --port=3100 --hot --config ./webpack.config.js",
@@ -29,7 +29,7 @@
         "dist/*"
       ],
       "dependencies": [
-        "../../packages/spectacle:build:lib:esm"
+        "../../packages/spectacle:build:lib"
       ],
       "packageLocks": [
         "pnpm-lock.yaml"

package-scripts.js

@@ -16,16 +16,11 @@ module.exports = {
   scripts: {
     // Build
     // - Typescript
-    'types:create': 'tsc --emitDeclarationOnly',
     'types:check': 'tsc --noEmit',
 
-    // - Babel
-    'babel:pkg:base':
-      'babel src --config-file ../../.babelrc.build.js --extensions .tsx,.ts,.jsx,.js',
-    'babel:pkg:lib:esm':
-      'cross-env BABEL_ENV=es nps "babel:pkg:base src --out-dir es"',
-    'babel:pkg:lib:cjs':
-      'cross-env BABEL_ENV=cjs nps "babel:pkg:base src --out-dir lib"',
+    // - tsup
+    'tsup:watch': 'tsup --watch',
+    tsup: 'tsup',
 
     // - Webpack
     webpack: 'webpack',