@arkcit/engine-react 0.3.0

package/README.md

@@ -0,0 +1,51 @@
+# @arkcit/engine-react
+
+Concrete React renderer package for the Arkcit platform.
+
+## Position In The Flow
+
+```text
+@arkcit/engine-schema
+@arkcit/engine-runtime
+@arkcit/engine-core
+@arkcit/engine-render-layer
+        ↓
+@arkcit/engine-react
+        ↓
+@arkcit/engine
+        ↓
+@arkcit/react-ui
+@arkcit/studio preview adapters
+@arkcit/docs-shell
+```
+
+## What Goes In
+
+- neutral resolved-node contracts
+- shared engine primitives
+- React-specific rendering needs
+
+## What Comes Out
+
+- React rendering helpers
+- React engine root pieces
+- React-specific composition/materialization utilities
+
+## Responsibilities
+
+- own React-only rendering behavior
+- keep React-specific utilities out of neutral engine layers
+- expose reusable React renderer seams to `@arkcit/engine`
+
+## Do Not Put Here
+
+- canonical schema rules
+- runtime contract ownership
+- Angular or React Native behavior
+
+## Main Consumers
+
+- `@arkcit/engine`
+- `@arkcit/react-ui`
+- `@arkcit/studio`
+- `@arkcit/docs-shell`

package/dist/composition.d.ts

@@ -0,0 +1,116 @@
+import React__default from 'react';
+import { ContentCompositionPlan, NavigationCompositionPlan } from '@arkcit/engine-render-layer';
+import { UINode } from '@arkcit/engine-schema';
+import { UIRuntimeAdapter } from '@arkcit/engine-runtime';
+
+type ApplyContentCompositionParams = {
+    node: UINode;
+    componentProps: Record<string, unknown>;
+    isStudioRendererContext: boolean;
+    internalStudioNodeTypes: Set<string>;
+    schemaNodes: UINode[];
+    onInlineTextEdit?: (nodeId: string, propName: string, value: unknown) => void;
+    captureFieldFocus: (target: EventTarget | null) => void;
+    renderSafeNode: (node: UINode) => React__default.ReactNode;
+    normalizeRenderableChild: (value: unknown) => React__default.ReactNode;
+    findNodeById: (nodeId: string, nodes: UINode[]) => UINode | null;
+    runtime: UIRuntimeAdapter;
+    plans?: ContentCompositionPlan[];
+    dependencies: {
+        resolveContentCompositionPlan: (args: {
+            node: UINode;
+            isStudioRendererContext: boolean;
+            internalStudioNodeTypes: Set<string>;
+        }) => ContentCompositionPlan[];
+        renderStudioForm: (args: {
+            node: UINode;
+            componentProps: Record<string, unknown>;
+            visibleChildren: UINode[];
+            runtime: UIRuntimeAdapter;
+            onInlineTextEdit?: (nodeId: string, propName: string, value: unknown) => void;
+            captureFieldFocus: (target: EventTarget | null) => void;
+            renderSafeNode: (node: UINode) => React__default.ReactNode;
+        }) => React__default.ReactNode | null;
+        buildScrollRevealChildren: (args: {
+            rawChildren: unknown;
+            renderSafeNode: (node: UINode) => React__default.ReactNode;
+            normalizeRenderableChild: (value: unknown) => React__default.ReactNode;
+            fallbackChildren: unknown;
+        }) => React__default.ReactNode;
+    };
+};
+declare const applyContentComposition: ({ node, componentProps, isStudioRendererContext, internalStudioNodeTypes, schemaNodes, onInlineTextEdit, captureFieldFocus, renderSafeNode, normalizeRenderableChild, findNodeById, runtime, plans: providedPlans, dependencies, }: ApplyContentCompositionParams) => React__default.ReactNode | null;
+
+type ApplyNavigationCompositionParams<TInlineEditing = unknown> = {
+    node: UINode;
+    componentProps: Record<string, unknown>;
+    isStudioRendererContext: boolean;
+    selectedNodeId: string | null;
+    wizardActiveStepByNodeId: Record<string, string>;
+    accordionOpenIdsByNodeId: Record<string, string[]>;
+    expandablePanelOpenByNodeId: Record<string, boolean>;
+    runtime: UIRuntimeAdapter;
+    setWizardActiveStepByNodeId: React__default.Dispatch<React__default.SetStateAction<Record<string, string>>>;
+    setAccordionOpenIdsByNodeId: React__default.Dispatch<React__default.SetStateAction<Record<string, string[]>>>;
+    setExpandablePanelOpenByNodeId: React__default.Dispatch<React__default.SetStateAction<Record<string, boolean>>>;
+    onNodeClick?: (nodeId: string) => void;
+    onInlineTextEdit?: (nodeId: string, propName: string, value: unknown) => void;
+    renderSafeNode: (node: UINode) => React__default.ReactNode;
+    normalizeRenderableChild: (value: unknown) => React__default.ReactNode;
+    captureFieldFocus: (target: EventTarget | null) => void;
+    setInlineEditing: React__default.Dispatch<React__default.SetStateAction<TInlineEditing | null>>;
+    internalStudioNodeTypes: Set<string>;
+    plans?: NavigationCompositionPlan[];
+    dependencies: {
+        resolveNavigationCompositionPlan: (args: {
+            node: UINode;
+            componentProps: Record<string, unknown>;
+            internalStudioNodeTypes: Set<string>;
+            runtime: UIRuntimeAdapter;
+        }) => NavigationCompositionPlan[];
+        createInlineEditingState: (targetNodeId: string, propName: string, rawValue: unknown) => TInlineEditing;
+        configureStudioFormWizard: (args: {
+            node: UINode;
+            componentProps: Record<string, unknown>;
+            isStudioRendererContext: boolean;
+            selectedNodeId: string | null;
+            wizardActiveStepByNodeId: Record<string, string>;
+            runtime: UIRuntimeAdapter;
+            setWizardActiveStepByNodeId: React__default.Dispatch<React__default.SetStateAction<Record<string, string>>>;
+            onNodeClick?: (nodeId: string) => void;
+            onInlineTextEdit?: (nodeId: string, propName: string, value: unknown) => void;
+            renderSafeNode: (node: UINode) => React__default.ReactNode;
+            captureFieldFocus: (target: EventTarget | null) => void;
+            openInlineEditorForNodeProp: (targetNodeId: string, propName: string, rawValue: unknown) => void;
+            internalStudioNodeTypes: Set<string>;
+        }) => void;
+        configureStudioAccordion: (args: {
+            node: UINode;
+            componentProps: Record<string, unknown>;
+            accordionChildren: UINode[];
+            selectedNodeId: string | null;
+            accordionOpenIdsByNodeId: Record<string, string[]>;
+            setAccordionOpenIdsByNodeId: React__default.Dispatch<React__default.SetStateAction<Record<string, string[]>>>;
+            renderSafeNode: (node: UINode) => React__default.ReactNode;
+        }) => void;
+        configureStudioExpandablePanel: (args: {
+            node: UINode;
+            componentProps: Record<string, unknown>;
+            panelChildren: UINode[];
+            expandablePanelOpenByNodeId: Record<string, boolean>;
+            setExpandablePanelOpenByNodeId: React__default.Dispatch<React__default.SetStateAction<Record<string, boolean>>>;
+            renderSafeNode: (node: UINode) => React__default.ReactNode;
+        }) => void;
+        configureStudioTabs: (args: {
+            componentProps: Record<string, unknown>;
+            tabItems: Array<Record<string, unknown>>;
+            rawChildren: unknown;
+            runtime: UIRuntimeAdapter;
+            renderSafeNode: (node: UINode) => React__default.ReactNode;
+            normalizeRenderableChild: (value: unknown) => React__default.ReactNode;
+        }) => void;
+    };
+};
+declare const applyNavigationComposition: <TInlineEditing = unknown>({ node, componentProps, isStudioRendererContext, selectedNodeId, wizardActiveStepByNodeId, accordionOpenIdsByNodeId, expandablePanelOpenByNodeId, runtime, setWizardActiveStepByNodeId, setAccordionOpenIdsByNodeId, setExpandablePanelOpenByNodeId, onNodeClick, onInlineTextEdit, renderSafeNode, normalizeRenderableChild, captureFieldFocus, setInlineEditing, internalStudioNodeTypes, plans: providedPlans, dependencies, }: ApplyNavigationCompositionParams<TInlineEditing>) => void;
+
+export { applyContentComposition, applyNavigationComposition };

package/dist/composition.js

@@ -0,0 +1,344 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/materialization/materializeCoverContent.tsx
+import React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var materializeCoverContent = ({
+  descriptor,
+  renderSafeNode
+}) => {
+  const resolvedActionChildren = descriptor.actionNodes.map((child) => /* @__PURE__ */ jsx("span", { className: "inline-flex align-middle", children: renderSafeNode(child) }, child.id));
+  const resolvedContentChildren = descriptor.contentNodes.map((child) => /* @__PURE__ */ jsx(React.Fragment, { children: renderSafeNode(child) }, child.id));
+  return {
+    actions: resolvedActionChildren.length > 0 ? resolvedActionChildren.length === 1 ? resolvedActionChildren[0] : /* @__PURE__ */ jsx(Fragment, { children: resolvedActionChildren }) : void 0,
+    children: resolvedContentChildren.length > 0 ? resolvedContentChildren.length === 1 ? resolvedContentChildren[0] : /* @__PURE__ */ jsx(Fragment, { children: resolvedContentChildren }) : null
+  };
+};
+
+// src/composition/applyContentComposition.tsx
+var applyContentComposition = ({
+  node,
+  componentProps,
+  isStudioRendererContext,
+  internalStudioNodeTypes,
+  schemaNodes,
+  onInlineTextEdit,
+  captureFieldFocus,
+  renderSafeNode,
+  normalizeRenderableChild,
+  findNodeById,
+  runtime,
+  plans: providedPlans,
+  dependencies
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const plans = providedPlans != null ? providedPlans : dependencies.resolveContentCompositionPlan({
+    node,
+    isStudioRendererContext,
+    internalStudioNodeTypes
+  });
+  if (plans.some((plan) => plan.kind === "button-toggle" && plan.disableOnClick)) {
+    delete componentProps.onClick;
+  }
+  if (plans.some((plan) => plan.kind === "form-field")) {
+    const rawProps = (_a = node.props) != null ? _a : {};
+    const existingField = componentProps.field && typeof componentProps.field === "object" && !Array.isArray(componentProps.field) ? componentProps.field : {};
+    const fieldName = String((_c = (_b = existingField.name) != null ? _b : rawProps.name) != null ? _c : "").trim();
+    const fieldType = String((_e = (_d = existingField.type) != null ? _d : rawProps.type) != null ? _e : "text");
+    const fallbackLabel = fieldName || "Field";
+    const fieldLabel = String((_g = (_f = existingField.label) != null ? _f : rawProps.label) != null ? _g : fallbackLabel);
+    componentProps.field = __spreadProps(__spreadValues(__spreadValues({}, rawProps), existingField), {
+      name: fieldName || "field",
+      type: fieldType,
+      label: fieldLabel
+    });
+    if (componentProps.value === void 0) {
+      componentProps.value = (_i = (_h = rawProps.value) != null ? _h : rawProps.defaultValue) != null ? _i : "";
+    }
+    if (!componentProps.dict || typeof componentProps.dict !== "object" || Array.isArray(componentProps.dict)) {
+      componentProps.dict = {
+        submit: "Submit",
+        reset: "Reset",
+        loading: "Loading...",
+        success: "Saved",
+        search: "Search...",
+        noResultToShow: "No result"
+      };
+    }
+    if (!componentProps.onChange) {
+      componentProps.onChange = (event) => {
+        var _a2;
+        captureFieldFocus(event.target);
+        const target = event.target;
+        const nextValue = target.type === "checkbox" ? Boolean(target.checked) : target.value;
+        const findParentFormId = (nodes, targetId, lineage = []) => {
+          var _a3, _b2;
+          for (const candidate of nodes) {
+            const nextLineage = [...lineage, candidate];
+            if (candidate.id === targetId) {
+              for (let index = nextLineage.length - 2; index >= 0; index -= 1) {
+                if (((_a3 = nextLineage[index]) == null ? void 0 : _a3.type) === "Form") {
+                  return nextLineage[index].id;
+                }
+              }
+              return null;
+            }
+            if ((_b2 = candidate.children) == null ? void 0 : _b2.length) {
+              const found = findParentFormId(candidate.children, targetId, nextLineage);
+              if (found) return found;
+            }
+          }
+          return null;
+        };
+        const parentFormId = findParentFormId(schemaNodes, node.id);
+        if (parentFormId && onInlineTextEdit && fieldName) {
+          const parentForm = findNodeById(parentFormId, schemaNodes);
+          const parentProps = (_a2 = parentForm == null ? void 0 : parentForm.props) != null ? _a2 : {};
+          const currentValues = parentProps.values && typeof parentProps.values === "object" && !Array.isArray(parentProps.values) ? parentProps.values : {};
+          onInlineTextEdit(parentFormId, "values", __spreadProps(__spreadValues({}, currentValues), {
+            [fieldName]: nextValue
+          }));
+          return;
+        }
+        onInlineTextEdit == null ? void 0 : onInlineTextEdit(node.id, "value", nextValue);
+      };
+    }
+  }
+  const studioFormPlan = plans.find((plan) => plan.kind === "studio-form");
+  if ((studioFormPlan == null ? void 0 : studioFormPlan.kind) === "studio-form") {
+    return dependencies.renderStudioForm({
+      node,
+      componentProps,
+      visibleChildren: studioFormPlan.visibleChildren,
+      runtime,
+      onInlineTextEdit,
+      captureFieldFocus,
+      renderSafeNode
+    });
+  }
+  if (isStudioRendererContext && node.type === "Form" && onInlineTextEdit) {
+    const existingStudioConfig = componentProps.studio && typeof componentProps.studio === "object" && !Array.isArray(componentProps.studio) ? componentProps.studio : {};
+    componentProps.studio = __spreadProps(__spreadValues({}, existingStudioConfig), {
+      onSubmitLabelDoubleClick: () => {
+        var _a2, _b2;
+        return onInlineTextEdit(
+          node.id,
+          "dict.submit",
+          String(
+            (_b2 = (_a2 = componentProps.dict) == null ? void 0 : _a2.submit) != null ? _b2 : "Submit"
+          )
+        );
+      },
+      onResetLabelDoubleClick: () => {
+        var _a2, _b2;
+        return onInlineTextEdit(
+          node.id,
+          "dict.reset",
+          String(
+            (_b2 = (_a2 = componentProps.dict) == null ? void 0 : _a2.reset) != null ? _b2 : "Reset"
+          )
+        );
+      }
+    });
+  }
+  const coverPlan = plans.find((plan) => plan.kind === "cover-content");
+  if ((coverPlan == null ? void 0 : coverPlan.kind) === "cover-content") {
+    const content = materializeCoverContent({
+      descriptor: coverPlan.descriptor,
+      renderSafeNode
+    });
+    if (content.actions !== void 0) {
+      componentProps.actions = content.actions;
+    }
+    if (content.children !== null) {
+      componentProps.children = content.children;
+    } else if (componentProps.children === void 0) {
+      componentProps.children = null;
+    }
+  }
+  const scrollRevealPlan = plans.find((plan) => plan.kind === "scroll-reveal");
+  if ((scrollRevealPlan == null ? void 0 : scrollRevealPlan.kind) === "scroll-reveal") {
+    componentProps.children = dependencies.buildScrollRevealChildren({
+      rawChildren: scrollRevealPlan.rawChildren,
+      renderSafeNode,
+      normalizeRenderableChild,
+      fallbackChildren: componentProps.children
+    });
+  }
+  return null;
+};
+
+// src/materialization/materializeNavigationContent.tsx
+import React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var materializeAccordionItems = ({
+  items,
+  renderSafeNode
+}) => items.map((item) => {
+  var _a;
+  return {
+    id: item.id,
+    title: item.title,
+    disabled: item.disabled,
+    content: item.contentKind === "nodes" ? /* @__PURE__ */ jsx2("div", { className: "space-y-2", children: item.contentNodes.map((nested) => /* @__PURE__ */ jsx2(React2.Fragment, { children: renderSafeNode(nested) }, nested.id)) }) : (_a = item.contentText) != null ? _a : ""
+  };
+});
+var materializeExpandablePanelContent = ({
+  descriptor,
+  renderSafeNode
+}) => {
+  if (descriptor.kind === "empty") {
+    return void 0;
+  }
+  return /* @__PURE__ */ jsx2("div", { className: "space-y-2", children: descriptor.nodes.map((child) => /* @__PURE__ */ jsx2(React2.Fragment, { children: renderSafeNode(child) }, child.id)) });
+};
+
+// src/materialization/materializeTabsContent.tsx
+import React3 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var materializeTabsContent = ({
+  tabs,
+  renderSafeNode,
+  normalizeRenderableChild
+}) => tabs.map((tab) => ({
+  id: tab.id,
+  title: tab.title,
+  label: tab.label,
+  content: tab.contentKind === "nodes" ? tab.contentNodes.length === 1 ? renderSafeNode(tab.contentNodes[0]) : tab.contentNodes.map((child) => /* @__PURE__ */ jsx3(React3.Fragment, { children: renderSafeNode(child) }, child.id)) : normalizeRenderableChild(tab.fallbackContent)
+}));
+
+// src/composition/applyNavigationComposition.tsx
+var applyNavigationComposition = ({
+  node,
+  componentProps,
+  isStudioRendererContext,
+  selectedNodeId,
+  wizardActiveStepByNodeId,
+  accordionOpenIdsByNodeId,
+  expandablePanelOpenByNodeId,
+  runtime,
+  setWizardActiveStepByNodeId,
+  setAccordionOpenIdsByNodeId,
+  setExpandablePanelOpenByNodeId,
+  onNodeClick,
+  onInlineTextEdit,
+  renderSafeNode,
+  normalizeRenderableChild,
+  captureFieldFocus,
+  setInlineEditing,
+  internalStudioNodeTypes,
+  plans: providedPlans,
+  dependencies
+}) => {
+  const plans = providedPlans != null ? providedPlans : dependencies.resolveNavigationCompositionPlan({
+    node,
+    componentProps,
+    internalStudioNodeTypes,
+    runtime
+  });
+  if (plans.some((plan) => plan.kind === "form-wizard")) {
+    const openInlineEditorForNodeProp = (targetNodeId, propName, rawValue) => {
+      setInlineEditing(dependencies.createInlineEditingState(targetNodeId, propName, rawValue));
+    };
+    dependencies.configureStudioFormWizard({
+      node,
+      componentProps,
+      isStudioRendererContext,
+      selectedNodeId,
+      wizardActiveStepByNodeId,
+      runtime,
+      setWizardActiveStepByNodeId,
+      onNodeClick,
+      onInlineTextEdit,
+      renderSafeNode,
+      captureFieldFocus,
+      openInlineEditorForNodeProp,
+      internalStudioNodeTypes
+    });
+  }
+  const accordionPlan = plans.find((plan) => plan.kind === "accordion");
+  if ((accordionPlan == null ? void 0 : accordionPlan.kind) === "accordion") {
+    const accordionChildren = accordionPlan.accordionChildren;
+    if (accordionChildren.length > 0) {
+      if (isStudioRendererContext) {
+        dependencies.configureStudioAccordion({
+          node,
+          componentProps,
+          accordionChildren,
+          selectedNodeId,
+          accordionOpenIdsByNodeId,
+          setAccordionOpenIdsByNodeId,
+          renderSafeNode
+        });
+      } else {
+        componentProps.items = materializeAccordionItems({
+          items: accordionPlan.itemDescriptors,
+          renderSafeNode
+        });
+      }
+    }
+  }
+  const expandablePanelPlan = plans.find((plan) => plan.kind === "expandable-panel");
+  if ((expandablePanelPlan == null ? void 0 : expandablePanelPlan.kind) === "expandable-panel") {
+    const panelChildren = expandablePanelPlan.panelChildren;
+    if (isStudioRendererContext) {
+      dependencies.configureStudioExpandablePanel({
+        node,
+        componentProps,
+        panelChildren,
+        expandablePanelOpenByNodeId,
+        setExpandablePanelOpenByNodeId,
+        renderSafeNode
+      });
+    } else if (panelChildren.length > 0) {
+      componentProps.children = materializeExpandablePanelContent({
+        descriptor: expandablePanelPlan.contentDescriptor,
+        renderSafeNode
+      });
+    }
+  }
+  const tabsPlan = plans.find((plan) => plan.kind === "tabs");
+  if ((tabsPlan == null ? void 0 : tabsPlan.kind) === "tabs") {
+    Object.assign(componentProps, tabsPlan.normalizedComponentProps);
+    if (isStudioRendererContext) {
+      const tabItems = Array.isArray(componentProps.tabs) ? componentProps.tabs : [];
+      dependencies.configureStudioTabs({
+        componentProps,
+        tabItems,
+        rawChildren: tabsPlan.rawChildren,
+        runtime,
+        renderSafeNode,
+        normalizeRenderableChild
+      });
+    } else {
+      componentProps.tabs = materializeTabsContent({
+        tabs: tabsPlan.tabDescriptors,
+        renderSafeNode,
+        normalizeRenderableChild
+      });
+      delete componentProps.children;
+    }
+  }
+};
+export {
+  applyContentComposition,
+  applyNavigationComposition
+};

package/dist/directives.d.ts

@@ -0,0 +1,49 @@
+import { RenderDirectivePlan } from '@arkcit/engine-render-layer';
+import { UINode } from '@arkcit/engine-schema';
+import { UIRuntimeAdapter } from '@arkcit/engine-runtime';
+
+type ApplyRenderDirectivesParams = {
+    node: UINode;
+    componentProps: Record<string, unknown>;
+    renderBindingProps: Record<string, unknown>;
+    runtime: UIRuntimeAdapter;
+    plans?: RenderDirectivePlan[];
+    dependencies: {
+        resolveRenderDirectivePlan: (args: {
+            node: UINode;
+            renderBindingProps: Record<string, unknown>;
+        }) => RenderDirectivePlan[];
+        applyRowsAndColumnsBinding: (args: {
+            componentProps: Record<string, unknown>;
+            runtime: UIRuntimeAdapter;
+            rowsBindingKey: string;
+            columnsBindingKey: string;
+        }) => void;
+        filterRowsByRuntimeQuery: (args: {
+            nodeId: string;
+            componentProps: Record<string, unknown>;
+            runtime: UIRuntimeAdapter;
+        }) => void;
+        buildCoverMedia: (args: {
+            mediaSource: unknown;
+            mediaSrc: unknown;
+            mediaAlt: unknown;
+        }) => unknown;
+        applyObjectBinding: (args: {
+            componentProps: Record<string, unknown>;
+            runtime: UIRuntimeAdapter;
+            bindingKey: string;
+        }) => void;
+        applyDecodeTranslationBinding: (args: {
+            componentProps: Record<string, unknown>;
+            runtime: UIRuntimeAdapter;
+            tagContentTranslationKey?: string;
+            tagContentTranslationValue?: unknown;
+            hrefTranslationKey?: string;
+            hrefTranslationValue?: unknown;
+        }) => void;
+    };
+};
+declare const applyRenderDirectives: ({ node, componentProps, renderBindingProps, runtime, plans: providedPlans, dependencies, }: ApplyRenderDirectivesParams) => void;
+
+export { applyRenderDirectives };

package/dist/directives.js

@@ -0,0 +1,58 @@
+// src/directives/applyRenderDirectives.ts
+var applyRenderDirectives = ({
+  node,
+  componentProps,
+  renderBindingProps,
+  runtime,
+  plans: providedPlans,
+  dependencies
+}) => {
+  const directives = providedPlans != null ? providedPlans : dependencies.resolveRenderDirectivePlan({
+    node,
+    renderBindingProps
+  });
+  for (const directive of directives) {
+    if (directive.kind === "rows-columns-binding") {
+      dependencies.applyRowsAndColumnsBinding({
+        componentProps,
+        runtime,
+        rowsBindingKey: directive.rowsBindingKey,
+        columnsBindingKey: directive.columnsBindingKey
+      });
+    }
+    if (directive.kind === "filter-rows-by-query") {
+      dependencies.filterRowsByRuntimeQuery({
+        nodeId: directive.nodeId,
+        componentProps,
+        runtime
+      });
+    }
+    if (directive.kind === "cover-media") {
+      componentProps.media = dependencies.buildCoverMedia({
+        mediaSource: directive.mediaSource,
+        mediaSrc: directive.mediaSrc,
+        mediaAlt: directive.mediaAlt
+      });
+    }
+    if (directive.kind === "object-binding") {
+      dependencies.applyObjectBinding({
+        componentProps,
+        runtime,
+        bindingKey: directive.bindingKey
+      });
+    }
+    if (directive.kind === "decode-translation-binding") {
+      dependencies.applyDecodeTranslationBinding({
+        componentProps,
+        runtime,
+        tagContentTranslationKey: directive.tagContentTranslationKey,
+        tagContentTranslationValue: directive.tagContentTranslationValue,
+        hrefTranslationKey: directive.hrefTranslationKey,
+        hrefTranslationValue: directive.hrefTranslationValue
+      });
+    }
+  }
+};
+export {
+  applyRenderDirectives
+};