@museumwnf/viewer-core 1.14.0 → 1.15.1

package/src/testing/smoke.js

@@ -1,103 +1,103 @@
-import { createViewer } from '../createViewer.js'
-
-/**
- * Mount a website to a detached DOM node on a given hash, returning the app,
- * host, and router for test assertions. The router is ready and the app is
- * mounted before the promise resolves.
- *
- * `config` and `messages` are the same objects a website's main.js assembles.
- * `hash` defaults to the home page.
- */
-export async function mountSite(config, messages, hash = '#/') {
-  window.location.hash = hash
-  const app = createViewer({ ...config, messages })
-  const host = document.createElement('div')
-  document.body.appendChild(host)
-  app.mount(host)
-  const router = app.config.globalProperties.$router
-  await router.isReady()
-  return { app, host, router }
-}
-
-/**
- * Check that a configuration's routes are properly declared: every route has
- * a name, no route is a catch-all, and every legacy route is listed in
- * `legacyPaths`.
- *
- * Returns the list of problems found (empty if all is well). Routes without
- * names appear by index in the message.
- */
-export function checkRoutes(config, { names = [], legacyPaths = [] } = {}) {
-  const problems = []
-  const declaredNames = (config.extraViews ?? []).map((r) => r.name)
-  const declaredLegacy = (config.legacyRoutes ?? []).map((r) => r.path)
-
-  // Check every route has a name.
-  for (let i = 0; i < (config.extraViews ?? []).length; i++) {
-    if (!config.extraViews[i].name) {
-      problems.push(`Route ${i} has no name.`)
-    }
-  }
-
-  // Check no route is a catch-all.
-  if ((config.extraViews ?? []).some((r) => r.path?.includes('pathMatch'))) {
-    problems.push('A route is a catch-all (contains pathMatch); the catch-all belongs to the router.')
-  }
-
-  // Check expected names are present.
-  for (const name of names) {
-    if (!declaredNames.includes(name)) {
-      problems.push(`Expected route "${name}" not found.`)
-    }
-  }
-
-  // Check expected legacy paths are present.
-  for (const path of legacyPaths) {
-    if (!declaredLegacy.includes(path)) {
-      problems.push(`Expected legacy path "${path}" not found.`)
-    }
-  }
-
-  return problems
-}
-
-/**
- * Check that every route has a `meta.section` string. A route without one
- * leaves the menu unaware of what section the visitor is in.
- *
- * Returns the list of problems found (empty if all is well).
- */
-export function checkSectionMeta(config) {
-  const problems = []
-
-  for (const route of config.extraViews ?? []) {
-    if (typeof route.meta?.section !== 'string' || !route.meta.section.trim()) {
-      problems.push(`Route "${route.name}" has no section metadata.`)
-    }
-  }
-
-  return problems
-}
-
-/**
- * Check that the texts in a mounted host include entries from the given
- * namespaces. Matches each namespace against the rendered text with a
- * case-insensitive regex like `/\b(ns1|ns2)\.[a-z]/i`.
- *
- * Returns the list of text keys matched (empty if none found). A missing
- * key renders as its bare name, e.g. `"catalogue.era.ad"`, which the regex
- * would match.
- */
-export function checkTextsRendered(host, { namespaces = [] } = {}) {
-  if (!namespaces.length) return []
-
-  const text = host.textContent
-  const pattern = new RegExp(`\\b(${namespaces.join('|')})\\.[a-z]`, 'gi')
-  const found = new Set()
-
-  for (const match of text.matchAll(pattern)) {
-    found.add(match[1])
-  }
-
-  return Array.from(found)
-}
+import { createViewer } from '../createViewer.js'
+
+/**
+ * Mount a website to a detached DOM node on a given hash, returning the app,
+ * host, and router for test assertions. The router is ready and the app is
+ * mounted before the promise resolves.
+ *
+ * `config` and `messages` are the same objects a website's main.js assembles.
+ * `hash` defaults to the home page.
+ */
+export async function mountSite(config, messages, hash = '#/') {
+  window.location.hash = hash
+  const app = createViewer({ ...config, messages })
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  app.mount(host)
+  const router = app.config.globalProperties.$router
+  await router.isReady()
+  return { app, host, router }
+}
+
+/**
+ * Check that a configuration's routes are properly declared: every route has
+ * a name, no route is a catch-all, and every legacy route is listed in
+ * `legacyPaths`.
+ *
+ * Returns the list of problems found (empty if all is well). Routes without
+ * names appear by index in the message.
+ */
+export function checkRoutes(config, { names = [], legacyPaths = [] } = {}) {
+  const problems = []
+  const declaredNames = (config.extraViews ?? []).map((r) => r.name)
+  const declaredLegacy = (config.legacyRoutes ?? []).map((r) => r.path)
+
+  // Check every route has a name.
+  for (let i = 0; i < (config.extraViews ?? []).length; i++) {
+    if (!config.extraViews[i].name) {
+      problems.push(`Route ${i} has no name.`)
+    }
+  }
+
+  // Check no route is a catch-all.
+  if ((config.extraViews ?? []).some((r) => r.path?.includes('pathMatch'))) {
+    problems.push('A route is a catch-all (contains pathMatch); the catch-all belongs to the router.')
+  }
+
+  // Check expected names are present.
+  for (const name of names) {
+    if (!declaredNames.includes(name)) {
+      problems.push(`Expected route "${name}" not found.`)
+    }
+  }
+
+  // Check expected legacy paths are present.
+  for (const path of legacyPaths) {
+    if (!declaredLegacy.includes(path)) {
+      problems.push(`Expected legacy path "${path}" not found.`)
+    }
+  }
+
+  return problems
+}
+
+/**
+ * Check that every route has a `meta.section` string. A route without one
+ * leaves the menu unaware of what section the visitor is in.
+ *
+ * Returns the list of problems found (empty if all is well).
+ */
+export function checkSectionMeta(config) {
+  const problems = []
+
+  for (const route of config.extraViews ?? []) {
+    if (typeof route.meta?.section !== 'string' || !route.meta.section.trim()) {
+      problems.push(`Route "${route.name}" has no section metadata.`)
+    }
+  }
+
+  return problems
+}
+
+/**
+ * Check that the texts in a mounted host include entries from the given
+ * namespaces. Matches each namespace against the rendered text with a
+ * case-insensitive regex like `/\b(ns1|ns2)\.[a-z]/i`.
+ *
+ * Returns the list of text keys matched (empty if none found). A missing
+ * key renders as its bare name, e.g. `"catalogue.era.ad"`, which the regex
+ * would match.
+ */
+export function checkTextsRendered(host, { namespaces = [] } = {}) {
+  if (!namespaces.length) return []
+
+  const text = host.textContent
+  const pattern = new RegExp(`\\b(${namespaces.join('|')})\\.[a-z]`, 'gi')
+  const found = new Set()
+
+  for (const match of text.matchAll(pattern)) {
+    found.add(match[1])
+  }
+
+  return Array.from(found)
+}

package/src/testing/viteConfig.js

@@ -1,90 +1,72 @@
-import path from 'node:path'
-
-/**
- * The shared Vite configuration for viewer websites, returning a config object
- * ready to pass to `defineConfig()`. The seven websites duplicate this shape:
- * the `@inventory-data` alias to the data package, `optimizeDeps` to inline
- * the viewer packages, `testTimeout`, and the test environment.
- *
- * `dataPackage` is the npm package name, e.g. `'@museumwnf/islamicart-data'`.
- * `inline` is an optional array of extra packages to inline in tests, beyond
- * the required `'@museumwnf/viewer-core'` and `'@museumwnf/viewer-layout'`
- * (and, transitionally, their pre-#1722 `'@metanull/*'` spellings — see the
- * comment on `test.server.deps.inline` below).
- * `plugins` is an optional array of Vite plugins (e.g. `@vitejs/plugin-vue`),
- * which the site must supply because this package does not depend on them.
- * `root` is an optional project root path (default `process.cwd()`); use it when
- * loading the config from a context other than the project directory.
- */
-export function defineViewerConfig({
-  dataPackage,
-  inline = [],
-  plugins = [],
-  root = process.cwd(),
-} = {}) {
-  return {
-    plugins,
-    resolve: {
-      alias: {
-        // viewer-core reads every JSON of the data package through this alias.
-        // Resolve against the caller's project root, not this file's installed
-        // location: import.meta.url is the package's own path inside node_modules,
-        // not the site's project root where its node_modules actually exists.
-        '@inventory-data': path.join(root, 'node_modules', dataPackage),
-      },
-    },
-    optimizeDeps: {
-      // viewer-core ships .vue source that esbuild pre-bundling cannot parse;
-      // viewer-layout must not be pre-bundled either or its chunk gets a second
-      // copy of the Vue runtime in dev (both packages share the app's vue).
-      // The /i18n subpath is listed as well as the package: Vite pre-bundles a
-      // subpath as its own entry, and a second copy of the text module would be
-      // a second, empty set of texts for whatever imported it.
-      //
-      // Both the @museumwnf and @metanull spellings are listed: this list is
-      // matched against the *site's own* import specifier, which still says
-      // @metanull/* until every site completes its own move in
-      // metanull/inventory-app#1722. Matching only the new name silently stops
-      // excluding the package for every current consumer.
-      exclude: [
-        '@museumwnf/viewer-core',
-        '@museumwnf/viewer-core/i18n',
-        '@museumwnf/viewer-layout',
-        '@metanull/viewer-core',
-        '@metanull/viewer-core/i18n',
-        '@metanull/viewer-layout',
-      ],
-      // The runtime deps reach the browser through those excluded packages, so
-      // the dev-server dependency scan cannot discover them until the website's
-      // own views import them directly. Without this list a late discovery
-      // pre-bundles a second copy of Vue next to the raw one already loaded,
-      // and the dev server crashes on boot. Listing them pre-bundles each
-      // exactly once, and the excluded packages get the same copy.
-      include: ['vue', 'vue-router'],
-    },
-    test: {
-      environment: 'jsdom',
-      testTimeout: 60000,
-      server: {
-        deps: {
-          // viewer-core ships .vue source; Node cannot load it unless Vitest
-          // processes the package instead of externalizing it, matched by the
-          // specifier the *importing site* actually wrote. viewer-layout's
-          // composed views import viewer-core, so the layout is processed too.
-          // Both scopes are listed for the same transitional reason as
-          // optimizeDeps.exclude above: sites still import @metanull/* until
-          // metanull/inventory-app#1722, so matching only @museumwnf/* would
-          // externalize this package for every current consumer, sending its
-          // raw .vue files to Node's loader instead of Vitest's transform.
-          inline: [
-            '@museumwnf/viewer-core',
-            '@museumwnf/viewer-layout',
-            '@metanull/viewer-core',
-            '@metanull/viewer-layout',
-            ...inline,
-          ],
-        },
-      },
-    },
-  }
-}
+import path from 'node:path'
+
+/**
+ * The shared Vite configuration for viewer websites, returning a config object
+ * ready to pass to `defineConfig()`. The seven websites duplicate this shape:
+ * the `@inventory-data` alias to the data package, `optimizeDeps` to inline
+ * the viewer packages, `testTimeout`, and the test environment.
+ *
+ * `dataPackage` is the npm package name, e.g. `'@museumwnf/islamicart-data'`.
+ * `inline` is an optional array of extra packages to inline in tests, beyond
+ * the required `'@museumwnf/viewer-core'` and `'@museumwnf/viewer-layout'`.
+ * `plugins` is an optional array of Vite plugins (e.g. `@vitejs/plugin-vue`),
+ * which the site must supply because this package does not depend on them.
+ * `root` is an optional project root path (default `process.cwd()`); use it when
+ * loading the config from a context other than the project directory.
+ */
+export function defineViewerConfig({
+  dataPackage,
+  inline = [],
+  plugins = [],
+  root = process.cwd(),
+} = {}) {
+  return {
+    plugins,
+    resolve: {
+      alias: {
+        // viewer-core reads every JSON of the data package through this alias.
+        // Resolve against the caller's project root, not this file's installed
+        // location: import.meta.url is the package's own path inside node_modules,
+        // not the site's project root where its node_modules actually exists.
+        '@inventory-data': path.join(root, 'node_modules', dataPackage),
+      },
+    },
+    optimizeDeps: {
+      // viewer-core ships .vue source that esbuild pre-bundling cannot parse;
+      // viewer-layout must not be pre-bundled either or its chunk gets a second
+      // copy of the Vue runtime in dev (both packages share the app's vue).
+      // The /i18n subpath is listed as well as the package: Vite pre-bundles a
+      // subpath as its own entry, and a second copy of the text module would be
+      // a second, empty set of texts for whatever imported it.
+      exclude: [
+        '@museumwnf/viewer-core',
+        '@museumwnf/viewer-core/i18n',
+        '@museumwnf/viewer-layout',
+      ],
+      // The runtime deps reach the browser through those excluded packages, so
+      // the dev-server dependency scan cannot discover them until the website's
+      // own views import them directly. Without this list a late discovery
+      // pre-bundles a second copy of Vue next to the raw one already loaded,
+      // and the dev server crashes on boot. Listing them pre-bundles each
+      // exactly once, and the excluded packages get the same copy.
+      include: ['vue', 'vue-router'],
+    },
+    test: {
+      environment: 'jsdom',
+      testTimeout: 60000,
+      server: {
+        deps: {
+          // viewer-core ships .vue source; Node cannot load it unless Vitest
+          // processes the package instead of externalizing it, matched by the
+          // specifier the *importing site* actually wrote. viewer-layout's
+          // composed views import viewer-core, so the layout is processed too.
+          inline: [
+            '@museumwnf/viewer-core',
+            '@museumwnf/viewer-layout',
+            ...inline,
+          ],
+        },
+      },
+    },
+  }
+}

package/src/views/DetailView.vue

@@ -1,53 +1,53 @@
-<script setup>
-import { computed, ref, watchEffect } from 'vue'
-import { useDataPackage } from '../composables/useDataPackage.js'
-import { renderBlock } from '../i18n/markdown.js'
-
-const props = defineProps({
-  entity: { type: String, required: true },
-  id: { type: String, required: true },
-})
-
-const { loadEntity } = useDataPackage()
-
-const record = ref(undefined)
-watchEffect(async () => {
-  // Read both props before the first await so the effect tracks them.
-  const { entity, id } = props
-  const all = await loadEntity(entity)
-  record.value = all.find((r) => String(r.id) === String(id)) ?? null
-})
-
-const fields = computed(() =>
-  record.value ? Object.entries(record.value).filter(([key]) => key !== 'id') : []
-)
-
-// Through the same pipeline as every text, which escapes raw HTML rather than
-// rendering it. A data package holds Markdown: the importer converts the legacy
-// HTML on the way in, so HTML reaching a field here is a fault upstream and the
-// fix belongs in the importer. Rendering it would hide that, and would make a
-// museum record — written by hand, years ago, in another system — the one input
-// this application trusts with markup.
-function renderValue(value) {
-  return typeof value === 'string' ? renderBlock(value, { breaks: true }) : JSON.stringify(value)
-}
-</script>
-
-<template>
-  <article class="vc-detail">
-    <p v-if="record === undefined">{{ $t('core.status.loading') }}</p>
-    <p v-else-if="record === null">{{ $t('core.detail.notFound') }}</p>
-    <template v-else>
-      <h1>{{ record.title ?? record.name ?? record.id }}</h1>
-      <dl>
-        <template v-for="[key, value] in fields" :key="key">
-          <dt>{{ key }}</dt>
-          <dd v-html="renderValue(value)"></dd>
-        </template>
-      </dl>
-    </template>
-    <p>
-      <router-link :to="`/${entity}`">{{ $t('core.nav.backToList') }}</router-link>
-    </p>
-  </article>
-</template>
+<script setup>
+import { computed, ref, watchEffect } from 'vue'
+import { useDataPackage } from '../composables/useDataPackage.js'
+import { renderBlock } from '../i18n/markdown.js'
+
+const props = defineProps({
+  entity: { type: String, required: true },
+  id: { type: String, required: true },
+})
+
+const { loadEntity } = useDataPackage()
+
+const record = ref(undefined)
+watchEffect(async () => {
+  // Read both props before the first await so the effect tracks them.
+  const { entity, id } = props
+  const all = await loadEntity(entity)
+  record.value = all.find((r) => String(r.id) === String(id)) ?? null
+})
+
+const fields = computed(() =>
+  record.value ? Object.entries(record.value).filter(([key]) => key !== 'id') : []
+)
+
+// Through the same pipeline as every text, which escapes raw HTML rather than
+// rendering it. A data package holds Markdown: the importer converts the legacy
+// HTML on the way in, so HTML reaching a field here is a fault upstream and the
+// fix belongs in the importer. Rendering it would hide that, and would make a
+// museum record — written by hand, years ago, in another system — the one input
+// this application trusts with markup.
+function renderValue(value) {
+  return typeof value === 'string' ? renderBlock(value, { breaks: true }) : JSON.stringify(value)
+}
+</script>
+
+<template>
+  <article class="vc-detail">
+    <p v-if="record === undefined">{{ $t('core.status.loading') }}</p>
+    <p v-else-if="record === null">{{ $t('core.detail.notFound') }}</p>
+    <template v-else>
+      <h1>{{ record.title ?? record.name ?? record.id }}</h1>
+      <dl>
+        <template v-for="[key, value] in fields" :key="key">
+          <dt>{{ key }}</dt>
+          <dd v-html="renderValue(value)"></dd>
+        </template>
+      </dl>
+    </template>
+    <p>
+      <router-link :to="`/${entity}`">{{ $t('core.nav.backToList') }}</router-link>
+    </p>
+  </article>
+</template>

package/src/views/HomeView.vue

@@ -1,20 +1,20 @@
-<script setup>
-import { inject } from 'vue'
-import { VIEWER_CONFIG } from '../injectionKeys.js'
-
-const config = inject(VIEWER_CONFIG, {})
-const entities = config.features?.entities ?? []
-</script>
-
-<template>
-  <section class="vc-home">
-    <h1>{{ config.siteName }}</h1>
-    <nav v-if="entities.length">
-      <ul>
-        <li v-for="entity in entities" :key="entity">
-          <router-link :to="`/${entity}`">{{ entity }}</router-link>
-        </li>
-      </ul>
-    </nav>
-  </section>
-</template>
+<script setup>
+import { inject } from 'vue'
+import { VIEWER_CONFIG } from '../injectionKeys.js'
+
+const config = inject(VIEWER_CONFIG, {})
+const entities = config.features?.entities ?? []
+</script>
+
+<template>
+  <section class="vc-home">
+    <h1>{{ config.siteName }}</h1>
+    <nav v-if="entities.length">
+      <ul>
+        <li v-for="entity in entities" :key="entity">
+          <router-link :to="`/${entity}`">{{ entity }}</router-link>
+        </li>
+      </ul>
+    </nav>
+  </section>
+</template>

package/src/views/ListView.vue

@@ -1,61 +1,61 @@
-<script setup>
-import { computed, ref, watchEffect } from 'vue'
-import { useRoute } from 'vue-router'
-import { useDataPackage } from '../composables/useDataPackage.js'
-import { paginate } from '../catalogue/pagination.js'
-
-const props = defineProps({
-  entity: { type: String, required: true },
-  pageSize: { type: Number, default: 20 },
-})
-
-const route = useRoute()
-const { loadEntity } = useDataPackage()
-
-const records = ref(null)
-watchEffect(async () => {
-  records.value = await loadEntity(props.entity)
-})
-
-// The same page arithmetic every website's lists use, so this generic list
-// and a site's results page cannot disagree on where page 3 starts.
-const paged = computed(() => paginate(records.value ?? [], route.query.page, props.pageSize))
-const page = computed(() => paged.value.currentPage)
-const totalPages = computed(() => paged.value.lastPage)
-const pageRecords = computed(() => paged.value.rows)
-
-function labelOf(record) {
-  return record.title ?? record.name ?? record.label ?? record.id
-}
-</script>
-
-<template>
-  <section class="vc-list">
-    <h1>{{ entity }}</h1>
-    <p v-if="records === null">{{ $t('core.status.loading') }}</p>
-    <p v-else-if="records.length === 0">{{ $t('core.list.empty') }}</p>
-    <template v-else>
-      <ul>
-        <li v-for="record in pageRecords" :key="record.id">
-          <router-link :to="`/${entity}/${record.id}`">{{ labelOf(record) }}</router-link>
-        </li>
-      </ul>
-      <nav v-if="totalPages > 1" class="vc-pagination">
-        <router-link v-if="page > 1" :to="{ query: { page: page - 1 } }">
-          {{ $t('core.pagination.previous') }}
-        </router-link>
-        <!-- The position is rendered here, next to the texts, rather than
-             inserted into one: a text that has to carry a number cannot be
-             translated without carrying the number's place in the sentence
-             too, and that is the one thing this system does not do. -->
-        <span class="vc-pagination__position">{{ page }} / {{ totalPages }}</span>
-        <router-link v-if="page < totalPages" :to="{ query: { page: page + 1 } }">
-          {{ $t('core.pagination.next') }}
-        </router-link>
-      </nav>
-    </template>
-    <p>
-      <router-link to="/">{{ $t('core.nav.home') }}</router-link>
-    </p>
-  </section>
-</template>
+<script setup>
+import { computed, ref, watchEffect } from 'vue'
+import { useRoute } from 'vue-router'
+import { useDataPackage } from '../composables/useDataPackage.js'
+import { paginate } from '../catalogue/pagination.js'
+
+const props = defineProps({
+  entity: { type: String, required: true },
+  pageSize: { type: Number, default: 20 },
+})
+
+const route = useRoute()
+const { loadEntity } = useDataPackage()
+
+const records = ref(null)
+watchEffect(async () => {
+  records.value = await loadEntity(props.entity)
+})
+
+// The same page arithmetic every website's lists use, so this generic list
+// and a site's results page cannot disagree on where page 3 starts.
+const paged = computed(() => paginate(records.value ?? [], route.query.page, props.pageSize))
+const page = computed(() => paged.value.currentPage)
+const totalPages = computed(() => paged.value.lastPage)
+const pageRecords = computed(() => paged.value.rows)
+
+function labelOf(record) {
+  return record.title ?? record.name ?? record.label ?? record.id
+}
+</script>
+
+<template>
+  <section class="vc-list">
+    <h1>{{ entity }}</h1>
+    <p v-if="records === null">{{ $t('core.status.loading') }}</p>
+    <p v-else-if="records.length === 0">{{ $t('core.list.empty') }}</p>
+    <template v-else>
+      <ul>
+        <li v-for="record in pageRecords" :key="record.id">
+          <router-link :to="`/${entity}/${record.id}`">{{ labelOf(record) }}</router-link>
+        </li>
+      </ul>
+      <nav v-if="totalPages > 1" class="vc-pagination">
+        <router-link v-if="page > 1" :to="{ query: { page: page - 1 } }">
+          {{ $t('core.pagination.previous') }}
+        </router-link>
+        <!-- The position is rendered here, next to the texts, rather than
+             inserted into one: a text that has to carry a number cannot be
+             translated without carrying the number's place in the sentence
+             too, and that is the one thing this system does not do. -->
+        <span class="vc-pagination__position">{{ page }} / {{ totalPages }}</span>
+        <router-link v-if="page < totalPages" :to="{ query: { page: page + 1 } }">
+          {{ $t('core.pagination.next') }}
+        </router-link>
+      </nav>
+    </template>
+    <p>
+      <router-link to="/">{{ $t('core.nav.home') }}</router-link>
+    </p>
+  </section>
+</template>