720 lines
27 KiB
JavaScript
720 lines
27 KiB
JavaScript
/**
|
|
* Renderer process entry point for the plugin-manager Electron test harness.
|
|
*
|
|
* Uses a dynamic import() to load the ESM @paarrot/plugin-manager dist,
|
|
* then loads the example plugin from disk and demonstrates every API surface.
|
|
*/
|
|
(async () => {
|
|
const testApi = window.electronTestApi;
|
|
if (!testApi) {
|
|
throw new Error('Electron test preload API is unavailable.');
|
|
}
|
|
|
|
const {
|
|
examplePluginCode,
|
|
examplePluginPath,
|
|
pluginManagerEntryUrl,
|
|
} = testApi.getHarnessBootstrap();
|
|
|
|
const {
|
|
PluginMarketplaceClient,
|
|
PluginMarketplaceManager,
|
|
PluginRegistry,
|
|
createPluginContext,
|
|
} = await import(pluginManagerEntryUrl);
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Module loader — supports both CJS (module.exports) and ESM (export default)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
/**
|
|
* Imports arbitrary module source through a blob URL so CSP can remain free
|
|
* of unsafe-eval while still supporting test plugins loaded from strings.
|
|
* @param {string} source
|
|
* @returns {Promise<object>}
|
|
*/
|
|
async function importModuleFromSource(source) {
|
|
const blob = new Blob([source], { type: 'text/javascript' });
|
|
const blobUrl = URL.createObjectURL(blob);
|
|
|
|
try {
|
|
return await import(blobUrl);
|
|
} finally {
|
|
URL.revokeObjectURL(blobUrl);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Evaluates plugin source code and returns the raw module exports.
|
|
* Tries CommonJS first by wrapping the code as ESM, then falls back to native
|
|
* ESM import when the source already uses module syntax.
|
|
* @param {string} code
|
|
* @returns {Promise<object>}
|
|
*/
|
|
async function evalPluginCode(code) {
|
|
try {
|
|
const commonJsModule = await importModuleFromSource(
|
|
`const module = { exports: {} };\nconst exports = module.exports;\n${code}\nexport default module.exports;\n`
|
|
);
|
|
const result = commonJsModule.default;
|
|
if (result && typeof result === 'object') {
|
|
return result;
|
|
}
|
|
} catch (err) {
|
|
if (!(err instanceof SyntaxError)) {
|
|
throw err;
|
|
}
|
|
}
|
|
|
|
const esmModule = await importModuleFromSource(code);
|
|
return esmModule.default ?? esmModule;
|
|
}
|
|
|
|
/**
|
|
* Infers a plugin id from an index.js path without relying on Node path APIs.
|
|
* @param {string} filePath
|
|
* @returns {string}
|
|
*/
|
|
function inferPluginId(filePath) {
|
|
const segments = filePath.split(/[\\/]+/).filter(Boolean);
|
|
if (segments.length < 2) {
|
|
return 'plugin';
|
|
}
|
|
|
|
return segments[segments.length - 2];
|
|
}
|
|
|
|
/**
|
|
* Normalises a raw plugin module to our Plugin interface.
|
|
*
|
|
* Handles two formats:
|
|
* - Native: `{ onLoad(ctx), onUnload() }` — used as-is
|
|
* - Legacy: named exports `activate(ctx)` / `deactivate(ctx)` — wrapped into
|
|
* onLoad/onUnload with a stub context that no-ops unsupported calls so the
|
|
* plugin doesn't crash on missing methods (registerHook, runHook, getConfig).
|
|
*
|
|
* @param {object} raw Raw module exports
|
|
* @returns {object} Plugin-interface-compatible object
|
|
*/
|
|
function normalisePlugin(raw) {
|
|
if (typeof raw.onLoad === 'function') return raw; // already native
|
|
|
|
if (typeof raw.activate === 'function') {
|
|
return {
|
|
name: raw.name ?? undefined,
|
|
version: raw.version ?? undefined,
|
|
onLoad: async (ctx) => {
|
|
// Extend ctx with legacy methods so the plugin doesn't throw
|
|
const legacyCtx = Object.assign(Object.create(ctx), {
|
|
registerHook: (name, fn) => ctx.log(`[compat] registerHook("${name}") — not supported`),
|
|
runHook: (name, data) => { ctx.log(`[compat] runHook("${name}")`); return Promise.resolve([]); },
|
|
getConfig: (key) => ctx.settings.get(key),
|
|
on: (event, handler) => ctx.events.on(event, handler),
|
|
});
|
|
await raw.activate(legacyCtx);
|
|
},
|
|
onUnload: raw.deactivate
|
|
? async (ctx) => raw.deactivate(ctx)
|
|
: undefined,
|
|
exports: raw,
|
|
};
|
|
}
|
|
|
|
throw new Error('Plugin does not export onLoad or activate — cannot load');
|
|
}
|
|
|
|
/**
|
|
* Fetches plugin JS source from a URL.
|
|
* If the URL points to a ZIP archive, derives the raw index.js URL from the
|
|
* repository field in the plugin metadata (Gitea/GitHub raw file convention).
|
|
*
|
|
* @param {string} downloadUrl
|
|
* @param {string} [repositoryUrl] Fallback repo root for ZIP-only entries
|
|
* @returns {Promise<string>} JS source code
|
|
*/
|
|
async function fetchPluginCode(downloadUrl, repositoryUrl) {
|
|
const isZip = /\.zip($|\?)/.test(downloadUrl);
|
|
|
|
if (!isZip) {
|
|
const res = await fetch(downloadUrl);
|
|
if (!res.ok) throw new Error(`HTTP ${res.status} fetching ${downloadUrl}`);
|
|
return res.text();
|
|
}
|
|
|
|
// ZIP URL — try to derive a raw index.js URL from the repository root
|
|
if (!repositoryUrl) throw new Error('Download URL is a ZIP and no repository URL is available');
|
|
|
|
// Supports Gitea (/raw/branch/main/) and GitHub (/raw/main/) conventions
|
|
const giteaRaw = `${repositoryUrl.replace(/\/$/, '')}/raw/branch/main/index.js`;
|
|
const res = await fetch(giteaRaw);
|
|
if (!res.ok) {
|
|
const ghRaw = `${repositoryUrl.replace(/\/$/, '')}/raw/main/index.js`;
|
|
const res2 = await fetch(ghRaw);
|
|
if (!res2.ok) throw new Error(`Could not fetch index.js from ${repositoryUrl} (tried Gitea and GitHub raw URL patterns)`);
|
|
return res2.text();
|
|
}
|
|
return res.text();
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Logging helper — writes to the on-screen log panel
|
|
// ---------------------------------------------------------------------------
|
|
const logEl = document.getElementById('log');
|
|
|
|
/** @param {'log'|'info'|'success'|'error'|'warn'} type */
|
|
function addLog(message, type = 'log') {
|
|
const entry = document.createElement('div');
|
|
entry.className = `log-entry log-${type}`;
|
|
entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
|
|
logEl.appendChild(entry);
|
|
logEl.scrollTop = logEl.scrollHeight;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Registry
|
|
// ---------------------------------------------------------------------------
|
|
const registry = new PluginRegistry({
|
|
storage: localStorage,
|
|
onThemeRegistered: (themeId, _className, css) => {
|
|
const el = document.createElement('style');
|
|
el.id = `plugin-theme-${themeId}`;
|
|
el.textContent = css;
|
|
document.head.appendChild(el);
|
|
addLog(`Theme registered: ${themeId}`, 'info');
|
|
},
|
|
onThemeUnregistered: (themeId) => {
|
|
document.getElementById(`plugin-theme-${themeId}`)?.remove();
|
|
addLog(`Theme unregistered: ${themeId}`, 'info');
|
|
},
|
|
});
|
|
|
|
const marketplaceClient = new PluginMarketplaceClient({
|
|
indexUrl: 'https://raw.githubusercontent.com/Paarrot/Plugin-Directory/refs/heads/main/plugins/index.json',
|
|
baseUrl: 'https://raw.githubusercontent.com/Paarrot/Plugin-Directory/refs/heads/main/plugins/',
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Load the example plugin from disk (CJS eval — same pattern as cinny)
|
|
// ---------------------------------------------------------------------------
|
|
const pluginPath = examplePluginPath;
|
|
const plugin = await evalPluginCode(examplePluginCode);
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Simple in-process event emitter (stands in for a real client like Matrix)
|
|
// ---------------------------------------------------------------------------
|
|
const eventEmitter = {
|
|
_handlers: {},
|
|
on(event, handler) {
|
|
(this._handlers[event] ??= []).push(handler);
|
|
},
|
|
off(event, handler) {
|
|
this._handlers[event] = (this._handlers[event] ?? []).filter(h => h !== handler);
|
|
},
|
|
emit(event, data) {
|
|
(this._handlers[event] ?? []).forEach(h => h(data));
|
|
},
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Register + load
|
|
// ---------------------------------------------------------------------------
|
|
|
|
/**
|
|
* Persistent record of every plugin we have ever seen, keyed by plugin id.
|
|
* Survives unload so the Installed list can show a Reload button.
|
|
*
|
|
* @type {Map<string, {
|
|
* name: string,
|
|
* version: string,
|
|
* pluginModule: object,
|
|
* filePath?: string,
|
|
* downloadUrl?: string,
|
|
* description?: string,
|
|
* author?: string,
|
|
* repository?: string,
|
|
* thumbnail?: string,
|
|
* homepage?: string,
|
|
* tags?: string[],
|
|
* addedDate?: string
|
|
* }>}
|
|
*/
|
|
const knownPlugins = new Map();
|
|
|
|
/**
|
|
* Creates a plugin context wired to the shared registry and event emitter,
|
|
* registers and loads the plugin, then records it in knownPlugins.
|
|
* @param {string} id
|
|
* @param {object} pluginModule
|
|
* @param {{
|
|
* filePath?: string,
|
|
* downloadUrl?: string,
|
|
* name?: string,
|
|
* version?: string,
|
|
* description?: string,
|
|
* author?: string,
|
|
* repository?: string,
|
|
* thumbnail?: string,
|
|
* homepage?: string,
|
|
* tags?: string[],
|
|
* addedDate?: string,
|
|
* }} [source]
|
|
*/
|
|
async function registerAndLoad(id, pluginModule, source = {}) {
|
|
const ctx = createPluginContext(
|
|
{
|
|
pluginId: id,
|
|
eventClient: eventEmitter,
|
|
onNotify: (opts) =>
|
|
addLog(`[${opts.type?.toUpperCase() ?? 'NOTIFY'}] ${opts.title}: ${opts.body}`, 'info'),
|
|
},
|
|
registry
|
|
);
|
|
ctx.log = (...args) => {
|
|
console.log(`[Plugin ${id}]`, ...args);
|
|
registry.addLog(id, 'log', args);
|
|
addLog(args.map(String).join(' '), 'log');
|
|
};
|
|
|
|
registry.registerPlugin(id, pluginModule, ctx);
|
|
await pluginModule.onLoad(ctx);
|
|
|
|
knownPlugins.set(id, {
|
|
name: source.name ?? pluginModule.name ?? id,
|
|
version: source.version ?? pluginModule.version ?? '?',
|
|
pluginModule,
|
|
...source,
|
|
});
|
|
}
|
|
|
|
const marketplace = new PluginMarketplaceManager({
|
|
client: marketplaceClient,
|
|
storage: localStorage,
|
|
registry,
|
|
host: {
|
|
listInstalledPlugins: async () => Array.from(knownPlugins.entries()).map(([id, known]) => ({
|
|
id,
|
|
name: known.name ?? id,
|
|
version: known.version ?? '',
|
|
description: known.description ?? '',
|
|
author: known.author ?? '',
|
|
repository: known.repository ?? '',
|
|
thumbnail: known.thumbnail ?? '',
|
|
downloadUrl: known.downloadUrl ?? '',
|
|
homepage: known.homepage ?? '',
|
|
tags: Array.isArray(known.tags) ? known.tags : [],
|
|
addedDate: known.addedDate ?? '',
|
|
})),
|
|
installPlugin: async (pluginMetadata) => {
|
|
if (!pluginMetadata.downloadUrl) {
|
|
throw new Error(`No download URL for plugin ${pluginMetadata.id}`);
|
|
}
|
|
|
|
addLog(`Downloading plugin ${pluginMetadata.id}…`, 'info');
|
|
const code = await fetchPluginCode(pluginMetadata.downloadUrl, pluginMetadata.repository);
|
|
const raw = await evalPluginCode(code);
|
|
const pluginModule = normalisePlugin(raw);
|
|
|
|
await registerAndLoad(pluginMetadata.id, pluginModule, {
|
|
downloadUrl: pluginMetadata.downloadUrl,
|
|
name: pluginMetadata.name,
|
|
version: pluginMetadata.version,
|
|
description: pluginMetadata.description,
|
|
author: pluginMetadata.author,
|
|
repository: pluginMetadata.repository,
|
|
thumbnail: pluginMetadata.thumbnail,
|
|
homepage: pluginMetadata.homepage,
|
|
tags: pluginMetadata.tags,
|
|
addedDate: pluginMetadata.addedDate,
|
|
});
|
|
},
|
|
uninstallPlugin: async (pluginId) => {
|
|
knownPlugins.delete(pluginId);
|
|
},
|
|
},
|
|
});
|
|
|
|
await registerAndLoad('example-plugin', plugin, {
|
|
filePath: pluginPath,
|
|
});
|
|
|
|
document.getElementById('status-badge').textContent = 'example-plugin loaded';
|
|
document.getElementById('status-badge').classList.add('loaded');
|
|
addLog('example-plugin loaded successfully', 'success');
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Plugin Manager panel
|
|
// ---------------------------------------------------------------------------
|
|
|
|
/** Renders the installed-plugins card list, including unloaded entries. */
|
|
function refreshPluginList() {
|
|
const listEl = document.getElementById('plugin-list');
|
|
const loadedMap = new Map(registry.getRegisteredPlugins().map(p => [p.id, p]));
|
|
|
|
if (!knownPlugins.size) {
|
|
listEl.innerHTML = '<div id="no-plugins-msg" style="color:#555;font-size:12px;text-align:center;padding:20px 0;">No plugins loaded</div>';
|
|
return;
|
|
}
|
|
|
|
listEl.innerHTML = Array.from(knownPlugins.entries()).map(([id, known]) => {
|
|
const live = loadedMap.get(id);
|
|
const loaded = !!live;
|
|
const statusBadge = loaded
|
|
? '<span class="badge green">loaded</span>'
|
|
: '<span class="badge red">unloaded</span>';
|
|
const featureBadges = live ? `
|
|
${live.commandCount ? `<span class="badge">${live.commandCount} cmd${live.commandCount !== 1 ? 's' : ''}</span>` : ''}
|
|
${live.interceptorCount ? `<span class="badge">${live.interceptorCount} interceptor${live.interceptorCount !== 1 ? 's' : ''}</span>` : ''}
|
|
${live.themeCount ? `<span class="badge amber">${live.themeCount} theme${live.themeCount !== 1 ? 's' : ''}</span>` : ''}
|
|
${live.hasSettings ? '<span class="badge">has settings</span>' : ''}
|
|
` : '';
|
|
const actionBtn = loaded
|
|
? `<button class="plugin-unload-btn" data-action="unload" data-id="${id}">Unload</button>`
|
|
: `<button class="plugin-unload-btn" style="background:#1a4a2e;color:#4caf50;" data-action="reload" data-id="${id}">Reload</button>`;
|
|
|
|
return `
|
|
<div class="plugin-card" data-id="${id}">
|
|
<div class="plugin-card-header">
|
|
<span class="plugin-name">${known.name}</span>
|
|
<span class="plugin-version">v${known.version}</span>
|
|
</div>
|
|
<div style="font-size:10px;color:#7986cb;font-family:monospace;">${id}</div>
|
|
<div class="plugin-badges">${statusBadge}${featureBadges}</div>
|
|
${actionBtn}
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
listEl.querySelectorAll('[data-action]').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
const id = btn.dataset.id;
|
|
const action = btn.dataset.action;
|
|
|
|
if (action === 'unload') {
|
|
await registry.unregisterPlugin(id);
|
|
addLog(`Plugin unloaded: ${id}`, 'warn');
|
|
} else if (action === 'reload') {
|
|
const known = knownPlugins.get(id);
|
|
if (!known) return;
|
|
try {
|
|
await registerAndLoad(id, known.pluginModule, {
|
|
filePath: known.filePath,
|
|
downloadUrl: known.downloadUrl,
|
|
});
|
|
addLog(`Plugin reloaded: ${id}`, 'success');
|
|
} catch (err) {
|
|
addLog(`Failed to reload ${id}: ${err.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
refreshPluginList();
|
|
refreshCommandList();
|
|
renderSettings();
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Loads a plugin from an arbitrary file path entered in the Load input.
|
|
* Supports CJS modules (same eval pattern as cinny-desktop).
|
|
* @param {string} filePath
|
|
*/
|
|
async function loadPluginFromPath(filePath) {
|
|
try {
|
|
const code = await testApi.readTextFile(filePath);
|
|
const raw = await evalPluginCode(code);
|
|
const p = normalisePlugin(raw);
|
|
|
|
if (!p || typeof p.onLoad !== 'function') {
|
|
throw new Error('File does not export a valid plugin (needs an onLoad function)');
|
|
}
|
|
|
|
const id = p.id ?? inferPluginId(filePath);
|
|
if (knownPlugins.has(id) && registry.getRegisteredPlugins().some(r => r.id === id)) {
|
|
throw new Error(`Plugin with id "${id}" is already loaded`);
|
|
}
|
|
|
|
await registerAndLoad(id, p, { filePath });
|
|
|
|
addLog(`Plugin loaded from path: ${id}`, 'success');
|
|
refreshPluginList();
|
|
refreshCommandList();
|
|
renderSettings();
|
|
} catch (err) {
|
|
addLog(`Failed to load plugin: ${err.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
document.getElementById('load-plugin-btn').addEventListener('click', () => {
|
|
const filePath = document.getElementById('load-plugin-path').value.trim();
|
|
if (!filePath) { addLog('Enter a path to a plugin index.js', 'error'); return; }
|
|
loadPluginFromPath(filePath);
|
|
document.getElementById('load-plugin-path').value = '';
|
|
});
|
|
|
|
document.getElementById('load-plugin-path').addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') document.getElementById('load-plugin-btn').click();
|
|
});
|
|
|
|
refreshPluginList();
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Plugin Manager — tab switching
|
|
// ---------------------------------------------------------------------------
|
|
const tabInstalled = document.getElementById('tab-installed');
|
|
const tabDirectory = document.getElementById('tab-directory');
|
|
const paneInstalled = document.getElementById('pane-installed');
|
|
const paneDirectory = document.getElementById('pane-directory');
|
|
|
|
tabInstalled.addEventListener('click', () => {
|
|
tabInstalled.classList.add('active');
|
|
tabDirectory.classList.remove('active');
|
|
paneInstalled.classList.add('active');
|
|
paneDirectory.classList.remove('active');
|
|
});
|
|
|
|
tabDirectory.addEventListener('click', () => {
|
|
tabDirectory.classList.add('active');
|
|
tabInstalled.classList.remove('active');
|
|
paneDirectory.classList.add('active');
|
|
paneInstalled.classList.remove('active');
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Plugin Directory — fetch from remote index
|
|
// ---------------------------------------------------------------------------
|
|
let directoryPlugins = [];
|
|
const dirStatusEl = document.getElementById('dir-status');
|
|
const dirListEl = document.getElementById('dir-list');
|
|
const dirSearchEl = document.getElementById('dir-search');
|
|
|
|
/** Renders marketplace cards, optionally filtered by a search query. */
|
|
function renderDirectoryList(query = '') {
|
|
const q = query.toLowerCase();
|
|
const filtered = directoryPlugins.filter(p =>
|
|
!q ||
|
|
p.name.toLowerCase().includes(q) ||
|
|
p.description.toLowerCase().includes(q) ||
|
|
(p.author ?? '').toLowerCase().includes(q) ||
|
|
(p.tags ?? []).some(t => t.toLowerCase().includes(q))
|
|
);
|
|
|
|
if (!filtered.length) {
|
|
dirListEl.innerHTML = '<div style="color:#555;font-size:12px;text-align:center;padding:16px 0;">No plugins found.</div>';
|
|
return;
|
|
}
|
|
|
|
const loadedIds = new Set(registry.getRegisteredPlugins().map(p => p.id));
|
|
|
|
dirListEl.innerHTML = filtered.map(p => {
|
|
const isLoaded = loadedIds.has(p.id);
|
|
const initial = (p.name ?? '?').charAt(0).toUpperCase();
|
|
return `
|
|
<div class="market-card">
|
|
<div class="market-card-header">
|
|
<img class="market-card-thumb" src="${p.thumbnail ?? ''}"
|
|
onerror="this.style.display='none';this.nextElementSibling.style.display='flex';"
|
|
alt="${p.name}" />
|
|
<div class="market-card-thumb-fallback" style="display:none;">${initial}</div>
|
|
<div class="market-info">
|
|
<div class="market-name" title="${p.name}">${p.name}</div>
|
|
<div class="market-author">by ${p.author ?? 'unknown'} · v${p.version ?? '?'}</div>
|
|
</div>
|
|
</div>
|
|
<div class="market-desc">${p.description ?? ''}</div>
|
|
<div class="market-footer">
|
|
${(p.tags ?? []).map(t => `<span class="market-tag">${t}</span>`).join('')}
|
|
${p.homepage ? `<a href="${p.homepage}" target="_blank"
|
|
style="font-size:10px;color:#7986cb;text-decoration:none;margin-left:auto;margin-right:6px;">↗ Homepage</a>` : ''}
|
|
<button class="market-install-btn" data-id="${p.id}" ${isLoaded ? 'disabled' : ''}>
|
|
${isLoaded ? 'Loaded' : 'Download'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
dirListEl.querySelectorAll('.market-install-btn:not([disabled])').forEach(btn => {
|
|
btn.addEventListener('click', () => downloadAndLoadPlugin(btn.dataset.id));
|
|
});
|
|
}
|
|
|
|
/** Downloads a plugin's index.js from the marketplace and loads it into the registry. */
|
|
async function downloadAndLoadPlugin(pluginId) {
|
|
const pluginMetadata = directoryPlugins.find((entry) => entry.id === pluginId);
|
|
|
|
if (!pluginMetadata) {
|
|
addLog(`Plugin ${pluginId} is not present in directory cache`, 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await marketplace.installPlugin(pluginMetadata);
|
|
addLog(`Plugin installed from directory: ${pluginId}`, 'success');
|
|
refreshPluginList();
|
|
refreshCommandList();
|
|
renderSettings();
|
|
renderDirectoryList(dirSearchEl.value);
|
|
} catch (err) {
|
|
addLog(`Failed to install ${pluginId}: ${err.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
/** Fetches the plugin index and all plugin metadata from the remote directory. */
|
|
async function fetchDirectory() {
|
|
dirStatusEl.textContent = 'Fetching plugin directory…';
|
|
dirListEl.innerHTML = '';
|
|
|
|
try {
|
|
directoryPlugins = await marketplace.fetchMarketplacePlugins();
|
|
dirStatusEl.textContent = `${directoryPlugins.length} plugin${directoryPlugins.length !== 1 ? 's' : ''} in directory.`;
|
|
addLog(`Plugin directory fetched: ${directoryPlugins.length} entries`, 'success');
|
|
renderDirectoryList(dirSearchEl.value);
|
|
} catch (err) {
|
|
dirStatusEl.textContent = `Failed to fetch directory: ${err.message}`;
|
|
addLog(`Directory fetch failed: ${err.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
document.getElementById('dir-refresh').addEventListener('click', fetchDirectory);
|
|
|
|
dirSearchEl.addEventListener('input', () => renderDirectoryList(dirSearchEl.value));
|
|
|
|
// Populate registered command list
|
|
function refreshCommandList() {
|
|
const cmdListEl = document.getElementById('cmd-list');
|
|
cmdListEl.innerHTML = registry
|
|
.getCommands()
|
|
.map(c => `<li><code>/${c.name}</code> — ${c.command.description ?? ''}</li>`)
|
|
.join('') || '<li style="color:#555">No commands registered</li>';
|
|
}
|
|
|
|
const cmdListEl = document.getElementById('cmd-list');
|
|
cmdListEl.innerHTML = registry
|
|
.getCommands()
|
|
.map(c => `<li><code>/${c.name}</code> — ${c.command.description ?? ''}</li>`)
|
|
.join('');
|
|
|
|
// Render settings form
|
|
renderSettings();
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// UI — Commands
|
|
// ---------------------------------------------------------------------------
|
|
const cmdInput = document.getElementById('cmd-input');
|
|
const cmdResult = document.getElementById('cmd-result');
|
|
|
|
document.getElementById('cmd-run').addEventListener('click', async () => {
|
|
const raw = cmdInput.value.trim();
|
|
if (!raw.startsWith('/')) {
|
|
addLog('Commands must start with /', 'error');
|
|
return;
|
|
}
|
|
const [name, ...rest] = raw.slice(1).split(' ');
|
|
try {
|
|
const result = await registry.executeCommand(name, rest.join(' '));
|
|
cmdResult.textContent = result ?? '(no output)';
|
|
addLog(`/${name}: ${result ?? '(no output)'}`, 'success');
|
|
} catch (err) {
|
|
cmdResult.textContent = err.message;
|
|
addLog(err.message, 'error');
|
|
}
|
|
cmdInput.value = '';
|
|
});
|
|
|
|
cmdInput.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') document.getElementById('cmd-run').click();
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// UI — Message Interceptor
|
|
// ---------------------------------------------------------------------------
|
|
document.getElementById('msg-send').addEventListener('click', async () => {
|
|
const content = document.getElementById('msg-input').value;
|
|
const msg = { content, roomId: 'test-room', eventType: 'm.room.message' };
|
|
const processed = await registry.processBeforeSend(msg);
|
|
document.getElementById('msg-result').textContent =
|
|
`Original: "${content}"\nProcessed: "${processed.content}"`;
|
|
addLog(`Intercepted: "${content}" → "${processed.content}"`, 'log');
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// UI — Theme
|
|
// ---------------------------------------------------------------------------
|
|
document.getElementById('theme-apply').addEventListener('click', () => {
|
|
const themes = registry.getPluginThemes();
|
|
if (!themes.length) { addLog('No plugin themes registered', 'error'); return; }
|
|
const theme = themes[0];
|
|
document.body.className = theme.className;
|
|
addLog(`Applied theme: ${theme.name}`, 'success');
|
|
});
|
|
|
|
document.getElementById('theme-reset').addEventListener('click', () => {
|
|
document.body.className = '';
|
|
addLog('Theme reset', 'log');
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// UI — Custom Events
|
|
// ---------------------------------------------------------------------------
|
|
document.getElementById('event-fire').addEventListener('click', () => {
|
|
const payload = { from: 'UI button', timestamp: Date.now() };
|
|
eventEmitter.emit('test-event', payload);
|
|
addLog(`Fired test-event with payload: ${JSON.stringify(payload)}`, 'log');
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Settings renderer
|
|
// ---------------------------------------------------------------------------
|
|
function renderSettings() {
|
|
const schema = registry.getPluginSettingsSchema('example-plugin');
|
|
if (!schema) return;
|
|
const container = document.getElementById('settings-container');
|
|
container.innerHTML = '';
|
|
|
|
for (const [key, def] of Object.entries(schema)) {
|
|
const value = registry.getPluginSetting('example-plugin', key);
|
|
const row = document.createElement('div');
|
|
row.className = 'setting-row';
|
|
|
|
const label = document.createElement('label');
|
|
label.textContent = def.label ?? key;
|
|
row.appendChild(label);
|
|
|
|
let input;
|
|
if (def.type === 'boolean') {
|
|
input = document.createElement('input');
|
|
input.type = 'checkbox';
|
|
input.checked = !!value;
|
|
input.addEventListener('change', () => {
|
|
registry.setPluginSetting('example-plugin', key, input.checked);
|
|
addLog(`Setting "${key}" = ${input.checked}`, 'log');
|
|
});
|
|
} else if (def.type === 'select') {
|
|
input = document.createElement('select');
|
|
(def.options ?? []).forEach((opt) => {
|
|
const o = document.createElement('option');
|
|
o.value = opt.value;
|
|
o.textContent = opt.label;
|
|
if (opt.value === value) o.selected = true;
|
|
input.appendChild(o);
|
|
});
|
|
input.addEventListener('change', () => {
|
|
registry.setPluginSetting('example-plugin', key, input.value);
|
|
addLog(`Setting "${key}" = ${input.value}`, 'log');
|
|
});
|
|
} else {
|
|
input = document.createElement('input');
|
|
input.type = 'text';
|
|
input.value = value ?? '';
|
|
input.addEventListener('change', () => {
|
|
registry.setPluginSetting('example-plugin', key, input.value);
|
|
addLog(`Setting "${key}" = "${input.value}"`, 'log');
|
|
});
|
|
}
|
|
|
|
row.appendChild(input);
|
|
container.appendChild(row);
|
|
}
|
|
}
|
|
})();
|