diff --git a/.babelrc b/.babelrc index 2b7bafa..f406f67 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["@babel/preset-env", "@babel/preset-react"] + "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"] } diff --git a/LICENSE b/LICENSE index dfcb265..ca6d9dc 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,7 @@ MIT License -Copyright (c) 2020 Blake Nedved +Adapted from revealjs-react by Blake Nedved +Copyright (c) 2020 Gregory Beaver Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index a98f651..2cdf7c4 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,64 @@ # revealjs-react -A React wrapper for the RevealJS Presentation Library. +A Typescript/React wrapper for the RevealJS Presentation Library with types for Reveal.js as well as plugins. + +- [revealjs-react](#revealjs-react) + - [Installation](#installation) + - [Usage](#usage) + - [Components](#components) + - [RevealJS](#revealjs) + - [Slide](#slide) + - [Elements](#elements) + - [Code](#code) + - [Audio](#audio) + - [BlockQuote](#blockquote) + - [Div](#div) + - [FigCaption](#figcaption) + - [Figure](#figure) + - [Footer](#footer) + - [H1](#h1) + - [H2](#h2) + - [H3](#h3) + - [H4](#h4) + - [H5](#h5) + - [H6](#h6) + - [Header](#header) + - [IFrame](#iframe) + - [Image](#image) + - [Li](#li) + - [Link](#link) + - [Main](#main) + - [Note](#note) + - [Ol](#ol) + - [P](#p) + - [Span](#span) + - [Ul](#ul) + - [Video](#video) + - [Notes](#notes) + - [hooks](#hooks) + - [useReveal](#usereveal) + - [Using plugins](#using-plugins) ## Installation -`npm install --save revealjs-react` +`npm install -S @gregcello/revealjs-react react reveal.js react-dom` + +or + +`yarn add @gregcello/revealjs-react react reveal.js react-dom` ## Usage ```jsx import React from 'react'; import { render } from 'react-dom'; -import { RevealJS, Slide, H } from 'revealjs-react'; +import { RevealJS, Slide, H1 } from 'revealjs-react'; import RevealHighlight from 'revealjs-react/plugins/highlight'; render( - Hello, World! +

Hello, World!

, document.querySelector('#root'), @@ -26,288 +67,546 @@ render( ## Components -Look at [src/components/](src/components/) for a full list of supported components and their usage (coming soon). - -## Notes - -The `RevealJS` components supports all the reveal.js config options through props - -```js -plugins = [], - -// Display presentation control arrows -controls = true, - -// Help the user learn the controls by providing hints, for example by -// bouncing the down arrow when they first encounter a vertical slide -controlsTutorial = true, - -// Determines where controls appear, "edges" or "bottom-right" -controlsLayout = 'bottom-right', - -// Visibility rule for backwards navigation arrows; "faded", "hidden" -// or "visible" -controlsBackArrows = 'faded', - -// Display a presentation progress bar -progress = true, - -// Display the page number of the current slide -// - true = Show slide number -// - false = Hide slide number -// -// Can optionally be set as a string that specifies the number formatting = -// - "h.v" = Horizontal . vertical slide number (default) -// - "h/v" = Horizontal / vertical slide number -// - "c" = Flattened slide number -// - "c/t" = Flattened slide number / total slides -// -// Alternatively, you can provide a function that returns the slide -// number for the current slide. The function should take in a slide -// object and return an array with one string [slideNumber] or -// three strings [n1,delimiter,n2]. See #formatSlideNumber(). -slideNumber = false, - -// Can be used to limit the contexts in which the slide number appears -// - "all" = Always show the slide number -// - "print" = Only when printing to PDF -// - "speaker" = Only in the speaker view -showSlideNumber = 'all', - -// Use 1 based indexing for # links to match slide number (default is zero -// based) -hashOneBasedIndex = false, - -// Add the current slide number to the URL hash so that reloading the -// page/copying the URL will return you to the same slide -hash = false, - -// Flags if we should monitor the hash and change slides accordingly -respondToHashChanges = true, - -// Push each slide change to the browser history. Implies `hash = true` -history = false, - -// Enable keyboard shortcuts for navigation -keyboard = true, - -// Optional function that blocks keyboard events when retuning false -// -// If you set this to 'foucsed', we will only capture keyboard events -// for embdedded decks when they are in focus -keyboardCondition = null, - -// Disables the default reveal.js slide layout (scaling and centering) -// so that you can use custom CSS layout -disableLayout = false, - -// Enable the slide overview mode -overview = true, - -// Vertical centering of slides -center = true, - -// Enables touch navigation on devices with touch input -touch = true, - -// Loop the presentation -loop = false, - -// Change the presentation direction to be RTL -rtl = false, - -// Changes the behavior of our navigation directions. -// -// "default" -// Left/right arrow keys step between horizontal slides, up/down -// arrow keys step between vertical slides. Space key steps through -// all slides (both horizontal and vertical). -// -// "linear" -// Removes the up/down arrows. Left/right arrows step through all -// slides (both horizontal and vertical). -// -// "grid" -// When this is enabled, stepping left/right from a vertical stack -// to an adjacent vertical stack will land you at the same vertical -// index. -// -// Consider a deck with six slides ordered in two vertical stacks = -// 1.1 2.1 -// 1.2 2.2 -// 1.3 2.3 -// -// If you're on slide 1.3 and navigate right, you will normally move -// from 1.3 -> 2.1. If "grid" is used, the same navigation takes you -// from 1.3 -> 2.3. -navigationMode = 'default', - -// Randomizes the order of slides each time the presentation loads -shuffle = false, - -// Turns fragments on and off globally -fragments = true, - -// Flags whether to include the current fragment in the URL, -// so that reloading brings you to the same fragment position -fragmentInURL = true, - -// Flags if the presentation is running in an embedded mode, -// i.e. contained within a limited portion of the screen -embedded = false, - -// Flags if we should show a help overlay when the question-mark -// key is pressed -help = true, - -// Flags if it should be possible to pause the presentation (blackout) -pause = true, - -// Flags if speaker notes should be visible to all viewers -showNotes = false, - -// Global override for autolaying embedded media (video/audio/iframe) -// - null = Media will only autoplay if data-autoplay is present -// - true = All media will autoplay, regardless of individual setting -// - false = No media will autoplay, regardless of individual setting -autoPlayMedia = null, - -// Global override for preloading lazy-loaded iframes -// - null = Iframes with data-src AND data-preload will be loaded when within -// the viewDistance, iframes with only data-src will be loaded when visible -// - true = All iframes with data-src will be loaded when within the viewDistance -// - false = All iframes with data-src will be loaded only when visible -preloadIframes = null, - -// Can be used to globally disable auto-animation -autoAnimate = true, - -// Optionally provide a custom element matcher that will be -// used to dictate which elements we can animate between. -autoAnimateMatcher = null, - -// Default settings for our auto-animate transitions, can be -// overridden per-slide or per-element via data arguments -autoAnimateEasing = 'ease', -autoAnimateDuration = 1.0, -autoAnimateUnmatched = true, - -// CSS properties that can be auto-animated. Position & scale -// is matched separately so there's no need to include styles -// like top/right/bottom/left, width/height or margin. -autoAnimateStyles = [ - 'opacity', - 'color', - 'background-color', - 'padding', - 'font-size', - 'line-height', - 'letter-spacing', - 'border-width', - 'border-color', - 'border-radius', - 'outline', - 'outline-offset', -], - -// Controls automatic progression to the next slide -// - 0 = Auto-sliding only happens if the data-autoslide HTML attribute -// is present on the current slide or fragment -// - 1+ = All slides will progress automatically at the given interval -// - false = No auto-sliding, even if data-autoslide is present -autoSlide = 0, - -// Stop auto-sliding after user input -autoSlideStoppable = true, - -// Use this method for navigation when auto-sliding (defaults to navigateNext) -autoSlideMethod = null, - -// Specify the average time in seconds that you think you will spend -// presenting each slide. This is used to show a pacing timer in the -// speaker view -defaultTiming = null, - -// Enable slide navigation via mouse wheel -mouseWheel = false, - -// Opens links in an iframe preview overlay -// Add `data-preview-link` and `data-preview-link="false"` to customise each link -// individually -previewLinks = false, - -// Exposes the reveal.js API through window.postMessage -postMessage = true, - -// Dispatches all reveal.js events to the parent window through postMessage -postMessageEvents = false, - -// Focuses body when page changes visibility to ensure keyboard shortcuts work -focusBodyOnPageVisibilityChange = true, - -// Transition style -transition = 'slide', // none/fade/slide/convex/concave/zoom - -// Transition speed -transitionSpeed = 'default', // default/fast/slow - -// Transition style for full page slide backgrounds -backgroundTransition = 'fade', // none/fade/slide/convex/concave/zoom - -// The maximum number of pages a single slide can expand onto when printing -// to PDF, unlimited by default -pdfMaxPagesPerSlide = Number.POSITIVE_INFINITY, - -// Prints each fragment on a separate slide -pdfSeparateFragments = true, - -// Offset used to reduce the height of content within exported PDF pages. -// This exists to account for environment differences based on how you -// print to PDF. CLI printing options, like phantomjs and wkpdf, can end -// on precisely the total height of the document whereas in-browser -// printing has to end one pixel before. -pdfPageHeightOffset = -1, - -// Number of slides away from the current that are visible -viewDistance = 3, - -// Number of slides away from the current that are visible on mobile -// devices. It is advisable to set this to a lower number than -// viewDistance in order to save resources. -mobileViewDistance = 2, - -// The display mode that will be used to show slides -display = 'block', - -// Hide cursor if inactive -hideInactiveCursor = true, - -// Time before the cursor is hidden (in ms) -hideCursorTime = 5000, - -// Parallax background image -parallaxBackgroundImage = '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg" - -// Parallax background size -parallaxBackgroundSize = '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto) - -// Number of pixels to move the parallax background per slide -// - Calculated automatically unless specified -// - Set to 0 to disable movement along an axis -parallaxBackgroundHorizontal = 200, -parallaxBackgroundVertical = 50, - -// The "normal" size of the presentation, aspect ratio will -// be preserved when the presentation is scaled to fit different -// resolutions. Can be specified using percentage units. -width = 960, -height = 700, - -// Factor of the display size that should remain empty around -// the content -margin = 0.04, +All components support the following properties: + +```ts + id?: string; // id for the html component + className?: string; // any additional class name(s), will be concatenated with the fragment classnames + fragment?: boolean; // if true, this is treated as a fragment (see the reveal.js documentation) + fragmentStyle?: string; // any extra fragment-specific style + fragmentIndex?: number; // the fragment index (see the reveal.js documentation) + fitText?: boolean; // if true, adds the "r-fit-text" classname (see the reveal.js documentation) +``` + +### RevealJS + +The properties are the same as the configuration object passed to `Reveal.initialize()`. This package +adds an additional property `onDeckReady` which is called when initialization has succeeded and the +API is ready to interact. Alternatively, to define custom interactions with child components, use the +[useReveal hook](#usereveal). + +```ts + plugins = [], + + // Display presentation control arrows + controls = true, + + // Help the user learn the controls by providing hints, for example by + // bouncing the down arrow when they first encounter a vertical slide + controlsTutorial = true, + + // Determines where controls appear, "edges" or "bottom-right" + controlsLayout = 'bottom-right', + + // Visibility rule for backwards navigation arrows; "faded", "hidden" + // or "visible" + controlsBackArrows = 'faded', + + // Display a presentation progress bar + progress = true, + + // Display the page number of the current slide + // - true = Show slide number + // - false = Hide slide number + // + // Can optionally be set as a string that specifies the number formatting = + // - "h.v" = Horizontal . vertical slide number (default) + // - "h/v" = Horizontal / vertical slide number + // - "c" = Flattened slide number + // - "c/t" = Flattened slide number / total slides + // + // Alternatively, you can provide a function that returns the slide + // number for the current slide. The function should take in a slide + // object and return an array with one string [slideNumber] or + // three strings [n1,delimiter,n2]. See #formatSlideNumber(). + slideNumber = false, + + // Can be used to limit the contexts in which the slide number appears + // - "all" = Always show the slide number + // - "print" = Only when printing to PDF + // - "speaker" = Only in the speaker view + showSlideNumber = 'all', + + // Use 1 based indexing for # links to match slide number (default is zero + // based) + hashOneBasedIndex = false, + + // Add the current slide number to the URL hash so that reloading the + // page/copying the URL will return you to the same slide + hash = false, + + // Flags if we should monitor the hash and change slides accordingly + respondToHashChanges = true, + + // Push each slide change to the browser history. Implies `hash = true` + history = false, + + // Enable keyboard shortcuts for navigation + keyboard = true, + + // Optional function that blocks keyboard events when retuning false + // + // If you set this to 'focused', we will only capture keyboard events + // for embedded decks when they are in focus + keyboardCondition = null, + + // Disables the default reveal.js slide layout (scaling and centering) + // so that you can use custom CSS layout + disableLayout = false, + + // Enable the slide overview mode + overview = true, + + // Vertical centering of slides + center = true, + + // Enables touch navigation on devices with touch input + touch = true, + + // Loop the presentation + loop = false, + + // Change the presentation direction to be RTL + rtl = false, + + // Changes the behavior of our navigation directions. + // + // "default" + // Left/right arrow keys step between horizontal slides, up/down + // arrow keys step between vertical slides. Space key steps through + // all slides (both horizontal and vertical). + // + // "linear" + // Removes the up/down arrows. Left/right arrows step through all + // slides (both horizontal and vertical). + // + // "grid" + // When this is enabled, stepping left/right from a vertical stack + // to an adjacent vertical stack will land you at the same vertical + // index. + // + // Consider a deck with six slides ordered in two vertical stacks = + // 1.1 2.1 + // 1.2 2.2 + // 1.3 2.3 + // + // If you're on slide 1.3 and navigate right, you will normally move + // from 1.3 -> 2.1. If "grid" is used, the same navigation takes you + // from 1.3 -> 2.3. + navigationMode = 'default', + + // Randomizes the order of slides each time the presentation loads + shuffle = false, + + // Turns fragments on and off globally + fragments = true, + + // Flags whether to include the current fragment in the URL, + // so that reloading brings you to the same fragment position + fragmentInURL = true, + + // Flags if the presentation is running in an embedded mode, + // i.e. contained within a limited portion of the screen + embedded = false, + + // Flags if we should show a help overlay when the question-mark + // key is pressed + help = true, + + // Flags if it should be possible to pause the presentation (blackout) + pause = true, + + // Flags if speaker notes should be visible to all viewers + showNotes = false, + + // Global override for autolaying embedded media (video/audio/iframe) + // - null = Media will only autoplay if data-autoplay is present + // - true = All media will autoplay, regardless of individual setting + // - false = No media will autoplay, regardless of individual setting + autoPlayMedia = null, + + // Global override for preloading lazy-loaded iframes + // - null = Iframes with data-src AND data-preload will be loaded when within + // the viewDistance, iframes with only data-src will be loaded when visible + // - true = All iframes with data-src will be loaded when within the viewDistance + // - false = All iframes with data-src will be loaded only when visible + preloadIframes = null, + + // Can be used to globally disable auto-animation + autoAnimate = true, + + // Optionally provide a custom element matcher that will be + // used to dictate which elements we can animate between. + autoAnimateMatcher = null, + + // Default settings for our auto-animate transitions, can be + // overridden per-slide or per-element via data arguments + autoAnimateEasing = 'ease', + autoAnimateDuration = 1.0, + autoAnimateUnmatched = true, + + // CSS properties that can be auto-animated. Position & scale + // is matched separately so there's no need to include styles + // like top/right/bottom/left, width/height or margin. + autoAnimateStyles = [ + 'opacity', + 'color', + 'background-color', + 'padding', + 'font-size', + 'line-height', + 'letter-spacing', + 'border-width', + 'border-color', + 'border-radius', + 'outline', + 'outline-offset', + ], + + // Controls automatic progression to the next slide + // - 0 = Auto-sliding only happens if the data-autoslide HTML attribute + // is present on the current slide or fragment + // - 1+ = All slides will progress automatically at the given interval + // - false = No auto-sliding, even if data-autoslide is present + autoSlide = 0, + + // Stop auto-sliding after user input + autoSlideStoppable = true, + + // Use this method for navigation when auto-sliding (defaults to navigateNext) + autoSlideMethod = null, + + // Specify the average time in seconds that you think you will spend + // presenting each slide. This is used to show a pacing timer in the + // speaker view + defaultTiming = null, + + // Enable slide navigation via mouse wheel + mouseWheel = false, + + // Opens links in an iframe preview overlay + // Add `data-preview-link` and `data-preview-link="false"` to customise each link + // individually + previewLinks = false, + + // Exposes the reveal.js API through window.postMessage + postMessage = true, + + // Dispatches all reveal.js events to the parent window through postMessage + postMessageEvents = false, + + // Focuses body when page changes visibility to ensure keyboard shortcuts work + focusBodyOnPageVisibilityChange = true, + + // Transition style + transition = 'slide', // none/fade/slide/convex/concave/zoom + + // Transition speed + transitionSpeed = 'default', // default/fast/slow + + // Transition style for full page slide backgrounds + backgroundTransition = 'fade', // none/fade/slide/convex/concave/zoom + + // The maximum number of pages a single slide can expand onto when printing + // to PDF, unlimited by default + pdfMaxPagesPerSlide = Number.POSITIVE_INFINITY, + + // Prints each fragment on a separate slide + pdfSeparateFragments = true, + + // Offset used to reduce the height of content within exported PDF pages. + // This exists to account for environment differences based on how you + // print to PDF. CLI printing options, like phantomjs and wkpdf, can end + // on precisely the total height of the document whereas in-browser + // printing has to end one pixel before. + pdfPageHeightOffset = -1, + + // Number of slides away from the current that are visible + viewDistance = 3, + + // Number of slides away from the current that are visible on mobile + // devices. It is advisable to set this to a lower number than + // viewDistance in order to save resources. + mobileViewDistance = 2, + + // The display mode that will be used to show slides + display = 'block', + + // Hide cursor if inactive + hideInactiveCursor = true, + + // Time before the cursor is hidden (in ms) + hideCursorTime = 5000, + + // Parallax background image + parallaxBackgroundImage = '', // CSS syntax, e.g. "a.jpg" + + // Parallax background size + parallaxBackgroundSize = '', // CSS syntax, e.g. "3000px 2000px" + + // Parallax background repeat + parallaxBackgroundRepeat = '', // repeat/repeat-x/repeat-y/no-repeat/initial/inherit + + // Parallax background position + parallaxBackgroundPosition = '', // CSS syntax, e.g. "top left" + + // Number of pixels to move the parallax background per slide + // - Calculated automatically unless specified + // - Set to 0 to disable movement along an axis + parallaxBackgroundHorizontal = 200, + parallaxBackgroundVertical = 50, + + // The "normal" size of the presentation, aspect ratio will + // be preserved when the presentation is scaled to fit different + // resolutions. Can be specified using percentage units. + width = 960, + height = 700, -// Bounds for smallest/largest possible scale to apply to content -minScale = 0.2, -maxScale = 2.0, + // Factor of the display size that should remain empty around + // the content + margin = 0.04, + + // Bounds for smallest/largest possible scale to apply to content + minScale = 0.2, + maxScale = 2.0, + + // a callback to access the deck when it is ready for interaction, accepts a single parameter. + onDeckReady, +``` + +### Slide + +The `Slide` component adds a `
` to create a slide. It supports these properties + +```ts + autoslide?: true; + autoAnimate?: true; + autoAnimateUnmatched?: boolean; + backgroundColor?: string; + backgroundImage?: string; + backgroundSize?: string; + backgroundPosition?: string; + backgroundRepeat?: string; + backgroundOpacity?: string; + backgroundVideo?: string; + backgroundVideoLoop?: true; + backgroundVideoMuted?: true; + backgroundIframe?: string; + backgroundInteractive?: true; + id?: string; + transition?: Transitions; + // Transitions can be: 'none' | 'fade' | 'slide' | 'convex' | 'concave' | 'zoom' + // or a combo of 'fade-in fade-out' or 'slide-in fade-out' etc. + transitionSpeed?: TransitionSpeed; // 'default' | 'fast' | 'slow' + visibility?: 'uncounted' | 'hidden'; ``` +### Elements + +#### Code + +The `Code` component sets helpers for animation across slides. Use the `HighlightPlugin` to add code highlighting. + +```ts + children: { code: string }; // pass `{ code: 'console.log("hello world");' }`, for example + language?: string; // for example "typescript" + escape?: boolean; // html escape the code + lineNumbers?: string | true; // display line numbers. This is turned on if you specify autoAnimateId + noTrim?: boolean; // if true, disables trimming whitespace on the edges of the code + // pass in an id that you will use for the same code block in other slides to enable smooth transitions + // `autoAnimate` must be passed to the slides to enable this (see the reveal.js documentation) + autoAnimateId?: string; +``` + +#### Audio + +The `Audio` component accepts all the parameters of the `audio` html tag, plus these properties: + +```ts + autoplay?: boolean; + controls?: boolean; + lazy?: string; // lazy-loads the audio, using data-src + loop?: boolean; + muted?: boolean; + preload?: boolean; // sets data-preload + src: string; +``` + +#### BlockQuote + +supports all the standard `blockquote` parameters plus the reveal.js addons above + +#### Div + +supports all the standard `div` parameters plus the reveal.js addons above + +#### FigCaption + +supports all the standard `figcaption` parameters plus the reveal.js addons above + +#### Figure + +supports all the standard `figure` parameters plus the reveal.js addons above + +#### Footer + +supports all the standard `footer` parameters plus the reveal.js addons above + +#### H1 + +supports all the standard `h1` parameters plus the reveal.js addons above + +#### H2 + +supports all the standard `h2` parameters plus the reveal.js addons above + +#### H3 + +supports all the standard `h3` parameters plus the reveal.js addons above + +#### H4 + +supports all the standard `h4` parameters plus the reveal.js addons above + +#### H5 + +supports all the standard `h5` parameters plus the reveal.js addons above + +#### H6 + +supports all the standard `h6` parameters plus the reveal.js addons above + +#### Header + +supports all the standard `header` parameters plus the reveal.js addons above + +#### IFrame + +supports all the standard `iframe` parameters plus the reveal.js addons above, and these + +#### Image + + +#### Li + +supports all the standard `li` parameters plus the reveal.js addons above + +#### Link + + +#### Main + +supports all the standard `main` parameters plus the reveal.js addons above + +#### Note + + +#### Ol + +supports all the standard `ol` parameters plus the reveal.js addons above + +#### P + +supports all the standard `p` parameters plus the reveal.js addons above + + +#### Span + +supports all the standard `span` parameters plus the reveal.js addons above + +#### Ul + +supports all the standard `ul` parameters plus the reveal.js addons above + +#### Video + +The `Audio` component accepts all the parameters of the `audio` html tag, plus these properties: + +```ts + autoplay?: boolean; + controls?: boolean; + lazy?: string; // lazy-loads the audio, using data-src + loop?: boolean; + muted?: boolean; + preload?: boolean; // sets data-preload + height?: number; + preload?: '' | 'metadata' | 'auto' | 'none'; + width?: number; + src: string[] | string; // this allows specifying multiple video sources or a single source +``` + +#### Notes + +Add speaker notes with an `aside` by using this component. + +## hooks + +In order to access the internal `Reveal` object, a hook is provided. + +### useReveal + +This can be used to retrieve the current Reveal instance. Note that until the deck is initialized, +it will be `null`. The type of the deck is strictly typed using custom internal types, as `@types/reveal` +is a full major version out of date. + +```ts +import { useReveal } from "@gregcello/revealjs-react"; + +export function MyComponent() { + const { reveal, readyPromise } = useReveal(); + useEffect(() => { + if (!reveal || !readyPromise) { + return; + } + readyPromise.then(() => { + // interact with reveal API + reveal.on('slidechanged', () => { /* do something */ }); + }) + }, [reveal]); +} +``` + +Note that this hook must be used in a child component tp the `RevealJs` component. This will not work: + +```ts +import { useReveal, RevealJS } from "@gregcello/revealjs-react"; + +export function MyPresentation() { + const { reveal, readyPromise } = useReveal(); + // don't do this! + return ( + ... + + ) +``` + +Instead, use the `onDeckReady` prop as documented [in the RevealJS component](#revealjs) + +## Using plugins + +Built-in plugins from reveal.js are available as direct imports + +```ts +import { + HighlightPlugin, + MarkdownPlugin, + MathPlugin, + NotesPlugin, + SearchPlugin, + ZoomPlugin, +} from "@gregcello/revealjs-react"; + +// then in the source + +const plugins = [HighlightPlugin, MarkdownPlugin, MathPlugin, NotesPlugin, SearchPlugin, ZoomPlugin]; + +function MyPresentation() { + return ( + + // your slides here + + ); +} +``` + +Use only the plugins you need. These plugins are strictly typed using custom typescript definitions. +To define or type your own custom plugin, use the `RevealPlugin` type exported from `@gregcello/revealjs-react` \ No newline at end of file diff --git a/dist/components/BaseComponent.d.ts b/dist/components/BaseComponent.d.ts new file mode 100644 index 0000000..8277940 --- /dev/null +++ b/dist/components/BaseComponent.d.ts @@ -0,0 +1,56 @@ +import { DetailedHTMLFactory, ReactHTML } from 'react'; +export interface BaseProps { + id?: string; + className?: string; + fragment?: boolean; + fragmentStyle?: string; + fragmentIndex?: number; + fitText?: boolean; +} +export declare type MakeProps = Interface & BaseProps & SimpleComponentProps[0]; +export declare type MakeFullProps = BaseProps & SimpleComponentProps[0]; +export declare type SimpleComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'blockquote' | 'div' | 'figcaption' | 'figure' | 'footer' | 'header' | 'li' | 'main' | 'ol' | 'p' | 'span' | 'ul'; +export declare type SimpleComponentProps = ReactHTML[T] extends DetailedHTMLFactory ? [Attributes, Element] : never; +export interface RevealProps { + component: SimpleComponent; +} +export declare type Props = MakeProps; +export declare function getClassNameProps(baseProps: BaseProps): { + id?: string | undefined; + fragmentIndex?: number | undefined; +} | { + className: string; + id?: string | undefined; + fragmentIndex?: number | undefined; +}; +export declare function generateBaseComponent(component: T): { + (props: MakeFullProps): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export default function BaseComponent({ component, id, fragmentIndex, children, ...props }: Props): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; +} | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; +}, HTMLElement>; diff --git a/dist/components/BaseComponent.js b/dist/components/BaseComponent.js new file mode 100644 index 0000000..e533530 --- /dev/null +++ b/dist/components/BaseComponent.js @@ -0,0 +1,37 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.generateBaseComponent = exports.getClassNameProps = void 0; +const react_1 = require("react"); +function getClassNameProps(baseProps) { + const { className, fragment, fragmentStyle, fitText, ...props } = baseProps; + const classes = className ? [className] : []; + if (fragment) + classes.push("fragment"); + if (fitText) + classes.push("r-fit-text"); + if (fragmentStyle) + classes.push(fragmentStyle); + if (!classes.length) + return props; + return { + ...props, + className: classes.join(' '), + }; +} +exports.getClassNameProps = getClassNameProps; +function generateBaseComponent(component) { + const Component = (props) => BaseComponent({ ...props, component }); + Component.displayName = `${component[0].toUpperCase()}${component.slice(1)}`; + return Component; +} +exports.generateBaseComponent = generateBaseComponent; +function BaseComponent({ component, id, fragmentIndex, children, ...props }) { + return react_1.createElement(component, { + ...getClassNameProps(props), + 'data-id': id, + id, + 'data-fragment-index': fragmentIndex, + children, + }); +} +exports.default = BaseComponent; diff --git a/dist/components/RevealJS.d.ts b/dist/components/RevealJS.d.ts new file mode 100644 index 0000000..61fbc5b --- /dev/null +++ b/dist/components/RevealJS.d.ts @@ -0,0 +1,87 @@ +import React from 'react'; +import Reveal, { RevealPlugin } from 'reveal.js'; +import 'reveal.js/dist/reveal.css'; +import { BackgroundRepeat, TransitionAtoms, TransitionSpeed } from '../types'; +export interface RevealJSProps { + children: React.ReactNode; + plugins?: RevealPlugin[]; + controls?: boolean; + controlsTutorial?: boolean; + controlsLayout?: 'bottom-right' | 'edge'; + controlsBackArrows?: 'faded' | 'hidden' | 'visible'; + progress?: boolean; + slideNumber?: boolean | 'h.v' | 'h/v' | 'c' | 'c/t' | ((slide: { + h: number; + v: number; + f: number; + }) => string | string[]); + showSlideNumber?: 'all' | 'print' | 'speaker'; + hashOneBasedIndex?: boolean; + hash?: boolean; + respondToHashChanges?: boolean; + history?: boolean; + keyboard?: boolean; + keyboardCondition?: null | 'focused'; + disableLayout?: boolean; + overview?: boolean; + center?: boolean; + touch?: boolean; + loop?: boolean; + rtl?: boolean; + navigationMode?: 'default' | 'linear' | 'grid'; + shuffle?: boolean; + fragments?: boolean; + fragmentInURL?: boolean; + embedded?: boolean; + help?: boolean; + pause?: boolean; + showNotes?: boolean; + autoPlayMedia?: boolean | null; + preloadIframes?: boolean | null; + autoAnimate?: boolean; + autoAnimateMatcher?: null | ((fromSlide: HTMLElement, toSlide: HTMLElement) => [HTMLElement, HTMLElement][]); + autoAnimateEasing?: string; + autoAnimateDuration?: number; + autoAnimateUnmatched?: boolean; + autoAnimateStyles?: string[]; + autoSlide?: number; + autoSlideStoppable?: boolean; + autoSlideMethod?: (() => void) | null; + defaultTiming?: number | null; + mouseWheel?: boolean; + previewLinks?: boolean; + postMessage?: boolean; + postMessageEvents?: boolean; + focusBodyOnPageVisibilityChange?: boolean; + transition?: TransitionAtoms; + transitionSpeed?: TransitionSpeed; + backgroundTransition?: TransitionAtoms; + pdfMaxPagesPerSlide?: number; + pdfSeparateFragments?: boolean; + pdfPageHeightOffset?: number; + viewDistance?: number; + mobileViewDistance?: number; + display?: string; + hideInactiveCursor?: boolean; + hideCursorTime?: number; + parallaxBackgroundImage?: string; + parallaxBackgroundSize?: string; + parallaxBackgroundHorizontal?: number; + parallaxBackgroundRepeat?: BackgroundRepeat | ''; + parallaxBackgroundPosition?: string; + parallaxBackgroundVertical?: number; + width?: number; + height?: number; + margin?: number; + minScale?: number; + maxScale?: number; + onDeckReady?: (deck: Reveal) => void; +} +export default function RevealJS({ children, plugins, controls, controlsTutorial, controlsLayout, controlsBackArrows, progress, slideNumber, showSlideNumber, hashOneBasedIndex, hash, respondToHashChanges, history, keyboard, keyboardCondition, disableLayout, overview, center, touch, loop, rtl, navigationMode, shuffle, fragments, fragmentInURL, embedded, help, pause, showNotes, autoPlayMedia, preloadIframes, autoAnimate, autoAnimateMatcher, autoAnimateEasing, autoAnimateDuration, autoAnimateUnmatched, autoAnimateStyles, autoSlide, autoSlideStoppable, autoSlideMethod, defaultTiming, mouseWheel, previewLinks, postMessage, postMessageEvents, focusBodyOnPageVisibilityChange, transition, // none/fade/slide/convex/concave/zoom +transitionSpeed, // default/fast/slow +backgroundTransition, // none/fade/slide/convex/concave/zoom +pdfMaxPagesPerSlide, pdfSeparateFragments, pdfPageHeightOffset, viewDistance, mobileViewDistance, display, hideInactiveCursor, hideCursorTime, parallaxBackgroundImage, // CSS syntax, e.g. "a.jpg" +parallaxBackgroundSize, // CSS syntax, e.g. "3000px 2000px" +parallaxBackgroundRepeat, // repeat/repeat-x/repeat-y/no-repeat/initial/inherit +parallaxBackgroundPosition, // CSS syntax, e.g. "top left" +parallaxBackgroundHorizontal, parallaxBackgroundVertical, width, height, margin, minScale, maxScale, onDeckReady, }: RevealJSProps): JSX.Element; diff --git a/dist/components/RevealJS.js b/dist/components/RevealJS.js new file mode 100644 index 0000000..3f7a53c --- /dev/null +++ b/dist/components/RevealJS.js @@ -0,0 +1,396 @@ +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importStar(require("react")); +const reveal_js_1 = __importDefault(require("reveal.js")); +// Styles +require("reveal.js/dist/reveal.css"); +const RevealProvider_1 = __importStar(require("./RevealProvider")); +function RevealJS({ children, plugins = [], +// Display presentation control arrows +controls = true, +// Help the user learn the controls by providing hints, for example by +// bouncing the down arrow when they first encounter a vertical slide +controlsTutorial = true, +// Determines where controls appear, "edges" or "bottom-right" +controlsLayout = 'bottom-right', +// Visibility rule for backwards navigation arrows; "faded", "hidden" +// or "visible" +controlsBackArrows = 'faded', +// Display a presentation progress bar +progress = true, +// Display the page number of the current slide +// - true = Show slide number +// - false = Hide slide number +// +// Can optionally be set as a string that specifies the number formatting = +// - "h.v" = Horizontal . vertical slide number (default) +// - "h/v" = Horizontal / vertical slide number +// - "c" = Flattened slide number +// - "c/t" = Flattened slide number / total slides +// +// Alternatively, you can provide a function that returns the slide +// number for the current slide. The function should take in a slide +// object and return an array with one string [slideNumber] or +// three strings [n1,delimiter,n2]. See #formatSlideNumber(). +slideNumber = false, +// Can be used to limit the contexts in which the slide number appears +// - "all" = Always show the slide number +// - "print" = Only when printing to PDF +// - "speaker" = Only in the speaker view +showSlideNumber = 'all', +// Use 1 based indexing for # links to match slide number (default is zero +// based) +hashOneBasedIndex = false, +// Add the current slide number to the URL hash so that reloading the +// page/copying the URL will return you to the same slide +hash = false, +// Flags if we should monitor the hash and change slides accordingly +respondToHashChanges = true, +// Push each slide change to the browser history. Implies `hash = true` +history = false, +// Enable keyboard shortcuts for navigation +keyboard = true, +// Optional function that blocks keyboard events when retuning false +// +// If you set this to 'focused', we will only capture keyboard events +// for embedded decks when they are in focus +keyboardCondition = null, +// Disables the default reveal.js slide layout (scaling and centering) +// so that you can use custom CSS layout +disableLayout = false, +// Enable the slide overview mode +overview = true, +// Vertical centering of slides +center = true, +// Enables touch navigation on devices with touch input +touch = true, +// Loop the presentation +loop = false, +// Change the presentation direction to be RTL +rtl = false, +// Changes the behavior of our navigation directions. +// +// "default" +// Left/right arrow keys step between horizontal slides, up/down +// arrow keys step between vertical slides. Space key steps through +// all slides (both horizontal and vertical). +// +// "linear" +// Removes the up/down arrows. Left/right arrows step through all +// slides (both horizontal and vertical). +// +// "grid" +// When this is enabled, stepping left/right from a vertical stack +// to an adjacent vertical stack will land you at the same vertical +// index. +// +// Consider a deck with six slides ordered in two vertical stacks = +// 1.1 2.1 +// 1.2 2.2 +// 1.3 2.3 +// +// If you're on slide 1.3 and navigate right, you will normally move +// from 1.3 -> 2.1. If "grid" is used, the same navigation takes you +// from 1.3 -> 2.3. +navigationMode = 'default', +// Randomizes the order of slides each time the presentation loads +shuffle = false, +// Turns fragments on and off globally +fragments = true, +// Flags whether to include the current fragment in the URL, +// so that reloading brings you to the same fragment position +fragmentInURL = true, +// Flags if the presentation is running in an embedded mode, +// i.e. contained within a limited portion of the screen +embedded = false, +// Flags if we should show a help overlay when the question-mark +// key is pressed +help = true, +// Flags if it should be possible to pause the presentation (blackout) +pause = true, +// Flags if speaker notes should be visible to all viewers +showNotes = false, +// Global override for autolaying embedded media (video/audio/iframe) +// - null = Media will only autoplay if data-autoplay is present +// - true = All media will autoplay, regardless of individual setting +// - false = No media will autoplay, regardless of individual setting +autoPlayMedia = null, +// Global override for preloading lazy-loaded iframes +// - null = Iframes with data-src AND data-preload will be loaded when within +// the viewDistance, iframes with only data-src will be loaded when visible +// - true = All iframes with data-src will be loaded when within the viewDistance +// - false = All iframes with data-src will be loaded only when visible +preloadIframes = null, +// Can be used to globally disable auto-animation +autoAnimate = true, +// Optionally provide a custom element matcher that will be +// used to dictate which elements we can animate between. +autoAnimateMatcher = null, +// Default settings for our auto-animate transitions, can be +// overridden per-slide or per-element via data arguments +autoAnimateEasing = 'ease', autoAnimateDuration = 1.0, autoAnimateUnmatched = true, +// CSS properties that can be auto-animated. Position & scale +// is matched separately so there's no need to include styles +// like top/right/bottom/left, width/height or margin. +autoAnimateStyles = [ + 'opacity', + 'color', + 'background-color', + 'padding', + 'font-size', + 'line-height', + 'letter-spacing', + 'border-width', + 'border-color', + 'border-radius', + 'outline', + 'outline-offset', +], +// Controls automatic progression to the next slide +// - 0 = Auto-sliding only happens if the data-autoslide HTML attribute +// is present on the current slide or fragment +// - 1+ = All slides will progress automatically at the given interval +// - false = No auto-sliding, even if data-autoslide is present +autoSlide = 0, +// Stop auto-sliding after user input +autoSlideStoppable = true, +// Use this method for navigation when auto-sliding (defaults to navigateNext) +autoSlideMethod = null, +// Specify the average time in seconds that you think you will spend +// presenting each slide. This is used to show a pacing timer in the +// speaker view +defaultTiming = null, +// Enable slide navigation via mouse wheel +mouseWheel = false, +// Opens links in an iframe preview overlay +// Add `data-preview-link` and `data-preview-link="false"` to customise each link +// individually +previewLinks = false, +// Exposes the reveal.js API through window.postMessage +postMessage = true, +// Dispatches all reveal.js events to the parent window through postMessage +postMessageEvents = false, +// Focuses body when page changes visibility to ensure keyboard shortcuts work +focusBodyOnPageVisibilityChange = true, +// Transition style +transition = 'slide', // none/fade/slide/convex/concave/zoom +// Transition speed +transitionSpeed = 'default', // default/fast/slow +// Transition style for full page slide backgrounds +backgroundTransition = 'fade', // none/fade/slide/convex/concave/zoom +// The maximum number of pages a single slide can expand onto when printing +// to PDF, unlimited by default +pdfMaxPagesPerSlide = Number.POSITIVE_INFINITY, +// Prints each fragment on a separate slide +pdfSeparateFragments = true, +// Offset used to reduce the height of content within exported PDF pages. +// This exists to account for environment differences based on how you +// print to PDF. CLI printing options, like phantomjs and wkpdf, can end +// on precisely the total height of the document whereas in-browser +// printing has to end one pixel before. +pdfPageHeightOffset = -1, +// Number of slides away from the current that are visible +viewDistance = 3, +// Number of slides away from the current that are visible on mobile +// devices. It is advisable to set this to a lower number than +// viewDistance in order to save resources. +mobileViewDistance = 2, +// The display mode that will be used to show slides +display = 'block', +// Hide cursor if inactive +hideInactiveCursor = true, +// Time before the cursor is hidden (in ms) +hideCursorTime = 5000, +// Parallax background image +parallaxBackgroundImage = '', // CSS syntax, e.g. "a.jpg" +// Parallax background size +parallaxBackgroundSize = '', // CSS syntax, e.g. "3000px 2000px" +// Parallax background repeat +parallaxBackgroundRepeat = '', // repeat/repeat-x/repeat-y/no-repeat/initial/inherit +// Parallax background position +parallaxBackgroundPosition = '', // CSS syntax, e.g. "top left" +// Number of pixels to move the parallax background per slide +// - Calculated automatically unless specified +// - Set to 0 to disable movement along an axis +parallaxBackgroundHorizontal = 200, parallaxBackgroundVertical = 50, +// The "normal" size of the presentation, aspect ratio will +// be preserved when the presentation is scaled to fit different +// resolutions. Can be specified using percentage units. +width = 960, height = 700, +// Factor of the display size that should remain empty around +// the content +margin = 0.04, +// Bounds for smallest/largest possible scale to apply to content +minScale = 0.2, maxScale = 2.0, +// a callback to access the deck when it is ready for interaction +onDeckReady, }) { + const [revealContext, setContextValue] = react_1.useState(RevealProvider_1.defaultContextValue); + react_1.useEffect(() => { + const reveal = new reveal_js_1.default({ + plugins, + controls, + controlsTutorial, + controlsLayout, + controlsBackArrows, + progress, + slideNumber, + showSlideNumber, + hashOneBasedIndex, + hash, + respondToHashChanges, + history, + keyboard, + keyboardCondition, + disableLayout, + overview, + center, + touch, + loop, + rtl, + navigationMode, + shuffle, + fragments, + fragmentInURL, + embedded, + help, + pause, + showNotes, + autoPlayMedia, + preloadIframes, + autoAnimate, + autoAnimateMatcher, + autoAnimateEasing, + autoAnimateDuration, + autoAnimateUnmatched, + autoAnimateStyles, + autoSlide, + autoSlideStoppable, + autoSlideMethod, + defaultTiming, + mouseWheel, + previewLinks, + postMessage, + postMessageEvents, + focusBodyOnPageVisibilityChange, + transition, + transitionSpeed, + backgroundTransition, + pdfMaxPagesPerSlide, + pdfSeparateFragments, + pdfPageHeightOffset, + viewDistance, + mobileViewDistance, + display, + hideInactiveCursor, + hideCursorTime, + parallaxBackgroundImage, + parallaxBackgroundRepeat, + parallaxBackgroundPosition, + parallaxBackgroundSize, + parallaxBackgroundHorizontal, + parallaxBackgroundVertical, + width, + height, + margin, + minScale, + maxScale, + }); + setContextValue({ reveal, readyPromise: reveal.initialize().then(() => { + onDeckReady?.(reveal); + }) }); + }, [ + plugins, + controls, + controlsTutorial, + controlsLayout, + controlsBackArrows, + progress, + slideNumber, + showSlideNumber, + hashOneBasedIndex, + hash, + respondToHashChanges, + history, + keyboard, + keyboardCondition, + disableLayout, + overview, + center, + touch, + loop, + rtl, + navigationMode, + shuffle, + fragments, + fragmentInURL, + embedded, + help, + pause, + showNotes, + autoPlayMedia, + preloadIframes, + autoAnimate, + autoAnimateMatcher, + autoAnimateEasing, + autoAnimateDuration, + autoAnimateUnmatched, + autoAnimateStyles, + autoSlide, + autoSlideStoppable, + autoSlideMethod, + defaultTiming, + mouseWheel, + previewLinks, + postMessage, + postMessageEvents, + focusBodyOnPageVisibilityChange, + transition, + transitionSpeed, + backgroundTransition, + pdfMaxPagesPerSlide, + pdfSeparateFragments, + pdfPageHeightOffset, + viewDistance, + mobileViewDistance, + display, + hideInactiveCursor, + hideCursorTime, + parallaxBackgroundImage, + parallaxBackgroundRepeat, + parallaxBackgroundPosition, + parallaxBackgroundSize, + parallaxBackgroundHorizontal, + parallaxBackgroundVertical, + width, + height, + margin, + minScale, + maxScale, + ]); + return (react_1.default.createElement("div", { className: "reveal" }, + react_1.default.createElement("div", { className: "slides" }, + react_1.default.createElement(RevealProvider_1.default, { reveal: revealContext }, children)))); +} +exports.default = RevealJS; diff --git a/dist/components/RevealProvider.d.ts b/dist/components/RevealProvider.d.ts new file mode 100644 index 0000000..fd36e0b --- /dev/null +++ b/dist/components/RevealProvider.d.ts @@ -0,0 +1,13 @@ +import React, { ReactNode } from "react"; +import Reveal from "../../types/reveal.js"; +export interface RevealContextType { + reveal: Reveal | null; + readyPromise: Promise | null; +} +export declare const defaultContextValue: RevealContextType; +export declare const RevealContext: React.Context; +export interface RevealProviderProps { + reveal: RevealContextType; + children: ReactNode; +} +export default function RevealProvider({ reveal, children }: RevealProviderProps): JSX.Element; diff --git a/dist/components/RevealProvider.js b/dist/components/RevealProvider.js new file mode 100644 index 0000000..a784196 --- /dev/null +++ b/dist/components/RevealProvider.js @@ -0,0 +1,32 @@ +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.RevealContext = exports.defaultContextValue = void 0; +const react_1 = __importStar(require("react")); +exports.defaultContextValue = { + reveal: null, + readyPromise: null, +}; +exports.RevealContext = react_1.createContext(exports.defaultContextValue); +function RevealProvider({ reveal, children }) { + return (react_1.default.createElement(exports.RevealContext.Provider, { value: reveal }, children)); +} +exports.default = RevealProvider; diff --git a/dist/components/SimpleComponents.d.ts b/dist/components/SimpleComponents.d.ts new file mode 100644 index 0000000..b141710 --- /dev/null +++ b/dist/components/SimpleComponents.d.ts @@ -0,0 +1,633 @@ +/// +import { SimpleComponent } from "./BaseComponent"; +declare const componentsToGenerate: { + h1: { + (props: import("./BaseComponent").MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + h2: { + (props: import("./BaseComponent").MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + h3: { + (props: import("./BaseComponent").MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + h4: { + (props: import("./BaseComponent").MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + h5: { + (props: import("./BaseComponent").MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + h6: { + (props: import("./BaseComponent").MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + blockquote: { + (props: import("./BaseComponent").MakeFullProps<"blockquote">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + div: { + (props: import("./BaseComponent").MakeFullProps<"div">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + figcaption: { + (props: import("./BaseComponent").MakeFullProps<"figcaption">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + figure: { + (props: import("./BaseComponent").MakeFullProps<"figcaption">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + footer: { + (props: import("./BaseComponent").MakeFullProps<"figcaption">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + header: { + (props: import("./BaseComponent").MakeFullProps<"figcaption">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + li: { + (props: import("./BaseComponent").MakeFullProps<"li">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + main: { + (props: import("./BaseComponent").MakeFullProps<"figcaption">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + ol: { + (props: import("./BaseComponent").MakeFullProps<"ol">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + p: { + (props: import("./BaseComponent").MakeFullProps<"p">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + span: { + (props: import("./BaseComponent").MakeFullProps<"span">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; + ul: { + (props: import("./BaseComponent").MakeFullProps<"ul">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; + }; +}; +declare type SimpleComponentTypes = { + [P in SimpleComponent]: Parameters[0]; +}; +export declare type HProps = SimpleComponentTypes['h1']; +export declare type BlockQuoteProps = SimpleComponentTypes['blockquote']; +export declare type DivProps = SimpleComponentTypes['div']; +export declare type FigCaptionProps = SimpleComponentTypes['figcaption']; +export declare type FigureProps = SimpleComponentTypes['figure']; +export declare type FooterProps = SimpleComponentTypes['footer']; +export declare type HeaderProps = SimpleComponentTypes['header']; +export declare type LiProps = SimpleComponentTypes['li']; +export declare type MainProps = SimpleComponentTypes['main']; +export declare type OlProps = SimpleComponentTypes['ol']; +export declare type PProps = SimpleComponentTypes['p']; +export declare type SpanProps = SimpleComponentTypes['span']; +export declare type UlProps = SimpleComponentTypes['ul']; +export declare const H1: { + (props: import("./BaseComponent").MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const H2: { + (props: import("./BaseComponent").MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const H3: { + (props: import("./BaseComponent").MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const H4: { + (props: import("./BaseComponent").MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const H5: { + (props: import("./BaseComponent").MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const H6: { + (props: import("./BaseComponent").MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const BlockQuote: { + (props: import("./BaseComponent").MakeFullProps<"blockquote">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const Div: { + (props: import("./BaseComponent").MakeFullProps<"div">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const FigCaption: { + (props: import("./BaseComponent").MakeFullProps<"figcaption">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const Figure: { + (props: import("./BaseComponent").MakeFullProps<"figcaption">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const Footer: { + (props: import("./BaseComponent").MakeFullProps<"figcaption">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const Header: { + (props: import("./BaseComponent").MakeFullProps<"figcaption">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const Li: { + (props: import("./BaseComponent").MakeFullProps<"li">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const Main: { + (props: import("./BaseComponent").MakeFullProps<"figcaption">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const Ol: { + (props: import("./BaseComponent").MakeFullProps<"ol">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const P: { + (props: import("./BaseComponent").MakeFullProps<"p">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const Span: { + (props: import("./BaseComponent").MakeFullProps<"span">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const Ul: { + (props: import("./BaseComponent").MakeFullProps<"ul">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export {}; diff --git a/dist/components/SimpleComponents.js b/dist/components/SimpleComponents.js new file mode 100644 index 0000000..282ae39 --- /dev/null +++ b/dist/components/SimpleComponents.js @@ -0,0 +1,42 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Ul = exports.Span = exports.P = exports.Ol = exports.Main = exports.Li = exports.Header = exports.Footer = exports.Figure = exports.FigCaption = exports.Div = exports.BlockQuote = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = void 0; +const BaseComponent_1 = require("./BaseComponent"); +const componentsToGenerate = { + h1: BaseComponent_1.generateBaseComponent('h1'), + h2: BaseComponent_1.generateBaseComponent('h2'), + h3: BaseComponent_1.generateBaseComponent('h3'), + h4: BaseComponent_1.generateBaseComponent('h4'), + h5: BaseComponent_1.generateBaseComponent('h5'), + h6: BaseComponent_1.generateBaseComponent('h6'), + blockquote: BaseComponent_1.generateBaseComponent('blockquote'), + div: BaseComponent_1.generateBaseComponent('div'), + figcaption: BaseComponent_1.generateBaseComponent('figcaption'), + figure: BaseComponent_1.generateBaseComponent('figure'), + footer: BaseComponent_1.generateBaseComponent('footer'), + header: BaseComponent_1.generateBaseComponent('header'), + li: BaseComponent_1.generateBaseComponent('li'), + main: BaseComponent_1.generateBaseComponent('main'), + ol: BaseComponent_1.generateBaseComponent('ol'), + p: BaseComponent_1.generateBaseComponent('p'), + span: BaseComponent_1.generateBaseComponent('span'), + ul: BaseComponent_1.generateBaseComponent('ul'), +}; +exports.H1 = componentsToGenerate.h1; +exports.H2 = componentsToGenerate.h2; +exports.H3 = componentsToGenerate.h3; +exports.H4 = componentsToGenerate.h4; +exports.H5 = componentsToGenerate.h5; +exports.H6 = componentsToGenerate.h6; +exports.BlockQuote = componentsToGenerate.blockquote; +exports.Div = componentsToGenerate.div; +exports.FigCaption = componentsToGenerate.figcaption; +exports.Figure = componentsToGenerate.figure; +exports.Footer = componentsToGenerate.footer; +exports.Header = componentsToGenerate.header; +exports.Li = componentsToGenerate.li; +exports.Main = componentsToGenerate.main; +exports.Ol = componentsToGenerate.ol; +exports.P = componentsToGenerate.p; +exports.Span = componentsToGenerate.span; +exports.Ul = componentsToGenerate.ul; diff --git a/dist/components/audio.d.ts b/dist/components/audio.d.ts new file mode 100644 index 0000000..de70062 --- /dev/null +++ b/dist/components/audio.d.ts @@ -0,0 +1,14 @@ +/// +import { MakeProps } from './BaseComponent'; +export declare type AudioTypes = '3gp' | 'aac' | 'flac' | 'mpg' | 'mpeg' | 'mp3' | 'mp4' | 'm4a' | 'oga' | 'ogg' | 'wav' | 'webm'; +export interface AudioProps { + autoplay?: boolean; + controls?: boolean; + lazy?: string; + loop?: boolean; + muted?: boolean; + preload?: boolean; + src: string; +} +declare function Audio({ id, autoplay, className, controls, fragment, fragmentIndex, fragmentStyle, lazy, loop, muted, preload, src, ...props }: MakeProps): JSX.Element; +export default Audio; diff --git a/dist/components/audio.js b/dist/components/audio.js new file mode 100644 index 0000000..f0a988f --- /dev/null +++ b/dist/components/audio.js @@ -0,0 +1,28 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importDefault(require("react")); +const BaseComponent_1 = require("./BaseComponent"); +const formatMap = { + '3gp': 'audio/3gp', + aac: 'audio/aac', + flac: 'audio/flac', + mpg: 'audio/mpeg', + mpeg: 'audio/mpeg', + mp3: 'audio/mp3', + mp4: 'audio/mp4', + m4a: 'audio/mp4', + oga: 'audio/ogg', + ogg: 'audio/ogg', + wav: 'audio/wav', + webm: 'audio/webm', +}; +function Audio({ id, autoplay, className, controls, fragment, fragmentIndex, fragmentStyle, lazy, loop, muted, preload, src, ...props }) { + if (Array.isArray(src)) { + return (react_1.default.createElement("audio", Object.assign({}, BaseComponent_1.getClassNameProps(props), { "data-id": id, id: id, "data-autoplay": autoplay, controls: controls, muted: muted, loop: loop, "data-fragment-index": fragmentIndex }), src.map((element) => (react_1.default.createElement("source", { src: lazy ? false : element, "data-src": lazy ? element : false, "data-preload": preload, type: formatMap[/\.[^.]+$/.exec(element)?.[0]] || 'mp3' }))))); + } + return (react_1.default.createElement("audio", Object.assign({}, BaseComponent_1.getClassNameProps(props), { "data-id": id, id: id, "data-autoplay": autoplay, src: lazy ? '' : src, "data-src": lazy ? src : false, "data-preload": preload, controls: controls, muted: muted, loop: loop, "data-fragment-index": fragmentIndex }))); +} +exports.default = Audio; diff --git a/dist/components/blockquote.d.ts b/dist/components/blockquote.d.ts new file mode 100644 index 0000000..0195d32 --- /dev/null +++ b/dist/components/blockquote.d.ts @@ -0,0 +1,21 @@ +/// +import { MakeFullProps } from "./BaseComponent"; +export declare type BlockQuoteProps = MakeFullProps<'blockquote'>; +declare const _default: { + (props: MakeFullProps<"blockquote">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export default _default; diff --git a/dist/components/blockquote.js b/dist/components/blockquote.js new file mode 100644 index 0000000..856cca8 --- /dev/null +++ b/dist/components/blockquote.js @@ -0,0 +1,4 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const BaseComponent_1 = require("./BaseComponent"); +exports.default = BaseComponent_1.generateBaseComponent('blockquote'); diff --git a/dist/components/code.d.ts b/dist/components/code.d.ts new file mode 100644 index 0000000..2ac1e7a --- /dev/null +++ b/dist/components/code.d.ts @@ -0,0 +1,14 @@ +/// +import { MakeProps } from './BaseComponent'; +export interface CodeProps { + children: { + code: string; + }; + language?: string; + escape?: boolean; + lineNumbers?: string | true; + noTrim?: boolean; + autoAnimateId?: string; +} +declare function Code({ id, children, language, escape, fragmentIndex, lineNumbers, noTrim, autoAnimateId, ...props }: MakeProps): JSX.Element; +export default Code; diff --git a/dist/components/code.js b/dist/components/code.js new file mode 100644 index 0000000..8b666dc --- /dev/null +++ b/dist/components/code.js @@ -0,0 +1,12 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importDefault(require("react")); +const BaseComponent_1 = require("./BaseComponent"); +function Code({ id, children, language, escape, fragmentIndex, lineNumbers, noTrim, autoAnimateId, ...props }) { + return (react_1.default.createElement("pre", Object.assign({}, BaseComponent_1.getClassNameProps(props), { "data-id": autoAnimateId || id, id: id, "data-fragment-index": fragmentIndex }), + react_1.default.createElement("code", { className: language, "data-noescape": !escape, "data-trim": !noTrim, "data-line-numbers": autoAnimateId ? lineNumbers || true : lineNumbers }, children.code))); +} +exports.default = Code; diff --git a/dist/components/div.d.ts b/dist/components/div.d.ts new file mode 100644 index 0000000..2c6dff9 --- /dev/null +++ b/dist/components/div.d.ts @@ -0,0 +1,21 @@ +/// +import { MakeFullProps } from "./BaseComponent"; +export declare type DivProps = MakeFullProps<'div'>; +declare const _default: { + (props: MakeFullProps<"div">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export default _default; diff --git a/dist/components/div.js b/dist/components/div.js new file mode 100644 index 0000000..3835237 --- /dev/null +++ b/dist/components/div.js @@ -0,0 +1,4 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const BaseComponent_1 = require("./BaseComponent"); +exports.default = BaseComponent_1.generateBaseComponent('div'); diff --git a/dist/components/figcaption.d.ts b/dist/components/figcaption.d.ts new file mode 100644 index 0000000..39cb0d3 --- /dev/null +++ b/dist/components/figcaption.d.ts @@ -0,0 +1,21 @@ +/// +import { MakeFullProps } from "./BaseComponent"; +export declare type FigCaptionProps = MakeFullProps<'figcaption'>; +declare const _default: { + (props: MakeFullProps<"figcaption">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export default _default; diff --git a/dist/components/figcaption.js b/dist/components/figcaption.js new file mode 100644 index 0000000..5118900 --- /dev/null +++ b/dist/components/figcaption.js @@ -0,0 +1,4 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const BaseComponent_1 = require("./BaseComponent"); +exports.default = BaseComponent_1.generateBaseComponent('figcaption'); diff --git a/dist/components/figure.d.ts b/dist/components/figure.d.ts new file mode 100644 index 0000000..ba12ff6 --- /dev/null +++ b/dist/components/figure.d.ts @@ -0,0 +1,21 @@ +/// +import { MakeFullProps } from "./BaseComponent"; +export declare type FigureProps = MakeFullProps<'figure'>; +declare const _default: { + (props: MakeFullProps<"figcaption">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export default _default; diff --git a/dist/components/figure.js b/dist/components/figure.js new file mode 100644 index 0000000..2808073 --- /dev/null +++ b/dist/components/figure.js @@ -0,0 +1,4 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const BaseComponent_1 = require("./BaseComponent"); +exports.default = BaseComponent_1.generateBaseComponent('figure'); diff --git a/dist/components/footer.d.ts b/dist/components/footer.d.ts new file mode 100644 index 0000000..9ee8587 --- /dev/null +++ b/dist/components/footer.d.ts @@ -0,0 +1,21 @@ +/// +import { MakeFullProps } from "./BaseComponent"; +export declare type FooterProps = MakeFullProps<'footer'>; +declare const _default: { + (props: MakeFullProps<"figcaption">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export default _default; diff --git a/dist/components/footer.js b/dist/components/footer.js new file mode 100644 index 0000000..dfff925 --- /dev/null +++ b/dist/components/footer.js @@ -0,0 +1,4 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const BaseComponent_1 = require("./BaseComponent"); +exports.default = BaseComponent_1.generateBaseComponent('footer'); diff --git a/dist/components/h.d.ts b/dist/components/h.d.ts new file mode 100644 index 0000000..fb26825 --- /dev/null +++ b/dist/components/h.d.ts @@ -0,0 +1,105 @@ +/// +import { MakeFullProps } from "./BaseComponent"; +export declare type HProps = MakeFullProps<'h1'>; +export declare const H1: { + (props: MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const H2: { + (props: MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const H3: { + (props: MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const H4: { + (props: MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const H5: { + (props: MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export declare const H6: { + (props: MakeFullProps<"h1">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; diff --git a/dist/components/h.js b/dist/components/h.js new file mode 100644 index 0000000..13e8eab --- /dev/null +++ b/dist/components/h.js @@ -0,0 +1,10 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = void 0; +const BaseComponent_1 = require("./BaseComponent"); +exports.H1 = BaseComponent_1.generateBaseComponent('h1'); +exports.H2 = BaseComponent_1.generateBaseComponent('h2'); +exports.H3 = BaseComponent_1.generateBaseComponent('h3'); +exports.H4 = BaseComponent_1.generateBaseComponent('h4'); +exports.H5 = BaseComponent_1.generateBaseComponent('h5'); +exports.H6 = BaseComponent_1.generateBaseComponent('h6'); diff --git a/dist/components/header.d.ts b/dist/components/header.d.ts new file mode 100644 index 0000000..9e55779 --- /dev/null +++ b/dist/components/header.d.ts @@ -0,0 +1,21 @@ +/// +import { MakeFullProps } from "./BaseComponent"; +export declare type HeaderProps = MakeFullProps<'header'>; +declare const _default: { + (props: MakeFullProps<"figcaption">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export default _default; diff --git a/dist/components/header.js b/dist/components/header.js new file mode 100644 index 0000000..cea4952 --- /dev/null +++ b/dist/components/header.js @@ -0,0 +1,4 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const BaseComponent_1 = require("./BaseComponent"); +exports.default = BaseComponent_1.generateBaseComponent('header'); diff --git a/dist/components/iframe.d.ts b/dist/components/iframe.d.ts new file mode 100644 index 0000000..87ecc0a --- /dev/null +++ b/dist/components/iframe.d.ts @@ -0,0 +1,11 @@ +/// +import { MakeProps } from './BaseComponent'; +export interface IFrameProps { + height?: number; + lazy?: boolean; + preload?: string; + src: string; + width?: number; +} +declare function IFrame({ id, fragmentIndex, height, lazy, preload, src, width, ...props }: MakeProps): JSX.Element; +export default IFrame; diff --git a/dist/components/iframe.js b/dist/components/iframe.js new file mode 100644 index 0000000..ea39bc2 --- /dev/null +++ b/dist/components/iframe.js @@ -0,0 +1,11 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importDefault(require("react")); +const BaseComponent_1 = require("./BaseComponent"); +function IFrame({ id, fragmentIndex, height, lazy, preload, src, width, ...props }) { + return (react_1.default.createElement("iframe", Object.assign({}, BaseComponent_1.getClassNameProps(props), { "data-id": id, id: id, src: lazy ? undefined : src, "data-src": lazy ? src : false, "data-preload": preload, width: width, height: height, "data-fragment-index": fragmentIndex }))); +} +exports.default = IFrame; diff --git a/dist/components/image.d.ts b/dist/components/image.d.ts new file mode 100644 index 0000000..0e7840e --- /dev/null +++ b/dist/components/image.d.ts @@ -0,0 +1,10 @@ +/// +import { MakeProps } from './BaseComponent'; +export interface ImageProps { + alt?: string; + height?: number; + width?: number; + src: string; +} +declare function Image({ id, alt, fragmentIndex, height, src, width, ...props }: MakeProps): JSX.Element; +export default Image; diff --git a/dist/components/image.js b/dist/components/image.js new file mode 100644 index 0000000..654a549 --- /dev/null +++ b/dist/components/image.js @@ -0,0 +1,11 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importDefault(require("react")); +const BaseComponent_1 = require("./BaseComponent"); +function Image({ id, alt, fragmentIndex, height, src, width, ...props }) { + return (react_1.default.createElement("img", Object.assign({}, BaseComponent_1.getClassNameProps(props), { "data-id": id, id: id, src: src, alt: alt, width: width, height: height, "data-fragment-index": fragmentIndex }))); +} +exports.default = Image; diff --git a/dist/components/li.d.ts b/dist/components/li.d.ts new file mode 100644 index 0000000..8112249 --- /dev/null +++ b/dist/components/li.d.ts @@ -0,0 +1,21 @@ +/// +import { MakeFullProps } from "./BaseComponent"; +export declare type LiProps = MakeFullProps<'li'>; +declare const _default: { + (props: MakeFullProps<"li">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export default _default; diff --git a/dist/components/li.js b/dist/components/li.js new file mode 100644 index 0000000..06d2b9f --- /dev/null +++ b/dist/components/li.js @@ -0,0 +1,4 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const BaseComponent_1 = require("./BaseComponent"); +exports.default = BaseComponent_1.generateBaseComponent('li'); diff --git a/dist/components/link.d.ts b/dist/components/link.d.ts new file mode 100644 index 0000000..bff646b --- /dev/null +++ b/dist/components/link.d.ts @@ -0,0 +1,9 @@ +import React from 'react'; +import { MakeProps } from './BaseComponent'; +export interface LinkProps { + children: React.ReactNode; + href?: string; + slide?: string | [string, string]; +} +declare function Link({ id, children, fragmentIndex, href, slide, ...props }: MakeProps): JSX.Element; +export default Link; diff --git a/dist/components/link.js b/dist/components/link.js new file mode 100644 index 0000000..e5f61bc --- /dev/null +++ b/dist/components/link.js @@ -0,0 +1,15 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importDefault(require("react")); +const BaseComponent_1 = require("./BaseComponent"); +function Link({ id, children, fragmentIndex, href, slide, ...props }) { + return (react_1.default.createElement("a", Object.assign({}, BaseComponent_1.getClassNameProps(props), { "data-id": id, id: id, href: href || + (slide && + `#/${typeof slide === 'string' + ? parseInt(slide, 10) - 1 + : `${parseInt(slide[0], 10) - 1}/${parseInt(slide[1], 10) - 1}`}`), "data-fragment-index": fragmentIndex }), children)); +} +exports.default = Link; diff --git a/dist/components/main.d.ts b/dist/components/main.d.ts new file mode 100644 index 0000000..30dbd9e --- /dev/null +++ b/dist/components/main.d.ts @@ -0,0 +1,21 @@ +/// +import { MakeFullProps } from "./BaseComponent"; +export declare type MainProps = MakeFullProps<'main'>; +declare const _default: { + (props: MakeFullProps<"figcaption">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export default _default; diff --git a/dist/components/main.js b/dist/components/main.js new file mode 100644 index 0000000..2f6a845 --- /dev/null +++ b/dist/components/main.js @@ -0,0 +1,4 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const BaseComponent_1 = require("./BaseComponent"); +exports.default = BaseComponent_1.generateBaseComponent('main'); diff --git a/dist/components/note.d.ts b/dist/components/note.d.ts new file mode 100644 index 0000000..45323e4 --- /dev/null +++ b/dist/components/note.d.ts @@ -0,0 +1,5 @@ +/// +import { MakeFullProps } from "./BaseComponent"; +export declare type NoteProps = MakeFullProps<'aside'>; +declare function Note(props: NoteProps): JSX.Element; +export default Note; diff --git a/dist/components/note.js b/dist/components/note.js new file mode 100644 index 0000000..2b6ca8a --- /dev/null +++ b/dist/components/note.js @@ -0,0 +1,10 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importDefault(require("react")); +function Note(props) { + return react_1.default.createElement("aside", Object.assign({}, props, { className: "notes" })); +} +exports.default = Note; diff --git a/dist/components/ol.d.ts b/dist/components/ol.d.ts new file mode 100644 index 0000000..9e268e7 --- /dev/null +++ b/dist/components/ol.d.ts @@ -0,0 +1,21 @@ +/// +import { MakeFullProps } from "./BaseComponent"; +export declare type OlProps = MakeFullProps<'ol'>; +declare const _default: { + (props: MakeFullProps<"ol">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export default _default; diff --git a/dist/components/ol.js b/dist/components/ol.js new file mode 100644 index 0000000..9a59729 --- /dev/null +++ b/dist/components/ol.js @@ -0,0 +1,4 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const BaseComponent_1 = require("./BaseComponent"); +exports.default = BaseComponent_1.generateBaseComponent('ol'); diff --git a/dist/components/p.d.ts b/dist/components/p.d.ts new file mode 100644 index 0000000..eb64626 --- /dev/null +++ b/dist/components/p.d.ts @@ -0,0 +1,21 @@ +/// +import { MakeFullProps } from "./BaseComponent"; +export declare type PProps = MakeFullProps<'p'>; +declare const _default: { + (props: MakeFullProps<"p">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export default _default; diff --git a/dist/components/p.js b/dist/components/p.js new file mode 100644 index 0000000..b72edcb --- /dev/null +++ b/dist/components/p.js @@ -0,0 +1,4 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const BaseComponent_1 = require("./BaseComponent"); +exports.default = BaseComponent_1.generateBaseComponent('p'); diff --git a/dist/components/reveal.d.ts b/dist/components/reveal.d.ts new file mode 100644 index 0000000..638ce4e --- /dev/null +++ b/dist/components/reveal.d.ts @@ -0,0 +1,86 @@ +import React from 'react'; +import { RevealPlugin } from 'reveal.js'; +import 'reveal.js/dist/reveal.css'; +import { BackgroundRepeat, TransitionAtoms, TransitionSpeed } from '../types'; +export interface RevealJSProps { + children: React.ReactNode; + plugins?: RevealPlugin[]; + controls?: boolean; + controlsTutorial?: boolean; + controlsLayout?: 'bottom-right' | 'edge'; + controlsBackArrows?: 'faded' | 'hidden' | 'visible'; + progress?: boolean; + slideNumber?: boolean | 'h.v' | 'h/v' | 'c' | 'c/t' | ((slide: { + h: number; + v: number; + f: number; + }) => string | string[]); + showSlideNumber?: 'all' | 'print' | 'speaker'; + hashOneBasedIndex?: boolean; + hash?: boolean; + respondToHashChanges?: boolean; + history?: boolean; + keyboard?: boolean; + keyboardCondition?: null | 'focused'; + disableLayout?: boolean; + overview?: boolean; + center?: boolean; + touch?: boolean; + loop?: boolean; + rtl?: boolean; + navigationMode?: 'default' | 'linear' | 'grid'; + shuffle?: boolean; + fragments?: boolean; + fragmentInURL?: boolean; + embedded?: boolean; + help?: boolean; + pause?: boolean; + showNotes?: boolean; + autoPlayMedia?: boolean | null; + preloadIframes?: boolean | null; + autoAnimate?: boolean; + autoAnimateMatcher?: null | ((fromSlide: HTMLElement, toSlide: HTMLElement) => [HTMLElement, HTMLElement][]); + autoAnimateEasing?: string; + autoAnimateDuration?: number; + autoAnimateUnmatched?: boolean; + autoAnimateStyles?: string[]; + autoSlide?: number; + autoSlideStoppable?: boolean; + autoSlideMethod?: (() => void) | null; + defaultTiming?: number | null; + mouseWheel?: boolean; + previewLinks?: boolean; + postMessage?: boolean; + postMessageEvents?: boolean; + focusBodyOnPageVisibilityChange?: boolean; + transition?: TransitionAtoms; + transitionSpeed?: TransitionSpeed; + backgroundTransition?: TransitionAtoms; + pdfMaxPagesPerSlide?: number; + pdfSeparateFragments?: boolean; + pdfPageHeightOffset?: number; + viewDistance?: number; + mobileViewDistance?: number; + display?: string; + hideInactiveCursor?: boolean; + hideCursorTime?: number; + parallaxBackgroundImage?: string; + parallaxBackgroundSize?: string; + parallaxBackgroundHorizontal?: number; + parallaxBackgroundRepeat?: BackgroundRepeat | ''; + parallaxBackgroundPosition?: string; + parallaxBackgroundVertical?: number; + width?: number; + height?: number; + margin?: number; + minScale?: number; + maxScale?: number; +} +export default function RevealJS({ children, plugins, controls, controlsTutorial, controlsLayout, controlsBackArrows, progress, slideNumber, showSlideNumber, hashOneBasedIndex, hash, respondToHashChanges, history, keyboard, keyboardCondition, disableLayout, overview, center, touch, loop, rtl, navigationMode, shuffle, fragments, fragmentInURL, embedded, help, pause, showNotes, autoPlayMedia, preloadIframes, autoAnimate, autoAnimateMatcher, autoAnimateEasing, autoAnimateDuration, autoAnimateUnmatched, autoAnimateStyles, autoSlide, autoSlideStoppable, autoSlideMethod, defaultTiming, mouseWheel, previewLinks, postMessage, postMessageEvents, focusBodyOnPageVisibilityChange, transition, // none/fade/slide/convex/concave/zoom +transitionSpeed, // default/fast/slow +backgroundTransition, // none/fade/slide/convex/concave/zoom +pdfMaxPagesPerSlide, pdfSeparateFragments, pdfPageHeightOffset, viewDistance, mobileViewDistance, display, hideInactiveCursor, hideCursorTime, parallaxBackgroundImage, // CSS syntax, e.g. "a.jpg" +parallaxBackgroundSize, // CSS syntax, e.g. "3000px 2000px" +parallaxBackgroundRepeat, // repeat/repeat-x/repeat-y/no-repeat/initial/inherit +parallaxBackgroundPosition, // CSS syntax, e.g. "top left" +parallaxBackgroundHorizontal, parallaxBackgroundVertical, width, height, margin, minScale, maxScale, }: RevealJSProps): JSX.Element; diff --git a/dist/components/reveal.js b/dist/components/reveal.js new file mode 100644 index 0000000..975c537 --- /dev/null +++ b/dist/components/reveal.js @@ -0,0 +1,389 @@ +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importStar(require("react")); +const reveal_js_1 = __importDefault(require("reveal.js")); +// Styles +require("reveal.js/dist/reveal.css"); +function RevealJS({ children, plugins = [], +// Display presentation control arrows +controls = true, +// Help the user learn the controls by providing hints, for example by +// bouncing the down arrow when they first encounter a vertical slide +controlsTutorial = true, +// Determines where controls appear, "edges" or "bottom-right" +controlsLayout = 'bottom-right', +// Visibility rule for backwards navigation arrows; "faded", "hidden" +// or "visible" +controlsBackArrows = 'faded', +// Display a presentation progress bar +progress = true, +// Display the page number of the current slide +// - true = Show slide number +// - false = Hide slide number +// +// Can optionally be set as a string that specifies the number formatting = +// - "h.v" = Horizontal . vertical slide number (default) +// - "h/v" = Horizontal / vertical slide number +// - "c" = Flattened slide number +// - "c/t" = Flattened slide number / total slides +// +// Alternatively, you can provide a function that returns the slide +// number for the current slide. The function should take in a slide +// object and return an array with one string [slideNumber] or +// three strings [n1,delimiter,n2]. See #formatSlideNumber(). +slideNumber = false, +// Can be used to limit the contexts in which the slide number appears +// - "all" = Always show the slide number +// - "print" = Only when printing to PDF +// - "speaker" = Only in the speaker view +showSlideNumber = 'all', +// Use 1 based indexing for # links to match slide number (default is zero +// based) +hashOneBasedIndex = false, +// Add the current slide number to the URL hash so that reloading the +// page/copying the URL will return you to the same slide +hash = false, +// Flags if we should monitor the hash and change slides accordingly +respondToHashChanges = true, +// Push each slide change to the browser history. Implies `hash = true` +history = false, +// Enable keyboard shortcuts for navigation +keyboard = true, +// Optional function that blocks keyboard events when retuning false +// +// If you set this to 'focused', we will only capture keyboard events +// for embedded decks when they are in focus +keyboardCondition = null, +// Disables the default reveal.js slide layout (scaling and centering) +// so that you can use custom CSS layout +disableLayout = false, +// Enable the slide overview mode +overview = true, +// Vertical centering of slides +center = true, +// Enables touch navigation on devices with touch input +touch = true, +// Loop the presentation +loop = false, +// Change the presentation direction to be RTL +rtl = false, +// Changes the behavior of our navigation directions. +// +// "default" +// Left/right arrow keys step between horizontal slides, up/down +// arrow keys step between vertical slides. Space key steps through +// all slides (both horizontal and vertical). +// +// "linear" +// Removes the up/down arrows. Left/right arrows step through all +// slides (both horizontal and vertical). +// +// "grid" +// When this is enabled, stepping left/right from a vertical stack +// to an adjacent vertical stack will land you at the same vertical +// index. +// +// Consider a deck with six slides ordered in two vertical stacks = +// 1.1 2.1 +// 1.2 2.2 +// 1.3 2.3 +// +// If you're on slide 1.3 and navigate right, you will normally move +// from 1.3 -> 2.1. If "grid" is used, the same navigation takes you +// from 1.3 -> 2.3. +navigationMode = 'default', +// Randomizes the order of slides each time the presentation loads +shuffle = false, +// Turns fragments on and off globally +fragments = true, +// Flags whether to include the current fragment in the URL, +// so that reloading brings you to the same fragment position +fragmentInURL = true, +// Flags if the presentation is running in an embedded mode, +// i.e. contained within a limited portion of the screen +embedded = false, +// Flags if we should show a help overlay when the question-mark +// key is pressed +help = true, +// Flags if it should be possible to pause the presentation (blackout) +pause = true, +// Flags if speaker notes should be visible to all viewers +showNotes = false, +// Global override for autolaying embedded media (video/audio/iframe) +// - null = Media will only autoplay if data-autoplay is present +// - true = All media will autoplay, regardless of individual setting +// - false = No media will autoplay, regardless of individual setting +autoPlayMedia = null, +// Global override for preloading lazy-loaded iframes +// - null = Iframes with data-src AND data-preload will be loaded when within +// the viewDistance, iframes with only data-src will be loaded when visible +// - true = All iframes with data-src will be loaded when within the viewDistance +// - false = All iframes with data-src will be loaded only when visible +preloadIframes = null, +// Can be used to globally disable auto-animation +autoAnimate = true, +// Optionally provide a custom element matcher that will be +// used to dictate which elements we can animate between. +autoAnimateMatcher = null, +// Default settings for our auto-animate transitions, can be +// overridden per-slide or per-element via data arguments +autoAnimateEasing = 'ease', autoAnimateDuration = 1.0, autoAnimateUnmatched = true, +// CSS properties that can be auto-animated. Position & scale +// is matched separately so there's no need to include styles +// like top/right/bottom/left, width/height or margin. +autoAnimateStyles = [ + 'opacity', + 'color', + 'background-color', + 'padding', + 'font-size', + 'line-height', + 'letter-spacing', + 'border-width', + 'border-color', + 'border-radius', + 'outline', + 'outline-offset', +], +// Controls automatic progression to the next slide +// - 0 = Auto-sliding only happens if the data-autoslide HTML attribute +// is present on the current slide or fragment +// - 1+ = All slides will progress automatically at the given interval +// - false = No auto-sliding, even if data-autoslide is present +autoSlide = 0, +// Stop auto-sliding after user input +autoSlideStoppable = true, +// Use this method for navigation when auto-sliding (defaults to navigateNext) +autoSlideMethod = null, +// Specify the average time in seconds that you think you will spend +// presenting each slide. This is used to show a pacing timer in the +// speaker view +defaultTiming = null, +// Enable slide navigation via mouse wheel +mouseWheel = false, +// Opens links in an iframe preview overlay +// Add `data-preview-link` and `data-preview-link="false"` to customise each link +// individually +previewLinks = false, +// Exposes the reveal.js API through window.postMessage +postMessage = true, +// Dispatches all reveal.js events to the parent window through postMessage +postMessageEvents = false, +// Focuses body when page changes visibility to ensure keyboard shortcuts work +focusBodyOnPageVisibilityChange = true, +// Transition style +transition = 'slide', // none/fade/slide/convex/concave/zoom +// Transition speed +transitionSpeed = 'default', // default/fast/slow +// Transition style for full page slide backgrounds +backgroundTransition = 'fade', // none/fade/slide/convex/concave/zoom +// The maximum number of pages a single slide can expand onto when printing +// to PDF, unlimited by default +pdfMaxPagesPerSlide = Number.POSITIVE_INFINITY, +// Prints each fragment on a separate slide +pdfSeparateFragments = true, +// Offset used to reduce the height of content within exported PDF pages. +// This exists to account for environment differences based on how you +// print to PDF. CLI printing options, like phantomjs and wkpdf, can end +// on precisely the total height of the document whereas in-browser +// printing has to end one pixel before. +pdfPageHeightOffset = -1, +// Number of slides away from the current that are visible +viewDistance = 3, +// Number of slides away from the current that are visible on mobile +// devices. It is advisable to set this to a lower number than +// viewDistance in order to save resources. +mobileViewDistance = 2, +// The display mode that will be used to show slides +display = 'block', +// Hide cursor if inactive +hideInactiveCursor = true, +// Time before the cursor is hidden (in ms) +hideCursorTime = 5000, +// Parallax background image +parallaxBackgroundImage = '', // CSS syntax, e.g. "a.jpg" +// Parallax background size +parallaxBackgroundSize = '', // CSS syntax, e.g. "3000px 2000px" +// Parallax background repeat +parallaxBackgroundRepeat = '', // repeat/repeat-x/repeat-y/no-repeat/initial/inherit +// Parallax background position +parallaxBackgroundPosition = '', // CSS syntax, e.g. "top left" +// Number of pixels to move the parallax background per slide +// - Calculated automatically unless specified +// - Set to 0 to disable movement along an axis +parallaxBackgroundHorizontal = 200, parallaxBackgroundVertical = 50, +// The "normal" size of the presentation, aspect ratio will +// be preserved when the presentation is scaled to fit different +// resolutions. Can be specified using percentage units. +width = 960, height = 700, +// Factor of the display size that should remain empty around +// the content +margin = 0.04, +// Bounds for smallest/largest possible scale to apply to content +minScale = 0.2, maxScale = 2.0, }) { + react_1.useEffect(() => { + const deck = new reveal_js_1.default({ + plugins, + controls, + controlsTutorial, + controlsLayout, + controlsBackArrows, + progress, + slideNumber, + showSlideNumber, + hashOneBasedIndex, + hash, + respondToHashChanges, + history, + keyboard, + keyboardCondition, + disableLayout, + overview, + center, + touch, + loop, + rtl, + navigationMode, + shuffle, + fragments, + fragmentInURL, + embedded, + help, + pause, + showNotes, + autoPlayMedia, + preloadIframes, + autoAnimate, + autoAnimateMatcher, + autoAnimateEasing, + autoAnimateDuration, + autoAnimateUnmatched, + autoAnimateStyles, + autoSlide, + autoSlideStoppable, + autoSlideMethod, + defaultTiming, + mouseWheel, + previewLinks, + postMessage, + postMessageEvents, + focusBodyOnPageVisibilityChange, + transition, + transitionSpeed, + backgroundTransition, + pdfMaxPagesPerSlide, + pdfSeparateFragments, + pdfPageHeightOffset, + viewDistance, + mobileViewDistance, + display, + hideInactiveCursor, + hideCursorTime, + parallaxBackgroundImage, + parallaxBackgroundRepeat, + parallaxBackgroundPosition, + parallaxBackgroundSize, + parallaxBackgroundHorizontal, + parallaxBackgroundVertical, + width, + height, + margin, + minScale, + maxScale, + }); + deck.initialize(); + }, [ + plugins, + controls, + controlsTutorial, + controlsLayout, + controlsBackArrows, + progress, + slideNumber, + showSlideNumber, + hashOneBasedIndex, + hash, + respondToHashChanges, + history, + keyboard, + keyboardCondition, + disableLayout, + overview, + center, + touch, + loop, + rtl, + navigationMode, + shuffle, + fragments, + fragmentInURL, + embedded, + help, + pause, + showNotes, + autoPlayMedia, + preloadIframes, + autoAnimate, + autoAnimateMatcher, + autoAnimateEasing, + autoAnimateDuration, + autoAnimateUnmatched, + autoAnimateStyles, + autoSlide, + autoSlideStoppable, + autoSlideMethod, + defaultTiming, + mouseWheel, + previewLinks, + postMessage, + postMessageEvents, + focusBodyOnPageVisibilityChange, + transition, + transitionSpeed, + backgroundTransition, + pdfMaxPagesPerSlide, + pdfSeparateFragments, + pdfPageHeightOffset, + viewDistance, + mobileViewDistance, + display, + hideInactiveCursor, + hideCursorTime, + parallaxBackgroundImage, + parallaxBackgroundRepeat, + parallaxBackgroundPosition, + parallaxBackgroundSize, + parallaxBackgroundHorizontal, + parallaxBackgroundVertical, + width, + height, + margin, + minScale, + maxScale, + ]); + return (react_1.default.createElement("div", { className: "reveal" }, + react_1.default.createElement("div", { className: "slides" }, children))); +} +exports.default = RevealJS; diff --git a/dist/components/slide.d.ts b/dist/components/slide.d.ts new file mode 100644 index 0000000..c17b749 --- /dev/null +++ b/dist/components/slide.d.ts @@ -0,0 +1,25 @@ +import React from 'react'; +import { Transitions, TransitionSpeed } from '../types'; +export interface SlideProps { + autoslide?: true; + autoAnimate?: true; + autoAnimateUnmatched?: boolean; + backgroundColor?: string; + backgroundImage?: string; + backgroundSize?: string; + backgroundPosition?: string; + backgroundRepeat?: string; + backgroundOpacity?: string; + backgroundVideo?: string; + backgroundVideoLoop?: true; + backgroundVideoMuted?: true; + backgroundIframe?: string; + backgroundInteractive?: true; + children: React.ReactNode; + id?: string; + transition?: Transitions; + transitionSpeed?: TransitionSpeed; + visibility?: 'uncounted' | 'hidden'; +} +declare function Slide({ autoslide, autoAnimate, autoAnimateUnmatched, backgroundColor, backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat, backgroundOpacity, backgroundVideo, backgroundVideoLoop, backgroundVideoMuted, backgroundIframe, backgroundInteractive, children, id, transition, transitionSpeed, visibility, }: SlideProps): JSX.Element; +export default Slide; diff --git a/dist/components/slide.js b/dist/components/slide.js new file mode 100644 index 0000000..41e1b7d --- /dev/null +++ b/dist/components/slide.js @@ -0,0 +1,10 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importDefault(require("react")); +function Slide({ autoslide, autoAnimate, autoAnimateUnmatched, backgroundColor, backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat, backgroundOpacity, backgroundVideo, backgroundVideoLoop, backgroundVideoMuted, backgroundIframe, backgroundInteractive, children, id, transition, transitionSpeed, visibility, }) { + return (react_1.default.createElement("section", { "data-autoslide": autoslide, id: id, "data-auto-animate": autoAnimate, "data-auto-animate-unmatched": autoAnimateUnmatched, "data-visibility": visibility, "data-background-color": backgroundColor, "data-background-image": backgroundImage, "data-background-size": backgroundSize, "data-background-position": backgroundPosition, "data-background-repeat": backgroundRepeat, "data-background-opacity": backgroundOpacity, "data-background-video": backgroundVideo, "data-background-video-loop": backgroundVideoLoop, "data-background-video-muted": backgroundVideoMuted, "data-background-iframe": backgroundIframe, "data-background-interactive": backgroundInteractive, "data-transition": transition, "data-transition-speed": transitionSpeed }, children)); +} +exports.default = Slide; diff --git a/dist/components/span.d.ts b/dist/components/span.d.ts new file mode 100644 index 0000000..26575dc --- /dev/null +++ b/dist/components/span.d.ts @@ -0,0 +1,21 @@ +/// +import { MakeFullProps } from "./BaseComponent"; +export declare type SpanProps = MakeFullProps<'span'>; +declare const _default: { + (props: MakeFullProps<"span">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export default _default; diff --git a/dist/components/span.js b/dist/components/span.js new file mode 100644 index 0000000..7c1f9b8 --- /dev/null +++ b/dist/components/span.js @@ -0,0 +1,4 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const BaseComponent_1 = require("./BaseComponent"); +exports.default = BaseComponent_1.generateBaseComponent('span'); diff --git a/dist/components/ul.d.ts b/dist/components/ul.d.ts new file mode 100644 index 0000000..dcb6afa --- /dev/null +++ b/dist/components/ul.d.ts @@ -0,0 +1,21 @@ +/// +import { MakeFullProps } from "./BaseComponent"; +export declare type UlProps = MakeFullProps<'ul'>; +declare const _default: { + (props: MakeFullProps<"ul">): import("react").DetailedReactHTMLElement<{ + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + fragmentIndex?: number | undefined; + } | { + 'data-id': string | undefined; + id: string | undefined; + 'data-fragment-index': number | undefined; + children: import("react").ReactNode; + className: string; + fragmentIndex?: number | undefined; + }, HTMLElement>; + displayName: string; +}; +export default _default; diff --git a/dist/components/ul.js b/dist/components/ul.js new file mode 100644 index 0000000..999d46e --- /dev/null +++ b/dist/components/ul.js @@ -0,0 +1,4 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const BaseComponent_1 = require("./BaseComponent"); +exports.default = BaseComponent_1.generateBaseComponent('ul'); diff --git a/dist/components/video.d.ts b/dist/components/video.d.ts new file mode 100644 index 0000000..5ec53ed --- /dev/null +++ b/dist/components/video.d.ts @@ -0,0 +1,15 @@ +/// +import { MakeProps } from './BaseComponent'; +export interface VideoProps { + autoplay?: boolean; + controls?: boolean; + height?: number; + lazy?: string; + loop?: boolean; + muted?: boolean; + preload?: '' | 'metadata' | 'auto' | 'none'; + width?: number; + src: string[] | string; +} +declare function Video({ id, autoplay, controls, fragmentIndex, height, lazy, loop, muted, preload, width, src, ...props }: MakeProps): JSX.Element; +export default Video; diff --git a/dist/components/video.js b/dist/components/video.js new file mode 100644 index 0000000..0214660 --- /dev/null +++ b/dist/components/video.js @@ -0,0 +1,26 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importDefault(require("react")); +const BaseComponent_1 = require("./BaseComponent"); +const formatMap = { + '3gp': 'video/3gpp', + mpg: 'audio/mpeg', + mpeg: 'audio/mpeg', + mp4: 'video/mp4', + m4a: 'video/mp4', + m4p: 'video/mp4', + ogv: 'video/ogg', + ogg: 'video/ogg', + mov: 'video/quicktime', + webm: 'video/webm', +}; +function Video({ id, autoplay, controls, fragmentIndex, height, lazy, loop, muted, preload, width, src, ...props }) { + if (Array.isArray(src)) { + return (react_1.default.createElement("video", Object.assign({}, BaseComponent_1.getClassNameProps(props), { "data-id": id, id: id, "data-autoplay": autoplay, controls: controls, muted: muted, loop: loop, height: height, width: width, "data-fragment-index": fragmentIndex }), src.map((element) => (react_1.default.createElement("source", { src: lazy ? '' : element, "data-src": lazy ? element : false, "data-preload": preload, type: formatMap[/\.[^.]+$/.exec(element)?.[0] || 'mp4'] }))))); + } + return (react_1.default.createElement("video", Object.assign({}, BaseComponent_1.getClassNameProps(props), { "data-id": id, id: id, "data-autoplay": autoplay, src: lazy ? '' : src, "data-src": lazy ? src : false, "data-preload": preload, controls: controls, muted: muted, loop: loop, height: height, width: width, "data-fragment-index": fragmentIndex }))); +} +exports.default = Video; diff --git a/dist/hooks/useReveal.d.ts b/dist/hooks/useReveal.d.ts new file mode 100644 index 0000000..5d84632 --- /dev/null +++ b/dist/hooks/useReveal.d.ts @@ -0,0 +1 @@ +export default function useReveal(): import("../components/RevealProvider").RevealContextType; diff --git a/dist/hooks/useReveal.js b/dist/hooks/useReveal.js new file mode 100644 index 0000000..786cfcd --- /dev/null +++ b/dist/hooks/useReveal.js @@ -0,0 +1,8 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = require("react"); +const RevealProvider_1 = require("../components/RevealProvider"); +function useReveal() { + return react_1.useContext(RevealProvider_1.RevealContext); +} +exports.default = useReveal; diff --git a/dist/index.d.ts b/dist/index.d.ts new file mode 100644 index 0000000..69159ca --- /dev/null +++ b/dist/index.d.ts @@ -0,0 +1,38 @@ +/*! + * revealjs-react 1.0.0 + * MIT licensed + * + * Copyright (C) 2020 Blake Nedved, https://blakeanedved.github.io/ + */ +import { H1, H2, H3, H4, H5, H6, BlockQuote, Div, FigCaption, Figure, Footer, Header, Li, Main, Ol, P, Span, Ul } from './components/SimpleComponents'; +import type { HProps, BlockQuoteProps, DivProps, FigCaptionProps, FigureProps, FooterProps, HeaderProps, LiProps, MainProps, OlProps, PProps, SpanProps, UlProps } from './components/SimpleComponents'; +import Audio from './components/Audio'; +import type { AudioProps } from './components/Audio'; +import Code from './components/Code'; +import type { CodeProps } from './components/Code'; +import IFrame from './components/Iframe'; +import type { IFrameProps } from './components/Iframe'; +import Image from './components/Image'; +import type { ImageProps } from './components/Image'; +import Link from './components/Link'; +import type { LinkProps } from './components/Link'; +import Note from './components/Note'; +import type { NoteProps } from './components/Note'; +import RevealJS from './components/RevealJS'; +import type { RevealJSProps } from './components/RevealJS'; +import Slide from './components/Slide'; +import type { SlideProps } from './components/Slide'; +import Video from './components/Video'; +import type { VideoProps } from './components/Video'; +import { RevealContext } from "./components/RevealProvider"; +import useReveal from './hooks/useReveal'; +declare const HighlightPlugin: RevealPlugin; +declare const MathPlugin: RevealPlugin; +declare const MarkdownPlugin: RevealPlugin; +declare const NotesPlugin: RevealPlugin; +declare const SearchPlugin: RevealPlugin; +declare const ZoomPlugin: RevealPlugin; +import type { RevealPlugin, RevealPluginList, RevealConfig, RevealNavigate, RevealRoutes, RevealSlideCoordinates, RevealSlideSize } from '../types/reveal.js'; +import type Reveal from '../types/reveal.js'; +export { useReveal, RevealContext, Audio, BlockQuote, Code, Div, FigCaption, Figure, Footer, H1, H2, H3, H4, H5, H6, Header, IFrame, Image, Li, Link, Main, Note, Ol, P, RevealJS, Slide, Span, Ul, Video, HighlightPlugin, MathPlugin, MarkdownPlugin, SearchPlugin, ZoomPlugin, NotesPlugin, }; +export type { RevealPlugin, RevealPluginList, Reveal, RevealConfig, RevealNavigate, RevealRoutes, RevealSlideCoordinates, RevealSlideSize, AudioProps, BlockQuoteProps, CodeProps, DivProps, FigCaptionProps, FigureProps, FooterProps, HProps, HeaderProps, IFrameProps, ImageProps, LiProps, LinkProps, MainProps, NoteProps, OlProps, PProps, RevealJSProps, SlideProps, SpanProps, UlProps, VideoProps, }; diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 0000000..1ddea21 --- /dev/null +++ b/dist/index.js @@ -0,0 +1,73 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.NotesPlugin = exports.ZoomPlugin = exports.SearchPlugin = exports.MarkdownPlugin = exports.MathPlugin = exports.HighlightPlugin = exports.Video = exports.Ul = exports.Span = exports.Slide = exports.RevealJS = exports.P = exports.Ol = exports.Note = exports.Main = exports.Link = exports.Li = exports.Image = exports.IFrame = exports.Header = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Footer = exports.Figure = exports.FigCaption = exports.Div = exports.Code = exports.BlockQuote = exports.Audio = exports.RevealContext = exports.useReveal = void 0; +/*! + * revealjs-react 1.0.0 + * MIT licensed + * + * Copyright (C) 2020 Blake Nedved, https://blakeanedved.github.io/ + */ +const SimpleComponents_1 = require("./components/SimpleComponents"); +Object.defineProperty(exports, "H1", { enumerable: true, get: function () { return SimpleComponents_1.H1; } }); +Object.defineProperty(exports, "H2", { enumerable: true, get: function () { return SimpleComponents_1.H2; } }); +Object.defineProperty(exports, "H3", { enumerable: true, get: function () { return SimpleComponents_1.H3; } }); +Object.defineProperty(exports, "H4", { enumerable: true, get: function () { return SimpleComponents_1.H4; } }); +Object.defineProperty(exports, "H5", { enumerable: true, get: function () { return SimpleComponents_1.H5; } }); +Object.defineProperty(exports, "H6", { enumerable: true, get: function () { return SimpleComponents_1.H6; } }); +Object.defineProperty(exports, "BlockQuote", { enumerable: true, get: function () { return SimpleComponents_1.BlockQuote; } }); +Object.defineProperty(exports, "Div", { enumerable: true, get: function () { return SimpleComponents_1.Div; } }); +Object.defineProperty(exports, "FigCaption", { enumerable: true, get: function () { return SimpleComponents_1.FigCaption; } }); +Object.defineProperty(exports, "Figure", { enumerable: true, get: function () { return SimpleComponents_1.Figure; } }); +Object.defineProperty(exports, "Footer", { enumerable: true, get: function () { return SimpleComponents_1.Footer; } }); +Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return SimpleComponents_1.Header; } }); +Object.defineProperty(exports, "Li", { enumerable: true, get: function () { return SimpleComponents_1.Li; } }); +Object.defineProperty(exports, "Main", { enumerable: true, get: function () { return SimpleComponents_1.Main; } }); +Object.defineProperty(exports, "Ol", { enumerable: true, get: function () { return SimpleComponents_1.Ol; } }); +Object.defineProperty(exports, "P", { enumerable: true, get: function () { return SimpleComponents_1.P; } }); +Object.defineProperty(exports, "Span", { enumerable: true, get: function () { return SimpleComponents_1.Span; } }); +Object.defineProperty(exports, "Ul", { enumerable: true, get: function () { return SimpleComponents_1.Ul; } }); +const Audio_1 = __importDefault(require("./components/Audio")); +exports.Audio = Audio_1.default; +const Code_1 = __importDefault(require("./components/Code")); +exports.Code = Code_1.default; +const Iframe_1 = __importDefault(require("./components/Iframe")); +exports.IFrame = Iframe_1.default; +const Image_1 = __importDefault(require("./components/Image")); +exports.Image = Image_1.default; +const Link_1 = __importDefault(require("./components/Link")); +exports.Link = Link_1.default; +const Note_1 = __importDefault(require("./components/Note")); +exports.Note = Note_1.default; +const RevealJS_1 = __importDefault(require("./components/RevealJS")); +exports.RevealJS = RevealJS_1.default; +const Slide_1 = __importDefault(require("./components/Slide")); +exports.Slide = Slide_1.default; +const Video_1 = __importDefault(require("./components/Video")); +exports.Video = Video_1.default; +const RevealProvider_1 = require("./components/RevealProvider"); +Object.defineProperty(exports, "RevealContext", { enumerable: true, get: function () { return RevealProvider_1.RevealContext; } }); +// hooks +const useReveal_1 = __importDefault(require("./hooks/useReveal")); +exports.useReveal = useReveal_1.default; +// plugins +const HighlightPlugin_1 = __importDefault(require("./plugins/HighlightPlugin")); +const MathPlugin_1 = __importDefault(require("./plugins/MathPlugin")); +const MarkdownPlugin_1 = __importDefault(require("./plugins/MarkdownPlugin")); +const NotesPlugin_1 = __importDefault(require("./plugins/NotesPlugin")); +const SearchPlugin_1 = __importDefault(require("./plugins/SearchPlugin")); +const ZoomPlugin_1 = __importDefault(require("./plugins/ZoomPlugin")); +const HighlightPlugin = HighlightPlugin_1.default; +exports.HighlightPlugin = HighlightPlugin; +const MathPlugin = MathPlugin_1.default; +exports.MathPlugin = MathPlugin; +const MarkdownPlugin = MarkdownPlugin_1.default; +exports.MarkdownPlugin = MarkdownPlugin; +const NotesPlugin = NotesPlugin_1.default; +exports.NotesPlugin = NotesPlugin; +const SearchPlugin = SearchPlugin_1.default; +exports.SearchPlugin = SearchPlugin; +const ZoomPlugin = ZoomPlugin_1.default; +exports.ZoomPlugin = ZoomPlugin; diff --git a/dist/plugins/HighlightPlugin.d.ts b/dist/plugins/HighlightPlugin.d.ts new file mode 100644 index 0000000..b5ce163 --- /dev/null +++ b/dist/plugins/HighlightPlugin.d.ts @@ -0,0 +1,2 @@ +import HighlightPlugin from 'reveal.js/plugin/highlight/highlight.esm'; +export default HighlightPlugin; diff --git a/dist/plugins/HighlightPlugin.js b/dist/plugins/HighlightPlugin.js new file mode 100644 index 0000000..80a88ac --- /dev/null +++ b/dist/plugins/HighlightPlugin.js @@ -0,0 +1,7 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const highlight_esm_1 = __importDefault(require("reveal.js/plugin/highlight/highlight.esm")); +exports.default = highlight_esm_1.default; diff --git a/dist/plugins/MarkdownPlugin.d.ts b/dist/plugins/MarkdownPlugin.d.ts new file mode 100644 index 0000000..ba1a0b9 --- /dev/null +++ b/dist/plugins/MarkdownPlugin.d.ts @@ -0,0 +1,2 @@ +import MarkdownPlugin from 'reveal.js/plugin/markdown/markdown.esm'; +export default MarkdownPlugin; diff --git a/dist/plugins/MarkdownPlugin.js b/dist/plugins/MarkdownPlugin.js new file mode 100644 index 0000000..d693fa8 --- /dev/null +++ b/dist/plugins/MarkdownPlugin.js @@ -0,0 +1,7 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const markdown_esm_1 = __importDefault(require("reveal.js/plugin/markdown/markdown.esm")); +exports.default = markdown_esm_1.default; diff --git a/dist/plugins/MathPlugin.d.ts b/dist/plugins/MathPlugin.d.ts new file mode 100644 index 0000000..46a2e0b --- /dev/null +++ b/dist/plugins/MathPlugin.d.ts @@ -0,0 +1,2 @@ +import MathPlugin from 'reveal.js/plugin/math/math.esm'; +export default MathPlugin; diff --git a/dist/plugins/MathPlugin.js b/dist/plugins/MathPlugin.js new file mode 100644 index 0000000..25f11c3 --- /dev/null +++ b/dist/plugins/MathPlugin.js @@ -0,0 +1,7 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const math_esm_1 = __importDefault(require("reveal.js/plugin/math/math.esm")); +exports.default = math_esm_1.default; diff --git a/dist/plugins/NotesPlugin.d.ts b/dist/plugins/NotesPlugin.d.ts new file mode 100644 index 0000000..542d01f --- /dev/null +++ b/dist/plugins/NotesPlugin.d.ts @@ -0,0 +1,2 @@ +import NotesPlugin from 'reveal.js/plugin/notes/notes.esm'; +export default NotesPlugin; diff --git a/dist/plugins/NotesPlugin.js b/dist/plugins/NotesPlugin.js new file mode 100644 index 0000000..9bf2cb2 --- /dev/null +++ b/dist/plugins/NotesPlugin.js @@ -0,0 +1,7 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const notes_esm_1 = __importDefault(require("reveal.js/plugin/notes/notes.esm")); +exports.default = notes_esm_1.default; diff --git a/dist/plugins/SearchPlugin.d.ts b/dist/plugins/SearchPlugin.d.ts new file mode 100644 index 0000000..b0f9e2e --- /dev/null +++ b/dist/plugins/SearchPlugin.d.ts @@ -0,0 +1,2 @@ +import SearchPlugin from 'reveal.js/plugin/search/search.esm'; +export default SearchPlugin; diff --git a/dist/plugins/SearchPlugin.js b/dist/plugins/SearchPlugin.js new file mode 100644 index 0000000..e778436 --- /dev/null +++ b/dist/plugins/SearchPlugin.js @@ -0,0 +1,7 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const search_esm_1 = __importDefault(require("reveal.js/plugin/search/search.esm")); +exports.default = search_esm_1.default; diff --git a/dist/plugins/ZoomPlugin.d.ts b/dist/plugins/ZoomPlugin.d.ts new file mode 100644 index 0000000..3effd0b --- /dev/null +++ b/dist/plugins/ZoomPlugin.d.ts @@ -0,0 +1,2 @@ +import ZoomPlugin from 'reveal.js/plugin/zoom/zoom.esm'; +export default ZoomPlugin; diff --git a/dist/plugins/ZoomPlugin.js b/dist/plugins/ZoomPlugin.js new file mode 100644 index 0000000..91fa256 --- /dev/null +++ b/dist/plugins/ZoomPlugin.js @@ -0,0 +1,7 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const zoom_esm_1 = __importDefault(require("reveal.js/plugin/zoom/zoom.esm")); +exports.default = zoom_esm_1.default; diff --git a/dist/plugins/highlight.d.ts b/dist/plugins/highlight.d.ts new file mode 100644 index 0000000..b5ce163 --- /dev/null +++ b/dist/plugins/highlight.d.ts @@ -0,0 +1,2 @@ +import HighlightPlugin from 'reveal.js/plugin/highlight/highlight.esm'; +export default HighlightPlugin; diff --git a/dist/plugins/highlight.js b/dist/plugins/highlight.js new file mode 100644 index 0000000..80a88ac --- /dev/null +++ b/dist/plugins/highlight.js @@ -0,0 +1,7 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const highlight_esm_1 = __importDefault(require("reveal.js/plugin/highlight/highlight.esm")); +exports.default = highlight_esm_1.default; diff --git a/dist/plugins/markdown.d.ts b/dist/plugins/markdown.d.ts new file mode 100644 index 0000000..ba1a0b9 --- /dev/null +++ b/dist/plugins/markdown.d.ts @@ -0,0 +1,2 @@ +import MarkdownPlugin from 'reveal.js/plugin/markdown/markdown.esm'; +export default MarkdownPlugin; diff --git a/dist/plugins/markdown.js b/dist/plugins/markdown.js new file mode 100644 index 0000000..d693fa8 --- /dev/null +++ b/dist/plugins/markdown.js @@ -0,0 +1,7 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const markdown_esm_1 = __importDefault(require("reveal.js/plugin/markdown/markdown.esm")); +exports.default = markdown_esm_1.default; diff --git a/dist/plugins/math.d.ts b/dist/plugins/math.d.ts new file mode 100644 index 0000000..46a2e0b --- /dev/null +++ b/dist/plugins/math.d.ts @@ -0,0 +1,2 @@ +import MathPlugin from 'reveal.js/plugin/math/math.esm'; +export default MathPlugin; diff --git a/dist/plugins/math.js b/dist/plugins/math.js new file mode 100644 index 0000000..25f11c3 --- /dev/null +++ b/dist/plugins/math.js @@ -0,0 +1,7 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const math_esm_1 = __importDefault(require("reveal.js/plugin/math/math.esm")); +exports.default = math_esm_1.default; diff --git a/dist/plugins/notes.d.ts b/dist/plugins/notes.d.ts new file mode 100644 index 0000000..542d01f --- /dev/null +++ b/dist/plugins/notes.d.ts @@ -0,0 +1,2 @@ +import NotesPlugin from 'reveal.js/plugin/notes/notes.esm'; +export default NotesPlugin; diff --git a/dist/plugins/notes.js b/dist/plugins/notes.js new file mode 100644 index 0000000..9bf2cb2 --- /dev/null +++ b/dist/plugins/notes.js @@ -0,0 +1,7 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const notes_esm_1 = __importDefault(require("reveal.js/plugin/notes/notes.esm")); +exports.default = notes_esm_1.default; diff --git a/dist/plugins/search.d.ts b/dist/plugins/search.d.ts new file mode 100644 index 0000000..b0f9e2e --- /dev/null +++ b/dist/plugins/search.d.ts @@ -0,0 +1,2 @@ +import SearchPlugin from 'reveal.js/plugin/search/search.esm'; +export default SearchPlugin; diff --git a/dist/plugins/search.js b/dist/plugins/search.js new file mode 100644 index 0000000..e778436 --- /dev/null +++ b/dist/plugins/search.js @@ -0,0 +1,7 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const search_esm_1 = __importDefault(require("reveal.js/plugin/search/search.esm")); +exports.default = search_esm_1.default; diff --git a/dist/plugins/zoom.d.ts b/dist/plugins/zoom.d.ts new file mode 100644 index 0000000..3effd0b --- /dev/null +++ b/dist/plugins/zoom.d.ts @@ -0,0 +1,2 @@ +import ZoomPlugin from 'reveal.js/plugin/zoom/zoom.esm'; +export default ZoomPlugin; diff --git a/dist/plugins/zoom.js b/dist/plugins/zoom.js new file mode 100644 index 0000000..91fa256 --- /dev/null +++ b/dist/plugins/zoom.js @@ -0,0 +1,7 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const zoom_esm_1 = __importDefault(require("reveal.js/plugin/zoom/zoom.esm")); +exports.default = zoom_esm_1.default; diff --git a/dist/types.d.ts b/dist/types.d.ts new file mode 100644 index 0000000..e3a562a --- /dev/null +++ b/dist/types.d.ts @@ -0,0 +1,7 @@ +export declare type TransitionAtoms = 'none' | 'fade' | 'slide' | 'convex' | 'concave' | 'zoom'; +export declare type ActiveTransitions = Exclude; +export declare type TransitionIn = `${ActiveTransitions}-in`; +export declare type TransitionOut = `${ActiveTransitions}-out`; +export declare type Transitions = TransitionAtoms | `${TransitionIn} ${TransitionOut}`; +export declare type TransitionSpeed = 'default' | 'fast' | 'slow'; +export declare type BackgroundRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'initial' | 'inherit'; diff --git a/dist/types.js b/dist/types.js new file mode 100644 index 0000000..c8ad2e5 --- /dev/null +++ b/dist/types.js @@ -0,0 +1,2 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); diff --git a/index.esm.js b/index.esm.js index 70ca90a..5d61033 100644 --- a/index.esm.js +++ b/index.esm.js @@ -1,21 +1,252 @@ -import React, { useEffect } from 'react'; +import React, { createElement, createContext, useState, useEffect, useContext } from 'react'; +import Reveal from 'reveal.js'; +import 'reveal.js/dist/reveal.css'; +import HighlightPlugin$1 from 'reveal.js/plugin/highlight/highlight.esm'; +import MathPlugin$1 from 'reveal.js/plugin/math/math.esm'; +import MarkdownPlugin$1 from 'reveal.js/plugin/markdown/markdown.esm'; +import NotesPlugin$1 from 'reveal.js/plugin/notes/notes.esm'; +import SearchPlugin$1 from 'reveal.js/plugin/search/search.esm'; +import ZoomPlugin$1 from 'reveal.js/plugin/zoom/zoom.esm'; + +function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +} -function _typeof(obj) { - "@babel/helpers - typeof"; +function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; - if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { - _typeof = function (obj) { - return typeof obj; - }; - } else { - _typeof = function (obj) { - return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; - }; + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); +} + +function ownKeys(object, enumerableOnly) { + var keys = Object.keys(object); + + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + if (enumerableOnly) symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + }); + keys.push.apply(keys, symbols); + } + + return keys; +} + +function _objectSpread2(target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i] != null ? arguments[i] : {}; + + if (i % 2) { + ownKeys(Object(source), true).forEach(function (key) { + _defineProperty(target, key, source[key]); + }); + } else if (Object.getOwnPropertyDescriptors) { + Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); + } else { + ownKeys(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); + } + } + + return target; +} + +function _objectWithoutPropertiesLoose(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + return target; +} + +function _objectWithoutProperties(source, excluded) { + if (source == null) return {}; + + var target = _objectWithoutPropertiesLoose(source, excluded); + + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } } - return _typeof(obj); + return target; } +function _slicedToArray(arr, i) { + return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); +} + +function _arrayWithHoles(arr) { + if (Array.isArray(arr)) return arr; +} + +function _iterableToArrayLimit(arr, i) { + if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; + + try { + for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); + + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"] != null) _i["return"](); + } finally { + if (_d) throw _e; + } + } + + return _arr; +} + +function _unsupportedIterableToArray(o, minLen) { + if (!o) return; + if (typeof o === "string") return _arrayLikeToArray(o, minLen); + var n = Object.prototype.toString.call(o).slice(8, -1); + if (n === "Object" && o.constructor) n = o.constructor.name; + if (n === "Map" || n === "Set") return Array.from(o); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); +} + +function _arrayLikeToArray(arr, len) { + if (len == null || len > arr.length) len = arr.length; + + for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; + + return arr2; +} + +function _nonIterableRest() { + throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +} + +function getClassNameProps(baseProps) { + var className = baseProps.className, + fragment = baseProps.fragment, + fragmentStyle = baseProps.fragmentStyle, + fitText = baseProps.fitText, + props = _objectWithoutProperties(baseProps, ["className", "fragment", "fragmentStyle", "fitText"]); + + var classes = className ? [className] : []; + if (fragment) classes.push("fragment"); + if (fitText) classes.push("r-fit-text"); + if (fragmentStyle) classes.push(fragmentStyle); + if (!classes.length) return props; + return _objectSpread2(_objectSpread2({}, props), {}, { + className: classes.join(' ') + }); +} +function generateBaseComponent(component) { + var Component = function Component(props) { + return BaseComponent(_objectSpread2(_objectSpread2({}, props), {}, { + component: component + })); + }; + + Component.displayName = "".concat(component[0].toUpperCase()).concat(component.slice(1)); + return Component; +} +function BaseComponent(_ref) { + var component = _ref.component, + id = _ref.id, + fragmentIndex = _ref.fragmentIndex, + children = _ref.children, + props = _objectWithoutProperties(_ref, ["component", "id", "fragmentIndex", "children"]); + + return /*#__PURE__*/createElement(component, _objectSpread2(_objectSpread2({}, getClassNameProps(props)), {}, { + 'data-id': id, + id: id, + 'data-fragment-index': fragmentIndex, + children: children + })); +} + +var componentsToGenerate = { + h1: generateBaseComponent('h1'), + h2: generateBaseComponent('h2'), + h3: generateBaseComponent('h3'), + h4: generateBaseComponent('h4'), + h5: generateBaseComponent('h5'), + h6: generateBaseComponent('h6'), + blockquote: generateBaseComponent('blockquote'), + div: generateBaseComponent('div'), + figcaption: generateBaseComponent('figcaption'), + figure: generateBaseComponent('figure'), + footer: generateBaseComponent('footer'), + header: generateBaseComponent('header'), + li: generateBaseComponent('li'), + main: generateBaseComponent('main'), + ol: generateBaseComponent('ol'), + p: generateBaseComponent('p'), + span: generateBaseComponent('span'), + ul: generateBaseComponent('ul') +}; +var H1 = componentsToGenerate.h1; +var H2 = componentsToGenerate.h2; +var H3 = componentsToGenerate.h3; +var H4 = componentsToGenerate.h4; +var H5 = componentsToGenerate.h5; +var H6 = componentsToGenerate.h6; +var BlockQuote = componentsToGenerate.blockquote; +var Div = componentsToGenerate.div; +var FigCaption = componentsToGenerate.figcaption; +var Figure = componentsToGenerate.figure; +var Footer = componentsToGenerate.footer; +var Header = componentsToGenerate.header; +var Li = componentsToGenerate.li; +var Main = componentsToGenerate.main; +var Ol = componentsToGenerate.ol; +var P = componentsToGenerate.p; +var Span = componentsToGenerate.span; +var Ul = componentsToGenerate.ul; + var formatMap = { '3gp': 'audio/3gp', aac: 'audio/aac', @@ -32,499 +263,155 @@ var formatMap = { }; function Audio(_ref) { - var _ref$id = _ref.id, - id = _ref$id === void 0 ? undefined : _ref$id, - _ref$autoplay = _ref.autoplay, - autoplay = _ref$autoplay === void 0 ? undefined : _ref$autoplay, - _ref$className = _ref.className, - className = _ref$className === void 0 ? undefined : _ref$className, - _ref$controls = _ref.controls, - controls = _ref$controls === void 0 ? undefined : _ref$controls, - _ref$fragment = _ref.fragment, - fragment = _ref$fragment === void 0 ? false : _ref$fragment, - _ref$fragmentIndex = _ref.fragmentIndex, - fragmentIndex = _ref$fragmentIndex === void 0 ? undefined : _ref$fragmentIndex, - _ref$fragmentStyle = _ref.fragmentStyle, - fragmentStyle = _ref$fragmentStyle === void 0 ? undefined : _ref$fragmentStyle, - _ref$lazy = _ref.lazy, - lazy = _ref$lazy === void 0 ? undefined : _ref$lazy, - _ref$loop = _ref.loop, - loop = _ref$loop === void 0 ? undefined : _ref$loop, - _ref$muted = _ref.muted, - muted = _ref$muted === void 0 ? undefined : _ref$muted, - _ref$preload = _ref.preload, - preload = _ref$preload === void 0 ? undefined : _ref$preload, - src = _ref.src; - - if (_typeof(src) === 'object') { - return /*#__PURE__*/React.createElement("audio", { + var id = _ref.id, + autoplay = _ref.autoplay, + className = _ref.className, + controls = _ref.controls, + fragment = _ref.fragment, + fragmentIndex = _ref.fragmentIndex, + fragmentStyle = _ref.fragmentStyle, + lazy = _ref.lazy, + loop = _ref.loop, + muted = _ref.muted, + preload = _ref.preload, + src = _ref.src, + props = _objectWithoutProperties(_ref, ["id", "autoplay", "className", "controls", "fragment", "fragmentIndex", "fragmentStyle", "lazy", "loop", "muted", "preload", "src"]); + + if (Array.isArray(src)) { + return /*#__PURE__*/React.createElement("audio", _extends({}, getClassNameProps(props), { "data-id": id, id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), "data-autoplay": autoplay, controls: controls, muted: muted, loop: loop, "data-fragment-index": fragmentIndex - }, src.forEach(function (element) { + }), src.map(function (element) { + var _$exec; + return /*#__PURE__*/React.createElement("source", { src: lazy ? false : element, "data-src": lazy ? element : false, "data-preload": preload, - type: formatMap[/\.[^.]+$/.exec(element)] + type: formatMap[(_$exec = /\.[^.]+$/.exec(element)) === null || _$exec === void 0 ? void 0 : _$exec[0]] || 'mp3' }); })); } - return /*#__PURE__*/React.createElement("audio", { + return /*#__PURE__*/React.createElement("audio", _extends({}, getClassNameProps(props), { "data-id": id, id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), "data-autoplay": autoplay, - src: lazy ? false : src, + src: lazy ? '' : src, "data-src": lazy ? src : false, "data-preload": preload, controls: controls, muted: muted, loop: loop, "data-fragment-index": fragmentIndex - }); -} - -function BlockQuote(_ref) { - var _ref$id = _ref.id, - id = _ref$id === void 0 ? undefined : _ref$id, - _ref$className = _ref.className, - className = _ref$className === void 0 ? undefined : _ref$className, - _ref$fragment = _ref.fragment, - fragment = _ref$fragment === void 0 ? false : _ref$fragment, - _ref$fragmentStyle = _ref.fragmentStyle, - fragmentStyle = _ref$fragmentStyle === void 0 ? undefined : _ref$fragmentStyle, - _ref$fragmentIndex = _ref.fragmentIndex, - fragmentIndex = _ref$fragmentIndex === void 0 ? undefined : _ref$fragmentIndex, - children = _ref.children; - return /*#__PURE__*/React.createElement("blockquote", { - "data-id": id, - id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - "data-fragment-index": fragmentIndex - }, children); + })); } function Code(_ref) { - var _ref$id = _ref.id, - id = _ref$id === void 0 ? undefined : _ref$id, + var id = _ref.id, children = _ref.children, - _ref$className = _ref.className, - className = _ref$className === void 0 ? undefined : _ref$className, - _ref$escape = _ref.escape, - escape = _ref$escape === void 0 ? undefined : _ref$escape, - _ref$fragment = _ref.fragment, - fragment = _ref$fragment === void 0 ? false : _ref$fragment, - _ref$fragmentStyle = _ref.fragmentStyle, - fragmentStyle = _ref$fragmentStyle === void 0 ? undefined : _ref$fragmentStyle, - _ref$fragmentIndex = _ref.fragmentIndex, - fragmentIndex = _ref$fragmentIndex === void 0 ? undefined : _ref$fragmentIndex, - _ref$lineNumbers = _ref.lineNumbers, - lineNumbers = _ref$lineNumbers === void 0 ? undefined : _ref$lineNumbers, - _ref$noTrim = _ref.noTrim, - noTrim = _ref$noTrim === void 0 ? undefined : _ref$noTrim; - return /*#__PURE__*/React.createElement("pre", { - "data-id": id, + language = _ref.language, + escape = _ref.escape, + fragmentIndex = _ref.fragmentIndex, + lineNumbers = _ref.lineNumbers, + noTrim = _ref.noTrim, + autoAnimateId = _ref.autoAnimateId, + props = _objectWithoutProperties(_ref, ["id", "children", "language", "escape", "fragmentIndex", "lineNumbers", "noTrim", "autoAnimateId"]); + + return /*#__PURE__*/React.createElement("pre", _extends({}, getClassNameProps(props), { + "data-id": autoAnimateId || id, id: id, - "data-fragment-index": fragmentIndex, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : '') - }, /*#__PURE__*/React.createElement("code", { - "data-noexcape": !escape, + "data-fragment-index": fragmentIndex + }), /*#__PURE__*/React.createElement("code", { + className: language, + "data-noescape": !escape, "data-trim": !noTrim, - "data-line-numbers": lineNumbers + "data-line-numbers": autoAnimateId ? lineNumbers || true : lineNumbers }, children.code)); } -function Div(_ref) { - var _ref$id = _ref.id, - id = _ref$id === void 0 ? undefined : _ref$id, - _ref$className = _ref.className, - className = _ref$className === void 0 ? undefined : _ref$className, - _ref$fragment = _ref.fragment, - fragment = _ref$fragment === void 0 ? false : _ref$fragment, - _ref$fragmentStyle = _ref.fragmentStyle, - fragmentStyle = _ref$fragmentStyle === void 0 ? undefined : _ref$fragmentStyle, - _ref$fragmentIndex = _ref.fragmentIndex, - fragmentIndex = _ref$fragmentIndex === void 0 ? undefined : _ref$fragmentIndex, - children = _ref.children; - return /*#__PURE__*/React.createElement("div", { - "data-id": id, - id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - "data-fragment-index": fragmentIndex - }, children); -} - -function FigCaption(_ref) { - var _ref$id = _ref.id, - id = _ref$id === void 0 ? undefined : _ref$id, - _ref$className = _ref.className, - className = _ref$className === void 0 ? undefined : _ref$className, - _ref$fragment = _ref.fragment, - fragment = _ref$fragment === void 0 ? false : _ref$fragment, - _ref$fragmentStyle = _ref.fragmentStyle, - fragmentStyle = _ref$fragmentStyle === void 0 ? undefined : _ref$fragmentStyle, - _ref$fragmentIndex = _ref.fragmentIndex, - fragmentIndex = _ref$fragmentIndex === void 0 ? undefined : _ref$fragmentIndex, - children = _ref.children; - return /*#__PURE__*/React.createElement("figcaption", { - "data-id": id, - id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - "data-fragment-index": fragmentIndex - }, children); -} - -function Figure(_ref) { - var _ref$id = _ref.id, - id = _ref$id === void 0 ? undefined : _ref$id, - _ref$className = _ref.className, - className = _ref$className === void 0 ? undefined : _ref$className, - _ref$fragment = _ref.fragment, - fragment = _ref$fragment === void 0 ? false : _ref$fragment, - _ref$fragmentStyle = _ref.fragmentStyle, - fragmentStyle = _ref$fragmentStyle === void 0 ? undefined : _ref$fragmentStyle, - _ref$fragmentIndex = _ref.fragmentIndex, - fragmentIndex = _ref$fragmentIndex === void 0 ? undefined : _ref$fragmentIndex, - children = _ref.children; - return /*#__PURE__*/React.createElement("figure", { - "data-id": id, - id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - "data-fragment-index": fragmentIndex - }, children); -} - -function Footer(_ref) { - var _ref$id = _ref.id, - id = _ref$id === void 0 ? undefined : _ref$id, - _ref$className = _ref.className, - className = _ref$className === void 0 ? undefined : _ref$className, - _ref$fragment = _ref.fragment, - fragment = _ref$fragment === void 0 ? false : _ref$fragment, - _ref$fragmentStyle = _ref.fragmentStyle, - fragmentStyle = _ref$fragmentStyle === void 0 ? undefined : _ref$fragmentStyle, - _ref$fragmentIndex = _ref.fragmentIndex, - fragmentIndex = _ref$fragmentIndex === void 0 ? undefined : _ref$fragmentIndex, - children = _ref.children; - return /*#__PURE__*/React.createElement("footer", { - "data-id": id, - id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - "data-fragment-index": fragmentIndex - }, children); -} - -function H(_ref) { - var _ref$id = _ref.id, - id = _ref$id === void 0 ? undefined : _ref$id, - _ref$className = _ref.className, - className = _ref$className === void 0 ? undefined : _ref$className, - _ref$fragment = _ref.fragment, - fragment = _ref$fragment === void 0 ? false : _ref$fragment, - _ref$fragmentStyle = _ref.fragmentStyle, - fragmentStyle = _ref$fragmentStyle === void 0 ? undefined : _ref$fragmentStyle, - _ref$fragmentIndex = _ref.fragmentIndex, - fragmentIndex = _ref$fragmentIndex === void 0 ? undefined : _ref$fragmentIndex, - _ref$size = _ref.size, - size = _ref$size === void 0 ? '1' : _ref$size, - children = _ref.children; - - if (size === '1') { - return /*#__PURE__*/React.createElement("h1", { - "data-id": id, - id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - "data-fragment-index": fragmentIndex - }, children); - } - - if (size === '2') { - return /*#__PURE__*/React.createElement("h2", { - "data-id": id, - id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - "data-fragment-index": fragmentIndex - }, children); - } - - if (size === '3') { - return /*#__PURE__*/React.createElement("h3", { - "data-id": id, - id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - "data-fragment-index": fragmentIndex - }, children); - } - - if (size === '4') { - return /*#__PURE__*/React.createElement("h4", { - "data-id": id, - id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - "data-fragment-index": fragmentIndex - }, children); - } - - if (size === '5') { - return /*#__PURE__*/React.createElement("h5", { - "data-id": id, - id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - "data-fragment-index": fragmentIndex - }, children); - } - - if (size === '6') { - return /*#__PURE__*/React.createElement("h6", { - "data-id": id, - id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - "data-fragment-index": fragmentIndex - }, children); - } -} - -function Header(_ref) { - var _ref$id = _ref.id, - id = _ref$id === void 0 ? undefined : _ref$id, - _ref$className = _ref.className, - className = _ref$className === void 0 ? undefined : _ref$className, - _ref$fragment = _ref.fragment, - fragment = _ref$fragment === void 0 ? false : _ref$fragment, - _ref$fragmentStyle = _ref.fragmentStyle, - fragmentStyle = _ref$fragmentStyle === void 0 ? undefined : _ref$fragmentStyle, - _ref$fragmentIndex = _ref.fragmentIndex, - fragmentIndex = _ref$fragmentIndex === void 0 ? undefined : _ref$fragmentIndex, - children = _ref.children; - return /*#__PURE__*/React.createElement("header", { - "data-id": id, - id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - "data-fragment-index": fragmentIndex - }, children); -} - function IFrame(_ref) { - var _ref$id = _ref.id, - id = _ref$id === void 0 ? undefined : _ref$id, - _ref$className = _ref.className, - className = _ref$className === void 0 ? undefined : _ref$className, - _ref$fragment = _ref.fragment, - fragment = _ref$fragment === void 0 ? false : _ref$fragment, - _ref$fragmentStyle = _ref.fragmentStyle, - fragmentStyle = _ref$fragmentStyle === void 0 ? undefined : _ref$fragmentStyle, - _ref$fragmentIndex = _ref.fragmentIndex, - fragmentIndex = _ref$fragmentIndex === void 0 ? undefined : _ref$fragmentIndex, - _ref$height = _ref.height, - height = _ref$height === void 0 ? undefined : _ref$height, - _ref$lazy = _ref.lazy, - lazy = _ref$lazy === void 0 ? undefined : _ref$lazy, - _ref$preload = _ref.preload, - preload = _ref$preload === void 0 ? undefined : _ref$preload, + var id = _ref.id, + fragmentIndex = _ref.fragmentIndex, + height = _ref.height, + lazy = _ref.lazy, + preload = _ref.preload, src = _ref.src, - _ref$width = _ref.width, - width = _ref$width === void 0 ? undefined : _ref$width; - return /*#__PURE__*/React.createElement("iframe", { + width = _ref.width, + props = _objectWithoutProperties(_ref, ["id", "fragmentIndex", "height", "lazy", "preload", "src", "width"]); + + return /*#__PURE__*/React.createElement("iframe", _extends({}, getClassNameProps(props), { "data-id": id, id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - src: lazy ? false : src, + src: lazy ? undefined : src, "data-src": lazy ? src : false, "data-preload": preload, width: width, height: height, "data-fragment-index": fragmentIndex - }); + })); } function Image(_ref) { - var _ref$id = _ref.id, - id = _ref$id === void 0 ? undefined : _ref$id, - _ref$alt = _ref.alt, - alt = _ref$alt === void 0 ? undefined : _ref$alt, - _ref$className = _ref.className, - className = _ref$className === void 0 ? undefined : _ref$className, - _ref$fragment = _ref.fragment, - fragment = _ref$fragment === void 0 ? false : _ref$fragment, - _ref$fragmentStyle = _ref.fragmentStyle, - fragmentStyle = _ref$fragmentStyle === void 0 ? undefined : _ref$fragmentStyle, - _ref$fragmentIndex = _ref.fragmentIndex, - fragmentIndex = _ref$fragmentIndex === void 0 ? undefined : _ref$fragmentIndex, - _ref$height = _ref.height, - height = _ref$height === void 0 ? undefined : _ref$height, + var id = _ref.id, + alt = _ref.alt, + fragmentIndex = _ref.fragmentIndex, + height = _ref.height, src = _ref.src, - _ref$width = _ref.width, - width = _ref$width === void 0 ? undefined : _ref$width; - return /*#__PURE__*/React.createElement("img", { + width = _ref.width, + props = _objectWithoutProperties(_ref, ["id", "alt", "fragmentIndex", "height", "src", "width"]); + + return /*#__PURE__*/React.createElement("img", _extends({}, getClassNameProps(props), { "data-id": id, id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), src: src, alt: alt, width: width, height: height, "data-fragment-index": fragmentIndex - }); -} - -function Li(_ref) { - var _ref$id = _ref.id, - id = _ref$id === void 0 ? undefined : _ref$id, - _ref$className = _ref.className, - className = _ref$className === void 0 ? undefined : _ref$className, - _ref$fragment = _ref.fragment, - fragment = _ref$fragment === void 0 ? false : _ref$fragment, - _ref$fragmentStyle = _ref.fragmentStyle, - fragmentStyle = _ref$fragmentStyle === void 0 ? undefined : _ref$fragmentStyle, - _ref$fragmentIndex = _ref.fragmentIndex, - fragmentIndex = _ref$fragmentIndex === void 0 ? undefined : _ref$fragmentIndex, - children = _ref.children; - return /*#__PURE__*/React.createElement("li", { - "data-id": id, - id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - "data-fragment-index": fragmentIndex - }, children); + })); } function Link(_ref) { - var _ref$id = _ref.id, - id = _ref$id === void 0 ? undefined : _ref$id, + var id = _ref.id, children = _ref.children, - _ref$className = _ref.className, - className = _ref$className === void 0 ? undefined : _ref$className, - _ref$fragment = _ref.fragment, - fragment = _ref$fragment === void 0 ? false : _ref$fragment, - _ref$fragmentStyle = _ref.fragmentStyle, - fragmentStyle = _ref$fragmentStyle === void 0 ? undefined : _ref$fragmentStyle, - _ref$fragmentIndex = _ref.fragmentIndex, - fragmentIndex = _ref$fragmentIndex === void 0 ? undefined : _ref$fragmentIndex, - _ref$href = _ref.href, - href = _ref$href === void 0 ? undefined : _ref$href, - _ref$slide = _ref.slide, - slide = _ref$slide === void 0 ? undefined : _ref$slide; - return /*#__PURE__*/React.createElement("a", { - "data-id": id, - id: id, - href: href || "#/".concat(typeof slide === 'string' ? parseInt(slide, 10) - 1 : "".concat(parseInt(slide[0], 10) - 1, "/").concat(parseInt(slide[1], 10) - 1)), - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - "data-fragment-index": fragmentIndex - }, children); -} + fragmentIndex = _ref.fragmentIndex, + href = _ref.href, + slide = _ref.slide, + props = _objectWithoutProperties(_ref, ["id", "children", "fragmentIndex", "href", "slide"]); -function Main(_ref) { - var _ref$id = _ref.id, - id = _ref$id === void 0 ? undefined : _ref$id, - _ref$className = _ref.className, - className = _ref$className === void 0 ? undefined : _ref$className, - _ref$fragment = _ref.fragment, - fragment = _ref$fragment === void 0 ? false : _ref$fragment, - _ref$fragmentStyle = _ref.fragmentStyle, - fragmentStyle = _ref$fragmentStyle === void 0 ? undefined : _ref$fragmentStyle, - _ref$fragmentIndex = _ref.fragmentIndex, - fragmentIndex = _ref$fragmentIndex === void 0 ? undefined : _ref$fragmentIndex, - children = _ref.children; - return /*#__PURE__*/React.createElement("main", { + return /*#__PURE__*/React.createElement("a", _extends({}, getClassNameProps(props), { "data-id": id, id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), + href: href || slide && "#/".concat(typeof slide === 'string' ? parseInt(slide, 10) - 1 : "".concat(parseInt(slide[0], 10) - 1, "/").concat(parseInt(slide[1], 10) - 1)), "data-fragment-index": fragmentIndex - }, children); + }), children); } -function Note(_ref) { - var children = _ref.children; - return /*#__PURE__*/React.createElement("aside", { +function Note(props) { + return /*#__PURE__*/React.createElement("aside", _extends({}, props, { className: "notes" - }, children); + })); } -function Ol(_ref) { - var _ref$id = _ref.id, - id = _ref$id === void 0 ? undefined : _ref$id, - _ref$className = _ref.className, - className = _ref$className === void 0 ? undefined : _ref$className, - _ref$fragment = _ref.fragment, - fragment = _ref$fragment === void 0 ? false : _ref$fragment, - _ref$fragmentStyle = _ref.fragmentStyle, - fragmentStyle = _ref$fragmentStyle === void 0 ? undefined : _ref$fragmentStyle, - _ref$fragmentIndex = _ref.fragmentIndex, - fragmentIndex = _ref$fragmentIndex === void 0 ? undefined : _ref$fragmentIndex, - children = _ref.children; - return /*#__PURE__*/React.createElement("ol", { - "data-id": id, - id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - "data-fragment-index": fragmentIndex - }, children); -} - -function P(_ref) { - var _ref$id = _ref.id, - id = _ref$id === void 0 ? undefined : _ref$id, - _ref$className = _ref.className, - className = _ref$className === void 0 ? undefined : _ref$className, - _ref$fragment = _ref.fragment, - fragment = _ref$fragment === void 0 ? false : _ref$fragment, - _ref$fragmentStyle = _ref.fragmentStyle, - fragmentStyle = _ref$fragmentStyle === void 0 ? undefined : _ref$fragmentStyle, - _ref$fragmentIndex = _ref.fragmentIndex, - fragmentIndex = _ref$fragmentIndex === void 0 ? undefined : _ref$fragmentIndex, +var defaultContextValue = { + reveal: null, + readyPromise: null +}; +var RevealContext = /*#__PURE__*/createContext(defaultContextValue); +function RevealProvider(_ref) { + var reveal = _ref.reveal, children = _ref.children; - return /*#__PURE__*/React.createElement("p", { - "data-id": id, - id: id, - className: className + (fragment ? ' fragment' : '') + (fragmentStyle ? " ".concat(fragmentStyle) : ''), - "data-fragment-index": fragmentIndex + return /*#__PURE__*/React.createElement(RevealContext.Provider, { + value: reveal }, children); } -/*! -* reveal.js 4.0.2 -* https://revealjs.com -* MIT licensed -* -* Copyright (C) 2020 Hakim El Hattab, https://hakim.se -*/ -var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function t(e,t,i){return e(i={path:t,exports:{},require:function(e,t){return function(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}(null==t&&i.path)}},i.exports),i.exports}var i,n=function(e){return e&&e.Math==Math&&e},a=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof e&&e)||Function("return this")(),s={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectList:0,DOMRectList:0,DOMStringList:0,DOMTokenList:1,DataTransferItemList:0,FileList:0,HTMLAllCollection:0,HTMLCollection:0,HTMLFormElement:0,HTMLSelectElement:0,MediaList:0,MimeTypeArray:0,NamedNodeMap:0,NodeList:1,PaintRequestList:0,Plugin:0,PluginArray:0,SVGLengthList:0,SVGNumberList:0,SVGPathSegList:0,SVGPointList:0,SVGStringList:0,SVGTransformList:0,SourceBufferList:0,StyleSheetList:0,TextTrackCueList:0,TextTrackList:0,TouchList:0},r=function(e){try{return !!e()}catch(e){return !0}},o={}.toString,l=function(e){return o.call(e).slice(8,-1)},d="".split,c=r((function(){return !Object("z").propertyIsEnumerable(0)}))?function(e){return "String"==l(e)?d.call(e,""):Object(e)}:Object,u=function(e){if(null==e)throw TypeError("Can't call method on "+e);return e},h=function(e){return c(u(e))},g=!r((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]})),v=function(e){return "object"==typeof e?null!==e:"function"==typeof e},p=a.document,f=v(p)&&v(p.createElement),m=function(e){return f?p.createElement(e):{}},b=!g&&!r((function(){return 7!=Object.defineProperty(m("div"),"a",{get:function(){return 7}}).a})),y=function(e){if(!v(e))throw TypeError(String(e)+" is not an object");return e},w=function(e,t){if(!v(e))return e;var i,n;if(t&&"function"==typeof(i=e.toString)&&!v(n=i.call(e)))return n;if("function"==typeof(i=e.valueOf)&&!v(n=i.call(e)))return n;if(!t&&"function"==typeof(i=e.toString)&&!v(n=i.call(e)))return n;throw TypeError("Can't convert object to primitive value")},R=Object.defineProperty,E={f:g?R:function(e,t,i){if(y(e),t=w(t,!0),y(i),b)try{return R(e,t,i)}catch(e){}if("get"in i||"set"in i)throw TypeError("Accessors not supported");return "value"in i&&(e[t]=i.value),e}},S=function(e,t){return {enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}},A=g?function(e,t,i){return E.f(e,t,S(1,i))}:function(e,t,i){return e[t]=i,e},k=function(e,t){try{A(a,e,t);}catch(i){a[e]=t;}return t},L=a["__core-js_shared__"]||k("__core-js_shared__",{}),x=t((function(e){(e.exports=function(e,t){return L[e]||(L[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.6.5",mode:"global",copyright:"© 2020 Denis Pushkarev (zloirock.ru)"});})),C={}.hasOwnProperty,P$1=function(e,t){return C.call(e,t)},N=0,M=Math.random(),I=function(e){return "Symbol("+String(void 0===e?"":e)+")_"+(++N+M).toString(36)},T=!!Object.getOwnPropertySymbols&&!r((function(){return !String(Symbol())})),D=T&&!Symbol.sham&&"symbol"==typeof Symbol.iterator,O=x("wks"),H$1=a.Symbol,B=D?H$1:H$1&&H$1.withoutSetter||I,U=function(e){return P$1(O,e)||(T&&P$1(H$1,e)?O[e]=H$1[e]:O[e]=B("Symbol."+e)),O[e]},j=Math.ceil,z=Math.floor,q=function(e){return isNaN(e=+e)?0:(e>0?z:j)(e)},F=Math.min,_=function(e){return e>0?F(q(e),9007199254740991):0},W=Math.max,V=Math.min,K=function(e){return function(t,i,n){var a,s=h(t),r=_(s.length),o=function(e,t){var i=q(e);return i<0?W(i+t,0):V(i,t)}(n,r);if(e&&i!=i){for(;r>o;)if((a=s[o++])!=a)return !0}else for(;r>o;o++)if((e||o in s)&&s[o]===i)return e||o||0;return !e&&-1}},X={includes:K(!0),indexOf:K(!1)},$={},Y=X.indexOf,G=function(e,t){var i,n=h(e),a=0,s=[];for(i in n)!P$1($,i)&&P$1(n,i)&&s.push(i);for(;t.length>a;)P$1(n,i=t[a++])&&(~Y(s,i)||s.push(i));return s},J=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"],Q=Object.keys||function(e){return G(e,J)},Z=g?Object.defineProperties:function(e,t){y(e);for(var i,n=Q(t),a=n.length,s=0;a>s;)E.f(e,i=n[s++],t[i]);return e},ee=a,te=function(e){return "function"==typeof e?e:void 0},ie=function(e,t){return arguments.length<2?te(ee[e])||te(a[e]):ee[e]&&ee[e][t]||a[e]&&a[e][t]},ne=ie("document","documentElement"),ae=x("keys"),se=function(e){return ae[e]||(ae[e]=I(e))},re=se("IE_PROTO"),oe=function(){},le=function(e){return "