element-book 10.0.0 → 10.0.2

package/dist/data/book-entry/book-page/controls-wrapper.d.ts

@@ -0,0 +1,12 @@
+import { PartialAndUndefined } from '@augment-vir/common';
+import { BookTreeNode } from '../../book-tree/book-tree-node';
+import { BookPageControlsValues } from './book-page-controls';
+export type ControlsWrapper = {
+    children: {
+        [Breadcrumb: string]: ControlsWrapper;
+    };
+    controls: BookPageControlsValues;
+};
+export declare function traverseControls(controlsWrapper: ControlsWrapper, fullUrlBreadcrumbs: ReadonlyArray<string>): BookPageControlsValues;
+export declare function createNewControls(controlsWrapper: ControlsWrapper, breadcrumbsForNewValue: ReadonlyArray<string>, newValues: BookPageControlsValues): ControlsWrapper;
+export declare function updateTreeControls(node: BookTreeNode, existingControls: PartialAndUndefined<ControlsWrapper> | undefined): ControlsWrapper;

package/dist/data/book-entry/book-page/controls-wrapper.js

@@ -0,0 +1,50 @@
+import { copyThroughJson, mapObjectValues } from '@augment-vir/common';
+import { isBookTreeNode } from '../../book-tree/book-tree';
+import { BookEntryTypeEnum } from '../book-entry-type';
+export function traverseControls(controlsWrapper, fullUrlBreadcrumbs) {
+    return traverseAndInsertNewControls(controlsWrapper, [
+        /** Empty string represents the breadcrumb for the root node */
+        '',
+        ...fullUrlBreadcrumbs,
+    ], undefined);
+}
+function traverseAndInsertNewControls(controlsWrapper, urlBreadcrumbs, newValues) {
+    const nextBreadcrumbs = urlBreadcrumbs.slice(1);
+    const nextBreadcrumb = nextBreadcrumbs[0];
+    /** If we're at the end of the breadcrumbs, then it's time to insert the new controls. */
+    if (!nextBreadcrumb && newValues) {
+        controlsWrapper.controls = newValues;
+    }
+    const childControlsWrapper = controlsWrapper.children[nextBreadcrumb || ''];
+    const childrenControls = childControlsWrapper &&
+        traverseAndInsertNewControls(childControlsWrapper, nextBreadcrumbs, newValues);
+    const allControls = {
+        ...controlsWrapper.controls,
+        ...childrenControls,
+    };
+    return allControls;
+}
+export function createNewControls(controlsWrapper, breadcrumbsForNewValue, newValues) {
+    const newControls = copyThroughJson(controlsWrapper);
+    traverseAndInsertNewControls(newControls, [
+        /** Empty string represents the breadcrumb for the root node */
+        '',
+        ...breadcrumbsForNewValue,
+    ], newValues);
+    return newControls;
+}
+export function updateTreeControls(node, existingControls) {
+    const controls = existingControls?.controls ||
+        (isBookTreeNode(node, BookEntryTypeEnum.Page)
+            ? mapObjectValues(node.entry.controls, (name, setup) => {
+                return setup.initValue;
+            })
+            : {});
+    const controlsWrapper = {
+        children: mapObjectValues(node.children, (childName, childTreeNode) => {
+            return updateTreeControls(childTreeNode, existingControls?.children?.[childTreeNode.urlBreadcrumb]);
+        }),
+        controls,
+    };
+    return controlsWrapper;
+}

package/dist/ui/elements/book-breadcrumbs.element.d.ts

@@ -1,5 +1,5 @@
 import { BookFullRoute, BookRouter } from '../../routing/book-routing';
 export declare const BookBreadcrumbs: import("element-vir").DeclarativeElementDefinition<"book-breadcrumbs", {
     currentRoute: Readonly<BookFullRoute>;
-    router: BookRouter;
+    router: BookRouter | undefined;
 }, {}, {}, `book-breadcrumbs-${string}`, `book-breadcrumbs-${string}`, import("lit-html").HTMLTemplateResult | import("lit-html").HTMLTemplateResult[]>;

package/dist/ui/elements/element-book-app/element-book-app.element.d.ts

@@ -1,4 +1,4 @@
-import { CurrentControls } from '../../../data/book-entry/book-page/current-controls';
+import { ControlsWrapper } from '../../../data/book-entry/book-page/controls-wrapper';
 import { ColorTheme } from '../../color-theme/color-theme';
 import { ThemeConfig } from '../../color-theme/create-color-theme';
 import { ElementBookConfig, GlobalValues } from './element-book-config';
@@ -11,10 +11,10 @@ export declare const ElementBookApp: import("element-vir").DeclarativeElementDef
     router: Readonly<import("spa-router-vir").SpaRouter<import("../../../routing/book-routing").ValidBookPaths, Record<string, string> | undefined, undefined>> | undefined;
     loading: boolean;
     colors: ColorThemeState;
-    treeBasedCurrentControls: {
+    treeBasedControls: {
         entries: ElementBookConfig['entries'];
-        globalValues: GlobalValues;
-        currentControls: CurrentControls;
+        lastGlobalInputs: GlobalValues;
+        controls: ControlsWrapper;
     } | undefined;
 }, {
     pathUpdate: import("element-vir").DefinedTypedEventNameDefinition<readonly string[]>;

package/dist/ui/elements/element-book-app/element-book-app.element.js

@@ -1,7 +1,7 @@
 import { waitForAnimationFrame } from '@augment-vir/browser';
 import { areJsonEqual, extractErrorMessage } from '@augment-vir/common';
 import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
-import { createControlsFromTree, createNewCurrentControls, } from '../../../data/book-entry/book-page/current-controls';
+import { createNewControls, updateTreeControls, } from '../../../data/book-entry/book-page/controls-wrapper';
 import { createBookTreeFromEntries } from '../../../data/book-tree/book-tree';
 import { searchFlattenedNodes } from '../../../data/book-tree/search-nodes';
 import { defaultBookFullRoute, extractSearchQuery, } from '../../../routing/book-routing';
@@ -28,7 +28,7 @@ export const ElementBookApp = defineElement()({
             config: undefined,
             theme: createTheme(undefined),
         },
-        treeBasedCurrentControls: undefined,
+        treeBasedControls: undefined,
     },
     styles: css `
         :host {
@@ -84,6 +84,9 @@ export const ElementBookApp = defineElement()({
         }
     },
     renderCallback: ({ state, inputs, host, updateState, dispatch, events }) => {
+        if (inputs._debug) {
+            console.info('rendering element-book app');
+        }
         try {
             function updateRoutes(newRoute) {
                 if (state.router) {
@@ -136,14 +139,20 @@ export const ElementBookApp = defineElement()({
                 entries: inputs.entries,
                 debug,
             });
-            if (!state.treeBasedCurrentControls ||
-                state.treeBasedCurrentControls.entries !== inputs.entries ||
-                state.treeBasedCurrentControls.globalValues !== inputs.globalValues) {
+            if (!state.treeBasedControls ||
+                state.treeBasedControls.entries !== inputs.entries ||
+                state.treeBasedControls.lastGlobalInputs !== inputs.globalValues) {
+                if (inputs._debug) {
+                    console.info('regenerating global controls');
+                }
                 updateState({
-                    treeBasedCurrentControls: {
+                    treeBasedControls: {
                         entries: inputs.entries,
-                        globalValues: inputs.globalValues ?? {},
-                        currentControls: createControlsFromTree(originalTree.tree, inputs.globalValues ?? {}),
+                        lastGlobalInputs: inputs.globalValues ?? {},
+                        controls: updateTreeControls(originalTree.tree, {
+                            children: state.treeBasedControls?.controls?.children,
+                            controls: inputs.globalValues,
+                        }),
                     },
                 });
             }
@@ -156,7 +165,7 @@ export const ElementBookApp = defineElement()({
                 : undefined;
             const currentNodes = searchedNodes ??
                 getCurrentNodes(originalTree.flattenedNodes, state.currentRoute.paths, updateRoutes);
-            const currentControls = state.treeBasedCurrentControls?.currentControls;
+            const currentControls = state.treeBasedControls?.controls;
             if (!currentControls) {
                 return html `
                     <${BookError.assign({
@@ -175,7 +184,6 @@ export const ElementBookApp = defineElement()({
                 updateState({ loading: true });
                 /** Wait for the loading div to show up. */
                 while (!host.shadowRoot.querySelector('.loading')) {
-                    console.log('waiting');
                     await waitForAnimationFrame();
                 }
                 await waitForAnimationFrame();
@@ -194,14 +202,14 @@ export const ElementBookApp = defineElement()({
                 scrollNav(host, searchQuery, state.currentRoute);
             })}
                     ${listen(BookPageControls.events.controlValueChange, (event) => {
-                if (!state.treeBasedCurrentControls) {
+                if (!state.treeBasedControls) {
                     return;
                 }
-                const newControls = createNewCurrentControls(currentControls, event.detail.fullUrlBreadcrumbs, event.detail.newValues);
+                const newControls = createNewControls(currentControls, event.detail.fullUrlBreadcrumbs, event.detail.newValues);
                 updateState({
-                    treeBasedCurrentControls: {
-                        ...state.treeBasedCurrentControls,
-                        currentControls: newControls,
+                    treeBasedControls: {
+                        ...state.treeBasedControls,
+                        controls: newControls,
                     },
                 });
             })}
@@ -226,7 +234,7 @@ export const ElementBookApp = defineElement()({
                     currentNodes,
                     router: state.router,
                     debug,
-                    currentControls,
+                    controls: currentControls,
                     originalTree: originalTree.tree,
                 })}>
                                   <slot

package/dist/ui/elements/element-book-app/element-book-config.d.ts

@@ -5,7 +5,7 @@ export type ElementBookConfig = {
     /** All element-book entries in order. */
     entries: ReadonlyArray<BookEntry>;
 } & PartialAndUndefined<OptionalConfig>;
-export type GlobalValues = Readonly<Record<string, unknown>>;
+export type GlobalValues = Readonly<Record<string, unknown>> | undefined;
 type OptionalConfig = {
     /** The base theme color from which all other element-book colors will be generated from. */
     themeColor: string;

package/dist/ui/elements/entry-display/book-breadcrumbs-bar.element.d.ts

@@ -2,5 +2,5 @@ import { BookFullRoute, BookRouter } from '../../../routing/book-routing';
 export declare const BookBreadcrumbsBar: import("element-vir").DeclarativeElementDefinition<"book-breadcrumbs-bar", {
     currentSearch: string;
     currentRoute: BookFullRoute;
-    router: BookRouter;
+    router: BookRouter | undefined;
 }, {}, {}, `book-breadcrumbs-bar-${string}`, `book-breadcrumbs-bar-${string}`, import("lit-html").HTMLTemplateResult>;

package/dist/ui/elements/entry-display/book-entry-display.element.d.ts

@@ -1,12 +1,12 @@
 import { BookEntryTypeEnum } from '../../../data/book-entry/book-entry-type';
-import { CurrentControls } from '../../../data/book-entry/book-page/current-controls';
+import { ControlsWrapper } from '../../../data/book-entry/book-page/controls-wrapper';
 import { BookTreeNode } from '../../../data/book-tree/book-tree-node';
 import { BookFullRoute, BookRouter } from '../../../routing/book-routing';
 export declare const BookEntryDisplay: import("element-vir").DeclarativeElementDefinition<"book-entry-display", {
     currentRoute: Readonly<BookFullRoute>;
     currentNodes: ReadonlyArray<BookTreeNode>;
     originalTree: Readonly<BookTreeNode<BookEntryTypeEnum.Root>>;
-    router: BookRouter;
+    router: BookRouter | undefined;
     debug: boolean;
-    currentControls: CurrentControls;
+    controls: ControlsWrapper;
 }, {}, {}, `book-entry-display-${string}`, `book-entry-display-${string}`, import("lit-html").HTMLTemplateResult>;

package/dist/ui/elements/entry-display/book-entry-display.element.js

@@ -1,7 +1,7 @@
 import { assign, css, html, repeat } from 'element-vir';
 import { BookEntryTypeEnum } from '../../../data/book-entry/book-entry-type';
 import { isLengthAtLeast, mapObjectValues } from '@augment-vir/common';
-import { traverseCurrentControls, } from '../../../data/book-entry/book-page/current-controls';
+import { traverseControls, } from '../../../data/book-entry/book-page/controls-wrapper';
 import { isBookTreeNode, traverseToImmediateParent } from '../../../data/book-tree/book-tree';
 import { extractSearchQuery } from '../../../routing/book-routing';
 import { BookError } from '../common/book-error.element';
@@ -48,7 +48,7 @@ export const BookEntryDisplay = defineBookElement()({
             isTopLevel: true,
             router: inputs.router,
             isSearching: !!currentSearch,
-            currentControls: inputs.currentControls,
+            controls: inputs.controls,
             originalTree: inputs.originalTree,
         });
         return html `
@@ -73,7 +73,7 @@ function getFlattenedControlsFromHiddenParents(currentNodes, currentControls, cu
     }
     if (isBookTreeNode(currentNode, BookEntryTypeEnum.Page) &&
         !currentNodes.includes(currentNode)) {
-        const currentEntryControls = traverseCurrentControls(currentControls, currentNode.fullUrlBreadcrumbs);
+        const currentEntryControls = traverseControls(currentControls, currentNode.fullUrlBreadcrumbs);
         allControls.push({
             config: currentNode.entry.controls,
             current: currentEntryControls,
@@ -99,7 +99,7 @@ function getFlattenedControlsFromHiddenParents(currentNodes, currentControls, cu
         };
     }, { config: {}, current: {}, breadcrumbs: {} });
 }
-function createNodeTemplates({ currentNodes, isTopLevel, router, isSearching, currentControls, originalTree, }) {
+function createNodeTemplates({ currentNodes, isTopLevel, router, isSearching, controls, originalTree, }) {
     if (!currentNodes.length && isSearching) {
         return [
             html `
@@ -108,7 +108,7 @@ function createNodeTemplates({ currentNodes, isTopLevel, router, isSearching, cu
         ];
     }
     const hiddenAncestorControls = isLengthAtLeast(currentNodes, 1)
-        ? getFlattenedControlsFromHiddenParents(currentNodes, currentControls, currentNodes[0], originalTree)
+        ? getFlattenedControlsFromHiddenParents(currentNodes, controls, currentNodes[0], originalTree)
         : undefined;
     const hiddenAncestorControlsTemplate = hiddenAncestorControls &&
         Object.values(hiddenAncestorControls.config).length &&
@@ -127,7 +127,7 @@ function createNodeTemplates({ currentNodes, isTopLevel, router, isSearching, cu
                     <${BookPageWrapper.assign({
                 isTopLevel,
                 pageNode: currentNode,
-                currentControls,
+                controls: controls,
                 router,
             })}
                         class="block-entry"
@@ -135,7 +135,7 @@ function createNodeTemplates({ currentNodes, isTopLevel, router, isSearching, cu
                 `;
         }
         else if (isBookTreeNode(currentNode, BookEntryTypeEnum.ElementExample)) {
-            const controlsForElementExample = traverseCurrentControls(currentControls, currentNode.fullUrlBreadcrumbs.slice(0, -1));
+            const controlsForElementExample = traverseControls(controls, currentNode.fullUrlBreadcrumbs.slice(0, -1));
             return html `
                     <${BookElementExampleWrapper.assign({
                 elementExampleNode: currentNode,

package/dist/ui/elements/entry-display/book-page/book-page-wrapper.element.d.ts

@@ -1,10 +1,10 @@
 import { BookEntryTypeEnum } from '../../../../data/book-entry/book-entry-type';
-import { CurrentControls } from '../../../../data/book-entry/book-page/current-controls';
+import { ControlsWrapper } from '../../../../data/book-entry/book-page/controls-wrapper';
 import { BookTreeNode } from '../../../../data/book-tree/book-tree-node';
 import { BookRouter } from '../../../../routing/book-routing';
 export declare const BookPageWrapper: import("element-vir").DeclarativeElementDefinition<"book-page-wrapper", {
     isTopLevel: boolean;
     pageNode: BookTreeNode<BookEntryTypeEnum.Page>;
-    router: BookRouter;
-    currentControls: CurrentControls;
+    router: BookRouter | undefined;
+    controls: ControlsWrapper;
 }, {}, {}, `book-page-wrapper-${string}`, `book-page-wrapper-${string}`, import("lit-html").HTMLTemplateResult>;

package/dist/ui/elements/entry-display/book-page/book-page-wrapper.element.js

@@ -1,6 +1,6 @@
 import { combineErrors } from '@augment-vir/common';
 import { css, html } from 'element-vir';
-import { traverseCurrentControls, } from '../../../../data/book-entry/book-page/current-controls';
+import { traverseControls, } from '../../../../data/book-entry/book-page/controls-wrapper';
 import { BookMainRoute } from '../../../../routing/book-routing';
 import { BookError } from '../../common/book-error.element';
 import { BookRouteLink } from '../../common/book-route-link.element';
@@ -73,7 +73,7 @@ export const BookPageWrapper = defineBookElement()({
             })}></${BookEntryDescription}>
                               <${BookPageControls.assign({
                 config: inputs.pageNode.entry.controls,
-                currentValues: traverseCurrentControls(inputs.currentControls, inputs.pageNode.fullUrlBreadcrumbs),
+                currentValues: traverseControls(inputs.controls, inputs.pageNode.fullUrlBreadcrumbs),
                 fullUrlBreadcrumbs: inputs.pageNode.fullUrlBreadcrumbs,
             })}></${BookPageControls}>
                           `}

package/dist/ui/elements/entry-display/element-example/book-element-example-controls.element.d.ts

@@ -3,5 +3,5 @@ import { BookTreeNode } from '../../../../data/book-tree/book-tree-node';
 import { BookRouter } from '../../../../routing/book-routing';
 export declare const BookElementExampleControls: import("element-vir").DeclarativeElementDefinition<"book-element-example-controls", {
     elementExampleNode: BookTreeNode<BookEntryTypeEnum.ElementExample>;
-    router: BookRouter;
+    router: BookRouter | undefined;
 }, {}, {}, `book-element-example-controls-${string}`, `book-element-example-controls-${string}`, import("lit-html").HTMLTemplateResult>;

package/dist/ui/elements/entry-display/element-example/book-element-example-viewer.element.d.ts

@@ -5,5 +5,5 @@ import { BookRouter } from '../../../../routing/book-routing';
 export declare const BookElementExampleViewer: import("element-vir").DeclarativeElementDefinition<"book-element-example-viewer", {
     elementExampleNode: BookTreeNode<BookEntryTypeEnum.ElementExample>;
     currentPageControls: BookPageControlsValues;
-    router: BookRouter;
+    router: BookRouter | undefined;
 }, any, {}, `book-element-example-viewer-${string}`, `book-element-example-viewer-${string}`, import("lit-html").HTMLTemplateResult>;

package/dist/ui/elements/entry-display/element-example/book-element-example-wrapper.element.d.ts

@@ -5,5 +5,5 @@ import { BookRouter } from '../../../../routing/book-routing';
 export declare const BookElementExampleWrapper: import("element-vir").DeclarativeElementDefinition<"book-element-example-wrapper", {
     elementExampleNode: BookTreeNode<BookEntryTypeEnum.ElementExample>;
     currentPageControls: BookPageControlsValues;
-    router: BookRouter;
+    router: BookRouter | undefined;
 }, {}, {}, `book-element-example-wrapper-${string}`, `book-element-example-wrapper-${string}`, import("lit-html").HTMLTemplateResult>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-book",
-    "version": "10.0.0",
+    "version": "10.0.2",
     "keywords": [
         "book",
         "design system",
@@ -39,18 +39,18 @@
         "test:watch": "web-test-runner --color --watch --config configs/web-test-runner.config.mjs"
     },
     "dependencies": {
-        "@augment-vir/browser": "^15.5.0",
-        "@augment-vir/common": "^15.5.0",
+        "@augment-vir/browser": "^16.0.1",
+        "@augment-vir/common": "^16.0.1",
         "colorjs.io": "0.4.5",
-        "element-vir": "^16.0.0",
-        "lit-css-vars": "^2.0.3",
+        "element-vir": "^16.0.3",
+        "lit-css-vars": "^3.0.0",
         "object-shape-tester": "^0.4.0",
         "spa-router-vir": "^2.1.1",
         "typed-event-target": "^1.3.1",
-        "vira": "^0.6.4"
+        "vira": "^0.7.1"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^15.5.0",
+        "@augment-vir/browser-testing": "^16.0.1",
         "@open-wc/testing": "^3.2.0",
         "@types/chai": "^4.3.5",
         "@types/mocha": "^10.0.1",

package/dist/data/book-entry/book-page/current-controls.d.ts

@@ -1,13 +0,0 @@
-import { GlobalValues } from '../../../ui/elements/element-book-app/element-book-config';
-import { BookTreeNode } from '../../book-tree/book-tree-node';
-import { BookPageControlsValues } from './book-page-controls';
-export type ControlsWrapper = {
-    children: CurrentControls;
-    controls: BookPageControlsValues;
-};
-export type CurrentControls = {
-    [Breadcrumb: string]: ControlsWrapper;
-};
-export declare function traverseCurrentControls(currentControls: CurrentControls, fullUrlBreadcrumbs: ReadonlyArray<string>): BookPageControlsValues;
-export declare function createNewCurrentControls(currentControls: CurrentControls, fullUrlBreadcrumbs: ReadonlyArray<string>, newValues: BookPageControlsValues): CurrentControls;
-export declare function createControlsFromTree(node: BookTreeNode, globalValues: GlobalValues): CurrentControls;

package/dist/data/book-entry/book-page/current-controls.js

@@ -1,65 +0,0 @@
-import { copyThroughJson, mapObjectValues } from '@augment-vir/common';
-import { isBookTreeNode } from '../../book-tree/book-tree';
-import { BookEntryTypeEnum } from '../book-entry-type';
-function getOrCreateControlsWrapper(currentControls, currentBreadcrumb, newValues) {
-    const controlsWrapper = currentControls[currentBreadcrumb];
-    if (controlsWrapper) {
-        return controlsWrapper;
-    }
-    if (newValues) {
-        const newControls = {
-            children: {},
-            controls: {},
-        };
-        currentControls[currentBreadcrumb] = newControls;
-        return newControls;
-    }
-    return undefined;
-}
-export function traverseCurrentControls(currentControls, fullUrlBreadcrumbs) {
-    return internalTraverseCurrentControls(currentControls, fullUrlBreadcrumbs, undefined);
-}
-function internalTraverseCurrentControls(currentControls, fullUrlBreadcrumbs, newValues) {
-    const currentBreadcrumb = fullUrlBreadcrumbs[0];
-    if (!currentBreadcrumb) {
-        return {};
-    }
-    const controlsWrapper = getOrCreateControlsWrapper(currentControls, currentBreadcrumb, newValues);
-    if (!controlsWrapper) {
-        return {};
-    }
-    const nextBreadcrumbs = fullUrlBreadcrumbs.slice(1);
-    if (!nextBreadcrumbs.length && newValues) {
-        controlsWrapper.controls = newValues;
-    }
-    const controlsValues = controlsWrapper.controls;
-    return {
-        ...controlsValues,
-        ...internalTraverseCurrentControls(controlsWrapper.children, nextBreadcrumbs, newValues),
-    };
-}
-export function createNewCurrentControls(currentControls, fullUrlBreadcrumbs, newValues) {
-    const newCurrentControls = copyThroughJson(currentControls);
-    internalTraverseCurrentControls(newCurrentControls, fullUrlBreadcrumbs, newValues);
-    return newCurrentControls;
-}
-export function createControlsFromTree(node, globalValues) {
-    const currentControls = mapObjectValues(node.children, (childName, child) => {
-        if (!isBookTreeNode(child, BookEntryTypeEnum.Page)) {
-            return {
-                children: {},
-                controls: {},
-            };
-        }
-        return {
-            children: createControlsFromTree(child, {}),
-            controls: {
-                ...globalValues,
-                ...mapObjectValues(child.entry.controls, (name, setup) => {
-                    return setup.initValue;
-                }),
-            },
-        };
-    });
-    return currentControls;
-}