Multi-Tenant Pluggable Widget Framework

5 collapsed lines
1
const { ModuleFederationPlugin } = require("webpack").container
2

3
module.exports = {
4
  // ... other config
5
  plugins: [
6
    new ModuleFederationPlugin({
7
      name: "host",
8
      remotes: {
9
        // Static remotes (known at build time)
10
        widgetA: "widgetA@https://cdn.example.com/widget-a/remoteEntry.js",
11
        // Dynamic remotes resolved at runtime
12
        widgetB: `promise new Promise(resolve => {
13
          const remoteUrl = window.__WIDGET_REGISTRY__["widgetB"];
14
          const script = document.createElement("script");
15
          script.src = remoteUrl;
16
          script.onload = () => resolve(window.widgetB);
17
          document.head.appendChild(script);
18
        })`,
19
      },
20
      shared: {
21
        react: { singleton: true, requiredVersion: "^18.0.0" },
22
        "react-dom": { singleton: true, requiredVersion: "^18.0.0" },
23
      },
24
    }),
2 collapsed lines
25
  ],
26
}

5 collapsed lines
1
const { ModuleFederationPlugin } = require("webpack").container
2

3
module.exports = {
4
  plugins: [
5
    new ModuleFederationPlugin({
6
      name: "widgetA",
7
      filename: "remoteEntry.js",
8
      exposes: {
9
        "./Widget": "./src/Widget", // What this remote offers
10
      },
11
      shared: {
12
        react: { singleton: true, requiredVersion: "^18.0.0" },
13
        "react-dom": { singleton: true, requiredVersion: "^18.0.0" },
14
      },
15
    }),
16
  ],
17
}

3 collapsed lines
1
import React, { Suspense, lazy } from "react";
2

3
// Dynamic import of federated module
4
const WidgetA = lazy(() => import("widgetA/Widget"));
5

6
export function WidgetSlot({ widgetId }: { widgetId: string }) {
7
  // In production: resolve widget ID to remote dynamically
8
  return (
9
    <Suspense fallback={<WidgetSkeleton />}>
10
      <WidgetA />
11
    </Suspense>
12
  );
13
}

1
interface WidgetMessage {
2
  type: string
3
  requestId: string
4
  payload: unknown
5
}
6

7
class WidgetBridge {
8
  private iframe: HTMLIFrameElement
9
  private pendingRequests = new Map<string, { resolve: Function; reject: Function }>()
10
  private trustedOrigin: string
11

12
  constructor(iframe: HTMLIFrameElement, trustedOrigin: string) {
13
    this.iframe = iframe
14
    this.trustedOrigin = trustedOrigin
15
    window.addEventListener("message", this.handleMessage)
16
  }
17

18
  private handleMessage = (event: MessageEvent<WidgetMessage>) => {
19
    // CRITICAL: Always validate origin
20
    if (event.origin !== this.trustedOrigin) return
21

22
    const { type, requestId, payload } = event.data
23

24
    if (type === "API_RESPONSE" && this.pendingRequests.has(requestId)) {
25
      const { resolve } = this.pendingRequests.get(requestId)!
26
      this.pendingRequests.delete(requestId)
27
      resolve(payload)
28
    }
29
  }
30

31
  async call(method: string, args: unknown[]): Promise<unknown> {
32
    const requestId = crypto.randomUUID()
33

34
    return new Promise((resolve, reject) => {
35
      this.pendingRequests.set(requestId, { resolve, reject })
36

37
      this.iframe.contentWindow?.postMessage(
38
        { type: "API_CALL", requestId, method, args },
39
        this.trustedOrigin, // CRITICAL: Specify target origin
40
      )
41

42
      // Timeout to prevent hanging requests
43
      setTimeout(() => {
44
        if (this.pendingRequests.has(requestId)) {
45
          this.pendingRequests.delete(requestId)
46
          reject(new Error(`Widget call timed out: ${method}`))
47
        }
48
      }, 5000)
49
    })
50
  }
51
}

1
// Inside the iframe: SDK shim that talks to host
2
const hostSDK = {
3
  async showNotification(message: string): Promise<void> {
4
    return callHost("showNotification", [message])
5
  },
6

7
  async getData(key: string): Promise<unknown> {
8
    return callHost("getData", [key])
9
  },
10
}
11

12
function callHost(method: string, args: unknown[]): Promise<unknown> {
13
  const requestId = crypto.randomUUID()
14

15
  return new Promise((resolve) => {
16
    const handler = (event: MessageEvent) => {
17
      if (event.data.requestId === requestId && event.data.type === "API_RESPONSE") {
18
        window.removeEventListener("message", handler)
19
        resolve(event.data.payload)
20
      }
21
    }
22
    window.addEventListener("message", handler)
23

24
    window.parent.postMessage(
25
      { type: "API_CALL", requestId, method, args },
26
      "*", // Widget doesn't know host origin; host validates on receive
27
    )
28
  })
29
}
30

31
// Expose SDK to widget code
32
;(window as any).hostSDK = hostSDK

1
class WidgetContainer extends HTMLElement {
2
  private shadow: ShadowRoot
3

4
  constructor() {
5
    super()
6
    // 'closed' prevents external access to shadow root
7
    this.shadow = this.attachShadow({ mode: "closed" })
8
  }
9

10
  async loadWidget(widgetUrl: string) {
11
    // Fetch widget bundle
12
    const response = await fetch(widgetUrl)
13
    const widgetCode = await response.text()
14

15
    // Create isolated style scope
16
    const style = document.createElement("style")
17
    style.textContent = await this.fetchWidgetStyles(widgetUrl)
18

19
    // Create widget container
20
    const container = document.createElement("div")
21
    container.className = "widget-root"
22

23
    this.shadow.appendChild(style)
24
    this.shadow.appendChild(container)
25

26
    // Execute widget code in this context
27
    // WARNING: No JS isolation—widget code runs in host context
28
    const widgetModule = new Function("container", "hostSDK", widgetCode)
29
    widgetModule(container, window.hostSDK)
30
  }
31
}
32

33
customElements.define("widget-container", WidgetContainer)

5 collapsed lines
1
import { newQuickJSWASMModule, QuickJSWASMModule, QuickJSContext } from "quickjs-emscripten"
2

3
class PluginSandbox {
4
  private vm: QuickJSWASMModule
5
  private context: QuickJSContext
6

7
  async initialize() {
8
    this.vm = await newQuickJSWASMModule()
9
    this.context = this.vm.newContext()
10

11
    // Expose host API to sandbox
12
    this.exposeHostAPI()
13
  }
14

15
  private exposeHostAPI() {
16
    const hostAPI = this.context.newObject()
17

18
    // Expose showNotification
19
    const showNotification = this.context.newFunction("showNotification", (msgHandle) => {
20
      const message = this.context.getString(msgHandle)
21
      // Call actual host notification system
22
      window.hostNotifications.show(message)
23
      return this.context.undefined
24
    })
25

26
    this.context.setProp(hostAPI, "showNotification", showNotification)
27
    this.context.setProp(this.context.global, "figma", hostAPI)
28

29
    showNotification.dispose()
30
    hostAPI.dispose()
31
  }
32

33
  async executePlugin(code: string): Promise<void> {
34
    const result = this.context.evalCode(code)
11 collapsed lines
35
    if (result.error) {
36
      const error = this.context.dump(result.error)
37
      result.error.dispose()
38
      throw new Error(`Plugin error: ${JSON.stringify(error)}`)
39
    }
40
    result.value.dispose()
41
  }
42

43
  dispose() {
44
    this.context.dispose()
45
    this.vm.dispose()
46
  }
47
}

1
{
2
  "$schema": "https://widgets.example.com/manifest.schema.json",
3
  "id": "com.example.video-player",
4
  "name": "Premium Video Player",
5
  "version": "2.1.0",
6
  "description": "HD video player with adaptive streaming",
7
  "author": {
8
    "name": "Example Corp",
9
    "email": "widgets@example.com",
10
    "url": "https://example.com"
11
  },
12

13
  "host": {
14
    "minVersion": "3.0.0",
15
    "maxVersion": "4.x"
16
  },
17

18
  "main": "./dist/widget.js",
19
  "styles": "./dist/widget.css",
20
  "remoteEntry": "./dist/remoteEntry.js",
21

22
  "contributes": {
23
    "slots": [
24
      {
25
        "id": "content-area",
26
        "component": "VideoPlayer",
27
        "props": {
28
          "defaultQuality": "auto"
29
        }
30
      }
31
    ],
32
    "commands": [
33
      {
34
        "id": "video-player.play",
35
        "title": "Play Video"
36
      },
37
      {
38
        "id": "video-player.pause",
39
        "title": "Pause Video"
40
      }
41
    ],
42
    "settings": [
43
      {
44
        "id": "video-player.autoplay",
45
        "type": "boolean",
46
        "default": false,
47
        "title": "Autoplay videos"
48
      }
49
    ]
50
  },
51

52
  "permissions": ["storage.local", "network.fetch", "ui.notifications"],
53

54
  "dependencies": {
55
    "react": "^18.0.0",
56
    "react-dom": "^18.0.0"
57
  },
58

59
  "activationEvents": ["onSlot:content-area", "onCommand:video-player.play"],
60

61
  "sandbox": {
62
    "type": "iframe",
63
    "allow": ["scripts", "forms"],
64
    "csp": "script-src 'self'; style-src 'self' 'unsafe-inline'"
65
  }
66
}

1
interface Slot {
2
  id: string
3
  multiple: boolean // Can multiple widgets contribute?
4
  props: Record<string, unknown> // Props passed to widget
5
}
6

7
interface SlotContribution {
8
  widgetId: string
9
  slotId: string
10
  component: string
11
  priority: number
12
}
13

14
class SlotRegistry {
15
  private slots = new Map<string, Slot>()
16
  private contributions = new Map<string, SlotContribution[]>()
17

18
  registerSlot(slot: Slot) {
19
    this.slots.set(slot.id, slot)
20
  }
21

22
  registerContribution(contribution: SlotContribution) {
23
    const existing = this.contributions.get(contribution.slotId) || []
24
    existing.push(contribution)
25
    existing.sort((a, b) => b.priority - a.priority)
26
    this.contributions.set(contribution.slotId, existing)
27
  }
28

29
  getContributionsForSlot(slotId: string): SlotContribution[] {
30
    const slot = this.slots.get(slotId)
31
    if (!slot) return []
32

33
    const contributions = this.contributions.get(slotId) || []
34
    return slot.multiple ? contributions : contributions.slice(0, 1)
35
  }
36
}

1
function ContributionPoint({ slotId }: { slotId: string }) {
2
  const contributions = useSlotContributions(slotId)
3

4
  return (
5
    <div className="contribution-point" data-slot={slotId}>
6
      {contributions.map((contribution) => (
7
        <WidgetRenderer
8
          key={contribution.widgetId}
9
          widgetId={contribution.widgetId}
10
          component={contribution.component}
11
        />
12
      ))}
13
    </div>
14
  )
15
}

1
interface RegistryEntry {
2
  id: string
3
  manifest: WidgetManifest
4
  versions: {
5
    version: string
6
    url: string
7
    checksum: string
8
    publishedAt: Date
9
  }[]
10
}
11

12
interface ResolvedWidget {
13
  id: string
14
  version: string
15
  manifestUrl: string
16
  entryUrl: string
17
  checksum: string
18
}
19

20
class WidgetRegistry {
21
  private baseUrl: string
22
  private cache = new Map<string, RegistryEntry>()
23

24
  constructor(baseUrl: string) {
25
    this.baseUrl = baseUrl
26
  }
27

28
  async resolve(widgetId: string, versionConstraint: string = "latest"): Promise<ResolvedWidget> {
29
    // Fetch registry entry
30
    const entry = await this.fetchEntry(widgetId)
31

32
    // Resolve version constraint (semver)
33
    const version = this.resolveVersion(entry.versions, versionConstraint)
34
    if (!version) {
35
      throw new Error(`No version matching ${versionConstraint} for ${widgetId}`)
36
    }
37

38
    // Validate host compatibility
39
    const manifest = await this.fetchManifest(version.url)
40
    this.validateHostCompatibility(manifest)
41

42
    return {
43
      id: widgetId,
44
      version: version.version,
45
      manifestUrl: `${version.url}/manifest.json`,
46
      entryUrl: `${version.url}/${manifest.main}`,
47
      checksum: version.checksum,
48
    }
49
  }
50

51
  private async fetchEntry(widgetId: string): Promise<RegistryEntry> {
52
    if (this.cache.has(widgetId)) {
53
      return this.cache.get(widgetId)!
54
    }
55

56
    const response = await fetch(`${this.baseUrl}/widgets/${widgetId}`)
57
    if (!response.ok) {
58
      throw new Error(`Widget not found: ${widgetId}`)
59
    }
60

61
    const entry = await response.json()
62
    this.cache.set(widgetId, entry)
63
    return entry
64
  }
65

66
  private resolveVersion(
67
    versions: RegistryEntry["versions"],
68
    constraint: string,
69
  ): RegistryEntry["versions"][0] | undefined {
70
    if (constraint === "latest") {
71
      return versions[0] // Assumes sorted by version desc
72
    }
73

74
    // Semver matching
75
    return versions.find((v) => satisfies(v.version, constraint))
76
  }
77

78
  private validateHostCompatibility(manifest: WidgetManifest) {
79
    const hostVersion = getHostVersion()
80
    const { minVersion, maxVersion } = manifest.host
81

82
    if (minVersion && !gte(hostVersion, minVersion)) {
83
      throw new Error(`Widget requires host >= ${minVersion}`)
84
    }
85
    if (maxVersion && !satisfies(hostVersion, maxVersion)) {
86
      throw new Error(`Widget incompatible with host ${hostVersion}`)
87
    }
88
  }
89
}

1
interface HostSDK {
2
  // Lifecycle
3
  readonly version: string
4
  onActivate(callback: () => void): Disposable
5
  onDeactivate(callback: () => void): Disposable
6

7
  // UI
8
  showNotification(options: NotificationOptions): Promise<void>
9
  showModal(options: ModalOptions): Promise<ModalResult>
10
  registerCommand(id: string, handler: CommandHandler): Disposable
11

12
  // Data
13
  getData<T>(key: string): Promise<T | undefined>
14
  setData<T>(key: string, value: T): Promise<void>
15
  subscribeToData<T>(key: string, callback: (value: T) => void): Disposable
16

17
  // Storage (widget-scoped)
18
  storage: {
19
    get<T>(key: string): Promise<T | undefined>
20
    set<T>(key: string, value: T): Promise<void>
21
    delete(key: string): Promise<void>
22
  }
23

24
  // Network (proxied through host)
25
  fetch(url: string, options?: RequestInit): Promise<Response>
26

27
  // Events
28
  onEvent(eventType: string, handler: EventHandler): Disposable
29
  emitEvent(eventType: string, payload: unknown): void
30
}
31

32
interface Disposable {
33
  dispose(): void
34
}
35

36
interface NotificationOptions {
37
  type: "info" | "warning" | "error"
38
  message: string
39
  duration?: number
40
  actions?: { label: string; action: () => void }[]
41
}

1
class IframeSDKHost {
2
  private iframe: HTMLIFrameElement
3
  private widgetId: string
4
  private handlers = new Map<string, Function>()
5

6
  constructor(iframe: HTMLIFrameElement, widgetId: string) {
7
    this.iframe = iframe
8
    this.widgetId = widgetId
9
    window.addEventListener("message", this.handleMessage)
10
  }
11

12
  private handleMessage = async (event: MessageEvent) => {
13
    // Validate origin matches expected widget origin
14
    if (!this.isValidOrigin(event.origin)) return
15

16
    const { type, requestId, method, args } = event.data
17
    if (type !== "SDK_CALL") return
18

19
    try {
20
      const result = await this.executeMethod(method, args)
21
      this.respond(requestId, { success: true, result })
22
    } catch (error) {
23
      this.respond(requestId, { success: false, error: String(error) })
24
    }
25
  }
26

27
  private async executeMethod(method: string, args: unknown[]): Promise<unknown> {
28
    // Permission check
29
    const permission = this.getRequiredPermission(method)
30
    if (permission && !this.hasPermission(permission)) {
31
      throw new Error(`Permission denied: ${permission}`)
32
    }
33

34
    switch (method) {
35
      case "showNotification":
36
        return this.showNotification(args[0] as NotificationOptions)
37

38
      case "getData":
39
        return this.getData(args[0] as string)
40

41
      case "setData":
42
        return this.setData(args[0] as string, args[1])
43

44
      case "storage.get":
45
        return this.widgetStorage.get(this.widgetId, args[0] as string)
46

47
      case "fetch":
48
        // Proxy fetch to enforce CORS and CSP
49
        return this.proxyFetch(args[0] as string, args[1] as RequestInit)
50

51
      default:
52
        throw new Error(`Unknown method: ${method}`)
53
    }
54
  }
55

56
  private respond(requestId: string, response: unknown) {
57
    this.iframe.contentWindow?.postMessage(
58
      { type: "SDK_RESPONSE", requestId, ...response },
59
      "*", // iframe origin already validated on receive
60
    )
61
  }
62

63
  private getRequiredPermission(method: string): string | undefined {
64
    const permissionMap: Record<string, string> = {
65
      showNotification: "ui.notifications",
66
      fetch: "network.fetch",
67
      "storage.get": "storage.local",
68
      "storage.set": "storage.local",
69
    }
70
    return permissionMap[method]
71
  }
72
}

1
class WidgetSDK implements HostSDK {
2
  private pendingRequests = new Map<
3
    string,
4
    {
5
      resolve: (value: unknown) => void
6
      reject: (error: Error) => void
7
    }
8
  >()
9

10
  constructor() {
11
    window.addEventListener("message", this.handleResponse)
12
  }
13

14
  private handleResponse = (event: MessageEvent) => {
15
    const { type, requestId, success, result, error } = event.data
16
    if (type !== "SDK_RESPONSE") return
17

18
    const pending = this.pendingRequests.get(requestId)
19
    if (!pending) return
20

21
    this.pendingRequests.delete(requestId)
22

23
    if (success) {
24
      pending.resolve(result)
25
    } else {
26
      pending.reject(new Error(error))
27
    }
28
  }
29

30
  private call<T>(method: string, args: unknown[] = []): Promise<T> {
31
    return new Promise((resolve, reject) => {
32
      const requestId = crypto.randomUUID()
33
      this.pendingRequests.set(requestId, { resolve: resolve as any, reject })
34

35
      window.parent.postMessage({ type: "SDK_CALL", requestId, method, args }, "*")
36

37
      // Timeout after 10 seconds
38
      setTimeout(() => {
39
        if (this.pendingRequests.has(requestId)) {
40
          this.pendingRequests.delete(requestId)
41
          reject(new Error(`SDK call timeout: ${method}`))
42
        }
43
      }, 10000)
44
    })
45
  }
46

47
  // Public API implementation
48
  get version(): string {
49
    return "1.0.0"
50
  }
51

52
  async showNotification(options: NotificationOptions): Promise<void> {
53
    return this.call("showNotification", [options])
54
  }
55

56
  async getData<T>(key: string): Promise<T | undefined> {
57
    return this.call("getData", [key])
58
  }
59

60
  storage = {
61
    get: <T>(key: string) => this.call<T>("storage.get", [key]),
62
    set: <T>(key: string, value: T) => this.call<void>("storage.set", [key, value]),
63
    delete: (key: string) => this.call<void>("storage.delete", [key]),
64
  }
65

66
  // ... other methods
67
}
68

69
// Export singleton
70
export const hostSDK = new WidgetSDK()

1
interface TenantWidgetConfig {
2
  widgetId: string
3
  version?: string // Optional: defaults to "latest"
4
  slot: string
5
  config?: Record<string, unknown> // Widget-specific config
6
  enabled: boolean
7
}
8

9
interface TenantConfig {
10
  tenantId: string
11
  widgets: TenantWidgetConfig[]
12
  featureFlags: Record<string, boolean>
13
  theme?: ThemeConfig
14
}
15

16
class TenantConfigService {
17
  private configCache = new Map<string, TenantConfig>()
18
  private baseUrl: string
19

20
  constructor(baseUrl: string) {
21
    this.baseUrl = baseUrl
22
  }
23

24
  async getConfig(tenantId: string): Promise<TenantConfig> {
25
    // Check cache first
26
    if (this.configCache.has(tenantId)) {
27
      return this.configCache.get(tenantId)!
28
    }
29

30
    const response = await fetch(`${this.baseUrl}/tenants/${tenantId}/config`)
31
    if (!response.ok) {
32
      // Fall back to default config
33
      return this.getDefaultConfig(tenantId)
34
    }
35

36
    const config = await response.json()
37
    this.configCache.set(tenantId, config)
38
    return config
39
  }
40

41
  private getDefaultConfig(tenantId: string): TenantConfig {
42
    return {
43
      tenantId,
44
      widgets: [], // No widgets by default
45
      featureFlags: {},
46
    }
47
  }
48

49
  async refreshConfig(tenantId: string): Promise<TenantConfig> {
50
    this.configCache.delete(tenantId)
51
    return this.getConfig(tenantId)
52
  }
53
}