首先我们将 loadPlugins 改成 plugins , 这样我们就可以把 plugin 的所有逻辑都放到这个里面来。然后我们将插件保存的目录也改成可配置的。修改

修改 tray.ts

  1. PLUGIN_PATH: {
  2.   type: 'path',
  3.   label: ' 插件路径',
  4.   defaultValue: resolve(app.getPath('home'), '.reader-app-scripts')
  5. },

修改 setting.ts , 我们需要添加一个刷新的逻辑。

  1. const fetchAllPlugins = (send: any) => {
  2.   // 从远端获取所有新插件
  3.   promisified(storeURL).then((res: any) => {
  4.     let db = []
  5.     try {
  6.       db = JSON.parse(res.body.toString())
  7.     } catch (e) {}
  8.     send('all_plugins', db) // 发送到渲染进程
  9.     store.set('ALL_PLUGINS', db) // 保存到 store
  10.   })
  11. }
  13. on('reload_all_plugins').subscribe(async ({ event, args }) => {
  14.   await fetchAllPlugins(event.sender.send)
  15.   ipcMain.emit('get_all_plugins', event, args) // 触发自己的 get_all_plugins 事件
  16. })
  18. on('get_all_plugins').subscribe(({ event, args }) => {
  19.   const db = store.get('ALL_PLUGINS', [])
  20.   if (db.length > 0) {
  21.     return event.sender.send('all_plugins', db)
  22.   }
  23.   fetchAllPlugins(event.sender.send)
  24. })

为了让插件支持热更新，需要通过事件触发更新，假设把 plugin 丢到 store 里面去，由于序列化，会导致爬取方法丢失，所以只能存一下文件名做一下缓存。修改 index.ts 的 ready 方法，当然也可以用一个方法，比如 pluginSetUp 把下面的逻辑包裹一下。

再次修改 plugins.ts , 我们需要 filename 来判断该插件是否已经下载过了, 当接收到 reload_local_plugins 信号更新配置，这不仅会触发 index.ts 的事件监听，还会触发 plugins.ts 里的事件监听。

  1. const loadPlugins = () => {
  2.   let files = readdirSync(pluginsPath)
  3.   return [
  4.     files, // 文件名，因为要判断本地已安装插件
  5.     files.map(filename =>
  6.       requireFoolWebpack(resolve(pluginsPath, filename))(requireFoolWebpack)
  7.     )
  8.   ]
  9. }
  10. const saveToSetting = (all?: any) => {
  11.   const { event, args } = all
  12.   const [files, _] = loadPlugins()
  13.   store.set('LOACAL_PLUGINS', files) // 将已安装插件，存入 store
  14.   event && ipcMain.emit('get_local_plugins', event, args) // 发送到渲染进程
  15. }
  16. saveToSetting()
  17. on('reload_local_plugins').subscribe(saveToSetting)
  19. })

完成前端

  1. npm install marked --save

修改 package.json，将 markd 打包进去，要不然会找不到 marked

新建 pages/CrawlStore.svelte , 大多数东西跟 Vue 比较类似，helpers 是在模板里面访问的方法，它是纯函数，不具备 this 的访问能力。在 oncreate 的时候通过事件捕获 a 标签的点击，使用浏览器打开链接，以及拉取数据。

  1. <h2>插件列表</h2>
  3. <ul ref:list>
  4.     {#each plugins as plugin}
  5.     <li>
  6.         <a target="_blank" href={plugin.repository}>{plugin.filename} - {plugin.author} { plugin.downloaded ? 'downloaed' : ''}</a>
  7.         <p>{@html marked(plugin.description || '')}</p>
  8.     </li>
  9.     {/each}
  10. </ul>
  12. <script>
  13.     import {
  14.         ipcRenderer as ipc,
  15.         shell
  16.     } from 'electron'
  17.     import marked from 'marked'
  19.     function addDownloaed(plugins, local_plugins) {
  20.         return plugins.map(plugin => {
  21.             plugin.downloaded = local_plugins.findIndex(local_plugin => local_plugin == plugin.filename) >= 0
  22.             return plugin
  23.         })
  24.     }
  25.     export default {
  26.         data() {
  27.             return {
  28.                 local_plugins: [],
  29.                 all_plugins: []
  30.             }
  31.         },
  32.         helpers: {
  33.             marked,
  34.         },
  35.         computed: {
  36.             plugins: ({
  37.                 all_plugins,
  38.                 local_plugins
  39.             }) => addDownloaed(all_plugins, local_plugins)
  40.         },
  41.         oncreate() {
  42.             ipc.send('get_all_plugins')
  43.             ipc.send('get_local_plugins')
  44.             ipc.on('all_plugins', (event, all_plugins) => {
  46.                     all_plugins
  47.                 })
  48.             })
  49.             ipc.on('local_plugins', (event, local_plugins) => {
  50.                 this.set({
  51.                 })
  52.             })
  53.             this.refs.list.addEventListener("click", (e) => { // 处理插件的打开链接
  54.                 if (e.target.tagName.toLowerCase() == 'a') {
  55.                     e.preventDefault()
  56.                     shell.openExternal(e.target.href)
  57.                 }
  58.             }, true)
  59.         }
  60.     }
  61. </script>

最后别忘记在 App.svelte 里面引入并装载它。

现在的结果看起来会像下面这样，因为还没有任何样式，所以可能看起来比较简陋。

由于我们是 Electron 环境，没必要在意浏览器的 url 是什么，所以我们根本就不需要关心浏览器前进、后退的兼容，与参数解析。

下面是几个 svlte 路由的库和例子，大家想研究的话可以去看一下

创建 store.js

为了持久化存储，Svelte 自带了全局状态管理，为了更好的项目结构，我们将之前写好的页面都放到 pages 文件下。

  1. import { Store } from 'svelte/store.js'
  2. import Status from './pages/Status.svelte'
  3. import Download from './pages/Download.svelte'
  4. import CrawlStore from './pages/CrawlStore.svelte'
  6. const store = new Store({
  7.   currentPage: Status // 当前页面
  8. })
  10. store.changePage = changePage.bind(store)
  12. function changePage(pageName) {
  13.   const map = {
  14.     Status,
  15.     Download,
  16.     CrawlStore
  17.   }
  18.   const current = store.get().currentPage //当前页
  19.   store.set({ currentPage: map[pageName] || current })
  20. }
  22. export { changePage }
  24. export default store

我是直接通过  添加到实例上面添加的方法，大家也可以参考官方的文档，按照官方的例子去做。

这里我们通过 changePage 来修改 currentPage 变量，然后我们把 currentPage 绑定到动态组件上面去，这样我们就实现了路由。

跳转组件

新建 components/Link.svelte ，阻止默认事件，修改全局状态即可。

  1. <a class={className} href={to} ref:link>
  2.     <slot/>
  3. </a>
  5. <script>
  6.     export default {
  7.         oncreate() {
  8.             this.refs.link.addEventListener('click', (e) => {
  9.                 e.preventDefault(); // 阻止默认事件
  10.                 this.store.changePage(this.get().to)
  11.             }, false)
  12.         }
  13.     }