@bettertogether/community-engine-vue 0.1.6 → 0.2.2

package/src/db/sync.js

@@ -0,0 +1,276 @@
+// Electric SQL shape sync — connects PGlite to a CE Rails Electric sidecar.
+// Graceful no-op when VITE_ELECTRIC_URL is not configured.
+//
+// Electric HTTP API: GET /v1/shape?table=<table>&offset=<offset>
+// Responses are SSE streams: each line is a JSON object { headers, value, offset }
+// Special message: { headers: { control: 'up-to-date' } } means initial sync complete
+
+const ELECTRIC_URL = import.meta.env?.VITE_ELECTRIC_URL
+
+// Tables to sync — ordered by dependency (communities before memberships, etc.)
+const SYNC_TABLES = [
+  'communities',
+  'people',
+  'posts',
+  'events',
+  'conversations',
+  'messages',
+  'notifications',
+  'navigation_areas',
+  'navigation_items',
+  'invitations',
+  'pages',
+]
+
+const OFFSET_KEY = 'cev_sync_offsets'
+const RETRY_DELAY_MS = 30000
+
+// Active AbortControllers keyed by table name
+const _controllers = {}
+
+function loadOffsets() {
+  try {
+    return JSON.parse(localStorage.getItem(OFFSET_KEY) || '{}')
+  } catch {
+    return {}
+  }
+}
+
+function saveOffsets(offsets) {
+  try {
+    localStorage.setItem(OFFSET_KEY, JSON.stringify(offsets))
+  } catch { /* storage full / private mode */ }
+}
+
+/**
+ * Build a parameterised upsert or delete SQL for a shape message row.
+ * Returns null for control messages.
+ */
+function buildStatement(table, headers, value) {
+  const op = headers?.operation
+
+  if (op === 'insert' || op === 'update') {
+    const cols = Object.keys(value).filter(k => !['_sync_status', '_server_at'].includes(k))
+    // Preserve local-first: skip overwrite when row is locally modified
+    const colList = cols.join(', ')
+    const placeholders = cols.map((_, i) => `$${i + 1}`).join(', ')
+    const updates = cols.map((c, i) => `${c} = $${i + 1}`).join(', ')
+    const vals = cols.map(c => value[c])
+
+    const sql = `
+      INSERT INTO ${table} (${colList}, _sync_status, _server_at)
+      VALUES (${placeholders}, 'synced', strftime('%Y-%m-%dT%H:%M:%fZ','now'))
+      ON CONFLICT (id) DO UPDATE SET
+        ${updates},
+        _sync_status = CASE WHEN ${table}._sync_status = 'local' THEN 'local' ELSE 'synced' END,
+        _server_at = CASE WHEN ${table}._sync_status = 'local' THEN ${table}._server_at ELSE strftime('%Y-%m-%dT%H:%M:%fZ','now') END
+    `
+    return { sql, params: vals }
+  }
+
+  if (op === 'delete') {
+    return {
+      sql: `DELETE FROM ${table} WHERE id = $1 AND _sync_status != 'local'`,
+      params: [value.id],
+    }
+  }
+
+  return null
+}
+
+/**
+ * Apply a batch of shape messages to PGlite.
+ */
+export async function applyShapeMessages(db, table, messages) {
+  for (const msg of messages) {
+    const { headers, value } = msg
+    if (!value || !headers?.operation) continue
+    const stmt = buildStatement(table, headers, value)
+    if (!stmt) continue
+    try {
+      await db.query(stmt.sql, stmt.params)
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.warn(`[cev:sync] Failed to apply ${headers.operation} to ${table}:`, err)
+    }
+  }
+}
+
+/**
+ * Start a shape subscription for a single table.
+ * Streams SSE data from GET /v1/shape, parses line-by-line JSON.
+ * Returns a cleanup function.
+ */
+function subscribeToShape(db, table, initialOffset, onUpToDate) {
+  const controller = new AbortController()
+  _controllers[table] = controller
+
+  async function stream(offset) {
+    const url = `${ELECTRIC_URL}/v1/shape?table=${table}&offset=${offset}`
+    const response = await fetch(url, { signal: controller.signal })
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status} for shape ${table}`)
+    }
+
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder()
+    let buffer = ''
+    const offsets = loadOffsets()
+    let currentOffset = offset
+    const batch = []
+
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+
+      buffer += decoder.decode(value, { stream: true })
+      const lines = buffer.split('\n')
+      buffer = lines.pop() // keep incomplete last line
+
+      for (const line of lines) {
+        const trimmed = line.trim()
+        if (!trimmed) continue
+        let msg
+        try {
+          msg = JSON.parse(trimmed)
+        } catch {
+          continue
+        }
+
+        if (msg.offset != null) {
+          currentOffset = msg.offset
+        }
+
+        if (msg.headers?.control === 'up-to-date') {
+          // Flush any accumulated batch before signalling up-to-date
+          if (batch.length) {
+            await applyShapeMessages(db, table, batch.splice(0))
+          }
+          offsets[table] = currentOffset
+          saveOffsets(offsets)
+          onUpToDate(table)
+          continue
+        }
+
+        if (msg.headers?.operation) {
+          batch.push(msg)
+        }
+      }
+
+      // Flush batch periodically to avoid unbounded accumulation
+      if (batch.length >= 50) {
+        await applyShapeMessages(db, table, batch.splice(0))
+        offsets[table] = currentOffset
+        saveOffsets(offsets)
+      }
+    }
+
+    // Flush remaining
+    if (batch.length) {
+      await applyShapeMessages(db, table, batch.splice(0))
+    }
+    offsets[table] = currentOffset
+    saveOffsets(offsets)
+
+    // Stream ended (server closed) — reconnect with latest offset
+    if (!controller.signal.aborted) {
+      await stream(currentOffset)
+    }
+  }
+
+  stream(initialOffset).catch(err => {
+    if (controller.signal.aborted) return
+    // eslint-disable-next-line no-console
+    console.warn(`[cev:sync] Shape stream error for ${table}:`, err)
+    throw err
+  })
+
+  return () => controller.abort()
+}
+
+let _retryTimer = null
+const _cleanups = []
+
+/**
+ * Start syncing all tables.
+ * No-op when VITE_ELECTRIC_URL is not set.
+ * Resumes from saved localStorage offsets.
+ * Retries on failure every 30s.
+ */
+export function startSync(db) {
+  if (!ELECTRIC_URL) return
+
+  // Lazy import to avoid Pinia init order issues
+  import('../stores/sync').then(({ useSyncStore }) => {
+    _doStart(db, useSyncStore)
+  }).catch(() => {
+    _doStart(db, null)
+  })
+}
+
+function _doStart(db, useSyncStore) {
+  const syncStore = useSyncStore ? useSyncStore() : null
+  const offsets = loadOffsets()
+  let upToDateCount = 0
+
+  function onUpToDate(_table) {
+    upToDateCount++
+    if (upToDateCount >= SYNC_TABLES.length) {
+      // eslint-disable-next-line no-console
+      console.info('[cev:sync] Initial sync complete — all tables up to date')
+    }
+    if (syncStore) syncStore.setConnected(true)
+  }
+
+  function startAll() {
+    for (const table of SYNC_TABLES) {
+      const offset = offsets[table] ?? '-1'
+      try {
+        const cleanup = subscribeToShape(db, table, offset, onUpToDate)
+        _cleanups.push(cleanup)
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.warn(`[cev:sync] Could not subscribe to ${table}:`, err)
+        scheduleRetry()
+        return
+      }
+    }
+  }
+
+  // Wrap the whole start in a promise to catch initial fetch errors
+  Promise.resolve().then(startAll).catch(err => {
+    // eslint-disable-next-line no-console
+    console.warn('[cev:sync] Startup error:', err)
+    if (syncStore) syncStore.setConnected(false)
+    scheduleRetry()
+  })
+
+  function scheduleRetry() {
+    if (_retryTimer) return
+    _retryTimer = setTimeout(() => {
+      _retryTimer = null
+      // eslint-disable-next-line no-console
+      console.info('[cev:sync] Retrying Electric connection…')
+      _doStart(db, useSyncStore)
+    }, RETRY_DELAY_MS)
+  }
+}
+
+/**
+ * Stop all active shape subscriptions.
+ */
+export function stopSync() {
+  if (_retryTimer) {
+    clearTimeout(_retryTimer)
+    _retryTimer = null
+  }
+  for (const cleanup of _cleanups.splice(0)) {
+    try { cleanup() } catch { /* ignore */ }
+  }
+  Object.keys(_controllers).forEach(k => {
+    try { _controllers[k].abort() } catch { /* ignore */ }
+    delete _controllers[k]
+  })
+}

package/src/endpoints/BtApiAuth.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 
 const BtApiAuth = axios.create({
-  baseURL: `${process.env.VUE_APP_BETTER_TOGETHER_API_URI}/bt/api/auth`,
+  baseURL: `${import.meta.env.VITE_BETTER_TOGETHER_API_URI}/api/auth`,
   headers: {
     'Content-Type': 'application/vnd.api+json',
   },

package/src/endpoints/BtApiV1.js

@@ -1,7 +1,7 @@
 import JsonApi from 'devour-client'
 
 const BtApiV1 = new JsonApi({
-  apiUrl: `${process.env.VUE_APP_BETTER_TOGETHER_API_URI}/bt/api/v1`,
+  apiUrl: `${import.meta.env.VITE_BETTER_TOGETHER_API_URI}/api/v1`,
 })
 
 // Define Model

package/src/extension.js

@@ -0,0 +1,45 @@
+import { getCevContext } from './context'
+import { registerSlotInjection } from './slot-registry'
+import { registerExtensionMigration } from './db/client'
+
+export function defineExtension(spec) {
+  return {
+    ...spec,
+
+    _install() {
+      const { app, router } = getCevContext()
+
+      // Register extension DB migrations (must run before getDb() is awaited elsewhere)
+      if (spec.migrations?.length) {
+        spec.migrations.forEach(({ version, sql }) => registerExtensionMigration(version, sql))
+      }
+
+      // Register global components
+      if (spec.components) {
+        Object.entries(spec.components).forEach(([name, component]) => {
+          app.component(name, component)
+        })
+      }
+
+      // Add platform-level routes
+      if (spec.routes?.length) {
+        spec.routes.forEach((route) => router.addRoute(route))
+      }
+
+      // Add community child routes (as siblings under CommunityHome)
+      if (spec.communityRoutes?.length) {
+        spec.communityRoutes.forEach((route) => router.addRoute('CommunityHome', route))
+      }
+
+      // Register slot injections
+      if (spec.slotInjections?.length) {
+        spec.slotInjections.forEach((injection) => registerSlotInjection(injection))
+      }
+
+      // Run custom setup hook
+      if (spec.setup) {
+        spec.setup(getCevContext())
+      }
+    },
+  }
+}

package/src/i18n/index.js

@@ -0,0 +1,103 @@
+import { createI18n } from 'vue-i18n'
+import en from './locales/en.json'
+import fr from './locales/fr.json'
+import es from './locales/es.json'
+import uk from './locales/uk.json'
+
+// Extension messages registered by companion packages before install()
+const _extensionMessages = []
+
+/**
+ * Register additional locale messages from a companion package.
+ * Must be called before CommunityEngineVue is installed.
+ *
+ * @param {Object} messages - Locale messages object, e.g. { en: { commerce: {...} }, fr: {...} }
+ */
+export function registerExtensionMessages(messages) {
+  _extensionMessages.push(messages)
+}
+
+/**
+ * Build the merged messages object for a given set of option messages.
+ * Merges CEV base (bt.*), extension messages, and host-app overrides.
+ */
+function buildMessages(optionMessages = {}) {
+  const merged = {
+    en: { bt: { ...en.bt } },
+    fr: { bt: { ...fr.bt } },
+    es: { bt: { ...es.bt } },
+    uk: { bt: { ...uk.bt } },
+  }
+
+  // Merge companion package extension messages
+  for (const ext of _extensionMessages) {
+    for (const [locale, msgs] of Object.entries(ext)) {
+      if (!merged[locale]) merged[locale] = {}
+      Object.assign(merged[locale], msgs)
+    }
+  }
+
+  // Merge host-app-provided message overrides (can override bt.* or add new locales)
+  for (const [locale, msgs] of Object.entries(optionMessages)) {
+    if (!merged[locale]) merged[locale] = {}
+    // Deep merge bt.* — allows partial overrides of individual bt keys
+    if (msgs.bt) {
+      merged[locale].bt = { ...(merged[locale].bt ?? {}), ...msgs.bt }
+    }
+    // Merge everything else at top level
+    // eslint-disable-next-line no-unused-vars
+    const { bt: _, ...rest } = msgs
+    Object.assign(merged[locale], rest)
+  }
+
+  return merged
+}
+
+/**
+ * Create a standalone vue-i18n instance with CEV messages.
+ * Used when the host app does not have its own vue-i18n instance.
+ */
+export function createCevI18n(optionMessages = {}, locale = 'en') {
+  return createI18n({
+    legacy: false,       // Composition API mode
+    locale,
+    fallbackLocale: 'en',
+    globalInjection: true,
+    messages: buildMessages(optionMessages),
+    // Silence missing key warnings in production — keys fall back to en
+    missingWarn: import.meta.env.DEV,
+    fallbackWarn: import.meta.env.DEV,
+  })
+}
+
+/**
+ * Install i18n into the Vue app.
+ *
+ * Strategy:
+ * - If the host app already installed vue-i18n (detectable via $i18n on globalProperties),
+ *   merge CEV messages into the existing instance instead of installing a new one.
+ * - If no i18n instance exists, install a fresh one with CEV messages.
+ *
+ * @param {import('vue').App} app
+ * @param {Object} options - Plugin options (may include options.messages for locale overrides)
+ */
+export function installI18n(app, options = {}) {
+  const existing = app.config.globalProperties.$i18n
+
+  if (existing) {
+    // Merge CEV bt.* into the host app's existing i18n instance
+    const merged = buildMessages(options.messages ?? {})
+    for (const [locale, msgs] of Object.entries(merged)) {
+      existing.global.mergeLocaleMessage(locale, msgs)
+    }
+    if (options.locale) {
+      existing.global.locale.value = options.locale
+    }
+  } else {
+    const i18n = createCevI18n(options.messages ?? {}, options.locale ?? 'en')
+    app.use(i18n)
+    if (options.locale) {
+      i18n.global.locale.value = options.locale
+    }
+  }
+}