feat(unplugin): move parsing steps to unplugin (#43)

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>

Author: Tahul

.github/workflows/ci.yml

@@ -19,10 +19,15 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: '16'
-          cache: yarn
-      - run: yarn install
-      - run: yarn dev:prepare
-      - run: yarn lint
-      - run: yarn prepack
-      - run: yarn dev:generate
-      - run: yarn test
+      - uses: pnpm/action-setup@v2.2.2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 7
+          run_install: false
+      - run: pnpm install
+      - run: pnpm dev:prepare
+      - run: pnpm lint
+      - run: pnpm prepack
+      - run: pnpm dev:generate
+      - run: pnpm test

.gitignore

@@ -9,10 +9,6 @@ node_modules
 .tmp
 .cache
 
-# Yarn
-**/.yarn/cache
-**/.yarn/*state*
-
 # Generated dirs
 dist
 

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

README.md

@@ -9,8 +9,9 @@
 1. Add `nuxt-component-meta` dependency to your project:
 
 ```bash
-# Using Yarn
-yarn add --dev nuxt-component-meta
+# Using PNPM
+pnpm add -D nuxt-component-meta
+
 # Using NPM
 npm install --save-dev nuxt-component-meta
 ```
@@ -43,5 +44,5 @@ const { data: meta } = await useAsyncData('my-component', () => $fetch('/api/com
 ## Development
 
 1. Clone this repository
-2. Install dependencies using `yarn install`
-3. Start dev server using `yarn dev`
+2. Install dependencies using `pnpm install`
+3. Start dev server using `pnpm dev`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-component-meta",
-  "version": "0.2.3",
+  "version": "0.3.2",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -19,25 +19,43 @@
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:generate": "nuxi generate playground",
-    "dev:prepare": "nuxt-module-build --stub && yarn install --cwd ./playground && nuxi prepare playground",
+    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
     "lint": "eslint --ext .js,.ts,.vue .",
     "test": "vitest",
-    "release": "yarn test && standard-version && git push --follow-tags && npm publish"
+    "release": "pnpm test && standard-version && git push --follow-tags && npm publish"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.0.0-rc.10",
+    "@nuxt/kit": "^3.0.0-rc.12",
     "scule": "^0.3.2",
-    "vue-component-meta": "^0.40.13"
+    "vue-component-meta": "^1.0.8"
   },
   "devDependencies": {
     "@iconify/vue": "^4.0.0",
+    "@nuxt/content": "^2.1.1",
     "@nuxt/module-builder": "latest",
-    "@nuxt/test-utils": "^3.0.0-rc.10",
+    "@nuxt/test-utils": "^3.0.0-rc.12",
     "@nuxtjs/eslint-config-typescript": "latest",
-    "@nuxt/content": "npm:@nuxt/content-edge@latest",
     "eslint": "latest",
-    "nuxt": "^3.0.0-rc.10",
+    "nuxt": "^3.0.0-rc.12",
     "standard-version": "^9.5.0",
-    "vitest": "^0.23.4"
+    "typescript": "^4.8.4",
+    "vitest": "^0.24.3",
+    "vue": "^3.2.41"
+  },
+  "build": {
+    "externals": [
+      "#nuxt-component-meta",
+      "ufo",
+      "pathe",
+      "defu",
+      "unplugin"
+    ]
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "postcss*"
+      ]
+    }
   }
 }

playground/app.vue

@@ -1,14 +1,31 @@
 <template>
   <div>
-    <h2>Components from <code>/api/component-meta</code> nitro route</h2>
-    <pre>{{ data }}</pre>
-    <hr />
-    <h2>Components from <code>#nuxt-component-meta</code> virtual module</h2>
-    <pre>{{ components }}</pre>
+    <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 setup>
-import components from '#nuxt-component-meta'
-const { data } = await useAsyncData('metas', () => $fetch('/api/component-meta'))
+<script lang="ts" setup>
+import TestComponent from './components/TestComponent.vue'
+import TestTyped from './components/testTyped.vue'
+import { NuxtComponentMetaNames } from '#nuxt-component-meta/types'
+
+const specificComponentName = ref<NuxtComponentMetaNames>('TestComponent')
+
+const specificComponentMeta = await useComponentMeta(specificComponentName)
+
+const composableData = await useComponentMeta()
 </script>

playground/components/TestComponent.vue

@@ -1,16 +1,23 @@
 <template>
   <div>
-    <slot />
     <hr>
+    TestComponent
+    <hr>
+    <slot />
     <slot name="nuxt" />
   </div>
 </template>
 
 <script setup>
 defineProps({
+  /**
+   * The foo property.
+   *
+   * @since v1.0.0
+   */
   foo: {
     type: String,
-    required: true
+    default: 'Hello'
   },
   /**
    * The hello property.
@@ -30,5 +37,6 @@ defineProps({
     default: 1.3
   }
 })
+
 const emit = defineEmits(['change', 'delete'])
 </script>

playground/components/content/TestContent.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <ContentSlot :use="$slots.default" />
+  </div>
+</template>

playground/components/global/TestGlobalComponent.vue

@@ -1,3 +1,7 @@
 <template>
-  <div>I am global</div>
+  <div>
+    <hr>
+    I am global
+    <hr>
+  </div>
 </template>

playground/components/pinceau/TestPinceau.vue

@@ -0,0 +1,26 @@
+<template>
+  <div :class="$pinceau">
+    Hello World!
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  ...$variantsProps
+})
+</script>
+
+<style scoped lang="ts">
+css({
+  variants: {
+    background: {
+      red: {
+        background: 'red',
+      },
+      blue: {
+        background: 'blue',
+      }
+    }
+  }
+})
+</style>