73 composables return asyncdata like usefetch (#78)

* make composables return AsyncData like useFetch #73

* fix two small lint reported issues

* chore(deps):

docs/tsconfig.json

@@ -1,4 +1,9 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
+  "exclude": [
+    "node_modules",
+    "dist",
+    ".nuxt",
+  ]
 }

package.json

@@ -18,15 +18,16 @@
     "dist"
   ],
   "scripts": {
-    "build": "npm run prepack",
+    "build": "nuxt-module-build build && pnpm build:web-types",
+    "build:web-types": "vue-docgen-web-types src/runtime/components/ ./dist/web-types.json",
     "prepare": "nuxi prepare .",
     "prepack": "nuxt-module-build build",
     "generate": "pnpm --filter ./playground/ run generate",
     "dev": "pnpm --filter ./playground/ run dev --host app.local",
     "dev:build": "pnpm --filter ./playground/ run build",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "release": "npm run lint &&  npm run prepack && changelogen --release && npm publish && git push --follow-tags",
-    "release:major": "npm run lint &&  npm run prepack && changelogen --release --major && npm publish && git push --follow-tags",
+    "release": "npm run lint && nuxi prepare && nuxt-module-build build && changelogen --release && pnpm publish && git push --follow-tags",
+    "release:major": "npm run lint && nuxi prepare && nuxt-module-build build && changelogen --release --major && pnpm publish && git push --follow-tags",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test": "vitest run",
@@ -72,6 +73,7 @@
     "typescript": "^5.4.5",
     "untyped": "1.4.2",
     "vitest": "^1.6.0",
+    "vue-docgen-web-types": "^0.1.8",
     "vue-tsc": "^2.0.16"
   }
-}
+}

playground/app.vue

@@ -1,63 +1,16 @@
 <script setup lang="ts">
-import type { Menu } from '#graphql-operations'
-import { useRuntimeConfig, ref, watch, getCurrentUserName, useMenu, isStaging } from '#imports'
+import { isStaging } from '#imports'
 
-const config = useRuntimeConfig()
-const stagingUrl = config.public.wpNuxt.stagingUrl
-const menu: Menu = await useMenu('main')
-const userName = ref<string>()
-userName.value = getCurrentUserName()
-watch(() => getCurrentUserName(), (newVal) => {
-  userName.value = newVal
-})
-const wpLinks = menu?.map(page => ({
-  label: page.label,
-  to: page.uri,
-}))
-const links = [
-  ...wpLinks,
-  {
-    label: 'Test',
-    to: '/test',
-  },
-  {
-    label: 'Auth',
-    to: '/auth',
-  },
-]
 const staging = await isStaging()
 </script>
 
 <template>
   <StagingBanner v-if="staging" />
   <div :class="staging ? 'mt-[34px]' : 'mt-0'">
-    <UHeader :links="links">
-      <template #logo>
-        <WPNuxtLogo /> <span class="text-lg">playground</span>
-      </template>
-      <template #right>
-        <UColorModeButton variant="soft" />
-        <UButton
-          v-if="!staging"
-          :to="stagingUrl"
-          icon="i-heroicons-pencil"
-          variant="soft"
-          size="sm"
-        >
-          Staging
-        </UButton>
-      </template>
-    </UHeader>
+    <HeaderComponent />
     <UMain>
       <NuxtPage />
     </UMain>
-    <UFooter :links="links">
-      <template #left>
-        <span class="text-sm">a Proof of Concept by <NuxtLink
-          href="https://vernaillen.dev"
-          target="_blank"
-        >Wouter Vernaillen</NuxtLink></span>
-      </template>
-    </UFooter>
+    <UFooter />
   </div>
 </template>

playground/components/HeaderComponent.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useMenu } from '#imports'
+
+const { data: menu } = await useMenu('main')
+
+const wpLinks = menu.value?.map(link => ({
+  label: link.label,
+  to: link.uri,
+}))
+const links = [
+  ...wpLinks,
+  {
+    label: 'Test',
+    to: '/test',
+  },
+  {
+    label: 'Auth',
+    to: '/auth',
+  },
+  {
+    label: 'Error Handling',
+    to: '/errorHandling',
+  },
+]
+</script>
+
+<template>
+  <UHeader :links="links">
+    <template #logo>
+      <WPNuxtLogo /> <span class="text-lg">playground</span>
+    </template>
+    <template #right>
+      <UColorModeButton />
+    </template>
+  </UHeader>
+</template>

playground/error.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { NuxtError } from '#app'
+import { isStaging } from '#imports'
+
+const props = defineProps({
+  error: {
+    type: Object as PropType<NuxtError>,
+    required: true,
+  },
+})
+if (props.error.statusCode !== 404) {
+  console.error(props.error.message)
+}
+const staging = await isStaging()
+</script>
+
+<template>
+  <div :class="staging ? 'mt-[34px]' : 'mt-0'">
+    <HeaderComponent />
+    <UMain>
+      <UContainer>
+        <UPage>
+          <UPageError
+            :status="error.statusCode"
+            :name="error.statusMessage"
+            :message="error.message"
+          />
+        </UPage>
+      </UContainer>
+    </UMain>
+    <UFooter />
+  </div>
+</template>

playground/pages/[...slug].vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import type { Post, Page } from '#graphql-operations'
-import { isStaging, useHead, useRoute, useWPUri, useNodeByUri, ref } from '#imports'
+import { isStaging, useHead, useRoute, useWPUri, useNodeByUri, ref, createError } from '#imports'
 
 const route = useRoute()
-const post = ref<Post | Page>()
+const post = ref<Post | Page | null>()
 if (route.params.slug && route.params.slug[0]) {
-  post.value = await useNodeByUri(route.params.slug[0])
+  const { data } = await useNodeByUri(route.params.slug[0])
+  post.value = data.value
+}
+if (!post.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
 }
 const wpUri = useWPUri()
 if (post.value?.title) {

playground/pages/errorHandling.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { createError, usePostByUri } from '#imports'
+
+const { data: post } = await usePostByUri('missingUriForTesting')
+if (!post.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+</script>
+
+<template>
+  <div>
+    <UContainer class="prose dark:prose-invert pt-5">
+      You should never see this<br>
+      {{ post }}
+    </UContainer>
+  </div>
+</template>

playground/pages/index.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { Post, GeneralSettings } from '#graphql-operations'
 import { useHead, useLatestPost, usePosts, useGeneralSettings } from '#imports'
 
-const posts: Post[] = await usePosts()
-const settings: GeneralSettings = await useGeneralSettings()
-const latestPost: Post = await useLatestPost()
+const { data: posts } = await usePosts()
+const { data: settings } = await useGeneralSettings()
+const { data: latestPost } = await useLatestPost()
 useHead({
-  title: settings.title,
+  title: settings.value.title,
 })
 </script>
 

playground/pages/pages.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { usePages } from '#imports'
+
+const { data: pages } = await usePages()
+</script>
+
+<template>
+  <div>
+    <ULandingSection
+      title="Pages"
+      headline="testing the usePages() composable"
+    >
+      <UPageGrid>
+        <ULandingCard
+          v-for="post, index in pages"
+          :key="index"
+          :title="post.title"
+          :description="post.date?.split('T')[0]"
+          :to="post.uri"
+        >
+          <img
+            v-if="post?.featuredImage?.node?.sourceUrl"
+            :src="post.featuredImage.node.sourceUrl"
+            class="w-full rounded-md"
+          >
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <span v-html="post.excerpt" />
+        </ULandingCard>
+      </UPageGrid>
+    </ULandingSection>
+  </div>
+</template>

playground/pages/test.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { getCurrentUserName, isStaging, useGeneralSettings, useRevisions, useRuntimeConfig, useViewer, useWPUri } from '#imports'
+import { getCurrentUserName, isStaging, useGeneralSettings, useRuntimeConfig, useViewer, useWPUri } from '#imports'
 
 const wpUri = useWPUri()
-const viewer = await useViewer()
-const settings = await useGeneralSettings()
-const revisions = await useRevisions()
+const { data: viewer } = await useViewer()
+const { data: settings } = await useGeneralSettings()
 const staging = await isStaging()
 const userName = getCurrentUserName()
 
@@ -14,27 +13,19 @@ const wpNuxtConfig = config.public.wpNuxt
 
 <template>
   <div>
-    <UContainer class="prose dark:prose-invert">
+    <UContainer class="prose dark:prose-invert pt-5">
       <h2>wpUri:</h2>
-      {{ wpUri }}
+      <pre>{{ wpUri }}</pre>
       <h2>wpNuxtConfig:</h2>
-      {{ wpNuxtConfig }}
-
+      <pre>{{ wpNuxtConfig }}</pre>
       <h2>await useViewer()</h2>
-      {{ viewer }}
+      <pre>{{ viewer }}</pre>
       <h2>getCurrentUserName()</h2>
-      {{ userName }}
-      <UDivider />
+      <pre>{{ userName }}</pre>
       <h2>isStaging()</h2>
       <pre>{{ staging }}</pre>
-
-      <UDivider />
-      <h2>useSettings()</h2>
+      <h2>useGeneralSettings()</h2>
       <pre>{{ settings }}</pre>
-
-      <UDivider />
-      <h2>useRevisions()</h2>
-      <pre>{{ revisions }}</pre>
     </UContainer>
   </div>
 </template>