Improve onDataChanged method (#16472)

* 🐛 Improve onDataChanged method

fix https://github.com/siyuan-note/siyuan/pull/16244

重构、修复插件重启逻辑

重构

比如插件在 onload() 中插入了图标,uninstall 会把图标删除,afterLoadPlugin 又不能执行 onload() 把图标加回来

使用 getElementById

先加载插件样式

避免插入重复的样式

改进插件样式插入位置

* reloadPlugin
This commit is contained in:
Jeffrey Chen 2025-12-02 09:57:50 +08:00 committed by GitHub
parent d620daa530
commit bcdef64d0f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 60 additions and 37 deletions

View file

@ -29,22 +29,15 @@ const runCode = (code: string, sourceURL: string) => {
export const loadPlugins = async (app: App, names?: string[]) => {
const response = await fetchSyncPost("/api/petal/loadPetals", {frontend: getFrontend()});
let css = '<style id="pluginsStyle"></style>'; // 用于将内联样式插入到插件样式前的标识
// 为加快启动速度,不进行 await
response.data.forEach((item: IPluginData) => {
if (!names || (names && names.includes(item.name))) {
loadPluginJS(app, item);
}
if (item.css) {
css += `<style id="pluginsStyle${item.name}">${item.css}</style>`;
}
const pluginsStyle = getPluginsStyle();
const pluginsToLoad = !names
? response.data
: response.data.filter((item: IPluginData) => names.includes(item.name));
pluginsToLoad.forEach((item: IPluginData) => {
// 为加快启动速度,不进行 await
loadPluginJS(app, item);
insertPluginCSS(item, pluginsStyle);
});
const pluginsStyle = document.getElementById("pluginsStyle");
if (pluginsStyle) {
pluginsStyle.insertAdjacentHTML("afterend", css);
} else {
document.head.insertAdjacentHTML("beforeend", css);
}
};
const loadPluginJS = async (app: App, item: IPluginData) => {
@ -70,7 +63,7 @@ const loadPluginJS = async (app: App, item: IPluginData) => {
displayName: item.displayName,
name: item.name,
i18n: item.i18n
});
}) as Plugin;
app.plugins.push(plugin);
try {
await plugin.onload();
@ -80,15 +73,30 @@ const loadPluginJS = async (app: App, item: IPluginData) => {
return plugin;
};
const getPluginsStyle = () => {
let pluginsStyle = document.getElementById("pluginsStyle");
if (!pluginsStyle) {
pluginsStyle = document.createElement("style");
pluginsStyle.id = "pluginsStyle"; // 用于将内联样式插入到插件样式前的标识
document.head.append(pluginsStyle);
}
return pluginsStyle;
};
const insertPluginCSS = (item: IPluginData, pluginsStyle: HTMLElement) => {
if (!item.css) {
return;
}
const styleElement = document.createElement("style");
styleElement.id = "pluginsStyle" + item.name;
styleElement.textContent = item.css;
pluginsStyle.insertAdjacentElement("afterend", styleElement);
};
// 启用插件
export const loadPlugin = async (app: App, item: IPluginData) => {
const plugin = await loadPluginJS(app, item);
if (item.css) {
const styleElement = document.createElement("style");
styleElement.id = "pluginsStyle" + item.name;
styleElement.textContent = item.css;
document.head.append(styleElement);
}
insertPluginCSS(item, getPluginsStyle());
afterLoadPlugin(plugin);
saveLayout();
getAllEditor().forEach(editor => {
@ -229,16 +237,31 @@ export const reloadPlugin = async (app: App, data: {
}
});
});
app.plugins.forEach(item => {
if (upsertDataPlugins.includes(item.name)) {
try {
item.onDataChanged();
} catch (e) {
console.error(`plugin ${item.name} onDataChanged error:`, e);
}
// 先收集需要处理的插件,避免在遍历过程中修改数组导致重复执行
const dataChangedPlugins = app.plugins.filter(item => upsertDataPlugins.includes(item.name));
dataChangedPlugins.forEach(item => {
try {
item.onDataChanged();
} catch (e) {
console.error(`plugin ${item.name} onDataChanged error:`, e);
}
});
/// #if !MOBILE
saveLayout();
/// #endif
};
// 重启插件
export const restartPlugin = async (app: App, plugin: Plugin) => {
uninstall(app, plugin.name, false, true);
app.plugins.push(plugin);
try {
await plugin.onload();
} catch (e) {
console.error(`plugin ${plugin.name} onload error:`, e);
}
afterLoadPlugin(plugin);
getAllEditor().forEach(editor => {
editor.protyle.toolbar.update(editor.protyle);
});
};