From f45ac3c35f6b18feabce6153f5fcf8adaba54f11 Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Fri, 22 May 2026 15:54:33 -0500 Subject: [PATCH] Update plugin rendering api --- impro-plugin/package.json | 2 +- package.json | 2 +- src/css/style.css | 11 ++++++----- src/index.html | 2 ++ src/js/plugins/pluginRendering.js | 13 ++++++------- src/js/plugins/pluginService.js | 12 ++++++++++-- src/js/views/settings/pluginDetail.view.js | 2 +- tests/unit/specs/plugins/pluginRendering.test.js | 4 ++-- 8 files changed, 29 insertions(+), 19 deletions(-) diff --git a/impro-plugin/package.json b/impro-plugin/package.json index 17c18f92..23a5c8fe 100644 --- a/impro-plugin/package.json +++ b/impro-plugin/package.json @@ -1,5 +1,5 @@ { - "name": "impro-plugin", + "name": "@impro.social/impro-plugin", "version": "0.0.3", "type": "module", "main": "main.js", diff --git a/package.json b/package.json index 84d8fc2e..647982ca 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.14.84", + "version": "0.14.85", "type": "module", "scripts": { "start": "rm -rf build && NODE_ENV=development eleventy --serve", diff --git a/src/css/style.css b/src/css/style.css index 9dd32429..c2987d93 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -7495,16 +7495,17 @@ image-cropper { height: 24px; } -.plugin-settings-tab { - padding: 16px; -} +/* .plugin-settings-tab { + padding-top: 16px; + padding-bottom: 16px; +} */ .plugin-settings-tab h1, .plugin-settings-tab h2, .plugin-settings-tab h3, .plugin-settings-tab h4 { color: var(--text-color); - margin: 24px 0 8px; + padding: 16px; } .plugin-settings-tab h1:first-child, @@ -7541,7 +7542,7 @@ image-cropper { align-items: center; justify-content: space-between; gap: 12px 16px; - padding: 16px 0; + padding: 16px 16px; border-bottom: var(--hair) solid var(--generic-border-color); } diff --git a/src/index.html b/src/index.html index f8bad65d..98c75e4e 100644 --- a/src/index.html +++ b/src/index.html @@ -225,6 +225,8 @@ pluginService, }; + pluginService.setRenderContext(context); + const router = new Router(); router.addRoute("/", () => homeView); router.addRoute("/intent/compose", () => homeView); diff --git a/src/js/plugins/pluginRendering.js b/src/js/plugins/pluginRendering.js index 2951a060..e809c4e9 100644 --- a/src/js/plugins/pluginRendering.js +++ b/src/js/plugins/pluginRendering.js @@ -119,10 +119,10 @@ function resolveTag(node, pluginId) { // Render a serialized VirtualEl node ({ tag, attrs, text, children }) into a DOM element. export class PluginRenderer { - constructor(pluginBridge, pluginId, dataLayer = null) { + constructor(pluginBridge, pluginId, renderContext) { this.pluginBridge = pluginBridge; this.pluginId = pluginId; - this.dataLayer = dataLayer; + this.renderContext = renderContext; } createRoot() { @@ -162,12 +162,11 @@ export class PluginRenderer { }); } if (tag === "plugin-profiles-list") { - if (!this.dataLayer) { - throw new Error( - `[plugins] "${pluginId}" rendered but the renderer was created without a dataLayer`, - ); + const { dataLayer } = this.renderContext; + if (!dataLayer) { + throw new Error("Datalayer is required"); } - element.dataLayer = this.dataLayer; + element.dataLayer = dataLayer; } if (tag === "toggle-switch") { // toggle-switch is controlled — flip its state here since the plugin diff --git a/src/js/plugins/pluginService.js b/src/js/plugins/pluginService.js index 4a8706e5..acc65405 100644 --- a/src/js/plugins/pluginService.js +++ b/src/js/plugins/pluginService.js @@ -70,12 +70,20 @@ export class PluginService extends EventEmitter { ); this.prefManager = new PluginPreferencesManager(preferencesProvider); this.session = session; + this._renderContext = null; this._setupRegistries(); this._setupHostMethods(); } - getRenderer(pluginId, dataLayer = null) { - return new PluginRenderer(this.pluginBridge, pluginId, dataLayer); + setRenderContext(renderContext) { + this._renderContext = renderContext; + } + + getRenderer(pluginId) { + if (!this._renderContext) { + throw new Error("Render context not loaded"); + } + return new PluginRenderer(this.pluginBridge, pluginId, this._renderContext); } _setupRegistries() { diff --git a/src/js/views/settings/pluginDetail.view.js b/src/js/views/settings/pluginDetail.view.js index 3759f0cc..640aac19 100644 --- a/src/js/views/settings/pluginDetail.view.js +++ b/src/js/views/settings/pluginDetail.view.js @@ -60,7 +60,7 @@ class SettingsPluginDetailView extends View { } }); - const tabRoot = pluginService.getRenderer(pluginId, dataLayer).createRoot(); + const tabRoot = pluginService.getRenderer(pluginId).createRoot(); function renderTabContent(containerNode) { if (!containerNode) return null; diff --git a/tests/unit/specs/plugins/pluginRendering.test.js b/tests/unit/specs/plugins/pluginRendering.test.js index 7fa611ed..402436ee 100644 --- a/tests/unit/specs/plugins/pluginRendering.test.js +++ b/tests/unit/specs/plugins/pluginRendering.test.js @@ -38,7 +38,7 @@ t.describe("PluginRenderer:render with fresh roots", (it) => { it("rewrites as and passes dataLayer", () => { const { bridge } = makeBridge(); const dataLayer = { declarative: { ensureProfiles: async () => [] } }; - const renderer = new PluginRenderer(bridge, "demo", dataLayer); + const renderer = new PluginRenderer(bridge, "demo", { dataLayer }); const element = renderer.createRoot().render({ tag: "profiles-list", attrs: { dids: "did:test:a,did:test:b" }, @@ -50,7 +50,7 @@ t.describe("PluginRenderer:render with fresh roots", (it) => { it("drops disallowed attributes from ", () => { const { bridge } = makeBridge(); - const renderer = new PluginRenderer(bridge, "demo", {}); + const renderer = new PluginRenderer(bridge, "demo", { dataLayer: {} }); const element = renderer.createRoot().render({ tag: "profiles-list", attrs: { dids: "did:test:a", onclick: "alert(1)" }, -- 2.54.0