@contember/interface 1.3.0-alpha.25 → 1.3.0-alpha.26

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/interface",
   "license": "Apache-2.0",
-  "version": "1.3.0-alpha.25",
+  "version": "1.3.0-alpha.26",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -35,22 +35,22 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@contember/react-binding": "1.3.0-alpha.25",
-    "@contember/react-client": "1.3.0-alpha.25",
-    "@contember/react-dataview": "1.3.0-alpha.25",
-    "@contember/react-devbar": "1.3.0-alpha.25",
-    "@contember/react-identity": "1.3.0-alpha.25",
-    "@contember/react-routing": "1.3.0-alpha.25",
-    "@contember/utilities": "1.3.0-alpha.25",
+    "@contember/react-binding": "1.3.0-alpha.26",
+    "@contember/react-client": "1.3.0-alpha.26",
+    "@contember/react-dataview": "1.3.0-alpha.26",
+    "@contember/react-devbar": "1.3.0-alpha.26",
+    "@contember/react-identity": "1.3.0-alpha.26",
+    "@contember/react-routing": "1.3.0-alpha.26",
+    "@contember/utilities": "1.3.0-alpha.26",
     "@radix-ui/react-slot": "^1.0.2"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "repository": {
     "type": "git",

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useIsApplicationOutdated'

package/src/hooks/useIsApplicationOutdated.ts

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useState } from 'react'
+
+const defaultCheckIntervalMs = 30_000
+
+
+export const useIsApplicationOutdated = ({ checkIntervalMs = defaultCheckIntervalMs }: {
+	checkIntervalMs?: number
+} = {}) => {
+	const [initialVersion] = useState(() => {
+		return getVersionFromDocument(document.head)
+	})
+	const [isOutdated, setIsOutdated] = useState(false)
+	const fetchVersion = useFetchVersion()
+
+	const checkVersion = useCallback(async () => {
+		if (document.hidden) {
+			return
+		}
+		const version = await fetchVersion()
+		if (version !== initialVersion) {
+			setIsOutdated(true)
+		}
+	}, [fetchVersion, initialVersion])
+	const shouldCheck = !!initialVersion && !isOutdated
+
+	useEffect(() => {
+		if (!shouldCheck) {
+			return
+		}
+		const handle = setInterval(checkVersion, checkIntervalMs)
+		return () => clearInterval(handle)
+	}, [checkIntervalMs, checkVersion, shouldCheck])
+
+	useEffect(() => {
+		if (!shouldCheck) {
+			return
+		}
+		document.addEventListener('visibilitychange', checkVersion)
+		return () => document.removeEventListener('visibilitychange', checkVersion)
+	}, [checkVersion, shouldCheck])
+
+	return isOutdated
+}
+
+const getVersionFromDocument = (node: ParentNode) => {
+	const meta = node.querySelector<HTMLMetaElement>('meta[name=contember-build-version]')
+	return meta?.content
+}
+
+const useFetchVersion = () => {
+	return useCallback(async () => {
+		try {
+			const result = await (await fetch(window.location.href)).text()
+			const html = document.createElement('html')
+			html.innerHTML = result
+			return getVersionFromDocument(html)
+		} catch (e) {
+			console.error(e)
+			return undefined
+		}
+	}, [])
+}

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './bootstrap'
 export * from './components'
+export * from './hooks'
 export * from '@contember/react-routing'
 export * from '@contember/react-binding'
 export * from '@contember/react-identity'