@rool-dev/extension 0.3.5

package/dist/dev/DevHostController.js

@@ -0,0 +1,429 @@
+/**
+ * DevHostController — business logic for the dev host shell.
+ *
+ * Owns the RoolClient lifecycle, space management, channel-per-extension management,
+ * bridge hosting, and published extension management. The Svelte component is a thin
+ * view layer that reads this controller's state and calls its methods.
+ *
+ * The controller is self-sufficient: it manages the full lifecycle including
+ * DOM flush (via injected tick) and bridge binding. Svelte components can call
+ * controller methods directly without needing wrappers.
+ */
+import { RoolClient } from '@rool-dev/sdk';
+import { createBridgeHost } from '../host.js';
+import { ENV_URLS } from '../manifest.js';
+// ---------------------------------------------------------------------------
+// localStorage helpers
+// ---------------------------------------------------------------------------
+function storageGet(key) {
+    try {
+        return localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+function storageSet(key, value) {
+    try {
+        if (value === null)
+            localStorage.removeItem(key);
+        else
+            localStorage.setItem(key, value);
+    }
+    catch { /* ignore */ }
+}
+// ---------------------------------------------------------------------------
+// DevHostController
+// ---------------------------------------------------------------------------
+export class DevHostController {
+    // --- Config (immutable after construction) ---
+    channelId;
+    extensionUrl;
+    manifest;
+    manifestError;
+    // --- SDK client ---
+    client;
+    // --- Observable state (Svelte component mirrors these via $state) ---
+    spaces = [];
+    currentSpaceId = null;
+    statusText = 'Initializing...';
+    statusState = 'off';
+    placeholderText = 'Authenticating...';
+    env;
+    publishedExtensions = [];
+    installedExtensionIds = [];
+    sidebarCollapsed = false;
+    publishState = 'idle';
+    publishMessage = null;
+    publishUrl = null;
+    // --- Per-tab state (imperative, not rendered directly) ---
+    channels = {};
+    iframeEls = {};
+    bridgeHosts = {};
+    // --- Dependencies ---
+    _onChange;
+    _tick;
+    // --- Storage keys ---
+    _spaceKey;
+    constructor(options, onChange, tick) {
+        this.channelId = options.channelId;
+        this.extensionUrl = options.extensionUrl;
+        this.manifest = options.manifest;
+        this.manifestError = options.manifestError;
+        this._onChange = onChange;
+        this._tick = tick;
+        this._spaceKey = `rool-devhost:${options.channelId}:space`;
+        // Restore persisted state
+        this.env = this._getSavedEnv();
+        this.sidebarCollapsed = storageGet('rool-devhost:collapsed') === 'true';
+    }
+    // ---------------------------------------------------------------------------
+    // Derived
+    // ---------------------------------------------------------------------------
+    get tabs() {
+        const localTab = {
+            id: 'local',
+            name: this.manifest?.name ?? 'Local',
+            url: this.extensionUrl,
+            isLocal: true,
+        };
+        const extensionTabs = this.installedExtensionIds
+            .map((id) => {
+            const ch = this.channels[id];
+            if (!ch?.extensionUrl)
+                return null;
+            return {
+                id,
+                name: ch.channelName ?? id,
+                url: ch.extensionUrl,
+                isLocal: false,
+            };
+        })
+            .filter((t) => t !== null);
+        return [localTab, ...extensionTabs];
+    }
+    // ---------------------------------------------------------------------------
+    // Bootstrap
+    // ---------------------------------------------------------------------------
+    async boot() {
+        const urls = ENV_URLS[this.env];
+        this.client = new RoolClient({ baseUrl: urls.baseUrl, authUrl: urls.authUrl });
+        const authenticated = await this.client.initialize();
+        if (!authenticated) {
+            this.placeholderText = 'Redirecting to login...';
+            this.statusText = 'Authenticating...';
+            this.statusState = 'loading';
+            this._onChange();
+            this.client.login('Extension Dev Host');
+            return;
+        }
+        this.placeholderText = 'Loading spaces...';
+        this.statusText = 'Loading spaces...';
+        this.statusState = 'loading';
+        this._onChange();
+        const [spaceList, extensionList] = await Promise.all([
+            this.client.listSpaces(),
+            this.client.listExtensions().catch(() => []),
+        ]);
+        this.spaces = spaceList;
+        this.publishedExtensions = extensionList;
+        this.client.on('spaceAdded', (space) => {
+            if (!this.spaces.some((s) => s.id === space.id)) {
+                this.spaces = [...this.spaces, space];
+                this._onChange();
+            }
+        });
+        this.client.on('spaceRemoved', (id) => {
+            this.spaces = this.spaces.filter((s) => s.id !== id);
+            if (this.currentSpaceId === id) {
+                this.currentSpaceId = null;
+                this.statusText = 'Disconnected';
+                this.statusState = 'off';
+            }
+            this._onChange();
+        });
+        this.client.on('spaceRenamed', (id, name) => {
+            this.spaces = this.spaces.map((s) => (s.id === id ? { ...s, name } : s));
+            this._onChange();
+        });
+        this.statusText = 'Ready';
+        this.statusState = 'off';
+        const savedSpace = storageGet(this._spaceKey);
+        if (savedSpace && this.spaces.some((s) => s.id === savedSpace)) {
+            await this.selectSpace(savedSpace);
+        }
+        else {
+            this.placeholderText = 'Select a space to load the extension';
+            this._onChange();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Space selection
+    // ---------------------------------------------------------------------------
+    async selectSpace(spaceId) {
+        this._destroyAllBridgesAndChannels();
+        this.currentSpaceId = spaceId;
+        storageSet(this._spaceKey, spaceId);
+        this.statusText = 'Opening channels...';
+        this.statusState = 'loading';
+        this.placeholderText = 'Opening channels...';
+        this._onChange();
+        try {
+            // Open the local extension's channel
+            const localChannel = await this.client.openChannel(spaceId, this.channelId);
+            this.channels['local'] = localChannel;
+            // Apply manifest settings to the local channel
+            await this._syncManifest(localChannel, this.manifest);
+            // Discover installed extensions: channels with an extensionUrl
+            const space = await this.client.openSpace(spaceId);
+            const spaceChannels = space.getChannels();
+            this.installedExtensionIds = spaceChannels
+                .filter((ch) => ch.extensionUrl && ch.id !== this.channelId)
+                .map((ch) => ch.id);
+            // Open channels for each installed extension (server already applied manifest)
+            for (const extId of this.installedExtensionIds) {
+                try {
+                    const ch = await this.client.openChannel(spaceId, extId);
+                    this.channels[extId] = ch;
+                }
+                catch (e) {
+                    console.error(`Failed to open channel for extension ${extId}:`, e);
+                }
+            }
+            // Show iframes, wait for DOM to mount them, then bind bridges
+            this.placeholderText = null;
+            this._onChange();
+            await this._tick();
+            this._bindAllBridges();
+            const spaceName = this.spaces.find((s) => s.id === this.currentSpaceId)?.name ?? spaceId;
+            this.statusText = `Connected \u2014 ${spaceName}`;
+            this.statusState = 'ok';
+            this._onChange();
+        }
+        catch (e) {
+            console.error('Failed to open channel:', e);
+            this.placeholderText = `Error: ${e instanceof Error ? e.message : String(e)}`;
+            this.statusText = 'Error';
+            this.statusState = 'off';
+            this._onChange();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Extension installation / removal
+    // ---------------------------------------------------------------------------
+    /**
+     * Install an extension in the current space.
+     *
+     * Opens the channel first, THEN adds the tab. This ensures the channel
+     * exists when the iframe mounts so registerIframe → _bindBridge can
+     * connect the bridge before the extension sends its init message.
+     */
+    async installExtension(extensionId) {
+        if (!this.currentSpaceId)
+            return;
+        if (this.installedExtensionIds.includes(extensionId))
+            return;
+        try {
+            // Step 1: install extension (server applies manifest: name, systemInstruction, collections)
+            const channelId = await this.client.installExtension(this.currentSpaceId, extensionId);
+            // Step 2: open channel for live subscription
+            const ch = await this.client.openChannel(this.currentSpaceId, channelId);
+            this.channels[extensionId] = ch;
+            // Step 3: add the card, flush DOM, bind bridge
+            this.installedExtensionIds = [...this.installedExtensionIds, extensionId];
+            this._onChange();
+            await this._tick();
+            this._bindBridge(extensionId);
+        }
+        catch (e) {
+            console.error(`Failed to install extension ${extensionId}:`, e);
+            this.installedExtensionIds = this.installedExtensionIds.filter((id) => id !== extensionId);
+            this._onChange();
+        }
+    }
+    /**
+     * Uninstall an extension from the current space.
+     * Deletes the channel and removes the card.
+     */
+    removeExtension(extensionId) {
+        this._destroyTab(extensionId);
+        this.installedExtensionIds = this.installedExtensionIds.filter((id) => id !== extensionId);
+        this._onChange();
+        // Delete the channel in the background (fire-and-forget)
+        if (this.currentSpaceId) {
+            this.client.deleteChannel(this.currentSpaceId, extensionId).catch((e) => {
+                console.error(`Failed to delete channel for extension ${extensionId}:`, e);
+            });
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Publishing
+    // ---------------------------------------------------------------------------
+    async publish() {
+        if (!this.manifest) {
+            this.publishState = 'error';
+            this.publishMessage = 'No valid manifest found';
+            this._onChange();
+            return;
+        }
+        this.publishState = 'building';
+        this.publishMessage = null;
+        this.publishUrl = null;
+        this._onChange();
+        try {
+            // Step 1: trigger server-side Vite build + zip
+            const buildRes = await fetch('/__rool-host/publish', { method: 'POST' });
+            if (!buildRes.ok) {
+                const body = await buildRes.json().catch(() => ({ error: 'Build failed' }));
+                throw new Error(body.error || 'Build failed');
+            }
+            const zipBlob = await buildRes.blob();
+            // Step 2: publish via SDK
+            this.publishState = 'uploading';
+            this._onChange();
+            const result = await this.client.publishExtension(this.manifest.id, {
+                bundle: zipBlob,
+            });
+            // Step 3: update published extensions list
+            const existingIdx = this.publishedExtensions.findIndex((a) => a.extensionId === result.extensionId);
+            if (existingIdx >= 0) {
+                this.publishedExtensions = [
+                    ...this.publishedExtensions.slice(0, existingIdx),
+                    result,
+                    ...this.publishedExtensions.slice(existingIdx + 1),
+                ];
+            }
+            else {
+                this.publishedExtensions = [...this.publishedExtensions, result];
+            }
+            this.publishState = 'done';
+            this.publishUrl = result.url;
+            this._onChange();
+            // Auto-clear success state after 5 seconds
+            setTimeout(() => {
+                if (this.publishState === 'done') {
+                    this.publishState = 'idle';
+                    this.publishUrl = null;
+                    this._onChange();
+                }
+            }, 5000);
+        }
+        catch (e) {
+            this.publishState = 'error';
+            this.publishMessage = e instanceof Error ? e.message : String(e);
+            this._onChange();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Environment switching
+    // ---------------------------------------------------------------------------
+    async switchEnv(newEnv) {
+        if (newEnv === this.env)
+            return;
+        this.env = newEnv;
+        storageSet('rool-devhost:env', newEnv);
+        this._destroyAllBridgesAndChannels();
+        this.currentSpaceId = null;
+        this.spaces = [];
+        this.publishedExtensions = [];
+        this.installedExtensionIds = [];
+        this._onChange();
+        await this.boot();
+    }
+    // ---------------------------------------------------------------------------
+    // Sidebar
+    // ---------------------------------------------------------------------------
+    toggleSidebar() {
+        this.sidebarCollapsed = !this.sidebarCollapsed;
+        storageSet('rool-devhost:collapsed', String(this.sidebarCollapsed));
+        this._onChange();
+    }
+    // ---------------------------------------------------------------------------
+    // Iframe registration (called by Svelte action)
+    // ---------------------------------------------------------------------------
+    registerIframe(tabId, el) {
+        this.iframeEls[tabId] = el;
+        this._bindBridge(tabId);
+    }
+    unregisterIframe(tabId) {
+        delete this.iframeEls[tabId];
+    }
+    // ---------------------------------------------------------------------------
+    // Cleanup
+    // ---------------------------------------------------------------------------
+    logout() {
+        this.client.logout();
+        window.location.reload();
+    }
+    // ---------------------------------------------------------------------------
+    // Private helpers
+    // ---------------------------------------------------------------------------
+    _bindBridge(tabId) {
+        const el = this.iframeEls[tabId];
+        const ch = this.channels[tabId];
+        if (el && ch && !this.bridgeHosts[tabId]) {
+            this.bridgeHosts[tabId] = createBridgeHost({ channel: ch, iframe: el });
+        }
+    }
+    _bindAllBridges() {
+        for (const tab of this.tabs) {
+            this._bindBridge(tab.id);
+        }
+    }
+    _destroyTab(tabId) {
+        this.bridgeHosts[tabId]?.destroy();
+        delete this.bridgeHosts[tabId];
+        this.channels[tabId]?.close();
+        delete this.channels[tabId];
+        delete this.iframeEls[tabId];
+    }
+    _destroyAllBridgesAndChannels() {
+        for (const host of Object.values(this.bridgeHosts)) {
+            host.destroy();
+        }
+        for (const ch of Object.values(this.channels)) {
+            ch.close();
+        }
+        this.bridgeHosts = {};
+        this.channels = {};
+        this.iframeEls = {};
+    }
+    /**
+     * Idempotently sync a manifest's settings (name, system instruction, collections)
+     * onto a channel. Safe to call every time the extension is opened.
+     */
+    async _syncManifest(channel, manifest) {
+        if (!manifest)
+            return;
+        if (channel.channelName !== manifest.name) {
+            await channel.rename(manifest.name);
+        }
+        const targetInstruction = manifest.systemInstruction ?? null;
+        const currentInstruction = channel.getSystemInstruction() ?? null;
+        if (currentInstruction !== targetInstruction) {
+            await channel.setSystemInstruction(targetInstruction);
+        }
+        const currentSchema = channel.getSchema();
+        const syncCollections = async (colls) => {
+            for (const [name, fields] of Object.entries(colls)) {
+                if (name in currentSchema) {
+                    await channel.alterCollection(name, fields);
+                }
+                else {
+                    await channel.createCollection(name, fields);
+                }
+            }
+        };
+        const { write: w, read: r } = manifest.collections;
+        if (w && w !== '*')
+            await syncCollections(w);
+        if (r && r !== '*')
+            await syncCollections(r);
+    }
+    _getSavedEnv() {
+        const saved = storageGet('rool-devhost:env');
+        if (saved === 'local' || saved === 'dev' || saved === 'prod')
+            return saved;
+        return 'prod';
+    }
+}

package/dist/dev/HostShell.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { onMount, tick } from 'svelte';
+  import { DevHostController } from './DevHostController.js';
+  import type { ExtensionTab } from './DevHostController.js';
+  import type { Manifest } from '../manifest.js';
+  import type { RoolSpaceInfo, PublishedExtensionInfo } from '@rool-dev/sdk';
+  import type { Environment } from '../manifest.js';
+  import Sidebar from './Sidebar.svelte';
+  import AppGrid from './AppGrid.svelte';
+
+  // Props injected from the mount entry
+  interface Props {
+    channelId: string;
+    extensionUrl: string;
+    manifest: Manifest | null;
+    manifestError: string | null;
+  }
+
+  const props: Props = $props();
+
+  // ---------------------------------------------------------------------------
+  // Controller + reactive state mirror
+  // ---------------------------------------------------------------------------
+
+  let spaces: RoolSpaceInfo[] = $state([]);
+  let currentSpaceId: string | null = $state(null);
+  let statusText: string = $state('Initializing...');
+  let statusState: 'ok' | 'loading' | 'off' = $state('off');
+  let placeholderText: string | null = $state('Authenticating...');
+  let sidebarCollapsed: boolean = $state(false);
+  let env: Environment = $state('prod');
+  let publishedExtensions: PublishedExtensionInfo[] = $state([]);
+  let installedExtensionIds: string[] = $state([]);
+  let tabs: ExtensionTab[] = $state([]);
+  let publishState: 'idle' | 'building' | 'uploading' | 'done' | 'error' = $state('idle');
+  let publishMessage: string | null = $state(null);
+  let publishUrl: string | null = $state(null);
+
+  // UI-only state (not in controller)
+  let dropdownOpen: boolean = $state(false);
+
+  const controller = new DevHostController(
+    props,
+    syncState,
+    tick,
+  );
+
+  function syncState() {
+    spaces = controller.spaces;
+    currentSpaceId = controller.currentSpaceId;
+    statusText = controller.statusText;
+    statusState = controller.statusState;
+    placeholderText = controller.placeholderText;
+    sidebarCollapsed = controller.sidebarCollapsed;
+    env = controller.env;
+    publishedExtensions = controller.publishedExtensions;
+    installedExtensionIds = controller.installedExtensionIds;
+    tabs = controller.tabs;
+    publishState = controller.publishState;
+    publishMessage = controller.publishMessage;
+    publishUrl = controller.publishUrl;
+  }
+
+  // Derived: published apps not yet installed (excluding the local dev app)
+  let uninstalledExtensions = $derived(
+    publishedExtensions.filter((ext) => ext.extensionId !== props.channelId && !installedExtensionIds.includes(ext.extensionId)),
+  );
+
+  // Initial sync
+  syncState();
+
+  // ---------------------------------------------------------------------------
+  // Bootstrap
+  // ---------------------------------------------------------------------------
+
+  onMount(() => {
+    controller.boot();
+
+    function handleClickOutside(e: MouseEvent) {
+      if (dropdownOpen && !(e.target as Element)?.closest('[data-dropdown]')) {
+        dropdownOpen = false;
+      }
+    }
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  });
+</script>
+
+<!-- Sidebar -->
+<Sidebar
+  {controller}
+  manifest={props.manifest}
+  manifestError={props.manifestError}
+  {spaces}
+  {currentSpaceId}
+  {env}
+  {statusText}
+  {statusState}
+  {sidebarCollapsed}
+  {publishState}
+  {publishMessage}
+  {publishUrl}
+  bind:dropdownOpen
+/>
+
+<!-- Main area -->
+<div class="flex-1 min-w-0 flex flex-col">
+  {#if placeholderText}
+    <div class="flex items-center justify-center h-full text-slate-400 text-sm">{placeholderText}</div>
+  {:else}
+    <AppGrid
+      {controller}
+      {tabs}
+      uninstalledExtensions={uninstalledExtensions}
+      onInstallExtension={(id) => controller.installExtension(id)}
+      onRemoveExtension={(id) => controller.removeExtension(id)}
+    />
+  {/if}
+</div>

package/dist/dev/HostShell.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Manifest } from '../manifest.js';
+interface Props {
+    channelId: string;
+    extensionUrl: string;
+    manifest: Manifest | null;
+    manifestError: string | null;
+}
+declare const HostShell: import("svelte").Component<Props, {}, "">;
+type HostShell = ReturnType<typeof HostShell>;
+export default HostShell;
+//# sourceMappingURL=HostShell.svelte.d.ts.map

package/dist/dev/HostShell.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HostShell.svelte.d.ts","sourceRoot":"","sources":["../../src/dev/HostShell.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAQ7C,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAgGH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}