tinywidgets 1.5.0 → 1.6.0

package/src/css/dimensions.css.ts

@@ -1,14 +1,14 @@
 import {createTheme, fallbackVar, style} from '@vanilla-extract/css';
 
 const classAndObject = createTheme({
-  logo: fallbackVar('var(--tinyWidgets-logo)', '2rem'),
   avatar: fallbackVar('var(--tinyWidgets-avatar)', '2rem'),
+  footerHeight: fallbackVar('var(--tinyWidgets-footerHeight)', '2rem'),
   icon: fallbackVar('var(--tinyWidgets-icon)', '1rem'),
+  logo: fallbackVar('var(--tinyWidgets-logo)', '2rem'),
   padding: fallbackVar('var(--tinyWidgets-padding)', '1rem'),
   radius: fallbackVar('var(--tinyWidgets-radius)', '0.5rem'),
   sideNavWidth: fallbackVar('var(--tinyWidgets-sideNavWidth)', '20rem'),
   topNavHeight: fallbackVar('var(--tinyWidgets-topNavHeight)', '4rem'),
-  footerHeight: fallbackVar('var(--tinyWidgets-footerHeight)', '2rem'),
 });
 export const dimensionsClass = classAndObject[0];
 

package/src/css/global.css.ts

@@ -2,10 +2,10 @@ import {globalStyle} from '@vanilla-extract/css';
 import {small} from '../common/functions';
 
 globalStyle('*', {
-  margin: 0,
-  padding: 0,
   boxSizing: 'border-box',
   color: 'inherit',
   fontSize: 'inherit',
+  margin: 0,
+  padding: 0,
   ...small({fontSize: '0.9rem'}),
 });

package/src/index.css.ts

@@ -1,5 +1,6 @@
 import './css/global.css.ts';
 
+export {classes} from './css/classes.css.ts';
 export {code} from './css/code.css.ts';
 export {colors} from './css/colors.css.ts';
 export {dimensions} from './css/dimensions.css.ts';

package/src/index.ts

@@ -21,4 +21,8 @@ export {TextInput} from './components/TextInput/index.tsx';
 
 export {classNames} from './common/functions.tsx';
 export {useDark} from './stores/LocalStore.tsx';
-export {useRoute, useSetRouteCallback} from './stores/RouteStore.tsx';
+export {
+  useRoute,
+  useRouteParts,
+  useSetRouteCallback,
+} from './stores/RouteStore.tsx';

package/src/stores/RouteStore.tsx

@@ -1,25 +1,43 @@
 import {createCustomPersister} from 'tinybase/persisters/with-schemas';
 import * as UiReact from 'tinybase/ui-react/with-schemas';
-import {type NoTablesSchema, createStore} from 'tinybase/with-schemas';
+import {createStore, type Store} from 'tinybase/with-schemas';
 import {READY, READY_SCHEMA} from './common';
 
 const ROUTE_STORE = 'tinywidgets/Route';
-const ROUTE = 'route';
+const ROUTE_PARTS = 'routeParts';
+const PARTS = 'parts';
 
+const TABLES_SCHEMA = {
+  [ROUTE_PARTS]: {[PARTS]: {type: 'string', default: ''}},
+} as const;
 const VALUES_SCHEMA = {
   ...READY_SCHEMA,
-  [ROUTE]: {type: 'string', default: ''},
 } as const;
-type Schemas = [NoTablesSchema, typeof VALUES_SCHEMA];
+type Schemas = [typeof TABLES_SCHEMA, typeof VALUES_SCHEMA];
+type RouteStore = Store<Schemas>;
 
 const {
+  useCell,
   useCreateStore,
-  useProvideStore,
   useCreatePersister,
+  useSetTablesCallback,
+  useProvideStore,
   useValue,
-  useSetValueCallback,
 } = UiReact as UiReact.WithSchemas<Schemas>;
 
+const getRouteTables = (route: string) => {
+  const parts = route.split('/');
+  return {
+    [ROUTE_PARTS]: Object.fromEntries([
+      ['0', {[PARTS]: route}],
+      ...parts.map((_, index) => [
+        index + 1 + '',
+        {[PARTS]: parts.slice(0, index + 1).join('/')},
+      ]),
+    ]),
+  };
+};
+
 /**
  * The useRoute hook returns the current route, assuming the app is using the
  * basic TinyWidgets routing system.
@@ -37,7 +55,30 @@ const {
  * ```
  * This example shows the hook returning the current route.
  */
-export const useRoute = () => useValue(ROUTE, ROUTE_STORE);
+export const useRoute = () => useRouteParts(0).join('/');
+
+/**
+ * The useRouteParts hook returns the current route truncated to a number of
+ * slash-separated parts.
+ *
+ * This hook will only cause a rerender when the relevant part of the route
+ * changes. For example, if the route is `a/b/c/d`, then `useRouteParts(2)` will
+ * return `['a', 'b']` and will only cause a rerender when the first or second
+ * part of the route changes, but not when the third or fourth part changes.
+ *
+ * @param length The number of route parts to include. Use 0 for the full route.
+ * @returns The route path, or an empty string if it does not exist.
+ * @example
+ * ```tsx
+ * <ul>
+ *   <li>{useRouteParts(1).join(' » ')}</li>
+ *   <li>{useRouteParts(2).join(' » ')}</li>
+ *   <li>{useRouteParts(0).join(' » ')}</li>
+ * </ul>
+ * ```
+ */
+export const useRouteParts = (length: number) =>
+  useCell(ROUTE_PARTS, length + '', PARTS, ROUTE_STORE)?.split('/') ?? [];
 
 /**
  * The useSetRouteCallback hook a callback for setting the current route,
@@ -60,14 +101,14 @@ export const useRoute = () => useValue(ROUTE, ROUTE_STORE);
  * route when called as a click handler.
  */
 export const useSetRouteCallback = () =>
-  useSetValueCallback(ROUTE, (route: string) => route, [], ROUTE_STORE);
+  useSetTablesCallback(getRouteTables, [], ROUTE_STORE);
 
 export const useRouteStoreIsReady = () =>
   useValue(READY, ROUTE_STORE) as boolean;
 
 export const RouteStore = () => {
   const routeStore = useCreateStore(() =>
-    createStore().setValuesSchema(VALUES_SCHEMA),
+    createStore().setSchema(TABLES_SCHEMA, VALUES_SCHEMA),
   );
   useProvideStore(ROUTE_STORE, routeStore);
 
@@ -76,12 +117,9 @@ export const RouteStore = () => {
     (routeStore) =>
       createCustomPersister(
         routeStore,
-        async () => [{}, {route: location.hash.slice(1), ready: true}],
+        async () => [getRouteTables(location.hash.slice(1)), {ready: true}],
         async (getContent) => {
-          const route = getContent()[1].route;
-          if (route) {
-            location.hash = route;
-          }
+          location.hash = getContent()[0][ROUTE_PARTS]?.['0']?.[PARTS] ?? '';
         },
         (listener) => {
           const hashListener = () => listener();