build remark-drawio with vite

apps/app/src/client/services/side-effects/drawio-modal-launcher-for-view.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect } from 'react';
 
 import EventEmitter from 'events';
 
-import { DrawioEditByViewerProps } from '@growi/remark-drawio';
+import type { DrawioEditByViewerProps } from '@growi/remark-drawio';
 
 import { useSaveOrUpdate } from '~/client/services/page-operation';
 import mdu from '~/components/PageEditor/MarkdownDrawioUtil';

apps/app/src/components/ReactMarkdownComponents/DrawioViewerWithEditButton.tsx

@@ -3,13 +3,15 @@ import React, { useCallback, useState } from 'react';
 import EventEmitter from 'events';
 
 import {
-  DrawioEditByViewerProps,
-  DrawioViewer, DrawioViewerProps,
+  DrawioViewer,
+  type DrawioEditByViewerProps,
+  type DrawioViewerProps,
 } from '@growi/remark-drawio';
 import { useTranslation } from 'next-i18next';
 
 import { useIsGuestUser, useIsSharedUser, useShareLinkId } from '~/stores/context';
 
+import '@growi/remark-drawio/dist/style.css';
 import styles from './DrawioViewerWithEditButton.module.scss';
 
 

apps/app/tsconfig.build.client.json

@@ -18,7 +18,7 @@
       // "@growi/hackmd": ["../../packages/hackmd/src"],
       // "@growi/presentation": ["../../packages/presentation/src"],
       // "@growi/preset-themes": ["../../packages/preset-themes/src"],
-      "@growi/remark-drawio": ["../../packages/remark-drawio/src"],
+      // "@growi/remark-drawio": ["../../packages/remark-drawio/src"],
       // "@growi/remark-growi-directive": ["../../packages/remark-growi-directive/src"],
       // "@growi/remark-lsx": ["../../packages/remark-lsx/src"],
       // "@growi/remark-lsx/*": ["../../packages/remark-lsx/src/*"],

apps/app/tsconfig.build.server.json

@@ -13,7 +13,6 @@
     "paths": {
       "~/*": ["./src/*"],
       "^/*": ["./*"],
-      // "@growi/remark-lsx/*": ["../../packages/remark-lsx/dist/*"],
       "debug": ["./src/utils/logger/alias-for-debug"]
     }
   },

apps/app/tsconfig.json

@@ -17,7 +17,7 @@
       // "@growi/hackmd": ["../../packages/hackmd/src"],
       // "@growi/presentation": ["../../packages/presentation/src"],
       // "@growi/preset-themes": ["../../packages/preset-themes/src"],
-      "@growi/remark-drawio": ["../../packages/remark-drawio/src"],
+      // "@growi/remark-drawio": ["../../packages/remark-drawio/src"],
       // "@growi/remark-growi-directive": ["../../packages/remark-growi-directive/src"],
       // "@growi/remark-lsx": ["../../packages/remark-lsx/src"],
       // "@growi/remark-lsx/*": ["../../packages/remark-lsx/src/*"],

packages/remark-drawio/package.json

@@ -11,13 +11,19 @@
     "mdast",
     "markdown"
   ],
+  "type": "module",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "scripts": {
-    "build": "yarn tsc && tsc-alias -p tsconfig.build.json",
-    "tsc": "tsc -p tsconfig.build.json",
-    "tsc:w": "yarn tsc -w",
+    "build": "vite build",
     "clean": "npx -y shx rm -rf dist",
+    "dev": "vite build --mode dev",
+    "watch": "yarn dev -w --emptyOutDir=false",
     "lint:js": "yarn eslint **/*.{js,jsx,ts,tsx}",
     "lint:styles": "stylelint --allow-empty-input src/**/*.scss src/**/*.css",
     "lint": "run-p lint:*"

packages/remark-drawio/src/components/DrawioViewer.tsx

@@ -1,5 +1,6 @@
-import React, {
-  ReactNode, useCallback, useEffect, useMemo, useRef, useState,
+import {
+  type ReactNode,
+  memo, useCallback, useEffect, useMemo, useRef, useState,
 } from 'react';
 
 import { debounce } from 'throttle-debounce';
@@ -33,7 +34,7 @@ export type DrawioEditByViewerProps = {
   drawioMxFile: string,
 }
 
-export const DrawioViewer = React.memo((props: DrawioViewerProps): JSX.Element => {
+export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
   const {
     diagramIndex, bol, eol, children,
     onRenderingStart, onRenderingUpdated,

packages/remark-drawio/src/services/renderer/remark-drawio.ts

@@ -1,6 +1,6 @@
-import { Schema as SanitizeOption } from 'hast-util-sanitize';
-import { Plugin } from 'unified';
-import { Node } from 'unist';
+import type { Schema as SanitizeOption } from 'hast-util-sanitize';
+import type { Plugin } from 'unified';
+import type { Node } from 'unist';
 import { visit } from 'unist-util-visit';
 
 const SUPPORTED_ATTRIBUTES = ['diagramIndex', 'bol', 'eol'];

packages/remark-drawio/src/utils/global.ts

@@ -1,4 +1,4 @@
-import { IGraphViewerGlobal } from '../interfaces/graph-viewer';
+import type { IGraphViewerGlobal } from '../interfaces/graph-viewer';
 
 export const isGraphViewerGlobal = (val: unknown): val is IGraphViewerGlobal => {
   return (typeof val === 'function' && 'createViewerForElement' in val && 'processElements' in val);

packages/remark-drawio/tsconfig.base.json

@@ -1,13 +0,0 @@
-{
-  "$schema": "http://json.schemastore.org/tsconfig",
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "jsx": "preserve",
-  },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "test"
-  ]
-}

packages/remark-drawio/tsconfig.build.json

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

packages/remark-drawio/tsconfig.json

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

packages/remark-drawio/vite.config.ts

@@ -0,0 +1,33 @@
+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(),
+  ],
+  build: {
+    outDir: 'dist',
+    lib: {
+      entry: {
+        index: 'src/index.ts',
+      },
+      name: 'remark-drawio-libs',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: [
+        'react', 'react-dom',
+        'pako',
+        'throttle-debounce',
+        'unified',
+        'unist',
+        /^hast-.*/,
+        /^unist-.*/,
+        /^@growi\/.*/,
+      ],
+    },
+  },
+});