@pugpigbolt/bridge

Communication layer between Bolt web apps and the native Pugpig shell. Provides a reactive bridge object that syncs native state (stories, auth, timelines, locale) into the web layer and exposes action methods for triggering native behaviour.

Installation

npm install @pugpigbolt/bridge

vue >= 3 is an optional peer dependency, only needed when using @pugpigbolt/bridge/vue.

Usage

Plain JS / framework-agnostic

import { globalBridge } from '@pugpigbolt/bridge'

console.log(globalBridge.stories)

globalBridge.$on('change:stories', (stories) => {
  console.log('stories updated', stories)
})

Vue

Install the plugin once at app startup:

import { createApp } from 'vue'
import { BoltBridgeVue } from '@pugpigbolt/bridge/vue'

const app = createApp(App)
app.use(BoltBridgeVue, () => {
  app.mount('#app')
})

Use the composable in components:

import { useBridge } from '@pugpigbolt/bridge/vue'

const { stories, openArticle, sendAnalytics } = useBridge()

Local development (mock bridge)

When running outside the native shell, install a mock service to simulate native responses:

import { createPugpigBridgeService } from '@pugpigbolt/bridge'

window.pugpigBridgeService = createPugpigBridgeService({
  live_domain: 'https://example.com',
  stories: [...],
  timelines: [...],
  timeline: { id: 'main' },
  debugLogs: true,
})