mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-12 01:25:17 +02:00
Code Issues Releases Wiki Activity

initial react wrapper exploration

Browse Source
This commit is contained in:
Hakim El Hattab
2024-03-25 10:09:49 +01:00
parent 6410c756ea
commit 27e1dfbc1e
17 changed files with 2975 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/reveal.esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.esm.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
js/reveal.js
View File

@@ -1389,6 +1389,8 @@ export default function( revealElement, options ) {
*/ */
function slide( h, v, f, origin ) { function slide( h, v, f, origin ) {
if( Reveal.isReady() === false ) return;
// Dispatch an event before the slide // Dispatch an event before the slide
const slidechange = dispatchEvent({ const slidechange = dispatchEvent({
type: 'beforeslidechange', type: 'beforeslidechange',
@@ -1653,6 +1655,8 @@ export default function( revealElement, options ) {
*/ */
function sync() { function sync() {
if( Reveal.isReady() === false ) return;
// Subscribe to input // Subscribe to input
removeEventListeners(); removeEventListeners();
addEventListeners(); addEventListeners();

3
package.json
View File

@@ -10,7 +10,8 @@
"scripts": { "scripts": {
"test": "gulp test", "test": "gulp test",
"start": "gulp serve", "start": "gulp serve",
"build": "gulp build" "build": "gulp build",
"dev:react": "npm --prefix ./react run dev"
}, },
"author": { "author": {
"name": "Hakim El Hattab", "name": "Hakim El Hattab",

18
react/.eslintrc.cjs Normal file
View File

@@ -0,0 +1,18 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}

24
react/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

12
react/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>reveal.js/react</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/demo.tsx"></script>
</body>
</html>

2737
react/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

28
react/package.json Normal file
View File

@@ -0,0 +1,28 @@
{
"name": "reveal-js-react",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vitejs/plugin-react-swc": "^3.5.0",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"typescript": "^5.2.2",
"vite": "^5.2.0"
}
}

44
react/src/Reveal.tsx Normal file
View File

@@ -0,0 +1,44 @@
import '../../dist/reveal.css'
import '../../dist/theme/black.css'
import _Reveal from '../../dist/reveal.esm.js';
import { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
const Reveal = forwardRef((props: {children: React.ReactNode, [key: string]: any}, ref) => {
const {children, ...revealProps} = props;
const deckDivRef = useRef<HTMLDivElement>(null);
const deckRef = useRef<any>(null);
useImperativeHandle(ref, () => deckRef.current);
useEffect(() => {
// Prevents double initialization in strict mode
if (deckRef.current) return;
deckRef.current = new _Reveal(deckDivRef.current!, revealProps);
deckRef.current.initialize();
return () => {
try {
if (deckRef.current) {
deckRef.current.destroy();
deckRef.current = null;
}
} catch (e) {
console.warn("Reveal.js destroy call failed.");
}
};
}, []);
return (
// The presentation is sized based on the width and height of
// our parent element. Make sure the parent is not 0-height.
<div className="reveal" ref={deckDivRef}>
<div className="slides">
{children}
</div>
</div>
);
});
export default Reveal;

58
react/src/demo.tsx Normal file
View File

@@ -0,0 +1,58 @@
import React, { ReactElement, useEffect, useState } from 'react'
import ReactDOM from 'react-dom/client'
import Reveal from './Reveal.tsx'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<Demo2 />
</React.StrictMode>,
)
function Demo1() {
return (
<div style={{width: 600, height: 600}}>
<Reveal embedded={true}>
<section>slide 1</section>
<section>slide 2</section>
</Reveal>
</div>
);
}
function Demo2() {
const revealApiRef = React.useRef<any>(null);
const [slides, setSlides] = useState<string[]>([
'slide 1',
'slide 2',
]);
useEffect(() => {
if (revealApiRef.current) {
revealApiRef.current.sync();
// This should not be necessary, the sync() method needs to
// be revised to call updateSlides() internally.
revealApiRef.current.slide();
}
}, [slides]);
return (
<div style={{width: 600, height: 600}}>
<Reveal embedded={true} ref={revealApiRef}>
{slides.map((slide, i) => (
<section key={i}>
{slide}
</section>
))}
</Reveal>
<button onClick={() => {
setSlides([...slides, `slide ${slides.length + 1}`]);
}}>Append slide</button>
<button onClick={() => {
revealApiRef.current.next();
}}>Next slide</button>
</div>
);
}

1
react/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

25
react/tsconfig.json Normal file
View File

@@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

11
react/tsconfig.node.json Normal file
View File

@@ -0,0 +1,11 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"strict": true
},
"include": ["vite.config.ts"]
}

7
react/vite.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})