这是 AnyMenu 的插件开发模板

$ npm install
$ npm run build
# 然后会将编译结果生成到 dist 目录下

见: any-menu/example-plugin-simple 使用

(1) 基于 plugin-simple

先基于 any-menu/example-plugin-simple 的从零生成说明

然后使用 svelte:

(2) 添加 svelte 依赖

npm install svelte
npm install -D svelte-loader

(3) 配置构建工具以支持 Svelte

• 如果之前的项目基于 webpack：

  npm install -D webpack svelte-loader style-loader css-loader

  webpack.config.js 配置示例：

  // webpack.config.js
  const path = require('path');
  module.exports = {
    resolve: {
      alias: {
        svelte: path.resolve('node_modules', 'svelte')
      },
      extensions: ['.mjs', '.js', '.svelte'],
      mainFields: ['svelte', 'browser', 'module', 'main']
    },
    module: {
      rules: [
        {
          test: /\.svelte$/,
          use: 'svelte-loader'
        },
        // 其他规则...
      ]
    },
    // 其他配置...
  }

• 如果之前的项目基于 vite：

  npm install -D vite @sveltejs/vite-plugin-svelte

  vite.config.js 配置示例：

  // vite.config.js
  import { defineConfig } from 'vite';
  import { svelte } from '@sveltejs/vite-plugin-svelte';
  
  export default defineConfig({
    plugins: [svelte()]
  });

(4) 使用 Svelte 挂载到面板元素

假设面板入口文件为 index.ts：

• Svelte 5 写法:

  import { mount } from 'svelte';
  import SubPanel from './SubPanel.svelte';
  
  const newPanel = document.createElement('div');
  ctx.api.registerSubPanel({
    id: 'example-plugin-svelte-panel',
    el: newPanel
  });
  
  // 使用 Svelte 渲染
  mount(SubPanel, { target: targetEl, props: {} });

• Svelte 3/4 写法:

  import SubPanel from './SubPanel.svelte';
  
  const newPanel = document.createElement('div');
  ctx.api.registerSubPanel({
    id: 'example-plugin-svelte-panel',
    el: newPanel
  });
  
  // 使用 Svelte 渲染
  const app = new App({
    target: newPanel,
    props: {} // 你的 props
  });

(5) (可选, 推荐) 避免 ts 不认识 .svelte

当编译和运行一切都正常时，你的 IDE 代码编辑器可能也会有飘红， 不认识 .svelte，提示: 找不到模块“./SubPanel.svelte”或其相应的类型声明。ts(2307)

添加 types/svelte.d.ts 文件即可:

declare module "*.svelte" {
  const component: any;
  export default component;
}

(6) (可选) Svelte5 与 Svelte3/4 的一些差异

该项目使用的是 Svelte5，版本 5 和 3/4 的一些用法有些不同

• Svelte 5 详见 官方文档-mount

  import { mount } from 'svelte';
  mount(SubPanel, { target: targetEl, props: {} });

• Svelte 3/4

  new SubPanel({ target, props });

如果想要在版本 5 支持旧写法，则可以在 vite.config.js:

import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [
    svelte({
      compilerOptions: {
        mode: 'classic' // ⭐️ 启用 classic/class 兼容模式
      }
    })
  ]
});