fea: introduce component parser utility

package.json

@@ -14,6 +14,14 @@
     ".": {
       "import": "./dist/module.mjs",
       "types": "./dist/types.d.mts"
+    },
+    "./utils": {
+      "import": "./dist/utils.mjs",
+      "types": "./dist/utils.d.mts"
+    },
+    "./parser": {
+      "import": "./dist/parser.mjs",
+      "types": "./dist/parser.d.mts"
     }
   },
   "main": "./dist/module.mjs",
@@ -41,21 +49,22 @@
   "dependencies": {
     "@nuxt/kit": "^3.17.6",
     "citty": "^0.1.6",
+    "json-schema-to-zod": "^2.6.1",
     "mlly": "^1.7.4",
     "ohash": "^2.0.11",
     "scule": "^1.3.0",
     "typescript": "^5.8.3",
     "ufo": "^1.6.1",
-    "vue-component-meta": "^3.0.0"
+    "vue-component-meta": "^3.0.1"
   },
   "devDependencies": {
     "@iconify/vue": "^5.0.0",
-    "@nuxt/content": "^3.6.1",
-    "@nuxt/eslint-config": "^1.5.0",
+    "@nuxt/content": "^3.6.3",
+    "@nuxt/eslint-config": "^1.5.2",
     "@nuxt/module-builder": "^1.0.1",
     "@nuxt/test-utils": "^3.19.2",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
-    "changelogen": "^0.6.1",
+    "changelogen": "^0.6.2",
     "eslint": "^9.30.1",
     "jiti": "^2.4.2",
     "nuxt": "^3.17.6",
@@ -66,7 +75,11 @@
   "build": {
     "entries": [
       {
-        "input": "./src/parser.ts",
+        "input": "./src/utils/index.ts",
+        "name": "utils"
+      },
+      {
+        "input": "./src/parser/index.ts",
         "name": "parser"
       },
       {
@@ -93,7 +106,9 @@
       ]
     },
     "onlyBuiltDependencies": [
-      "esbuild"
+      "@tailwindcss/oxide",
+      "esbuild",
+      "vue-demi"
     ]
   },
   "packageManager": "pnpm@10.12.4",

playground/app.vue

@@ -1,37 +1,3 @@
 <template>
-  <div>
-    <div>
-      <TestComponent foo="test" />
-      <TestGlobalComponent />
-      <TestTyped :hello="`test`" />
-    </div>
-
-    <h2>Components from <code>useComponentMeta('{{ specificComponentName }}')</code></h2>
-
-    <pre>{{ specificComponentMeta }}</pre>
-
-    <h2>Components from <code>useComponentMeta</code></h2>
-
-    <pre>{{ composableData }}</pre>
-
-    <hr>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import TestComponent from './components/TestComponent.vue'
-import TestTyped from './components/testTyped.vue'
-import type { NuxtComponentMetaNames } from '#nuxt-component-meta/types'
-
-const specificComponentName = ref<NuxtComponentMetaNames>('TestContent')
-
-const specificComponentMeta = await useComponentMeta(specificComponentName)
-
-const composableData = await useComponentMeta()
-</script>
-
-<style lang="postcss">
-body {
-  font-size: 12px;
-}
-</style>
+  <NuxtPage />
+</template>

playground/assets/css/main.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import '@nuxt/ui-pro';

playground/components/CodeEditor.vue

@@ -0,0 +1,37 @@
+<template>
+  <AmoAYunMonacoEditorVue3
+    v-model="modelValue"
+    :language="language"
+    theme="vs-dark"
+    style="height: 100%; width: 100%"
+  />
+</template>
+
+<script setup>
+import { AmoAYunMonacoEditorVue3 } from '@amoayun/monaco-editor-vue3';
+
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+
+
+self.MonacoEnvironment = {
+  getWorker(_, label) {
+    if (label === 'json') return new jsonWorker();
+    if (label === 'typescript' || label === 'javascript') return new tsWorker();
+    if (label === 'html' || label === 'vue') return new htmlWorker();
+    return new editorWorker();
+  }
+};
+
+defineProps({
+  language: {
+    type: String,
+    default: 'javascript'
+  }
+});
+
+const modelValue = defineModel();
+
+</script>

playground/components/TestComponent.vue

@@ -8,8 +8,19 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+interface ArrayItem {
+  name: string
+  age: number
+}
+
 defineProps({
+  name: {
+    type: String,
+    required: true
+  },
   /**
    * The foo property.
    *
@@ -35,6 +46,22 @@ defineProps({
   numberProp: {
     type: Number,
     default: 1.3
+  },
+  data: {
+    type: Object as PropType<{ gello: string }>,
+    default: () => ({})
+  },
+  array: {
+    type: Array as PropType<Array<ArrayItem>>,
+    default: () => []
+  },
+  stringArray: {
+    type: Array as PropType<Array<string>>,
+    default: () => []
+  },
+  numberArray: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
   }
 })
 

playground/components/TestD.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+defineProps<{
+  msg: string
+  count: number
+  disabled: boolean
+  /**
+   * FOOOOOO
+   */
+  foo: Array<string>
+  bar: Array<string | number>
+}>()
+
+</script>
+
+<template>
+  <span class="text-green-500">
+    Test C <slot />
+  </span>
+</template>

playground/components/test.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <hr>
+    TestComponent
+    <hr>
+    <slot />
+    <slot name="nuxt" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+interface ArrayItem {
+  name: string
+  age: number
+}
+
+defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  /**
+   * The foo property.
+   *
+   * @since v1.0.0
+   */
+  foo: {
+    type: String,
+    default: 'Hello'
+  },
+  /**
+   * The hello property.
+   *
+   * @since v1.0.0
+   */
+  hello: {
+    type: String,
+    default: 'Hello'
+  },
+  booleanProp: {
+    type: Boolean,
+    default: false
+  },
+  numberProp: {
+    type: Number,
+    default: 1.3
+  },
+  data: {
+    type: Object as PropType<{ gello: string }>,
+    default: () => ({})
+  },
+  array: {
+    type: Array as PropType<Array<ArrayItem>>,
+    default: () => []
+  },
+  stringArray: {
+    type: Array as PropType<Array<string>>,
+    default: () => []
+  },
+  numberArray: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  }
+})
+
+defineEmits(['change', 'delete'])
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const test = {}
+</script>

playground/nuxt.config.ts

@@ -1,6 +1,8 @@
 import nuxtMetaModule from '../src/module'
 
 export default defineNuxtConfig({
+  css: ['~/assets/css/main.css'],
+
   components: {
     dirs: [
       {
@@ -14,6 +16,7 @@ export default defineNuxtConfig({
 
   modules: [
     '@nuxt/content',
+    '@nuxt/ui-pro',
     nuxtMetaModule as any
   ],
 

playground/package.json

@@ -3,12 +3,17 @@
   "name": "nuxt-component-meta-playground",
   "devDependencies": {
     "@nuxt/content": "^3.6.1",
+    "@nuxt/ui-pro": "^3.2.0",
     "nuxt": "^3.17.6",
     "nuxt-component-meta": "link:.."
   },
   "scripts": {
     "dev": "nuxi dev",
     "build": "nuxi build",
     "generate": "nuxi generate"
+  },
+  "dependencies": {
+    "@amoayun/monaco-editor-vue3": "^1.0.20",
+    "monaco-editor": "^0.52.2"
   }
 }

playground/pages/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <div>
+      <TestComponent foo="test" />
+      <TestGlobalComponent />
+      <TestTyped :hello="`test`" />
+    </div>
+
+    <h2>Components from <code>useComponentMeta('{{ specificComponentName }}')</code></h2>
+
+    <pre>{{ specificComponentMeta }}</pre>
+
+    <h2>Components from <code>useComponentMeta</code></h2>
+
+    <pre>{{ composableData }}</pre>
+
+    <hr>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import TestComponent from '../components/TestComponent.vue'
+import TestTyped from '../components/testTyped.vue'
+import type { NuxtComponentMetaNames } from '#nuxt-component-meta/types'
+
+const specificComponentName = ref<NuxtComponentMetaNames>('TestContent')
+
+const specificComponentMeta = await useComponentMeta(specificComponentName)
+
+const composableData = await useComponentMeta()
+</script>
+
+<style lang="postcss">
+body {
+  font-size: 12px;
+}
+</style>