Process a bail container of nested components (T1097275) (#628)

* Fix template rendering with router-view inside

* Fix security alerts

* Fix conditional render for config components

* Fix v-model with argument after bc

* Use sync template for dxForm

* Process a bail container of nested components

Co-authored-by: dxvladislavvolkov <[email protected]>
Co-authored-by: dxvladislavvolkov <[email protected]>
Co-authored-by: dxvladislavvolkov <[email protected]>
Co-authored-by: teabagp <[email protected]>

Author: 5 people

packages/devextreme-vue/src/core/__tests__/component.test.ts

@@ -1,10 +1,13 @@
+import { PatchFlags } from "@vue/shared";
 import { mount } from "@vue/test-utils";
 import * as events from "devextreme/events";
-import { App, defineComponent, nextTick } from "vue";
+import { App, createVNode, defineComponent, h, nextTick, renderSlot } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
 
+import { pullConfigComponents } from "../children-processing";
 import { IWidgetComponent } from "../component";
 import globalConfig from "../config";
+import Configuration from "../configuration";
 import { IConfigurable, IConfigurationComponent } from "../configuration-component";
 import { IExtension } from "../extension-component";
 import { createComponent, createConfigurationComponent, createExtensionComponent } from "../index";
@@ -1815,3 +1818,25 @@ describe("disposing", () => {
         expect(component.unmount.bind(component)).not.toThrow();
     });
 });
+
+describe("children processing", () => {
+    it("should process children if they are wrapped to a bail container", () => {
+        const Nested = buildTestConfigCtor();
+        const config =  new Configuration(
+            () => undefined,
+            null,
+            {}
+        );
+        (Nested as any as IConfigurationComponent).$_optionName = "nestedOption";
+        const nestedVNode = createVNode(Nested);
+        const vnode = renderSlot(
+          { default: () => [nestedVNode] },
+          "default",
+          undefined,
+          () => [(h("comment"))]
+        );
+        expect(vnode.patchFlag).toBe(PatchFlags.BAIL);
+        pullConfigComponents([vnode], [], config);
+        expect(nestedVNode).toHaveProperty("$_config");
+    });
+});

packages/devextreme-vue/src/core/children-processing.ts

@@ -14,11 +14,11 @@ export function isFragment(node: any): boolean {
     const patchFlag = node.patchFlag;
     return patchFlag === PatchFlags.KEYED_FRAGMENT
     || patchFlag === PatchFlags.UNKEYED_FRAGMENT
-    || patchFlag === PatchFlags.STABLE_FRAGMENT;
+    || patchFlag === PatchFlags.STABLE_FRAGMENT
+    || patchFlag === PatchFlags.BAIL;
 }
 
-function pullConfigComponents(children: VNode[], nodes: VNode[], ownerConfig: Configuration): void {
-
+export function pullConfigComponents(children: VNode[], nodes: VNode[], ownerConfig: Configuration): void {
     children.forEach((node) => {
         if (isFragment(node) && Array.isArray(node.children)) {
             pullConfigComponents(node.children as any as VNode[], nodes, ownerConfig);