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

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.27",
   "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.27",
+    "@contember/react-client": "1.3.0-alpha.27",
+    "@contember/react-dataview": "1.3.0-alpha.27",
+    "@contember/react-devbar": "1.3.0-alpha.27",
+    "@contember/react-identity": "1.3.0-alpha.27",
+    "@contember/react-routing": "1.3.0-alpha.27",
+    "@contember/utilities": "1.3.0-alpha.27",
     "@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/bootstrap/ApplicationEntrypoint.tsx

@@ -1,9 +1,9 @@
 import { Environment, EnvironmentContext, EnvironmentExtensionProvider } from '@contember/react-binding'
 import { ContemberClient, ContemberClientProps } from '@contember/react-client'
 import { ReactNode } from 'react'
-import { RequestProvider, RouteMap, RoutingContext, RoutingContextValue, SelectedDimension } from '@contember/react-routing'
+import { RequestProvider, RouteMap, RoutingContext, RoutingContextValue, RoutingProvider, SelectedDimension } from '@contember/react-routing'
 import { DataViewPageNameKeyProvider } from './DataViewPageNameKeyProvider'
-import { IdentityProvider, projectEnvironmentExtension } from '@contember/react-identity'
+import { IdentityEnvironmentProvider, IdentityProvider, projectEnvironmentExtension } from '@contember/react-identity'
 
 export interface ApplicationEntrypointProps extends ContemberClientProps {
 	basePath: string
@@ -36,25 +36,25 @@ export const ApplicationEntrypoint = (props: ApplicationEntrypointProps) => {
 
 	return (
 		<EnvironmentContext.Provider value={rootEnv}>
-			<RoutingContext.Provider value={routing}>
-				<RequestProvider>
-					<ContemberClient
-						apiBaseUrl={props.apiBaseUrl}
-						sessionToken={props.sessionToken}
-						loginToken={props.loginToken}
-						project={props.project}
-						stage={props.stage}
-					>
-						<EnvironmentExtensionProvider extension={projectEnvironmentExtension} state={props.project ?? null}>
-							<DataViewPageNameKeyProvider>
-								<IdentityProvider>
+			<RoutingProvider {...routing}>
+				<ContemberClient
+					apiBaseUrl={props.apiBaseUrl}
+					sessionToken={props.sessionToken}
+					loginToken={props.loginToken}
+					project={props.project}
+					stage={props.stage}
+				>
+					<EnvironmentExtensionProvider extension={projectEnvironmentExtension} state={props.project ?? null}>
+						<DataViewPageNameKeyProvider>
+							<IdentityProvider>
+								<IdentityEnvironmentProvider>
 									{props.children}
-								</IdentityProvider>
-							</DataViewPageNameKeyProvider>
-						</EnvironmentExtensionProvider>
-					</ContemberClient>
-				</RequestProvider>
-			</RoutingContext.Provider>
+								</IdentityEnvironmentProvider>
+							</IdentityProvider>
+						</DataViewPageNameKeyProvider>
+					</EnvironmentExtensionProvider>
+				</ContemberClient>
+			</RoutingProvider>
 		</EnvironmentContext.Provider>
 	)
 }

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'