Docs/vue component meta (#3352)

* docs: move api table out from runtime. Use vue-component-meta

* chore: update vue-tsc

* fix(docs): parse methods

* chore: remove extra import

* chore(docs): show kebab cased props

packages/docs/modules/page-config/blocks/api/component-parser/meta.ts

@@ -0,0 +1,16 @@
+import { resolveAlias } from '@nuxt/kit'
+
+import path from 'path'
+
+import type { MetaCheckerOptions } from 'vue-component-meta'
+import { createComponentMetaChecker } from 'vue-component-meta'
+
+const checkerOptions: MetaCheckerOptions = {
+  forceUseTs: true,
+  printer: { newLine: 1 },
+}
+
+export const checker = createComponentMetaChecker(
+  path.join(resolveAlias('@'), '..', './ui', 'tsconfig.json'),
+  checkerOptions,
+)

packages/docs/modules/page-config/blocks/api/index.ts

@@ -2,11 +2,13 @@ import { DefineComponent } from 'vue';
 import { definePageConfigBlock } from '../../types'
 import Component from './index.vue'
 import { VisualOptions, type ManualApiOptions } from './types';
+import type { ComponentMeta } from 'vue-component-meta'
 
 const setup = (
   componentName: string, 
   component: DefineComponent,
   cssVariables: string,
+  meta: ComponentMeta,
   manual?: ManualApiOptions,
   visualOptions?: VisualOptions,
 ) => {
@@ -15,6 +17,7 @@ const setup = (
     componentName,
     component,
     cssVariables,
+    meta,
     manual,
     visualOptions,
   }

packages/docs/modules/page-config/blocks/api/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { DefineComponent, PropType } from 'vue';
-import { parseComponent } from './component-parser'
 import merge from 'lodash/merge'
 import camelCase from 'lodash/camelCase'
 import ApiTable from './components/api-table.vue';
@@ -23,15 +22,19 @@ const props = defineProps({
     type: Array as PropType<CssVariables>,
     required: true,
   },
+  meta: {
+    type: Object as PropType<ManualApiOptions>,
+    required: true
+  },
   visualOptions: {
     type: Object as PropType<VisualOptions>,
     default: () => ({}),
   }
 })
 
-const options = parseComponent(props.component)
-
-const withManual = merge(options, props.manual as ManualApiOptions)
+const withManual = computed(() => {
+  return merge(props.meta, props.manual as ManualApiOptions)
+}) 
 
 const { t, te, fallbackLocale } = useI18n()
 
@@ -72,8 +75,8 @@ const cleanDefaultValue = (o: Record<string, any> | string) => {
   return str
 }
 
-const propsOptions = Object
-  .entries(withManual.props || {})
+const propsOptions = computed(() => Object
+  .entries(withManual.value.props || {})
   .filter(([key, prop]) => !prop.hidden)
   .map(([key, prop]) => ({
     name: { name: key, ...prop },
@@ -84,9 +87,10 @@ const propsOptions = Object
   .sort((a, b) => {
     return a.name.name.localeCompare(b.name.name)
   })
+)
 
-const eventsOptions = Object
-  .entries(withManual.events || {})
+const eventsOptions = computed(() => Object
+  .entries(withManual.value.events || {})
   .filter(([key, prop]) => !prop.hidden)
   .map(([key, prop]) => ({
     name: key,
@@ -95,31 +99,34 @@ const eventsOptions = Object
   .sort((a, b) => {
     return a.name.localeCompare(b.name)
   })
+)
 
-const slotsOptions = Object
-  .entries(withManual.slots || {})
+const slotsOptions = computed(() => Object
+  .entries(withManual.value.slots || {})
   .map(([key, prop]) => ({
     name: key,
     description: t(getTranslation('slots', key)),
   }))
   .sort((a, b) => {
     return a.name.localeCompare(b.name)
   })
+)
 
-const methodsOptions = Object
-  .entries(withManual.methods || {})
+const methodsOptions = computed(() => Object
+  .entries(withManual.value.methods || {})
   .map(([key, prop]) => ({
     name: key,
     description: t(getTranslation('methods', key)),
   }))
   .sort((a, b) => {
     return a.name.localeCompare(b.name)
   })
+)
 
-const cssVariablesOptions = props.cssVariables.map(([name, value, comment]) => ({
+const cssVariablesOptions = computed(() => props.cssVariables.map(([name, value, comment]) => ({
   name, value, /* comment */ // TODO: Enable comment when everywhere is used correct comments
   // TODO: Or add tanslations after i18n splitted
-}))
+})))
 </script>
 
 <template>

packages/docs/modules/page-config/blocks/api/transform.ts

@@ -2,8 +2,10 @@ import kebabCase from 'lodash/kebabCase';
 import { readFile } from 'fs/promises';
 import { defineBlockTransform } from "../../compiler/define-block-transform";
 import { CssVariables } from "./types";
+import { checker } from './component-parser/meta'
+import { ComponentMeta } from 'vue-component-meta';
 
-const parseCssComment = (line: string) => 
+const parseCssComment = (line: string) =>
   (line.match(/\/\/(.*)|\/\*(.*)\*\//) || []).slice(1).filter((s) => Boolean(s)).join('').trim()
 const parseCssVariables = (css: string | undefined): CssVariables => {
   if (!css) { return [] }
@@ -20,7 +22,7 @@ const parseCssVariables = (css: string | undefined): CssVariables => {
       variables.push([variable[0], variable[1], comment])
     }
   })
-  
+
   return variables
 }
 
@@ -29,6 +31,44 @@ const readCssVariables = async (path: string | undefined) => {
   return (await readFile(path, 'utf-8')).toString()
 }
 
+const stringifyMeta = (meta: ComponentMeta) => {
+  return JSON.stringify({
+    props: meta.props
+      .filter((prop) => !prop.global)
+      .sort((prop1, prop2) => Number(prop1.required) > Number(prop2.required) ? -1 : 1)
+      .reduce((acc, prop) => ({
+        ...acc,
+        [kebabCase(prop.name)]: ({
+          types: prop.type.replace(' | undefined', ''),
+          default: prop.default,
+          required: prop.required,
+        })
+      }), {}),
+    slots: meta.slots.reduce((acc, slot) => ({
+      ...acc,
+      [slot.name]: ({
+        types: slot.type
+      })
+    }), {}),
+    events: meta.events.reduce((acc, event) => ({
+      ...acc,
+      [event.name]: ({
+        types: event,
+      })
+    }), {}),
+    methods: {},
+    // TODO: We need to use exposed in components before
+    // methods: meta.exposed
+    //   .filter((method) => /^\(.*\)\s?=>.*$/.test(method.type))
+    //   .reduce((acc, method) => ({
+    //     ...acc,
+    //     [method.name]: ({
+    //       types: method.type,
+    //     }),
+    //   }), {})
+  })
+}
+
 export default defineBlockTransform(async function (block) {
   if (block.type !== 'api') { return }
 
@@ -40,5 +80,6 @@ export default defineBlockTransform(async function (block) {
   const cssVariablesFile = await readCssVariables(cssVariablesPath)
   const cssVariables = JSON.stringify(parseCssVariables(cssVariablesFile))
 
-  return block.replaceArgCode(0, `'${importName}', ${importComponent}, ${cssVariables}`)
+  const meta = checker.getComponentMeta(importPath, importName)
+  return block.replaceArgCode(0, `'${importName}', ${importComponent}, ${cssVariables}, ${stringifyMeta(meta)}`)
 })

packages/docs/modules/page-config/blocks/api/types.ts

@@ -22,6 +22,7 @@ export type ManualApiOptionsItem = {
 export type ManualPropApiOptions = ManualApiOptionsItem & {
   hidden?: boolean; // Won't appear in documentation. Intended for internal usage props, such as icon and color configs.
   types?: string;
+  default?: any;
   // add more here
 }
 

packages/docs/package.json

@@ -32,6 +32,7 @@
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
     "vitest": "^0.18.1",
+    "vue-component-meta": "^1.2.0",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.6",
     "vue-tsc": "^1.0.24"

packages/sandbox/package.json

@@ -44,7 +44,7 @@
     "vite": "^4.2.1",
     "vitest": "*",
     "vue-bundle-renderer": "0.4.1",
-    "vue-tsc": "^0.38.2",
+    "vue-tsc": "^1.2.0",
     "webpack": "5",
     "webpack-cli": "^4.9.2",
     "when-dependencies-installed": "^1.0.1"

packages/ui/package.json

@@ -116,7 +116,7 @@
     "vue": "^3.0.4",
     "vue-book": "0.2.0-alpha.0",
     "vue-loader": "^16.3.0",
-    "vue-tsc": "^0.38.2",
+    "vue-tsc": "^1.2.0",
     "vuelidate": "^0.7.5",
     "webpack": "^5.4.1",
     "webpack-bundle-analyzer": "^4.1.0",