WIP: refactor import/export for @growi/editor

apps/app/next.config.js

@@ -62,6 +62,19 @@ const getTranspilePackages = () => {
   return packages;
 };
 
+const optimizePackageImports = [
+  '@growi/core',
+  '@growi/editor',
+  '@growi/pluginkit',
+  '@growi/presentation',
+  '@growi/preset-themes',
+  '@growi/remark-attachment-refs',
+  '@growi/remark-drawio',
+  '@growi/remark-growi-directive',
+  '@growi/remark-lsx',
+  '@growi/slack',
+  '@growi/ui',
+];
 
 module.exports = async(phase, { defaultConfig }) => {
 
@@ -85,6 +98,9 @@ module.exports = async(phase, { defaultConfig }) => {
     transpilePackages: phase !== PHASE_PRODUCTION_SERVER
       ? getTranspilePackages()
       : undefined,
+    // experimental: {
+    //   optimizePackageImports,
+    // },
 
     /** @param config {import('next').NextConfig} */
     webpack(config, options) {

apps/app/src/components/PageComment/CommentEditor.tsx

@@ -5,9 +5,9 @@ import React, {
 } from 'react';
 
 import { GlobalCodeMirrorEditorKey } from '@growi/editor';
-import {
-  CodeMirrorEditorComment, useCodeMirrorEditorIsolated, useResolvedThemeForEditor,
-} from '@growi/editor/dist/client';
+import { CodeMirrorEditorComment } from '@growi/editor/client/components/CodeMirrorEditorComment';
+import { useCodeMirrorEditorIsolated } from '@growi/editor/client/stores/codemirror-editor';
+import { useResolvedThemeForEditor } from '@growi/editor/client/stores/use-resolved-theme';
 import { UserPicture } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
@@ -15,6 +15,7 @@ import {
   TabContent, TabPane,
 } from 'reactstrap';
 
+
 import { uploadAttachments } from '~/client/services/upload-attachments';
 import { toastError } from '~/client/util/toastr';
 import { useNextThemes } from '~/stores-universal/use-next-themes';
@@ -36,7 +37,7 @@ import { CommentPreview } from './CommentPreview';
 import { SwitchingButtonGroup } from './SwitchingButtonGroup';
 
 
-import '@growi/editor/dist/style.css';
+import '@growi/editor/client/style.css';
 import styles from './CommentEditor.module.scss';
 
 

apps/app/src/components/PageEditor/ConflictDiffModal.tsx

@@ -4,9 +4,9 @@ import React, {
 
 import type { IUser } from '@growi/core';
 import { GlobalCodeMirrorEditorKey } from '@growi/editor';
-import {
-  MergeViewer, CodeMirrorEditorDiff, useCodeMirrorEditorIsolated,
-} from '@growi/editor/dist/client';
+import { CodeMirrorEditorDiff } from '@growi/editor/client/components/diff/CodeMirrorEditorDiff';
+import { MergeViewer } from '@growi/editor/client/components/diff/MergeViewer';
+import { useCodeMirrorEditorIsolated } from '@growi/editor/client/stores/codemirror-editor';
 import { UserPicture } from '@growi/ui/dist/components';
 import { format } from 'date-fns/format';
 import { useTranslation } from 'next-i18next';

apps/app/src/components/PageEditor/DrawioModal.tsx

@@ -4,8 +4,9 @@ import React, {
   useMemo,
 } from 'react';
 
-import type { Lang } from '@growi/core';
-import { useCodeMirrorEditorIsolated, useDrawioModalForEditor } from '@growi/editor/dist/client';
+import { Lang } from '@growi/core';
+import { useCodeMirrorEditorIsolated } from '@growi/editor/client/stores/codemirror-editor';
+import { useDrawioModalForEditor } from '@growi/editor/client/stores/use-drawio';
 import { LoadingSpinner } from '@growi/ui/dist/components';
 import {
   Modal,
@@ -26,12 +27,13 @@ const logger = loggerFactory('growi:components:DrawioModal');
 
 // https://docs.google.com/spreadsheets/d/1FoYdyEraEQuWofzbYCDPKN7EdKgS_2ZrsDrOA8scgwQ
 const DIAGRAMS_NET_LANG_MAP = {
+  en_US: 'en',
   ja_JP: 'ja',
   zh_CN: 'zh',
   fr_FR: 'fr',
 };
 
-export const getDiagramsNetLangCode = (lang: Lang) => {
+export const getDiagramsNetLangCode = (lang: Lang): string => {
   return DIAGRAMS_NET_LANG_MAP[lang];
 };
 
@@ -88,7 +90,7 @@ export const DrawioModal = (): JSX.Element => {
     // refs: https://desk.draw.io/support/solutions/articles/16000042546-what-url-parameters-are-supported-
     url.searchParams.append('spin', '1');
     url.searchParams.append('embed', '1');
-    url.searchParams.append('lang', getDiagramsNetLangCode(personalSettingsInfo?.lang || 'en'));
+    url.searchParams.append('lang', getDiagramsNetLangCode(personalSettingsInfo?.lang ?? Lang.en_US));
     url.searchParams.append('ui', 'atlas');
     url.searchParams.append('configure', '1');
 

apps/app/src/components/PageEditor/HandsontableModal.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { MarkdownTable } from '@growi/editor';
-import { useHandsontableModalForEditor } from '@growi/editor/dist/client';
+import { useHandsontableModalForEditor } from '@growi/editor/client/stores/use-handsontable';
 import { HotTable } from '@handsontable/react';
 import type Handsontable from 'handsontable';
 import { useTranslation } from 'next-i18next';
@@ -11,6 +11,7 @@ import {
 } from 'reactstrap';
 import { debounce } from 'throttle-debounce';
 
+
 import { replaceFocusedMarkdownTableWithEditor, getMarkdownTable } from '~/components/PageEditor/markdown-table-util-for-editor';
 import { useHandsontableModal } from '~/stores/modal';
 

apps/app/src/components/PageEditor/LinkEditModal.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 import path from 'path';
 
 import { Linker } from '@growi/editor';
-import { useLinkEditModal } from '@growi/editor/dist/client';
+import { useLinkEditModal } from '@growi/editor/client/stores/use-link-edit-modal';
 import { useTranslation } from 'next-i18next';
 import {
   Modal,

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -10,10 +10,9 @@ import nodePath from 'path';
 import { type IPageHasId, Origin } from '@growi/core';
 import { pathUtils } from '@growi/core/dist/utils';
 import { GlobalCodeMirrorEditorKey } from '@growi/editor';
-import {
-  CodeMirrorEditorMain,
-  useCodeMirrorEditorIsolated, useResolvedThemeForEditor,
-} from '@growi/editor/dist/client';
+import { CodeMirrorEditorMain } from '@growi/editor/client/components/CodeMirrorEditorMain';
+import { useCodeMirrorEditorIsolated } from '@growi/editor/client/stores/codemirror-editor';
+import { useResolvedThemeForEditor } from '@growi/editor/client/stores/use-resolved-theme';
 import { useRect } from '@growi/ui/dist/utils';
 import detectIndent from 'detect-indent';
 import { useTranslation } from 'next-i18next';
@@ -55,7 +54,7 @@ import Preview from './Preview';
 import { useScrollSync } from './ScrollSyncHelper';
 import { useConflictResolver, useConflictEffect, type ConflictHandler } from './conflict';
 
-import '@growi/editor/dist/style.css';
+import '@growi/editor/client/style.css';
 
 
 const logger = loggerFactory('growi:PageEditor');

apps/app/src/components/PageEditor/PageEditorReadOnly.tsx

@@ -1,7 +1,7 @@
 import react, { useMemo, useRef } from 'react';
 
 import { GlobalCodeMirrorEditorKey } from '@growi/editor';
-import { CodeMirrorEditorReadOnly } from '@growi/editor/dist/client';
+import { CodeMirrorEditorReadOnly } from '@growi/editor/client/components/CodeMirrorEditorReadOnly';
 import { throttle } from 'throttle-debounce';
 
 import { useShouldExpandContent } from '~/client/services/layout';

apps/app/src/components/PageEditor/ScrollSyncHelper.tsx

@@ -1,7 +1,7 @@
 import { useCallback, type RefObject, useRef } from 'react';
 
 import type { GlobalCodeMirrorEditorKey } from '@growi/editor';
-import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client';
+import { useCodeMirrorEditorIsolated } from '@growi/editor/client/stores/codemirror-editor';
 
 let defaultTop = 0;
 const padding = 5;

apps/app/src/components/PageEditor/conflict.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect } from 'react';
 import { Origin } from '@growi/core';
 import { useGlobalSocket } from '@growi/core/dist/swr';
 import { GlobalCodeMirrorEditorKey } from '@growi/editor';
-import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client';
+import { useCodeMirrorEditorIsolated } from '@growi/editor/client/stores/codemirror-editor';
 import { useTranslation } from 'react-i18next';
 
 import { useUpdateStateAfterSave } from '~/client/services/page-operation';

apps/app/src/components/TemplateModal/TemplateModal.tsx

@@ -5,7 +5,7 @@ import React, {
 import assert from 'assert';
 
 import type { Lang } from '@growi/core';
-import { useTemplateModal, type TemplateModalStatus } from '@growi/editor/dist/client';
+import { useTemplateModal, type TemplateModalStatus } from '@growi/editor/client/stores/use-template-modal';
 import {
   extractSupportedLocales, getLocalizedTemplate, type TemplateSummary,
 } from '@growi/pluginkit/dist/v4';

apps/app/tsconfig.build.client.json

@@ -5,7 +5,6 @@
     ".next/types/**/*.ts"
   ],
   "compilerOptions": {
-    "module": "ESNext",
     "strict": false,
     "strictNullChecks": true,
 

apps/app/tsconfig.build.server.json

@@ -3,6 +3,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "module": "CommonJS",
+    "moduleResolution": "NodeNext",
     "outDir": "transpiled",
     "declaration": true,
     "noResolve": false,
@@ -21,8 +22,14 @@
     "resource",
     "src/client",
     "src/components",
+    "src/components-universal",
     "src/linter-checker",
     "src/stores",
+    "src/stores-universal",
     "src/styles",
+    "src/**/*.jsx",
+    "src/**/*.tsx",
+    "src/**/*.spec.ts",
+    "src/**/*.integ.ts"
   ]
 }

apps/app/tsconfig.json

@@ -2,8 +2,6 @@
   "$schema": "http://json.schemastore.org/tsconfig",
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "module": "CommonJS",
-
     "jsx": "preserve",
     "resolveJsonModule": true,
     "types": [

packages/editor/package.json

@@ -5,8 +5,14 @@
   "license": "MIT",
   "private": "true",
   "type": "module",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./client/components/*": "./dist/client/components/*.js",
+    "./client/components/diff": "./dist/client/components/diff/*.js",
+    "./client/services": "./dist/client/services/index.js",
+    "./client/stores/*": "./dist/client/stores/*.js",
+    "./client/style.css": "./dist/style.css"
+  },
   "scripts": {
     "build": "tsc && vite build",
     "clean": "shx rm -rf dist",

packages/editor/src/client/components/CodeMirrorEditor/CodeMirrorEditor.tsx → packages/editor/src/client/components-internal/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -15,7 +15,9 @@ import {
   useFileDropzone, FileDropzoneOverlay,
   adjustPasteData, getStrFromBol, useShowTableIcon,
 } from '../../services-internal';
-import { useDefaultExtensions, useCodeMirrorEditorIsolated, useEditorSettings } from '../../stores';
+import { useCodeMirrorEditorIsolated } from '../../stores/codemirror-editor';
+import { useDefaultExtensions } from '../../stores/use-default-extensions';
+import { useEditorSettings } from '../../stores/use-editor-settings';
 
 import { Toolbar } from './Toolbar';
 

packages/editor/src/client/components/CodeMirrorEditor/Toolbar/EmojiButton.tsx → packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/EmojiButton.tsx

@@ -7,9 +7,9 @@ import { Picker } from 'emoji-mart';
 import i18n from 'i18next';
 import { Modal } from 'reactstrap';
 
-import { useCodeMirrorEditorIsolated, useResolvedThemeForEditor } from '../../../stores';
-
 import 'emoji-mart/css/emoji-mart.css';
+import { useCodeMirrorEditorIsolated } from '../../../stores/codemirror-editor';
+import { useResolvedThemeForEditor } from '../../../stores/use-resolved-theme';
 
 type Props = {
   editorKey: string,

packages/editor/src/client/components/CodeMirrorEditor/Toolbar/LinkEditButton.tsx → packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/LinkEditButton.tsx

@@ -4,9 +4,10 @@ import { DropdownItem } from 'reactstrap';
 
 import type { GlobalCodeMirrorEditorKey } from '../../../../consts';
 import { getMarkdownLink, replaceFocusedMarkdownLinkWithEditor } from '../../../services-internal';
-import { useCodeMirrorEditorIsolated } from '../../../stores';
+import { useCodeMirrorEditorIsolated } from '../../../stores/codemirror-editor';
 import { useLinkEditModal } from '../../../stores/use-link-edit-modal';
 
+
 type Props = {
   editorKey: string | GlobalCodeMirrorEditorKey,
 }

packages/editor/src/client/components/CodeMirrorEditor/Toolbar/TableButton.tsx → packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/TableButton.tsx

@@ -1,8 +1,9 @@
 import { useCallback } from 'react';
 
-import { useCodeMirrorEditorIsolated } from '../../../stores';
+import { useCodeMirrorEditorIsolated } from '../../../stores/codemirror-editor';
 import { useHandsontableModalForEditor } from '../../../stores/use-handsontable';
 
+
 type Props = {
   editorKey: string,
 }

packages/editor/src/client/components/CodeMirrorEditor/Toolbar/TemplateButton.tsx → packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/TemplateButton.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { useCodeMirrorEditorIsolated } from '../../../stores';
+import { useCodeMirrorEditorIsolated } from '../../../stores/codemirror-editor';
 import { useTemplateModal } from '../../../stores/use-template-modal';
 
 type Props = {

packages/editor/src/client/components/CodeMirrorEditor/Toolbar/TextFormatTools.tsx → packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/TextFormatTools.tsx

@@ -3,7 +3,7 @@ import { useCallback, useState } from 'react';
 import { Collapse } from 'reactstrap';
 
 import type { GlobalCodeMirrorEditorKey } from '../../../../consts';
-import { useCodeMirrorEditorIsolated } from '../../../stores';
+import { useCodeMirrorEditorIsolated } from '../../../stores/codemirror-editor';
 
 import styles from './TextFormatTools.module.scss';
 

packages/editor/src/client/components/playground/Playground.tsx → packages/editor/src/client/components-internal/playground/Playground.tsx

@@ -7,8 +7,8 @@ import { toast } from 'react-toastify';
 
 import { GlobalCodeMirrorEditorKey } from '../../../consts';
 import type { EditorSettings, EditorTheme, KeyMapMode } from '../../../consts';
-import { useCodeMirrorEditorIsolated } from '../../stores';
-import { CodeMirrorEditorMain } from '../CodeMirrorEditorMain';
+import { CodeMirrorEditorMain } from '../../components/CodeMirrorEditorMain';
+import { useCodeMirrorEditorIsolated } from '../../stores/codemirror-editor';
 
 import { PlaygroundController } from './PlaygroundController';
 import { Preview } from './Preview';

packages/editor/src/client/components/playground/PlaygroundController.tsx → packages/editor/src/client/components-internal/playground/PlaygroundController.tsx

@@ -7,7 +7,7 @@ import {
   GlobalCodeMirrorEditorKey,
   AllEditorTheme, AllKeyMap,
 } from '../../../consts';
-import { useCodeMirrorEditorIsolated } from '../../stores';
+import { useCodeMirrorEditorIsolated } from '../../stores/codemirror-editor';
 
 export const InitEditorValueRow = (): JSX.Element => {
 

packages/editor/src/client/components/CodeMirrorEditorComment.tsx

@@ -3,11 +3,9 @@ import { memo, useEffect } from 'react';
 import type { Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 
-import { useCodeMirrorEditorIsolated } from '../stores';
-
-import { CodeMirrorEditor, type CodeMirrorEditorProps } from '.';
-
-import type { GlobalCodeMirrorEditorKey } from 'src/consts';
+import type { GlobalCodeMirrorEditorKey } from '../../consts';
+import { CodeMirrorEditor, type CodeMirrorEditorProps } from '../components-internal/CodeMirrorEditor';
+import { useCodeMirrorEditorIsolated } from '../stores/codemirror-editor';
 
 
 const additionalExtensions: Extension[] = [

packages/editor/src/client/components/CodeMirrorEditorMain.tsx

@@ -5,10 +5,11 @@ import { keymap, scrollPastEnd } from '@codemirror/view';
 import type { IUserHasId } from '@growi/core/dist/interfaces';
 
 import { GlobalCodeMirrorEditorKey } from '../../consts';
+import { CodeMirrorEditor, type CodeMirrorEditorProps } from '../components-internal/CodeMirrorEditor';
 import { setDataLine } from '../services-internal';
-import { useCodeMirrorEditorIsolated, useCollaborativeEditorMode } from '../stores';
+import { useCodeMirrorEditorIsolated } from '../stores/codemirror-editor';
+import { useCollaborativeEditorMode } from '../stores/use-collaborative-editor-mode';
 
-import { CodeMirrorEditor, type CodeMirrorEditorProps } from '.';
 
 const additionalExtensions: Extension[] = [
   [

packages/editor/src/client/components/CodeMirrorEditorReadOnly.tsx

@@ -3,10 +3,10 @@ import { useEffect } from 'react';
 import { type Extension, EditorState } from '@codemirror/state';
 
 import { GlobalCodeMirrorEditorKey } from '../../consts';
+import { CodeMirrorEditor } from '../components-internal/CodeMirrorEditor';
 import { setDataLine } from '../services-internal';
-import { useCodeMirrorEditorIsolated } from '../stores';
+import { useCodeMirrorEditorIsolated } from '../stores/codemirror-editor';
 
-import { CodeMirrorEditor } from '.';
 
 const additionalExtensions: Extension[] = [
   [

packages/editor/src/client/components/CodeMirrorEditorDiff.tsx → packages/editor/src/client/components/diff/CodeMirrorEditorDiff.tsx

@@ -4,8 +4,10 @@ import type { Extension } from '@codemirror/state';
 import { placeholder, scrollPastEnd } from '@codemirror/view';
 import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 
-import { GlobalCodeMirrorEditorKey } from '../../consts';
-import { useCodeMirrorEditorIsolated, useDefaultExtensions, useEditorSettings } from '../stores';
+import { GlobalCodeMirrorEditorKey } from '../../../consts';
+import { useCodeMirrorEditorIsolated } from '../../stores/codemirror-editor';
+import { useDefaultExtensions } from '../../stores/use-default-extensions';
+import { useEditorSettings } from '../../stores/use-editor-settings';
 
 const additionalExtensions: Extension[] = [
   [

packages/editor/src/client/components/diff/index.ts

@@ -0,0 +1,2 @@
+export * from './CodeMirrorEditorDiff';
+export * from './MergeViewer';

packages/editor/src/client/components/index.ts

@@ -1,6 +0,0 @@
-export * from './CodeMirrorEditor';
-export * from './CodeMirrorEditorMain';
-export * from './CodeMirrorEditorReadOnly';
-export * from './CodeMirrorEditorComment';
-export * from './CodeMirrorEditorDiff';
-export * from './MergeViewer';

packages/editor/src/client/index.ts

@@ -1,3 +0,0 @@
-export * from './components';
-export * from './services';
-export * from './stores';

packages/editor/src/client/stores/index.ts

@@ -1,9 +0,0 @@
-export * from './codemirror-editor';
-export * from './use-collaborative-editor-mode';
-export * from './use-default-extensions';
-export * from './use-drawio';
-export * from './use-editor-settings';
-export * from './use-handsontable';
-export * from './use-link-edit-modal';
-export * from './use-resolved-theme';
-export * from './use-template-modal';

packages/editor/src/main.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { ToastContainer } from 'react-toastify';
 
-import { Playground } from './client/components/playground';
+import { Playground } from './client/components-internal/playground';
 
 import './main.scss';
 

packages/editor/tsconfig.json

@@ -26,6 +26,5 @@
       "/*": ["./public/*"]
     }
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src"]
 }

packages/editor/tsconfig.node.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "http://json.schemastore.org/tsconfig",
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}

packages/editor/vite.config.ts

@@ -18,6 +18,7 @@ export default defineConfig({
   plugins: [
     react(),
     dts({
+      entryRoot: 'src',
       exclude: [
         ...excludeFiles,
       ],

tsconfig.base.json

@@ -1,8 +1,8 @@
 {
   "$schema": "http://json.schemastore.org/tsconfig",
   "compilerOptions": {
-    "target": "es2019",
-    "module": "esnext",
+    "target": "ESNext",
+    "module": "NodeNext",
     "allowJs": true,
     "skipLibCheck": true,
     "importHelpers": true,
@@ -20,7 +20,7 @@
     "noUnusedParameters": false,
 
     /* Module Resolution Options */
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,