fix(combinator): DLT-3232 pass app context to renderer target for directive resolution (#1301)

Author: paulojreis-dialpad

packages/combinator/src/components/renderer/renderer_target.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { capitalize, computed, h, nextTick, onMounted, onUpdated, ref, render, useSlots } from 'vue';
+import { capitalize, computed, getCurrentInstance, h, nextTick, onMounted, onUpdated, ref, render, useSlots } from 'vue';
 import { DtNotice } from '@dialpad/dialtone-vue';
 
 const ERROR_MESSAGE = 'Invalid combination';
@@ -50,6 +50,11 @@ const emit = defineEmits([
 
 const slots = useSlots();
 
+// Standalone render() creates an app-less context; attaching appContext here
+// lets the target component and all its children (including DtcNode slots)
+// resolve globally registered components, directives, and provides.
+const { appContext } = getCurrentInstance();
+
 /**
  * Map object containing events and their respective handlers.
  *
@@ -114,11 +119,13 @@ function renderTarget () {
   const slotKey = Object.keys(slots).sort().join(',');
 
   try {
-    render(h(props.component, {
+    const vnode = h(props.component, {
       ...filteredBindings,
       ...events.value,
       key: slotKey,
-    }, slots), currentContainer);
+    }, slots);
+    vnode.appContext = appContext;
+    render(vnode, currentContainer);
   } catch (e) {
     console.warn('Rendering warning: \n', e);
     currentContainer = freshContainer();

packages/combinator/src/components/tools/node.test.js

@@ -0,0 +1,62 @@
+import DtcNode from './node.vue';
+
+import { expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+describe('node.vue test', function () {
+  describe('When a globally registered directive is used in the slot template', function () {
+    let wrapper;
+    let mountedSpy;
+
+    beforeEach(function () {
+      mountedSpy = { called: false };
+
+      wrapper = mount(DtcNode, {
+        props: {
+          template: '<div v-x-test></div>',
+        },
+        global: {
+          directives: {
+            'x-test': {
+              mounted () { mountedSpy.called = true; },
+            },
+          },
+        },
+      });
+    });
+
+    afterEach(function () {
+      wrapper.unmount();
+    });
+
+    it('Should fire the directive mounted hook', function () {
+      expect(mountedSpy.called).toBe(true);
+    });
+  });
+
+  describe('When a component is passed via the library prop', function () {
+    let wrapper;
+
+    beforeEach(function () {
+      const StubComponent = {
+        name: 'StubComponent',
+        template: '<span class="stub-rendered">stub</span>',
+      };
+
+      wrapper = mount(DtcNode, {
+        props: {
+          template: '<stub-component />',
+          library: { StubComponent },
+        },
+      });
+    });
+
+    afterEach(function () {
+      wrapper.unmount();
+    });
+
+    it('Should render the library component', function () {
+      expect(wrapper.find('.stub-rendered').exists()).toBe(true);
+    });
+  });
+});

packages/combinator/src/variants/variants_box.js

@@ -90,16 +90,28 @@ export default {
     },
   },
 
-  'sized': {
+  'fixed height with scrollbar': {
     props: {
       padding: { initialValue: '200' },
       surface: { initialValue: 'moderate' },
       borderWidth: { initialValue: '100' },
       inlineSize: { initialValue: '500' },
       blockSize: { initialValue: '600' },
+      scrollbar: { initialValue: 'always' },
     },
     slots: {
-      default: { initialValue: 'Fixed size' },
+      default: { initialValue: `<dt-stack gap="200">
+  <dt-text as="p" kind="body" size="200">Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dt-text>
+  <dt-text as="p" kind="body" size="200">Paragraph 2: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dt-text>
+  <dt-text as="p" kind="body" size="200">Paragraph 3: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</dt-text>
+  <dt-text as="p" kind="body" size="200">Paragraph 4: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dt-text>
+  <dt-text as="p" kind="body" size="200">Paragraph 5: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</dt-text>
+  <dt-text as="p" kind="body" size="200">Paragraph 6: Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</dt-text>
+  <dt-text as="p" kind="body" size="200">Paragraph 7: Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</dt-text>
+  <dt-text as="p" kind="body" size="200">Paragraph 8: Ut labore et dolore magnam aliquam quaerat voluptatem.</dt-text>
+  <dt-text as="p" kind="body" size="200">Paragraph 9: Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</dt-text>
+  <dt-text as="p" kind="body" size="200">Paragraph 10: At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.</dt-text>
+</dt-stack>` },
     },
   },