feat: optionally trigger frontend reload on bundle rebuild

Set VITE_BUNDLE_SSE to cause the frontend to subscribe to server
sent events from the VITE_BUNDLE_HOST at /sse.

packages/compile/package.json

@@ -45,6 +45,7 @@
     "@types/express": "^4.17.17",
     "@types/glob": "^8.1.0",
     "@types/yaml-front-matter": "^4.1.0",
+    "better-sse": "^0.10.0",
     "cors": "^2.8.5",
     "express": "^4.18.2",
     "tsheredoc": "^1.0.1",

packages/compile/src/watch/server.ts

@@ -1,6 +1,7 @@
 import chalk from 'chalk'
 import cors from 'cors'
 import express, { Express, NextFunction, Request, Response } from 'express'
+import sse from 'better-sse'
 
 import { bundle } from '@pi-base/core'
 
@@ -19,8 +20,11 @@ export function boot({ log, port }: { log: Logger; port: number }): {
 } {
   let state: State = { bundle: undefined, errors: undefined }
 
+  const reloadChannel = sse.createChannel()
+
   function setState(updates: Partial<State>) {
     state = { ...state, ...updates }
+    reloadChannel.broadcast({ version: state.bundle?.version }, 'bundle.reload')
   }
 
   const app = express()
@@ -55,6 +59,11 @@ export function boot({ log, port }: { log: Logger; port: number }): {
     res.json(state.errors)
   })
 
+  app.get('/sse', async (req, res) => {
+    const session = await sse.createSession(req, res)
+    reloadChannel.register(session)
+  })
+
   app.listen(port, () => {
     log(`Server running at http://localhost:${cyan(port)}.`)
   })

packages/viewer/src/components/Dev/Explore.svelte

@@ -1,13 +1,9 @@
 <script lang="ts">
   import context from '@/context'
   import Log from './Log.svelte'
+  import { reset } from '@/util'
 
   const { spaces, properties, theorems, traits } = context()
-
-  function reset() {
-    localStorage.clear()
-    window.location.reload()
-  }
 </script>
 
 <h4>Entities</h4>

packages/viewer/src/constants.ts

@@ -1,19 +1,23 @@
 import { bundle } from '@pi-base/core'
-import { dev } from '$app/environment'
-import * as envPublic from '$env/static/public'
 
-export const mainBranch = 'main'
-export const contributingUrl = `https://github.com/pi-base/data/wiki/Contributing`
-let _defaultHost = bundle.defaultHost
-try {
-  _defaultHost = dev ? envPublic.PUBLIC_DATA_URL : bundle.defaultHost
-} catch {}
-export const defaultHost = _defaultHost
+const {
+  VITE_BUNDLE_HOST = bundle.defaultHost,
+  VITE_BUNDLE_SSE = 'false',
+  VITE_BRANCH = 'unknown',
+  VITE_MAIN_BRANCH = 'main',
+  VITE_VERSION = 'unknown',
+} = import.meta.env
+
+export const mainBranch = VITE_MAIN_BRANCH
+export const defaultHost = VITE_BUNDLE_HOST
 
 export const build = {
-  branch: import.meta.env.VITE_BRANCH || 'unknown',
-  version: import.meta.env.VITE_VERSION || 'unknown',
+  branch: VITE_BRANCH,
+  version: VITE_VERSION,
 }
 
+export const bundleSse = VITE_BUNDLE_SSE === 'true'
+
+export const contributingUrl = `https://github.com/pi-base/data/wiki/Contributing`
 export const sentryIngest =
   'https://[email protected]/5251960'

packages/viewer/src/routes/+layout.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
   import 'bootstrap/dist/css/bootstrap.min.css'
 
+  import { browser } from '$app/environment'
+
   import type { LayoutData } from './$types'
 
+  import { bundleSse, defaultHost } from '@/constants'
   import { set } from '@/context'
+  import { reset } from '@/util'
 
   import Nav from '@/components/Nav.svelte'
   import Status from '@/components/Status.svelte'
@@ -19,6 +23,13 @@
   // so that it doesn't get thrown away and rebuilt when the user happens to
   // navigate to a page without any rendered math.
   data.typeset.subscribe(() => {})
+
+  if (browser && bundleSse) {
+    new EventSource(`${defaultHost}/sse`).addEventListener(
+      'bundle.reload',
+      reset,
+    )
+  }
 </script>
 
 <Nav />

packages/viewer/src/routes/+layout.ts

@@ -4,33 +4,35 @@ import * as errors from '@/errors'
 import { sync } from '@/gateway'
 import type { LayoutLoad } from './$types'
 
-const bundleHost = import.meta.env.VITE_BUNDLE_HOST || defaultHost
-
 export const load: LayoutLoad = async ({ fetch, url: { host } }) => {
   const dev = host.match(/(dev(elopment)?[.-]|localhost)/) !== null
-  const errorEnv: errors.Environment = [
-    'topology.pi-base.org',
-    'topology.pages.dev',
-  ].includes(host)
-    ? 'production'
-    : host.includes('pages.dev')
-    ? 'deploy-preview'
-    : 'dev'
 
   const errorHandler = dev
     ? errors.log()
-    : errors.sentry({ environment: errorEnv })
+    : errors.sentry({ environment: errorEnv(host) })
 
   const context = initialize({
     showDev: dev,
     errorHandler,
     gateway: sync(fetch),
     source: {
-      host: bundleHost,
+      host: defaultHost,
     },
   })
 
   await context.loaded()
 
   return context
 }
+
+function errorEnv(host: string): errors.Environment {
+  if (['topology.pi-base.org', 'topology.pages.dev'].includes(host)) {
+    return 'production'
+  }
+
+  if (host.includes('pages.dev')) {
+    return 'deploy-preview'
+  }
+
+  return 'dev'
+}

packages/viewer/src/stores/index.ts

@@ -1,4 +1,3 @@
-import { defaultHost, mainBranch } from '@/constants'
 import type * as Gateway from '@/gateway'
 import {
   Collection,

packages/viewer/src/util.ts

@@ -53,3 +53,8 @@ export function subscribeUntil<S>(
 export function capitalize(s: string) {
   return s.charAt(0).toUpperCase() + s.slice(1)
 }
+
+export function reset() {
+  localStorage.clear()
+  window.location.reload()
+}

packages/viewer/vite.config.js

@@ -7,10 +7,10 @@ export default defineConfig({
   test: {
     include: ['src/**/*.{test,spec}.{js,ts}'],
     coverage: {
-      lines: 83.09,
+      lines: 82.91,
       branches: 87.36,
-      statements: 83.09,
-      functions: 81.81,
+      statements: 82.91,
+      functions: 80.19,
       skipFull: true,
       thresholdAutoUpdate: true,
     },