add activity name to child

contentstech-com · Nov 11, 2024 · 5975854 · 5975854
1 parent ee8414a
commit 5975854
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 42 deletions.
diff --git a/.changeset/yellow-pillows-clean.md b/.changeset/yellow-pillows-clean.md
@@ -0,0 +1,5 @@
+---
+"@contentstech/stackflow-plugin-omniflow": patch
+---
+
+Add activity name to child
diff --git a/example/src/stackflow/index.tsx b/example/src/stackflow/index.tsx
@@ -74,10 +74,10 @@ const components: Record<RegisteredActivityName, ActivityComponentType<any>> = {
 					>
 						Push Root
 					</button>
-					<Show when={child}>
+					<Show when={child !== undefined}>
 						<div class="border rounded p-2">
-							<p>Child will be rendered here</p>
-							<div class="border border-red p-2 rounded">{child?.()}</div>
+							<p>Child ({child?.name}) will be rendered here</p>
+							<div class="border border-red p-2 rounded">{child?.render()}</div>
 						</div>
 					</Show>
 				</div>
@@ -101,10 +101,10 @@ const components: Record<RegisteredActivityName, ActivityComponentType<any>> = {
 						</p>
 					)}
 				</Show>
-				<Show when={child}>
+				<Show when={child !== undefined}>
 					<div class="border rounded p-2">
-						<p>Child will be rendered here</p>
-						<div class="border border-red p-2 rounded">{child?.()}</div>
+						<p>Child ({child?.name}) will be rendered here</p>
+						<div class="border border-red p-2 rounded">{child?.render()}</div>
 					</div>
 				</Show>
 				<button
@@ -131,10 +131,10 @@ const components: Record<RegisteredActivityName, ActivityComponentType<any>> = {
 						</p>
 					)}
 				</Show>
-				<Show when={child}>
+				<Show when={child !== undefined}>
 					<div class="border rounded p-2">
-						<p>Child will be rendered here</p>
-						<div class="border border-red p-2 rounded">{child?.()}</div>
+						<p>Child ({child?.name}) will be rendered here</p>
+						<div class="border border-red p-2 rounded">{child?.render()}</div>
 					</div>
 				</Show>
 				<button
@@ -161,10 +161,10 @@ const components: Record<RegisteredActivityName, ActivityComponentType<any>> = {
 						</p>
 					)}
 				</Show>
-				<Show when={child}>
+				<Show when={child !== undefined}>
 					<div class="border rounded p-2">
-						<p>Child will be rendered here</p>
-						<div class="border border-red p-2 rounded">{child?.()}</div>
+						<p>Child ({child?.name}) will be rendered here</p>
+						<div class="border border-red p-2 rounded">{child?.render()}</div>
 					</div>
 				</Show>
 				<button

diff --git a/src/child.tsx b/src/child.tsx
@@ -5,11 +5,15 @@ import {
 	useContext,
 } from "solid-js";
 
-const ChildContext = createContext<() => JSXElement>();
+export type Child = {
+	name: string;
+	render: () => JSXElement;
+};
 
-export const ChildProvider: ContextProviderComponent<
-	(() => JSXElement) | undefined
-> = ChildContext.Provider;
+const ChildContext = createContext<Child | null>();
 
-export const useChild = (): (() => JSXElement) | undefined =>
+export const ChildProvider: ContextProviderComponent<Child | null | undefined> =
+	ChildContext.Provider;
+
+export const useChild = (): Child | null | undefined =>
 	useContext(ChildContext);
diff --git a/src/index.tsx b/src/index.tsx
@@ -235,31 +235,38 @@ export function omniflow<ActivityName extends string>({
 
 				return (
 					<ChildProvider
-						value={() => (
-							<Show when={child()}>
-								{(child) => (
-									<ParentProvider
-										value={{
-											activityName: props.parentName,
-											activityParams: props.parentParams,
-											parent: useParent(),
-										}}
-									>
-										<Wrapped
-											parentName={props.childNameStack[0]}
-											parentParams={childParams() ?? {}}
-											childNameStack={props.childNameStack.slice(1)}
-											childParamsStack={props.childParamsStack.slice(1)}
-										>
-											<Dynamic
-												component={child()}
-												params={childParams() ?? {}}
-											/>
-										</Wrapped>
-									</ParentProvider>
-								)}
-							</Show>
-						)}
+						value={
+							props.childNameStack[0] != null
+								? {
+										name: props.childNameStack[0],
+										render: () => (
+											<Show when={child()}>
+												{(child) => (
+													<ParentProvider
+														value={{
+															activityName: props.parentName,
+															activityParams: props.parentParams,
+															parent: useParent(),
+														}}
+													>
+														<Wrapped
+															parentName={props.childNameStack[0]}
+															parentParams={childParams() ?? {}}
+															childNameStack={props.childNameStack.slice(1)}
+															childParamsStack={props.childParamsStack.slice(1)}
+														>
+															<Dynamic
+																component={child()}
+																params={childParams() ?? {}}
+															/>
+														</Wrapped>
+													</ParentProvider>
+												)}
+											</Show>
+										),
+									}
+								: null
+						}
 					>
 						{props.children}
 					</ChildProvider>