element-book 0.0.8 → 0.0.9

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

@@ -1,7 +1,7 @@
 import { ElementBookPageExample } from '../../../data/element-book-entry/element-book-page/element-book-page-example';
 export declare const ElementBookExampleViewer: import("element-vir").DeclarativeElementDefinition<"element-book-example-viewer", {
     example: ElementBookPageExample;
-    parentBreadcrumbs: ReadonlyArray<string>;
+    breadcrumbs: ReadonlyArray<string>;
 }, {
     internalState: any;
 }, {}, string, string, string | import("lit-html").HTMLTemplateResult, undefined>;

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

@@ -8,7 +8,6 @@ export const ElementBookExampleViewer = defineElementBookElement()({
         internalState: unsetInternalState,
     },
     renderCallback({ state, inputs, updateState }) {
-        const fullExampleBreadcrumbs = inputs.parentBreadcrumbs.concat(inputs.example.title);
         if (state.internalState === unsetInternalState) {
             updateState({ internalState: inputs.example.stateInit });
         }
@@ -35,7 +34,7 @@ export const ElementBookExampleViewer = defineElementBookElement()({
         }
         catch (error) {
             console.error(error);
-            return `${fullExampleBreadcrumbs.join(' > ')} failed: ${extractErrorMessage(error)}`;
+            return `${inputs.breadcrumbs.join(' > ')} failed: ${extractErrorMessage(error)}`;
         }
     },
 });

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

@@ -2,4 +2,4 @@ import { ElementBookPage } from '../../../data/element-book-entry/element-book-p
 export declare const ElementBookPageExamples: import("element-vir").DeclarativeElementDefinition<"element-book-page-examples", {
     page: ElementBookPage;
     parentBreadcrumbs: ReadonlyArray<string>;
-}, {}, {}, string, string, import("lit-html").HTMLTemplateResult[], undefined>;
+}, {}, {}, string, string, unknown, undefined>;

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

@@ -1,4 +1,4 @@
-import { assign, classMap, css, html, renderIf } from 'element-vir';
+import { assign, classMap, css, html, renderIf, repeat } from 'element-vir';
 import { defineElementBookElement } from '../define-book-element';
 import { ElementBookExampleControls } from './element-book-example-controls.element';
 import { ElementBookExampleViewer } from './element-book-example-viewer.element';
@@ -24,23 +24,28 @@ export const ElementBookPageExamples = defineElementBookElement()({
     renderCallback({ inputs }) {
         const examples = inputs.page.examples;
         const allControlsHidden = examples.every((example) => example.hideControls);
-        return examples.map((example) => {
+        /**
+         * Use the repeat directive here, instead of just a map, so that lit doesn't accidentally
+         * keep state cached between element book pages.
+         */
+        return repeat(examples, (example) => inputs.parentBreadcrumbs.concat(example.title).join('>'), (example) => {
+            const exampleBreadcrumbs = inputs.parentBreadcrumbs.concat(example.title);
             return html `
-                <div class="individual-example-wrapper">
-                    ${renderIf(!allControlsHidden, html `
-                            <${ElementBookExampleControls}
-                                class=${classMap({ 'hidden-controls': !!example.hideControls })}
-                                ${assign(ElementBookExampleControls, { example })}
-                            ></${ElementBookExampleControls}>
-                        `)}
-                    <${ElementBookExampleViewer}
-                        ${assign(ElementBookExampleViewer, {
+                    <div class="individual-example-wrapper">
+                        ${renderIf(!allControlsHidden, html `
+                                <${ElementBookExampleControls}
+                                    class=${classMap({ 'hidden-controls': !!example.hideControls })}
+                                    ${assign(ElementBookExampleControls, { example })}
+                                ></${ElementBookExampleControls}>
+                            `)}
+                        <${ElementBookExampleViewer}
+                            ${assign(ElementBookExampleViewer, {
                 example,
-                parentBreadcrumbs: inputs.parentBreadcrumbs,
+                breadcrumbs: exampleBreadcrumbs,
             })}
-                    ></${ElementBookExampleViewer}>
-                </div>
-            `;
+                        ></${ElementBookExampleViewer}>
+                    </div>
+                `;
         });
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-book",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "keywords": [
         "book",
         "design system",