@museumwnf/viewer-core 1.14.0

package/src/testing/viteConfig.js

@@ -0,0 +1,90 @@
+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,
+          ],
+        },
+      },
+    },
+  }
+}

package/src/views/DetailView.vue

@@ -0,0 +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>

package/src/views/HomeView.vue

@@ -0,0 +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>

package/src/views/ListView.vue

@@ -0,0 +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>

package/src/views/NotFoundView.vue

@@ -0,0 +1,8 @@
+<template>
+  <section class="vc-not-found">
+    <p>{{ $t('core.notFound.page') }}</p>
+    <p>
+      <router-link to="/">{{ $t('core.nav.home') }}</router-link>
+    </p>
+  </section>
+</template>

package/src/vite.js

@@ -0,0 +1,8 @@
+/**
+ * Vite configuration helper for viewer websites.
+ * This is a separate entry point because Vite's config loader runs under Node.js,
+ * which cannot parse .vue files. The ./testing barrel re-exports mountSite and
+ * other test utilities that import createViewer → AppRoot.vue, making it unsafe
+ * to import from a vite.config.js. This entry avoids that chain.
+ */
+export { defineViewerConfig } from './testing/viteConfig.js'