refactor: 优化构建配置并增强 Stream 模式预览区交互功能

.eslintignore

@@ -9,4 +9,4 @@ src/libs/*.js
 example-applications/**
 examples/**
 docs/**
-packages/cherry-markdown/src/libs/*
+packages/cherry-markdown/src/libs/*.js

examples/assets/scripts/ai-chat-stream-demo.js

@@ -93,7 +93,7 @@ async function loadPlugin(plugin) {
       await loadCSS(config.css, `${plugin}-css`);
     }
     await loadScript(config.src, `${plugin}-js`);
-    
+
     // mermaid 需要额外加载插件脚本
     if (plugin === 'mermaid' && config.pluginSrc) {
       await loadScript(config.pluginSrc, `${plugin}-plugin-js`);
@@ -170,7 +170,7 @@ function getCherryConfig() {
       // mermaid 通过 usePlugin 方式注册，不需要在这里配置
     },
     previewer: {
-      enablePreviewerBubble: false,
+      enablePreviewerBubble: true,
     },
   };
 }
@@ -209,7 +209,7 @@ export function aiChatStreamScenario() {
       currentCherry.setMarkdown(currentText);
       try {
         dialog.scrollTop = dialog.scrollHeight;
-      } catch (e) { }
+      } catch (e) {}
       if (currentWordIndex < msg.length) {
         currentWordIndex++;
         setTimeout(step, interval);
@@ -222,7 +222,7 @@ export function aiChatStreamScenario() {
   }
 
   // 插件复选框事件
-  document.querySelectorAll('.j-plugin-checkbox').forEach(checkbox => {
+  document.querySelectorAll('.j-plugin-checkbox').forEach((checkbox) => {
     checkbox.addEventListener('change', async function () {
       const plugin = this.dataset.plugin;
 
@@ -274,7 +274,7 @@ export function aiChatStreamScenario() {
 
     try {
       dialog.scrollTop = dialog.scrollHeight;
-    } catch (e) { }
+    } catch (e) {}
 
     beginPrint(msgList[msgList.length - currentMsgIndex]);
     currentMsgIndex--;
@@ -306,7 +306,7 @@ export function aiChatStreamScenario() {
 
     try {
       dialog.scrollTop = dialog.scrollHeight;
-    } catch (e) { }
+    } catch (e) {}
 
     beginPrint(customContent);
   });

examples/h5.html

@@ -31,13 +31,12 @@
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.js"></script>
     <!--<script src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>-->
     <script src="../packages/cherry-markdown/dist/cherry-markdown.js"></script>
-    <script src="./assets/scripts/h5-demo.js"></script>
     <script type="module">
+      import { h5Config } from './assets/scripts/h5-demo.js';
 
       // 使用 fetch 获取 markdown 文件内容
       const response = await fetch('./assets/markdown/index.md');
       const basicMd = await response.text();
-      import { h5Config } from './assets/scripts/h5-demo.js';
       // 在Vite中使用?raw导入的文件内容已经是字符串，无需通过fetch获取
       const config = Object.assign({}, h5Config, { value: basicMd });
       window.cherry = new Cherry(config);

examples/img.html

@@ -30,11 +30,11 @@
     <div id="markdown"></div>
     <script src="../packages/cherry-markdown/dist/cherry-markdown.js"></script>
     <script type="module">
-         // 使用 fetch 获取 markdown 文件内容
-        const response = await fetch('./assets/markdown/img.md');
-        const imgMd = await response.text();
+      import { imgConfig } from './assets/scripts/img-demo.js';
 
-       import { imgConfig } from './assets/scripts/img-demo.js';
+      // 使用 fetch 获取 markdown 文件内容
+      const response = await fetch('./assets/markdown/img.md');
+      const imgMd = await response.text();
       // 在Vite中使用?raw导入的文件内容已经是字符串，无需通过fetch获取
       const config = Object.assign({}, imgConfig, { value: imgMd });
       window.cherry = new Cherry(config);

examples/index.html

@@ -48,10 +48,11 @@
     <script src="../packages/cherry-markdown/dist/cherry-markdown.js"></script>
     <script src="./assets/scripts/pinyin/pinyin_dist.js"></script>
     <script type="module">
+      import { basicConfig } from './assets/scripts/index-demo.js';
+
       // 使用 fetch 获取 markdown 文件内容
       const response = await fetch('./assets/markdown/index.md');
       const basicMd = await response.text();
-      import { basicConfig } from './assets/scripts/index-demo.js';
       // 在Vite中使用?raw导入的文件内容已经是字符串，无需通过fetch获取
       const config = Object.assign({}, basicConfig, { value: basicMd });
       window.cherry = new Cherry(config);

examples/multiple.html

@@ -41,10 +41,11 @@ <h1>Cherry Markdown Editor</h1>
     <!--<script src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>-->
     <script src="../packages/cherry-markdown/dist/cherry-markdown.js"></script>
     <script type="module">
+      import { multipleCherryConfig1, multipleCherryConfig2 } from './assets/scripts/multiple-demo.js';
+
       // 使用 fetch 获取 markdown 文件内容
       const response = await fetch('./assets/markdown/index.md');
       const basicMd = await response.text();
-      import { multipleCherryConfig1, multipleCherryConfig2 } from './assets/scripts/multiple-demo.js';
 
       // 在Vite中使用?raw导入的文件内容已经是字符串，无需通过fetch获取
       const config1 = Object.assign({}, multipleCherryConfig1, { value: basicMd });

examples/notoolbar.html

@@ -31,12 +31,12 @@
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.js"></script>
     <!--<script src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>-->
     <script src="../packages/cherry-markdown/dist/cherry-markdown.js"></script>
-    <script src="./assets/scripts/notoolbar-demo.js"></script>
     <script type="module">
+      import { noToolbarConfig } from './assets/scripts/notoolbar-demo.js';
+
       // 使用 fetch 获取 markdown 文件内容
       const response = await fetch('./assets/markdown/index.md');
       const basicMd = await response.text();
-      import { noToolbarConfig } from './assets/scripts/notoolbar-demo.js';
       // 在Vite中使用?raw导入的文件内容已经是字符串，无需通过fetch获取
       const config = Object.assign({}, noToolbarConfig, { value: basicMd });
       window.cherry = new Cherry(config);

examples/preview_only.html

@@ -77,12 +77,12 @@ <h1>纯预览页面标题</h1>
     <!--<script src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>-->
     <script src="../packages/cherry-markdown/dist/cherry-markdown.js"></script>
     <script src="https://fengyuanchen.github.io/viewerjs/js/viewer.js"></script>
-    <script src="./assets/scripts/preview-demo.js"></script>
     <script type="module">
+      import { previewConfig } from './assets/scripts/preview-demo.js';
+
       // 使用 fetch 获取 markdown 文件内容
       const response = await fetch('./assets/markdown/index.md');
       const basicMd = await response.text();
-      import { previewConfig } from './assets/scripts/preview-demo.js';
       // 在Vite中使用?raw导入的文件内容已经是字符串，无需通过fetch获取
       const config = Object.assign({}, previewConfig, { value: basicMd });
       window.cherry = new Cherry(config);

packages/cherry-markdown/build/addons.build.js

@@ -109,15 +109,20 @@ function buildAddons(entries) {
 
     console.log('[addons build] generating bundle %s', outputFile);
 
-    // generate code and a sourcemap
+    // generate UMD and ESM versions
     const { output: outputs } = await addonBundle.generate({
-      // dir: declarationDir,
-      file: outputFile,
+      file: `${outputFile.replace('.js', '')}.js`,
       format: 'umd',
       name: camelCaseModuleName,
       plugins: [terser()],
     });
 
+    const { output: esmOutputs } = await addonBundle.generate({
+      file: `${outputFile.replace('.js', '')}.esm.js`,
+      format: 'esm',
+      plugins: [terser()],
+    });
+
     // TODO: ts declaration 生成的目录不符合预期，以下为临时处理方案
     outputs.forEach((output) => {
       const fileNameOnly = basename(output.fileName);
@@ -128,5 +133,14 @@ function buildAddons(entries) {
       });
       writeFileSync(targetPath, output.code || output.source || '', { encoding: 'utf-8' });
     });
+    esmOutputs.forEach((output) => {
+      const fileNameOnly = basename(output.fileName);
+      const targetPath = join(declarationDir, fileNameOnly);
+      console.log('[addons build] writing %s %s', output.type, targetPath);
+      mkdirSync(declarationDir, {
+        recursive: true,
+      });
+      writeFileSync(targetPath, output.code || output.source || '', { encoding: 'utf-8' });
+    });
   });
 }

packages/cherry-markdown/build/build.js

@@ -30,6 +30,8 @@ const terserPlugin = (options = {}) =>
 
 export default {
   ...baseConfig,
+  // 禁用 tree-shaking，保持最大兼容性
+  treeshake: false,
   output: [
     {
       ...baseConfig.output,
@@ -39,24 +41,16 @@ export default {
       name: 'Cherry',
       sourcemap: true,
       compact: false,
+      inlineDynamicImports: true, // 禁用代码分割，强制内联所有动态导入
     },
     {
-      ...baseConfig.output,
       exports: 'named',
-      file: 'dist/cherry-markdown.min.js',
-      format: 'umd',
-      name: 'Cherry',
-      sourcemap: false,
-      compact: true,
-      plugins: [terserPlugin()],
-    },
-    {
-      ...baseConfig.output,
       file: 'dist/cherry-markdown.esm.js',
       format: 'esm',
       name: 'Cherry',
       sourcemap: false,
       compact: true,
+      inlineDynamicImports: true, // 禁用代码分割，强制内联所有动态导入
       plugins: [
         terserPlugin({
           module: true,

packages/cherry-markdown/build/replacePaths.js

@@ -1,2 +1,35 @@
-// backup of original replacePaths.js (moved to replacePaths.cjs)
-// original content preserved in replacePaths.cjs
+/**
+ * Copyright (C) 2021 Tencent.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import replaceInFile from 'replace-in-file';
+
+async function replacePaths() {
+  try {
+    const results = await replaceInFile({
+      files: 'dist/types/**/*.d.ts',
+      from: /~types\//g,
+      to: '../../types/',
+    });
+    for (const result of results) {
+      if (result.hasChanged) {
+        console.log(result);
+      }
+    }
+  } catch (error) {
+    throw error;
+  }
+}
+
+replacePaths();