Vue: Fix Unicode Default Values In Docs

code/e2e-sandbox/framework-vue3.spec.ts

@@ -46,4 +46,42 @@ test.describe('Vue 3', () => {
     await sbPage.selectToolbar('[aria-label^="Internationalization locale"]', 'text=/Español/');
     await expect(sbPage.previewRoot()).toContainText('Hola');
   });
+
+  // TODO: Re-enable this test once vue-component-meta is the default docgen and supports Vue 3.5 syntax.
+  test.skip('docs preserve unicode prop defaults from vue-component-meta', async ({ page }) => {
+    const sbPage = new SbPage(page, expect);
+    const docsPages = [
+      {
+        title: 'stories/renderers/vue3_vue3-vite-default-ts/component-meta/unicode-with-defaults',
+        expectedDefaults: [
+          ['Greeting', 'こんにちは'],
+          ['size', '大きい'],
+          ['icon', '🚀'],
+        ],
+      },
+      {
+        title: 'stories/renderers/vue3_vue3-vite-default-ts/component-meta/unicode-define-props',
+        expectedDefaults: [
+          ['Greeting', '你好'],
+          ['size', '大きい'],
+          ['icon', '✨'],
+        ],
+      },
+    ];
+
+    for (const { title, expectedDefaults } of docsPages) {
+      await sbPage.deepLinkToStory(storybookUrl, title, 'docs');
+
+      const argsTable = sbPage.previewRoot().locator('.docblock-argstable');
+      await expect(argsTable).toBeVisible();
+
+      for (const [propName, defaultValue] of expectedDefaults) {
+        await expect(argsTable.getByRole('row', { name: new RegExp(propName) })).toContainText(
+          defaultValue
+        );
+      }
+
+      await expect(argsTable).not.toContainText('\\u');
+    }
+  });
 });

code/frameworks/vue3-vite/package.json

@@ -53,7 +53,7 @@
     "@storybook/vue3": "workspace:*",
     "magic-string": "^0.30.0",
     "typescript": "^5.9.3",
-    "vue-component-meta": "^2.0.0",
+    "vue-component-meta": "^3.2.7",
     "vue-docgen-api": "^4.75.1"
   },
   "devDependencies": {

code/renderers/vue3/src/docs/tests-meta-components/meta-components.ts

@@ -1,10 +1,146 @@
 import { TypeSystem } from 'storybook/internal/docs-tools';
 
 import type { VueDocgenInfo } from '../../../../../frameworks/vue3-vite/src';
+import type { Declaration } from 'vue-component-meta';
+import type ts from 'typescript';
 
 type TestComponent = { __docgenInfo: VueDocgenInfo<'vue-component-meta'> };
+type LooseTestComponent = {
+  __docgenInfo: {
+    type: number;
+    props: unknown[];
+    events: unknown[];
+    slots: unknown[];
+    exposed: unknown[];
+  };
+};
+
+const ensureArray = (value: unknown): unknown[] => (Array.isArray(value) ? value : []);
+
+const ensureMetaMethods = (entry: Record<string, unknown>, allowUndefinedType = false) => {
+  if (!Array.isArray(entry.declarations)) {
+    entry.declarations = [];
+  }
+
+  if (typeof entry.getDeclarations !== 'function') {
+    entry.getDeclarations = () => entry.declarations as Declaration[];
+  }
+
+  if (typeof entry.getTypeObject !== 'function') {
+    entry.getTypeObject = () => {
+      if (allowUndefinedType) {
+        return undefined;
+      }
+
+      return entry.rawType as ts.Type;
+    };
+  }
+};
+
+const normalizePropertySchema = (schema: unknown) => {
+  if (!schema || typeof schema !== 'object') {
+    return;
+  }
+
+  const schemaEntry = schema as Record<string, unknown>;
+  if (
+    schemaEntry.kind === 'object' &&
+    schemaEntry.schema &&
+    typeof schemaEntry.schema === 'object'
+  ) {
+    Object.values(schemaEntry.schema as Record<string, unknown>).forEach((property) => {
+      normalizeProperty(property);
+    });
+    return;
+  }
+
+  const nestedSchema = ensureArray(schemaEntry.schema);
+  nestedSchema.forEach((nested) => {
+    if (!nested || typeof nested !== 'object') {
+      return;
+    }
+
+    normalizePropertySchema(nested);
+  });
+};
+
+const normalizeProperty = (property: unknown) => {
+  if (!property || typeof property !== 'object') {
+    return;
+  }
+
+  const propertyEntry = property as Record<string, unknown>;
+  ensureMetaMethods(propertyEntry);
+  normalizePropertySchema(propertyEntry.schema);
+};
+
+const normalizeEvent = (event: unknown) => {
+  if (!event || typeof event !== 'object') {
+    return;
+  }
+
+  const eventEntry = event as Record<string, unknown>;
+  if (!Array.isArray(eventEntry.tags)) {
+    eventEntry.tags = [];
+  }
+  ensureMetaMethods(eventEntry, true);
+
+  ensureArray(eventEntry.schema).forEach((schema) => {
+    normalizePropertySchema(schema);
+  });
+};
+
+const normalizeSlotOrExpose = (entry: unknown) => {
+  if (!entry || typeof entry !== 'object') {
+    return;
+  }
+
+  const slotOrExposeEntry = entry as Record<string, unknown>;
+  if (!Array.isArray(slotOrExposeEntry.tags)) {
+    slotOrExposeEntry.tags = [];
+  }
+  ensureMetaMethods(slotOrExposeEntry);
+  normalizePropertySchema(slotOrExposeEntry.schema);
+};
+
+const hasMetaMethods = (entry: unknown) => {
+  if (!entry || typeof entry !== 'object') {
+    return false;
+  }
 
-export const referenceTypeProps: TestComponent = {
+  const value = entry as Record<string, unknown>;
+  return typeof value.getDeclarations === 'function' && typeof value.getTypeObject === 'function';
+};
+
+const isTestComponent = (component: LooseTestComponent): component is TestComponent => {
+  const { __docgenInfo } = component;
+
+  const propsOk = __docgenInfo.props.every(hasMetaMethods);
+  const eventsOk = __docgenInfo.events.every(hasMetaMethods);
+  const slotsOk = __docgenInfo.slots.every(
+    (slot) => hasMetaMethods(slot) && Array.isArray((slot as Record<string, unknown>).tags)
+  );
+  const exposedOk = __docgenInfo.exposed.every(hasMetaMethods);
+
+  return propsOk && eventsOk && slotsOk && exposedOk;
+};
+
+const normalizeComponentMetaFixture = (component: LooseTestComponent): TestComponent => {
+  const { __docgenInfo } = component;
+
+  __docgenInfo.props.forEach(normalizeProperty);
+  __docgenInfo.events.forEach(normalizeEvent);
+  __docgenInfo.slots.forEach(normalizeSlotOrExpose);
+  __docgenInfo.exposed.forEach(normalizeSlotOrExpose);
+
+  if (!isTestComponent(component)) {
+    throw new TypeError('Failed to normalize vue-component-meta fixture.');
+  }
+
+  return component;
+};
+
+export const referenceTypeProps: TestComponent = normalizeComponentMetaFixture({
   __docgenInfo: {
     type: 1,
     props: [
@@ -473,7 +609,7 @@ export const referenceTypeProps: TestComponent = {
     slots: [],
     exposed: [],
   },
-};
+});
 
 export const mockExtractComponentPropsReturn = [
   {
@@ -1211,7 +1347,7 @@ export const mockExtractComponentPropsReturn = [
   },
 ];
 
-export const referenceTypeEvents: TestComponent = {
+export const referenceTypeEvents: TestComponent = normalizeComponentMetaFixture({
   __docgenInfo: {
     type: 1,
     props: [],
@@ -1298,7 +1434,7 @@ export const referenceTypeEvents: TestComponent = {
     slots: [],
     exposed: [],
   },
-};
+});
 
 export const mockExtractComponentEventsReturn = [
   {
@@ -1408,7 +1544,7 @@ export const mockExtractComponentEventsReturn = [
   },
 ];
 
-export const templateSlots: TestComponent = {
+export const templateSlots: TestComponent = normalizeComponentMetaFixture({
   __docgenInfo: {
     type: 1,
     props: [],
@@ -1504,7 +1640,7 @@ export const templateSlots: TestComponent = {
     ],
     exposed: [],
   },
-};
+});
 
 export const mockExtractComponentSlotsReturn = [
   {

code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/UnicodeDefineProps.stories.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Component from './unicode-defaults/destructured-define-props.vue';
+
+const meta = {
+  component: Component,
+  tags: ['autodocs'],
+  title: 'stories/renderers/vue3_vue3-vite-default-ts/component-meta/unicode-define-props',
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+export default meta;
+
+export const Default: Story = {};

code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/UnicodeWithDefaults.stories.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Component from './unicode-defaults/with-defaults.vue';
+
+const meta = {
+  component: Component,
+  tags: ['autodocs'],
+  title: 'stories/renderers/vue3_vue3-vite-default-ts/component-meta/unicode-with-defaults',
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+export default meta;
+
+export const Default: Story = {};

code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/unicode-defaults/destructured-define-props.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const {
+  label = '你好',
+  size = '大きい',
+  icon = '✨',
+} = defineProps<{
+  /**
+   * Greeting label.
+   */
+  label?: string;
+  /**
+   * Size label.
+   */
+  size?: string;
+  /**
+   * Decorative icon.
+   */
+  icon?: string;
+}>();
+</script>
+
+<template>
+  <p>{{ label }} - {{ size }} - {{ icon }}</p>
+</template>

code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/unicode-defaults/with-defaults.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    /**
+     * Greeting label.
+     */
+    label?: string;
+    /**
+     * Size label.
+     */
+    size?: string;
+    /**
+     * Decorative icon.
+     */
+    icon?: string;
+  }>(),
+  {
+    label: 'こんにちは',
+    size: '大きい',
+    icon: '🚀',
+  }
+);
+</script>
+
+<template>
+  <p>{{ label }} - {{ size }} - {{ icon }}</p>
+</template>