From fa5802d3910c466d7e71df3d72b6d7f0ab3d259f Mon Sep 17 00:00:00 2001
From: cpojer <christoph.pojer@gmail.com>
Date: Mon, 19 Feb 2024 18:44:28 +0900
Subject: [PATCH] Add the ability to overwrite the slide container, 0.11.0.

---
 examples/tokyo/package.json                   |  2 +-
 examples/tokyo/slides.re.mdx.d.ts             | 11 ---------
 packages/create-remdx/package.json            |  2 +-
 .../create-remdx/template/slides.re.mdx.d.ts  | 11 ---------
 packages/remdx/client.d.ts                    |  1 +
 packages/remdx/package.json                   |  2 +-
 packages/remdx/src/slide.tsx                  | 10 +++++---
 packages/remdx/src/slidesToComponent.tsx      |  9 +++++++-
 packages/remdx/types.tsx                      | 23 +++++++++++++------
 packages/vite-plugin-remdx/package.json       |  2 +-
 10 files changed, 36 insertions(+), 37 deletions(-)
 delete mode 100644 examples/tokyo/slides.re.mdx.d.ts
 delete mode 100644 packages/create-remdx/template/slides.re.mdx.d.ts

diff --git a/examples/tokyo/package.json b/examples/tokyo/package.json
index 0ff7964..5fba556 100644
--- a/examples/tokyo/package.json
+++ b/examples/tokyo/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@nkzw/remdx-tokyo-example",
   "description": "Beautiful Minimalist React & MDX Presentations",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "author": "Christoph Nakazawa <christoph.pojer@gmail.com>",
   "private": true,
   "repository": {
diff --git a/examples/tokyo/slides.re.mdx.d.ts b/examples/tokyo/slides.re.mdx.d.ts
deleted file mode 100644
index 3a2a8e7..0000000
--- a/examples/tokyo/slides.re.mdx.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type {
-  ComponentList,
-  ReMDXSlide,
-  Themes as ThemesType,
-} from '@nkzw/remdx';
-
-let slides: ReadonlyArray<ReMDXSlide>;
-
-export let Components: ComponentList | undefined;
-export let Themes: ThemesType | undefined;
-export default slides;
diff --git a/packages/create-remdx/package.json b/packages/create-remdx/package.json
index 0956ba9..550a04d 100644
--- a/packages/create-remdx/package.json
+++ b/packages/create-remdx/package.json
@@ -1,7 +1,7 @@
 {
   "name": "create-remdx",
   "description": "Beautiful Minimalist React & MDX Presentations",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "author": "Christoph Nakazawa <christoph.pojer@gmail.com>",
   "repository": {
     "type": "git",
diff --git a/packages/create-remdx/template/slides.re.mdx.d.ts b/packages/create-remdx/template/slides.re.mdx.d.ts
deleted file mode 100644
index 28ed55d..0000000
--- a/packages/create-remdx/template/slides.re.mdx.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type {
-  ComponentList,
-  ReMDXSlide,
-  Themes as ThemesType,
-} from '@nkzw/remdx';
-
-declare let slides: ReadonlyArray<ReMDXSlide>;
-
-export let Components: ComponentList | undefined;
-export let Themes: ThemesType | undefined;
-export default slides;
diff --git a/packages/remdx/client.d.ts b/packages/remdx/client.d.ts
index 7d19a3d..ce16aa8 100644
--- a/packages/remdx/client.d.ts
+++ b/packages/remdx/client.d.ts
@@ -2,6 +2,7 @@ declare module '*.re.mdx' {
   let slides: ReadonlyArray<import('./types.jsx').ReMDXSlide>;
 
   export let Components: import('./types.jsx').MDXComponents | undefined;
+  export let Container: import('./types.jsx').SlideContainer | undefined;
   export let Themes: import('./types.jsx').Themes | undefined;
   export let Transitions:
     | Record<string, import('./types.jsx').SlideTransition>
diff --git a/packages/remdx/package.json b/packages/remdx/package.json
index 935586f..2788156 100644
--- a/packages/remdx/package.json
+++ b/packages/remdx/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@nkzw/remdx",
   "description": "Beautiful Minimalist React & MDX Presentations",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "author": "Christoph Nakazawa <christoph.pojer@gmail.com>",
   "repository": {
     "type": "git",
diff --git a/packages/remdx/src/slide.tsx b/packages/remdx/src/slide.tsx
index 48c71c7..15bf5f3 100644
--- a/packages/remdx/src/slide.tsx
+++ b/packages/remdx/src/slide.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react';
 import { animated, useSpring } from 'react-spring';
 import { useSwipeable } from 'react-swipeable';
-import { SlideTransition } from '../types.tsx';
+import { SlideContainer, SlideTransition } from '../types.tsx';
 import { DeckContext } from './deck.tsx';
 import { GOTO_FINAL_STEP } from './hooks/use-deck-state.tsx';
 import { Transitions } from './transitions.tsx';
@@ -17,6 +17,9 @@ import { Transitions } from './transitions.tsx';
 export default function Slide({
   children,
   className,
+  container: Container = ({ children, style }) => (
+    <div style={style}>{children}</div>
+  ),
   id,
   image,
   padding = 48,
@@ -25,6 +28,7 @@ export default function Slide({
 }: {
   children: ReactNode;
   className?: string;
+  container?: SlideContainer;
   id: number;
   image?: string;
   padding?: string | number;
@@ -226,7 +230,7 @@ export default function Slide({
         }}
         {...swipeHandler}
       >
-        <div
+        <Container
           style={{
             display: 'flex',
             flex: 1,
@@ -236,7 +240,7 @@ export default function Slide({
           }}
         >
           <Suspense>{children}</Suspense>
-        </div>
+        </Container>
       </div>
     </animated.div>
   );
diff --git a/packages/remdx/src/slidesToComponent.tsx b/packages/remdx/src/slidesToComponent.tsx
index 1016135..ab07606 100644
--- a/packages/remdx/src/slidesToComponent.tsx
+++ b/packages/remdx/src/slidesToComponent.tsx
@@ -6,12 +6,19 @@ import Slide from './slide.tsx';
 import { Transitions as DefaultTransitions } from './transitions.tsx';
 
 export default async function slidesToComponent(module: Promise<ReMDXModule>) {
-  const { Components, Themes, Transitions, default: slides } = await module;
+  const {
+    Components,
+    Container,
+    Themes,
+    Transitions,
+    default: slides,
+  } = await module;
   return (
     <MDXProvider components={{ ...DefaultComponents, ...Components }}>
       <Deck
         slides={slides.map(({ Component, data }, index) => (
           <Slide
+            container={Container}
             id={index}
             image={data?.image}
             key={index}
diff --git a/packages/remdx/types.tsx b/packages/remdx/types.tsx
index ee6221d..3ce0b53 100644
--- a/packages/remdx/types.tsx
+++ b/packages/remdx/types.tsx
@@ -1,24 +1,33 @@
 import type { MDXComponents as _MDXComponents } from 'mdx/types.js';
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
 export type MDXComponents = _MDXComponents;
 
 export type Themes = Record<string, CSSProperties>;
 
-export type SlideTransition = {
+export type SlideTransition = Readonly<{
   enter?: CSSProperties;
   from?: CSSProperties;
   leave?: CSSProperties;
-};
+}>;
 
-export type ReMDXSlide = {
+export type SlideContainer = ({
+  children,
+  style,
+}: {
+  children: JSX.Element;
+  style: CSSProperties;
+}) => ReactNode;
+
+export type ReMDXSlide = Readonly<{
   Component: () => JSX.Element;
   data: Record<string, string>;
-};
+}>;
 
-export type ReMDXModule = {
+export type ReMDXModule = Readonly<{
   Components?: _MDXComponents;
+  Container?: SlideContainer;
   Themes?: Themes;
   Transitions?: Record<string, SlideTransition>;
   default: ReadonlyArray<ReMDXSlide>;
-};
+}>;
diff --git a/packages/vite-plugin-remdx/package.json b/packages/vite-plugin-remdx/package.json
index accbf86..7e8876c 100644
--- a/packages/vite-plugin-remdx/package.json
+++ b/packages/vite-plugin-remdx/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@nkzw/vite-plugin-remdx",
   "description": "Beautiful Minimalist React & MDX Presentations",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "author": "Christoph Nakazawa <christoph.pojer@gmail.com>",
   "repository": {
     "type": "git",