[vue] Code preview ignores<template> inside story template

Describe the bug <template> cut out from code preview <template v-slot> fully cutted with slot data, descendents

Expected behavior I expect to see the full code template in the preview

Code snippets

// ~/BaseTable.stories.js
export const CustomRender = (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { BaseButton, BaseTable },
    methods: {
        formatPrice,
    },
    template: `
  <BaseTable v-bind="$props">
    <template>
      <div>Template??</div>
    </template>
    <template v-slot:price="{ value }">
        {{ formatPrice(value) }}
    </template>
    <template v-slot:actions="{ row }">
        <BaseButton secondary small error icon="trash" />
    </template>
  </BaseTable>
`,
});

CustomRender.args = {
    ...Base.args,
    columns: [
        { dataPath: 'name', title: 'Название' },
        { dataPath: 'sku', title: 'Артикул', scopedSlots: { customRender: 'sku' } },
        { dataPath: 'price', title: 'Цена', scopedSlots: { customRender: 'price' } },
        { dataPath: '', scopedSlots: { customRender: 'actions' } },
    ],
};

code preview output

<template>
  <BaseTable
    :columns='...'
    :dataSource='...'
    defaultValue="—"
    rowKey="model_id"
  >
    <div>Template??</div>
  </BaseTable>
</template>

System Environment Info:

System: OS: Windows 10 10.0.19042 CPU: (8) x64 AMD Ryzen 5 3500U with Radeon Vega Mobile Gfx
Binaries: Node: 13.14.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD Browsers: hromium (88.0.705.81) npmPackages: @storybook/addon-actions: ^6.1.17 => 6.1.17 @storybook/addon-essentials: ^6.1.20 => 6.1.20 @storybook/addon-links: ^6.1.17 => 6.1.17 @storybook/vue: ^6.1.20 => 6.1.20

[alexmccabe]

I’m still having this issue and I think it’s a breaking issue for us. Named slots is a major Vue feature, and has been for a long time. Not having them rendered in the source code kinda defeats the purpose of educating the rest of the team how a component behaves and can be configured.

There could be scope for screwing around with a custom renderer in the preview.js but, that seems like a whole lot of work.

Really is a shame that it doesn’t work, we use component composition heavily and would love to be able to use this awesome tool to show off our components.

[shilman]

@smth to force no source code to display, set the docs.source parameter:

docs: { source: { type: 'code', code: null } },

cc @jonniebigodes