fix(10.1): WR-02 disable plugin stylesheets on screens that are not controller views

The router now drives stylesheet activation after every confirmed
navigation: the list, create and record routes enable their controller's
links, and settings, login, not-found and a controller whose schema has
not arrived yet enable none. Rebuilt the embedded admin dist.

admin/src/app/pluginAssets.ts

@@ -3,8 +3,9 @@
 // {base}/assets/; they load when that controller's view opens, never
 // earlier. Every script loads once per URL as a module script, and a script
 // that fails to load is forgotten, so a later navigation can try again.
-// Stylesheet links belong to one controller: opening another controller
-// disables them, so plugin CSS never styles a view it was not written for.
+// Stylesheet links belong to one controller: the router disables them on
+// every navigation to another controller or to a screen that is not a
+// controller view, so plugin CSS never styles a view it was not written for.
 // Files load only through script and link elements; nothing here fetches.
 import type { ControllerAssets } from '../api/types'
 import { runtime } from './runtime'

admin/src/app/router.ts

@@ -1,4 +1,6 @@
-import { createRouter, createWebHistory, type RouterHistory } from 'vue-router'
+import { createRouter, createWebHistory, type RouteLocationNormalized, type RouterHistory } from 'vue-router'
+import { controllerIdFromParams } from './controllerRoutes'
+import { activateStyles } from './pluginAssets'
 import { runtime } from './runtime'
 import { currentUser } from '../state/useAuth'
 import { homePath } from '../state/useNavigation'
@@ -32,6 +34,23 @@ export function safeRedirect(value: unknown): string | null {
   return value
 }
 
+const CONTROLLER_ROUTES = new Set(['list', 'create', 'record'])
+
+/**
+ * The controller a route shows, or '' for every other screen (settings,
+ * login, not found). Plugin stylesheets follow it (D-16, T-10.1-16).
+ */
+export function routeControllerId(route: RouteLocationNormalized): string {
+  if (typeof route.name !== 'string' || !CONTROLLER_ROUTES.has(route.name)) {
+    return ''
+  }
+  const { vendor, plugin, controller } = route.params
+  if (typeof vendor !== 'string' || typeof plugin !== 'string' || typeof controller !== 'string') {
+    return ''
+  }
+  return controllerIdFromParams({ vendor, plugin, controller })
+}
+
 export function createAdminRouter(history: RouterHistory = createWebHistory(runtime.base)) {
   const router = createRouter({
     history,
@@ -66,5 +85,12 @@ export function createAdminRouter(history: RouterHistory = createWebHistory(runt
     }
     return true
   })
+  // Plugin CSS is global: enable only the links of the controller on screen,
+  // and none on any other screen (D-16, T-10.1-16).
+  router.afterEach((to, _from, failure) => {
+    if (!failure) {
+      activateStyles(routeControllerId(to))
+    }
+  })
   return router
 }

admin/tests/app/router.test.ts

@@ -1,6 +1,7 @@
-import { beforeEach, describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { createMemoryHistory } from 'vue-router'
-import { createAdminRouter, safeRedirect } from '../../src/app/router'
+import { activateStyles, loadStyles } from '../../src/app/pluginAssets'
+import { createAdminRouter, routeControllerId, safeRedirect } from '../../src/app/router'
 import { setNavigation } from '../../src/state/useNavigation'
 import { navigationFixture } from '../fixtures/typed'
 import { resetState, routerAt, signIn } from '../helpers'
@@ -93,3 +94,58 @@ describe('route guard', () => {
     expect((await routerAt('/acme/demo/widgets/12')).currentRoute.value.params.id).toBe('12')
   })
 })
+
+describe('plugin stylesheets follow the route (D-16, T-10.1-16)', () => {
+  let links: HTMLLinkElement[]
+
+  beforeEach(() => {
+    links = []
+    const head = document.head
+    const append = head.appendChild.bind(head)
+    vi.spyOn(head, 'appendChild').mockImplementation(<T extends Node>(node: T): T => {
+      if (node instanceof HTMLLinkElement) {
+        links.push(node)
+        return node
+      }
+      return append(node)
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    activateStyles('')
+  })
+
+  const enabled = () => links.filter((link) => !link.disabled).map((link) => link.getAttribute('data-summer-controller'))
+
+  it('names the controller of list, create and record routes only', async () => {
+    await signIn()
+    expect(routeControllerId((await routerAt('/acme/demo/widgets')).currentRoute.value)).toBe('acme.demo.widgets')
+    expect(routeControllerId((await routerAt('/acme/demo/widgets/create')).currentRoute.value)).toBe('acme.demo.widgets')
+    expect(routeControllerId((await routerAt('/acme/demo/widgets/12')).currentRoute.value)).toBe('acme.demo.widgets')
+    for (const path of ['/settings', '/settings/mail', '/nowhere', '/acme/demo/widgets/abc']) {
+      expect(routeControllerId((await routerAt(path)).currentRoute.value), path).toBe('')
+    }
+    expect(routeControllerId((await routerAt('/login')).currentRoute.value)).toBe('')
+  })
+
+  it('disables every plugin stylesheet on screens that are not controller views', async () => {
+    await signIn()
+    loadStyles('acme.demo.widgets', ['/admin-test/assets/acme/demo/css/route-widgets.css'])
+    loadStyles('acme.demo.gadgets', ['/admin-test/assets/acme/demo/css/route-gadgets.css'])
+    const router = await routerAt('/acme/demo/widgets')
+    expect(enabled()).toEqual(['acme.demo.widgets'])
+
+    for (const path of ['/settings', '/settings/mail', '/nowhere']) {
+      await router.push(path)
+      expect(enabled(), path).toEqual([])
+    }
+
+    await router.push('/acme/demo/gadgets/create')
+    expect(enabled()).toEqual(['acme.demo.gadgets'])
+    // Opening another controller whose schema has not arrived yet already
+    // hides the previous controller's stylesheets.
+    await router.push('/acme/demo/sprockets')
+    expect(enabled()).toEqual([])
+  })
+})

modules/boardwalk/dist/index.html

@@ -6,7 +6,7 @@
     <meta name="robots" content="noindex, nofollow" />
     <meta name="summer-admin-base" content="__SUMMER_ADMIN_BASE__" />
     <title>SummerCMS</title>
-    <script type="module" crossorigin src="./assets/index-B51qJou6.js"></script>
+    <script type="module" crossorigin src="./assets/index-C3qtJyIU.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-CfeX_snf.css">
   </head>
   <body>