@cratis/scene.react 4.9.0 → 4.11.0

package/renderer/InteractiveComponent.tsx

@@ -1,11 +1,12 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { ComponentType, ReactNode, createElement, useEffect } from 'react';
-import { ExternalComponent } from '@cratis/scene.model';
+import { ComponentType, ReactNode, createElement, useEffect, useMemo } from 'react';
+import { BindingExpression, ExternalComponent } from '@cratis/scene.model';
 import { useInteractions } from '../interactions';
 import { useBindingOutputs } from './BindingOutputContext';
 import { RegisteredComponentProps } from './ComponentRegistry';
+import { useRenderBindingResolver } from './RenderBindingScopeContext';
 
 export interface InteractiveComponentProps {
     component: ComponentType<RegisteredComponentProps>;
@@ -23,6 +24,34 @@ export interface InteractiveComponentProps {
 export function InteractiveComponent({ component, element, slots }: InteractiveComponentProps) {
     const interactions = useInteractions(element.id, element.behaviors);
     const bindingOutputs = useBindingOutputs(element.id);
+    const resolveBinding = useRenderBindingResolver();
+    const resolvedElement = useMemo(() => ({
+        ...element,
+        properties: resolveProperties(element.properties, resolveBinding),
+    }), [element, resolveBinding]);
     useEffect(() => () => bindingOutputs.clearAll(), [element.id]);
-    return createElement(component, { element, slots, interactions, bindingOutputs });
+    return createElement(component, { element: resolvedElement, slots, interactions, bindingOutputs });
+}
+
+function resolveProperties(properties: Record<string, unknown>, resolveBinding: (binding: BindingExpression) => unknown): Record<string, unknown> {
+    return Object.fromEntries(Object.entries(properties).map(([name, value]) => [name, resolveValue(value, resolveBinding)]));
+}
+
+function resolveValue(value: unknown, resolveBinding: (binding: BindingExpression) => unknown): unknown {
+    if (isBindingExpression(value)) return resolveBinding(value);
+    if (isDestinationReference(value)) return value;
+    if (Array.isArray(value)) return value.map(entry => resolveValue(entry, resolveBinding));
+    if (value !== null && typeof value === 'object') {
+        return Object.fromEntries(Object.entries(value as Record<string, unknown>).map(([name, entry]) => [name, resolveValue(entry, resolveBinding)]));
+    }
+
+    return value;
+}
+
+function isBindingExpression(value: unknown): value is BindingExpression {
+    return value !== null && typeof value === 'object' && !Array.isArray(value) && typeof (value as Record<string, unknown>).path === 'string';
+}
+
+function isDestinationReference(value: unknown): boolean {
+    return value !== null && typeof value === 'object' && !Array.isArray(value) && 'routeParameterBindings' in value;
 }

package/renderer/RenderBindingScopeContext.tsx

@@ -0,0 +1,73 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ReactNode, createContext, useCallback, useContext, useMemo, useRef } from 'react';
+import { BindingResolver, BindingScope, resolveBindingExpression } from '@cratis/scene.engine';
+import { BindingExpression, BindingNullBehavior } from '@cratis/scene.model';
+import { BindingOutputProvider, useBindingOutputScope } from './BindingOutputContext';
+
+interface RenderBindingScopeValue {
+    resolveBinding: BindingResolver;
+    scope: BindingScope;
+}
+
+const Context = createContext<RenderBindingScopeValue | undefined>(undefined);
+
+export interface RenderBindingScopeProviderProps {
+    children: ReactNode;
+    dataContext?: unknown;
+    queryResults?: Record<string, unknown>;
+    componentOutputs?: Record<string, Record<string, unknown>>;
+    resolveBinding?: BindingResolver;
+    onComponentOutputsChanged?: (outputs: Record<string, Record<string, unknown>>) => void;
+}
+
+/**
+ * Provides the inherited reactive binding scope for a rendered Scene tree.
+ */
+export function RenderBindingScopeProvider(props: RenderBindingScopeProviderProps) {
+    const current = useContext(Context);
+    if (current) return <>{props.children}</>;
+
+    return (
+        <BindingOutputProvider onOutputsChanged={props.onComponentOutputsChanged}>
+            <RenderBindingScopeInner {...props} />
+        </BindingOutputProvider>
+    );
+}
+
+function RenderBindingScopeInner({ children, dataContext, queryResults, componentOutputs, resolveBinding }: RenderBindingScopeProviderProps) {
+    const outputs = useBindingOutputScope();
+    const previousValues = useRef(new Map<string, unknown>());
+    const scope = useMemo<BindingScope>(() => ({
+        dataContext,
+        queryResults,
+        componentOutputs: { ...(componentOutputs ?? {}), ...outputs },
+    }), [componentOutputs, dataContext, outputs, queryResults]);
+
+    const resolver = useCallback<BindingResolver>((binding: BindingExpression) => {
+        if (!binding.kind && resolveBinding) return resolveBinding(binding);
+
+        const key = JSON.stringify(binding);
+        const value = resolveBindingExpression(binding, scope);
+        if (binding.nullBehavior === BindingNullBehavior.Preserve && value === undefined) {
+            return previousValues.current.get(key);
+        }
+
+        if (value !== undefined) previousValues.current.set(key, value);
+        return value;
+    }, [resolveBinding, scope]);
+
+    const value = useMemo<RenderBindingScopeValue>(() => ({ resolveBinding: resolver, scope }), [resolver, scope]);
+    return <Context.Provider value={value}>{children}</Context.Provider>;
+}
+
+export function useRenderBindingResolver(): BindingResolver {
+    const context = useContext(Context);
+    if (!context) throw new Error('No Scene render binding scope is available.');
+    return context.resolveBinding;
+}
+
+export function useRenderBindingScope(): BindingScope {
+    return useContext(Context)?.scope ?? {};
+}

package/renderer/index.ts

@@ -1,8 +1,10 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+export * from './AbortableQueryRunner';
 export * from './BindingOutputContext';
 export * from './ComponentRegistry';
+export * from './RenderBindingScopeContext';
 export * from './UnresolvedComponent';
 export * from './createReactRenderer';
 export * from './InteractiveComponent';