feat(debug): add the props factory to the debug route

jgroth · Aug 30, 2024 · 65e6fa6 · 65e6fa6
1 parent b118675
commit 65e6fa6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx
@@ -137,6 +137,8 @@ export class App {
                                 componentProps={{
                                     docs: this.data.docs,
                                     schemas: this.data.schemas,
+                                    examplePropsFactory:
+                                        this.examplePropsFactory,
                                 }}
                             />
                             <stencil-route

diff --git a/src/components/debug/debug.tsx b/src/components/debug/debug.tsx
@@ -5,6 +5,7 @@ import {
     JsonDocsTag,
 } from '@stencil/core/internal';
 import { MatchResults } from '@stencil/router';
+import { PropsFactory } from '../playground/playground.types';
 
 @Component({
     tag: 'kompendium-debug',
@@ -29,6 +30,13 @@ export class KompendiumDebug {
     @Prop()
     public match: MatchResults;
 
+    /**
+     * Factory for creating props for example components
+     * @returns {Record<string, unknown>} props
+     */
+    @Prop()
+    public examplePropsFactory?: PropsFactory = () => ({});
+
     public render(): HTMLElement {
         const tag = this.match.params.name;
         const component = findComponent(tag, this.docs);
@@ -46,8 +54,10 @@ export class KompendiumDebug {
         const ExampleComponent = component.tag;
         const ownerComponent = this.docs.components.find(isOwnerOf(component));
         const schema = this.schemas.find((s) => s.$id === ownerComponent.tag);
+        const factory = this.examplePropsFactory;
         const props = {
             schema: schema,
+            ...factory(ExampleComponent),
         };
 
         return (