transpile with vite

apps/app/tsconfig.build.client.json

@@ -12,7 +12,7 @@
       "@growi/codemirror-textlint": ["../../packages/codemirror-textlint/src"],
       // "@growi/core": ["../../packages/core/src"],
       "@growi/hackmd": ["../../packages/hackmd/src"],
-      "@growi/presentation": ["../../packages/presentation/src"],
+      // "@growi/presentation": ["../../packages/presentation/src"],
       // "@growi/preset-themes": ["../../packages/preset-themes/src"],
       "@growi/remark-drawio": ["../../packages/remark-drawio/src"],
       "@growi/remark-growi-directive": ["../../packages/remark-growi-directive/src"],

apps/app/tsconfig.json

@@ -10,7 +10,7 @@
       "@growi/codemirror-textlint": ["../../packages/codemirror-textlint/src"],
       // "@growi/core": ["../../packages/core/src"],
       "@growi/hackmd": ["../../packages/hackmd/src"],
-      "@growi/presentation": ["../../packages/presentation/src"],
+      // "@growi/presentation": ["../../packages/presentation/src"],
       // "@growi/preset-themes": ["../../packages/preset-themes/src"],
       "@growi/remark-drawio": ["../../packages/remark-drawio/src"],
       "@growi/remark-growi-directive": ["../../packages/remark-growi-directive/src"],

packages/presentation/.gitignore

@@ -1 +1,2 @@
 /dist
+/types

packages/presentation/package.json

@@ -4,11 +4,19 @@
   "description": "GROWI plugin for presentation",
   "license": "MIT",
   "keywords": ["growi", "growi-plugin"],
-  "main": "dist/index.js",
-  "files": ["dist"],
+  "module": "dist/presentation.mjs",
+  "types": "types/index.d.ts",
+  "files": [
+    "dist",
+    "types"
+  ],
   "scripts": {
-    "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build": "run-p build:*",
+    "build:js": "vite build",
     "clean": "npx -y shx rm -rf dist",
+    "dev": "run-p dev:*",
+    "dev:js": "vite build --mode dev",
+    "watch": "run-p 'dev:js -w'",
     "lint:js": "eslint **/*.{js,jsx,ts,tsx}",
     "lint:styles": "stylelint --allow-empty-input src/**/*.scss src/**/*.css",
     "lint": "run-p lint:*",
@@ -21,9 +29,12 @@
     "@marp-team/marp-core": "^3.4.2",
     "@types/reveal.js": "^4.4.1",
     "eslint-plugin-regex": "^1.8.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "react-markdown": "^8.0.3",
     "reveal.js": "^4.4.0"
+  },
+  "peerDependencies": {
+    "next": "~12.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

packages/presentation/src/components/Presentation.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
 
-import Reveal from 'reveal.js';
+// import Reveal from 'reveal.js';
 
 import type { PresentationOptions } from '../consts';
 
 import { MARP_CONTAINER_CLASS_NAME, Slides } from './Slides';
 
-import 'reveal.js/dist/reveal.css';
+// import 'reveal.js/dist/reveal.css';
 import './Presentation.global.scss';
 
 import styles from './Presentation.module.scss';
@@ -40,20 +40,20 @@ export const Presentation = (props: PresentationProps): JSX.Element => {
   const { revealOptions } = options;
 
   useEffect(() => {
-    let deck: Reveal.Api;
-    if (children != null) {
-      deck = new Reveal({ ...baseRevealOptions, ...revealOptions });
-      deck.initialize()
-        .then(() => deck.slide(0)); // navigate to the first slide
+    // let deck: Reveal.Api;
+    // if (children != null) {
+    //   deck = new Reveal({ ...baseRevealOptions, ...revealOptions });
+    //   deck.initialize()
+    //     .then(() => deck.slide(0)); // navigate to the first slide
 
-      deck.on('ready', removeAllHiddenElements);
-      deck.on('slidechanged', removeAllHiddenElements);
-    }
+    //   deck.on('ready', removeAllHiddenElements);
+    //   deck.on('slidechanged', removeAllHiddenElements);
+    // }
 
-    return function cleanup() {
-      deck?.off('ready', removeAllHiddenElements);
-      deck?.off('slidechanged', removeAllHiddenElements);
-    };
+    // return function cleanup() {
+    //   deck?.off('ready', removeAllHiddenElements);
+    //   deck?.off('slidechanged', removeAllHiddenElements);
+    // };
   }, [children, revealOptions]);
 
   return (

packages/presentation/src/components/Slides.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { Marp } from '@marp-team/marp-core';
-import { Element } from '@marp-team/marpit';
-import Head from 'next/head';
+// import { Marp } from '@marp-team/marp-core';
+// import { Element } from '@marp-team/marpit';
+// import Head from 'next/head';
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 
 import type { PresentationOptions } from '../consts';
@@ -13,16 +13,16 @@ import './Slides.global.scss';
 export const MARP_CONTAINER_CLASS_NAME = 'marpit';
 
 
-const marp = new Marp({
-  container: [
-    new Element('div', { class: MARP_CONTAINER_CLASS_NAME }),
-    new Element('div', { class: 'slides' }),
-  ],
-  inlineSVG: false,
-  emoji: undefined,
-  html: false,
-  math: false,
-});
+// const marp = new Marp({
+//   container: [
+//     new Element('div', { class: MARP_CONTAINER_CLASS_NAME }),
+//     new Element('div', { class: 'slides' }),
+//   ],
+//   inlineSVG: false,
+//   emoji: undefined,
+//   html: false,
+//   math: false,
+// });
 
 
 type Props = {
@@ -42,13 +42,13 @@ export const Slides = (props: Props): JSX.Element => {
     },
   ]);
 
-  const { css } = marp.render('', { htmlAsArray: true });
+  // const { css } = marp.render('', { htmlAsArray: true });
 
   return (
     <>
-      <Head>
+      {/* <Head>
         <style>{css}</style>
-      </Head>
+      </Head> */}
       <ReactMarkdown {...rendererOptions}>
         { children ?? '## No Contents' }
       </ReactMarkdown>

packages/presentation/src/index.ts

@@ -1,3 +1,2 @@
 export * from './components/Presentation';
 export * from './components/Slides';
-export * from './services/renderer/extract-sections';

packages/presentation/tsconfig.base.json

@@ -1,12 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "jsx": "preserve",
-  },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "src/test"
-  ]
-}

packages/presentation/tsconfig.build.json

@@ -1,16 +0,0 @@
-{
-  "extends": "./tsconfig.base.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "dist",
-    "declaration": true,
-    "noResolve": false,
-    "preserveConstEnums": true,
-    "sourceMap": false,
-    "noEmit": false,
-
-    "baseUrl": ".",
-    "paths": {
-    }
-  }
-}

packages/presentation/tsconfig.json

@@ -1,10 +1,14 @@
 {
-  "extends": "./tsconfig.base.json",
+  "$schema": "http://json.schemastore.org/tsconfig",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
+    "jsx": "react-jsxdev",
+
     "baseUrl": ".",
     "paths": {
-      "~/*": ["./src/*"],
-      "@growi/*": ["../*/src"]
     }
-  }
+  },
+  "include": [
+    "src"
+  ]
 }

packages/presentation/vite.config.ts

@@ -0,0 +1,28 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({ outputDir: 'types' }),
+  ],
+  build: {
+    outDir: 'dist',
+    lib: {
+      entry: 'src/index.ts',
+      name: 'presentation-libs',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+});