tosijs-ui 1.16.19 → 1.16.21

package/dist/live-theme.js

@@ -22,7 +22,7 @@ preview.append(tosiThemeEditor())
 
 The `liveTheme` observable lets you read and write theme values from code:
 
-```js
+```js:static
 import { liveTheme } from 'tosijs-ui'
 
 // Read current values

package/dist/router.js

@@ -9,6 +9,7 @@ named route views (slots).
 
 ```js
 import { defineRoutes, navigate, router, tosiRouteView } from 'tosijs-ui'
+import { elements } from 'tosijs'
 
 const home = () => {
   const el = document.createElement('div')
@@ -28,21 +29,39 @@ const greeting = (params) => {
   return el
 }
 
-defineRoutes(
-  [
-    { pattern: '', targets: [{ component: home }] },
-    { pattern: 'about', targets: [{ component: about }] },
-    { pattern: 'greet/:name', targets: [{ component: greeting }] },
-  ],
-  { hashRouting: true }
-)
+const routes = [
+  { pattern: '', targets: [{ component: home }] },
+  { pattern: 'about', targets: [{ component: about }] },
+  { pattern: 'greet/:name', targets: [{ component: greeting }] },
+]
 
+// An app calls defineRoutes once. This page has several router examples sharing the
+// one router, so each link here defines its routes again before it navigates.
+const go = (path) => () => {
+  defineRoutes(routes, { hashRouting: true })
+  navigate(path)
+}
+
+const { button, nav } = elements
 preview.append(
+  nav(
+    button({ onClick: go('') }, 'Home'),
+    button({ onClick: go('about') }, 'About'),
+    button({ onClick: go('greet/World') }, 'Greet World')
+  ),
   tosiRouteView(),
 )
 
 // Navigate programmatically
-navigate('greet/World')
+go('greet/World')()
+```
+```test
+test('the first example holds the router when the page loads', async () => {
+  for (let i = 0; i < 50 && !preview.textContent.includes('Hello, World!'); i++) {
+    await waitMs(20)
+  }
+  expect(preview.textContent).toContain('Hello, World!')
+})
 ```
 
 ## Named Views
@@ -69,18 +88,21 @@ const sidebar = () => {
   return el
 }
 
-defineRoutes(
-  [
-    {
-      pattern: 'photos/:id/edit',
-      targets: [
-        { view: 'main', component: mainContent },
-        { view: 'tools', component: sidebar },
-      ],
-    },
-  ],
-  { hashRouting: true }
-)
+const show = () => {
+  defineRoutes(
+    [
+      {
+        pattern: 'photos/:id/edit',
+        targets: [
+          { view: 'main', component: mainContent },
+          { view: 'tools', component: sidebar },
+        ],
+      },
+    ],
+    { hashRouting: true }
+  )
+  navigate('photos/42/edit')
+}
 
 const container = document.createElement('div')
 container.style.display = 'flex'
@@ -89,9 +111,14 @@ container.append(
   tosiRouteView({ name: 'main', style: { flex: '1' } }),
   tosiRouteView({ name: 'tools', style: { width: '200px' } }),
 )
-preview.append(container)
-
-navigate('photos/42/edit')
+// An app has one router, and so does this page: the example above holds it, so this one
+// routes when you ask it to.
+const note = document.createElement('p')
+note.textContent = 'One router serves the page; the example above holds it until you press:'
+const showButton = document.createElement('button')
+showButton.textContent = 'Edit photo 42'
+showButton.addEventListener('click', show)
+preview.append(note, showButton, container)
 ```
 
 ## Hash Routing
@@ -99,8 +126,9 @@ navigate('photos/42/edit')
 Set `hashRouting: true` when defining routes to use hash-based URLs
 (`#/path`) instead of History API paths. This is useful when your app
 is served from a static file server that doesn't support URL rewriting.
+The examples above all use it.
 
-```js
+```js:static
 import { defineRoutes, navigate, tosiRouteView } from 'tosijs-ui'
 
 defineRoutes(

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "1.16.19";
+export declare const version = "1.16.21";

package/dist/version.js

@@ -1 +1 @@
-export const version = '1.16.19';
+export const version = '1.16.21';

package/llms.txt

@@ -1,4 +1,4 @@
-# tosijs-ui v1.16.19
+# tosijs-ui v1.16.21
 
 Simple, robust web-components for use with tosijs or anything else.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tosijs-ui",
-  "version": "1.16.19",
+  "version": "1.16.21",
   "description": "simple robust web-components for use with tosijs or anything else",
   "scripts": {
     "start": "bun --watch bin/dev.ts",
@@ -57,7 +57,7 @@
     "prettier": "^2.8.8",
     "prismjs": "^1.30.0",
     "tjs-lang": "0.14.0-rc.5",
-    "tosijs": "1.10.7",
+    "tosijs": "1.10.9",
     "tosijs-schema": "1.10.2",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.65.0"
@@ -67,7 +67,7 @@
     "happy-dom": "^20.7.0",
     "marked": "^16.4.2 || ^17.0.0 || ^18.0.0",
     "tjs-lang": "^0.13.1 || ^0.14.0-rc.5",
-    "tosijs": "^1.10.3",
+    "tosijs": "^1.10.9",
     "tosijs-schema": "^1.8.0",
     "chokidar": "^4.0.3"
   },