Skip to content

Commit 31bfaba

Browse files
farnabazfarnabaz
committed
feat: component parser and props validator utility
1 parent 3569dc2 commit 31bfaba

26 files changed

+2653
-430
lines changed

‎package.json

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,14 @@
1414
".": {
1515
"import": "./dist/module.mjs",
1616
"types": "./dist/types.d.mts"
17+
},
18+
"./utils": {
19+
"import": "./dist/utils.mjs",
20+
"types": "./dist/utils.d.mts"
21+
},
22+
"./parser": {
23+
"import": "./dist/parser.mjs",
24+
"types": "./dist/parser.d.mts"
1725
}
1826
},
1927
"main": "./dist/module.mjs",
@@ -41,21 +49,22 @@
4149
"dependencies": {
4250
"@nuxt/kit": "^3.17.6",
4351
"citty": "^0.1.6",
52+
"json-schema-to-zod": "^2.6.1",
4453
"mlly": "^1.7.4",
4554
"ohash": "^2.0.11",
4655
"scule": "^1.3.0",
4756
"typescript": "^5.8.3",
4857
"ufo": "^1.6.1",
49-
"vue-component-meta": "^3.0.0"
58+
"vue-component-meta": "^3.0.1"
5059
},
5160
"devDependencies": {
5261
"@iconify/vue": "^5.0.0",
53-
"@nuxt/content": "^3.6.1",
54-
"@nuxt/eslint-config": "^1.5.0",
62+
"@nuxt/content": "^3.6.3",
63+
"@nuxt/eslint-config": "^1.5.2",
5564
"@nuxt/module-builder": "^1.0.1",
5665
"@nuxt/test-utils": "^3.19.2",
5766
"@nuxtjs/eslint-config-typescript": "^12.1.0",
58-
"changelogen": "^0.6.1",
67+
"changelogen": "^0.6.2",
5968
"eslint": "^9.30.1",
6069
"jiti": "^2.4.2",
6170
"nuxt": "^3.17.6",
@@ -66,7 +75,11 @@
6675
"build": {
6776
"entries": [
6877
{
69-
"input": "./src/parser.ts",
78+
"input": "./src/utils/index.ts",
79+
"name": "utils"
80+
},
81+
{
82+
"input": "./src/parser/index.ts",
7083
"name": "parser"
7184
},
7285
{
@@ -93,7 +106,9 @@
93106
]
94107
},
95108
"onlyBuiltDependencies": [
96-
"esbuild"
109+
"@tailwindcss/oxide",
110+
"esbuild",
111+
"vue-demi"
97112
]
98113
},
99114
"packageManager": "pnpm@10.12.4",

‎playground/app.vue

Lines changed: 2 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,3 @@
11
<template>
2-
<div>
3-
<div>
4-
<TestComponent foo="test" />
5-
<TestGlobalComponent />
6-
<TestTyped :hello="`test`" />
7-
</div>
8-
9-
<h2>Components from <code>useComponentMeta('{{ specificComponentName }}')</code></h2>
10-
11-
<pre>{{ specificComponentMeta }}</pre>
12-
13-
<h2>Components from <code>useComponentMeta</code></h2>
14-
15-
<pre>{{ composableData }}</pre>
16-
17-
<hr>
18-
</div>
19-
</template>
20-
21-
<script lang="ts" setup>
22-
import TestComponent from './components/TestComponent.vue'
23-
import TestTyped from './components/testTyped.vue'
24-
import type { NuxtComponentMetaNames } from '#nuxt-component-meta/types'
25-
26-
const specificComponentName = ref<NuxtComponentMetaNames>('TestContent')
27-
28-
const specificComponentMeta = await useComponentMeta(specificComponentName)
29-
30-
const composableData = await useComponentMeta()
31-
</script>
32-
33-
<style lang="postcss">
34-
body {
35-
font-size: 12px;
36-
}
37-
</style>
2+
<NuxtPage />
3+
</template>

‎playground/assets/css/main.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import 'tailwindcss';
2+
@import '@nuxt/ui-pro';

‎playground/components/CodeEditor.vue

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<AmoAYunMonacoEditorVue3
3+
v-model="modelValue"
4+
:language="language"
5+
theme="vs-dark"
6+
style="height: 100%; width: 100%"
7+
/>
8+
</template>
9+
10+
<script setup>
11+
import { AmoAYunMonacoEditorVue3 } from '@amoayun/monaco-editor-vue3';
12+
13+
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
14+
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
15+
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
16+
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
17+
18+
19+
self.MonacoEnvironment = {
20+
getWorker(_, label) {
21+
if (label === 'json') return new jsonWorker();
22+
if (label === 'typescript' || label === 'javascript') return new tsWorker();
23+
if (label === 'html' || label === 'vue') return new htmlWorker();
24+
return new editorWorker();
25+
}
26+
};
27+
28+
defineProps({
29+
language: {
30+
type: String,
31+
default: 'javascript'
32+
}
33+
});
34+
35+
const modelValue = defineModel();
36+
37+
</script>

‎playground/components/TestComponent.vue

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,19 @@
88
</div>
99
</template>
1010

11-
<script setup>
11+
<script setup lang="ts">
12+
import type { PropType } from 'vue'
13+
14+
interface ArrayItem {
15+
name: string
16+
age: number
17+
}
18+
1219
defineProps({
20+
name: {
21+
type: String,
22+
required: true
23+
},
1324
/**
1425
* The foo property.
1526
*
@@ -35,6 +46,22 @@ defineProps({
3546
numberProp: {
3647
type: Number,
3748
default: 1.3
49+
},
50+
data: {
51+
type: Object as PropType<{ gello: string }>,
52+
default: () => ({})
53+
},
54+
array: {
55+
type: Array as PropType<Array<ArrayItem>>,
56+
default: () => []
57+
},
58+
stringArray: {
59+
type: Array as PropType<Array<string>>,
60+
default: () => []
61+
},
62+
numberArray: {
63+
type: Array as PropType<Array<number>>,
64+
default: () => []
3865
}
3966
})
4067

‎playground/components/test.vue

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<div>
3+
<hr>
4+
TestComponent
5+
<hr>
6+
<slot />
7+
<slot name="nuxt" />
8+
</div>
9+
</template>
10+
11+
<script setup lang="ts">
12+
import type { PropType } from 'vue'
13+
14+
interface ArrayItem {
15+
name: string
16+
age: number
17+
}
18+
19+
defineProps({
20+
name: {
21+
type: String,
22+
required: true
23+
},
24+
/**
25+
* The foo property.
26+
*
27+
* @since v1.0.0
28+
*/
29+
foo: {
30+
type: String,
31+
default: 'Hello'
32+
},
33+
/**
34+
* The hello property.
35+
*
36+
* @since v1.0.0
37+
*/
38+
hello: {
39+
type: String,
40+
default: 'Hello'
41+
},
42+
booleanProp: {
43+
type: Boolean,
44+
default: false
45+
},
46+
numberProp: {
47+
type: Number,
48+
default: 1.3
49+
},
50+
data: {
51+
type: Object as PropType<{ gello: string }>,
52+
default: () => ({})
53+
},
54+
array: {
55+
type: Array as PropType<Array<ArrayItem>>,
56+
default: () => []
57+
},
58+
stringArray: {
59+
type: Array as PropType<Array<string>>,
60+
default: () => []
61+
},
62+
numberArray: {
63+
type: Array as PropType<Array<number>>,
64+
default: () => []
65+
}
66+
})
67+
68+
defineEmits(['change', 'delete'])
69+
70+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
71+
const test = {}
72+
</script>

‎playground/nuxt.config.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import nuxtMetaModule from '../src/module'
22

33
export default defineNuxtConfig({
4+
css: ['~/assets/css/main.css'],
5+
46
components: {
57
dirs: [
68
{
@@ -14,6 +16,7 @@ export default defineNuxtConfig({
1416

1517
modules: [
1618
'@nuxt/content',
19+
'@nuxt/ui-pro',
1720
nuxtMetaModule as any
1821
],
1922

‎playground/package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,17 @@
33
"name": "nuxt-component-meta-playground",
44
"devDependencies": {
55
"@nuxt/content": "^3.6.1",
6+
"@nuxt/ui-pro": "^3.2.0",
67
"nuxt": "^3.17.6",
78
"nuxt-component-meta": "link:.."
89
},
910
"scripts": {
1011
"dev": "nuxi dev",
1112
"build": "nuxi build",
1213
"generate": "nuxi generate"
14+
},
15+
"dependencies": {
16+
"@amoayun/monaco-editor-vue3": "^1.0.20",
17+
"monaco-editor": "^0.52.2"
1318
}
1419
}

‎playground/pages/index.vue

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<div>
3+
<div>
4+
<TestComponent foo="test" />
5+
<TestGlobalComponent />
6+
<TestTyped :hello="`test`" />
7+
</div>
8+
9+
<h2>Components from <code>useComponentMeta('{{ specificComponentName }}')</code></h2>
10+
11+
<pre>{{ specificComponentMeta }}</pre>
12+
13+
<h2>Components from <code>useComponentMeta</code></h2>
14+
15+
<pre>{{ composableData }}</pre>
16+
17+
<hr>
18+
</div>
19+
</template>
20+
21+
<script lang="ts" setup>
22+
import TestComponent from '../components/TestComponent.vue'
23+
import TestTyped from '../components/testTyped.vue'
24+
import type { NuxtComponentMetaNames } from '#nuxt-component-meta/types'
25+
26+
const specificComponentName = ref<NuxtComponentMetaNames>('TestContent')
27+
28+
const specificComponentMeta = await useComponentMeta(specificComponentName)
29+
30+
const composableData = await useComponentMeta()
31+
</script>
32+
33+
<style lang="postcss">
34+
body {
35+
font-size: 12px;
36+
}
37+
</style>

0 commit comments

Comments
 (0)