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",