@conduction/nextcloud-vue 2.56.0-beta.21 → 2.56.0-beta.23

package/src/components/CnNotificationPreferences/CnNotificationPreferences.vue

@@ -32,7 +32,7 @@
 							:modelValue="entry.enabled"
 							:disabled="entry.saving"
 							@update:modelValue="onToggle(entry, $event)">
-							{{ notificationLabel(entry.notification) }}
+							{{ notificationLabel(entry) }}
 						</NcCheckboxRadioSwitch>
 						<NcButton v-if="entry.source === 'user-override'"
 							variant="tertiary"
@@ -49,7 +49,7 @@
 
 <script>
 import axios from '@nextcloud/axios'
-import { translate as t } from '@nextcloud/l10n'
+import { getLanguage, translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 /**
  * CnNotificationPreferences
@@ -82,6 +82,7 @@ import { generateUrl } from '@nextcloud/router'
 import { NcAppSettingsSection, NcButton, NcCheckboxRadioSwitch, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import BellOffOutline from 'vue-material-design-icons/BellOffOutline.vue'
 import BellOutline from 'vue-material-design-icons/BellOutline.vue'
+import { notificationRuleLabel } from '../../utils/notificationRuleLabel.js'
 
 const PREFS_PATH = '/apps/openregister/api/notification-preferences'
 
@@ -106,6 +107,28 @@ export default {
 		 * than an always-empty pane.
 		 */
 		cnAppId: { default: () => '' },
+		/**
+		 * App-supplied labels for its notification rules, provided by the
+		 * CnAppRoot ancestor from its `notificationLabels` prop. Keyed
+		 * `<schema>.<key>` or `<key>`.
+		 */
+		cnNotificationLabels: { default: () => ({}) },
+	},
+
+	props: {
+		/**
+		 * Labels for the notification rules, keyed `<schema>.<key>` or
+		 * `<key>`; values are strings or per-locale maps (`{ nl, en }`).
+		 * Optional: inside CnAppRoot the app's `notificationLabels` arrive by
+		 * inject, and a rule without a label still reads as words, never as
+		 * its raw key. A prop given here wins over the injected map.
+		 *
+		 * @spec openspec/changes/notification-rule-labels-and-runtime-version/specs/notification-preferences/spec.md
+		 */
+		labels: {
+			type: Object,
+			default: null,
+		},
 	},
 
 	data() {
@@ -231,18 +254,43 @@ export default {
 		},
 
 		/**
-		 * Human-readable label for a notification key, falling back to the key.
+		 * Human-readable label for a notification rule. Never the raw key: the
+		 * rule's own label, then the app's, then the library's wording for the
+		 * generic keys, then the key split into words.
 		 *
-		 * @param {string} key The notification annotation key.
+		 * @param {object} entry The preference row.
 		 * @return {string} A display label.
+		 *
+		 * @spec openspec/changes/notification-rule-labels-and-runtime-version/specs/notification-preferences/spec.md
 		 */
-		notificationLabel(key) {
+		notificationLabel(entry) {
 			const known = {
 				object_created: t('nextcloud-vue', 'When an item is created'),
 				object_updated: t('nextcloud-vue', 'When an item is updated'),
 				object_transitioned: t('nextcloud-vue', 'When an item is assigned or changes status'),
 			}
-			return known[key] || key
+			const language = this.currentLanguage()
+			const injected = typeof this.cnNotificationLabels === 'function'
+				? this.cnNotificationLabels()
+				: this.cnNotificationLabels
+			return notificationRuleLabel(entry, {
+				labels: { ...(injected || {}), ...(this.labels || {}) },
+				known,
+				language,
+			})
+		},
+
+		/**
+		 * The person's language, `en` when it cannot be read.
+		 *
+		 * @return {string} The language code.
+		 */
+		currentLanguage() {
+			try {
+				return (typeof getLanguage === 'function' && getLanguage()) || 'en'
+			} catch {
+				return 'en'
+			}
 		},
 
 		/**

package/src/components/CnPageRenderer/CnPageRenderer.vue

@@ -120,7 +120,8 @@
 				v-if="widgetsBySlot.has('body')"
 				:widgets="widgetsBySlot.get('body')"
 				:editable="bodyEditable"
-				slotName="body" />
+				slotName="body"
+				@selectObject="onRelatedObjectOpen" />
 			<component
 				:is="resolvedComponent"
 				v-else-if="resolvedComponent"
@@ -130,6 +131,7 @@
 				@rowClick="onRowOpen"
 				@rowAuxClick="onRowOpen"
 				@editOpen="onRowOpen"
+				@relatedObjectClick="onRelatedObjectOpen"
 				@configure="showConfigModal = true">
 				<!-- This `<template v-for>` defines dynamic SLOTS, not a
 				     rendered list, so the rule's advice is inverted here:
@@ -173,27 +175,32 @@
 			<CnWidgetGrid
 				v-if="widgetsBySlot.has('header-actions')"
 				:widgets="widgetsBySlot.get('header-actions')"
-				slotName="header-actions" />
+				slotName="header-actions"
+				@selectObject="onRelatedObjectOpen" />
 			<!-- footer slot -->
 			<CnWidgetGrid
 				v-if="widgetsBySlot.has('footer')"
 				:widgets="widgetsBySlot.get('footer')"
-				slotName="footer" />
+				slotName="footer"
+				@selectObject="onRelatedObjectOpen" />
 			<!-- modal slot -->
 			<CnWidgetGrid
 				v-if="widgetsBySlot.has('modal')"
 				:widgets="widgetsBySlot.get('modal')"
-				slotName="modal" />
+				slotName="modal"
+				@selectObject="onRelatedObjectOpen" />
 			<!-- sidebar slot (gated by cnPageSidebarVisible) -->
 			<CnWidgetGrid
 				v-if="widgetsBySlot.has('sidebar') && pageSidebarVisibleValue"
 				:widgets="widgetsBySlot.get('sidebar')"
-				slotName="sidebar" />
+				slotName="sidebar"
+				@selectObject="onRelatedObjectOpen" />
 			<!-- dynamic tab:* and section:* slots -->
 			<template v-for="dynamicSlot in dynamicSlotKeys" :key="dynamicSlot">
 				<CnWidgetGrid
 					:widgets="widgetsBySlot.get(dynamicSlot)"
-					:slotName="dynamicSlot" />
+					:slotName="dynamicSlot"
+					@selectObject="onRelatedObjectOpen" />
 			</template>
 		</template>
 
@@ -206,6 +213,7 @@
 			@rowClick="onRowOpen"
 			@rowAuxClick="onRowOpen"
 			@editOpen="onRowOpen"
+			@relatedObjectClick="onRelatedObjectOpen"
 			@configure="showConfigModal = true">
 			<!-- Dynamic slot definition, not a rendered list — see the note on
 			     the identical block above. -->
@@ -300,6 +308,53 @@ import { resolveRouteSentinels } from '../../utils/resolveRouteSentinels.js'
 import { parseSortKeys } from '../../utils/routeFilters.js'
 import { buildRouteParams, routePathFor } from '../../utils/routeParams.js'
 import { isNewTabHandled } from '../../utils/rowAuxClick.js'
+
+/**
+ * OpenRegister registers and schemas already described by id, so a click on
+ * a related object costs at most one request per register or schema for as
+ * long as this module stays loaded (the SPA's lifetime, across page
+ * changes). Keyed by `${kind}:${id}`; a failed lookup is dropped again so the
+ * next click retries it.
+ *
+ * @type {Map<string, Promise<{ id: string, slug: string }>>}
+ */
+const entityDescriptorCache = new Map()
+
+/**
+ * Describe an OpenRegister register or schema (`{ id, slug }`) by its id or
+ * slug, or null when it cannot be fetched. An object's `@self` names its
+ * register and schema by id while a manifest may name them by slug; this is
+ * the bridge. Lazy-imports axios and the router helper like the widgets do.
+ *
+ * @param {'registers'|'schemas'} kind The collection to ask.
+ * @param {string|number} idOrSlug The id (or slug) to describe.
+ * @return {Promise<{ id: string, slug: string }|null>} The descriptor.
+ */
+function describeOpenRegisterEntity(kind, idOrSlug) {
+	const key = `${kind}:${idOrSlug}`
+	if (!entityDescriptorCache.has(key)) {
+		entityDescriptorCache.set(key, (async () => {
+			try {
+				const [{ default: axios }, { generateUrl }] = await Promise.all([
+					import('@nextcloud/axios'),
+					import('@nextcloud/router'),
+				])
+				const url = generateUrl('/apps/openregister/api/{kind}/{id}', { kind, id: String(idOrSlug) })
+				const res = await axios.get(url)
+				const data = res && res.data
+				if (!data || typeof data !== 'object') {
+					throw new Error(`no descriptor for ${key}`)
+				}
+				return { id: String(data.id ?? idOrSlug), slug: String(data.slug ?? '') }
+			} catch (error) {
+				// One failed request must not pin every later click to nowhere.
+				entityDescriptorCache.delete(key)
+				throw error
+			}
+		})())
+	}
+	return entityDescriptorCache.get(key).catch(() => null)
+}
 import { CnMassExportDialog } from '../CnMassExportDialog/index.js'
 import { defaultPageTypes } from './pageTypes.js'
 
@@ -1830,6 +1885,92 @@ export default {
 			})
 		},
 
+		/**
+		 * Open the detail page of an object clicked in a Related widget —
+		 * reaching here as `CnDetailPage`'s `related-object-click`, or as
+		 * `CnWidgetGrid`'s `select-object` on a v2 widget-grid page. Nothing
+		 * listened to either, so the rows looked like links and went nowhere.
+		 *
+		 * @param {object} raw The clicked object as the Related widget holds it.
+		 * @return {Promise<void>}
+		 */
+		async onRelatedObjectOpen(raw) {
+			const target = await this.relatedObjectTarget(raw)
+			if (target) {
+				this.$router.push(target).catch(() => {})
+			}
+		},
+
+		/**
+		 * Where a related object opens: the first `type: 'detail'` page bound
+		 * to the object's register and schema, with the id in whichever param
+		 * that page's route declares. The object's `@self` names register and
+		 * schema by id and a manifest may name them by slug, so a miss on the
+		 * literal pair describes both (one request each, cached) and matches
+		 * again. Null, silently, when there is no router or the object carries
+		 * no register, schema or id (nothing to open); null with a warning,
+		 * like a dead row click, when no detail page matches or the router
+		 * lacks the route.
+		 *
+		 * @param {object} raw The clicked object.
+		 * @return {Promise<object|null>} The router location, or null.
+		 */
+		async relatedObjectTarget(raw) {
+			const router = this.$router
+			if (!router || !raw || typeof raw !== 'object') {
+				return null
+			}
+			const self = raw['@self'] || {}
+			const id = raw.id ?? self.id ?? self.uuid ?? raw.uuid
+			const register = self.register ?? raw.register
+			const schema = self.schema ?? raw.schema
+			const missing = (v) => v === undefined || v === null || v === ''
+			if (missing(id) || missing(register) || missing(schema)) {
+				return null
+			}
+			let page = this.detailPageFor([String(register)], [String(schema)])
+			if (!page) {
+				const [reg, sch] = await Promise.all([
+					describeOpenRegisterEntity('registers', register),
+					describeOpenRegisterEntity('schemas', schema),
+				])
+				page = this.detailPageFor(
+					[String(register), reg?.id, reg?.slug].filter(Boolean),
+					[String(schema), sch?.id, sch?.slug].filter(Boolean),
+				)
+			}
+			if (!page) {
+				// eslint-disable-next-line no-console
+				console.warn(`[CnPageRenderer] No detail page is bound to register "${register}" and schema "${schema}", so related object "${id}" opens nowhere.`)
+				return null
+			}
+			if (this.routeNameIsKnown(page.id) === false) {
+				// eslint-disable-next-line no-console
+				console.warn(`[CnPageRenderer] Detail page "${page.id}" is not a route the router has, so related object "${id}" opens nowhere.`)
+				return null
+			}
+			const path = page.route ?? routePathFor(router, page.id)
+			return { name: page.id, params: buildRouteParams(path, id, this.$route?.params) }
+		},
+
+		/**
+		 * The first `type: 'detail'` page whose register and schema are both
+		 * among the given names (ids or slugs, compared as strings).
+		 *
+		 * @param {Array<string>} registerNames Names the register goes by.
+		 * @param {Array<string>} schemaNames Names the schema goes by.
+		 * @return {object|null} The page, or null.
+		 */
+		detailPageFor(registerNames, schemaNames) {
+			for (const page of this.detailPageByRegisterSchema.values()) {
+				const cfg = page.config || {}
+				if (registerNames.includes(String(cfg.register)) && schemaNames.includes(String(cfg.schema))) {
+					return page
+				}
+			}
+			return null
+		},
+
 		/**
 		 * Whether the router has a route by this name.
 		 *

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -88,7 +88,8 @@
 					:integrationContext="integrationContext"
 					:cnRegistry="cnRegistry"
 					@geoSaved="onGeoSaved"
-					@openIntegration="onOpenIntegration" />
+					@openIntegration="onOpenIntegration"
+					@selectObject="onSelectObject" />
 				<NcEmptyContent v-else :name="missingLabel(entry)" />
 			</CnTab>
 		</CnTabs>
@@ -357,7 +358,7 @@ export default {
 		},
 	},
 
-	emits: ['geo-saved', 'open-integration'],
+	emits: ['geo-saved', 'open-integration', 'select-object'],
 
 	data() {
 		return {
@@ -530,6 +531,20 @@ export default {
 			this.$emit('open-integration', integrationId)
 		},
 
+		/**
+		 * Re-emit a related child's object click; the page opens the object.
+		 *
+		 * @param {object} raw The clicked object.
+		 * @return {void}
+		 */
+		onSelectObject(raw) {
+			/**
+			 * @event select-object Re-emitted from a related child whose object row was clicked. Payload is the raw object.
+			 * @type {object}
+			 */
+			this.$emit('select-object', raw)
+		},
+
 		/**
 		 * Follow the strip's own selection, so keyboard navigation moves the
 		 * hoisted Actions menu too.

package/src/components/CnWidgetGrid/CnWidgetGrid.vue

@@ -39,7 +39,8 @@
 				<div class="grid-stack-item-content">
 					<component
 						:is="widget.component"
-						v-bind="widget.props" />
+						v-bind="widget.props"
+						@selectObject="onSelectObject" />
 				</div>
 			</div>
 		</div>
@@ -58,7 +59,8 @@
 				:style="cnGridCellStyle(widget, gridColumns)">
 				<component
 					:is="widget.component"
-					v-bind="widget.props" />
+					v-bind="widget.props"
+					@selectObject="onSelectObject" />
 			</div>
 		</template>
 	</div>
@@ -161,7 +163,7 @@ export default {
 		},
 	},
 
-	emits: ['layout-change'],
+	emits: ['layout-change', 'select-object'],
 
 	data() {
 		return {
@@ -371,6 +373,20 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Pass a related widget's object click up; the page opens the object.
+		 *
+		 * @param {object} raw The clicked object.
+		 * @return {void}
+		 */
+		onSelectObject(raw) {
+			/**
+			 * @event select-object An object row in a related widget of this grid was clicked. Payload is the raw object.
+			 * @type {object}
+			 */
+			this.$emit('select-object', raw)
+		},
+
 		// Expose the shared grid helpers to the template.
 		cnGridCellStyle,
 		hasGridRow,

package/src/index.js

@@ -476,6 +476,8 @@ export {
 } from './utils/folderCustomization.js'
 export { currentTheme, useCurrentTheme } from './composables/useCurrentTheme.js'
 export { ROADMAP_LABEL_BLOCKLIST } from './utils/roadmapLabelBlocklist.js'
+// The words a person reads for a notification rule key (never the raw key).
+export { humaniseRuleKey, notificationRuleLabel } from './utils/notificationRuleLabel.js'
 
 // Shared field validators. These are UX affordances that run in the browser —
 // they do NOT replace server-side validation, which stays authoritative at the

package/src/utils/notificationRuleLabel.js

@@ -0,0 +1,129 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * The label a person reads for one notification rule in their settings.
+ *
+ * A rule is declared in a schema's `x-openregister-notifications` map under a
+ * KEY (`caseAssigned`, `clientUpdated`, `onCreate`). The key is an identifier
+ * for a developer. The settings pane used to print it as is, so a person saw
+ * "substitutionRegisteredForSubstitute" next to a switch and had to guess.
+ *
+ * The label is taken from the first source that has one, most specific first:
+ *
+ *   1. the rule's own words, when OpenRegister passes them on the preference
+ *      entry (`label`, then `title`), as a plain string or a per-locale map
+ *      like the dialect's `subject` (`{ "nl": "…", "en": "…" }`);
+ *   2. the app's own label for the rule, from the `labels` map the app hands
+ *      to CnAppRoot (`notificationLabels`), keyed `<schema>.<key>` or `<key>`;
+ *   3. the library's wording for the generic object-event keys;
+ *   4. the key made readable: `caseAssigned` becomes "Case assigned".
+ *
+ * The rule's `subject` is used only when it carries no `{{placeholder}}`: it
+ * is the notification TITLE template, and "Case "{{title}}" assigned to you"
+ * reads worse as a setting than the readable key does.
+ *
+ * Pure: no store, no fetch, no Vue.
+ *
+ * @spec openspec/changes/notification-rule-labels-and-runtime-version/specs/notification-preferences/spec.md
+ */
+
+/**
+ * Pick the string for the current language out of a string or per-locale map.
+ *
+ * @param {string|object|null|undefined} value A string, or `{ nl, en, … }`.
+ * @param {string} [language] The current language, e.g. `nl` or `de_DE`.
+ * @return {string} The resolved text, or '' when there is none.
+ */
+export function resolveLocalised(value, language = 'en') {
+	if (typeof value === 'string') {
+		return value.trim()
+	}
+	if (!value || typeof value !== 'object' || Array.isArray(value)) {
+		return ''
+	}
+	const lang = String(language || 'en')
+	const base = lang.split(/[-_]/)[0]
+	for (const candidate of [lang, base, 'en']) {
+		if (typeof value[candidate] === 'string' && value[candidate].trim() !== '') {
+			return value[candidate].trim()
+		}
+	}
+	const first = Object.values(value).find((text) => typeof text === 'string' && text.trim() !== '')
+	return first ? first.trim() : ''
+}
+
+/**
+ * Make a rule key readable: split camelCase, snake_case and kebab-case into
+ * words, keep acronyms, and capitalise only the first word.
+ *
+ * `caseAssigned` → "Case assigned", `object_created` → "Object created",
+ * `newBRPRecord` → "New BRP record".
+ *
+ * @param {string} key The rule key.
+ * @return {string} A readable sentence-case label, or the key when it has no words.
+ */
+export function humaniseRuleKey(key) {
+	const words = String(key || '')
+		.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+		.replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
+		.split(/[\s_\-.]+/)
+		.filter(Boolean)
+	if (words.length === 0) {
+		return String(key || '')
+	}
+	return words
+		.map((word, index) => {
+			const isAcronym = word.length > 1 && word === word.toUpperCase() && /[A-Z]/.test(word)
+			if (isAcronym) {
+				return word
+			}
+			const lower = word.toLowerCase()
+			return index === 0 ? lower.charAt(0).toUpperCase() + lower.slice(1) : lower
+		})
+		.join(' ')
+}
+
+/**
+ * The label for one preference entry.
+ *
+ * @param {object} entry A preference entry: `{ schema, notification, label?, title?, subject? }`.
+ * @param {object} [options] Where else a label may come from.
+ * @param {object} [options.labels] App-supplied labels keyed `<schema>.<key>` or `<key>`;
+ *   values are strings or per-locale maps.
+ * @param {object} [options.known] Library wording for generic keys, keyed by rule key.
+ * @param {string} [options.language] The current language.
+ * @return {string} The label to show.
+ */
+export function notificationRuleLabel(entry, { labels = {}, known = {}, language = 'en' } = {}) {
+	const key = String(entry?.notification ?? '')
+	const schema = String(entry?.schema ?? '')
+
+	for (const field of ['label', 'title']) {
+		const own = resolveLocalised(entry?.[field], language)
+		if (own) {
+			return own
+		}
+	}
+
+	const map = labels && typeof labels === 'object' ? labels : {}
+	for (const lookup of [schema ? `${schema}.${key}` : '', key]) {
+		if (lookup && Object.hasOwn(map, lookup)) {
+			const fromApp = resolveLocalised(map[lookup], language)
+			if (fromApp) {
+				return fromApp
+			}
+		}
+	}
+
+	if (known && typeof known[key] === 'string' && known[key]) {
+		return known[key]
+	}
+
+	const subject = resolveLocalised(entry?.subject, language)
+	if (subject && !subject.includes('{{')) {
+		return subject
+	}
+
+	return humaniseRuleKey(key)
+}

package/webpack/index.d.ts

@@ -28,3 +28,19 @@ export interface CnPublicPathOptions {
  * @param options Where the public path is read from at runtime.
  */
 export function withPublicPath<T extends object | object[]>(config: T, options?: CnPublicPathOptions): T
+
+export interface CnAppVersionDefineOptions {
+	/** The initial-state key the app's page provides its version under. Defaults to `version`. */
+	key?: string
+}
+
+/**
+ * A `webpack.DefinePlugin` expression for `appVersion` that reads the
+ * installed app version from the page's initial state at runtime, falling
+ * back to `fallback` (the build-time version) when the state is absent.
+ *
+ * @param appId The app id.
+ * @param fallback The build-time version.
+ * @param options Which initial-state key to read.
+ */
+export function appVersionDefine(appId: string, fallback?: string, options?: CnAppVersionDefineOptions): string

package/webpack/index.js

@@ -116,7 +116,77 @@ function withPublicPath(config, options = {}) {
 	}
 }
 
+/**
+ * The `appVersion` define, resolved in the browser from the INSTALLED app.
+ *
+ * THE PROBLEM
+ * -----------
+ * `@nextcloud/vue` prints `<app name> <appVersion>` in the footer of every
+ * NcAppSettingsDialog, and reads `appVersion` as a global the app's webpack
+ * config defines. Apps defined it from `package.json` (a `0.1.0` nobody bumps,
+ * so pipelinq read "pipelinq 0.1.0") or from `appinfo/info.xml` at build time.
+ * The second is still wrong on every release: the release workflow writes the
+ * release version into `info.xml` after the bundle is built, so dossiq
+ * 0.4.48-beta said "dossiq 0.4.47-unstable". A build cannot know the version
+ * it will be installed as.
+ *
+ * THE FIX
+ * -------
+ * Define `appVersion` as an EXPRESSION, not a literal. It runs once in the
+ * browser and reads the app's `version` initial state, which the app's page
+ * controller provides from what Nextcloud has installed
+ * (`IAppConfig::getValueString($appId, 'installed_version')`). It reads the
+ * same hidden input `@nextcloud/initial-state` `loadState()` reads; it cannot
+ * import that package because a define is pasted into every module as code.
+ * When the state is missing (a page that does not provide it, a test, a
+ * worker without a document) it falls back to the build-time version.
+ *
+ * USAGE
+ * -----
+ * ```js
+ * // webpack.config.js
+ * const { appVersionDefine } = require('@conduction/nextcloud-vue/webpack')
+ * new webpack.DefinePlugin({ appVersion: appVersionDefine('dossiq', readAppVersion()) })
+ * ```
+ * ```php
+ * // the controller that renders the app's page
+ * $this->initialState->provideInitialState('version', $this->appConfig->getValueString('dossiq', 'installed_version', ''));
+ * ```
+ *
+ * @param {string} appId The app id, as used for its initial state.
+ * @param {string} [fallback] The version to show when no initial state is
+ *   present, normally the build-time `info.xml` version.
+ * @param {object} [options] Options.
+ * @param {string} [options.key] The initial-state key. Defaults to `version`.
+ *
+ * @return {string} A JavaScript expression for `webpack.DefinePlugin`.
+ *
+ * @throws {TypeError} When `appId` is empty.
+ *
+ * @spec openspec/changes/notification-rule-labels-and-runtime-version/specs/notification-preferences/spec.md
+ */
+function appVersionDefine(appId, fallback = '', options = {}) {
+	const id = String(appId || '').trim()
+	if (id === '') {
+		throw new TypeError('appVersionDefine() needs the app id whose installed version it reads')
+	}
+	const key = String(options.key || 'version')
+	const elementId = JSON.stringify('initial-state-' + id + '-' + key)
+	const fallbackLiteral = JSON.stringify(String(fallback ?? ''))
+	return '(function () {'
+		+ ' try {'
+		+ ' var el = typeof document !== "undefined" && document.getElementById(' + elementId + ');'
+		+ ' if (el && el.value) {'
+		+ ' var v = JSON.parse(atob(el.value));'
+		+ ' if (typeof v === "string" && v !== "") { return v; }'
+		+ ' }'
+		+ ' } catch (e) {}'
+		+ ' return ' + fallbackLiteral + ';'
+		+ ' })()'
+}
+
 module.exports = {
 	AUTO_PUBLIC_PATH,
+	appVersionDefine,
 	withPublicPath,
 }