feat(root-cms): replace preact-router with preact-iso for routing

packages/root-cms/package.json

@@ -154,7 +154,7 @@
     "playwright": "1.56.1",
     "preact": "10.27.1",
     "preact-render-to-string": "6.6.1",
-    "preact-router": "4.1.2",
+    "preact-iso": "2.6.0",
     "react": "npm:@preact/compat@18.3.1",
     "react-dom": "npm:@preact/compat@18.3.1",
     "react-json-view-compare": "2.0.2",

packages/root-cms/ui/components/CopyDocModal/CopyDocModal.tsx

@@ -1,8 +1,8 @@
 import {Button} from '@mantine/core';
 import {ContextModalProps, useModals} from '@mantine/modals';
 import {showNotification} from '@mantine/notifications';
+import {useLocation} from 'preact-iso';
 import {useState} from 'preact/hooks';
-import {route} from 'preact-router';
 import {isSlugValid, normalizeSlug} from '../../../shared/slug.js';
 import {useModalTheme} from '../../hooks/useModalTheme.js';
 import {cmsCopyDoc, cmsCreateDoc} from '../../utils/doc.js';
@@ -35,6 +35,7 @@ export function useCopyDocModal(props: CopyDocModalProps) {
 
 export function CopyDocModal(modalProps: ContextModalProps<CopyDocModalProps>) {
   const {innerProps: props, context, id} = modalProps;
+  const {route} = useLocation();
   const [toCollectionId, setToCollectionId] = useState('');
   const [toSlug, setToSlug] = useState('');
   const [error, setError] = useState('');

packages/root-cms/ui/components/DataSourceForm/DataSourceForm.tsx

@@ -6,8 +6,8 @@ import {
   Textarea,
 } from '@mantine/core';
 import {showNotification} from '@mantine/notifications';
+import {useLocation} from 'preact-iso';
 import {useEffect, useRef, useState} from 'preact/hooks';
-import {route} from 'preact-router';
 import {isSlugValid} from '../../../shared/slug.js';
 import {useGapiClient} from '../../hooks/useGapiClient.js';
 import {
@@ -34,6 +34,7 @@ export interface DataSourceFormProps {
 }
 
 export function DataSourceForm(props: DataSourceFormProps) {
+  const {route} = useLocation();
   const formRef = useRef<HTMLFormElement>(null);
   const gapiClient = useGapiClient();
   const [submitting, setSubmitting] = useState(false);

packages/root-cms/ui/components/DocEditor/DocEditor.tsx

@@ -38,6 +38,7 @@ import {
   IconSparkles,
 } from '@tabler/icons-preact';
 import {createContext} from 'preact';
+import {useLocation} from 'preact-iso';
 import {
   useContext,
   useEffect,
@@ -47,7 +48,6 @@ import {
   useState,
   useCallback,
 } from 'preact/hooks';
-import {route} from 'preact-router';
 import * as schema from '../../../core/schema.js';
 import {useCollectionSchema} from '../../hooks/useCollectionSchema.js';
 import {
@@ -172,6 +172,7 @@ type StatusBarProps = DocEditorProps & {
 };
 
 DocEditor.StatusBar = (props: StatusBarProps) => {
+  const {route} = useLocation();
   const {roles} = useProjectRoles();
   const currentUserEmail = window.firebase.user.email || '';
   const canPublish = testCanPublish(roles, currentUserEmail);
@@ -200,7 +201,7 @@ DocEditor.StatusBar = (props: StatusBarProps) => {
         draft.controller.removePublishingLock();
       }
     },
-    [props.docId]
+    [props.docId, route]
   );
 
   const publishDocModal = usePublishDocModal({docId: props.docId});

packages/root-cms/ui/components/NewDocModal/NewDocModal.tsx

@@ -1,6 +1,6 @@
 import {Button, Modal, useMantineTheme} from '@mantine/core';
+import {useLocation} from 'preact-iso';
 import {useState} from 'preact/hooks';
-import {route} from 'preact-router';
 import {isSlugValid, normalizeSlug} from '../../../shared/slug.js';
 import {useCollectionSchema} from '../../hooks/useCollectionSchema.js';
 import {cmsCreateDoc} from '../../utils/doc.js';
@@ -17,6 +17,7 @@ interface NewDocModalProps {
 }
 
 export function NewDocModal(props: NewDocModalProps) {
+  const {route} = useLocation();
   const [slug, setSlug] = useState('');
   const [rpcLoading, setRpcLoading] = useState(false);
   const [slugError, setSlugError] = useState('');

packages/root-cms/ui/components/ReleaseForm/ReleaseForm.tsx

@@ -9,8 +9,8 @@ import {
 } from '@mantine/core';
 import {showNotification} from '@mantine/notifications';
 import {IconArrowUpRight, IconTrash} from '@tabler/icons-preact';
+import {useLocation} from 'preact-iso';
 import {useEffect, useRef, useState} from 'preact/hooks';
-import {route} from 'preact-router';
 import {isSlugValid} from '../../../shared/slug.js';
 import {ConditionalTooltip} from '../../components/ConditionalTooltip/ConditionalTooltip.js';
 import {useProjectRoles} from '../../hooks/useProjectRoles.js';
@@ -34,6 +34,7 @@ export interface ReleaseFormProps {
 }
 
 export function ReleaseForm(props: ReleaseFormProps) {
+  const {route} = useLocation();
   const formRef = useRef<HTMLFormElement>(null);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState('');

packages/root-cms/ui/layout/Layout.tsx

@@ -19,7 +19,7 @@ import {
   IconSettings,
 } from '@tabler/icons-preact';
 import {ComponentChildren} from 'preact';
-import {useRouter} from 'preact-router';
+import {useLocation} from 'preact-iso';
 import type {CMSBuiltInSidebarTool} from '../../core/plugin.js';
 import packageJson from '../../package.json' assert {type: 'json'};
 import {RootCMSLogo} from '../components/RootCMSLogo/RootCMSLogo.js';
@@ -60,8 +60,8 @@ Layout.Top = () => {
 };
 
 Layout.Side = () => {
-  const [route] = useRouter();
-  const currentUrl = route.url.replace(/\/*$/g, '');
+  const {url} = useLocation();
+  const currentUrl = url.replace(/\/*$/g, '');
   const user = window.firebase.user;
   const sidebarTools = window.__ROOT_CTX.sidebar?.tools;
   const hiddenBuiltInTools = new Set<CMSBuiltInSidebarTool>(

packages/root-cms/ui/pages/CollectionPage/CollectionPage.tsx

@@ -2,8 +2,8 @@ import './CollectionPage.css';
 
 import {Button, Loader, Select, Tabs, Tooltip} from '@mantine/core';
 import {IconArrowRoundaboutRight, IconCirclePlus} from '@tabler/icons-preact';
+import {useLocation} from 'preact-iso';
 import {useEffect, useState} from 'preact/hooks';
-import {route} from 'preact-router';
 import {CollectionTree} from '../../components/CollectionTree/CollectionTree.js';
 import {ConditionalTooltip} from '../../components/ConditionalTooltip/ConditionalTooltip.js';
 import {DocActionsMenu} from '../../components/DocActionsMenu/DocActionsMenu.js';
@@ -26,6 +26,7 @@ interface CollectionPageProps {
 }
 
 export function CollectionPage(props: CollectionPageProps) {
+  const {route} = useLocation();
   const [query, setQuery] = useState('');
   const projectId = window.__ROOT_CTX.rootConfig.projectId;
 
@@ -106,6 +107,7 @@ interface CollectionProps {
 }
 
 CollectionPage.Collection = (props: CollectionProps) => {
+  const {route} = useLocation();
   const {roles} = useProjectRoles();
   const currentUserEmail = window.firebase.user.email || '';
   const canEdit = testCanEdit(roles, currentUserEmail);

packages/root-cms/ui/pages/EditDataSourcePage/EditDataSourcePage.tsx

@@ -2,7 +2,7 @@ import {ActionIcon, Breadcrumbs, Tooltip} from '@mantine/core';
 import {useModals} from '@mantine/modals';
 import {showNotification, updateNotification} from '@mantine/notifications';
 import {IconTrashFilled} from '@tabler/icons-preact';
-import {route} from 'preact-router';
+import {useLocation} from 'preact-iso';
 import {DataSourceForm} from '../../components/DataSourceForm/DataSourceForm.js';
 import {Heading} from '../../components/Heading/Heading.js';
 import {Text} from '../../components/Text/Text.js';
@@ -12,6 +12,7 @@ import {deleteDataSource} from '../../utils/data-source.js';
 import './EditDataSourcePage.css';
 
 export function EditDataSourcePage(props: {id: string}) {
+  const {route} = useLocation();
   const modals = useModals();
   const modalTheme = useModalTheme();
 

packages/root-cms/ui/pages/EditReleasePage/EditReleasePage.tsx

@@ -2,7 +2,7 @@ import {ActionIcon, Breadcrumbs, Tooltip} from '@mantine/core';
 import {useModals} from '@mantine/modals';
 import {showNotification, updateNotification} from '@mantine/notifications';
 import {IconTrashFilled} from '@tabler/icons-preact';
-import {route} from 'preact-router';
+import {useLocation} from 'preact-iso';
 import {ConditionalTooltip} from '../../components/ConditionalTooltip/ConditionalTooltip.js';
 import {Heading} from '../../components/Heading/Heading.js';
 import {ReleaseForm} from '../../components/ReleaseForm/ReleaseForm.js';
@@ -15,6 +15,7 @@ import './EditReleasePage.css';
 import {deleteRelease} from '../../utils/release.js';
 
 export function EditReleasePage(props: {id: string}) {
+  const {route} = useLocation();
   const modals = useModals();
   const modalTheme = useModalTheme();
   const {roles} = useProjectRoles();

packages/root-cms/ui/ui.tsx

@@ -9,7 +9,7 @@ import {User, getAuth} from 'firebase/auth';
 import {initializeFirestore} from 'firebase/firestore';
 import {getStorage} from 'firebase/storage';
 import {render} from 'preact';
-import {Route, Router} from 'preact-router';
+import {Route, Router} from 'preact-iso';
 import type {CMSBuiltInSidebarTool} from '../core/plugin.js';
 import {Collection} from '../core/schema.js';
 import {AiEditModal} from './components/AiEditModal/AiEditModal.js';